@latest-thinking/lt-player 1.1.0-s → 1.1.0-u

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,47 @@ 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.getCaptionsEnabled()
             }
-        }
+        );
+        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
+        playerElementContainer.insertAdjacentHTML('beforeend', settingsDialog)
     }
 
-    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 +141,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 +149,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() {

package/src/components/events/LTPlayerCommon.ts

@@ -9,6 +9,13 @@ export class LTPlayerCommon {
     player: LTPlayer.PortraitType | LTPlayer.LandscapeType;
     plyr: Plyr;
 
+    setupCommon() {
+        this.playerPlay()
+        this.plyrOnPlaying()
+        this.plyrOnSeeking()
+        this.plyrOnControlsShown()
+    }
+
     playerPlay() {
         const instance = this.player;
 
@@ -204,4 +211,29 @@ export class LTPlayerCommon {
         }
         spanElement.innerHTML = ''; // Clear previous captions
     }
+
+    plyrOnSeeking() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('seeking', () => {
+            instance.statusFeedbackService.setLoadingSeek()
+        })
+    }
+
+    plyrOnPlaying() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('playing', () => {
+            instance.statusFeedbackService.clearLoading()
+        })
+    }
+
+    plyrOnControlsShown() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('controlsshown', () => {
+            instance.statusFeedbackService.setControlsVisible()
+        })
+    }
+
 }

package/src/components/events/LTPlayerDesktop.ts

@@ -13,7 +13,6 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyr = eventManager.plyr;
 
         //init common events
-        this.playerPlay();
         this.removeDesktopPlyrEvents();
 
         //init desktop events
@@ -26,6 +25,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrOnPause();
         this.plyrOnSeek();
         this.plyrOnCueChange();
+
+        this.setupCommon()
     }
 
     plyrOnSeek():void {
@@ -143,10 +144,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
         plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
             //remove mini player on fullscreen
-            const target = event.target as HTMLElement;
-            const parent = target.closest('.lt-player');
 
-            parent.classList.add('is-fullscreen');
+            instance.statusFeedbackService.setFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
 
             //fullscreen icon
@@ -158,10 +157,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
             //add mini player on exit fullscreen
-            const target = event.target as HTMLElement;
-            const parent = target.closest('.lt-player');
 
-            parent.classList.remove('is-fullscreen');
+            instance.statusFeedbackService.clearFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
 
             //fullscreen icon
@@ -191,6 +188,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
         plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
+            instance.statusFeedbackService.setLoading()
             LoaderService.removeSpinner(plyr.elements.container)
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
@@ -212,11 +210,9 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let plyr: Plyr = this.plyr;
 
         plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
-            common.setCustomSubtitles(plyr.elements.controls, event)
+            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
+                common.setCustomSubtitles(plyr.elements.controls, event)
+            }
         })
     }
-
-    clearSubtitles(): void {
-        this.clearCustomSubtitles(this.plyr.elements.controls)
-    }
 }

package/src/components/events/LTPlayerMobile.ts

@@ -13,7 +13,6 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyr = eventManager.plyr;
 
         //init common events
-        this.playerPlay();
         this.removeMobilePlyrEvents();
 
         //init mobile events
@@ -26,6 +25,8 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrOnPause();
         this.plyrOnSeek();
         this.plyrOnCueChange()
+
+        this.setupCommon()
     }
 
     plyrOnSeek():void {
@@ -132,10 +133,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
-            const target = event.target as HTMLElement;
-            const parent = target.closest('.lt-player');
-
-            parent.classList.add('is-fullscreen');
+            instance.statusFeedbackService.setFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
@@ -144,10 +142,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         });
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
-            const target = event.target as HTMLElement;
-            const parent = target.closest('.lt-player');
-
-            parent.classList.remove('is-fullscreen');
+            instance.statusFeedbackService.clearFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
@@ -178,7 +173,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
-            LoaderService.removeSpinner(plyr.elements.container)
+            instance.statusFeedbackService.setLoading()
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
@@ -235,7 +230,9 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
-            common.setCustomSubtitles(plyr.elements.controls, event)
+            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
+                common.setCustomSubtitles(plyr.elements.controls, event)
+            }
         })
     }
 

package/src/global/controllers/LTPlayerController.ts

@@ -14,6 +14,7 @@ import {LTPlayerShareManager} from "../../components/share/LTPlayerShareManager"
 import {LTPlayerHls} from "../../components/LTPlayerHls";
 import {LTPlayerVideo} from "../../components/video/LTPlayerVideo";
 import {LTPlayerCaptionsManager} from "../../components/captions/LTPlayerCaptions";
+import {LTPlayerStatusFeedback} from "../../components/LTPlayerStatusFeedback";
 
 /**
  * Default Player type Service
@@ -38,6 +39,8 @@ export class LTPlayerController {
     hls : LTPlayerHls
     videoService : LTPlayerVideo
     captionsService : LTPlayerCaptionsManager
+    statusFeedbackService: LTPlayerStatusFeedback
+
     /**
      * Base player type service
      */
@@ -49,6 +52,7 @@ export class LTPlayerController {
         this.posterManager = new LTPlayerPosterManager();
         this.share = new LTPlayerShareManager();
         this.videoService = new LTPlayerVideo();
-        this.captionsService = new LTPlayerCaptionsManager(this)
+        this.captionsService = new LTPlayerCaptionsManager(this);
+        this.statusFeedbackService = new LTPlayerStatusFeedback(this);
     }
 }

package/src/services/Helper.ts

@@ -11,7 +11,11 @@ export class Helper {
         return device;
     }
 
-    static setDebugEvent(data: string | object, type: string) {
+    static setDebugEvent(data: string | object, type?: string) {
+        if (type === undefined) {
+            type = 'info'
+        }
+
         if (process.env.DEBUG === "true") {
             switch (type) {
                 case 'info':

package/src/services/TemplateService.ts

@@ -3,6 +3,7 @@ import template from '../views/template.handlebars';
 import controlsTemplate from '../views/controls.handlebars';
 import posterTemplate from '../views/poster.handlebars';
 import settingsTemplate from '../views/settings.handlebars';
+import settingsMobileTemplate from '../views/settings.mobile.handlebars';
 import additionalInfo from '../views/additionalInfo.handlebars';
 import share from '../views/share.handlebars';
 import background from '../views/background.handlebars';
@@ -43,6 +44,10 @@ export class TemplateService {
         return Mustache.render(settingsTemplate, data);
     }
 
+    getMobileSettings(data: Object) {
+        return Mustache.render(settingsMobileTemplate, data);
+    }
+
     getAdditionalInfo(data : Object) {
         return Mustache.render(additionalInfo, data);
     }

package/src/views/settings.handlebars

@@ -4,7 +4,7 @@
         <div class="settings-controllers-enable__subtitles settings">
             <p class="settings-text settings">Subtitles</p>
             <label class="subtitles-body__switch settings">
-                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" value="" type="checkbox">
+                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" {{#captions_enabled }}checked{{/captions_enabled}} type="checkbox">
                 <label for="captions-lt-player-{{id}}" class="subtitles-body__slider settings"></label>
             </label>
         </div>

package/src/views/settings.mobile.handlebars

@@ -0,0 +1,20 @@
+<dialog class="settings-controllers settings">
+    <span class="line-button settings-controllers-header"></span>
+        <div class="settings-controllers-enable__subtitles settings">
+            <p class="settings-text settings">Subtitles</p>
+            <label class="subtitles-body__switch settings">
+                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" {{#captions_enabled }}checked{{/captions_enabled}} type="checkbox">
+                <label for="captions-lt-player-{{id}}" class="subtitles-body__slider settings"></label>
+            </label>
+        </div>
+        <div class="settings-controllers-enable__speed-range settings">
+            <p class="settings-text settings">Speed</p>
+            <div class="speed-range-input-body settings">
+                <output class="settings speed-range-value" style="display: flex; justify-content: center" id="speed-range-value-{{id}}"></output>
+                <input id="speed-range-{{id}}" type="range"  min="0" max="3" step="1" class="speed-range-input settings">
+            </div>
+        </div>
+    <div class="settings-controllers-enable__button-save settings">
+        <button class="button-save settings">Save</button>
+    </div>
+</dialog>

package/src/views/template.handlebars

@@ -9,4 +9,7 @@
     <track kind="captions" label="{{label}} captions" src="{{url}}" srclang="{{srclang}}" {{default}} />
     {{/defaultConfig.captions}}
 </video>
+<div class="loader__backdrop">
+  <div class="loader"><div></div><div></div><div></div><div></div></div>
+</div>
 {{/video}}

package/src/assets/sass/components/_spinner.scss

@@ -1,46 +0,0 @@
-.lt-player-spinner {
-
-  &__loader {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    background: rgba(251,251,251,0.9);
-
-    &__circle-svg {
-      animation: rotate 2s linear infinite;
-      width: 50px;
-      height: 50px;
-
-      & .path {
-        stroke: $default_color_player;
-        stroke-linecap: round;
-        animation: dash 1.5s ease-in-out infinite;
-      }
-    }
-  }
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}