@latest-thinking/lt-player 1.1.0-v → 1.1.0-x

package/package.json

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

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

@@ -2,7 +2,7 @@
   position: absolute;
   top: $top;
   left: $top;
-  transform: translate(-#{$top}, -#{$top});
+  translate: -#{$top} -#{$top};
 }
 
 @mixin flex-position($flex, $content, $align) {

package/src/assets/sass/app.scss

@@ -35,6 +35,10 @@ body {
 .lt-player {
   display: flex;
   width: 100%;
+
+  .plyr--video {
+    background: transparent;
+  }
 }
 
 .lt-player-orientation {
@@ -47,6 +51,14 @@ body {
   }
 }
 
+.lt-player:has(.plyr--fullscreen-fallback) {
+  container-type: normal;
+
+  .plyr--video {
+    background: black;
+  }
+}
+
 .invisible {
   visibility: hidden;
 }

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

@@ -15,43 +15,44 @@
 }
 
 .loader {
+  --_loader-dimensions: 80px;
+
   @include center-position(50%, 50%);
   display: none;
-  width: 80px;
-  height: 80px;
+  width: var(--_loader-dimensions);
+  height: var(--_loader-dimensions);
 
   &__backdrop {
     position: absolute;
     inset: 0;
     display: none;
     z-index: 2;
-    background-color: rgb(0,0,0,0.2);
+    background-color: rgb(0, 0, 0, 0.2);
   }
-}
 
-.loader div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border: 8px solid $default-lt-player-white;
-  border-radius: 50%;
-  animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: $default-lt-player-white transparent transparent transparent;
-}
+  div {
+    position: absolute;
+    display: block;
+    width: calc((var(--_loader-dimensions) / 10) * 8);
+    height: calc((var(--_loader-dimensions) / 10) * 8);
+    margin: 8px;
+    border: 8px solid $default-lt-player-white;
+    border-radius: 50%;
+    animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: $default-lt-player-white transparent transparent transparent;
 
-.loader div:nth-child(1) {
-  animation-delay: -0.45s;
-}
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
 
-.loader div:nth-child(2) {
-  animation-delay: -0.3s;
-}
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
 
-.loader div:nth-child(3) {
-  animation-delay: -0.15s;
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+  }
 }
 
 @keyframes rotate {
@@ -68,3 +69,119 @@
     top: 35%;
   }
 }
+
+.lt-player-orientation--landscape {
+  .loader {
+    --_loader-dimensions: 40px;
+  }
+
+  &.lt-state-loader-active {
+    &.lt-state-captions-enabled {
+      .loader {
+        --_top-positon: 40%;
+        top: var(--_top-positon);
+        translate: -50% calc(var(--_top-positon) * -1);
+      }
+    }
+
+    &:not(&.lt-state-captions-enabled) {
+      .loader {
+        --_top-positon: 30%;
+        top: var(--_top-positon);
+        translate: -50% calc(var(--_top-positon) * -1);
+      }
+    }
+  }
+}
+
+@container landscape (width > 479px) {
+  .lt-player-orientation--landscape {
+    .loader {
+      --_loader-dimensions: 80px;
+    }
+
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 20%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 759px) {
+  .lt-player-orientation--landscape {
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 25%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 912px) {
+  .lt-player-orientation--landscape {
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 30%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 40%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}

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

@@ -18,10 +18,6 @@
   visibility: hidden;
 }
 
-.plyr--video {
-  background: transparent !important;
-}
-
 .plyr__video-wrapper {
   background: transparent !important;
 }

package/src/components/LTPlayerStatusFeedback.ts

@@ -64,5 +64,13 @@ export class LTPlayerStatusFeedback {
         this.removeClass("lt-state-controls-visible")
     }
 
+    setCaptionsEnabled() {
+        this.addClass("lt-state-captions-enabled")
+    }
+
+    clearCaptionsEnabled() {
+        this.removeClass("lt-state-captions-enabled")
+    }
+
 }
 

package/src/components/LTPlayerType.ts

@@ -239,6 +239,10 @@ export namespace LTPlayer {
 
             this.setEvents();
 
+            if (this.playerConfig.getCaptionsEnabled() === true) {
+                this.statusFeedbackService.setCaptionsEnabled()
+            }
+
             return true;
         }
 

package/src/components/captions/LTPlayerCaptions.ts

@@ -42,6 +42,7 @@ export class LTPlayerCaptionsManager {
         this.player.playerConfig.setCaptionsEnabled(true)
         this.player.plyr.currentTrack = 0;
         this.player.plyr.toggleCaptions(true)
+        this.player.statusFeedbackService.setCaptionsEnabled()
     }
 
     disableCaptions() {
@@ -49,6 +50,7 @@ export class LTPlayerCaptionsManager {
         this.player.plyr.currentTrack = -1;
         this.player.plyr.toggleCaptions(false)
         this.clearSubtitles()
+        this.player.statusFeedbackService.clearCaptionsEnabled()
     }
 
     clearSubtitles(): void {

package/src/components/events/LTPlayer.ts

@@ -56,34 +56,35 @@ export namespace LTPlayerEvents {
                 }
 
                 const volumeControl = controls.querySelector('.bottom-controller__volume_control');
-                const volumeButton = volumeControl.querySelector('.button-open');
-                const volumeBackground = volumeControl.querySelector('.volume_control__background');
-                const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
-                const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
-                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
+                if (volumeControl) {
+                    const volumeButton = volumeControl.querySelector('.button-open');
+                    const volumeBackground = volumeControl.querySelector('.volume_control__background');
+                    const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
+                    const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
 
 
-                if (volumeButton) {
-                    volumeButton.classList.remove('d-none');
-                }
+                    if (volumeButton) {
+                        volumeButton.classList.remove('d-none');
+                    }
 
-                if (volumeBackground) {
-                    volumeBackground.classList.add('d-none')
-                }
+                    if (volumeBackground) {
+                        volumeBackground.classList.add('d-none')
+                    }
 
-                if (volumeBackgroundArea) {
-                    volumeBackgroundArea.classList.add('d-none')
-                }
+                    if (volumeBackgroundArea) {
+                        volumeBackgroundArea.classList.add('d-none')
+                    }
 
-                if (volumeArea) {
-                    volumeArea.classList.remove('volume-area-open')
-                }
+                    if (volumeArea) {
+                        volumeArea.classList.remove('volume-area-open')
+                    }
 
-                if (volumeControl) {
-                    volumeControl.classList.remove('volume-area-open');
-                    volumeControl.classList.remove('volume-control-enable');
+                    if (volumeControl) {
+                        volumeControl.classList.remove('volume-area-open');
+                        volumeControl.classList.remove('volume-control-enable');
+                    }
                 }
-
+                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
                 if (controlsBackground) {
                     if (!controlsBackground.classList.contains('d-none')) {
                         controlsBackground.classList.add('d-none');
@@ -182,6 +183,8 @@ export namespace LTPlayerEvents {
             if (!instance.plyr.elements.container.classList.contains('plyr__poster-enabled')) {
                 instance.plyr.elements.container.classList.add('plyr__poster-enabled');
             }
+
+            instance.statusFeedbackService.clearLoading()
         }
 
     }

package/src/components/events/LTPlayerCommon.ts

@@ -21,6 +21,10 @@ export class LTPlayerCommon {
 
         this.plyr.on('play', function LTPlayerPlay(event) {
 
+            if (!instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
+                instance.plyr.elements.controls.classList.add('plyr__controls-enable');
+            }
+
             instance.desktopEvents.playPause(event);
 
             if (instance.additionalInfoService) {

package/src/components/events/LTPlayerDesktop.ts

@@ -35,6 +35,10 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let plyr: Plyr = this.plyr;
 
         plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.stopped === true) {
+                eventManager.endVideo()
+            }
+
             if (plyr.isEmbed) {
                 if (plyr.paused) {
                     return;

package/src/components/events/LTPlayerMobile.ts

@@ -35,6 +35,10 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.stopped === true) {
+                eventManager.endVideo()
+            }
+
             if (plyr.isEmbed) {
                 if (plyr.paused) {
                     return;