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

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,18 @@ 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');
+
+            const itemsDataSet: string[] = [];
+            rangeVolumesItems.forEach(item => {
+                itemsDataSet.push(item.dataset.rangeValue)
+            })
 
             openVolumeButton.addEventListener('mouseover', (event) => {
                 volumeControl.classList.remove('d-none');
@@ -437,28 +549,39 @@ export namespace LTPlayerControlsEvents  {
                 volumeIcons(1)
             })
 
-            const volumeIcons = (range: any) => {
+            const getClosest = (curr: any, prev: any, range: any) => {
+                return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
+            }
 
-                if (typeof range == 'number') {
-                    range = range.toString()
-                }
+            const volumeMax: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-max');
+            const volume75: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-75');
+            const volume50: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-50');
+            const volumeMute: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-mute');
+            const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+            const volumeIconsManger = (item: HTMLElement) => {
 
-                const volumeMax: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-max');
-                const volume75: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-75');
-                const volume50: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-50');
-                const volumeMute: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-mute');
-                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) {
+                        value.classList.remove('d-none');
+                    } else {
+                        value.classList.add('d-none')
+                    }
+                })
+            }
 
-                    rangeVolumesItems.forEach(function (value) {
-                        if (item.dataset.rangeValue === value.dataset.rangeValue){
-                            value.classList.remove('d-none');
-                        } else {
-                            value.classList.add('d-none')
-                        }
-                    })
+            const volumeIcons = (level: any) => {
+                if (itemsDataSet.length === 0) {
+                    return;
+                }
+
+                let range = itemsDataSet.reduce(function (prev, curr) {
+                    return getClosest(curr, prev, level);
+                });
+
+                if (typeof range == 'number') {
+                    range = range.toString()
                 }
 
                 switch (range) {
@@ -478,26 +601,7 @@ export namespace LTPlayerControlsEvents  {
             }
 
             volumeRangeControl.addEventListener('input', function () {
-
-                let itemsDataSet: string[] = [];
-
-                rangeVolumesItems.forEach(item => {
-                    itemsDataSet.push(item.dataset.rangeValue)
-                })
-
-                if (itemsDataSet.length === 0) {
-                    return;
-                }
-
-                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) {
-                    return getClosest(curr, prev, (volumeRangeControl as HTMLInputElement).value);
-                });
-                volumeIcons(closest);
+                volumeIcons((volumeRangeControl as HTMLInputElement).value);
             })
 
             instance.plyr.volume = 1;
@@ -557,9 +661,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 +687,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 +704,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');