@latest-thinking/lt-player 1.0.7 → 1.0.8

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/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/services/Helper.ts

@@ -112,4 +112,31 @@ export class Helper {
             return 'portrait'
         }
     }
+
+    static getPlayerStringType(type: string|number)
+    {
+        let response = null;
+
+        switch (type) {
+            case "1":
+                response = 'portrait'
+                break
+            case "2":
+                response = 'landscape'
+                break
+            case 1:
+                response = 'portrait'
+                break
+            case 2:
+                response = 'landscape'
+                break
+            case 'portrait':
+                response = 'portrait'
+                break
+            case 'landscape':
+                response = 'landscape'
+        }
+
+        return response;
+    }
 }

package/src/services/ResizeService.ts

@@ -5,6 +5,7 @@ import {LTPLayerAddInfoResizeManager} from "../components/addInfo/LTPLayerAddInf
 import {LTPLayerAddInfo} from "../components/addInfo/LTPlayerAddInfoManager";
 import {LTPlayerRotateDeviceService} from "./LTPlayerRotateDeviceService";
 import {LTPlayerAddInfoDesktop} from "../components/addInfo/LTPlayerAddInfoDesktop";
+import {Helper} from "./Helper";
 
 /**
  * Window service (set width and height)
@@ -138,8 +139,38 @@ export class ResizeService {
 
     protected setAddInfoByDimensions(containerWidth: number, buttonsTemplate:string, deskEvent: LTPlayerAddInfoDesktop, controller: LTPLayerAddInfo.Controller) {
 
+
         const createAddInfoButtonsOutSide = () => {
+            const setButtonsByVideoType = () => {
+                const plyr: Plyr = this.player;
+
+                if (plyr.embed !== undefined) {
+                    deskEvent.set(controller, 'out');
+                    return;
+                }
+
+
+                if (this.playerInstance.playerConfig.getVideoType() === 'embedded') {
+                    plyr.on('ready', function () {
+                        plyr.embed.ready().then (function () {
+                            deskEvent.set(controller, 'out');
+                        })
+                    })
+                    return;
+                }
 
+                if (this.playerInstance.playerConfig.getVideoType() === 'video'){
+                    plyr.on('ready', function () {
+                        deskEvent.set(controller, 'out');
+                        return;
+                    })
+                    deskEvent.set(controller, 'out');
+                    return;
+                }
+
+
+
+            }
             let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             if (addInfoContainer) {
                 addInfoContainer.remove();
@@ -148,12 +179,12 @@ 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);
-            })
+
+            setButtonsByVideoType();
         }
 
         const createAddInfoButtonsInSide = () => {
+
             let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             if (addInfoContainer) {
                 addInfoContainer.remove();
@@ -166,7 +197,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,42 +207,41 @@ 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 (this.addInfoOutSide) {
-                return;
-            }
-
-            this.addInfoOutSide = true;
-            this.addInfoInSide = false;
-
-            createAddInfoButtonsOutSide();
-        } else {
-
-            if (this.addInfoOutSide && containerWidth + 70 >= 380) {
-                return;
-            }
-
-            if (this.addInfoInSide) {
-                return;
-            }
-
-            this.addInfoInSide = true;
-            this.addInfoOutSide = false;
-            createAddInfoButtonsInSide();
-        }
+            // if (containerWidth >= 380) {
+            //
+            //     if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
+            //         return;
+            //     }
+            //
+            //     if (this.addInfoOutSide) {
+            //         return;
+            //     }
+            //
+            //     this.addInfoOutSide = true;
+            //     this.addInfoInSide = false;
+            //
+            //     createAddInfoButtonsOutSide();
+            // } else {
+            //
+            //     if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
+            //         return;
+            //     }
+            //
+            //     if (this.addInfoInSide) {
+            //         return;
+            //     }
+            //
+            //     this.addInfoInSide = true;
+            //     this.addInfoOutSide = false;
+            //     createAddInfoButtonsInSide();
+            // }
+
+        createAddInfoButtonsInSide();
 
     }
 

package/src/views/additionalInfo.handlebars

@@ -1,5 +1,16 @@
 {{#modal}}
     {{#mobile}}
+      {{#data}}
+        <div class="player-lt__modal__mobile__background"></div>
+          <div class="player-lt__modal__mobile">
+            <div class="player-lt__mobile__modal-header">
+              <span class="line-button"></span>
+            </div>
+            <div class="player-lt__mobile__modal-content">
+              {{{data}}}
+            </div>
+          </div>
+      {{/data}}
         {{#object_data}}
             <div class="player-lt__modal__mobile__background"></div>
             <div class="player-lt__modal__mobile">
@@ -28,7 +39,6 @@
             </div>
             </div>
         {{/object_data}}
-
     {{/mobile}}
     {{#desktop}}
         {{#object_data}}

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>

package/src/views/poster.handlebars

@@ -1,32 +1,64 @@
+{{#portrait}}
 <div class="lt-player__poster">
-    <div class="lt-player__poster__image-body lt-player__poster__background__grey" >
+  <div class="lt-player__poster__image-body">
+    <div class="lt-player__poster--background"></div>
+    <img class="lt-player__poster__img lt-player__poster__img__set-default d-none" alt="" src="{{logoBig}}">
+    <img class="lt-player__poster__img--set-custom d-none" alt="" src="{{config.configData.posterImage}}">
+  </div>
+  <div class="lt-player__poster__body">
+    <div class="content">
+      <div class="content__header">
+        <img src="{{config.logo}}" alt="logo">
+      </div>
+      <div class="content__body">
+        <div class="poster-title">{{config.configData.videoParagraph}}</div>
+        <div class="poster-paragraph">{{config.configData.videoTitle}}</div>
+      </div>
+      <div class="content__footer">
+        <div class="poster-buttons">
+          <button class="poster-button-play">
+            <img src="{{config.play}}" alt="" class="icon--not-pressed" role="presentation">
+          </button>
+          <button class="poster-button-watch-now">
+            Watch now
+          </button>
+          {{#isShare}}
+            <button class="poster-lt-player-share" type="button">
+              <img class="filter" src="{{config.share}}" alt="" role="presentation">
+            </button>
+          {{/isShare}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/portrait}}
+{{#landscape}}
+  <div class="lt-player__poster">
+    <div class="lt-player__poster__image-body">
+      <div class="lt-player__poster--background"></div>
         <img class="lt-player__poster__img lt-player__poster__img__set-default d-none" alt="" src="{{logoBig}}">
         <img class="lt-player__poster__img--set-custom d-none" alt="" src="{{config.configData.posterImage}}">
     </div>
     <div class="lt-player__poster__body">
         <div class="content">
           <div class="content__header">
-            <div class="poster-logo-header">
-              <div class="logo">
-                <img src="{{config.logo}}" alt="">
-              </div>
-            </div>
+              <div class="poster-title">{{config.configData.videoParagraph}}</div>
           </div>
           <div class="content__body">
-              <h4 class="poster-title">{{config.configData.videoParagraph}}</h4>
-              <p class="poster-paragraph">{{config.configData.videoTitle}}</p>
+            <div class="poster-paragraph">{{config.configData.videoTitle}}</div>
           </div>
           <div class="content__footer">
             <div class="poster-buttons">
               <button class="poster-button-play">
-                <img src="{{config.play}}" alt="" class="icon--not-pressed" role="presentation" >
+                <img src="{{config.play}}" alt="" class="icon--not-pressed" role="presentation">
               </button>
               <button class="poster-button-watch-now">
                 Watch now
               </button>
             {{#isShare}}
               <button class="poster-lt-player-share" type="button">
-                <img class="filter" src="{{config.share}}" alt="" role="presentation" >
+                <img class="filter" src="{{config.share}}" alt="" role="presentation">
               </button>
             {{/isShare}}
             </div>
@@ -34,3 +66,4 @@
         </div>
     </div>
 </div>
+{{/landscape}}

package/src/views/share.handlebars

@@ -26,8 +26,8 @@
                   <a class="button_embed lt-player-mobile-share">
                       <span class="share-icon__icon lt-player-mobile-share">
                         <svg class="lt-player-mobile-share" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M8.00028 17.0003C7.74428 17.0003 7.48825 16.9023 7.29325 16.7073L3.29325 12.7073C2.90225 12.3163 2.90225 11.6843 3.29325 11.2933L7.29325 7.29325C7.68425 6.90225 8.31631 6.90225 8.70731 7.29325C9.09831 7.68425 9.09831 8.31631 8.70731 8.70731L5.41434 12.0003L8.70731 15.2933C9.09831 15.6843 9.09831 16.3163 8.70731 16.7073C8.51231 16.9023 8.25628 17.0003 8.00028 17.0003Z" fill="#27282A"/>
-                          <path d="M16.0007 17.0003C16.2567 17.0003 16.5127 16.9023 16.7077 16.7073L20.7077 12.7073C21.0987 12.3163 21.0987 11.6843 20.7077 11.2933L16.7077 7.29325C16.3167 6.90225 15.6847 6.90225 15.2937 7.29325C14.9027 7.68425 14.9027 8.31631 15.2937 8.70731L18.5866 12.0003L15.2937 15.2933C14.9027 15.6843 14.9027 16.3163 15.2937 16.7073C15.4887 16.9023 15.7447 17.0003 16.0007 17.0003Z" fill="#27282A"/>
+                          <path d="M8.00028 17.0003C7.74428 17.0003 7.48825 16.9023 7.29325 16.7073L3.29325 12.7073C2.90225 12.3163 2.90225 11.6843 3.29325 11.2933L7.29325 7.29325C7.68425 6.90225 8.31631 6.90225 8.70731 7.29325C9.09831 7.68425 9.09831 8.31631 8.70731 8.70731L5.41434 12.0003L8.70731 15.2933C9.09831 15.6843 9.09831 16.3163 8.70731 16.7073C8.51231 16.9023 8.25628 17.0003 8.00028 17.0003Z" fill="#ffffff"/>
+                          <path d="M16.0007 17.0003C16.2567 17.0003 16.5127 16.9023 16.7077 16.7073L20.7077 12.7073C21.0987 12.3163 21.0987 11.6843 20.7077 11.2933L16.7077 7.29325C16.3167 6.90225 15.6847 6.90225 15.2937 7.29325C14.9027 7.68425 14.9027 8.31631 15.2937 8.70731L18.5866 12.0003L15.2937 15.2933C14.9027 15.6843 14.9027 16.3163 15.2937 16.7073C15.4887 16.9023 15.7447 17.0003 16.0007 17.0003Z" fill="#ffffff"/>
                         </svg>
                       </span>
                   </a>

package/src/views/template.handlebars

@@ -3,7 +3,7 @@
 </div>
 {{/embedded}}
 {{#video}}
-<video class="embed_player lt-player-wrapper" playsinline controls>
+<video class="embed_player lt-player-wrapper" playsinline controls crossorigin preload="none">
     <source src="{{videoUrl.videoUrl}}"/>
     {{#defaultConfig.captions}}
     <track kind="captions" label="{{label}} captions" src="{{url}}" srclang="{{srclang}}" {{default}} />