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

package/package.json

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

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

@@ -66,4 +66,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/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/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>