@latest-thinking/lt-player 1.0.5 → 1.0.6-b

package/src/components/LTPlayerType.ts

@@ -8,8 +8,8 @@ import {LTPlayerDevMethode} from "./LTPlayerDevMethode";
 import {LTPlayerEventsManager} from "./LTPlayerEventsManager";
 import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
 import {LTPlayerEvents} from "./events/LTPlayer";
-import {LTPlayerPosterManager} from "./poster/LTPlayerPosterManager";
-import {config} from "json-schema-library";
+import {Helper} from "../services/Helper";
+import {LTPlayerHls} from "./LTPlayerHls";
 
 export namespace LTPlayer {
 
@@ -39,8 +39,16 @@ export namespace LTPlayer {
             this.additionalInfoService = additionalInfoService;
             this.miniPlayer = new LTPlayerMini();
             this.setPlayerConfig(configData.body, configData.version);
-            this.initSetupPlayerPoster(configData.body);
             this.initPlayer();
+
+            if (this.additionalInfoService) {
+                this.additionalInfoService.init(this, this.playerConfig.getPlayerId(), this.iconService, this.templateService)
+            }
+
+            if (Helper.checkIsHls(this.playerConfig.getVideoUrl().videoUrl)){
+                this.hls = new LTPlayerHls(this, undefined);
+            }
+
             this.setEvents();
 
             return true;
@@ -50,14 +58,6 @@ export namespace LTPlayer {
         setEvents() {
             this.eventInstance = new LTPlayerEventsManager(this);
         }
-
-        private initSetupPlayerPoster(configData: defaultType) {
-            const playerContainer = configData.playerContainer;
-            playerContainer.classList.add('d-none')
-            const logo: string = this.iconService.getLogo();
-            playerContainer.insertAdjacentHTML("afterend", this.templateService.getOnloadPoster({logo: logo})) ;
-        }
-
         setDesktopEvents() {
             this.desktopEvents = new LTPlayerEvents.Desktop();
         }
@@ -106,21 +106,19 @@ export namespace LTPlayer {
 
             this.playerConfig.getPlayerElementContainer().classList.add(`lt-player-portrate--${this.playerConfig.getDevice()}`);
 
-
             let playerSettings = {};
 
             const controls = this.getPlayerControllers();
 
             Object.assign(playerSettings, {controls});
 
-
             if (this.playerConfig.getVideoType() === 'embedded') {
                 Object.assign(playerSettings, this.playerConfig.getEmbedOrigin())
             }
 
             Object.assign(playerSettings, this.playerConfig.getDefaultConfigItems());
 
-            Object.assign(playerSettings, {ratios : '9:16'});
+            Object.assign(playerSettings, {ratio : '9:16'});
 
             if (this.playerConfig.getFullscreenMode()) {
                 Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
@@ -128,7 +126,15 @@ export namespace LTPlayer {
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
 
-            const player = new Plyr(element, playerSettings)
+            this.plyr = new Plyr(element, playerSettings);
+
+            this.playerConfig.setObjectFit(this.plyr, 'portrait').then(() => {
+                this.videoService.init(this);
+            });
+
+            this.windowService.init(this);
+
+            this.posterManager.init(this);
 
             const chapters = this.playerConfig.getChapters();
 
@@ -136,18 +142,14 @@ export namespace LTPlayer {
                 this.playerControl.initChapters(this.playerConfig.getChapters());
             }
 
-            this.plyr = player;
-
-            this.devMethodePlayer = new LTPlayerDevMethode.Player(player);
-
-            this.posterManager.init(this);
+            this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
 
             if (this.playerConfig.getShareData()) {
                 this.share.init(this);
             }
 
             if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(player, this.templateService, this.iconService);
+                this.miniPlayer.init(this.plyr, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
             }
         }
 
@@ -167,6 +169,13 @@ export namespace LTPlayer {
             return this.devMethodePreload;
         }
 
+        enterMiniPlayer() {
+            return this.devMethodePlayer.enterMiniPlayer()
+        }
+        exitMiniPlayer() {
+            return this.devMethodePlayer.exitMiniPlayer()
+        }
+
         destruct() {
             let _this = this;
 
@@ -210,8 +219,14 @@ export namespace LTPlayer {
 
             this.miniPlayer = new LTPlayerMini();
             this.setPlayerConfig(configData.body, configData.version);
-            this.initPoster(configData.body);
             this.initPlayer();
+
+
+            if (Helper.checkIsHls(this.playerConfig.getVideoUrl().videoUrl)){
+                this.hls = new LTPlayerHls(this, undefined);
+            }
+
+
             this.setEvents();
 
             return true;
@@ -239,7 +254,7 @@ export namespace LTPlayer {
 
             Object.assign(playerSettings, this.playerConfig.getDefaultConfigItems());
 
-            Object.assign(playerSettings, {ratios : '16:9'});
+            Object.assign(playerSettings, {ratio : '16:9'});
 
             if (this.playerConfig.getFullscreenMode()) {
                 Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
@@ -247,7 +262,15 @@ export namespace LTPlayer {
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
 
-            const player = new Plyr(element, playerSettings);
+            this.plyr = new Plyr(element, playerSettings);
+
+            this.playerConfig.setObjectFit(this.plyr, 'landscape').then(() => {
+                this.videoService.init(this);
+            });
+
+            this.windowService.init(this);
+
+            this.posterManager.init(this);
 
             const chapters = this.playerConfig.getChapters();
 
@@ -255,18 +278,14 @@ export namespace LTPlayer {
                 this.playerControl.initChapters(this.playerConfig.getChapters());
             }
 
-            this.plyr = player;
-
-            this.devMethodePlayer = new LTPlayerDevMethode.Player(player);
-
-            this.posterManager.init(this);
+            this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
 
             if (this.playerConfig.getShareData()) {
                 this.share.init(this);
             }
 
             if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(player, this.templateService, this.iconService);
+                this.miniPlayer.init(this.plyr, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
             }
         }
 
@@ -279,13 +298,6 @@ export namespace LTPlayer {
             playerContainer.innerHTML = this.templateService.getTemplateByType(config);
         }
 
-        initPoster(configData: defaultType) {
-            const playerContainer = configData.playerContainer;
-            playerContainer.classList.add('d-none')
-            const logo: string = this.iconService.getLogo();
-            playerContainer.insertAdjacentHTML("afterend", this.templateService.getOnloadPoster({logo: logo})) ;
-        }
-
         private setPlayerConfig(configData: playerConfigType, version: string | number) {
             this.playerConfig = new LTPlayerConfig(version);
             this.playerConfig.mapConfigData(configData);
@@ -295,7 +307,43 @@ export namespace LTPlayer {
             return this.plyr;
         }
 
+        play() {
+            this.devMethodePlayer.play();
+        }
+
+        pause() {
+            this.devMethodePlayer.pause();
+        }
+
+        stop() {
+            this.devMethodePlayer.stop();
+        }
+
+        preload() {
+            return this.devMethodePreload;
+        }
+
+        enterMiniPlayer() {
+            return this.devMethodePlayer.enterMiniPlayer()
+        }
+
+        exitMiniPlayer() {
+            return this.devMethodePlayer.exitMiniPlayer()
+        }
+
         destruct() {
+            let _this = this;
+
+            return new Promise((resolve) => {
+                _this.additionalInfoService.remove(this);
+
+                _this.additionalInfoService = null;
+
+                this.plyr.destroy(() => {
+                    _this = undefined;
+                    resolve(true);
+                })
+            })
         }
         setDesktopEvents() {
             this.desktopEvents = new LTPlayerEvents.Desktop();

package/src/components/addInfo/LTPlayerAddInfoManager.ts

@@ -42,7 +42,7 @@ export namespace LTPLayerAddInfo {
     export class Controller extends LTPlayerAddInfoManager {
         activePlayer: Plyr;
 
-        set(container: HTMLElement) {
+        setContainer(container: HTMLElement) {
             this.container = container;
             this.setDataContent();
         }
@@ -61,6 +61,14 @@ export namespace LTPLayerAddInfo {
             })
         }
 
+        setConfig(config: defaultType) {
+            Object.keys(config).forEach(item => {
+                if (Object.keys(config[item]).length > 0) {
+                    Object.assign(this.additionalData, {[item] : config[item]})
+                }
+            })
+        }
+
         init(player: LTPlayer.PortraitType | LTPlayer.LandscapeType, playerId: number, iconService: IconsService, templateService: TemplateService) {
 
             if (Object.keys(this.additionalData).length === 0) {
@@ -101,7 +109,6 @@ export namespace LTPLayerAddInfo {
 
         setCurrentPlayerPlay(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, event: PlyrEvent) {
             this.activePlayer = event.detail.plyr;
-            console.log(this.activePlayer.elements.container)
         }
         remove(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
@@ -132,7 +139,9 @@ export namespace LTPLayerAddInfo {
 
             switch (this.controller.device) {
                 case 'mobile':
-                    this.mobile();
+                    this.controller.plyr.on('ready', () => {
+                        this.mobile();
+                    })
                     break
                 case 'desktop':
                     this.desktop();
@@ -176,7 +185,6 @@ export namespace LTPLayerAddInfo {
 
 
         desktop() {
-            const playerContainer = this.controller.plyr.elements.container;
             const icons: defaultType = this.controller.iconService.getIconsByComponent('additionalInfo');
 
             let templateData: { target: string; icon: any; }[] = [];
@@ -204,7 +212,6 @@ export namespace LTPLayerAddInfo {
                 exist: 'true',
                 buttons: templateData
             });
-
             this.controller.playerInstance.windowService.setEventAddInfo(buttonsTemplate, this.desktopEvents, this.controller);
         }
     }

package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts

@@ -37,12 +37,25 @@ export namespace LTPlayerAdditionalInfo  {
             }
 
             const  createInformationModal = (info: additionalInformation, key: string) => {
-                let modalTemplate = controller.templateService.getAdditionalInfo({
-                    desktop : true,
-                    modal : true,
-                    id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                    data : info
-                })
+
+                let modalTemplate = null;
+
+                if (typeof info === 'object') {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        desktop : true,
+                        modal : true,
+                        id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                        object_data : true,
+                        [key] : info
+                    })
+                } else {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        desktop : true,
+                        modal : true,
+                        id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                        data : info
+                    })
+                }
 
                 document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
             }
@@ -104,12 +117,24 @@ export namespace LTPlayerAdditionalInfo  {
             }
 
             const  createInformationModal = (info: additionalInformation, key: string) => {
-                let modalTemplate = instance.templateService.getAdditionalInfo({
-                    mobile : true,
-                    modal : true,
-                    data : info,
-                    [controller.device] : true
-                })
+                let modalTemplate = null;
+
+                if (typeof info === 'object') {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        mobile : true,
+                        modal : true,
+                        [controller.device] : true,
+                        object_data : true,
+                        [key] : info
+                    })
+                } else {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        mobile : true,
+                        modal : true,
+                        data : info,
+                        [controller.device] : true
+                    })
+                }
 
                 const playerControlsContainer = instance.plyr.elements.controls;
                 const modal = playerControlsContainer.querySelector('.player-lt__modal__mobile');

package/src/components/config/LTPlayerConfig.ts

@@ -1,5 +1,7 @@
 import {playerConfigType} from "../../global/types/ModuleTypes";
 import {LTPlayerConfigProcessor} from "./LTPlayerConfigProcessor";
+import {Helper} from "../../services/Helper";
+import Plyr from "plyr";
 export class LTPlayerConfig {
 
     private configData: playerConfigType = {
@@ -27,7 +29,8 @@ export class LTPlayerConfig {
         chapters : null,
         playerType: null,
         device : 'desktop',
-        observe : false
+        observe : false,
+        videoObjectFit : false
     }
     processor : LTPlayerConfigProcessor.Map
 
@@ -61,6 +64,38 @@ export class LTPlayerConfig {
         })
     }
 
+    setObjectFit(plyr : Plyr, instanceType : string) {
+
+        return new Promise(resolve => {
+            if (plyr.isHTML5) {
+
+                const videoTag = plyr.elements.wrapper.querySelector('video');
+
+                if (videoTag) {
+
+                    videoTag.addEventListener('loadedmetadata', (event)=> {
+
+                        const type = Helper.getVideoOrientation(videoTag.videoWidth, videoTag.videoHeight);
+
+                        if (type === instanceType) {
+                            this.configData.videoObjectFit = 'cover';
+                        } else {
+                            this.configData.videoObjectFit = 'clip';
+                        }
+
+                        resolve(true);
+                    })
+                }
+            }
+        })
+
+
+    }
+
+    getObjectFit() {
+        return this.configData.videoObjectFit
+    }
+
     setVersion(version : string | number) {
 
         if (typeof version === 'string') {
@@ -78,6 +113,14 @@ export class LTPlayerConfig {
         return this.configData.observe
     }
 
+    isObserveHeight() {
+        return this.configData.observe.height;
+    }
+
+    isObserveWidth() {
+        return this.configData.observe.width;
+    }
+
     getDimensions() {
         return this.configData.dimensions
     }

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -207,10 +207,6 @@ export namespace LTPlayerConfigProcessor {
                 return null
             }
 
-            if (version === 1) {
-                return null;
-            }
-
             type shareDataConfig = {
                 canonicalUrl : string,
                 embedUrl : string,
@@ -223,6 +219,15 @@ export namespace LTPlayerConfigProcessor {
                 title : undefined
             }
 
+            if (version === 1) {
+                data = {
+                    canonicalUrl: data.canonical_url ?? null,
+                    embedUrl: `${window.location.origin}/embed/${data.id}`,
+                    title: data.title ?? null,
+                };
+            }
+
+
             if (Object.keys(data).length === 0) {
                 return;
             }
@@ -240,7 +245,6 @@ export namespace LTPlayerConfigProcessor {
             }
 
             return outputData;
-
         }
 
         static processPlayerContainer(data : Element | defaultType, version : number) {

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -134,14 +134,27 @@ export namespace LTPlayerControlsEvents  {
             const playIcon = playerContainer.querySelector('.bottom-controller__play-icon');
             const pauseIcon = playerContainer.querySelector('.bottom-controller__pause-icon');
 
-
-            if (player.playing) {
-                playIcon.classList.add('d-none');
-                pauseIcon.classList.remove('d-none');
+            if (player.isEmbed) {
+                player.embed.getPaused().then((paused: any) => {
+                    if (paused) {
+                        pauseIcon.classList.add('d-none');
+                        playIcon.classList.remove('d-none');
+                    } else {
+                        playIcon.classList.add('d-none');
+                        pauseIcon.classList.remove('d-none');
+                    }
+                })
             } else {
-                pauseIcon.classList.add('d-none');
-                playIcon.classList.remove('d-none');
+                if (player.playing) {
+                    playIcon.classList.add('d-none');
+                    pauseIcon.classList.remove('d-none');
+                } else {
+                    pauseIcon.classList.add('d-none');
+                    playIcon.classList.remove('d-none');
+                }
             }
+
+
         }
     }
 
@@ -172,11 +185,12 @@ export namespace LTPlayerControlsEvents  {
 
 
             if (!playerControls.classList.contains('plyr__controls-enable')) {
-                captions.classList.remove('on-controls-hover');
+                captions.classList.remove('d-none');
+                // captions.classList.remove('on-controls-hover');
                 return;
             }
-
-            captions.classList.add('on-controls-hover');
+            captions.classList.add('d-none');
+            // captions.classList.add('on-controls-hover');
 
         }
         showHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
@@ -187,7 +201,9 @@ export namespace LTPlayerControlsEvents  {
 
 
             controls.addEventListener('mouseleave', function () {
-                // controls.classList.remove('plyr__controls-enable')
+                if (!controls.classList.contains('plyr__controls-enable-settings')) {
+                    controls.classList.remove('plyr__controls-enable')
+                }
             })
         }
 

package/src/components/controls/LTPlayerMini.ts

@@ -17,6 +17,12 @@ export class LTPlayerMini {
     templateService: TemplateService
     private iconService: IconsService;
 
+    playerType : string
+
+    instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
+
+    observe : ResizeObserver
+
     constructor() {
     }
 
@@ -25,14 +31,30 @@ export class LTPlayerMini {
      * @param player
      * @param templateService
      * @param iconService
+     * @param playerType
+     * @param instance
      */
-    init(player: Plyr, templateService: TemplateService, iconService: IconsService) {
+    init(player: Plyr, templateService: TemplateService, iconService: IconsService, playerType : string, instance : LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        this.instance = instance;
         this.templateService = templateService;
         this.iconService = iconService;
         this.player = player;
+        this.playerType = playerType;
         this.setup();
     }
 
+    enterMiniPlayer() {
+        this.playerContainer.width = this.player.elements.wrapper.getBoundingClientRect().width;
+        this.playerContainer.height = this.player.elements.wrapper.getBoundingClientRect().height;
+        this.player.elements.wrapper.classList.add('lt-player-mini-enable');
+        this.player.elements.wrapper.classList.add(`lt-player-mini-${this.playerType}`)
+        this.setBackground(this.player.elements.wrapper);
+        this.addMouseHoverControllers();
+        this.addPlayPauseEvents();
+        this.setSeekBar();
+
+    }
+
     /**
      * Setup mini player
      * @private
@@ -43,15 +65,15 @@ export class LTPlayerMini {
         player.on('ready', function () {
             const playerContainer = player.elements.container;
             const playerWrapper = player.elements.wrapper;
-            _this.playerContainer.width = playerWrapper.getBoundingClientRect().width;
-            _this.playerContainer.height = playerWrapper.getBoundingClientRect().height;
-
             const button = playerContainer.querySelector('.mini-player-control');
 
             if (button) {
                 button.addEventListener('click', function (event) {
                     event.preventDefault();
+                    _this.playerContainer.width = playerContainer.getBoundingClientRect().width;
+                    _this.playerContainer.height = playerContainer.getBoundingClientRect().height;
                     playerWrapper.classList.add('lt-player-mini-enable');
+                    playerWrapper.classList.add(`lt-player-mini-${_this.playerType}`)
                     _this.setBackground(playerWrapper);
                     _this.addMouseHoverControllers();
                     _this.addPlayPauseEvents();
@@ -96,7 +118,9 @@ export class LTPlayerMini {
      * @param playerWrapper
      */
     private setBackground(playerWrapper: HTMLElement) {
+
         const background = this.templateService.getBackGroundTemplate({logo : this.iconService.getLogo()});
+
         const controls = this.templateService.getControlsMiniPlayer({
             mini_player: 'true',
             icons:  this.iconService.getIconsByComponent('controls'),
@@ -104,6 +128,48 @@ export class LTPlayerMini {
 
         playerWrapper.insertAdjacentHTML("afterend", background);
         playerWrapper.children[0].insertAdjacentHTML("afterend", controls);
+
+        if (this.instance.playerConfig.getObserve()) {
+            if (this.instance.playerConfig.isObserveHeight() !== undefined && !this.instance.playerConfig.isObserveHeight()) {
+                this.setObserveBackground();
+            }
+        } else {
+            this.setObserveBackground();
+        }
+
+    }
+
+    setObserveBackground() {
+
+        const miniPlayerBackground : HTMLElement = this.player.elements.container.querySelector('.lt-player-mini-player-background');
+
+        this.observe = new ResizeObserver(response => {
+            let documentWidth = response[0].contentRect.width;
+            let miniPlayerBackgroundWidth = miniPlayerBackground.getBoundingClientRect().width;
+            if (documentWidth >= miniPlayerBackgroundWidth) {
+                if (documentWidth > this.playerContainer.width) {
+                    if (this.player.elements.controls.getBoundingClientRect().height === 103) {
+                        miniPlayerBackground.style.width  = `${this.playerContainer.width}px`;
+                        miniPlayerBackground.style.height = `${this.playerContainer.height}px`;
+                    } else {
+                        miniPlayerBackground.style.width = `${this.player.elements.controls.getBoundingClientRect().width}px`;
+                        miniPlayerBackground.style.height = `${this.player.elements.controls.getBoundingClientRect().height}px`;
+                    }
+                } else {
+                    miniPlayerBackground.style.width = `${this.playerContainer.width}px`;
+                    let calc = this.playerContainer.height + (response[0].contentRect.width - this.playerContainer.width);
+                    miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
+                }
+            }
+            if (documentWidth < miniPlayerBackgroundWidth) {
+                miniPlayerBackground.style.width = `${documentWidth}px`;
+                let calc = this.playerContainer.height - (this.playerContainer.width - response[0].contentRect.width);
+                miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
+            }
+
+        });
+
+        this.observe.observe(document.body);
     }
 
     /**
@@ -178,6 +244,7 @@ export class LTPlayerMini {
     exitMiniPlayer(player: Plyr) {
         const playerContainer = player.elements.container;
         const exit = playerContainer.querySelector('.lt-player-mini-player-controls__exit');
+        let _this = this;
 
         if (!exit) {
             return
@@ -187,7 +254,10 @@ export class LTPlayerMini {
             event.preventDefault();
             playerContainer.querySelector('.lt-player-mini-player-controls').remove();
             playerContainer.querySelector('.lt-player-mini-player-background').remove();
-            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable')
+            playerContainer.querySelector('.lt-player-mini-enable').classList.remove(`lt-player-mini-${_this.playerType}`)
+            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable');
+            _this.observe.disconnect();
+
         })
     }
 

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

@@ -66,11 +66,11 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
 
         myRange.oninput = function() {
             player.speed = parseFloat(values[rangeInput.value]);
-            myValue.innerHTML = values[rangeInput.value] + 'x';
+            myValue.innerHTML = `${values[rangeInput.value]}X`;
         };
 
         player.speed = parseFloat(String(values[0]));
-        myValue.innerHTML = values[0] + 'x';
+        myValue.innerHTML = `${values[0]}X`;
     }
     initSaveButton() {