@latest-thinking/lt-player 1.1.0 → 1.2.0

package/src/components/events/LTPlayer.ts

@@ -56,34 +56,35 @@ export namespace LTPlayerEvents {
                 }
 
                 const volumeControl = controls.querySelector('.bottom-controller__volume_control');
-                const volumeButton = volumeControl.querySelector('.button-open');
-                const volumeBackground = volumeControl.querySelector('.volume_control__background');
-                const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
-                const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
-                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
+                if (volumeControl) {
+                    const volumeButton = volumeControl.querySelector('.button-open');
+                    const volumeBackground = volumeControl.querySelector('.volume_control__background');
+                    const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
+                    const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
 
 
-                if (volumeButton) {
-                    volumeButton.classList.remove('d-none');
-                }
+                    if (volumeButton) {
+                        volumeButton.classList.remove('d-none');
+                    }
 
-                if (volumeBackground) {
-                    volumeBackground.classList.add('d-none')
-                }
+                    if (volumeBackground) {
+                        volumeBackground.classList.add('d-none')
+                    }
 
-                if (volumeBackgroundArea) {
-                    volumeBackgroundArea.classList.add('d-none')
-                }
+                    if (volumeBackgroundArea) {
+                        volumeBackgroundArea.classList.add('d-none')
+                    }
 
-                if (volumeArea) {
-                    volumeArea.classList.remove('volume-area-open')
-                }
+                    if (volumeArea) {
+                        volumeArea.classList.remove('volume-area-open')
+                    }
 
-                if (volumeControl) {
-                    volumeControl.classList.remove('volume-area-open');
-                    volumeControl.classList.remove('volume-control-enable');
+                    if (volumeControl) {
+                        volumeControl.classList.remove('volume-area-open');
+                        volumeControl.classList.remove('volume-control-enable');
+                    }
                 }
-
+                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
                 if (controlsBackground) {
                     if (!controlsBackground.classList.contains('d-none')) {
                         controlsBackground.classList.add('d-none');
@@ -182,6 +183,8 @@ export namespace LTPlayerEvents {
             if (!instance.plyr.elements.container.classList.contains('plyr__poster-enabled')) {
                 instance.plyr.elements.container.classList.add('plyr__poster-enabled');
             }
+
+            instance.statusFeedbackService.clearLoading()
         }
 
     }

package/src/components/events/LTPlayerCommon.ts

@@ -9,11 +9,23 @@ export class LTPlayerCommon {
     player: LTPlayer.PortraitType | LTPlayer.LandscapeType;
     plyr: Plyr;
 
+    setupCommon() {
+        this.playerPlay()
+        this.plyrOnPlaying()
+        this.plyrOnSeeking()
+        this.plyrOnControlsShown()
+        this.plyrOnCanplay()
+    }
+
     playerPlay() {
         const instance = this.player;
 
         this.plyr.on('play', function LTPlayerPlay(event) {
 
+            if (!instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
+                instance.plyr.elements.controls.classList.add('plyr__controls-enable');
+            }
+
             instance.desktopEvents.playPause(event);
 
             if (instance.additionalInfoService) {
@@ -27,26 +39,25 @@ export class LTPlayerCommon {
 
         instance.plyr.speed = 1;
 
-        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);
-        //     }
-        // }
+        if (!instance.plyr.isEmbed) {
+            let checkCaptions = (instance.plyr as plyr).captions;
+
+            if (checkCaptions.currentTrack >= 0) {
+                instance.plyr.toggleCaptions(true);
+                return;
+            }
+            instance.plyr.toggleCaptions(false);
+            return;
+        }
+
+        instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
+            if (response.length !== 0) {
+                instance.plyr.toggleCaptions(true);
+                return;
+            }
+            instance.plyr.toggleCaptions(false);
+
+        })
     }
     removeDesktopPlyrEvents() {
         let plyrInstance = this.plyr as Plyr as Plyr & { eventListeners: Array<any> }
@@ -175,4 +186,67 @@ export class LTPlayerCommon {
         }
     }
 
+    setCustomSubtitles(controls: HTMLElement, event: Plyr.PlyrEvent )
+    {
+        const eventPlayer: any = event.detail.plyr;
+
+        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
+        const spanElement = customSubtitlesElement.querySelector('span');
+
+        if (!spanElement) {
+            return;
+        }
+        if (!eventPlayer.captions.currentTrackNode.activeCues) {
+            return;
+        }
+        if (eventPlayer.captions.currentTrackNode.activeCues.length > 0) {
+            spanElement.innerHTML = eventPlayer.captions.currentTrackNode.activeCues[0].text;
+        } else {
+            spanElement.innerHTML = ''; // Clear previous captions
+        }
+    }
+
+    clearCustomSubtitles(controls: HTMLElement)
+    {
+        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
+        const spanElement = customSubtitlesElement.querySelector('span');
+
+        if (!spanElement) {
+            return;
+        }
+        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()
+        })
+    }
+
+    plyrOnCanplay() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('canplay', () => {
+            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
@@ -25,6 +24,9 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrOnPlay();
         this.plyrOnPause();
         this.plyrOnSeek();
+        this.plyrOnCueChange();
+
+        this.setupCommon()
     }
 
     plyrOnSeek():void {
@@ -33,6 +35,10 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let plyr: Plyr = this.plyr;
 
         plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.stopped === true) {
+                eventManager.endVideo()
+            }
+
             if (plyr.isEmbed) {
                 if (plyr.paused) {
                     return;
@@ -142,10 +148,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
@@ -157,10 +161,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
@@ -190,6 +192,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');
         })
@@ -205,4 +208,15 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         })
     }
 
+    plyrOnCueChange() {
+        let common = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
+            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
+                common.setCustomSubtitles(plyr.elements.controls, event)
+            }
+        })
+    }
 }

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
@@ -25,6 +24,9 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrOnPlay();
         this.plyrOnPause();
         this.plyrOnSeek();
+        this.plyrOnCueChange()
+
+        this.setupCommon()
     }
 
     plyrOnSeek():void {
@@ -33,6 +35,10 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.stopped === true) {
+                eventManager.endVideo()
+            }
+
             if (plyr.isEmbed) {
                 if (plyr.paused) {
                     return;
@@ -131,10 +137,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');
@@ -143,10 +146,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');
@@ -177,7 +177,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');
         })
     }
@@ -228,4 +228,16 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         return undefined;
     }
 
+    plyrOnCueChange() {
+        let common = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
+            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
+                common.setCustomSubtitles(plyr.elements.controls, event)
+            }
+        })
+    }
+
 }

package/src/global/controllers/LTPlayerController.ts

@@ -13,6 +13,8 @@ import {LTPlayerPosterManager} from "../../components/poster/LTPlayerPosterManag
 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
@@ -36,6 +38,9 @@ export class LTPlayerController {
     share : LTPlayerShareManager
     hls : LTPlayerHls
     videoService : LTPlayerVideo
+    captionsService : LTPlayerCaptionsManager
+    statusFeedbackService: LTPlayerStatusFeedback
+
     /**
      * Base player type service
      */
@@ -47,5 +52,7 @@ export class LTPlayerController {
         this.posterManager = new LTPlayerPosterManager();
         this.share = new LTPlayerShareManager();
         this.videoService = new LTPlayerVideo();
+        this.captionsService = new LTPlayerCaptionsManager(this);
+        this.statusFeedbackService = new LTPlayerStatusFeedback(this);
     }
 }

package/src/services/Helper.ts

@@ -1,6 +1,7 @@
 import {defaultType} from "../global/types/ModuleTypes";
 
 export class Helper {
+
     static getDevice() {
         let device = 'desktop'; //initiate as false
         if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
@@ -10,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/ResizeService.ts

@@ -20,8 +20,8 @@ export class ResizeService {
     playerType: string
     addInfo: LTPLayerAddInfoResizeManager
 
-    addInfoOutSide: boolean
-    addInfoInSide: Boolean
+    addInfoOutSide: false
+    addInfoInSide: true
 
     playerParam: defaultType  = {
         width : null,
@@ -212,37 +212,42 @@ export class ResizeService {
             }
         }
 
-            // if (containerWidth >= 380) {
-            //
-            //     if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
-            //         return;
-            //     }
-            //
-            //     if (this.addInfoOutSide) {
-            //         return;
-            //     }
-            //
-            //     this.addInfoOutSide = true;
-            //     this.addInfoInSide = false;
-            //
-            //     createAddInfoButtonsOutSide();
-            // } else {
-            //
-            //     if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
-            //         return;
-            //     }
-            //
-            //     if (this.addInfoInSide) {
-            //         return;
-            //     }
-            //
-            //     this.addInfoInSide = true;
-            //     this.addInfoOutSide = false;
-            //     createAddInfoButtonsInSide();
-            // }
+        if (this.playerInstance.playerConfig.getEmbed()) {
+            createAddInfoButtonsInSide();
+            return;
+        }
 
         createAddInfoButtonsInSide();
 
+
+        // if (containerWidth >= 380) {
+        //
+        //     if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
+        //         return;
+        //     }
+        //
+        //     if (this.addInfoOutSide) {
+        //         return;
+        //     }
+        //
+        //     this.addInfoOutSide = true;
+        //     this.addInfoInSide = false;
+        //
+        //     createAddInfoButtonsOutSide();
+        // } else {
+        //
+        //     if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
+        //         return;
+        //     }
+        //
+        //     if (this.addInfoInSide) {
+        //         return;
+        //     }
+        //
+        //     this.addInfoInSide = true;
+        //     this.addInfoOutSide = false;
+        //     createAddInfoButtonsInSide();
+        // }
     }
 
     protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {

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);
     }
@@ -109,6 +114,8 @@ export class TemplateService {
                 break
         }
 
+        Object.assign(configData, {chaptersEnabled: (!!configData['chapters']) })
+
         let render = Mustache.render(controlsTemplate,configData);
 
         delete configData.mobile;

package/src/views/additionalInfo.handlebars

@@ -19,22 +19,22 @@
             </div>
             <div class="player-lt__mobile__modal-content">
                 {{#abstract}}
-                    <h2>{{abstract.title}}</h2>
-                    <p>{{abstract.description}}</p>
-                    <p>{{abstract.videoDOI}}</p>
-                    <p>{{abstract.videoCitation}}</p>
+                    <h2>{{{abstract.title}}}</h2>
+                    <p>{{{abstract.description}}}</p>
+                    <p>{{{abstract.videoDOI}}}</p>
+                    <p>{{{abstract.videoCitation}}}</p>
                 {{/abstract}}
 
                 {{#institution}}
-                    <h2>{{institution.title}}</h2>
+                    <h2>{{{institution.title}}}</h2>
                     <img src="{{institution.image}}" alt="image">
-                    <p>{{institution.institutionName}}</p>
-                    <p>{{institution.description}}</p>
+                    <p>{{{institution.institutionName}}}</p>
+                    <p>{{{institution.description}}}</p>
                 {{/institution}}
 
                 {{#bio}}
-                    <h2>{{bio.title}}</h2>
-                    <p>{{bio.description}}</p>
+                    <h2>{{{bio.title}}}</h2>
+                    <p>{{{bio.description}}}</p>
                 {{/bio}}
             </div>
             </div>
@@ -47,28 +47,28 @@
                     <span class="player-lt__close-button">&times;</span>
                         <div class="player-lt__modal-body">
                           {{#abstract}}
-                            <h2>{{abstract.title}}</h2>
-                            <p>{{abstract.description}}</p>
+                            <h2>{{{abstract.title}}}</h2>
+                            <p>{{{abstract.description}}}</p>
                             <hr>
                             <h3>Video DOI</h3>
-                            <p>{{abstract.videoDOI}}</p>
+                            <p>{{{abstract.videoDOI}}}</p>
                             <h3>Video Citation</h3>
-                            <p>{{abstract.videoCitation}}</p>
+                            <p>{{{abstract.videoCitation}}}</p>
                           {{/abstract}}
 
                           {{#institution}}
-                            <h2>{{institution.title}}</h2>
+                            <h2>{{{institution.title}}}</h2>
                             <div class="modal-flex">
                               <img src="{{institution.image}}" alt="image">
-                              <h3>{{institution.institutionName}}</h3>
+                              <h3>{{{institution.institutionName}}}</h3>
                             </div>
                             <hr>
-                            <p>{{institution.description}}</p>
+                            <p>{{{institution.description}}}</p>
                           {{/institution}}
 
                           {{#bio}}
-                            <h2>{{bio.title}}</h2>
-                            <p>{{bio.description}}</p>
+                            <h2>{{{bio.title}}}</h2>
+                            <p>{{{bio.description}}}</p>
                           {{/bio}}
                         </div>
                 </div>