@latest-thinking/lt-player 1.0.7 → 1.0.8-g

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/LTPlayerType.ts

@@ -1,6 +1,6 @@
 import {LTPlayerController} from "../global/controllers/LTPlayerController";
 import {TypeInterface} from "../global/interfaces/TypeInterface";
-import {defaultType, playerConfigType} from "../global/types/ModuleTypes";
+import {defaultType, playerConfigType, plyr} from "../global/types/ModuleTypes";
 import {LTPlayerMini} from "./controls/LTPlayerMini";
 import {LTPlayerConfig} from "./config/LTPlayerConfig";
 import Plyr from "plyr";
@@ -18,6 +18,8 @@ export namespace LTPlayer {
      */
     export class PortraitType extends LTPlayerController implements TypeInterface {
 
+        pausedPlayer: Plyr;
+
         /**
          * Create a new Player instance root element
          * @returns never
@@ -195,6 +197,9 @@ export namespace LTPlayer {
 
 
     export class LandscapeType extends LTPlayerController implements TypeInterface {
+
+        pausedPlayer: Plyr;
+
         /**
          * Create a new Video Player root element
          * @returns never

package/src/components/addInfo/LTPlayerAddInfoDesktop.ts

@@ -1,8 +1,10 @@
 import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
 import {additionalInformation} from "../../global/types/ModuleTypes";
+import {LTPlayer} from "../LTPlayerType";
+import {LoaderService} from "../../services/LoaderService";
 
 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 +12,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 +25,7 @@ export class LTPlayerAddInfoDesktop {
         const infoButtonsOut: NodeList = getInfoButtons(additionalInfoBodyOut);
         const infoButtonsIn: NodeList = getInfoButtons(additionalInfoBodyIn);
 
-        if (!infoButtonsOut) {
+        if (type == 'in') {
             buttons = infoButtonsIn;
         } else {
             buttons = infoButtonsOut;
@@ -34,24 +35,24 @@ export class LTPlayerAddInfoDesktop {
             return
         }
 
-        const  createInformationModal = (info: additionalInformation, key: string) => {
+        const createInformationModal = (info: additionalInformation, key: string) => {
 
             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
+                    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
+                    desktop: true,
+                    modal: true,
+                    id: `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                    data: info
                 })
             }
 
@@ -77,12 +78,18 @@ export class LTPlayerAddInfoDesktop {
                     modal.classList.add('player-lt__show-modal');
                 }
 
-                window.Player.players.forEach( item => {item.plyr.pause()})
+                window.Player.players.forEach(item => {
+                    if (item.plyr.playing) {
+                        instance.playerInstance.pausedPlayer = item.plyr;
+                        item.plyr.pause();
+                        return;
+                    }
+                })
             })
         })
     }
 
-    windowDesktopEvents(event: MouseEvent) {
+    windowDesktopEvents(event: MouseEvent, instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
         const modals = document.querySelectorAll('.player-lt__modal');
         if (modals.length !== 0) {
             modals.forEach(modal => {
@@ -91,6 +98,25 @@ export class LTPlayerAddInfoDesktop {
                     if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
                         modal.classList.remove('player-lt__show-modal');
                         document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
+
+                        window.Player.players.forEach(item => {
+                            if (item.pausedPlayer !== undefined) {
+                                if (item.pausedPlayer.isEmbed) {
+                                    item.pausedPlayer.embed.play().then(function () {
+                                        return;
+                                    }).catch(function () {
+                                        // an error occurred
+                                    });
+                                }
+
+                                if (item.pausedPlayer.isHTML5) {
+
+                                    item.pausedPlayer.play();
+                                    return;
+                                }
+                            return;
+                            }
+                        })
                     }
                 }
             })

package/src/components/addInfo/LTPlayerAddInfoMobile.ts

@@ -64,7 +64,13 @@ export class LTPlayerAddInfoMobile {
 
                     playerControlsContainer.classList.add('player-lt__modal__mobile-show-modal');
 
-                    window.Player.players.forEach( item => {item.plyr.pause()});
+                    window.Player.players.forEach(item => {
+                        if (item.plyr.playing) {
+                            instance.playerInstance.pausedPlayer = item.plyr;
+                            item.plyr.pause();
+                            return;
+                        }
+                    })
 
                     __this.dragCloseModal(controller);
 
@@ -89,9 +95,24 @@ export class LTPlayerAddInfoMobile {
             if (mobileEvent) {
                 mobileEvent.on('pan', function LTPlayerMobileDragDownModal() {
                     closeModal();
-                    if (controller.plyr.paused) {
-                        controller.plyr.play();
-                    }
+                    window.Player.players.forEach(item => {
+                        if (item.pausedPlayer !== undefined) {
+                            if (item.pausedPlayer.isEmbed) {
+                                item.pausedPlayer.embed.play().then(function () {
+                                    return;
+                                }).catch(function () {
+                                    // an error occurred
+                                });
+                            }
+
+                            if (item.pausedPlayer.isHTML5) {
+
+                                item.pausedPlayer.play();
+                                return;
+                            }
+                            return;
+                        }
+                    })
                 })
             }
         }
@@ -100,9 +121,24 @@ export class LTPlayerAddInfoMobile {
             if (mobileEvent) {
                 mobileEvent.on('singletap', function LTPlayerMobileCloseModal() {
                     closeModal();
-                    if (controller.plyr.paused) {
-                        controller.plyr.play();
-                    }
+                    window.Player.players.forEach(item => {
+                        if (item.pausedPlayer !== undefined) {
+                            if (item.pausedPlayer.isEmbed) {
+                                item.pausedPlayer.embed.play().then(function () {
+                                    return;
+                                }).catch(function () {
+                                    // an error occurred
+                                });
+                            }
+
+                            if (item.pausedPlayer.isHTML5) {
+
+                                item.pausedPlayer.play();
+                                return;
+                            }
+                            return;
+                        }
+                    })
                 })
             }
         }

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -169,7 +169,7 @@ export namespace LTPlayerConfigProcessor {
                 controls: false,
                 active: false,
                 gesture: 'media',
-                transparent: false,
+                transparent: true,
                 speed: true,
                 portrait: true,
                 keyboard: false,

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -1,5 +1,6 @@
 import {LTPlayer} from "../LTPlayerType";
 import {plyr} from "../../global/types/ModuleTypes";
+import * as events from "events";
 
 export namespace LTPlayerControlsEvents  {
 
@@ -122,7 +123,6 @@ export namespace LTPlayerControlsEvents  {
                     })
                 }
             }
-
         }
 
         playPauseIconTimeUpdate(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
@@ -154,21 +154,32 @@ export namespace LTPlayerControlsEvents  {
                 }
             }
 
-
         }
-    }
 
-    export class Desktop {
+        subtitlesShow(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            const playerContainer = instance.plyr.elements.container;
+            const playerControls = instance.plyr.elements.controls;
 
-        common: Common
-        constructor() {
-            this.common = new Common();
-        }
-        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            this.common.checkTitleBreakWord(instance)
+            const captions = playerContainer.querySelector('.plyr__captions');
+
+            let checkCaptions = (instance.plyr as plyr).captions.active;
+
+            if (!checkCaptions) {
+                return;
+            }
+
+            if (!captions) {
+                return;
+            }
+
+            if (!playerControls.classList.contains('plyr__controls-enable')) {
+                if (captions.classList.contains('d-none')) {
+                    captions.classList.remove('d-none');
+                }
+            }
         }
-        subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
+        subtitlesHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             const playerContainer = instance.plyr.elements.container;
             const playerControls = instance.plyr.elements.controls;
             const captions = playerContainer.querySelector('.plyr__captions');
@@ -183,26 +194,43 @@ export namespace LTPlayerControlsEvents  {
                 return;
             }
 
-
-            if (!playerControls.classList.contains('plyr__controls-enable')) {
-                captions.classList.remove('d-none');
-                // captions.classList.remove('on-controls-hover');
-                return;
+            if (playerControls.classList.contains('plyr__controls-enable')) {
+                if (!captions.classList.contains('d-none')) {
+                    captions.classList.add('d-none');
+                }
             }
-            captions.classList.add('d-none');
-            // captions.classList.add('on-controls-hover');
+
 
         }
+    }
+
+    export class Desktop {
+
+        common: Common
+        constructor() {
+            this.common = new Common();
+        }
+        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            this.common.checkTitleBreakWord(instance)
+        }
+
+
         showHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             const controls = instance.plyr.elements.controls;
+            const eventsInstance = this;
+
             controls.addEventListener('mouseover', function () {
-                controls.classList.add('plyr__controls-enable')
+                controls.classList.add('plyr__controls-enable');
+                eventsInstance.common.subtitlesHide(instance);
             })
 
 
             controls.addEventListener('mouseleave', function () {
                 if (!controls.classList.contains('plyr__controls-enable-settings')) {
-                    controls.classList.remove('plyr__controls-enable')
+                    controls.classList.remove('plyr__controls-enable');
+                    setTimeout(()=>{
+                        eventsInstance.common.subtitlesShow(instance);
+                    }, 100)
                 }
             })
         }
@@ -370,45 +398,28 @@ export namespace LTPlayerControlsEvents  {
 
             const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
             const openVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button');
-            const closeVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
+            const muteUnmuteVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
             const volumeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area');
             const volumeBackground: HTMLElement = playerControlsContainer.querySelector('.volume_control__background');
             const volumeRangeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area__range');
+            const rangeVolumesItems: NodeListOf<HTMLElement>= volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+
+            openVolumeButton.addEventListener('mouseover', (event) => {
+                volumeControl.classList.remove('d-none');
+                volumeBackground.classList.remove('d-none');
+                openVolumeButton.classList.add('d-none');
+                volume.classList.add('volume-control-enable');
+                volume.classList.add('volume-area-open')
+            })
 
-            playerControlsContainer.addEventListener('click', function (event) {
-                const eventTarget = event.target as Element;
-
-                if (eventTarget.classList.contains('subtitles-body__input-switch')) {
-                    return;
-                }
-
-                if (!volume.classList.contains('volume-control-enable')) {
-                    if (!eventTarget.classList.contains('button-open')) {
-                        return;
-                    }
-                }
-
-                if (
-                    !eventTarget.classList.contains('button-close') &&
-                    !eventTarget.classList.contains('volume-area-open')
-                ) {
-                    if (!volume.classList.contains('volume-control-enable')) {
-                        volumeControl.classList.remove('d-none');
-                        volumeBackground.classList.remove('d-none');
-                        openVolumeButton.classList.add('d-none');
-                        volume.classList.add('volume-control-enable');
-                        volume.classList.add('volume-area-open')
-                    } else {
-                        volumeControl.classList.add('d-none');
-                        volumeBackground.classList.add('d-none');
-                        openVolumeButton.classList.remove('d-none');
-                        volume.classList.remove('volume-control-enable');
-                    }
-                }
-                event.preventDefault();
+            volume.addEventListener('mouseleave', () => {
+                volumeControl.classList.add('d-none');
+                volumeBackground.classList.add('d-none');
+                openVolumeButton.classList.remove('d-none');
+                volume.classList.remove('volume-control-enable');
             })
 
-            closeVolumeButton.addEventListener('click', (event) => {
+            muteUnmuteVolumeButton.addEventListener('click', (event) => {
                 event.preventDefault();
                 if (instance.plyr.volume > 0) {
                     instance.playerControl.playerVolumeBefore = instance.plyr.volume;
@@ -433,12 +444,11 @@ export namespace LTPlayerControlsEvents  {
                     range = range.toString()
                 }
 
-                const volumeMax: HTMLElement = closeVolumeButton.querySelector('.volume-max');
-                const volume75: HTMLElement = closeVolumeButton.querySelector('.volume-75');
-                const volume50: HTMLElement = closeVolumeButton.querySelector('.volume-50');
-                const volumeMute: HTMLElement = closeVolumeButton.querySelector('.volume-mute');
+                const volumeMax: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-max');
+                const volume75: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-75');
+                const volume50: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-50');
+                const volumeMute: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-mute');
                 const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-
                 const volumeIconsManger = (item: HTMLElement) => {
 
                     const rangeVolumesItems: NodeListOf<HTMLElement>= volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
@@ -469,7 +479,26 @@ export namespace LTPlayerControlsEvents  {
             }
 
             volumeRangeControl.addEventListener('input', function () {
-                volumeIcons((volumeRangeControl as HTMLInputElement).value);
+
+                let itemsDataSet: string[] = [];
+
+                rangeVolumesItems.forEach(item => {
+                    itemsDataSet.push(item.dataset.rangeValue)
+                })
+
+                if (itemsDataSet.length === 0) {
+                    return;
+                }
+
+                const getClosest = (curr: any, prev: any,  range: any) => {
+                    return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
+                }
+
+
+                let closest = itemsDataSet.reduce(function(prev, curr) {
+                    return getClosest(curr, prev, (volumeRangeControl as HTMLInputElement).value);
+                });
+                volumeIcons(closest);
             })
 
             instance.plyr.volume = 1;
@@ -528,6 +557,8 @@ export namespace LTPlayerControlsEvents  {
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
+            const eventsInstance = this;
+
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
             if (playerContainer.classList.contains('plyr--hide-controls')) {
@@ -544,6 +575,8 @@ export namespace LTPlayerControlsEvents  {
                 playerControlsContainer.classList.add('plyr__controls-enable');
             }
 
+            eventsInstance.common.subtitlesHide(instance);
+
             if (this.controlsTimeOut) {
                 clearTimeout(this.controlsTimeOut);
             }
@@ -554,6 +587,7 @@ export namespace LTPlayerControlsEvents  {
         hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
+            const eventsInstance = this;
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
             if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
@@ -573,6 +607,7 @@ export namespace LTPlayerControlsEvents  {
                         }
                     }, 4000);
                 }
+                eventsInstance.common.subtitlesShow(instance);
             }
         }
 

package/src/components/events/LTPlayerCommon.ts

@@ -146,10 +146,6 @@ export class LTPlayerCommon {
         if (this.player.playerControl.chaptersService) {
             this.player.playerControl.chaptersService.updateCurrentTimeAndTitle(this.player, event);
         }
-
-        //set captions
-        // TODO: Find a way to show/hide subtitles that does not loop on every timeUpdate. Consider using the controls show/hide event.
-        this.player.playerControl.desktopEvents.subtitles(this.player);
     }
 
 

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);
@@ -103,7 +103,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         window.addEventListener('click', function LTPLayerWindowClick(event: MouseEvent) {
 
             if (instance.additionalInfoService) {
-                instance.additionalInfoService.desktopEvents.windowDesktopEvents(event);
+                instance.additionalInfoService.desktopEvents.windowDesktopEvents(event, instance);
             }
             LTPlayerSettingsControlsManager.closeSettingsEvent(event);
         })
@@ -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/LTPlayerPoster.ts

@@ -2,6 +2,7 @@ import {TemplateService} from "../../services/TemplateService";
 import {LTPlayerConfig} from "../config/LTPlayerConfig";
 import {IconsService} from "../../services/IconsService";
 import Plyr from "plyr";
+import {Helper} from "../../services/Helper";
 
 export class LTPlayerPoster {
     custom_selector: string = 'lt-player__poster';
@@ -22,7 +23,11 @@ export class LTPlayerPoster {
 
         const logo: string = this.iconService.getLogo();
 
-        const posterTemplate = this.templateService.getPoster({config:this.config, logoBig: logo, isShare : !!(this.config.isShareData())});
+        const playerTypeString = Helper.getPlayerStringType(this.config.getPlayerType());
+
+        let templateData = {[playerTypeString]: true, config:this.config, logoBig: logo, isShare : !!(this.config.isShareData())}
+
+        const posterTemplate = this.templateService.getPoster(templateData);
 
         const container = this.plyr.elements.wrapper;