@latest-thinking/lt-player 1.0.5-e → 1.0.5-g

package/package.json

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

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

@@ -50,7 +50,7 @@
     justify-content: flex-end;
     gap: 1rem;
     background: transparent;
-    padding-bottom: 1rem;
+    padding-bottom: 0;
 
     button {
       @extend %lt-player-btn;

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

@@ -23,8 +23,9 @@
 
         &__left-buttons {
           margin-right: auto;
-          display: grid;
+          display: flex;
           grid-template-columns: 1fr 1fr;
+          flex: 1;
         }
 
         &__center-buttons {
@@ -33,9 +34,9 @@
 
         &__right-buttons {
           margin-left: auto;
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          direction: rtl;
+          display: flex;
+          flex: 1;
+          justify-content: end;
         }
 
         &__previous-chapter-view-wrapper,
@@ -216,13 +217,13 @@
 
 .plyr {
   &__progress {
-    top: -75px;
     z-index: 9;
 
     &--wrapper {
-      position: relative;
       width: 100%;
       padding: 0 2rem;
+      position: absolute;
+      bottom: 6rem;
     }
   }
 
@@ -289,7 +290,6 @@
       &__current {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 2rem;
         margin-left: -0.5rem;
         margin-right: -0.5rem;
 
@@ -320,52 +320,52 @@
               min-width: 80px;
               width: 20%;
 
-                .volume_control__background__area__range {
-                  color: $default-lt-button-color !important;
-                  min-width: 8rem;
-                  -webkit-appearance: none;
-                  appearance: none;
-                  background: transparent;
-                  cursor: pointer;
-                }
-
-                .volume_control__background__area__range::-webkit-slider-runnable-track {
-                  @extend %input-range--webkit-slider-runnable-track;
-                }
-
-                .volume_control__background__area__range::-moz-range-track {
-                  @extend %input-range--moz-range-track;
-                }
-
-                .volume_control__background__area__range::-ms-track {
-                  @extend %input-range--ms-track;
-                }
-
-                .volume_control__background__area__range::-webkit-slider-thumb {
-                  @extend %input-range--webkit-slider-thumb;
-                  border-color: $default-lt-player-black;
-                  background: $default-lt-player-white;
-                }
-
-                .volume_control__background__area__range::-moz-range-thumb {
-                  @extend %input-range--moz-range-thumb;
-                  border-color: $default-lt-player-black;
-                  background: $default-lt-player-white;
-                }
-
-                .volume_control__background__area__range::-ms-thumb {
-                  @extend %input-range--ms-thumb;
-                  margin-top: 3px;
-                  border: 7px solid black;
-                  height: 20px;
-                  width: 20px;
-                  background: $default-lt-player-white;
-                  cursor: pointer;
-                }
-
-                .volume_control__background__area__range::-moz-range-progress {
-                  @extend %input-range--moz-range-progress;
-                }
+              .volume_control__background__area__range {
+                color: $default-lt-button-color !important;
+                min-width: 8rem;
+                -webkit-appearance: none;
+                appearance: none;
+                background: transparent;
+                cursor: pointer;
+              }
+
+              .volume_control__background__area__range::-webkit-slider-runnable-track {
+                @extend %input-range--webkit-slider-runnable-track;
+              }
+
+              .volume_control__background__area__range::-moz-range-track {
+                @extend %input-range--moz-range-track;
+              }
+
+              .volume_control__background__area__range::-ms-track {
+                @extend %input-range--ms-track;
+              }
+
+              .volume_control__background__area__range::-webkit-slider-thumb {
+                @extend %input-range--webkit-slider-thumb;
+                border-color: $default-lt-player-black;
+                background: $default-lt-player-white;
+              }
+
+              .volume_control__background__area__range::-moz-range-thumb {
+                @extend %input-range--moz-range-thumb;
+                border-color: $default-lt-player-black;
+                background: $default-lt-player-white;
+              }
+
+              .volume_control__background__area__range::-ms-thumb {
+                @extend %input-range--ms-thumb;
+                margin-top: 3px;
+                border: 7px solid black;
+                height: 20px;
+                width: 20px;
+                background: $default-lt-player-white;
+                cursor: pointer;
+              }
+
+              .volume_control__background__area__range::-moz-range-progress {
+                @extend %input-range--moz-range-progress;
+              }
             }
 
             .volume_control__volume-button-close {

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

@@ -37,11 +37,14 @@
   width: 100%;
   height: 100%;
   display: flex;
-  position: relative;
+
+  &.portrait {
+    position: relative;
+  }
 
   &__notification-button-state {
     position: absolute;
-    top: 40%;
+    top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 
@@ -63,16 +66,16 @@
 
   .lt-player-video-content {
     position: absolute;
-    bottom: 5rem;
+    bottom: 9rem;
     text-align: left;
     display: flex;
     padding: 0 1.5rem;
     width: 100%;
-    justify-content: space-between;
+    user-select: none;
+    align-items: end;
 
     .content__body {
       z-index: 2;
-      margin-top: auto;
       width: 100%;
     }
 
@@ -87,9 +90,6 @@
     }
 
     .poster-paragraph {
-
-      margin-bottom: 3rem;
-
       &__content {
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -123,30 +123,29 @@
     color: white;
     cursor: pointer;
     position: absolute;
-    bottom: 6rem;
+    bottom: 9rem;
     right: 6rem;
     z-index: 8;
   }
 
-
-  .lt-player-rewind-area {
+  .lt-player-rewind-area,
+  .lt-player-forward-area {
     touch-action: inherit!important;
     width: 100%;
     height: 100%;
-    z-index: 3;
+    z-index: 4;
   }
 
-  .lt-player-rewind {
+  .lt-player-rewind,
+  .lt-player-forward {
     width: 50%;
-    height: 130%;
-    top: -10rem;
-    display:flex;
-    flex-direction: row;
+    top: 10%;
+    display: flex;
     position: absolute;
     text-align: center;
-    border-radius:0 100% 100% 0;
-    left: 0;
-
+    border-radius: 100% 0 0 100%;
+    height: unset;
+    bottom: 10%;
 
     &__icon-wrapper {
       display: flex;
@@ -164,83 +163,48 @@
 
     &__icon {
       display: flex;
-      justify-content:flex-start;
-      align-items:center;
-
+      justify-content: flex-start;
+      align-items: center;
       color: rgba(255,255,255, 1);
       user-select: none;
-
-      &__portrait {
-        margin: auto auto 18rem 3rem;
-      }
-
-      &__landscape {
-        margin: auto auto 13rem 4rem;
-      }
     }
 
     span {
       font-size: 12px;
       user-select: none;
     }
-
   }
 
-  .lt-player-forward-area {
-    touch-action: inherit!important;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-  }
-
-  .lt-player-forward {
-    width: 50%;
-    height: 130%;
-    top: -10rem;
-    display:flex;
-    flex-direction: row;
-    position: absolute;
-    text-align: center;
-    border-radius:100% 0 0 100%;
-    right: 0;
+  .lt-player-rewind {
+    left: 0;
 
-    &__icon-wrapper {
-      display: flex;
-      padding: 0 .5rem;
+    &__icon {
+      flex-direction: row-reverse;
 
-      &.rotate {
-        rotate: 180deg;
+      &__portrait {
+        margin: auto auto auto 3rem;
       }
 
-      img {
-        max-width: 20px;
+      &__landscape {
+        margin: auto auto auto 4rem;
       }
     }
+  }
 
-    &__icon {
-      display: flex;
-      justify-content:flex-start;
-      align-items:center;
-
-      color: rgba(255,255,255, 1);
+  .lt-player-forward {
+    right: 0;
 
+    &__icon {
       &__portrait {
-        margin: auto 3rem 18rem auto;
+        margin: auto 3rem auto auto;
       }
 
       &__landscape {
-        margin: auto 4rem 13rem auto;
+        margin: auto 4rem auto auto;
       }
-
     }
-
-    span{
-      font-size:12px;
-    }
-
   }
 
-
   .lt-player-notify {
     transition: background 0.8s;
     //background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;

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

@@ -43,10 +43,10 @@
   &__controls-enable,
   &__controls-enable-settings {
     .top-controllers {
-      z-index: 10;
       width: 100%;
-      height: 29%;
       padding: 1.5rem 1.5rem 0 1.5rem;
+      position: absolute;
+
       button {
         @extend %lt-player-btn;
         @include dark-btn;
@@ -66,11 +66,16 @@
         display: flex;
         justify-content: space-between;
 
-        &__left {
+        &__left,
+        &__right {
           display: flex;
           flex-direction: column;
+          flex: 0 0 12%;
+          z-index: 5;
+        }
+
+        &__left {
           align-items: flex-start;
-          flex: 0 0 20%
         }
 
         &__center {
@@ -78,10 +83,7 @@
         }
 
         &__right {
-          display: flex;
-          flex-direction: column;
           align-items: end;
-          flex: 0 0 20%
         }
 
         &__center {
@@ -159,4 +161,4 @@
   //  }
   //
   //}
-}
+}

package/src/components/LTPlayerSetup.ts

@@ -85,6 +85,7 @@ export class LTPlayerSetup {
             if (checkVersion(playerConfig.version)) {
                 return new Promise((resolve, reject) => {
                     playerConfig.body.playerType = 2;
+
                     resolve(this.setType(playerConfig, playerContainer));
                     reject(null);
                 });

package/src/components/LTPlayerType.ts

@@ -39,7 +39,6 @@ export namespace LTPlayer {
             this.additionalInfoService = additionalInfoService;
             this.miniPlayer = new LTPlayerMini();
             this.setPlayerConfig(configData.body, configData.version);
-            this.initSetupPlayerPoster(configData.body);
             this.initPlayer();
             this.setEvents();
 
@@ -50,14 +49,6 @@ export namespace LTPlayer {
         setEvents() {
             this.eventInstance = new LTPlayerEventsManager(this);
         }
-
-        private initSetupPlayerPoster(configData: defaultType) {
-            const playerContainer = configData.playerContainer;
-            playerContainer.classList.add('d-none')
-            const logo: string = this.iconService.getLogo();
-            playerContainer.insertAdjacentHTML("afterend", this.templateService.getOnloadPoster({logo: logo})) ;
-        }
-
         setDesktopEvents() {
             this.desktopEvents = new LTPlayerEvents.Desktop();
         }
@@ -130,18 +121,20 @@ export namespace LTPlayer {
 
             const player = new Plyr(element, playerSettings)
 
+            this.windowService.init(this);
+
+            this.plyr = player;
+
+            this.posterManager.init(this);
+
             const chapters = this.playerConfig.getChapters();
 
             if (chapters) {
                 this.playerControl.initChapters(this.playerConfig.getChapters());
             }
 
-            this.plyr = player;
-
             this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
 
-            this.posterManager.init(this);
-
             if (this.playerConfig.getShareData()) {
                 this.share.init(this);
             }
@@ -217,7 +210,6 @@ export namespace LTPlayer {
 
             this.miniPlayer = new LTPlayerMini();
             this.setPlayerConfig(configData.body, configData.version);
-            this.initPoster(configData.body);
             this.initPlayer();
             this.setEvents();
 
@@ -256,18 +248,20 @@ export namespace LTPlayer {
 
             const player = new Plyr(element, playerSettings);
 
+            this.windowService.init(this);
+
+            this.plyr = player;
+
+            this.posterManager.init(this);
+
             const chapters = this.playerConfig.getChapters();
 
             if (chapters) {
                 this.playerControl.initChapters(this.playerConfig.getChapters());
             }
 
-            this.plyr = player;
-
             this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
 
-            this.posterManager.init(this);
-
             if (this.playerConfig.getShareData()) {
                 this.share.init(this);
             }
@@ -286,13 +280,6 @@ export namespace LTPlayer {
             playerContainer.innerHTML = this.templateService.getTemplateByType(config);
         }
 
-        initPoster(configData: defaultType) {
-            const playerContainer = configData.playerContainer;
-            playerContainer.classList.add('d-none')
-            const logo: string = this.iconService.getLogo();
-            playerContainer.insertAdjacentHTML("afterend", this.templateService.getOnloadPoster({logo: logo})) ;
-        }
-
         private setPlayerConfig(configData: playerConfigType, version: string | number) {
             this.playerConfig = new LTPlayerConfig(version);
             this.playerConfig.mapConfigData(configData);

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -200,7 +200,7 @@ export namespace LTPlayerControlsEvents  {
 
 
             controls.addEventListener('mouseleave', function () {
-                // controls.classList.remove('plyr__controls-enable')
+                controls.classList.remove('plyr__controls-enable')
             })
         }
 

package/src/components/events/LTPlayerCommon.ts

@@ -112,7 +112,7 @@ export class LTPlayerCommon {
         //set share button
         this.player.share.events.desktop.init(this.player);
 
-        this.player.windowService.init(this.player);
+        // this.player.windowService.init(this.player);
         //set poster
         this.player.posterManager.mobileEvents.onload(this.player);
 

package/src/components/events/LTPlayerDesktop.ts

@@ -5,6 +5,7 @@ import {plyr} from "../../global/types/ModuleTypes";
 import {LTPlayerEventsManager} from "../LTPlayerEventsManager";
 import {LTPlayerCommon} from "./LTPlayerCommon";
 import {EventsInterfaces} from "../../global/interfaces/EventsInterfaces";
+import {LoaderService} from "../../services/LoaderService";
 
 export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces {
     setup(eventManager: LTPlayerEventsManager) {
@@ -23,6 +24,33 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrTimeUpdate();
         this.plyrOnPlay();
         this.plyrOnPause();
+        this.plyrOnSeek();
+        this.plyrOnPlaying();
+    }
+
+    plyrOnSeek():void {
+        let eventManager = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.isEmbed) {
+                let playerContainer = instance.plyr.elements.container;
+                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
+            }
+        })
+    }
+
+    plyrOnPlaying(): void {
+        let eventManager = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('playing', function LTPlayerSeek(){
+            plyr.embed.play().then (function LTPlayerEmbedPlay() {
+                 LoaderService.removeSpinner(plyr.elements.container)
+            })
+        })
     }
 
 
@@ -148,6 +176,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             if (instance.playerConfig.getPreload().isActive) {
                 common.preloadPoster.timeUpdate(instance, 'event');
             }
+            LoaderService.removeSpinner(plyr.elements.container)
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
@@ -155,7 +184,6 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
     plyrOnPlay() {
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
-
         plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })

package/src/components/events/LTPlayerMobile.ts

@@ -4,6 +4,7 @@ import {EventsInterfaces} from "../../global/interfaces/EventsInterfaces";
 import {LTPlayer} from "../LTPlayerType";
 import Plyr from "plyr";
 import {plyr} from "../../global/types/ModuleTypes";
+import {LoaderService} from "../../services/LoaderService";
 
 export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
 
@@ -23,6 +24,33 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrTimeUpdate();
         this.plyrOnPlay();
         this.plyrOnPause();
+        this.plyrOnSeek();
+        this.plyrOnPlaying();
+    }
+
+    plyrOnSeek():void {
+        let eventManager = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.isEmbed) {
+                let playerContainer = instance.plyr.elements.container;
+                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
+            }
+        })
+    }
+
+    plyrOnPlaying(): void {
+        let eventManager = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('playing', function LTPlayerSeek(){
+            plyr.embed.play().then (function LTPlayerEmbedPlay() {
+                LoaderService.removeSpinner(plyr.elements.container)
+            })
+        })
     }
 
     plyrOnReady(): void {
@@ -128,6 +156,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             if (instance.playerConfig.getPreload().isActive) {
                 eventManager.preloadPoster.timeUpdate(instance, 'event');
             }
+            LoaderService.removeSpinner(plyr.elements.container)
 
             eventManager.timeUpdate(event);
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');