@latest-thinking/lt-player 1.1.0 → 1.2.0

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

@@ -1,40 +1,35 @@
 @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;
-    }
-
-    .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;
+    display: none;
+  }
+
+  .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 +37,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 +184,7 @@
     }
 
     &__button-save {
-      padding: 16px 24px 0 24px;
+      padding: 16px 20px 20px 20px;
       color: black;
       display: flex;
       justify-content: left;
@@ -255,11 +232,9 @@
       left: 0;
       background: $default-lt-player-white;
       border-radius: 0 0 0 30px;
-      padding: 0 0 32px 0;
       bottom: 0;
       opacity: 0;
 
-
       .line-button {
         @extend %line-button;
       }
@@ -517,7 +492,7 @@
         border: none;
 
         &__subtitles {
-          padding: 16px 24px 24px;
+          padding: 16px 24px 0 24px;
         }
 
         .line-button {

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

@@ -1,30 +1,85 @@
-.lt-player-landscape--mobile,
-.lt-player-landscape--desktop {
-  &.lt-player--landscape {
-    &__xxs {
-      .plyr {
-        .plyr__caption {
-          font-size: $lt-player-font-size-base !important;
-        }
-      }
+.plyr__caption {
+  display: none;
+
+  span {
+    &:empty {
+      display: none;
     }
   }
 }
 
-.plyr__caption {
-  display: flex!important;
-  justify-content: center!important;
-  margin: auto!important;
-  width: 75%;
-  color: $default-lt-player-white !important;
-  background-color: $default-lt-player-black !important;
-  font-size: $lt-player-font-size-lg !important;
-  line-height: $lt-player-line-height !important;
-  padding: 8px 12px !important;
-  font-family: $lt-font-family-base !important;
-  white-space: unset !important;
+.lt-player-custom-captions {
+  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 {
+    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;
+    color: $default-lt-player-black;
+    white-space: unset;
+    box-decoration-break: clone;
+    padding: 0 16px;
+
+    &:empty {
+      padding: 0;
+    }
+  }
+}
+
+.lt-player-orientation--portrait {
+  .lt-player-custom-captions {
+    margin: 0 0 16px 0;
+  }
+}
+
+.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;
+    }
+  }
+
+  &.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;
+    }
+  }
 }
 
-.plyr__captions span:empty {
-  display: none!important;
+@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;
+      }
+    }
+
+    &.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

@@ -5,23 +5,23 @@
     z-index: 9;
 
     &--wrapper {
-      position: absolute;
       width: 100%;
       padding: 0 10px;
-      bottom: 50px;
+      display: none;
+    }
+
+    &--wrapper-enable {
+      display: block;
     }
   }
 
   &__controls {
     .bottom-controller {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 36%;
-      display: flex;
+      display: none;
       justify-content: space-between;
       align-items: flex-end;
       padding: 15px 10px;
+      width: 100%;
       max-width: 100%;
 
       button {
@@ -104,7 +104,8 @@
         align-items: flex-end;
         margin-top: 0;
         margin-bottom: 0;
-        width: 75px;
+        width: 80px;
+        white-space: nowrap;
         font-size: $lt-player-font-size-sm;
         font-weight: $lt-player-font-weight-sm;
         color: $default-lt-player-white !important;
@@ -117,7 +118,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 {
@@ -153,7 +154,7 @@
       }
 
       .volume-control-enable {
-        position: relative;
+        position: absolute;
         display: flex;
         height: 200px;
         justify-content: center;
@@ -231,6 +232,10 @@
         }
       }
     }
+
+    .bottom-controller-enable {
+      display: flex;
+    }
   }
 
   .fade-animation-controllers {
@@ -267,16 +272,13 @@
   .plyr {
     &__progress {
       &--wrapper {
-        width: 100%;
         padding: 0 16px;
-        position: absolute;
-        bottom: 56px;
       }
     }
 
     &__controls {
       .bottom-controller {
-        padding: 16px;
+        padding: 0 16px 20px;
 
         button {
           @include buttons-xs;
@@ -310,6 +312,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) {
@@ -318,13 +346,12 @@
       &__progress {
         &--wrapper {
           padding: 0 20px;
-          bottom: 84px;
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 20px 20px 28px 20px;
+          padding: 0 20px 28px 20px;
 
           button {
             @include buttons-normal;
@@ -367,14 +394,17 @@
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 20px;
-          bottom: 65px;
+          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;
@@ -395,13 +425,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 {
@@ -414,6 +444,7 @@
 
           &__volume_control {
             display: flex;
+            left: 80px;
           }
 
           .mini-player-control {
@@ -430,31 +461,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;
-          bottom: 81px;
+          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 {
@@ -465,6 +483,10 @@
             gap: 32px;
           }
 
+          &__volume_control {
+            left: 100px;
+          }
+
           &__next-chapter-view,
           &__previous-chapter-view {
             font-size: $lt-player-font-size-lg2;
@@ -491,6 +513,7 @@
           &__previous-chapter-view,
           &__next-chapter-view {
             display: flex;
+            gap: 8px;
           }
         }
       }

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

@@ -2,12 +2,6 @@
 
 .lt-player-notification {
   width: 100%;
-  height: 100%;
-  display: flex;
-
-  &.portrait {
-    position: relative;
-  }
 
   &__notification-button-state {
     position: absolute;
@@ -32,11 +26,9 @@
   }
 
   .lt-player-video-content {
-    position: absolute;
-    bottom: 110px;
     text-align: left;
-    display: flex;
-    padding: 0 16px;
+    display: none;
+    padding: 0;
     width: 100%;
     user-select: none;
     align-items: end;
@@ -79,6 +71,10 @@
     }
   }
 
+  .lt-player-video-content-enable {
+    display: flex;
+  }
+
   .poster-paragraph__button {
     background: none;
     box-shadow: none;
@@ -98,9 +94,19 @@
   .lt-player-rewind-area,
   .lt-player-forward-area {
     touch-action: inherit !important;
-    width: 100%;
+    width: 50%;
     height: 100%;
     z-index: 4;
+    position: absolute;
+    top: 0;
+  }
+
+  .lt-player-forward-area {
+    right: 0;
+  }
+
+  .lt-player-rewind-area {
+    left: 0;
   }
 
   .lt-player-rewind,
@@ -221,13 +227,22 @@
   }
 }
 
+.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 {
       .lt-player-video-content {
-        padding: 0 20px;
-        bottom: 136px;
-
         .poster-title {
           @extend %line-clamp-3;
           @include line-clamp-3;

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

@@ -14,7 +14,7 @@
     .top-controllers {
       width: 100%;
       padding: 10px 10px 0;
-      position: absolute;
+      margin-bottom: auto;
 
       button {
         @extend %lt-player-btn;