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

package/src/components/captions/LTPlayerCaptions.ts

@@ -0,0 +1,80 @@
+import {LTPlayerController} from "../../global/controllers/LTPlayerController";
+
+export class LTPlayerCaptionsManager {
+    player: LTPlayerController
+
+    constructor(player: LTPlayerController) {
+        this.player = player;
+    }
+
+    enableSubtitlesCheckbox() {
+        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
+        const subtitleCheckboxInput = playerContainer.querySelector('.subtitles-body__input-switch')
+        subtitleCheckboxInput.removeAttribute('disabled')
+    }
+
+    disableSubtitlesCheckbox() {
+        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
+        const subtitleCheckboxInput = playerContainer.querySelector('.subtitles-body__input-switch')
+        subtitleCheckboxInput.setAttribute('disabled', '')
+    }
+
+    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.enableSubtitlesCheckbox()
+            this.player.plyr.toggleCaptions(true);
+            videoElement.appendChild(newTrack);
+        } else {
+            this.disableSubtitlesCheckbox()
+        }
+    }
+
+    enableCaptions() {
+        this.player.playerConfig.setCaptionsEnabled(true)
+        this.player.plyr.currentTrack = 0;
+        this.player.plyr.toggleCaptions(true)
+        this.player.statusFeedbackService.setCaptionsEnabled()
+    }
+
+    disableCaptions() {
+        this.player.playerConfig.setCaptionsEnabled(false)
+        this.player.plyr.currentTrack = -1;
+        this.player.plyr.toggleCaptions(false)
+        this.clearSubtitles()
+        this.player.statusFeedbackService.clearCaptionsEnabled()
+    }
+
+    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

@@ -6,13 +6,19 @@ export class LTPlayerConfig {
 
     private configData: playerConfigType = {
         version : null,
+        pinText: false,
+        pinSeekBar: false,
+        pinControls: false,
+        embed: false,
         preload: false,
         autoPlay : false,
+        fullscreenDisabled: false,
         videoTitle: '',
         posterImage: '',
         videoParagraph: '',
         videoUrl : false,
         playerId: '',
+        externalId: '',
         playerContainer: '',
         vimeo: false,
         youtube: {
@@ -25,6 +31,7 @@ export class LTPlayerConfig {
             'playsinline': true,
         },
         defaultConfig : false,
+        captionsEnabled: false,
         share: null,
         chapters : null,
         playerType: null,
@@ -92,6 +99,18 @@ export class LTPlayerConfig {
 
     }
 
+    isPinTextControls() {
+        return this.configData.pinText
+    }
+
+    isPinSeekBarControls() {
+        return this.configData.pinSeekBar
+    }
+
+    isPinBottomControls() {
+        return this.configData.pinControls
+    }
+
     getObjectFit() {
         return this.configData.videoObjectFit
     }
@@ -137,6 +156,10 @@ export class LTPlayerConfig {
         return this.configData.posterImage;
     }
 
+    setPosterImage(image: string) {
+        this.configData.posterImage = image;
+    }
+
     getParagraph() {
         return this.configData.videoParagraph;
     }
@@ -225,6 +248,9 @@ export class LTPlayerConfig {
     }
 
     getFullscreenMode() {
+        if (this.configData.fullscreenDisabled) {
+            return {fullscreen: {enabled: false}};
+        }
         return {fullscreen: {enabled: true}};
 
         if (this.getDevice() === 'mobile') {
@@ -233,5 +259,22 @@ export class LTPlayerConfig {
             return false
         }
     }
+
+    getEmbed() {
+        return this.configData.embed;
+    }
+
+    getCaptionsEnabled(): boolean {
+        return this.configData.captionsEnabled
+    }
+
+    setCaptionsEnabled(status: boolean) {
+        this.configData.captionsEnabled = status
+    }
+
+    hasCaptionsUrl(): boolean {
+        const defaultConfig = this.getDefaultConfigItems();
+        return !!(defaultConfig.captions.url)
+    }
 }
 

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -15,6 +15,8 @@ export namespace LTPlayerConfigProcessor {
 
         mapByVersion(name: string, value : any) {
             switch (name) {
+                case 'embed':
+                    return Processor.processEmbed(value, this.version);
                 case 'preload':
                     return Processor.processPreload(value, this.version);
                 case 'autoPlay' :
@@ -23,6 +25,8 @@ export namespace LTPlayerConfigProcessor {
                     return Processor.processVideoTitle(value, this.version);
                 case 'posterImage' :
                     return Processor.processPosterImage(value, this.version);
+                case 'fullscreenDisabled' :
+                    return Processor.processFullscreenDisabled(value, this.version);
                 case 'videoParagraph':
                     return Processor.processVideoParagraph(value, this.version);
                 case 'videoUrl' :
@@ -51,20 +55,21 @@ export namespace LTPlayerConfigProcessor {
                     }
                 case 'observe':
                     return Processor.processObserve(value, this.version);
+                default: return value;
             }
         }
     }
 
     export class Processor {
 
-        static processObserve(data : defaultType, version : number) {
+        static processObserve(data: defaultType, version: number) {
 
-            let output : defaultType = {
-                width : false,
-                height : false
+            let output: defaultType = {
+                width: false,
+                height: false
             }
 
-            if(!data) {
+            if (!data) {
                 return;
             }
             if (version === 1) {
@@ -75,7 +80,7 @@ export namespace LTPlayerConfigProcessor {
                 return;
             }
 
-            const setPropriety = (value : boolean | string | number) : boolean => {
+            const setPropriety = (value: boolean | string | number): boolean => {
                 if (!value) {
                     return false;
                 }
@@ -105,9 +110,9 @@ export namespace LTPlayerConfigProcessor {
             return output
         }
 
-        static processChapters(data : defaultType, version : number) {
+        static processChapters(data: defaultType, version: number) {
 
-            if(!data) {
+            if (!data) {
                 return;
             }
 
@@ -124,19 +129,20 @@ export namespace LTPlayerConfigProcessor {
         }
 
 
-        static processDefaultConfig(data : defaultType, version : number) {
-            let outputData : defaultType = {
-                speed : {
-                    selected : 1,
-                    captions : false,
+        static processDefaultConfig(data: defaultType, version: number) {
+            let outputData: defaultType = {
+                speed: {
+                    selected: 1,
+                    captions: false,
                     update: true
                 },
-                captions : {
-                    active : false
+                captions: {
+                    active: false,
+                    update: true,
                 },
-                clickToPlay : false,
-                playsinline : true,
-                pip : false
+                clickToPlay: false,
+                playsinline: true,
+                pip: false
             }
 
             if (!data) {
@@ -163,9 +169,9 @@ export namespace LTPlayerConfigProcessor {
 
         }
 
-        static processVimeoConfig(data : defaultType, version : number) {
+        static processVimeoConfig(data: defaultType, version: number) {
 
-            let outputData : defaultType = {
+            let outputData: defaultType = {
                 controls: false,
                 active: false,
                 gesture: 'media',
@@ -187,7 +193,7 @@ export namespace LTPlayerConfigProcessor {
                 return outputData;
             }
 
-            if (Object.keys(data).length === 0){
+            if (Object.keys(data).length === 0) {
                 return outputData;
             }
 
@@ -202,21 +208,21 @@ export namespace LTPlayerConfigProcessor {
             return outputData;
         }
 
-        static processShareData(data : defaultType, version : number) {
+        static processShareData(data: defaultType, version: number) {
             if (!data) {
                 return null
             }
 
             type shareDataConfig = {
-                canonicalUrl : string,
-                embedUrl : string,
-                title : string
+                canonicalUrl: string,
+                embedUrl: string,
+                title: string
             } | null
 
-            let outputData : shareDataConfig = {
-                canonicalUrl : undefined,
-                embedUrl : undefined,
-                title : undefined
+            let outputData: shareDataConfig = {
+                canonicalUrl: undefined,
+                embedUrl: undefined,
+                title: undefined
             }
 
             if (version === 1) {
@@ -247,7 +253,7 @@ export namespace LTPlayerConfigProcessor {
             return outputData;
         }
 
-        static processPlayerContainer(data : Element | defaultType, version : number) {
+        static processPlayerContainer(data: Element | defaultType, version: number) {
             if (!data) {
                 return null
             }
@@ -259,7 +265,7 @@ export namespace LTPlayerConfigProcessor {
             return data;
         }
 
-        static processVideoUrl(data : string | defaultType, version : number) {
+        static processVideoUrl(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -272,14 +278,14 @@ export namespace LTPlayerConfigProcessor {
                 }
             }
 
-            type configData = {videoUrl : string, videoType : string, embedId : string, embedHash : string, origin : string};
+            type configData = { videoUrl: string, videoType: string, embedId: string, embedHash: string, origin: string };
 
-            let outputData : configData = {
-                videoUrl : undefined,
-                videoType : undefined,
-                embedHash : undefined,
-                embedId : undefined,
-                origin : undefined
+            let outputData: configData = {
+                videoUrl: undefined,
+                videoType: undefined,
+                embedHash: undefined,
+                embedId: undefined,
+                origin: undefined
             }
 
             if (!Helper.isValidHttpUrl(data)) {
@@ -328,7 +334,7 @@ export namespace LTPlayerConfigProcessor {
             return outputData;
         }
 
-        static processVideoParagraph(data : string | defaultType, version : number) {
+        static processVideoParagraph(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -342,14 +348,14 @@ export namespace LTPlayerConfigProcessor {
                 }
             }
 
-            if (typeof data === 'string' && /[a-zA-Z]/.test(data)){
+            if (typeof data === 'string' && /[a-zA-Z]/.test(data)) {
                 outputData = data;
             }
 
             return outputData;
         }
 
-        static processPosterImage(data: string | defaultType, version : number) {
+        static processPosterImage(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -370,7 +376,8 @@ export namespace LTPlayerConfigProcessor {
             console.error(`Set valid url for poster image config item => posterImage : ${data} `);
             return undefined;
         }
-        static processVideoTitle(data : string | defaultType, version : number) {
+
+        static processVideoTitle(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -385,20 +392,21 @@ export namespace LTPlayerConfigProcessor {
             }
 
             if (data) {
-                if (typeof data === 'string' && /[a-zA-Z]/.test(data)){
+                if (typeof data === 'string' && /[a-zA-Z]/.test(data)) {
                     outputData = data;
                 }
             }
 
             return outputData;
         }
-        static processAutoPlay(data : boolean | string | object, version : number) {
+
+        static processAutoPlay(data: boolean | string | object, version: number) {
 
             if (!data) {
                 return null
             }
 
-            let outputData : boolean = false;
+            let outputData: boolean = false;
 
             if (version === 1) {
                 return outputData;
@@ -419,7 +427,8 @@ export namespace LTPlayerConfigProcessor {
 
             return outputData;
         }
-        static processPreload(data : object | null, version : number) {
+
+        static processPreload(data: object | null, version: number) {
 
             if (!data) {
                 return null
@@ -429,8 +438,8 @@ export namespace LTPlayerConfigProcessor {
                 return
             }
 
-            type outputType = {start : number, stop : number, autoType : boolean, isActive : boolean};
-            const setTimeRange = (config: defaultType, itemOutput : outputType) => {
+            type outputType = { start: number, stop: number, autoType: boolean, isActive: boolean };
+            const setTimeRange = (config: defaultType, itemOutput: outputType) => {
 
                 if (config.start) {
 
@@ -467,7 +476,7 @@ export namespace LTPlayerConfigProcessor {
                 return itemOutput;
             }
 
-            const setPreloadType = (type: defaultType, itemOutput : outputType) => {
+            const setPreloadType = (type: defaultType, itemOutput: outputType) => {
 
                 itemOutput.autoType = true;
 
@@ -487,18 +496,17 @@ export namespace LTPlayerConfigProcessor {
 
             }
 
-            const setActive = (itemOutput : outputType) => {
+            const setActive = (itemOutput: outputType) => {
                 itemOutput.isActive = true;
                 return itemOutput
             }
 
 
-
-            let itemOutput : outputType = {
-                start : 0,
-                stop : 10,
-                isActive : false,
-                autoType : false,
+            let itemOutput: outputType = {
+                start: 0,
+                stop: 10,
+                isActive: false,
+                autoType: false,
 
             };
 
@@ -544,6 +552,52 @@ export namespace LTPlayerConfigProcessor {
 
             return false;
         }
+
+        static processEmbed(data : boolean | string | object, version : number) {
+
+            if (!data) {
+                return null;
+            }
+
+            let outputData : boolean = false;
+
+            if (version === 1) {
+                return outputData;
+            }
+
+
+            if (typeof data === 'string') {
+                if (data === 'true') {
+                    outputData = true;
+                }
+            }
+
+            if (typeof data === 'boolean') {
+                if (data) {
+                    outputData = true;
+                }
+            }
+
+            return outputData;
+        }
+
+        static processFullscreenDisabled(data : boolean | string | object, version : number) {
+            let outputData  = false;
+
+            if (typeof data === 'string') {
+                if (data === 'true') {
+                    outputData = true;
+                }
+            }
+
+            if (typeof data === 'boolean') {
+                if (data) {
+                    outputData = true;
+                }
+            }
+
+            return outputData;
+        }
     }
 }
 

package/src/components/controls/LTPlayerChapters.ts

@@ -70,7 +70,7 @@ export class LTPlayerChapters {
 
         if (chapters !== undefined) {
             instance.playerControl.chaptersService.setChapterPreviousNext(chapters[2], chapters[0]);
-            instance.playerControl.chaptersService.setTitleChapterName(chapters[1]);
+            // instance.playerControl.chaptersService.setTitleChapterName(chapters[1]);
             instance.playerControl.chaptersService.setButtonsChapterTime(chapters[0], chapters[2])
         }
     }
@@ -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/LTPlayerControls.ts

@@ -14,6 +14,7 @@ export class LTPlayerControls {
     chaptersService : LTPlayerChapters
     desktopEvents: LTPlayerControlsEvents.Desktop;
     mobileEvents: LTPlayerControlsEvents.Mobile;
+    commonEvents: LTPlayerControlsEvents.Common;
 
     /**
      * Generate Player LTPlayerControls to pass in Plyr
@@ -22,6 +23,7 @@ export class LTPlayerControls {
     constructor(templateService: TemplateService) {
         this.settingsControlsManager = new LTPlayerSettingsControlsManager();
         this.templateService = templateService;
+        this.commonEvents = new LTPlayerControlsEvents.Common();
         this.setDesktopEvents();
         this.setMobileEvents();