@latest-thinking/lt-player 1.0.4-k → 1.0.4-m

package/package.json

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

package/src/assets/sass/sections/_control.scss

@@ -27,6 +27,14 @@
   }
 
   &__controls {
+
+    &__mobile-background {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 9999;
+    }
+
     &__shortcut-area {
 
     }

package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss

@@ -44,7 +44,7 @@
 
     .player-state {
       opacity: 0;
-      transition: all 0.3s ease-in-out;
+      transition: all 0.8s ease-in-out;
       pointer-events: none;
       @extend %lt-player-btn;
       @include dark-btn;
@@ -54,7 +54,7 @@
 
     .active {
       opacity: 1;
-      transition: all 0.3s ease-in-out;
+      transition: all 0.2s ease-in-out;
     }
   }
 
@@ -183,7 +183,7 @@
 
 
   .lt-player-notify {
-    transition: background 0.8s;
+    transition: background 0.2s;
     //background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
     opacity: 0;
     //opacity: 1;

package/src/components/LTPlayerManager.ts

@@ -114,11 +114,18 @@ export class LTPlayerManager {
 
         const setup = new LTPlayerSetup();
 
-        return new Promise(resolve => {
-            setup.init(playerConfig).then( result => {
-                this.players.push(result);
-                resolve(result);
-            })
+        return new Promise((resolve, reject) => {
+            let setupPLayer = setup.init(playerConfig);
+
+            if (setupPLayer) {
+                setupPLayer.then( result => {
+                    this.players.push(result);
+                    resolve(result);
+                })
+            } else {
+               reject('Player is not setup')
+            }
+
         })
 
 

package/src/components/LTPlayerSetup.ts

@@ -65,16 +65,16 @@ export class LTPlayerSetup {
         }
 
         if (!playerConfig.body.playerType) {
-            return new Promise(resolve => {
+            return new Promise((resolve, reject) => {
                 playerConfig.body.playerType = this.getVideoTypeByUrl(playerConfig.body.videoUrl).then(response => {
                     playerConfig.body.playerType = response;
-                    resolve(this.setType(playerConfig, playerContainer))
+                    resolve(this.setType(playerConfig, playerContainer));
                 });
             })
         } else {
-
-            return new Promise(resolve => {
-                resolve(this.setType(playerConfig, playerContainer))
+            return new Promise((resolve, reject) => {
+                resolve(this.setType(playerConfig, playerContainer));
+                reject(null);
             });
         }
     }

package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts

@@ -186,6 +186,9 @@ export namespace LTPlayerAdditionalInfo  {
                         if (background) {
                             background.classList.add('d-none');
                         }
+
+                        controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance);
+
                     }, 150)
 
                 }

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -39,8 +39,8 @@ export namespace LTPlayerControlsEvents  {
                         setTimeout(() => {
                             playInfoIcon.classList.add('d-none');
                             pauseInfoIcon.classList.add('d-none');
-                        }, 300)
-                    }, 300)
+                        }, 500)
+                    }, 500)
 
                 }
 
@@ -375,27 +375,29 @@ export namespace LTPlayerControlsEvents  {
         }
         seekBar(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerControlsContainer = instance.plyr.elements.controls;
-            const seekBar = playerControlsContainer.querySelector('.plyr__progress__seek');
+            const seekBar: HTMLInputElement = playerControlsContainer.querySelector('.plyr__progress__seek');
             const rangeTouch = require('rangetouch');
             rangeTouch.setup(seekBar);
+            const __this = this;
+            seekBar.addEventListener('change', () => {
+                __this.showControls(instance);
+            })
+
         }
 
         controlsTimeShow(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerContainer = instance.plyr.elements.container;
-            const playerControlsContainer = instance.plyr.elements.controls;
+            const playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
             const __this = this;
+            if (playerControlsBackground) {
+                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsBackground);
 
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsContainer);
-
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileFullScreen() {
-
-                    if (!playerContainer.classList.contains('plyr__controls-enable')) {
+                if (mobileEvent) {
+                    mobileEvent.on('singletap', function LTPlayerMobileBack() {
                         __this.showControls(instance);
-                    }
-                })
+                    })
+                }
             }
-
         }
 
         removePlyrControlsClass(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
@@ -410,11 +412,19 @@ export namespace LTPlayerControlsEvents  {
 
 
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
+            let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
+
+            if (playerContainer.classList.contains('plyr--hide-controls')) {
+                playerContainer.classList.remove('plyr--hide-controls');
+            }
 
-            playerContainer.classList.remove('plyr--hide-controls');
+            if (playerControlsBackground) {
+                if (!playerControlsBackground.classList.contains('d-none')) {
+                    playerControlsBackground.classList.add('d-none');
+                }
+            }
 
             if (!playerControlsContainer.classList.contains('plyr__controls-enable')) {
                 playerControlsContainer.classList.add('plyr__controls-enable');
@@ -430,11 +440,17 @@ export namespace LTPlayerControlsEvents  {
         hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
-            this.controlsTimeOut = setTimeout(() => {
-                playerControlsContainer.classList.remove('plyr__controls-enable');
-                playerContainer.classList.add('plyr--hide-controls');
-            }, 4000);
-
+            let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
+
+            if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
+                this.controlsTimeOut = setTimeout(() => {
+                    playerControlsContainer.classList.remove('plyr__controls-enable');
+                    playerContainer.classList.add('plyr--hide-controls');
+                    if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
+                        playerControlsBackground.classList.remove('d-none');
+                    }
+                }, 4000);
+            }
         }
 
         fullScreenButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
@@ -469,6 +485,7 @@ export namespace LTPlayerControlsEvents  {
                                 instance.plyr.togglePlay(true);
                             }
                             common.playPauseIconTimeUpdate(instance);
+                            instance.playerControl.mobileEvents.showControls(instance);
                         });
                     }
             }
@@ -501,6 +518,7 @@ export namespace LTPlayerControlsEvents  {
                     setTimeout(() => {
                         common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
                     }, 500)
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
 
                 mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick() {
@@ -518,6 +536,7 @@ export namespace LTPlayerControlsEvents  {
                     setTimeout(() => {
                         common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
                     }, 500)
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
 
                 mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
@@ -586,6 +605,7 @@ export namespace LTPlayerControlsEvents  {
             mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
                 let volumeState = setVolume();
                 setVolumeIcon(volumeState);
+                instance.playerControl.mobileEvents.showControls(instance);
             })
 
         }

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

@@ -24,6 +24,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
         playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
         let plyr = this.settingsInstance.playerInstance.plyr;
+        let instance = this.settingsInstance.playerInstance;
 
         if (playerSpeedButton) {
             let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
@@ -47,6 +48,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                     plyr.speed = playSpeed;
                     playerSpeedButton.innerHTML = `${playSpeed}`;
 
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
             }
         }

package/src/services/LTPlayerRotateDeviceService.ts

@@ -3,6 +3,14 @@ export class LTPlayerRotateDeviceService {
     }
 
     getDeviceOrientation() {
-        return screen.orientation.type.replace('-primary', '');
+        console.log(window.matchMedia("(orientation: portrait)").matches)
+        if (window.matchMedia("(orientation: portrait)").matches) {
+            return 'portrait';
+        }
+
+        if (window.matchMedia("(orientation: landscape)").matches) {
+            return 'landscape';
+        }
+        return 'portrait';
     }
 }

package/src/services/ResizeService.ts

@@ -136,19 +136,20 @@ export class ResizeService {
     protected setAddInfoByDimensions(containerWidth: number, buttonsTemplate:string, deskEvent: LTPlayerAdditionalInfo.Desktop, controller: LTPLayerAddInfo.Controller) {
 
         const createAddInfoButtonsOutSide = () => {
-            let addInfoContainer = document.querySelector('.lt-player__additional-info');
+
+            let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             if (addInfoContainer) {
                 addInfoContainer.remove();
             }
 
             this.playerInstance.plyr.elements.container.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = document.querySelector('.lt-player__additional-info');
+            let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             inserted.classList.add('lt-player__additional-info__is_set_out-side');
             deskEvent.set(controller);
         }
 
         const createAddInfoButtonsInSide = () => {
-            let addInfoContainer = document.querySelector('.lt-player__additional-info');
+            let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             if (addInfoContainer) {
                 addInfoContainer.remove();
             }
@@ -156,7 +157,7 @@ export class ResizeService {
             let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
 
             controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = document.querySelector('.lt-player__additional-info');
+            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);
         }

package/src/views/controls.handlebars

@@ -166,6 +166,9 @@
       <div class="player-lt__modal__mobile__background d-none"></div>
       <div class="player-lt__modal__mobile d-none"></div>
     </div>
+    {{#mobile}}
+        <div class="plyr__controls__mobile-background d-none"></div>
+    {{/mobile}}
   {{/landscape}}
   {{#portrait}}
     <div class="plyr__controls">
@@ -303,5 +306,8 @@
       <div class="player-lt__modal__mobile__background d-none"></div>
       <div class="player-lt__modal__mobile d-none"></div>
     </div>
+    {{#mobile}}
+        <div class="plyr__controls__mobile-background d-none"></div>
+    {{/mobile}}
   {{/portrait}}
 {{/player}}