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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.1.0-u",
+  "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;
 }
@@ -66,4 +62,10 @@
       display: none;
     }
   }
+}
+
+.lt-player-orientation--landscape {
+  .lt-player-wrapper {
+    object-fit: contain;
+  }
 }

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

@@ -1,40 +1,40 @@
 @import "../abstracts/variables";
 
-.lt-player-mobile-settings-modal {
-  .settings-controllers {
-    position: fixed;
-    width: 100%;
-    z-index: 10;
-    left: 0;
-    background: $default-lt-player-white;
-    padding: 0 0 32px 0;
-    bottom: 0;
-    transition:.3s;
-
-    .line-button {
-      @extend %line-button;
-    }
+body[modal-open-body] {
+  position: fixed;
+  width: 100%;
+  overflow-x: hidden;
+}
 
-    .settings-text {
-      font-size: $lt-player-font-size-base;
-      font-weight: $lt-player-font-weight-sm;
-      color: $default-lt-button-color !important;
-      margin: 0;
-    }
+.settings-dialog {
+  background: $default-lt-player-white;
+  padding: 0;
+  width: 100%;
+  max-width: 375px;
+  border: none;
+  z-index: 10;
+
+  &::backdrop {
+    background-color: rgba($default-lt-button-color, .75);
   }
 
-  .settings-controllers-enable {
-    position: absolute;
-    width: 100%;
-    z-index: 30;
-    left: 0;
-    background: $default-lt-player-white;
-    border-radius: 0 0 0 30px;
-    bottom: 0;
+  .settings-controllers {
     display: flex;
     flex-direction: column;
-    padding: 0 0 24px 0;
+  }
+
+  .line-button {
+    @extend %line-button;
+  }
+
+  .settings-text {
+    font-size: $lt-player-font-size-base;
+    font-weight: $lt-player-font-weight-sm;
+    color: $default-lt-button-color !important;
+    margin: 0;
+  }
 
+  .settings-controllers-enable {
     &__speed-range {
       padding: 24px 24px 0 24px;
       align-items: center;
@@ -42,30 +42,12 @@
       display: flex;
       position: relative;
 
-      .mobile {
-        display: flex;
-        width: 80%!important;
-      }
-
       .speed-range-input-body {
         color: $default-lt-player-black;
         width: 65%;
         margin-left: auto;
         position: relative;
 
-        button {
-          color: #27282A;
-          background-color: #D8D846;
-          width: 16%;
-          margin: 0 2px;
-        }
-
-        .button_active {
-          background-color: #27282A;
-          color: grey;
-        }
-
-
         output {
           font-size: $lt-player-font-size-base;
           font-weight: $lt-player-font-weight-lg;
@@ -207,7 +189,7 @@
     }
 
     &__button-save {
-      padding: 16px 24px 0 24px;
+      padding: 16px 20px 20px 20px;
       color: black;
       display: flex;
       justify-content: left;

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

@@ -42,6 +42,8 @@
 
 .lt-player-orientation--landscape {
   .lt-player-custom-captions {
+    line-height: $lt-player-line-height-default;
+
     span {
       font-size: $lt-player-font-size-sm;
       border-radius: 0;
@@ -66,6 +68,8 @@
 @container landscape (width > 639px) {
   .lt-player-orientation--landscape {
     .lt-player-custom-captions {
+      line-height: $lt-player-line-height;
+
       span {
         font-size: $lt-player-font-size-lg;
       }

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/controls/settings/LTPlayerMobileSettingsControllers.ts

@@ -94,6 +94,14 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         );
         const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
         playerElementContainer.insertAdjacentHTML('beforeend', settingsDialog)
+
+        const modal = this.getModal()
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                this.hideModal()
+            }
+        });
+
     }
 
     initCaptionsEvent() {

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;

package/src/services/TemplateService.ts

@@ -114,6 +114,8 @@ export class TemplateService {
                 break
         }
 
+        Object.assign(configData, {chaptersEnabled: (!!configData['chapters']) })
+
         let render = Mustache.render(controlsTemplate,configData);
 
         delete configData.mobile;

package/src/views/controls.handlebars

@@ -117,12 +117,14 @@
           </div>
         {{/desktop}}
         <div class="bottom-controller__center-buttons">
+          {{#chaptersEnabled}}
           <div class="bottom-controller__previous-chapter-view-wrapper">
             <p class="bottom-controller__previous-chapter-view"></p>
             <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
               <img class="filter" src="{{icons.skip-backward}}" alt="">
             </button>
           </div>
+          {{/chaptersEnabled}}
           {{#desktop}}
           <button type="button" class="plyr__control skip-backward-seconds" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.fast-backward}}" alt="">
@@ -139,12 +141,14 @@
             <img class="filter" src="{{icons.fast-forward}}" alt="">
           </button>
           {{/desktop}}
+          {{#chaptersEnabled}}
           <div class="bottom-controller__next-chapter-view-wrapper">
             <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
               <img class="filter" src="{{icons.skip-forward}}" alt="">
             </button>
             <p class="bottom-controller__next-chapter-view"></p>
           </div>
+          {{/chaptersEnabled}}
         </div>
         <div class="bottom-controller__right-buttons">
           {{#desktop}}
@@ -320,18 +324,22 @@
         </div>
         {{/desktop}}
         <div class="bottom-controller__center-buttons">
+          {{#chaptersEnabled}}
           <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.skip-backward}}" alt="">
           </button>
+          {{/chaptersEnabled}}
           <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
             <button type="button" class="plyr__control play-button">
               <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
               <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
             </button>
           </div>
+          {{#chaptersEnabled}}
           <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.skip-forward}}" alt="">
           </button>
+          {{/chaptersEnabled}}
         </div>
         {{#mobile}}
         <div class="bottom-controller__right-buttons">

package/src/views/settings.mobile.handlebars

@@ -1,4 +1,5 @@
-<dialog class="settings-controllers settings">
+<dialog class="settings-dialog">
+<div class="settings-controllers settings">
     <span class="line-button settings-controllers-header"></span>
         <div class="settings-controllers-enable__subtitles settings">
             <p class="settings-text settings">Subtitles</p>
@@ -17,4 +18,5 @@
     <div class="settings-controllers-enable__button-save settings">
         <button class="button-save settings">Save</button>
     </div>
+</div>
 </dialog>