@latest-thinking/lt-player 1.1.0 → 1.2.0-a

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -2,7 +2,7 @@ import {LTPlayer} from "../LTPlayerType";
 import {plyr} from "../../global/types/ModuleTypes";
 import * as events from "events";
 
-export namespace LTPlayerControlsEvents  {
+export namespace LTPlayerControlsEvents {
 
     export class Common {
 
@@ -10,31 +10,31 @@ export namespace LTPlayerControlsEvents  {
 
             getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
-               let selectors = {
-                   playerContainer: instance.plyr.elements.container,
-                   playerControlsContainer: instance.plyr.elements.controls,
-                   forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
-                   rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
-                   forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
-                   rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
-                   forwardAreaBackground: null as Element,
-                   rewindAreaBackground:  null as Element,
-                   forwardAnimationBackground:  null as Element,
-                   rewindAnimationBackground:  null as Element,
-
-               }
-
-               if (instance.playerConfig.getDevice() === 'mobile') {
-                   selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
-                   selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
-                   selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
-                   selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
-               }
-
-               return selectors
+                let selectors = {
+                    playerContainer: instance.plyr.elements.container,
+                    playerControlsContainer: instance.plyr.elements.controls,
+                    forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
+                    rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
+                    forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
+                    rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
+                    forwardAreaBackground: null as Element,
+                    rewindAreaBackground: null as Element,
+                    forwardAnimationBackground: null as Element,
+                    rewindAnimationBackground: null as Element,
+
+                }
+
+                if (instance.playerConfig.getDevice() === 'mobile') {
+                    selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
+                    selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
+                    selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
+                    selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
+                }
+
+                return selectors
             },
 
-            updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType ,time: number) {
+            updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, time: number) {
                 if (Math.sign(time)) {
                     instance.plyr.currentTime += time;
                 } else {
@@ -44,7 +44,7 @@ export namespace LTPlayerControlsEvents  {
 
             playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
-                const icons = instance.iconService.getIconsByComponent('playPause') as {play : string, pause: string};
+                const icons = instance.iconService.getIconsByComponent('playPause') as { play: string, pause: string };
                 const playerStateInfo = instance.plyr.elements.controls.querySelector('.player-state');
                 const iconSelector: HTMLImageElement = playerStateInfo.querySelector('.player-state__icon');
 
@@ -199,38 +199,145 @@ export namespace LTPlayerControlsEvents  {
                     captions.classList.add('d-none');
                 }
             }
+        }
+
+        showHideText(visible: boolean, controls: HTMLElement) {
+            const textControlsElement = controls.querySelector('.lt-player-video-content');
+
+            if (textControlsElement) {
+                if (visible) {
+                    if (!textControlsElement.classList.contains('lt-player-video-content-enable')) {
+                        textControlsElement.classList.add('lt-player-video-content-enable')
+                    }
+                } else {
+                    textControlsElement.classList.remove('lt-player-video-content-enable')
+                }
+            }
+        }
+
+        showHideSeekBar(visible: boolean, controls: HTMLElement) {
+            const seekBarControlsElement = controls.querySelector('.plyr__progress--wrapper');
+
+            if (seekBarControlsElement) {
+                if (visible) {
+                    if (!seekBarControlsElement.classList.contains('plyr__progress--wrapper-enable')) {
+                        seekBarControlsElement.classList.add('plyr__progress--wrapper-enable')
+                    }
+                } else {
+                    seekBarControlsElement.classList.remove('plyr__progress--wrapper-enable')
+                }
+            }
+        }
+
+        showHideBottomControls(visible: boolean, controls: HTMLElement) {
+            const bottomControlsElement = controls.querySelector('.bottom-controller');
 
+            if (bottomControlsElement) {
+                if (visible) {
+                    if (!bottomControlsElement.classList.contains('bottom-controller-enable')) {
+                        bottomControlsElement.classList.add('bottom-controller-enable')
+                    }
+                } else {
+                    bottomControlsElement.classList.remove('bottom-controller-enable')
+                }
+            }
+        }
 
+        showHideAllControls(visible: boolean, controls: HTMLElement) {
+            this.showHideText(visible, controls);
+            this.showHideSeekBar(visible, controls);
+            this.showHideBottomControls(visible, controls);
         }
+
     }
 
     export class Desktop {
 
         common: Common
+
         constructor() {
             this.common = new Common();
         }
+
         titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            this.common.checkTitleBreakWord(instance)
+            return;
+            /*Remove title break*/
+            // this.common.checkTitleBreakWord(instance);
+            /**/
         }
 
 
         showHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             const controls = instance.plyr.elements.controls;
-            const eventsInstance = this;
+            const commonInstance = this.common;
+            controls.classList.add('plyr__controls-enable');
+            instance.statusFeedbackService.setControlsVisible()
+
+            commonInstance.showHideText(true, controls);
+            commonInstance.showHideSeekBar(true, controls);
+            commonInstance.showHideBottomControls(true, controls);
+
+            let timerText: NodeJS.Timeout = null;
+            let timerSeekBar: NodeJS.Timeout = null;
+            let timerBottomControls: NodeJS.Timeout = null;
 
             controls.addEventListener('mouseover', function () {
-                controls.classList.add('plyr__controls-enable');
-                eventsInstance.common.subtitlesHide(instance);
+
+                if (timerText) {
+                    clearTimeout(timerText);
+                }
+
+                if (timerSeekBar) {
+                    clearTimeout(timerSeekBar);
+                }
+
+                if (timerBottomControls) {
+                    clearTimeout(timerBottomControls);
+                }
+
+                if (instance.plyr.paused) {
+                    commonInstance.showHideAllControls(true, controls);
+                    return;
+                }
+
+                if (!instance.playerConfig.isPinTextControls()) {
+                    commonInstance.showHideText(true, controls);
+                }
+
+                if (!instance.playerConfig.isPinSeekBarControls()) {
+                    commonInstance.showHideSeekBar(true, controls);
+                }
+
+                if (!instance.playerConfig.isPinBottomControls()) {
+                    commonInstance.showHideBottomControls(true, controls);
+                }
+
             })
 
 
             controls.addEventListener('mouseleave', function () {
-                if (!controls.classList.contains('plyr__controls-enable-settings')) {
-                    controls.classList.remove('plyr__controls-enable');
-                    setTimeout(()=>{
-                        eventsInstance.common.subtitlesShow(instance);
-                    }, 100)
+                if (instance.plyr.paused) {
+                    commonInstance.showHideAllControls(true, controls);
+                    return;
+                }
+
+                if (!instance.playerConfig.isPinTextControls()) {
+                    timerText = setTimeout(() => {
+                        commonInstance.showHideText(false, controls);
+                    }, 5000)
+                }
+
+                if (!instance.playerConfig.isPinSeekBarControls()) {
+                    timerSeekBar = setTimeout(() => {
+                        commonInstance.showHideSeekBar(false, controls);
+
+                    }, 5000)
+                }
+                if (!instance.playerConfig.isPinBottomControls()) {
+                    timerBottomControls = setTimeout(() => {
+                        instance.statusFeedbackService.clearControlsVisible()
+                        commonInstance.showHideBottomControls(false, controls);
+                    }, 5000)
                 }
             })
         }
@@ -248,7 +355,7 @@ export namespace LTPlayerControlsEvents  {
             }
         }
 
-        fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string){
+        fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
 
             let playerControls = instance.plyr.elements.controls;
             const fullScreenButtonContainer = playerControls.querySelector('.fullscreen-custom-control');
@@ -271,8 +378,8 @@ export namespace LTPlayerControlsEvents  {
             let common = this.common;
             switch (type) {
                 case 'timeupdate':
-                   this.common.playPauseIconTimeUpdate(instance);
-               break
+                    this.common.playPauseIconTimeUpdate(instance);
+                    break
                 case 'ready':
                     const playButton = instance.plyr.elements.controls.querySelector('.play-button');
                     if (playButton) {
@@ -395,13 +502,13 @@ export namespace LTPlayerControlsEvents  {
             let playerControlsContainer = instance.plyr.elements.controls;
 
 
-            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+            const volume: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
             const openVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button');
             const muteUnmuteVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
             const volumeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area');
             const volumeBackground: HTMLElement = playerControlsContainer.querySelector('.volume_control__background');
             const volumeRangeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area__range');
-            const rangeVolumesItems: NodeListOf<HTMLElement>= volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+            const rangeVolumesItems: NodeListOf<HTMLElement> = volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
 
             openVolumeButton.addEventListener('mouseover', (event) => {
                 volumeControl.classList.remove('d-none');
@@ -450,10 +557,10 @@ export namespace LTPlayerControlsEvents  {
                 const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
                 const volumeIconsManger = (item: HTMLElement) => {
 
-                    const rangeVolumesItems: NodeListOf<HTMLElement>= volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+                    const rangeVolumesItems: NodeListOf<HTMLElement> = volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
 
                     rangeVolumesItems.forEach(function (value) {
-                        if (item.dataset.rangeValue === value.dataset.rangeValue){
+                        if (item.dataset.rangeValue === value.dataset.rangeValue) {
                             value.classList.remove('d-none');
                         } else {
                             value.classList.add('d-none')
@@ -489,12 +596,12 @@ export namespace LTPlayerControlsEvents  {
                     return;
                 }
 
-                const getClosest = (curr: any, prev: any,  range: any) => {
+                const getClosest = (curr: any, prev: any, range: any) => {
                     return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
                 }
 
 
-                let closest = itemsDataSet.reduce(function(prev, curr) {
+                let closest = itemsDataSet.reduce(function (prev, curr) {
                     return getClosest(curr, prev, (volumeRangeControl as HTMLInputElement).value);
                 });
                 volumeIcons(closest);
@@ -557,9 +664,12 @@ export namespace LTPlayerControlsEvents  {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
             const eventsInstance = this;
+            const commonInstance = this.common;
 
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
+            instance.statusFeedbackService.setControlsVisible()
+
             if (playerContainer.classList.contains('plyr--hide-controls')) {
                 playerContainer.classList.remove('plyr--hide-controls');
             }
@@ -580,6 +690,16 @@ export namespace LTPlayerControlsEvents  {
                 clearTimeout(this.controlsTimeOut);
             }
 
+            commonInstance.showHideText(true, playerControlsContainer);
+            commonInstance.showHideSeekBar(true, playerControlsContainer);
+            commonInstance.showHideBottomControls(true, playerControlsContainer);
+
+
+            if (instance.plyr.paused) {
+                commonInstance.showHideAllControls(true, playerControlsContainer);
+                return;
+            }
+
             this.hideControls(instance, false);
         }
 
@@ -587,24 +707,55 @@ export namespace LTPlayerControlsEvents  {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
             const eventsInstance = this;
+            const commonInstance = this.common;
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
+            const showHideControls = () => {
+                instance.statusFeedbackService.clearControlsVisible()
+
+                if (!instance.playerConfig.isPinTextControls()) {
+                    commonInstance.showHideText(false, playerControlsContainer);
+                }
+
+                if (!instance.playerConfig.isPinSeekBarControls()) {
+                    commonInstance.showHideSeekBar(false, playerControlsContainer);
+                }
+                if (!instance.playerConfig.isPinBottomControls()) {
+                    commonInstance.showHideBottomControls(false, playerControlsContainer);
+                }
+            }
+
+
             if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
 
                 if (now) {
-                    playerControlsContainer.classList.remove('plyr__controls-enable');
-                    playerContainer.classList.add('plyr--hide-controls');
+
+                    if (instance.plyr.paused) {
+                        commonInstance.showHideAllControls(true, playerControlsContainer);
+                        return;
+                    }
+
+                    showHideControls();
+                    // playerControlsContainer.classList.remove('plyr__controls-enable');
+                    // playerContainer.classList.add('plyr--hide-controls');
                     if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
                         playerControlsBackground.classList.remove('d-none');
                     }
                 } else {
                     this.controlsTimeOut = setTimeout(() => {
-                        playerControlsContainer.classList.remove('plyr__controls-enable');
-                        playerContainer.classList.add('plyr--hide-controls');
-                        if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
+                        // playerControlsContainer.classList.remove('plyr__controls-enable');
+                        // playerContainer.classList.add('plyr--hide-controls');
+
+                        if (instance.plyr.paused) {
+                            commonInstance.showHideAllControls(true, playerControlsContainer);
+                            return;
+                        }
+
+                        showHideControls();
+                        if (playerControlsBackground && !playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
                             playerControlsBackground.classList.remove('d-none');
                         }
-                    }, 4000);
+                    }, 5000);
                 }
                 eventsInstance.common.subtitlesShow(instance);
             }

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

@@ -9,7 +9,15 @@ export class LTPlayerCommonSettingsControllers {
     }
 
     addSettingsTemplate(string: 'mobile' | 'desktop') {
-        const settingsTemplate = this.instance.templateService.getSettings({id : this.instance.playerConfig.getPlayerId(), [string] : true});
+        const settingsTemplate = this.instance.templateService.getSettings(
+            {
+                id : this.instance.playerConfig.getPlayerId(),
+                [string] : true,
+                captions_enabled: this.instance.playerConfig.getCaptionsEnabled() &&
+                    this.instance.playerConfig.hasCaptionsUrl(),
+                captions_missing: !this.instance.playerConfig.hasCaptionsUrl()
+            }
+        );
         const lastElement = this.instance.plyr.elements.controls.lastElementChild;
 
         if (lastElement) {

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

@@ -1,6 +1,7 @@
 import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManager";
 import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
 import {defaultType} from "../../../global/types/ModuleTypes";
+import {LTPlayerStorage} from "../../LTPlayerStorage";
 
 export class LTPlayerDesktopSettingsControllers implements SettingsControlsInterfaces  {
     settingsInstance: LTPlayerSettingsControlsManager
@@ -32,18 +33,17 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
 
         const selectors = this.settingsInstance.common.getSelectors();
 
-        const checkBox = selectors.playerControlsContainer.querySelector(`#captions-lt-player-${this.settingsInstance.playerInstance.playerConfig.getPlayerId()}`) as HTMLInputElement;
+        const checkBox = selectors.playerControlsContainer.querySelector(`.subtitles-body__input-switch`) as HTMLInputElement;
 
         if (checkBox) {
             checkBox.addEventListener('change', () => {
 
                 if (!checkBox.checked) {
-                    this.settingsInstance.player.toggleCaptions(false);
-                    return
+                    this.settingsInstance.playerInstance.captionsService.disableCaptions();
+                } else {
+                    this.settingsInstance.playerInstance.captionsService.enableCaptions();
                 }
 
-                this.settingsInstance.player.toggleCaptions(true);
-
             })
         }
     }
@@ -87,20 +87,23 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     }
 
     setButtonSpeed() {
-        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        let plyr = this.settingsInstance.playerInstance.plyr;
-        let instance = this.settingsInstance.playerInstance;
+        const playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
+        const playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
+        const plyr = this.settingsInstance.playerInstance.plyr;
+        const instance = this.settingsInstance.playerInstance;
+        const storage = new LTPlayerStorage();
 
         if (playerSpeedButton) {
-            let speedSpan = document.createElement('span');
+            const speedSpan = document.createElement('span');
             playerSpeedButton.appendChild(speedSpan);
-            speedSpan.innerHTML = `1X`;
+
+            const displaySpeed = Math.floor(plyr.speed * 10) / 10;
+            speedSpan.innerHTML = displaySpeed + "X";
             speedSpan.className = '';
-            speedSpan.classList.add('playback-speed--1X');
+            speedSpan.classList.add('playback-speed--' + plyr.speed + 'X');
 
             playerSpeedButton.addEventListener('click', function(event) {
-                let playSpeed = plyr.speed + 0.25;
+                const playSpeed = plyr.speed + 0.25;
 
                 if (playSpeed > 2) {
                     speedSpan.innerHTML = `1X`;
@@ -111,7 +114,7 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
                 }
 
                 if (playSpeed === 1.75) {
-                    plyr.speed = playSpeed + 0.25
+                    plyr.speed = playSpeed + 0.25;
                     speedSpan.innerHTML = `2X`;
                     speedSpan.className = '';
                     speedSpan.classList.add('playback-speed--2X');

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

@@ -2,6 +2,7 @@ import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManage
 import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
 
 export class LTPlayerMobileSettingsControllers implements SettingsControlsInterfaces {
+
     settingsInstance: LTPlayerSettingsControlsManager
     constructor(settingsInstance: LTPlayerSettingsControlsManager) {
         this.settingsInstance = settingsInstance;
@@ -11,6 +12,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
     init() {
         this.addOpenSettingsEventButton();
         this.setButtonSpeed();
+        this.createModal();
     }
 
     addOpenSettingsEventButton() {
@@ -21,11 +23,10 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
             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();
+                    instance.showModal()
                     setTimeout(() => {
                         instance.setInactiveTouchModal();
                     }, 100)
@@ -34,8 +35,24 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         }
     }
 
+    hideModal() {
+        const body = document.body
+        body.removeAttribute('modal-open-body')
+
+        const modal = this.getModal()
+        modal.close()
+    }
+
+    showModal() {
+        const body = document.body
+        body.setAttribute('modal-open-body', '')
+
+        const modal = this.getModal()
+        modal.showModal()
+    }
+
     setInactiveTouchModal() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const modal = this.getModal()
         const background = modal.querySelector('.settings-controllers-enable__background');
         const settingsContainerHeader = modal.querySelector('.settings-controllers-header')
         const instance = this;
@@ -46,10 +63,6 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                 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();
-                    }
                 })
             }
         }
@@ -61,64 +74,57 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                     instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
                     event.preventDefault();
                     let target = event.target as HTMLElement;
-                    instance.setInactiveModal();
+                    instance.hideModal();
                 })
             }
         }
-
     }
 
-    createModal() {
-        let modalTemplate = this.settingsInstance.playerInstance.templateService.getSettings({id : this.settingsInstance.playerInstance.playerConfig.getPlayerId()});
-
-        const modal = document.createElement('div');
-        modal.classList.add('lt-player-mobile-settings-modal')
-        modal.innerHTML = modalTemplate;
-
-        const body = document.querySelector('body');
-
-        if (body) {
-            body.appendChild(modal);
-        }
+    getModal(): HTMLDialogElement {
+        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
+        return playerElementContainer.querySelector("dialog")
     }
 
-    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')
+    createModal() {
+        let settingsDialog = this.settingsInstance.playerInstance.templateService.getMobileSettings(
+            {
+                id : this.settingsInstance.playerInstance.playerConfig.getPlayerId(),
+                captions_enabled: this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl() &&
+                    this.settingsInstance.playerInstance.playerConfig.getCaptionsEnabled(),
+                captions_missing: !this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl()
             }
-        }
-    }
+        );
+        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
+        playerElementContainer.insertAdjacentHTML('beforeend', settingsDialog)
+
+        const modal = this.getModal()
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                this.hideModal()
+            }
+        });
 
-    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 modal = this.getModal()
+        const checkBox = modal.querySelector(`.subtitles-body__input-switch`) 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.playerInstance.captionsService.disableCaptions();
+                } else {
+                    this.settingsInstance.playerInstance.captionsService.enableCaptions();
                 }
 
-                this.settingsInstance.player.toggleCaptions(true);
-
             })
         }
     }
     initSpeedVideoEvent() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const modal = this.getModal()
         const playerInstance = this.settingsInstance.playerInstance;
         const player = this.settingsInstance.player;
         const rangeInput: HTMLInputElement = modal.querySelector('.speed-range-input');
@@ -145,7 +151,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         myValue.innerHTML = `${values[0]}X`;
     }
     initSaveButton() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const modal = this.getModal()
         const instance = this;
 
         const saveButton = modal.querySelector('.button-save');
@@ -153,7 +159,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         saveButton.addEventListener('click', function (event) {
             instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
             event.preventDefault();
-            instance.setInactiveModal();
+            instance.hideModal();
         })
     }
     setButtonSpeed() {