@latest-thinking/lt-player 1.0.7-a → 1.0.7-c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7-a",
+  "version": "1.0.7-c",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",
@@ -25,6 +25,7 @@
     "@types/mustache": "^4.2.2",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
+    "container-query-polyfill": "^1.0.2",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.2",

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/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);
@@ -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,57 @@ 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();
                     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 LTPlayerMobilePosterButtons() {
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobilePosterPlay() {
 
-                        instance.playerControl.desktopEvents.titleLineBreak(instance);
+                    if (playerPoster.classList.contains('d-none')) {
+                        return;
+                    }
+
+                    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 +145,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 +160,5 @@ export namespace LTPlayerPosterEvents {
                 });
             }
         }
-
-
     }
 }

package/src/components/share/LTPlayerShareDesktop.ts

@@ -3,6 +3,7 @@ import {LTPlayerShareManager} from "./LTPlayerShareManager";
 export class LTPlayerShareDesktop {
     manager : LTPlayerShareManager
     isPlaying : boolean
+    switchButtonSet: boolean
     constructor(instance : LTPlayerShareManager) {
         this.manager = instance;
         this.setTemplate();
@@ -29,8 +30,13 @@ export class LTPlayerShareDesktop {
             this.setCopyContent(false);
         }
 
-        this.setCopyButtonsEvents()
-        this.setSwitchButton()
+        this.setCopyButtonsEvents();
+
+        if (!this.switchButtonSet) {
+            this.setSwitchButton();
+            this.switchButtonSet = true;
+        }
+
         if (instance.plyr.playing) {
             this.isPlaying = true;
             instance.plyr.pause();
@@ -49,7 +55,8 @@ export class LTPlayerShareDesktop {
             return;
         }
 
-        selectors.switchButton.addEventListener('click', () => {
+        const switchEvent = () => {
+
             if (selectors.urlInput.classList.contains('canonicalUrl')) {
                 selectors.urlInput.classList.remove('canonicalUrl');
                 selectors.urlInput.classList.add('embedUrl');
@@ -59,6 +66,10 @@ export class LTPlayerShareDesktop {
                 selectors.urlInput.classList.remove('embedUrl');
                 this.setCopyContent(false);
             }
+        }
+
+        selectors.switchButton.addEventListener('click', () => {
+            switchEvent();
         })
     }
 

package/src/index.ts

@@ -2,14 +2,9 @@ import {LTPlayerManager} from "./components/LTPlayerManager";
 
 const supportsContainerQueries = "container" in document.documentElement.style;
 if (!supportsContainerQueries) {
-    let polyfill_script = document.createElement('script');
-    polyfill_script.setAttribute('src','https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js');
-    document.body.appendChild(polyfill_script);
+    require('container-query-polyfill');
 }
 
-//todo remove from window, it's for developer
-window.addEventListener('load', function () {
-    if (window.Player === undefined) {
-        window.Player = new LTPlayerManager();
-    }
-})
+if (window.Player === undefined) {
+    window.Player = new LTPlayerManager();
+}

package/src/views/controls.handlebars

@@ -95,15 +95,15 @@
             <div class="bottom-controller__volume_control">
               <button type="button" class="plyr__control volume_control__volume-button button-open">
                 <img class="volume-max filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
-                <img class="volume-75 d-none filter button-open" data-range-value="0.65" src="{{icons.volume-2}}" alt="">
-                <img class="volume-50 d-none filter button-open" data-range-value="0.35" src="{{icons.volume-1}}" alt="">
+                <img class="volume-75 d-none filter button-open" data-range-value="0.40" src="{{icons.volume-2}}" alt="">
+                <img class="volume-50 d-none filter button-open" data-range-value="0.02" src="{{icons.volume-1}}" alt="">
                 <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
               </button>
               <div class="volume_control__background d-none">
                 <button class="volume_control__volume-button-close button-close">
                   <img class="volume-max button-close" data-range-value="1" src="{{icons.volume-3}}" alt="">
-                  <img class="volume-75 d-none button-close" data-range-value="0.65" src="{{icons.volume-2}}" alt="">
-                  <img class="volume-50 d-none button-close" data-range-value="0.35" src="{{icons.volume-1}}" alt="">
+                  <img class="volume-75 d-none button-close" data-range-value="0.40" src="{{icons.volume-2}}" alt="">
+                  <img class="volume-50 d-none button-close" data-range-value="0.02" src="{{icons.volume-1}}" alt="">
                   <img class="volume-mute d-none button-close" data-range-value="0" src="{{icons.mute}}" alt="">
                 </button>
               </div>