@latest-thinking/lt-player 1.0.4-l → 1.0.4-n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.4-l",
+  "version": "1.0.4-n",
   "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,17 @@
   }
 
   &__controls {
+
+    touch-action: inherit!important;
+
+    &__mobile-background {
+      touch-action: inherit!important;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 9999;
+    }
+
     &__shortcut-area {
 
     }

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

@@ -345,7 +345,7 @@
         top: 0;
         background: #27282A;
         opacity: 0.75;
-        z-index: 5;
+        z-index: 10;
       }
     }
   }

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

@@ -11,3 +11,7 @@
   font-family: $lt-font-family-base !important;
   white-space: unset !important;
 }
+
+.plyr__captions span:empty {
+  display: none!important;
+}

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

@@ -251,10 +251,14 @@
         white-space: nowrap;
         font-size: 12px;
         transition: none;
+        outline: none;
         background-color: $default-lt-player-blue;
 
         &:focus,
-        &:active {
+        &:active,
+        &:hover,
+        &:focus-visible {
+          outline: $default-lt-player-blue;
           background-color: $default-lt-player-blue;
         }
       }
@@ -269,9 +273,12 @@
       }
 
       &__play-button_body {
-        bottom: -8px;
         position: relative;
 
+        &__portrait {
+          bottom: -8px;
+        }
+
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;

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;
     }
   }
 
@@ -91,6 +91,7 @@
 
 
   .lt-player-rewind-area {
+    touch-action: inherit!important;
     width: 100%;
     height: 100%;
     z-index: 3;
@@ -98,14 +99,15 @@
 
   .lt-player-rewind {
     width: 50%;
-    height: 100%;
+    height: 130%;
+    top: -10rem;
     display:flex;
     flex-direction: row;
     position: absolute;
     text-align: center;
     border-radius:0 100% 100% 0;
     left: 0;
-    top: 0;
+
 
     &__icon-wrapper {
       display: flex;
@@ -125,9 +127,17 @@
       display: flex;
       justify-content:flex-start;
       align-items:center;
-      margin: auto;
+
       color: rgba(255,255,255, 1);
       user-select: none;
+
+      &__portrait {
+        margin: auto auto 18rem 3rem;
+      }
+
+      &__landscape {
+        margin: auto auto 13rem 4rem;
+      }
     }
 
     span {
@@ -138,6 +148,7 @@
   }
 
   .lt-player-forward-area {
+    touch-action: inherit!important;
     width: 100%;
     height: 100%;
     z-index: 4;
@@ -145,14 +156,14 @@
 
   .lt-player-forward {
     width: 50%;
-    height: 100%;
+    height: 130%;
+    top: -10rem;
     display:flex;
     flex-direction: row;
     position: absolute;
     text-align: center;
     border-radius:100% 0 0 100%;
     right: 0;
-    top: 0;
 
     &__icon-wrapper {
       display: flex;
@@ -171,8 +182,17 @@
       display: flex;
       justify-content:flex-start;
       align-items:center;
-      margin: auto;
+
       color: rgba(255,255,255, 1);
+
+      &__portrait {
+        margin: auto 3rem 18rem auto;
+      }
+
+      &__landscape {
+        margin: auto 4rem 13rem auto;
+      }
+
     }
 
     span{

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

@@ -155,6 +155,8 @@ export namespace LTPlayerAdditionalInfo  {
                         window.Player.players.forEach( item => {item.plyr.pause()});
 
                         __this.dragCloseModal(controller);
+
+                        controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance)
                     })
                 }
             })
@@ -173,8 +175,7 @@ export namespace LTPlayerAdditionalInfo  {
                 if (playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
 
                     modal.style.removeProperty('bottom')
-                    playerControlsContainer.classList.remove('plyr__controls-enable-addInfo')
-
+                    playerControlsContainer.classList.remove('plyr__controls-enable-addInfo');
 
                     setTimeout(() => {
                         const modalBody = playerControlsContainer.querySelector('.player-lt__modal__mobile');
@@ -186,6 +187,9 @@ export namespace LTPlayerAdditionalInfo  {
                         if (background) {
                             background.classList.add('d-none');
                         }
+
+                        controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance);
+
                     }, 150)
 
                 }

package/src/components/controls/LTPlayerChapters.ts

@@ -93,7 +93,7 @@ export class LTPlayerChapters {
                 return;
             }
             if (leftButton.dataset.ltPlayerChaptertimestamp) {
-                player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp);
+                player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp) + 0.1;
             }
         })
 
@@ -116,7 +116,7 @@ export class LTPlayerChapters {
             }
 
             if (rightButton.dataset.ltPlayerChaptertimestamp) {
-                player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp);
+                player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp) + 0.1;
             }
 
         })
@@ -140,8 +140,10 @@ export class LTPlayerChapters {
                         return;
                     }
                     if (leftButton.dataset.ltPlayerChaptertimestamp) {
-                        player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp);
+                        player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp) + 0.1;
                     }
+
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
             }
         }
@@ -167,8 +169,10 @@ export class LTPlayerChapters {
                     }
 
                     if (rightButton.dataset.ltPlayerChaptertimestamp) {
-                        player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp);
+                        player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp) + 0.1;
                     }
+
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
             }
         }

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -29,29 +29,23 @@ export namespace LTPlayerControlsEvents  {
 
             playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
-                const playInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__play-icon');
-                const pauseInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__pause-icon');
+                const icons = instance.iconService.getIconsByComponent('playPause') as {play : string, pause: string};
                 const playerStateInfo = instance.plyr.elements.controls.querySelector('.player-state');
+                const iconSelector: HTMLImageElement = playerStateInfo.querySelector('.player-state__icon');
 
                 const removeStateButtons = () => {
                     setTimeout(() => {
                         playerStateInfo.classList.remove('active');
-                        setTimeout(() => {
-                            playInfoIcon.classList.add('d-none');
-                            pauseInfoIcon.classList.add('d-none');
-                        }, 300)
-                    }, 300)
-
+                    }, 200)
                 }
 
-
                 if (instance.plyr.playing) {
-                    pauseInfoIcon.classList.remove('d-none');
+                    iconSelector.src = icons.pause;
                     playerStateInfo.classList.add('active');
                     instance.plyr.togglePlay(false);
                     removeStateButtons();
                 } else {
-                    playInfoIcon.classList.remove('d-none');
+                    iconSelector.src = icons.play;
                     playerStateInfo.classList.add('active');
                     instance.plyr.togglePlay(true);
                     removeStateButtons();
@@ -94,7 +88,6 @@ export namespace LTPlayerControlsEvents  {
         constructor() {
             this.common = new Common();
         }
-
         subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
             const playerContainer = instance.plyr.elements.container;
@@ -166,9 +159,23 @@ export namespace LTPlayerControlsEvents  {
         }
 
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
+            let common = this.common;
             switch (type) {
                 case 'timeupdate':
                    this.common.playPauseIconTimeUpdate(instance);
+               break
+                case 'ready':
+                    const playButton = instance.plyr.elements.controls.querySelector('.play-button');
+                    if (playButton) {
+                        playButton.addEventListener('click', function LTPlayerPlayButton() {
+                            if (instance.plyr.playing) {
+                                instance.plyr.togglePlay(false);
+                            } else {
+                                instance.plyr.togglePlay(true);
+                            }
+                            common.playPauseIconTimeUpdate(instance);
+                        })
+                    }
             }
         }
 
@@ -180,22 +187,34 @@ export namespace LTPlayerControlsEvents  {
             if (selectors.forwardArea) {
                 selectors.forwardArea.addEventListener('dblclick', function LTPlayerForwardDbClick(event) {
                     event.preventDefault();
+
+                    const playerState = selectors.playerControlsContainer.querySelector('.lt-player-notification__notification-button-state');
+
+                    if (playerState && !playerState.classList.contains('d-none')) {
+                        playerState.classList.add('d-none');
+                    }
+
                     common.backwardRewind.animateNotificationIn(selectors.forwardAnimation);
                     common.backwardRewind.updateCurrentTime(instance, 10);
                     setTimeout(() => {
-                        common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
+                        common.backwardRewind.animateNotificationOut(selectors.forwardAnimation);
+                        playerState.classList.remove('d-none');
                     }, 500)
                 })
 
                 selectors.forwardArea.addEventListener('click', function LTPlayerForwardClick(event) {
                     event.preventDefault();
-                    const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
 
-                    if (volumeControlArea) {
-                        if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                            common.backwardRewind.playPause(instance);
+                    setTimeout(() => {
+                        const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
+
+                        if (volumeControlArea) {
+                            if (!volumeControlArea.classList.contains('volume-control-enable')) {
+                                common.backwardRewind.playPause(instance);
+                            }
                         }
-                    }
+                    }, 100)
+
 
                 })
             }
@@ -204,22 +223,35 @@ export namespace LTPlayerControlsEvents  {
 
                 selectors.rewindArea.addEventListener('dblclick', function LTPlayerRewindDbClick(event) {
                     event.preventDefault();
+
+                    const playerState = selectors.playerControlsContainer.querySelector('.lt-player-notification__notification-button-state');
+
+                    if (playerState && !playerState.classList.contains('d-none')) {
+                        playerState.classList.add('d-none');
+                    }
+
+
                     common.backwardRewind.animateNotificationIn(selectors.rewindAnimation);
                     common.backwardRewind.updateCurrentTime(instance, -10);
                     setTimeout(() => {
-                        common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
+                        common.backwardRewind.animateNotificationOut(selectors.rewindAnimation);
+                        playerState.classList.remove('d-none');
                     }, 500)
                 })
 
                 selectors.rewindArea.addEventListener('click', function LTPlayerRewindClick(event) {
                     event.preventDefault();
-                    const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
 
-                    if (volumeControlArea) {
-                        if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                            common.backwardRewind.playPause(instance);
+                    setTimeout(() => {
+                        const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
+
+                        if (volumeControlArea) {
+                            if (!volumeControlArea.classList.contains('volume-control-enable')) {
+                                common.backwardRewind.playPause(instance);
+                            }
                         }
-                    }
+                    }, 100)
+
                 })
 
             }
@@ -375,27 +407,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 +444,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');
 
-            playerContainer.classList.remove('plyr--hide-controls');
+            if (playerContainer.classList.contains('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');
@@ -424,17 +466,32 @@ export namespace LTPlayerControlsEvents  {
                 clearTimeout(this.controlsTimeOut);
             }
 
-            this.hideControls(instance);
+            this.hideControls(instance, false);
         }
 
-        hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+        hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
             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')) {
+
+                if (now) {
+                    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');
+                    }
+                } else {
+                    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) {
@@ -451,17 +508,17 @@ export namespace LTPlayerControlsEvents  {
             }
         }
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-
             let common = this.common;
+            let instanceMobile = this;
 
             switch (type) {
                 case 'timeupdate':
                     common.playPauseIconTimeUpdate(instance);
                     break
                 case 'ready':
-                    const playButton = instance.plyr.elements.container.querySelector('.play-button');
+                    const playButton = instance.plyr.elements.controls.querySelector('.play-button');
                     let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playButton);
-                    if (mobileEvent && instance.plyr.isHTML5) {
+                    if (mobileEvent) {
                         mobileEvent.on('singletap', function LTPlayerMobilePLayPauseIcon() {
                             if (instance.plyr.playing) {
                                 instance.plyr.togglePlay(false);
@@ -469,6 +526,7 @@ export namespace LTPlayerControlsEvents  {
                                 instance.plyr.togglePlay(true);
                             }
                             common.playPauseIconTimeUpdate(instance);
+                            instanceMobile.showControls(instance);
                         });
                     }
             }
@@ -478,32 +536,26 @@ export namespace LTPlayerControlsEvents  {
 
             let common = this.common;
             const selectors = common.backwardRewind.getSelectors(instance);
-            const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
 
             const singleTapAction = () => {
-                if (instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
-                    if (volumeControlArea) {
-                        if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                            common.backwardRewind.playPause(instance);
-                            instance.playerControl.mobileEvents.showControls(instance);
-                        }
-                    }
-                }
+                instance.playerControl.mobileEvents.hideControls(instance, true);
             }
 
             if (selectors.forwardArea) {
 
                 let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardArea);
 
-                mobileEvent.on('doubletap', function LTPlayerMobileForwardDbClick() {
+                mobileEvent.on('doubletap', function LTPlayerMobileForwardDbClick(event) {
+
                     common.backwardRewind.animateNotificationIn(selectors.forwardAnimation);
                     common.backwardRewind.updateCurrentTime(instance, 10);
                     setTimeout(() => {
                         common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
                     }, 500)
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
 
-                mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick() {
+                mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick(event) {
                     singleTapAction();
                 })
             }
@@ -512,15 +564,18 @@ export namespace LTPlayerControlsEvents  {
 
                 let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindArea);
 
-                mobileEvent.on('doubletap', function LTPlayerMobileRewindDbClick() {
+                mobileEvent.on('doubletap', function LTPlayerMobileRewindDbClick(event) {
+
                     common.backwardRewind.animateNotificationIn(selectors.rewindAnimation);
                     common.backwardRewind.updateCurrentTime(instance, -10);
                     setTimeout(() => {
                         common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
                     }, 500)
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
 
-                mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
+                mobileEvent.on('singletap', function LTPlayerMobileRewindClick(event) {
+
                     singleTapAction();
                 })
 
@@ -586,6 +641,7 @@ export namespace LTPlayerControlsEvents  {
             mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
                 let volumeState = setVolume();
                 setVolumeIcon(volumeState);
+                instance.playerControl.mobileEvents.showControls(instance);
             })
 
         }

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

@@ -65,13 +65,11 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
         let values:any = [1,1.25,1.50,2];
 
         myRange.oninput = function() {
-
-            player.speed = parseInt(values[rangeInput.value]);
-
+            player.speed = parseFloat(values[rangeInput.value]);
             myValue.innerHTML = values[rangeInput.value] + 'x';
         };
 
-        player.speed = parseInt(String(values[0]));
+        player.speed = parseFloat(String(values[0]));
         myValue.innerHTML = values[0] + 'x';
     }
     initSaveButton() {