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

package/package.json

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

package/src/assets/sass/abstracts/_mixins.scss

@@ -5,6 +5,12 @@
   transform: translate(-#{$top}, -#{$top});
 }
 
+@mixin flex-position($flex, $content, $align) {
+  display: $flex;
+  justify-content: $content;
+  align-items: $align;
+}
+
 @mixin yellow-btn {
   color: $default-lt-button-color;
   background-color: $default_color_player;

package/src/assets/sass/app.scss

@@ -14,7 +14,11 @@
 // 1. Basics
 //---------------------------------------------
 
-
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 //---------------------------------------------
 // 2. Resetting properties
@@ -24,6 +28,18 @@ body {
   margin: 0;
 }
 
+.container-text-portrait-player {
+  display: flex;
+  max-width: 800px;
+  max-height: 800px;
+  margin-bottom: 3rem;
+}
+
+.container-text-landscape-player {
+  display: flex;
+  max-width: 1000px;
+}
+
 //---------------------------------------------
 // 3. General
 //---------------------------------------------
@@ -47,6 +63,10 @@ body {
   visibility: hidden;
 }
 
+.overflow-hidden-body-important {
+  overflow: hidden !important;
+}
+
 .d-none {
   display: none !important;
 }

package/src/assets/sass/components/_modal.scss

@@ -1,5 +1,19 @@
 @import "../abstracts/variables";
 
+$modal-max-width: 620px;
+
+@mixin modal-max-width {
+  @media (max-width: #{$modal-max-width}) {
+    @content;
+  }
+}
+
+@mixin modal-min-width {
+  @media (min-width: #{$modal-max-width}) {
+    @content;
+  }
+}
+
 @mixin modal-h2 {
   font-size: $lt-player-font-size-xxxl2;
   font-weight: $lt-player-font-weight-lg;
@@ -119,8 +133,8 @@
     &__modal-content {
       color: $default-lt-button-color;
       text-align: left;
-      padding: 16px;
       overflow: auto;
+      padding: 20px;
       font-family: $lt-font-family-base;
 
       button,
@@ -169,11 +183,10 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(1.1);
-    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+
+    @include modal-min-width {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
 
     &__mobile {
       position: absolute;
@@ -212,13 +225,18 @@
     border-radius: 0;
     font-family: $lt-font-family-base;
     width: 100%;
-    max-height: 540px;
+    max-height: calc(100% - 50px);
     overflow: auto;
     max-width: 620px;
-    padding: 40px 0;
 
-    span {
-      margin-right: 40px;
+    @include modal-max-width {
+      max-height: unset;
+      width: auto;
+      height: 100%;
+      position: unset;
+      transform: unset;
+      border: 1px solid $default-lt-span-color;
+      border-radius: 0 0 0 30px;
     }
 
     .modal-flex {
@@ -305,12 +323,15 @@
   }
 
   &__modal-body {
-    padding: 0 40px;
+    padding: 40px;
+
+    @include modal-max-width {
+      padding: 20px;
+    }
   }
 
   &__close-button {
     z-index: 20;
-    float: right;
     width: 24px;
     font-size: $lt-player-font-size-xxxl2 !important;
     line-height: 1;
@@ -321,24 +342,18 @@
     background-color: transparent;
     color: $default-lt-button-color;
     transition: color 0.12s ease-in-out;
-    margin-bottom: 16px;
-    position: sticky;
-    top: 0;
+    position: absolute;
+    top: 40px;
+    right: 40px;
     margin-top: 0 !important;
 
-    span {
-      margin-top: 0;
+    @include modal-max-width {
+      top: 20px;
+      right: 20px;
     }
   }
 
   &__close-button:hover {
     color: #d75b4c;
   }
-
-  &__show-modal {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1.0);
-    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
-  }
 }

package/src/assets/sass/core/_player.scss

@@ -1,9 +1,3 @@
-.lt-player-portrate--mobile {
-  .plyr {
-    border-radius: 0;
-  }
-}
-
 .lt-player-orientation--portrait {
   .plyr {
     iframe,

package/src/components/LTPlayerHls.ts

@@ -14,7 +14,16 @@ export class LTPlayerHls {
         this.instance = instance;
         this.config = instance.playerConfig;
         this.playerSettings = playerSettings;
-        this.hlsInstance = new Hls();
+        this.hlsInstance = new Hls({
+            "enableWorker": true,
+            "lowLatencyMode": true,
+            "backBufferLength": 20,
+            "abrEwmaFastVoD": 1,
+            "autoStartLoad": true,
+            "abrBandWidthUpFactor": 0.95,
+            "maxMaxBufferLength": 15,
+            "abrEwmaDefaultEstimate": 50
+        });
     }
 
     init() {

package/src/components/addInfo/LTPlayerAddInfoDesktop.ts

@@ -76,6 +76,7 @@ export class LTPlayerAddInfoDesktop {
 
                 if (modal) {
                     modal.classList.add('player-lt__show-modal');
+                    document.body.classList.add('overflow-hidden-body-important');
                 }
 
                 window.Player.players.forEach(item => {
@@ -97,6 +98,7 @@ export class LTPlayerAddInfoDesktop {
                     let target = event.target as HTMLElement;
                     if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
                         modal.classList.remove('player-lt__show-modal');
+                        document.body.classList.remove('overflow-hidden-body-important');
                         document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
 
                         window.Player.players.forEach(item => {

package/src/components/addInfo/LTPlayerAddInfoMobile.ts

@@ -1,10 +1,11 @@
 import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
 import {additionalInformation} from "../../global/types/ModuleTypes";
+import {LTPlayer} from "../LTPlayerType";
 
 export class LTPlayerAddInfoMobile {
     set(controller: LTPLayerAddInfo.Controller) {
+
         const playerContainer = controller.plyr.elements.container;
-        const playerControlsContainer = controller.plyr.elements.controls;
         let additionalInfoBody: Element = playerContainer.querySelector('.lt-player__additional-info-mobile');
         let instance = controller;
         let __this = this;
@@ -15,35 +16,28 @@ export class LTPlayerAddInfoMobile {
             return
         }
 
-        const  createInformationModal = (info: additionalInformation, key: string) => {
+        const createInformationModal = (info: additionalInformation, key: string) => {
+
             let modalTemplate = null;
 
             if (typeof info === 'object') {
                 modalTemplate = controller.templateService.getAdditionalInfo({
-                    mobile : true,
-                    modal : true,
-                    [controller.device] : true,
-                    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({
-                    mobile : true,
-                    modal : true,
-                    data : info,
-                    [controller.device] : true
+                    desktop: true,
+                    modal: true,
+                    id: `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                    data: info
                 })
             }
 
-            const modal = document.createElement('div');
-            modal.classList.add('lt-player-mobile-add-info-modal')
-            modal.innerHTML = modalTemplate;
-
-            const body = document.querySelector('body');
-
-            if (body) {
-                body.appendChild(modal);
-            }
+            document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
         }
 
         buttons.forEach((button: HTMLElement) => {
@@ -52,17 +46,19 @@ export class LTPlayerAddInfoMobile {
                 mobileEvent.on('singletap', function LTPlayerMobileAdditionalInfoButtons(event) {
                     event.preventDefault();
 
-                    controller.playerInstance.plyr.elements.controls.classList.add('plyr__controls-enable-addInfo');
-
                     let targetModal = button.dataset.ltTarget;
                     let data = instance.additionalData;
 
-
                     if (data[targetModal] !== undefined) {
                         createInformationModal(data[targetModal], targetModal)
                     }
 
-                    playerControlsContainer.classList.add('player-lt__modal__mobile-show-modal');
+                    let modal = document.querySelector(`.lt-modal-${targetModal}-${instance.playerInstance.playerConfig.getPlayerId()}`);
+
+                    if (modal) {
+                        modal.classList.add('player-lt__show-modal');
+                        document.body.classList.add('overflow-hidden-body-important');
+                    }
 
                     window.Player.players.forEach(item => {
                         if (item.plyr.playing) {
@@ -72,75 +68,46 @@ export class LTPlayerAddInfoMobile {
                         }
                     })
 
-                    __this.dragCloseModal(controller);
-
-                    controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance)
+                    __this.closeModal(controller);
                 })
             }
         })
-
-
     }
 
-    dragCloseModal(controller: LTPLayerAddInfo.Controller) {
-        const modalBody = document.querySelector('.lt-player-mobile-add-info-modal');
-        const modalHeader = modalBody.querySelector('.player-lt__mobile__modal-header');
-        const  background = modalBody.querySelector('.player-lt__modal__mobile__background');
-
-        const closeModal = () => {
-            modalBody.remove();
-        }
-        if (modalHeader) {
-            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(modalHeader);
-            if (mobileEvent) {
-                mobileEvent.on('pan', function LTPlayerMobileDragDownModal() {
-                    closeModal();
-                    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;
-                        }
-                    })
-                })
-            }
-        }
-        if (background) {
-            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileCloseModal() {
-                    closeModal();
-                    window.Player.players.forEach(item => {
-                        if (item.pausedPlayer !== undefined) {
-                            if (item.pausedPlayer.isEmbed) {
-                                item.pausedPlayer.embed.play().then(function () {
+    closeModal(controller: LTPLayerAddInfo.Controller) {
+        const modals = document.querySelectorAll('.player-lt__modal');
+
+        if (modals.length !== 0) {
+            modals.forEach(modal => {
+                const mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(modal);
+                mobileEvent.on('singletap', function(event) {
+                    const target = event.target;
+                    if (modal.classList.contains('player-lt__show-modal')) {
+                        if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
+                            modal.classList.remove('player-lt__show-modal');
+                            document.body.classList.remove('overflow-hidden-body-important');
+                            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;
-                                }).catch(function () {
-                                    // an error occurred
-                                });
-                            }
-
-                            if (item.pausedPlayer.isHTML5) {
-
-                                item.pausedPlayer.play();
-                                return;
-                            }
-                            return;
+                                }
+                            })
                         }
-                    })
-                })
-            }
+                    }
+                });
+            })
         }
     }
 }

package/src/components/events/LTPlayerMobile.ts

@@ -185,15 +185,13 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
 
         //check if getDevice is mobile or desktop
         if (instance.player.playerConfig.getDevice() === 'mobile') {
-
             const manager = new Hammer.Manager(selector);
-
             manager.add(new Hammer.Pan({
                 direction : 30
             }))
 
             manager.add(new Hammer.Tap({
-                event : 'triepletap',
+                event : 'tripletap',
                 taps : 3
             }));
 
@@ -208,9 +206,9 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
 
             manager.get('doubletap').recognizeWith('singletap');
             manager.get('singletap').requireFailure('doubletap');
-            manager.get('triepletap').recognizeWith('doubletap');
-            manager.get('doubletap').requireFailure('triepletap');
-            manager.get('pan').set({direction: Hammer.DIRECTION_DOWN})
+            manager.get('tripletap').recognizeWith('doubletap');
+            manager.get('doubletap').requireFailure('tripletap');
+            manager.get('pan').set({direction: Hammer.DIRECTION_DOWN});
 
             return manager;
         }

package/src/services/ResizeService.ts

@@ -212,34 +212,37 @@ export class ResizeService {
             }
         }
 
-            if (containerWidth >= 380) {
+            // 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();
 
-                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();
-            }
     }
 
     protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {

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/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}} />