@latest-thinking/lt-player 1.1.0-r → 1.1.0-t

package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss

@@ -2,7 +2,6 @@
 
 .lt-player-notification {
   width: 100%;
-  padding: 20px 20px 28px 20px;
 
   &__notification-button-state {
     position: absolute;
@@ -228,6 +227,18 @@
   }
 }
 
+.lt-player-orientation--portrait {
+  .lt-player-notification {
+    padding: 20px 20px 28px 20px;
+  }
+}
+
+.lt-player-orientation--landscape {
+  .lt-player-notification {
+    padding: 0;
+  }
+}
+
 @container portrait (width > 319px) {
   .lt-player-orientation--portrait {
     .lt-player-notification {

package/src/components/LTPlayerManager.ts

@@ -202,6 +202,22 @@ export class LTPlayerManager {
         }
     }
 
+    getPlayerByExternalId(id: string | number): null | LTPlayer.LandscapeType | LTPlayer.PortraitType {
+        if (this.players.length === 0) {
+            return null;
+        }
+
+        let response = null;
+
+        this.players.forEach(instance => {
+            if (instance.playerConfig.getConfigData().externalId == id) {
+                response = instance;
+            }
+        })
+
+        return response;
+    }
+
     /**
      * Pause all players
      */

package/src/components/LTPlayerStatusFeedback.ts

@@ -0,0 +1,68 @@
+import {LTPlayerController} from "../global/controllers/LTPlayerController";
+
+export class LTPlayerStatusFeedback {
+
+    player: LTPlayerController
+    element: HTMLElement
+
+    constructor(player: LTPlayerController) {
+        this.player = player;
+    }
+
+    private getElement(): HTMLElement {
+        if (!this.element) {
+            if (this.player.playerConfig) {
+                this.element = this.player.playerConfig.getPlayerElementContainer()
+            } else {
+                console.error("Failed to get element from playerConfig")
+            }
+        }
+        return this.element
+    }
+
+    private addClass(name: string) {
+        const element = this.getElement()
+        if (element && !element.classList.contains(name)) {
+            element.classList.add(name)
+        }
+    }
+
+    private removeClass(name: string) {
+        const element = this.getElement()
+        if (element && element.classList.contains(name)) {
+            element.classList.remove(name)
+        }
+    }
+
+    setLoading() {
+        this.addClass("lt-state-loader-active")
+    }
+
+    setLoadingSeek() {
+        this.addClass("lt-state-seeking")
+        this.setLoading()
+    }
+
+    clearLoading() {
+        this.removeClass("lt-state-loader-active")
+        this.removeClass("lt-state-seeking")
+    }
+
+    setFullscreen() {
+        this.addClass("lt-state-fullscreen")
+    }
+
+    clearFullscreen() {
+        this.removeClass("lt-state-fullscreen")
+    }
+
+    setControlsVisible() {
+        this.addClass("lt-state-controls-visible")
+    }
+
+    clearControlsVisible() {
+        this.removeClass("lt-state-controls-visible")
+    }
+
+}
+

package/src/components/LTPlayerUpdate.ts

@@ -16,12 +16,7 @@ export class LTPlayerUpdate {
         this.updateVideo(config.body.videoUrl, config.body.posterImage);
         this.updateTitle(config.body.videoParagraph);
         this.updateAuthor(config.body.videoTitle);
-        if (config.body.defaultConfig) {
-            //you should check for subtitles, if there arent any, set the src of the track element to "" else take it from this config. I dont know what works and what doesnt.
-            //Have fun, good luck.
-            //Otherwise, im not really sure what happens
-            this.updateSubtitles(config.body.defaultConfig.captions.url);
-        }
+        this.updateSubtitles(config.body.defaultConfig?.captions.url ?? null);
         this.updateChapters(config);
         this.player.additionalInfoService.setConfig(config.body.additionalInfo);
         return;
@@ -60,8 +55,7 @@ export class LTPlayerUpdate {
         authorParagraph.textContent = author;
     }
 
-    updateSubtitles(src: string) {
-        const track = document.querySelector('track');
-        console.log(track);
+    updateSubtitles(src: string|null) {
+        this.player.captionsService.setCaptions(src)
     }
 }

package/src/components/captions/LTPlayerCaptions.ts

@@ -0,0 +1,64 @@
+import {LTPlayerController} from "../../global/controllers/LTPlayerController";
+
+export class LTPlayerCaptionsManager {
+    player: LTPlayerController
+
+    constructor(player: LTPlayerController) {
+        this.player = player;
+    }
+
+    setCaptions(src: string|null): void {
+        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
+        const videoElement = playerContainer.querySelector("video")
+        const trackElement = videoElement.querySelector("track")
+
+        this.player.plyr.currentTrack = -1;
+        this.clearSubtitles()
+
+        if (trackElement) {
+            trackElement.remove()
+        }
+
+        if (src) {
+            const newTrack = document.createElement('track');
+            Object.assign(newTrack, {
+                kind: 'captions',
+                label: 'English captions',
+                srclang: 'en',
+                default: 'default',
+                src: src
+            });
+
+            newTrack.addEventListener(`load`, evt => {
+                this.player.plyr.currentTrack = 0;
+            });
+
+            this.player.plyr.toggleCaptions(true);
+            videoElement.appendChild(newTrack);
+        }
+    }
+
+    enableCaptions() {
+        this.player.playerConfig.setCaptionsEnabled(true)
+        this.player.plyr.currentTrack = 0;
+        this.player.plyr.toggleCaptions(true)
+    }
+
+    disableCaptions() {
+        this.player.playerConfig.setCaptionsEnabled(false)
+        this.player.plyr.currentTrack = -1;
+        this.player.plyr.toggleCaptions(false)
+        this.clearSubtitles()
+    }
+
+    clearSubtitles(): void {
+        const controls = this.player.plyr.elements.controls
+        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
+        const spanElement = customSubtitlesElement.querySelector('span');
+
+        if (!spanElement) {
+            return;
+        }
+        spanElement.innerHTML = ''; // Clear previous captions
+    }
+}

package/src/components/config/LTPlayerConfig.ts

@@ -18,6 +18,7 @@ export class LTPlayerConfig {
         videoParagraph: '',
         videoUrl : false,
         playerId: '',
+        externalId: '',
         playerContainer: '',
         vimeo: false,
         youtube: {
@@ -30,6 +31,7 @@ export class LTPlayerConfig {
             'playsinline': true,
         },
         defaultConfig : false,
+        captionsEnabled: false,
         share: null,
         chapters : null,
         playerType: null,
@@ -261,5 +263,13 @@ export class LTPlayerConfig {
     getEmbed() {
         return this.configData.embed;
     }
+
+    getCaptionsEnabled(): boolean {
+        return this.configData.captionsEnabled
+    }
+
+    setCaptionsEnabled(status: boolean) {
+        this.configData.captionsEnabled = status
+    }
 }
 

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -137,7 +137,8 @@ export namespace LTPlayerConfigProcessor {
                     update: true
                 },
                 captions: {
-                    active: false
+                    active: false,
+                    update: true,
                 },
                 clickToPlay: false,
                 playsinline: true,

package/src/components/controls/LTPlayerChapters.ts

@@ -191,13 +191,13 @@ export class LTPlayerChapters {
 
         leftButton.dataset.ltPlayerChaptertimestamp = String(false);
 
-        if (left !== null) {
+        if (left !== null && left != undefined) {
             leftButton.dataset.ltPlayerChaptertimestamp = left.timestamp;
         }
 
         const rightButton: HTMLElement = playerControlsContainer.querySelector('.skip-forward');
 
-        if (right !== null) {
+        if (right !== null && right != undefined) {
             rightButton.dataset.ltPlayerChaptertimestamp = right.timestamp;
         }
 
@@ -244,6 +244,10 @@ export class LTPlayerChapters {
      */
     findChapter(time: number, state: Array<any>) {
 
+        if (time == null || state.length == 0) {
+            return undefined;
+        }
+
         let current: null;
         let left: null;
         let right = null;
@@ -264,7 +268,7 @@ export class LTPlayerChapters {
         }
 
         for (let index = 0; index < state.length; index += 1) {
-            let element = state[index];
+            const element = state[index];
             if (element.timestamp >= time) {
                 right = element;
                 current = findCurrent(state, index);

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -201,55 +201,54 @@ export namespace LTPlayerControlsEvents {
             }
         }
 
-        showHideControls = {
-            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')
+        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');
+        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')
+            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');
+        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')
+            if (bottomControlsElement) {
+                if (visible) {
+                    if (!bottomControlsElement.classList.contains('bottom-controller-enable')) {
+                        bottomControlsElement.classList.add('bottom-controller-enable')
                     }
+                } else {
+                    bottomControlsElement.classList.remove('bottom-controller-enable')
                 }
-            },
-
-            showHideOnPause(visible: boolean, controls: HTMLElement) {
-                this.showHideBottomControls(visible, controls);
-                this.showHideSeekBar(visible, controls);
-                this.showHideBottomControls(visible, controls);
             }
         }
+
+        showHideAllControls(visible: boolean, controls: HTMLElement) {
+            this.showHideText(visible, controls);
+            this.showHideSeekBar(visible, controls);
+            this.showHideBottomControls(visible, controls);
+        }
+
     }
 
     export class Desktop {
@@ -272,11 +271,11 @@ export namespace LTPlayerControlsEvents {
             const controls = instance.plyr.elements.controls;
             const commonInstance = this.common;
             controls.classList.add('plyr__controls-enable');
+            instance.statusFeedbackService.setControlsVisible()
 
-
-            commonInstance.showHideControls.showHideText(true, controls);
-            commonInstance.showHideControls.showHideSeekBar(true, controls);
-            commonInstance.showHideControls.showHideBottomControls(true, controls);
+            commonInstance.showHideText(true, controls);
+            commonInstance.showHideSeekBar(true, controls);
+            commonInstance.showHideBottomControls(true, controls);
 
             let timerText: NodeJS.Timeout = null;
             let timerSeekBar: NodeJS.Timeout = null;
@@ -297,20 +296,20 @@ export namespace LTPlayerControlsEvents {
                 }
 
                 if (instance.plyr.paused) {
-                    commonInstance.showHideControls.showHideOnPause(true, controls);
+                    commonInstance.showHideAllControls(true, controls);
                     return;
                 }
 
                 if (!instance.playerConfig.isPinTextControls()) {
-                    commonInstance.showHideControls.showHideText(true, controls);
+                    commonInstance.showHideText(true, controls);
                 }
 
                 if (!instance.playerConfig.isPinSeekBarControls()) {
-                    commonInstance.showHideControls.showHideSeekBar(true, controls);
+                    commonInstance.showHideSeekBar(true, controls);
                 }
 
                 if (!instance.playerConfig.isPinBottomControls()) {
-                    commonInstance.showHideControls.showHideBottomControls(true, controls);
+                    commonInstance.showHideBottomControls(true, controls);
                 }
 
             })
@@ -318,25 +317,26 @@ export namespace LTPlayerControlsEvents {
 
             controls.addEventListener('mouseleave', function () {
                 if (instance.plyr.paused) {
-                    commonInstance.showHideControls.showHideOnPause(true, controls);
+                    commonInstance.showHideAllControls(true, controls);
                     return;
                 }
 
                 if (!instance.playerConfig.isPinTextControls()) {
                     timerText = setTimeout(() => {
-                        commonInstance.showHideControls.showHideText(false, controls);
+                        commonInstance.showHideText(false, controls);
                     }, 5000)
                 }
 
                 if (!instance.playerConfig.isPinSeekBarControls()) {
                     timerSeekBar = setTimeout(() => {
-                        commonInstance.showHideControls.showHideSeekBar(false, controls);
+                        commonInstance.showHideSeekBar(false, controls);
 
                     }, 5000)
                 }
                 if (!instance.playerConfig.isPinBottomControls()) {
                     timerBottomControls = setTimeout(() => {
-                        commonInstance.showHideControls.showHideBottomControls(false, controls);
+                        instance.statusFeedbackService.clearControlsVisible()
+                        commonInstance.showHideBottomControls(false, controls);
                     }, 5000)
                 }
             })
@@ -668,6 +668,8 @@ export namespace LTPlayerControlsEvents {
 
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
+            instance.statusFeedbackService.setControlsVisible()
+
             if (playerContainer.classList.contains('plyr--hide-controls')) {
                 playerContainer.classList.remove('plyr--hide-controls');
             }
@@ -688,13 +690,13 @@ export namespace LTPlayerControlsEvents {
                 clearTimeout(this.controlsTimeOut);
             }
 
-            commonInstance.showHideControls.showHideText(true, playerControlsContainer);
-            commonInstance.showHideControls.showHideSeekBar(true, playerControlsContainer);
-            commonInstance.showHideControls.showHideBottomControls(true, playerControlsContainer);
+            commonInstance.showHideText(true, playerControlsContainer);
+            commonInstance.showHideSeekBar(true, playerControlsContainer);
+            commonInstance.showHideBottomControls(true, playerControlsContainer);
 
 
             if (instance.plyr.paused) {
-                commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                commonInstance.showHideAllControls(true, playerControlsContainer);
                 return;
             }
 
@@ -709,24 +711,27 @@ export namespace LTPlayerControlsEvents {
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
             const showHideControls = () => {
+                instance.statusFeedbackService.clearControlsVisible()
+
                 if (!instance.playerConfig.isPinTextControls()) {
-                    commonInstance.showHideControls.showHideText(false, playerControlsContainer);
+                    commonInstance.showHideText(false, playerControlsContainer);
                 }
 
                 if (!instance.playerConfig.isPinSeekBarControls()) {
-                    commonInstance.showHideControls.showHideSeekBar(false, playerControlsContainer);
+                    commonInstance.showHideSeekBar(false, playerControlsContainer);
                 }
                 if (!instance.playerConfig.isPinBottomControls()) {
-                    commonInstance.showHideControls.showHideBottomControls(false, playerControlsContainer);
+                    commonInstance.showHideBottomControls(false, playerControlsContainer);
                 }
             }
 
+
             if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
 
                 if (now) {
 
                     if (instance.plyr.paused) {
-                        commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                        commonInstance.showHideAllControls(true, playerControlsContainer);
                         return;
                     }
 
@@ -742,7 +747,7 @@ export namespace LTPlayerControlsEvents {
                         // playerContainer.classList.add('plyr--hide-controls');
 
                         if (instance.plyr.paused) {
-                            commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                            commonInstance.showHideAllControls(true, playerControlsContainer);
                             return;
                         }
 

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

@@ -9,7 +9,13 @@ 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()
+            }
+        );
         const lastElement = this.instance.plyr.elements.controls.lastElementChild;
 
         if (lastElement) {

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

@@ -33,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);
-
             })
         }
     }