@latest-thinking/lt-player 1.0.6-b → 1.0.7

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -706,46 +706,56 @@ export namespace LTPlayerControlsEvents  {
         }
 
 
-        volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        settings(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             let playerControlsContainer = instance.plyr.elements.controls;
-            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-            const volumeButton = volume.querySelector('button');
-            const volumeUp = volume.querySelector('.volume-max');
-            const volumeMute = volume.querySelector('.volume-mute');
-
-            const setVolumeIcon = (volumeState: string) => {
-                if (volumeState === 'up') {
-                    volumeUp.classList.remove('d-none');
-                    volumeMute.classList.remove('d-none');
-                    volumeMute.classList.add('d-none');
-                } else {
-                    volumeUp.classList.remove('d-none');
-                    volumeMute.classList.remove('d-none');
-                    volumeUp.classList.add('d-none');
-                }
-            }
-
-            const setVolume = (): string => {
-                if (instance.plyr.muted) {
-                    instance.plyr.muted = false;
-                    return 'up';
-                } else {
-                    instance.plyr.muted = true;
-                    return 'mute';
-                }
-            }
+            const settingsButton = playerControlsContainer.querySelector('.plyr__controls_settings-button');
 
-            setVolumeIcon('up');
-
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
-
-            mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
-                let volumeState = setVolume();
-                setVolumeIcon(volumeState);
-                instance.playerControl.mobileEvents.showControls(instance);
-            })
+            if (settingsButton) {
 
+            }
         }
+
+        //remove volume
+        // volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        //     let playerControlsContainer = instance.plyr.elements.controls;
+        //     const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+        //     const volumeButton = volume.querySelector('button');
+        //     const volumeUp = volume.querySelector('.volume-max');
+        //     const volumeMute = volume.querySelector('.volume-mute');
+        //
+        //     const setVolumeIcon = (volumeState: string) => {
+        //         if (volumeState === 'up') {
+        //             volumeUp.classList.remove('d-none');
+        //             volumeMute.classList.remove('d-none');
+        //             volumeMute.classList.add('d-none');
+        //         } else {
+        //             volumeUp.classList.remove('d-none');
+        //             volumeMute.classList.remove('d-none');
+        //             volumeUp.classList.add('d-none');
+        //         }
+        //     }
+        //
+        //     const setVolume = (): string => {
+        //         if (instance.plyr.muted) {
+        //             instance.plyr.muted = false;
+        //             return 'up';
+        //         } else {
+        //             instance.plyr.muted = true;
+        //             return 'mute';
+        //         }
+        //     }
+        //
+        //     setVolumeIcon('up');
+        //
+        //     let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
+        //
+        //     mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
+        //         let volumeState = setVolume();
+        //         setVolumeIcon(volumeState);
+        //         instance.playerControl.mobileEvents.showControls(instance);
+        //     })
+        //
+        // }
     }
 
 

package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts

@@ -18,7 +18,6 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     }
 
     addOpenSettingsEventButton() {
-
         const selectors: defaultType = this.settingsInstance.common.getSelectors();
 
         selectors.button.addEventListener('click', (event: MouseEvent) => {

package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts

@@ -1,6 +1,5 @@
 import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManager";
 import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
-import {defaultType} from "../../../global/types/ModuleTypes";
 
 export class LTPlayerMobileSettingsControllers implements SettingsControlsInterfaces {
     settingsInstance: LTPlayerSettingsControlsManager
@@ -10,48 +9,185 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
     }
 
     init() {
-        this.settingsInstance.common.addSettingsTemplate(this.settingsInstance.playerInstance.playerConfig.getDevice());
-        this.setDefaultSpeed();
-        this.setButtonSpeed();
+        this.addOpenSettingsEventButton();
     }
 
-    setDefaultSpeed() {
-        this.settingsInstance.playerInstance.plyr.speed = 1;
+    addOpenSettingsEventButton() {
+        const settingsButton = this.settingsInstance.playerInstance.plyr.elements.controls.querySelector('.plyr__controls_settings-button');
+        const instance = this;
+        if (settingsButton) {
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(settingsButton);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileSettingsButton() {
+                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+                    instance.createModal();
+                    instance.setActiveModal();
+                    instance.initCaptionsEvent();
+                    instance.initSpeedVideoEvent();
+                    instance.initSaveButton();
+                    setTimeout(() => {
+                        instance.setInactiveTouchModal();
+                    }, 100)
+                })
+            }
+        }
     }
 
-    setButtonSpeed() {
-        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
-        let plyr = this.settingsInstance.playerInstance.plyr;
-        let instance = this.settingsInstance.playerInstance;
+    setInactiveTouchModal() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const background = modal.querySelector('.settings-controllers-enable__background');
+        const settingsContainerHeader = modal.querySelector('.settings-controllers-header')
+        const instance = this;
 
-        if (playerSpeedButton) {
-            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
+        if (background) {
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
             if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
+                mobileEvent.on('singletap', function LTPlayerMobileSettingsBackground(event) {
+                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+                    event.preventDefault();
+                    let target = event.target as HTMLElement;
+                    if (!target.classList.contains('settings-controllers')) {
+                        instance.setInactiveModal();
+                    }
+                })
+            }
+        }
 
-                    let playSpeed = plyr.speed + 0.25;
+        if (settingsContainerHeader) {
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(settingsContainerHeader);
+            if (mobileEvent) {
+                mobileEvent.on('pan', function LTPlayerMobileSettingsHeader(event) {
+                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+                    event.preventDefault();
+                    let target = event.target as HTMLElement;
+                    instance.setInactiveModal();
+                })
+            }
+        }
 
-                    if (playSpeed > 2) {
-                        playerSpeedButton.innerHTML = `1x`;
-                        plyr.speed = 1;
-                        return;
-                    }
+    }
 
-                    if (playSpeed === 1.75) {
-                        plyr.speed = playSpeed + 0.25
-                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
-                        return;
-                    }
+    createModal() {
+        let modalTemplate = this.settingsInstance.playerInstance.templateService.getSettings({id : this.settingsInstance.playerInstance.playerConfig.getPlayerId()});
 
-                    plyr.speed = playSpeed;
-                    playerSpeedButton.innerHTML = `${playSpeed}X`;
+        const modal = document.createElement('div');
+        modal.classList.add('lt-player-mobile-settings-modal')
+        modal.innerHTML = modalTemplate;
 
-                    instance.playerControl.mobileEvents.showControls(instance);
-                })
+        const body = document.querySelector('body');
+
+        if (body) {
+            body.appendChild(modal);
+        }
+    }
+
+    setActiveModal() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const background = modal.querySelector('.settings-controllers-enable__background');
+
+        if (background) {
+            if (background.classList.contains('d-none')) {
+                background.classList.remove('d-none')
             }
         }
     }
 
+    setInactiveModal() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        if (modal) {
+            modal.remove();
+        }
+    }
+    initCaptionsEvent() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const checkBox = modal.querySelector(`#captions-lt-player-${this.settingsInstance.playerInstance.playerConfig.getPlayerId()}`) as HTMLInputElement;
+        const instance = this;
+        if (checkBox) {
+            checkBox.addEventListener('change', () => {
+                instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+
+                if (!checkBox.checked) {
+                    this.settingsInstance.player.toggleCaptions(false);
+                    return
+                }
+
+                this.settingsInstance.player.toggleCaptions(true);
+
+            })
+        }
+    }
+    initSpeedVideoEvent() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const playerInstance = this.settingsInstance.playerInstance;
+        const player = this.settingsInstance.player;
+        const rangeInput: HTMLInputElement = modal.querySelector('.speed-range-input');
+
+
+        const myRange: HTMLInputElement = modal.querySelector(`#speed-range-${playerInstance.playerConfig.getPlayerId()}`);
+
+        myRange.value = String(0);
+
+        const myValue: HTMLElement = modal.querySelector(`#speed-range-value-${playerInstance.playerConfig.getPlayerId()}`);
+
+        myValue.style.top = "-20px";
+
+        let values:any = [1,1.25,1.50,2];
+
+        const instance = this;
+        myRange.oninput = function() {
+            instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+            player.speed = parseFloat(values[rangeInput.value]);
+            myValue.innerHTML = `${values[rangeInput.value]}X`;
+        };
+
+        player.speed = parseFloat(String(values[0]));
+        myValue.innerHTML = `${values[0]}X`;
+    }
+    initSaveButton() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const instance = this;
+
+        const saveButton = modal.querySelector('.button-save');
+
+        saveButton.addEventListener('click', function (event) {
+            instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+            event.preventDefault();
+            instance.setInactiveModal();
+        })
+    }
+    // setButtonSpeed() {
+    //     let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
+    //     let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
+    //     playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
+    //     let plyr = this.settingsInstance.playerInstance.plyr;
+    //     let instance = this.settingsInstance.playerInstance;
+    //
+    //     if (playerSpeedButton) {
+    //         let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
+    //         if (mobileEvent) {
+    //             mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
+    //
+    //                 let playSpeed = plyr.speed + 0.25;
+    //
+    //                 if (playSpeed > 2) {
+    //                     playerSpeedButton.innerHTML = `1x`;
+    //                     plyr.speed = 1;
+    //                     return;
+    //                 }
+    //
+    //                 if (playSpeed === 1.75) {
+    //                     plyr.speed = playSpeed + 0.25
+    //                     playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
+    //                     return;
+    //                 }
+    //
+    //                 plyr.speed = playSpeed;
+    //                 playerSpeedButton.innerHTML = `${playSpeed}X`;
+    //
+    //                 instance.playerControl.mobileEvents.showControls(instance);
+    //             })
+    //         }
+    //     }
+    // }
+
 }

package/src/components/events/LTPlayer.ts

@@ -116,6 +116,14 @@ export namespace LTPlayerEvents {
                 const settingsBody = playerContainer.querySelector('.settings-controllers');
 
                 if (!settingsBody) {
+
+                    const modal = document.querySelector('.lt-player-mobile-settings-modal');
+
+                    if (modal) {
+                        modal.remove();
+                    }
+
+
                     return;
                 }
 

package/src/components/events/LTPlayerCommon.ts

@@ -27,33 +27,26 @@ export class LTPlayerCommon {
 
         instance.plyr.speed = 1;
 
-
-        if (instance.playerConfig.getDevice() === 'desktop') {
-            instance.plyr.toggleCaptions(false);
-            return;
-        }
-
-        if (instance.playerConfig.getPreload()) {
-            instance.plyr.toggleCaptions(false);
-            return;
-        }
-
-        if (instance.plyr.isEmbed) {
-            instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
-                if (response.length !== 0) {
-                    instance.plyr.toggleCaptions(true);
-                } else {
-                    instance.plyr.toggleCaptions(false);
-                }
-            })
-        } else {
-
-            let checkCaptions = (instance.plyr as plyr).captions;
-
-            if (checkCaptions.currentTrack >= 0) {
-                instance.plyr.toggleCaptions(true);
-            }
-        }
+        instance.plyr.toggleCaptions(false);
+        return;
+
+        //
+        // if (instance.plyr.isEmbed) {
+        //     instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
+        //         if (response.length !== 0) {
+        //             instance.plyr.toggleCaptions(true);
+        //         } else {
+        //             instance.plyr.toggleCaptions(false);
+        //         }
+        //     })
+        // } else {
+        //
+        //     let checkCaptions = (instance.plyr as plyr).captions;
+        //
+        //     if (checkCaptions.currentTrack >= 0) {
+        //         instance.plyr.toggleCaptions(true);
+        //     }
+        // }
     }
     removeDesktopPlyrEvents() {
         let plyrInstance = this.plyr as Plyr as Plyr & { eventListeners: Array<any> }
@@ -155,6 +148,7 @@ export class LTPlayerCommon {
         }
 
         //set captions
+        // TODO: Find a way to show/hide subtitles that does not loop on every timeUpdate. Consider using the controls show/hide event.
         this.player.playerControl.desktopEvents.subtitles(this.player);
     }
 

package/src/components/events/LTPlayerMobile.ts

@@ -83,8 +83,8 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             instance.playerControl.mobileEvents.backwardForward(instance);
             instance.playerControl.mobileEvents.backwardForwardSeconds(instance);
 
-            //set volume controller
-            instance.playerControl.mobileEvents.volume(instance);
+            //remove volume controller
+            // instance.playerControl.mobileEvents.volume(instance);
 
             //set settings controller
             instance.playerControl.settingsControlsManager.init(instance);

package/src/index.ts

@@ -1,5 +1,11 @@
 import {LTPlayerManager} from "./components/LTPlayerManager";
 
+const supportsContainerQueries = "container" in document.documentElement.style;
+if (!supportsContainerQueries) {
+    let polyfill_script = document.createElement('script');
+    polyfill_script.setAttribute('src','https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js');
+    document.body.appendChild(polyfill_script);
+}
 
 //todo remove from window, it's for developer
 window.addEventListener('load', function () {

package/src/services/ResizeService.ts

@@ -2,9 +2,9 @@ import {LTPlayer} from "../components/LTPlayerType";
 import {defaultType} from "../global/types/ModuleTypes";
 import Plyr from "plyr";
 import {LTPLayerAddInfoResizeManager} from "../components/addInfo/LTPLayerAddInfoResizeManager";
-import {LTPlayerAdditionalInfo} from "../components/addInfo/LTPlayerAdditionalInfoEvents";
 import {LTPLayerAddInfo} from "../components/addInfo/LTPlayerAddInfoManager";
 import {LTPlayerRotateDeviceService} from "./LTPlayerRotateDeviceService";
+import {LTPlayerAddInfoDesktop} from "../components/addInfo/LTPlayerAddInfoDesktop";
 
 /**
  * Window service (set width and height)
@@ -39,8 +39,8 @@ export class ResizeService {
         },
         size : {
             438 : "lg",
-            370 : "md",
-            290 : "sm",
+            375 : "md",
+            350 : "sm",
             200 : "xs"
         }
     }
@@ -116,12 +116,12 @@ export class ResizeService {
     }
 
     protected setPortrate() {
-        this.setEvent(this.defaultPortrate);
+        // this.setEvent(this.defaultPortrate);
     }
 
 
     protected setLandScape() {
-        this.setEvent(this.defaultLandscape);
+        // this.setEvent(this.defaultLandscape);
     }
 
     protected setEvent(defaultData: defaultType) {
@@ -130,13 +130,13 @@ export class ResizeService {
         }).observe(this.playerParentContainer);
     }
 
-    public setEventAddInfo(buttonsTemplate: string, deskEvent: LTPlayerAdditionalInfo.Desktop, controller: LTPLayerAddInfo.Controller) {
+    public setEventAddInfo(buttonsTemplate: string, deskEvent: LTPlayerAddInfoDesktop, controller: LTPLayerAddInfo.Controller) {
         new ResizeObserver(response => {
             this.setAddInfoByDimensions(response[0].target.clientWidth, buttonsTemplate, deskEvent, controller)
         }).observe(this.playerInstance.plyr.elements.container);
     }
 
-    protected setAddInfoByDimensions(containerWidth: number, buttonsTemplate:string, deskEvent: LTPlayerAdditionalInfo.Desktop, controller: LTPLayerAddInfo.Controller) {
+    protected setAddInfoByDimensions(containerWidth: number, buttonsTemplate:string, deskEvent: LTPlayerAddInfoDesktop, controller: LTPLayerAddInfo.Controller) {
 
         const createAddInfoButtonsOutSide = () => {
 

package/src/views/additionalInfo.handlebars

@@ -1,6 +1,8 @@
 {{#modal}}
     {{#mobile}}
         {{#object_data}}
+            <div class="player-lt__modal__mobile__background"></div>
+            <div class="player-lt__modal__mobile">
             <div class="player-lt__mobile__modal-header">
                 <span class="line-button"></span>
             </div>
@@ -24,15 +26,9 @@
                     <p>{{bio.description}}</p>
                 {{/bio}}
             </div>
+            </div>
         {{/object_data}}
-        {{#data}}
-                <div class="player-lt__mobile__modal-header">
-                    <span class="line-button"></span>
-                </div>
-                <div class="player-lt__mobile__modal-content">
-                    {{{data}}}
-                </div>
-        {{/data}}
+
     {{/mobile}}
     {{#desktop}}
         {{#object_data}}

package/src/views/controls.handlebars

@@ -82,12 +82,9 @@
       <div class="bottom-controller">
         {{#mobile}}
         <div class="bottom-controller__left-buttons">
-          <div class="bottom-controller__volume_control">
-            <button type="button" class="plyr__control volume_control__volume-button">
-              <img class="volume-max d-none filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
-              <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
-            </button>
-          </div>
+          <button type="button" class="plyr__control plyr__controls_settings-button settings">
+              <img class="filter settings" src="{{icons.settings}}" alt="">
+          </button>
         </div>
         {{/mobile}}
         {{#desktop}}
@@ -125,18 +122,22 @@
               <img class="filter" src="{{icons.skip-backward}}" alt="">
             </button>
           </div>
+          {{#desktop}}
           <button type="button" class="plyr__control skip-backward-seconds" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.fast-backward}}" alt="">
           </button>
+          {{/desktop}}
           <div class="bottom-controller__play-button_body bottom-controller__play-button_body__landscape">
             <button type="button" class="plyr__control play-button">
               <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
               <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
             </button>
           </div>
+          {{#desktop}}
           <button type="button" class="plyr__control skip-forward-seconds" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.fast-forward}}" alt="">
           </button>
+          {{/desktop}}
           <div class="bottom-controller__next-chapter-view-wrapper">
             <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
               <img class="filter" src="{{icons.skip-forward}}" alt="">
@@ -149,21 +150,19 @@
             <button type="button" class="plyr__control mini-player-control">
               <img class="filter" src="{{icons.mini-player}}" alt="">
             </button>
-
-          <button type="button" class="plyr__control fullscreen-custom-control">
-            <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
-            <img class="filter maximize" src="{{icons.maximize}}" alt="">
-          </button>
+            <button type="button" class="plyr__control fullscreen-custom-control">
+              <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
+              <img class="filter maximize" src="{{icons.maximize}}" alt="">
+            </button>
           {{/desktop}}
-            {{#mobile}}
-                <button type="button" class="plyr__control plyr__controls_speed-button settings">
-                    2X
-                </button>
-                {{/mobile}}
+          {{#mobile}}
+            <button type="button" class="plyr__control fullscreen-custom-control">
+              <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
+              <img class="filter maximize" src="{{icons.maximize}}" alt="">
+            </button>
+          {{/mobile}}
         </div>
       </div>
-      <div class="player-lt__modal__mobile__background d-none"></div>
-      <div class="player-lt__modal__mobile d-none"></div>
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
@@ -275,14 +274,14 @@
       <div class="bottom-controller__background"></div>
       <div class="bottom-controller">
         {{#mobile}}
-          <div class="bottom-controller__volume_control">
-            <button type="button" class="plyr__control volume_control__volume-button">
-              <img class="volume-max d-none filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
-              <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
+          <div class="bottom-controller__left-buttons">
+            <button type="button" class="plyr__control plyr__controls_settings-button settings">
+                <img class="filter settings" src="{{icons.settings}}" alt="">
             </button>
           </div>
         {{/mobile}}
         {{#desktop}}
+        <div class="bottom-controller__left-buttons">
           <div class="bottom-controller__volume_control">
             <button type="button" class="plyr__control volume_control__volume-button button-open">
               <img class="volume-max filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
@@ -304,33 +303,38 @@
                 autocomplete="off" aria-label="Volume">
             </div>
           </div>
+        </div>
         {{/desktop}}
-        <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
-          <img class="filter" src="{{icons.skip-backward}}" alt="">
-        </button>
-        <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
-          <button type="button" class="plyr__control play-button">
-            <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
-            <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
+        <div class="bottom-controller__center-buttons">
+          <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
+            <img class="filter" src="{{icons.skip-backward}}" alt="">
+          </button>
+          <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
+            <button type="button" class="plyr__control play-button">
+              <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
+              <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
+            </button>
+          </div>
+          <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
+            <img class="filter" src="{{icons.skip-forward}}" alt="">
           </button>
         </div>
-        <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
-          <img class="filter" src="{{icons.skip-forward}}" alt="">
-        </button>
         {{#mobile}}
-          <button type="button" class="plyr__control plyr__controls_speed-button settings">
-            2X
-          </button>
+        <div class="bottom-controller__right-buttons">
+        </div>
+        {{/mobile}}
+        {{#mobile}}
+         <!--Maybe fullscreen-->
         {{/mobile}}
 
         {{#desktop}}
+        <div class="bottom-controller__right-buttons">
           <button type="button" class="plyr__control plyr__controls_settings-button settings">
             <img class="filter settings" src="{{icons.settings}}" alt="">
           </button>
+        </div>
         {{/desktop}}
       </div>
-      <div class="player-lt__modal__mobile__background d-none"></div>
-      <div class="player-lt__modal__mobile d-none"></div>
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">