@latest-thinking/lt-player 1.1.0-k → 1.1.0-m

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -220,6 +220,11 @@ export namespace LTPlayerControlsEvents  {
             const controls = instance.plyr.elements.controls;
             const eventsInstance = this;
 
+            if (instance.playerConfig.isAlwaysDisplayControls()) {
+                controls.classList.add('plyr__controls-enable');
+                return;
+            }
+
             controls.addEventListener('mouseover', function () {
                 controls.classList.add('plyr__controls-enable');
                 eventsInstance.common.subtitlesHide(instance);
@@ -581,7 +586,13 @@ export namespace LTPlayerControlsEvents  {
                 clearTimeout(this.controlsTimeOut);
             }
 
-            this.hideControls(instance, false);
+
+            if (!instance.playerConfig.isAlwaysDisplayControls()) {
+                this.hideControls(instance, false);
+                return;
+            }
+
+
         }
 
         hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
@@ -656,7 +667,9 @@ export namespace LTPlayerControlsEvents  {
             const selectors = common.backwardRewind.getSelectors(instance);
 
             const singleTapAction = () => {
-                instance.playerControl.mobileEvents.hideControls(instance, true);
+                if (!instance.playerConfig.isAlwaysDisplayControls()) {
+                    instance.playerControl.mobileEvents.hideControls(instance, true);
+                }
             }
 
             if (selectors.forwardArea) {

package/src/components/events/LTPlayerCommon.ts

@@ -27,26 +27,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 +174,21 @@ 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.length > 0) {
+            spanElement.innerHTML = eventPlayer.captions.currentTrackNode.activeCues[0].text;
+        } else {
+            spanElement.innerHTML = ''; // Clear previous captions
+        }
+    }
 }

package/src/components/events/LTPlayerDesktop.ts

@@ -25,6 +25,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrOnPlay();
         this.plyrOnPause();
         this.plyrOnSeek();
+        this.plyrOnCueChange();
     }
 
     plyrOnSeek():void {
@@ -205,4 +206,13 @@ 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) {
+            common.setCustomSubtitles(plyr.elements.controls, event)
+        })
+    }
 }

package/src/components/events/LTPlayerMobile.ts

@@ -25,6 +25,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrOnPlay();
         this.plyrOnPause();
         this.plyrOnSeek();
+        this.plyrOnCueChange()
     }
 
     plyrOnSeek():void {
@@ -228,4 +229,14 @@ 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) {
+            common.setCustomSubtitles(plyr.elements.controls, event)
+        })
+    }
+
 }

package/src/views/controls.handlebars

@@ -31,6 +31,7 @@
         </div>
       </div>
       <div class="lt-player-notification landscape">
+          <div class="lt-player-custom-captions"><span></span></div>
         <!--                <div class="lt-player-video-content">-->
         <!--                    <div class="content__body">-->
         <!--                        <h4 class="poster-title">{{videoParagraph}}</h4>-->
@@ -38,6 +39,7 @@
         <!--                    </div>-->
         <!--                </div>-->
         <div class="lt-player-notification__notification-button-state landscape">
+
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -166,6 +168,7 @@
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
             <div class="lt-player-notification portrait">
+                <div class="lt-player-custom-captions"><span></span></div>
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">
@@ -229,6 +232,7 @@
         </div>
       </div>
       <div class="lt-player-notification portrait">
+          <div class="lt-player-custom-captions"><span></span></div>
         <div class="lt-player-notification__notification-button-state portrait">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
@@ -348,6 +352,7 @@
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
             <div class="lt-player-notification portrait">
+                <div class="lt-player-custom-captions"><span></span></div>
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">