@latest-thinking/lt-player 1.0.4-m → 1.0.4-o

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.4-m",
+  "version": "1.0.4-o",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

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

@@ -28,11 +28,36 @@
 
   &__controls {
 
+    touch-action: inherit!important;
+
     &__mobile-background {
+      touch-action: inherit!important;
       position: absolute;
       width: 100%;
       height: 100%;
       z-index: 9999;
+
+      .lt-player-notification {
+        .lt-player-rewind {
+          height: 100%;
+          top: 0;
+        }
+
+        .lt-player-rewind__icon__portrait {
+          margin: auto auto auto 2rem;
+        }
+
+        .lt-player-forward {
+          height: 100%;
+          top: 0;
+        }
+
+        .lt-player-forward__icon__portrait {
+          margin: auto 2rem auto auto;
+        }
+      }
+
+
     }
 
     &__shortcut-area {

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

@@ -117,6 +117,8 @@
           display: flex;
           flex-direction: column;
           justify-content: space-between;
+          position: absolute;
+          bottom: 0;
 
           &__header {
             padding: 1.5rem;
@@ -157,6 +159,7 @@
               font-size: $lt-player-font-size-xxl;
               margin: 0;
               color: $default-lt-player-white !important;
+              display: block;
             }
           }
 

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

@@ -345,7 +345,7 @@
         top: 0;
         background: #27282A;
         opacity: 0.75;
-        z-index: 5;
+        z-index: 10;
       }
     }
   }

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

@@ -11,3 +11,7 @@
   font-family: $lt-font-family-base !important;
   white-space: unset !important;
 }
+
+.plyr__captions span:empty {
+  display: none!important;
+}

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

@@ -80,7 +80,7 @@
           .bottom-controller {
             .play-button {
               padding: .75rem;
-              bottom: 0;
+              bottom: -2px;
             }
 
             &__center-buttons {
@@ -97,7 +97,7 @@
           .bottom-controller {
             .play-button {
               padding: .75rem;
-              bottom: 0;
+              bottom: -2px;
             }
 
             &__center-buttons {
@@ -129,7 +129,7 @@
 
             .play-button {
               padding: .75rem;
-              bottom: 0;
+              bottom: -2px;
             }
 
             .plyr__controls_speed-button {
@@ -251,10 +251,14 @@
         white-space: nowrap;
         font-size: 12px;
         transition: none;
+        outline: none;
         background-color: $default-lt-player-blue;
 
         &:focus,
-        &:active {
+        &:active,
+        &:hover,
+        &:focus-visible {
+          outline: $default-lt-player-blue;
           background-color: $default-lt-player-blue;
         }
       }
@@ -269,9 +273,12 @@
       }
 
       &__play-button_body {
-        bottom: -8px;
         position: relative;
 
+        &__portrait {
+          bottom: -8px;
+        }
+
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;

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

@@ -12,7 +12,10 @@
           }
 
           .poster-paragraph {
-            font-size: .9rem;
+            &__content {
+              font-size: .9rem;
+            }
+
           }
         }
       }
@@ -70,6 +73,7 @@
     .content__body {
       z-index: 2;
       margin-top: auto;
+      width: 100%;
     }
 
     .poster-title {
@@ -83,14 +87,50 @@
     }
 
     .poster-paragraph {
-      font-weight: $lt-player-font-weight-sm;
-      color: $default-lt-player-white !important;
+
+      margin-bottom: 3rem;
+
+      &__content {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        font-weight: $lt-player-font-weight-sm;
+        color: $default-lt-player-white !important;
+        margin-bottom: 0;
+        max-height: 3.1rem;
+        transition: max-height 0.3s ease-in-out;
+      }
+
+      .open-content {
+        display: block;
+        transition: max-height 0.3s ease-in-out;
+      }
     }
+  }
 
+  .poster-paragraph__button {
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    border: none;
+    margin: 0;
+    text-decoration: none;
+    font-size: 0.8rem;
+    color: white;
+    cursor: pointer;
+    position: absolute;
+    bottom: 6rem;
+    right: 6rem;
+    z-index: 8;
   }
 
 
   .lt-player-rewind-area {
+    touch-action: inherit!important;
     width: 100%;
     height: 100%;
     z-index: 3;
@@ -98,14 +138,15 @@
 
   .lt-player-rewind {
     width: 50%;
-    height: 100%;
+    height: 130%;
+    top: -10rem;
     display:flex;
     flex-direction: row;
     position: absolute;
     text-align: center;
     border-radius:0 100% 100% 0;
     left: 0;
-    top: 0;
+
 
     &__icon-wrapper {
       display: flex;
@@ -125,9 +166,17 @@
       display: flex;
       justify-content:flex-start;
       align-items:center;
-      margin: auto;
+
       color: rgba(255,255,255, 1);
       user-select: none;
+
+      &__portrait {
+        margin: auto auto 18rem 3rem;
+      }
+
+      &__landscape {
+        margin: auto auto 13rem 4rem;
+      }
     }
 
     span {
@@ -138,6 +187,7 @@
   }
 
   .lt-player-forward-area {
+    touch-action: inherit!important;
     width: 100%;
     height: 100%;
     z-index: 4;
@@ -145,14 +195,14 @@
 
   .lt-player-forward {
     width: 50%;
-    height: 100%;
+    height: 130%;
+    top: -10rem;
     display:flex;
     flex-direction: row;
     position: absolute;
     text-align: center;
     border-radius:100% 0 0 100%;
     right: 0;
-    top: 0;
 
     &__icon-wrapper {
       display: flex;
@@ -171,8 +221,17 @@
       display: flex;
       justify-content:flex-start;
       align-items:center;
-      margin: auto;
+
       color: rgba(255,255,255, 1);
+
+      &__portrait {
+        margin: auto 3rem 18rem auto;
+      }
+
+      &__landscape {
+        margin: auto 4rem 13rem auto;
+      }
+
     }
 
     span{
@@ -183,7 +242,7 @@
 
 
   .lt-player-notify {
-    transition: background 0.2s;
+    transition: background 0.8s;
     //background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
     opacity: 0;
     //opacity: 1;

package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts

@@ -155,6 +155,8 @@ export namespace LTPlayerAdditionalInfo  {
                         window.Player.players.forEach( item => {item.plyr.pause()});
 
                         __this.dragCloseModal(controller);
+
+                        controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance)
                     })
                 }
             })
@@ -173,8 +175,7 @@ export namespace LTPlayerAdditionalInfo  {
                 if (playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
 
                     modal.style.removeProperty('bottom')
-                    playerControlsContainer.classList.remove('plyr__controls-enable-addInfo')
-
+                    playerControlsContainer.classList.remove('plyr__controls-enable-addInfo');
 
                     setTimeout(() => {
                         const modalBody = playerControlsContainer.querySelector('.player-lt__modal__mobile');

package/src/components/controls/LTPlayerChapters.ts

@@ -93,7 +93,7 @@ export class LTPlayerChapters {
                 return;
             }
             if (leftButton.dataset.ltPlayerChaptertimestamp) {
-                player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp);
+                player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp) + 0.1;
             }
         })
 
@@ -116,7 +116,7 @@ export class LTPlayerChapters {
             }
 
             if (rightButton.dataset.ltPlayerChaptertimestamp) {
-                player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp);
+                player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp) + 0.1;
             }
 
         })
@@ -140,8 +140,10 @@ export class LTPlayerChapters {
                         return;
                     }
                     if (leftButton.dataset.ltPlayerChaptertimestamp) {
-                        player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp);
+                        player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp) + 0.1;
                     }
+
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
             }
         }
@@ -167,8 +169,10 @@ export class LTPlayerChapters {
                     }
 
                     if (rightButton.dataset.ltPlayerChaptertimestamp) {
-                        player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp);
+                        player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp) + 0.1;
                     }
+
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
             }
         }