@latest-thinking/lt-player 1.0.4-n → 1.0.4-p

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -0,0 +1,496 @@
+import {defaultType, urlDataType} from "../../global/types/ModuleTypes";
+import {Helper} from "../../services/Helper";
+
+export namespace LTPlayerConfigProcessor {
+    export class Map {
+        version : number
+
+        setVersion(version : number) {
+            this.version = version;
+        }
+
+        processItem(name: string, value : any) {
+            return this.mapByVersion(name, value);
+        }
+
+        mapByVersion(name: string, value : any) {
+            switch (name) {
+                case 'preload':
+                    return Processor.processPreload(value, this.version);
+                case 'autoPlay' :
+                    return Processor.processAutoPlay(value, this.version);
+                case 'videoTitle' :
+                    return Processor.processVideoTitle(value, this.version);
+                case 'posterImage' :
+                    return Processor.processPosterImage(value, this.version);
+                case 'videoParagraph':
+                    return Processor.processVideoParagraph(value, this.version);
+                case 'videoUrl' :
+                    return Processor.processVideoUrl(value, this.version);
+                case 'playerContainer' :
+                    return Processor.processPlayerContainer(value, this.version);
+                case 'share':
+                    return Processor.processShareData(value, this.version);
+                case 'vimeo':
+                    return Processor.processVimeoConfig(value, this.version);
+                case 'defaultConfig':
+                    return Processor.processDefaultConfig(value, this.version);
+                case 'chapters':
+                    return Processor.processChapters(value, this.version);
+                case 'device':
+                    if (this.version === 1) {
+                        return value.device;
+                    } else {
+                        return value;
+                    }
+                case 'playerType':
+                    if (this.version === 1) {
+                        return value.playerType;
+                    } else {
+                        return value;
+                    }
+            }
+        }
+    }
+
+    export class Processor {
+
+        static processChapters(data : defaultType, version : number) {
+
+            if(!data) {
+                return;
+            }
+
+            if (version === 1) {
+                data = data.chapters;
+            }
+
+            if (Object.keys(data).length === 0) {
+                return;
+            }
+
+            return data;
+
+        }
+
+
+        static processDefaultConfig(data : defaultType, version : number) {
+            let outputData : defaultType = {
+                speed : {
+                    selected : 1,
+                    captions : false,
+                    update: true
+                },
+                captions : {
+                    active : false
+                },
+                clickToPlay : false,
+                playsinline : true,
+                pip : false
+            }
+
+            if (!data) {
+                return outputData;
+            }
+
+            if (version === 1) {
+                return outputData;
+            }
+
+            if (Object.keys(data).length === 0) {
+                return outputData;
+            }
+
+            Object.keys(data).forEach(item => {
+                if (outputData[item] !== undefined) {
+                    outputData[item] = data[item];
+                } else {
+                    outputData[item] = data[item];
+                }
+            })
+
+            return outputData;
+
+        }
+
+        static processVimeoConfig(data : defaultType, version : number) {
+
+            let outputData : defaultType = {
+                controls: false,
+                active: false,
+                gesture: 'media',
+                transparent: false,
+                speed: true,
+                portrait: true,
+                keyboard: false,
+                title: false,
+                byline: false,
+                playsinline: true,
+                background: true
+            }
+
+            if (version === 1) {
+                return outputData
+            }
+
+            if (!data) {
+                return outputData;
+            }
+
+            if (Object.keys(data).length === 0){
+                return outputData;
+            }
+
+            Object.keys(data).forEach(item => {
+                if (outputData[item] !== undefined) {
+                    outputData[item] = data[item];
+                } else {
+                    outputData[item] = data[item];
+                }
+            })
+
+            return outputData;
+        }
+
+        static processShareData(data : defaultType, version : number) {
+            if (!data) {
+                return null
+            }
+
+            if (version === 1) {
+                return null;
+            }
+
+            type shareDataConfig = {
+                canonicalUrl : string,
+                embedUrl : string,
+                title : string
+            } | null
+
+            let outputData : shareDataConfig = {
+                canonicalUrl : undefined,
+                embedUrl : undefined,
+                title : undefined
+            }
+
+            if (Object.keys(data).length === 0) {
+                return;
+            }
+
+            if (data.canonicalUrl !== undefined) {
+                outputData.canonicalUrl = data.canonicalUrl;
+            }
+
+            if (data.embedUrl !== undefined) {
+                outputData.embedUrl = data.embedUrl;
+            }
+
+            if (data.title !== undefined) {
+                outputData.title = data.title;
+            }
+
+            return outputData;
+
+        }
+
+        static processPlayerContainer(data : Element | defaultType, version : number) {
+            if (!data) {
+                return null
+            }
+
+            if (version === 1) {
+                return (data as defaultType).playerContainer;
+            }
+
+            return data;
+        }
+
+        static processVideoUrl(data : string | defaultType, version : number) {
+
+            if (!data) {
+                return null
+            }
+
+
+            if (version === 1) {
+                if (typeof data === 'object') {
+                    data = data.sources.video_id;
+                }
+            }
+
+            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
+            }
+
+            if (!Helper.isValidHttpUrl(data)) {
+                console.error(`Please insert valid url video url videoURL : ${data}`);
+                return outputData
+            }
+
+            const urlVideoData: urlDataType = Helper.processConfigData(data);
+
+            const mapVideoData = (data: string | defaultType, urlVideoData: urlDataType, outputData: configData) => {
+
+                if (typeof data === "string") {
+                    outputData.videoUrl = data;
+                }
+
+                if (urlVideoData.origin) {
+                    outputData.origin = urlVideoData.origin;
+                }
+
+                if (urlVideoData.type) {
+                    outputData.videoType = urlVideoData.type.toLowerCase()
+                }
+
+                if (urlVideoData.type === 'embedded') {
+                    const embedID = Helper.getEmbeddedID(data);
+
+                    if (embedID) {
+                        outputData.embedId = embedID;
+                    }
+
+                    const embedHash = Helper.getEmbeddedHash(data);
+
+                    if (embedHash) {
+                        outputData.embedHash = embedHash;
+                    }
+                }
+
+                return outputData;
+
+            }
+
+
+            outputData = mapVideoData(data, urlVideoData, outputData);
+
+
+            return outputData;
+        }
+
+        static processVideoParagraph(data : string | defaultType, version : number) {
+
+            if (!data) {
+                return null
+            }
+
+            let outputData = undefined;
+
+            if (version === 1) {
+                if (typeof data === 'object') {
+                    data = data.author;
+                }
+            }
+
+            if (typeof data === 'string' && /[a-zA-Z]/.test(data)){
+                outputData = data;
+            }
+
+            return outputData;
+        }
+
+        static processPosterImage(data: string | defaultType, version : number) {
+
+            if (!data) {
+                return null
+            }
+
+            if (version === 1) {
+                if (typeof data === 'object') {
+                    return data.poster;
+                }
+            }
+
+            let check = Helper.isValidHttpUrl(data);
+
+            if (check) {
+                return data;
+            }
+
+            console.error(`Set valid url for poster image config item => posterImage : ${data} `);
+            return undefined;
+        }
+        static processVideoTitle(data : string | defaultType, version : number) {
+
+            if (!data) {
+                return null
+            }
+
+            let outputData = undefined;
+
+            if (version === 1) {
+                if (typeof data === 'object') {
+                    data = data.title;
+                }
+            }
+
+            if (data) {
+                if (typeof data === 'string' && /[a-zA-Z]/.test(data)){
+                    outputData = data;
+                }
+            }
+
+            return outputData;
+        }
+        static processAutoPlay(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 processPreload(data : object | null, version : number) {
+
+            if (!data) {
+                return null
+            }
+
+            if (version === 1) {
+                return
+            }
+
+            type outputType = {start : number, stop : number, autoType : boolean, isActive : boolean};
+            const setTimeRange = (config: defaultType, itemOutput : outputType) => {
+
+                if (config.start) {
+
+                    let start = config.start;
+
+                    if (typeof start === 'string') {
+                        start = parseFloat(start);
+                    }
+
+                    itemOutput.start = start;
+
+
+                    if (!start) {
+                        itemOutput.start = 0;
+                    }
+                }
+
+                if (config.stop) {
+
+                    let stop = config.stop;
+
+                    if (typeof stop === 'string') {
+                        stop = parseFloat(stop);
+                    }
+
+                    itemOutput.stop = stop;
+
+                    if (!stop) {
+                        itemOutput.stop = 10;
+                    }
+
+                }
+
+                return itemOutput;
+            }
+
+            const setPreloadType = (type: defaultType, itemOutput : outputType) => {
+
+                itemOutput.autoType = true;
+
+                if (type.onload !== undefined) {
+                    if (typeof type.onload === 'string' && type.onload === 'false') {
+                        itemOutput.autoType = false;
+                    }
+
+                    if (typeof type.onload === 'boolean') {
+                        if (!type.onload) {
+                            itemOutput.autoType = false;
+                        }
+                    }
+                }
+
+                return itemOutput;
+
+            }
+
+            const setActive = (itemOutput : outputType) => {
+                itemOutput.isActive = true;
+                return itemOutput
+            }
+
+
+
+            let itemOutput : outputType = {
+                start : 0,
+                stop : 10,
+                isActive : false,
+                autoType : false,
+
+            };
+
+            if (typeof data === 'object') {
+                if (Object.keys(data).length !== 0) {
+                    itemOutput = setTimeRange(data, itemOutput);
+                    itemOutput = setPreloadType(data, itemOutput);
+                    itemOutput = setActive(itemOutput);
+
+                    return itemOutput;
+                }
+
+                if (Object.keys(data).length === 0) {
+                    itemOutput = setPreloadType(data, itemOutput);
+                    itemOutput = setActive(itemOutput);
+
+                    return itemOutput
+                }
+
+                return false
+            }
+
+            if (typeof data === 'string' && data !== 'false') {
+
+                if (data === 'true') {
+                    itemOutput = setPreloadType(data, itemOutput);
+                    itemOutput = setActive(itemOutput);
+                    return itemOutput;
+                }
+
+                return false;
+            }
+
+            if (typeof data === 'boolean') {
+                if (data) {
+                    itemOutput = setPreloadType(data, itemOutput);
+                    itemOutput = setActive(itemOutput);
+                    return itemOutput;
+                }
+
+                return false;
+            }
+
+            return false;
+        }
+    }
+}
+
+

package/src/components/controls/LTPlayerControls.ts

@@ -1,6 +1,6 @@
 import Plyr from "plyr";
 import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerConfig} from "../LTPlayerConfig";
+import {LTPlayerConfig} from "../config/LTPlayerConfig";
 import {IconsService} from "../../services/IconsService";
 import {LTPlayerChapters} from "./LTPlayerChapters";
 import {LTPlayerSettingsControlsManager} from "./LTPlayerSettingsControlsManager";

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -1,7 +1,6 @@
 import {LTPlayer} from "../LTPlayerType";
 import {plyr} from "../../global/types/ModuleTypes";
 
-
 export namespace LTPlayerControlsEvents  {
 
     export class Common {
@@ -9,14 +8,29 @@ export namespace LTPlayerControlsEvents  {
         backwardRewind = {
 
             getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-               return {
+
+               let selectors = {
                    playerContainer: instance.plyr.elements.container,
                    playerControlsContainer: instance.plyr.elements.controls,
                    forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
                    rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
                    forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
-                   rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind')
-               };
+                   rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
+                   forwardAreaBackground: null as Element,
+                   rewindAreaBackground:  null as Element,
+                   forwardAnimationBackground:  null as Element,
+                   rewindAnimationBackground:  null as Element,
+
+               }
+
+               if (instance.playerConfig.getDevice() === 'mobile') {
+                   selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
+                   selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
+                   selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
+                   selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
+               }
+
+               return selectors
             },
 
             updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType ,time: number) {
@@ -58,9 +72,58 @@ export namespace LTPlayerControlsEvents  {
 
             animateNotificationOut(selector: Element) {
                 selector.classList.remove('animate-in');
-            }
+            },
         }
 
+        checkTitleBreakWord(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            const controlsSelector = instance.plyr.elements.controls;
+            const videoTitle = controlsSelector.querySelector('.poster-paragraph__content');
+            const readButton = controlsSelector.querySelector('.poster-paragraph__button');
+
+            if (!videoTitle) {
+                return;
+            }
+
+            if (videoTitle.scrollHeight <= videoTitle.clientHeight) {
+                readButton.classList.add('d-none');
+                return;
+            }
+
+            const heightContent = videoTitle.scrollHeight;
+
+            const openHide = () => {
+
+                let inlineStyleElement = videoTitle as unknown as ElementCSSInlineStyle
+
+                if (videoTitle.classList.contains('open-content')) {
+                    inlineStyleElement.style.maxHeight = null;
+                    setTimeout(() => {
+                        videoTitle.classList.remove('open-content');
+                    }, 300)
+                    readButton.innerHTML = 'Read more'
+                } else {
+                    readButton.innerHTML = 'Hide'
+                    inlineStyleElement.style.maxHeight = `${heightContent}px`;
+                    videoTitle.classList.add('open-content');
+                }
+            }
+
+            if (readButton) {
+
+                if (instance.playerConfig.getDevice() === 'mobile') {
+                    let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(readButton);
+                    mobileEvent.on('singletap', function LTPlayerMobileShowHideTitle() {
+                        openHide();
+                        instance.playerControl.mobileEvents.showControls(instance)
+                    })
+                } else {
+                    readButton.addEventListener('click', function LTPlayerTitleButton() {
+                        openHide();
+                    })
+                }
+            }
+
+        }
 
         playPauseIconTimeUpdate(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
@@ -88,6 +151,9 @@ export namespace LTPlayerControlsEvents  {
         constructor() {
             this.common = new Common();
         }
+        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            this.common.checkTitleBreakWord(instance)
+        }
         subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
             const playerContainer = instance.plyr.elements.container;
@@ -121,7 +187,7 @@ export namespace LTPlayerControlsEvents  {
 
 
             controls.addEventListener('mouseleave', function () {
-                controls.classList.remove('plyr__controls-enable')
+                // controls.classList.remove('plyr__controls-enable')
             })
         }
 
@@ -557,6 +623,16 @@ export namespace LTPlayerControlsEvents  {
 
                 mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick(event) {
                     singleTapAction();
+                });
+
+                let mobileEventBackground: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardAreaBackground);
+
+                mobileEventBackground.on('doubletap', function LTPlayerMobileForwardDbClickBackground(event) {
+                    common.backwardRewind.animateNotificationIn(selectors.forwardAnimationBackground);
+                    common.backwardRewind.updateCurrentTime(instance, 10);
+                    setTimeout(() => {
+                        common.backwardRewind.animateNotificationOut(selectors.forwardAnimationBackground)
+                    }, 500)
                 })
             }
 
@@ -575,10 +651,19 @@ export namespace LTPlayerControlsEvents  {
                 })
 
                 mobileEvent.on('singletap', function LTPlayerMobileRewindClick(event) {
-
                     singleTapAction();
                 })
 
+                let mobileEventBackground: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindAreaBackground);
+
+                mobileEventBackground.on('doubletap', function LTPlayerMobileRewindDbClickBackground(event) {
+                    common.backwardRewind.animateNotificationIn(selectors.rewindAnimationBackground);
+                    common.backwardRewind.updateCurrentTime(instance, 10);
+                    setTimeout(() => {
+                        common.backwardRewind.animateNotificationOut(selectors.rewindAnimationBackground)
+                    }, 500)
+                })
+
             }
         }
 

package/src/components/poster/LTPlayerPoster.ts

@@ -1,5 +1,5 @@
 import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerConfig} from "../LTPlayerConfig";
+import {LTPlayerConfig} from "../config/LTPlayerConfig";
 import {IconsService} from "../../services/IconsService";
 import Plyr from "plyr";
 

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -87,6 +87,7 @@ export namespace LTPlayerPosterEvents {
             common.poster.getButtons(instance)?.forEach(button => {
                 button.addEventListener('click', function LTPlayerPosterButtons(event) {
                     event.preventDefault();
+                    instance.playerControl.desktopEvents.titleLineBreak(instance);
                     common.poster.reset(instance);
                 })
             });
@@ -108,6 +109,7 @@ export namespace LTPlayerPosterEvents {
 
                 if (mobileEvent) {
                     mobileEvent.on('singletap', function LTPlayerMobilePosterButtons() {
+                        instance.playerControl.desktopEvents.titleLineBreak(instance);
 
                         common.poster.reset(instance);
 

package/src/components/poster/LTPlayerPosterManager.ts

@@ -2,7 +2,7 @@ import {LTPlayerPosterPreload} from "./LTPlayerPosterPreload";
 import {LTPlayerPoster} from "./LTPlayerPoster";
 import {LTPlayer} from "../LTPlayerType";
 import {LTPlayerDevMethode} from "../LTPlayerDevMethode";
-import {LTPlayerConfig} from "../LTPlayerConfig";
+import {LTPlayerConfig} from "../config/LTPlayerConfig";
 import {TemplateService} from "../../services/TemplateService";
 import {IconsService} from "../../services/IconsService";
 import {LTPlayerPosterEvents} from "./LTPlayerPosterEvents";

package/src/components/poster/LTPlayerPosterPreload.ts

@@ -1,7 +1,7 @@
 import {LTPlayerPoster} from "./LTPlayerPoster";
 import Plyr from "plyr";
 import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerConfig} from "../LTPlayerConfig";
+import {LTPlayerConfig} from "../config/LTPlayerConfig";
 import {IconsService} from "../../services/IconsService";
 import {LoaderService} from "../../services/LoaderService";
 import {LTPlayer} from "../LTPlayerType";