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

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/events/LTPlayerDesktop.ts

@@ -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);
         })

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;
 

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -91,9 +91,17 @@ export namespace LTPlayerPosterEvents {
             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);
+
                 })
             }
         }

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,43 +207,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) {

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>