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

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

@@ -9,23 +9,24 @@
 }
 
 .lt-player-custom-captions {
-  margin-bottom: 16px;
+  display: inline-block;
+  background-color: rgba($default_color_player, 0.8);
+  margin: 0 $lt-player-padding-xxl / 2 16px $lt-player-padding-xxl / 2;
+  padding: 8px 12px;
+
+  &:is(:not(span)) {
+    padding: 0;
+  }
 
   span {
-    display: flex;
-    justify-content: center;
-    margin: auto;
-    width: 100%;
-    color: $default-lt-player-black;
-    background-color: rgba(216, 216, 70, 0.7);
+    font-family: $lt-font-family-base;
     font-size: $lt-player-font-size-lg;
     line-height: $lt-player-line-height;
     font-weight: $lt-player-font-weight-md;
-    padding: 8px 12px;
-    border-radius: 40px;
-    font-family: "MuseoSans", sans-serif;
+    color: $default-lt-player-black;
     white-space: unset;
     box-decoration-break: clone;
+    padding: 0 16px;
 
     &:empty {
       padding: 0;
@@ -33,10 +34,48 @@
   }
 }
 
+.lt-player-orientation--portrait {
+  .lt-player-custom-captions {
+    margin: 0 0 16px 0;
+  }
+}
+
+.lt-player-orientation--landscape {
+  .lt-player-custom-captions {
+    span {
+      font-size: $lt-player-font-size-sm;
+      border-radius: 0;
+    }
+  }
+
+  &.lt-state-controls-visible {
+    .lt-player-custom-captions {
+      display: none;
+    }
+  }
+}
+
 @container portrait (width < 319px) {
   .lt-player-custom-captions {
     span {
       font-size: $lt-player-font-size-sm;
     }
   }
-}
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    .lt-player-custom-captions {
+      span {
+        font-size: $lt-player-font-size-lg;
+      }
+    }
+
+    &.lt-state-controls-visible {
+      .lt-player-custom-captions {
+        margin: 0 $lt-player-padding-xxl 16px $lt-player-padding-xxl;
+        display: inline-block;
+      }
+    }
+  }
+}

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

@@ -117,7 +117,7 @@
         bottom: 0;
         height: 40%;
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
-        border-radius: 0 0 0 30px;
+        z-index: -1;
       }
 
       &__volume_control {
@@ -311,6 +311,32 @@
   }
 }
 
+.lt-player-orientation--landscape {
+  .plyr {
+    &__progress {
+      &--wrapper {
+        padding: 0 $lt-player-padding-xxl / 2;
+
+        .bottom-controller__current {
+          display: none;
+        }
+      }
+    }
+
+    &__controls {
+      .bottom-controller {
+        padding: 0 $lt-player-padding-xxl / 2 15px $lt-player-padding-xxl / 2;
+      }
+    }
+  }
+
+  &:not(.lt-state-controls-visible) {
+    .bottom-controller__background {
+      display: none;
+    }
+  }
+}
+
 // @Container Query
 
 @container portrait (width > 319px) {
@@ -367,13 +393,17 @@
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 20px;
+          padding: 0 $lt-player-padding-xxl / 2;
+
+          .bottom-controller__current {
+            display: flex;
+          }
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 25px 20px;
+          padding: 0 $lt-player-padding-xxl / 2 25px $lt-player-padding-xxl / 2;
 
           &__center-buttons {
             gap: 20px;
@@ -394,13 +424,13 @@
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 40px;
+          padding: 0 $lt-player-padding-xxl;
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 25px 40px;
+          padding: 0 $lt-player-padding-xxl 25px $lt-player-padding-xxl;
 
           &__left-buttons,
           &__right-buttons {
@@ -413,7 +443,7 @@
 
           &__volume_control {
             display: flex;
-            left: 100px;
+            left: 80px;
           }
 
           .mini-player-control {
@@ -430,30 +460,18 @@
   }
 }
 
-@container landscape (width > 759px) {
-  .lt-player-orientation--landscape {
-    .plyr {
-      &__controls {
-        .bottom-controller {
-
-        }
-      }
-    }
-  }
-}
-
 @container landscape (width > 912px) {
   .lt-player-orientation--landscape {
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 40px;
+          padding: 0 $lt-player-padding-xxl;
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 28px 40px;
+          padding: 0 $lt-player-padding-xxl 28px $lt-player-padding-xxl;
 
           &__left-buttons,
           &__right-buttons {
@@ -464,6 +482,10 @@
             gap: 32px;
           }
 
+          &__volume_control {
+            left: 100px;
+          }
+
           &__next-chapter-view,
           &__previous-chapter-view {
             font-size: $lt-player-font-size-lg2;
@@ -490,6 +512,7 @@
           &__previous-chapter-view,
           &__next-chapter-view {
             display: flex;
+            gap: 8px;
           }
         }
       }

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

@@ -2,7 +2,6 @@
 
 .lt-player-notification {
   width: 100%;
-  padding: 20px 20px 28px 20px;
 
   &__notification-button-state {
     position: absolute;
@@ -228,6 +227,18 @@
   }
 }
 
+.lt-player-orientation--portrait {
+  .lt-player-notification {
+    padding: 20px 20px 28px 20px;
+  }
+}
+
+.lt-player-orientation--landscape {
+  .lt-player-notification {
+    padding: 0;
+  }
+}
+
 @container portrait (width > 319px) {
   .lt-player-orientation--portrait {
     .lt-player-notification {

package/src/components/LTPlayerStatusFeedback.ts

@@ -0,0 +1,68 @@
+import {LTPlayerController} from "../global/controllers/LTPlayerController";
+
+export class LTPlayerStatusFeedback {
+
+    player: LTPlayerController
+    element: HTMLElement
+
+    constructor(player: LTPlayerController) {
+        this.player = player;
+    }
+
+    private getElement(): HTMLElement {
+        if (!this.element) {
+            if (this.player.playerConfig) {
+                this.element = this.player.playerConfig.getPlayerElementContainer()
+            } else {
+                console.error("Failed to get element from playerConfig")
+            }
+        }
+        return this.element
+    }
+
+    private addClass(name: string) {
+        const element = this.getElement()
+        if (element && !element.classList.contains(name)) {
+            element.classList.add(name)
+        }
+    }
+
+    private removeClass(name: string) {
+        const element = this.getElement()
+        if (element && element.classList.contains(name)) {
+            element.classList.remove(name)
+        }
+    }
+
+    setLoading() {
+        this.addClass("lt-state-loader-active")
+    }
+
+    setLoadingSeek() {
+        this.addClass("lt-state-seeking")
+        this.setLoading()
+    }
+
+    clearLoading() {
+        this.removeClass("lt-state-loader-active")
+        this.removeClass("lt-state-seeking")
+    }
+
+    setFullscreen() {
+        this.addClass("lt-state-fullscreen")
+    }
+
+    clearFullscreen() {
+        this.removeClass("lt-state-fullscreen")
+    }
+
+    setControlsVisible() {
+        this.addClass("lt-state-controls-visible")
+    }
+
+    clearControlsVisible() {
+        this.removeClass("lt-state-controls-visible")
+    }
+
+}
+

package/src/components/captions/LTPlayerCaptions.ts

@@ -13,7 +13,7 @@ export class LTPlayerCaptionsManager {
         const trackElement = videoElement.querySelector("track")
 
         this.player.plyr.currentTrack = -1;
-        this.player.eventInstance.desktopEvents.clearSubtitles()
+        this.clearSubtitles()
 
         if (trackElement) {
             trackElement.remove()
@@ -37,4 +37,28 @@ export class LTPlayerCaptionsManager {
             videoElement.appendChild(newTrack);
         }
     }
+
+    enableCaptions() {
+        this.player.playerConfig.setCaptionsEnabled(true)
+        this.player.plyr.currentTrack = 0;
+        this.player.plyr.toggleCaptions(true)
+    }
+
+    disableCaptions() {
+        this.player.playerConfig.setCaptionsEnabled(false)
+        this.player.plyr.currentTrack = -1;
+        this.player.plyr.toggleCaptions(false)
+        this.clearSubtitles()
+    }
+
+    clearSubtitles(): void {
+        const controls = this.player.plyr.elements.controls
+        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
+        const spanElement = customSubtitlesElement.querySelector('span');
+
+        if (!spanElement) {
+            return;
+        }
+        spanElement.innerHTML = ''; // Clear previous captions
+    }
 }

package/src/components/config/LTPlayerConfig.ts

@@ -31,6 +31,7 @@ export class LTPlayerConfig {
             'playsinline': true,
         },
         defaultConfig : false,
+        captionsEnabled: false,
         share: null,
         chapters : null,
         playerType: null,
@@ -262,5 +263,13 @@ export class LTPlayerConfig {
     getEmbed() {
         return this.configData.embed;
     }
+
+    getCaptionsEnabled(): boolean {
+        return this.configData.captionsEnabled
+    }
+
+    setCaptionsEnabled(status: boolean) {
+        this.configData.captionsEnabled = status
+    }
 }
 

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -201,55 +201,54 @@ export namespace LTPlayerControlsEvents {
             }
         }
 
-        showHideControls = {
-            showHideText(visible: boolean, controls: HTMLElement) {
-                const textControlsElement = controls.querySelector('.lt-player-video-content');
-
-                if (textControlsElement) {
-                    if (visible) {
-                        if (!textControlsElement.classList.contains('lt-player-video-content-enable')) {
-                            textControlsElement.classList.add('lt-player-video-content-enable')
-                        }
-                    } else {
-                        textControlsElement.classList.remove('lt-player-video-content-enable')
+        showHideText(visible: boolean, controls: HTMLElement) {
+            const textControlsElement = controls.querySelector('.lt-player-video-content');
+
+            if (textControlsElement) {
+                if (visible) {
+                    if (!textControlsElement.classList.contains('lt-player-video-content-enable')) {
+                        textControlsElement.classList.add('lt-player-video-content-enable')
                     }
+                } else {
+                    textControlsElement.classList.remove('lt-player-video-content-enable')
                 }
-            },
+            }
+        }
 
-            showHideSeekBar(visible: boolean, controls: HTMLElement) {
-                const seekBarControlsElement = controls.querySelector('.plyr__progress--wrapper');
+        showHideSeekBar(visible: boolean, controls: HTMLElement) {
+            const seekBarControlsElement = controls.querySelector('.plyr__progress--wrapper');
 
-                if (seekBarControlsElement) {
-                    if (visible) {
-                        if (!seekBarControlsElement.classList.contains('plyr__progress--wrapper-enable')) {
-                            seekBarControlsElement.classList.add('plyr__progress--wrapper-enable')
-                        }
-                    } else {
-                        seekBarControlsElement.classList.remove('plyr__progress--wrapper-enable')
+            if (seekBarControlsElement) {
+                if (visible) {
+                    if (!seekBarControlsElement.classList.contains('plyr__progress--wrapper-enable')) {
+                        seekBarControlsElement.classList.add('plyr__progress--wrapper-enable')
                     }
+                } else {
+                    seekBarControlsElement.classList.remove('plyr__progress--wrapper-enable')
                 }
-            },
+            }
+        }
 
-            showHideBottomControls(visible: boolean, controls: HTMLElement) {
-                const bottomControlsElement = controls.querySelector('.bottom-controller');
+        showHideBottomControls(visible: boolean, controls: HTMLElement) {
+            const bottomControlsElement = controls.querySelector('.bottom-controller');
 
-                if (bottomControlsElement) {
-                    if (visible) {
-                        if (!bottomControlsElement.classList.contains('bottom-controller-enable')) {
-                            bottomControlsElement.classList.add('bottom-controller-enable')
-                        }
-                    } else {
-                        bottomControlsElement.classList.remove('bottom-controller-enable')
+            if (bottomControlsElement) {
+                if (visible) {
+                    if (!bottomControlsElement.classList.contains('bottom-controller-enable')) {
+                        bottomControlsElement.classList.add('bottom-controller-enable')
                     }
+                } else {
+                    bottomControlsElement.classList.remove('bottom-controller-enable')
                 }
-            },
-
-            showHideOnPause(visible: boolean, controls: HTMLElement) {
-                this.showHideBottomControls(visible, controls);
-                this.showHideSeekBar(visible, controls);
-                this.showHideBottomControls(visible, controls);
             }
         }
+
+        showHideAllControls(visible: boolean, controls: HTMLElement) {
+            this.showHideText(visible, controls);
+            this.showHideSeekBar(visible, controls);
+            this.showHideBottomControls(visible, controls);
+        }
+
     }
 
     export class Desktop {
@@ -272,11 +271,11 @@ export namespace LTPlayerControlsEvents {
             const controls = instance.plyr.elements.controls;
             const commonInstance = this.common;
             controls.classList.add('plyr__controls-enable');
+            instance.statusFeedbackService.setControlsVisible()
 
-
-            commonInstance.showHideControls.showHideText(true, controls);
-            commonInstance.showHideControls.showHideSeekBar(true, controls);
-            commonInstance.showHideControls.showHideBottomControls(true, controls);
+            commonInstance.showHideText(true, controls);
+            commonInstance.showHideSeekBar(true, controls);
+            commonInstance.showHideBottomControls(true, controls);
 
             let timerText: NodeJS.Timeout = null;
             let timerSeekBar: NodeJS.Timeout = null;
@@ -297,20 +296,20 @@ export namespace LTPlayerControlsEvents {
                 }
 
                 if (instance.plyr.paused) {
-                    commonInstance.showHideControls.showHideOnPause(true, controls);
+                    commonInstance.showHideAllControls(true, controls);
                     return;
                 }
 
                 if (!instance.playerConfig.isPinTextControls()) {
-                    commonInstance.showHideControls.showHideText(true, controls);
+                    commonInstance.showHideText(true, controls);
                 }
 
                 if (!instance.playerConfig.isPinSeekBarControls()) {
-                    commonInstance.showHideControls.showHideSeekBar(true, controls);
+                    commonInstance.showHideSeekBar(true, controls);
                 }
 
                 if (!instance.playerConfig.isPinBottomControls()) {
-                    commonInstance.showHideControls.showHideBottomControls(true, controls);
+                    commonInstance.showHideBottomControls(true, controls);
                 }
 
             })
@@ -318,25 +317,26 @@ export namespace LTPlayerControlsEvents {
 
             controls.addEventListener('mouseleave', function () {
                 if (instance.plyr.paused) {
-                    commonInstance.showHideControls.showHideOnPause(true, controls);
+                    commonInstance.showHideAllControls(true, controls);
                     return;
                 }
 
                 if (!instance.playerConfig.isPinTextControls()) {
                     timerText = setTimeout(() => {
-                        commonInstance.showHideControls.showHideText(false, controls);
+                        commonInstance.showHideText(false, controls);
                     }, 5000)
                 }
 
                 if (!instance.playerConfig.isPinSeekBarControls()) {
                     timerSeekBar = setTimeout(() => {
-                        commonInstance.showHideControls.showHideSeekBar(false, controls);
+                        commonInstance.showHideSeekBar(false, controls);
 
                     }, 5000)
                 }
                 if (!instance.playerConfig.isPinBottomControls()) {
                     timerBottomControls = setTimeout(() => {
-                        commonInstance.showHideControls.showHideBottomControls(false, controls);
+                        instance.statusFeedbackService.clearControlsVisible()
+                        commonInstance.showHideBottomControls(false, controls);
                     }, 5000)
                 }
             })
@@ -668,6 +668,8 @@ export namespace LTPlayerControlsEvents {
 
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
+            instance.statusFeedbackService.setControlsVisible()
+
             if (playerContainer.classList.contains('plyr--hide-controls')) {
                 playerContainer.classList.remove('plyr--hide-controls');
             }
@@ -688,13 +690,13 @@ export namespace LTPlayerControlsEvents {
                 clearTimeout(this.controlsTimeOut);
             }
 
-            commonInstance.showHideControls.showHideText(true, playerControlsContainer);
-            commonInstance.showHideControls.showHideSeekBar(true, playerControlsContainer);
-            commonInstance.showHideControls.showHideBottomControls(true, playerControlsContainer);
+            commonInstance.showHideText(true, playerControlsContainer);
+            commonInstance.showHideSeekBar(true, playerControlsContainer);
+            commonInstance.showHideBottomControls(true, playerControlsContainer);
 
 
             if (instance.plyr.paused) {
-                commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                commonInstance.showHideAllControls(true, playerControlsContainer);
                 return;
             }
 
@@ -709,24 +711,27 @@ export namespace LTPlayerControlsEvents {
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
             const showHideControls = () => {
+                instance.statusFeedbackService.clearControlsVisible()
+
                 if (!instance.playerConfig.isPinTextControls()) {
-                    commonInstance.showHideControls.showHideText(false, playerControlsContainer);
+                    commonInstance.showHideText(false, playerControlsContainer);
                 }
 
                 if (!instance.playerConfig.isPinSeekBarControls()) {
-                    commonInstance.showHideControls.showHideSeekBar(false, playerControlsContainer);
+                    commonInstance.showHideSeekBar(false, playerControlsContainer);
                 }
                 if (!instance.playerConfig.isPinBottomControls()) {
-                    commonInstance.showHideControls.showHideBottomControls(false, playerControlsContainer);
+                    commonInstance.showHideBottomControls(false, playerControlsContainer);
                 }
             }
 
+
             if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
 
                 if (now) {
 
                     if (instance.plyr.paused) {
-                        commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                        commonInstance.showHideAllControls(true, playerControlsContainer);
                         return;
                     }
 
@@ -742,7 +747,7 @@ export namespace LTPlayerControlsEvents {
                         // playerContainer.classList.add('plyr--hide-controls');
 
                         if (instance.plyr.paused) {
-                            commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                            commonInstance.showHideAllControls(true, playerControlsContainer);
                             return;
                         }
 

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

@@ -9,7 +9,13 @@ export class LTPlayerCommonSettingsControllers {
     }
 
     addSettingsTemplate(string: 'mobile' | 'desktop') {
-        const settingsTemplate = this.instance.templateService.getSettings({id : this.instance.playerConfig.getPlayerId(), [string] : true});
+        const settingsTemplate = this.instance.templateService.getSettings(
+            {
+                id : this.instance.playerConfig.getPlayerId(),
+                [string] : true,
+                captions_enabled: this.instance.playerConfig.getCaptionsEnabled()
+            }
+        );
         const lastElement = this.instance.plyr.elements.controls.lastElementChild;
 
         if (lastElement) {

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

@@ -33,18 +33,17 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
 
         const selectors = this.settingsInstance.common.getSelectors();
 
-        const checkBox = selectors.playerControlsContainer.querySelector(`#captions-lt-player-${this.settingsInstance.playerInstance.playerConfig.getPlayerId()}`) as HTMLInputElement;
+        const checkBox = selectors.playerControlsContainer.querySelector(`.subtitles-body__input-switch`) as HTMLInputElement;
 
         if (checkBox) {
             checkBox.addEventListener('change', () => {
 
                 if (!checkBox.checked) {
-                    this.settingsInstance.player.toggleCaptions(false);
-                    return
+                    this.settingsInstance.playerInstance.captionsService.disableCaptions();
+                } else {
+                    this.settingsInstance.playerInstance.captionsService.enableCaptions();
                 }
 
-                this.settingsInstance.player.toggleCaptions(true);
-
             })
         }
     }