@latest-thinking/lt-player 1.1.0-y → 1.2.0-a

package/package.json

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

package/src/assets/sass/app.scss

@@ -36,6 +36,13 @@ body {
   display: flex;
   width: 100%;
 
+
+  &__player {
+    &--no-radius {
+      border-radius: 0 !important;
+    }
+  }
+
   .plyr--video {
     background: transparent;
   }

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

@@ -19,6 +19,7 @@
 
   .line-button {
     @extend %line-button;
+    display: none;
   }
 
   .settings-text {
@@ -383,6 +384,14 @@
             min-width: 60px;
             height: 34px;
             margin-left: 10px;
+
+            &:has(.subtitles-body__input-switch[disabled]) {
+              .subtitles-body {
+                &__slider {
+                  cursor: not-allowed;
+                }
+              }
+            }
           }
 
           &__input-switch {
@@ -500,4 +509,4 @@
       }
     }
   }
-}
+}

package/src/components/captions/LTPlayerCaptions.ts

@@ -7,6 +7,18 @@ export class LTPlayerCaptionsManager {
         this.player = player;
     }
 
+    enableSubtitlesCheckbox() {
+        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
+        const subtitleCheckboxInput = playerContainer.querySelector('.subtitles-body__input-switch')
+        subtitleCheckboxInput.removeAttribute('disabled')
+    }
+
+    disableSubtitlesCheckbox() {
+        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
+        const subtitleCheckboxInput = playerContainer.querySelector('.subtitles-body__input-switch')
+        subtitleCheckboxInput.setAttribute('disabled', '')
+    }
+
     setCaptions(src: string|null): void {
         const playerContainer = this.player.playerConfig.getPlayerElementContainer()
         const videoElement = playerContainer.querySelector("video")
@@ -32,9 +44,11 @@ export class LTPlayerCaptionsManager {
             newTrack.addEventListener(`load`, evt => {
                 this.player.plyr.currentTrack = 0;
             });
-
+            this.enableSubtitlesCheckbox()
             this.player.plyr.toggleCaptions(true);
             videoElement.appendChild(newTrack);
+        } else {
+            this.disableSubtitlesCheckbox()
         }
     }
 

package/src/components/config/LTPlayerConfig.ts

@@ -271,5 +271,10 @@ export class LTPlayerConfig {
     setCaptionsEnabled(status: boolean) {
         this.configData.captionsEnabled = status
     }
+
+    hasCaptionsUrl(): boolean {
+        const defaultConfig = this.getDefaultConfigItems();
+        return !!(defaultConfig.captions.url)
+    }
 }
 

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

@@ -13,7 +13,9 @@ export class LTPlayerCommonSettingsControllers {
             {
                 id : this.instance.playerConfig.getPlayerId(),
                 [string] : true,
-                captions_enabled: this.instance.playerConfig.getCaptionsEnabled()
+                captions_enabled: this.instance.playerConfig.getCaptionsEnabled() &&
+                    this.instance.playerConfig.hasCaptionsUrl(),
+                captions_missing: !this.instance.playerConfig.hasCaptionsUrl()
             }
         );
         const lastElement = this.instance.plyr.elements.controls.lastElementChild;

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

@@ -89,7 +89,9 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         let settingsDialog = this.settingsInstance.playerInstance.templateService.getMobileSettings(
             {
                 id : this.settingsInstance.playerInstance.playerConfig.getPlayerId(),
-                captions_enabled: this.settingsInstance.playerInstance.playerConfig.getCaptionsEnabled()
+                captions_enabled: this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl() &&
+                    this.settingsInstance.playerInstance.playerConfig.getCaptionsEnabled(),
+                captions_missing: !this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl()
             }
         );
         const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()

package/src/components/events/LTPlayerCommon.ts

@@ -14,6 +14,7 @@ export class LTPlayerCommon {
         this.plyrOnPlaying()
         this.plyrOnSeeking()
         this.plyrOnControlsShown()
+        this.plyrOnCanplay()
     }
 
     playerPlay() {
@@ -232,6 +233,14 @@ export class LTPlayerCommon {
         })
     }
 
+    plyrOnCanplay() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('canplay', () => {
+            instance.statusFeedbackService.clearLoading()
+        })
+    }
+
     plyrOnControlsShown() {
         const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         const plyr: Plyr = this.plyr;

package/src/views/settings.handlebars

@@ -4,7 +4,7 @@
         <div class="settings-controllers-enable__subtitles settings">
             <p class="settings-text settings">Subtitles</p>
             <label class="subtitles-body__switch settings">
-                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" {{#captions_enabled }}checked{{/captions_enabled}} type="checkbox">
+                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" {{#captions_enabled }}checked{{/captions_enabled}} {{#captions_missing}}disabled{{/captions_missing}} type="checkbox">
                 <label for="captions-lt-player-{{id}}" class="subtitles-body__slider settings"></label>
             </label>
         </div>

package/src/views/settings.mobile.handlebars

@@ -4,7 +4,7 @@
         <div class="settings-controllers-enable__subtitles settings">
             <p class="settings-text settings">Subtitles</p>
             <label class="subtitles-body__switch settings">
-                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" {{#captions_enabled }}checked{{/captions_enabled}} type="checkbox">
+                <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" {{#captions_enabled }}checked{{/captions_enabled}} {{#captions_missing}}disabled{{/captions_missing}} type="checkbox">
                 <label for="captions-lt-player-{{id}}" class="subtitles-body__slider settings"></label>
             </label>
         </div>