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

package/package.json

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

package/src/assets/css/sample.css

@@ -0,0 +1,12 @@
+.container-text-portrait-player {
+  display: flex;
+  max-width: 400px;
+  margin: auto;
+  justify-content: center;
+  padding: 3rem 0;
+}
+
+.container-text-landscape-player {
+  display: flex;
+  max-width: 1000px;
+}

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
@@ -47,6 +51,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,
@@ -51,3 +45,9 @@
     }
   }
 }
+
+.lt-player-portrate--mobile {
+  .fullscreen-custom-control {
+    display: none !important;
+  }
+}

package/src/assets/sass/sections/_additional-info.scss

@@ -81,3 +81,10 @@
   width: 100%;
   height: 100%;
 }
+
+.is-fullscreen {
+  .lt-player__additional-info,
+  .lt-player__additional-info-mobile {
+    display: none;
+  }
+}

package/src/assets/sass/sections/controllers/_botom.scss

@@ -50,6 +50,23 @@
         margin-left: auto;
         justify-content: end;
         flex: 1;
+
+        .plyr__controls_speed-button {
+          width: 30px;
+          height: 30px;
+          background-color: $default-lt-player-blue;
+          font-size: $lt-player-font-size-xs;
+          font-weight: $lt-player-font-weight-md;
+
+          &:hover {
+            background-color: darken($default-lt-player-blue, 5%);
+          }
+
+          &:focus,
+          &:active {
+            background-color: $default-lt-player-blue;
+          }
+        }
       }
 
       .skip-backward-seconds,
@@ -313,6 +330,11 @@
             padding: 16px;
           }
         }
+
+        .plyr__controls_speed-button {
+          width: 40px;
+          height: 40px;
+        }
       }
     }
   }

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/config/LTPlayerConfig.ts

@@ -225,6 +225,8 @@ export class LTPlayerConfig {
     }
 
     getFullscreenMode() {
+        return {fullscreen: {enabled: true}};
+
         if (this.getDevice() === 'mobile') {
             return {fullscreen: {enabled: false}}
         } else {

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -246,7 +246,6 @@ export namespace LTPlayerControlsEvents  {
                     instance.plyr.fullscreen.toggle();
                 })
             }
-
         }
 
         fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string){
@@ -612,18 +611,19 @@ export namespace LTPlayerControlsEvents  {
         }
 
         fullScreenButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
             let playerControlsSelector = instance.plyr.elements.controls;
 
             const fullScreenButtonContainer = playerControlsSelector.querySelector('.fullscreen-custom-control');
             let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(fullScreenButtonContainer);
 
             if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileFullScreen() {
+                mobileEvent.on('singletap', function LTPlayerMobileFullScreen(event) {
+                    event.preventDefault();
                     instance.plyr.fullscreen.toggle();
                 })
             }
         }
+
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
             let common = this.common;
             let instanceMobile = this;
@@ -750,49 +750,46 @@ export namespace LTPlayerControlsEvents  {
             }
         }
 
-        //remove volume
-        // volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        //     let playerControlsContainer = instance.plyr.elements.controls;
-        //     const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-        //     const volumeButton = volume.querySelector('button');
-        //     const volumeUp = volume.querySelector('.volume-max');
-        //     const volumeMute = volume.querySelector('.volume-mute');
-        //
-        //     const setVolumeIcon = (volumeState: string) => {
-        //         if (volumeState === 'up') {
-        //             volumeUp.classList.remove('d-none');
-        //             volumeMute.classList.remove('d-none');
-        //             volumeMute.classList.add('d-none');
-        //         } else {
-        //             volumeUp.classList.remove('d-none');
-        //             volumeMute.classList.remove('d-none');
-        //             volumeUp.classList.add('d-none');
-        //         }
-        //     }
-        //
-        //     const setVolume = (): string => {
-        //         if (instance.plyr.muted) {
-        //             instance.plyr.muted = false;
-        //             return 'up';
-        //         } else {
-        //             instance.plyr.muted = true;
-        //             return 'mute';
-        //         }
-        //     }
-        //
-        //     setVolumeIcon('up');
-        //
-        //     let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
-        //
-        //     mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
-        //         let volumeState = setVolume();
-        //         setVolumeIcon(volumeState);
-        //         instance.playerControl.mobileEvents.showControls(instance);
-        //     })
-        //
-        // }
-    }
+        volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            let playerControlsContainer = instance.plyr.elements.controls;
+            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+            const setVolume = (): string => {
+                if (instance.plyr.muted) {
+                    instance.plyr.muted = false;
+                    return 'up';
+                } else {
+                    instance.plyr.muted = true;
+                    return 'mute';
+                }
+            }
 
+            if (volume) {
+                const volumeButton = volume.querySelector('button');
+                const volumeUp = volume.querySelector('.volume-max');
+                const volumeMute = volume.querySelector('.volume-mute');
 
+                const setVolumeIcon = (volumeState: string) => {
+                    if (volumeState === 'up') {
+                        volumeUp.classList.remove('d-none');
+                        volumeMute.classList.remove('d-none');
+                        volumeMute.classList.add('d-none');
+                    } else {
+                        volumeUp.classList.remove('d-none');
+                        volumeMute.classList.remove('d-none');
+                        volumeUp.classList.add('d-none');
+                    }
+                }
 
+                setVolumeIcon('up');
+
+                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
+
+                mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
+                    let volumeState = setVolume();
+                    setVolumeIcon(volumeState);
+                    instance.playerControl.mobileEvents.showControls(instance);
+                })
+            }
+        }
+    }
 }

package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts

@@ -10,6 +10,7 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     }
 
     init() {
+        this.setButtonSpeed();
         this.settingsInstance.common.addSettingsTemplate(this.settingsInstance.playerInstance.playerConfig.getDevice());
         this.addOpenSettingsEventButton();
         this.initCaptionsEvent();
@@ -19,11 +20,12 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
 
     addOpenSettingsEventButton() {
         const selectors: defaultType = this.settingsInstance.common.getSelectors();
-
-        selectors.button.addEventListener('click', (event: MouseEvent) => {
-            event.preventDefault();
-            this.settingsInstance.common.openSettings();
-        })
+        if (selectors.button) {
+            selectors.button.addEventListener('click', (event: MouseEvent) => {
+                event.preventDefault();
+                this.settingsInstance.common.openSettings();
+            })
+        }
     }
 
     initCaptionsEvent() {
@@ -84,4 +86,37 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
         })
     }
 
+    setButtonSpeed() {
+        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
+        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
+        if (playerSpeedButton) {
+            playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
+        }
+        let plyr = this.settingsInstance.playerInstance.plyr;
+        let instance = this.settingsInstance.playerInstance;
+
+        if (playerSpeedButton) {
+            playerSpeedButton.addEventListener('click', function(event) {
+                let playSpeed = plyr.speed + 0.25;
+
+                if (playSpeed > 2) {
+                    playerSpeedButton.innerHTML = `1`;
+                    plyr.speed = 1;
+                    return;
+                }
+
+                if (playSpeed === 1.75) {
+                    plyr.speed = playSpeed + 0.25
+                    playerSpeedButton.innerHTML = `${playSpeed + 0.25}`;
+                    return;
+                }
+
+                plyr.speed = playSpeed;
+                playerSpeedButton.innerHTML = `${playSpeed}`;
+
+                instance.playerControl.mobileEvents.showControls(instance);
+            })
+        }
+    }
+
 }