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

package/src/views/controls.handlebars

@@ -20,7 +20,6 @@
           <div class="top-controllers__body__left">
           </div>
           <div class="top-controllers__body__center">
-            <p class="chapter"></p>
           </div>
           <div class="top-controllers__body__right">
             {{#isShare}}
@@ -32,6 +31,7 @@
         </div>
       </div>
       <div class="lt-player-notification landscape">
+          <div class="lt-player-custom-captions"><span></span></div>
         <!--                <div class="lt-player-video-content">-->
         <!--                    <div class="content__body">-->
         <!--                        <h4 class="poster-title">{{videoParagraph}}</h4>-->
@@ -39,6 +39,7 @@
         <!--                    </div>-->
         <!--                </div>-->
         <div class="lt-player-notification__notification-button-state landscape">
+
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -116,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="">
@@ -138,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}}
@@ -167,6 +172,7 @@
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
             <div class="lt-player-notification portrait">
+                <div class="lt-player-custom-captions"><span></span></div>
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">
@@ -206,7 +212,6 @@
             {{/isShare}}
           </div>
           <div class="top-controllers__body__center">
-            <p class="chapter"></p>
           </div>
             <div class="top-controllers__body__right">
                 {{#desktop}}
@@ -231,6 +236,7 @@
         </div>
       </div>
       <div class="lt-player-notification portrait">
+          <div class="lt-player-custom-captions"><span></span></div>
         <div class="lt-player-notification__notification-button-state portrait">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
@@ -244,7 +250,7 @@
             </div>
           </div>
         </div>
-      <button class="poster-paragraph__button">Read more</button>
+<!--      <button class="poster-paragraph__button">Read more</button>-->
         <div class="lt-player-rewind-area">
         </div>
         <div class="lt-player-rewind lt-player-notify">
@@ -318,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">
@@ -350,6 +360,7 @@
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
             <div class="lt-player-notification portrait">
+                <div class="lt-player-custom-captions"><span></span></div>
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">

package/src/views/poster.handlebars

@@ -11,8 +11,8 @@
         <img src="{{config.logo}}" alt="logo">
       </div>
       <div class="content__body">
-        <div class="poster-title">{{config.configData.videoParagraph}}</div>
-        <div class="poster-paragraph">{{config.configData.videoTitle}}</div>
+        <div class="poster-title">{{config.configData.videoTitle}}</div>
+        <div class="poster-paragraph">{{config.configData.videoParagraph}}</div>
       </div>
       <div class="content__footer">
         <div class="poster-buttons">

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" value="" 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

@@ -0,0 +1,22 @@
+<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>
+            <label class="subtitles-body__switch settings">
+                <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>
+        <div class="settings-controllers-enable__speed-range settings">
+            <p class="settings-text settings">Speed</p>
+            <div class="speed-range-input-body settings">
+                <output class="settings speed-range-value" style="display: flex; justify-content: center" id="speed-range-value-{{id}}"></output>
+                <input id="speed-range-{{id}}" type="range"  min="0" max="3" step="1" class="speed-range-input settings">
+            </div>
+        </div>
+    <div class="settings-controllers-enable__button-save settings">
+        <button class="button-save settings">Save</button>
+    </div>
+</div>
+</dialog>

package/src/views/template.handlebars

@@ -3,10 +3,13 @@
 </div>
 {{/embedded}}
 {{#video}}
-<video class="embed_player lt-player-wrapper" playsinline controls crossorigin preload="none">
+<video class="embed_player lt-player-wrapper" playsinline muted controls crossorigin preload="none">
     <source src="{{videoUrl.videoUrl}}"/>
     {{#defaultConfig.captions}}
     <track kind="captions" label="{{label}} captions" src="{{url}}" srclang="{{srclang}}" {{default}} />
     {{/defaultConfig.captions}}
 </video>
+<div class="loader__backdrop">
+  <div class="loader"><div></div><div></div><div></div><div></div></div>
+</div>
 {{/video}}

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

@@ -1,46 +0,0 @@
-.lt-player-spinner {
-
-  &__loader {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    background: rgba(251,251,251,0.9);
-
-    &__circle-svg {
-      animation: rotate 2s linear infinite;
-      width: 50px;
-      height: 50px;
-
-      & .path {
-        stroke: $default_color_player;
-        stroke-linecap: round;
-        animation: dash 1.5s ease-in-out infinite;
-      }
-    }
-  }
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}