@latest-thinking/lt-player 1.0.7-b → 1.0.7-d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7-b",
+  "version": "1.0.7-d",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/components/LTPlayerSetup.ts

@@ -180,6 +180,13 @@ export class LTPlayerSetup {
         const processVideo = () => {
             let videoTag = document.createElement('video');
             videoTag.src = url;
+
+            if (url.includes('.m3u8')) {
+                return new Promise((resolve) => {
+                    resolve('portrait')
+                })
+            }
+
             return new Promise((resolve) => {
                 videoTag.addEventListener( "loadedmetadata", function (e) {
                     if (this.videoWidth > this.videoHeight) {

package/src/components/addInfo/LTPlayerAddInfoDesktop.ts

@@ -2,7 +2,7 @@ import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
 import {additionalInformation} from "../../global/types/ModuleTypes";
 
 export class LTPlayerAddInfoDesktop {
-    set(controller: LTPLayerAddInfo.Controller) {
+    set(controller: LTPLayerAddInfo.Controller, type: string) {
 
         const playerContainer = controller.plyr.elements.container;
         const playerControlsContainer = controller.plyr.elements.controls;
@@ -10,7 +10,6 @@ export class LTPlayerAddInfoDesktop {
         let additionalInfoBodyIn: Element = playerControlsContainer.querySelector('.lt-player__additional-info');
         let instance = controller;
 
-
         const getInfoButtons = (selector: Element): NodeList => {
 
             if (!selector) {
@@ -24,7 +23,7 @@ export class LTPlayerAddInfoDesktop {
         const infoButtonsOut: NodeList = getInfoButtons(additionalInfoBodyOut);
         const infoButtonsIn: NodeList = getInfoButtons(additionalInfoBodyIn);
 
-        if (!infoButtonsOut) {
+        if (type == 'in') {
             buttons = infoButtonsIn;
         } else {
             buttons = infoButtonsOut;

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -607,7 +607,6 @@ export namespace LTPlayerControlsEvents  {
                         }
                     }, 4000);
                 }
-                console.log('hide;')
                 eventsInstance.common.subtitlesShow(instance);
             }
         }

package/src/components/events/LTPlayerDesktop.ts

@@ -65,7 +65,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
                 }
                 eventManager.onReadyPlayer();
                 eventManager.modal(instance);
-                instance.posterManager.desktopEvents.buttons(instance);
+                instance.posterManager.desktopEvents.posterBody(instance);
 
                 if (instance.playerConfig.getPreload()) {
                     eventManager.preloadPoster.ready(instance);
@@ -118,7 +118,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
                 plyr.embed.ready().then (function LTPlayerEmbedReady() {
                     eventManager.modal(instance);
                     eventManager.onReadyPlayer();
-                    instance.posterManager.desktopEvents.buttons(instance);
+                    instance.posterManager.desktopEvents.posterBody(instance);
                     if (instance.playerConfig.getPreload()) {
                         eventManager.preloadPoster.ready(instance);
                     }

package/src/components/events/LTPlayerMobile.ts

@@ -61,7 +61,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
                 }
 
                 eventManager.onReadyPlayer();
-                instance.posterManager.mobileEvents.buttons(instance);
+                instance.posterManager.mobileEvents.posterBody(instance);
 
                 instance.playerControl.mobileEvents.seekBar(instance);
 
@@ -102,11 +102,11 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         if (plyr.isEmbed) {
-            plyr.on('ready', function LTPLayerMobileReadyEmbed() {
-                plyr.embed.ready().then(function LTPlayerEmbedReady() {
+            plyr.on('ready', function LTPLayerMobileReadyEmbed(): void {
+                plyr.embed.ready().then(function LTPlayerEmbedReady():void {
                     eventManager.onReadyPlayer();
                     instance.playerControl.mobileEvents.seekBar(instance);
-                    instance.posterManager.mobileEvents.buttons(instance);
+                    instance.posterManager.mobileEvents.posterBody(instance);
                     if (instance.playerConfig.getPreload()) {
                         eventManager.preloadPoster.ready(instance);
                     }

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -78,50 +78,65 @@ export namespace LTPlayerPosterEvents {
 
     export class Desktop {
         /**
-         * Add play event on poster buttons
+         * Add play event on poster
          */
-        buttons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+        posterBody(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
 
-            const common = new LTPlayerPosterEvents.Common();
+            const common: Common = new LTPlayerPosterEvents.Common();
 
-            common.poster.getButtons(instance)?.forEach(button => {
-                button.addEventListener('click', function LTPlayerPosterButtons(event) {
+            const playerContainer: HTMLElement = instance.plyr.elements.container;
+            const posterBody: HTMLElement = playerContainer.querySelector('.lt-player__poster__body');
+
+
+            if (posterBody) {
+                posterBody.addEventListener('click', function LTPlayerPosterButtons(event) {
                     event.preventDefault();
+
+                    if((event.target as HTMLInputElement).classList.contains('poster-lt-player-share') ||
+                        (event.target as HTMLInputElement).classList.contains('filter')
+                    ) {
+                        return;
+                    }
+
                     instance.playerControl.desktopEvents.titleLineBreak(instance);
                     instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
                     common.poster.reset(instance);
+
                 })
-            });
+            }
         }
     }
 
     export class Mobile {
         /**
-         * Add play event on poster buttons mobile
+         * Add play event on poster mobile
          */
-        buttons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+        posterBody(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
 
-            const playerControlsContainer = instance.plyr.elements.controls;
-            const playerContainer = instance.plyr.elements.container;
-            const common = new LTPlayerPosterEvents.Common();
+            const playerContainer: HTMLElement = instance.plyr.elements.container;
+            const playerPoster: Element = playerContainer.querySelector('.plyr__poster');
+            const playerBody: Element = playerContainer.querySelector('.lt-player__poster__body');
+            const common: Common = new LTPlayerPosterEvents.Common();
 
-            common.poster.getButtons(instance)?.forEach(button => {
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(button);
+            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerBody);
+
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobilePosterPlay() {
 
-                if (mobileEvent) {
-                    mobileEvent.on('singletap', function LTPlayerMobilePosterButtons() {
+                    if (playerPoster.classList.contains('d-none')) {
+                        return;
+                    }
 
-                        instance.playerControl.desktopEvents.titleLineBreak(instance);
+                    instance.playerControl.desktopEvents.titleLineBreak(instance);
 
-                        instance.playerControl.mobileEvents.playPauseIcon(instance, 'timeupdate');
-                        common.poster.reset(instance);
+                    instance.playerControl.mobileEvents.playPauseIcon(instance, 'timeupdate');
+                    common.poster.reset(instance);
 
-                        playerContainer.classList.remove('plyr__poster-enabled');
+                    playerContainer.classList.remove('plyr__poster-enabled');
 
-                        instance.playerControl.mobileEvents.showControls(instance);
-                    });
-                }
-            });
+                    instance.playerControl.mobileEvents.showControls(instance);
+                });
+            }
         }
 
         /**
@@ -138,9 +153,9 @@ export namespace LTPlayerPosterEvents {
         }
 
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerContainer = instance.plyr.elements.container;
-            const playerControlsContainer = instance.plyr.elements.controls;
-            const playerPoster = playerContainer.querySelector('.plyr__poster');
+            const playerContainer: HTMLElement = instance.plyr.elements.container;
+            const playerControlsContainer: HTMLElement = instance.plyr.elements.controls;
+            const playerPoster: Element = playerContainer.querySelector('.plyr__poster');
 
 
             let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerPoster);
@@ -153,7 +168,5 @@ export namespace LTPlayerPosterEvents {
                 });
             }
         }
-
-
     }
 }

package/src/services/ResizeService.ts

@@ -148,9 +148,7 @@ export class ResizeService {
             this.playerInstance.plyr.elements.container.insertAdjacentHTML("afterend", buttonsTemplate);
             let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             inserted.classList.add('lt-player__additional-info__is_set_out-side');
-            this.playerInstance.plyr.on('ready', () => {
-                deskEvent.set(controller);
-            })
+            deskEvent.set(controller, 'out');
         }
 
         const createAddInfoButtonsInSide = () => {
@@ -166,7 +164,7 @@ export class ResizeService {
                 let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
                 inserted.classList.add('lt-player__additional-info__is_set_in-side');
 
-                deskEvent.set(controller);
+                deskEvent.set(controller, 'in');
             } else {
                 this.playerInstance.plyr.on('ready', () => {
 
@@ -176,43 +174,39 @@ export class ResizeService {
                     let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
                     inserted.classList.add('lt-player__additional-info__is_set_in-side');
 
-                    deskEvent.set(controller);
+                    deskEvent.set(controller, 'in');
                 })
             }
-
-
-
         }
 
-        if (containerWidth >= 380) {
-
-            if (this.addInfoInSide && containerWidth + 70 <= 380) {
-                return;
-            }
+            if (containerWidth >= 380) {
 
-            if (this.addInfoOutSide) {
-                return;
-            }
+                if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
+                    return;
+                }
 
-            this.addInfoOutSide = true;
-            this.addInfoInSide = false;
+                if (this.addInfoOutSide) {
+                    return;
+                }
 
-            createAddInfoButtonsOutSide();
-        } else {
+                this.addInfoOutSide = true;
+                this.addInfoInSide = false;
 
-            if (this.addInfoOutSide && containerWidth + 70 >= 380) {
-                return;
-            }
+                createAddInfoButtonsOutSide();
+            } else {
 
-            if (this.addInfoInSide) {
-                return;
-            }
+                if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
+                    return;
+                }
 
-            this.addInfoInSide = true;
-            this.addInfoOutSide = false;
-            createAddInfoButtonsInSide();
-        }
+                if (this.addInfoInSide) {
+                    return;
+                }
 
+                this.addInfoInSide = true;
+                this.addInfoOutSide = false;
+                createAddInfoButtonsInSide();
+            }
     }
 
     protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {