@latest-thinking/lt-player 1.0.6-b → 1.0.7

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

@@ -1,291 +1,14 @@
 @import "../../abstracts/variables";
 
-.lt-player-landscape--desktop,
-.lt-player-landscape--mobile {
-  .plyr {
-    &__controls {
-      .bottom-controller {
-        max-width: 100%;
-        padding: 28px 40px;
-
-        .play-button {
-          padding: 16px;
-          bottom: -5px;
-        }
-
-        &__left-buttons,
-        &__center-buttons,
-        &__right-buttons {
-          display: flex;
-          gap: 20px;
-          align-items: flex-end;
-        }
-
-        &__left-buttons {
-          margin-right: auto;
-          display: flex;
-          grid-template-columns: 1fr 1fr;
-          flex: 1;
-        }
-
-        &__center-buttons {
-          gap: 32px;
-        }
-
-        &__right-buttons {
-          margin-left: auto;
-          display: flex;
-          flex: 1;
-          justify-content: end;
-        }
-
-        &__previous-chapter-view-wrapper,
-        &__next-chapter-view-wrapper {
-          display: flex;
-          gap: 16px;
-          align-items: flex-end;
-        }
-
-        &__previous-chapter-view {
-          justify-content: flex-end;
-        }
-
-        &__next-chapter-view {
-          justify-content: flex-start;
-        }
-
-        &__next-chapter-view,
-        &__previous-chapter-view {
-          display: flex;
-          align-items: flex-end;
-          margin-bottom: 4px;
-          width: 100px;
-          font-size: $lt-player-font-size-lg;
-          color: $default-lt-player-white !important;
-        }
-
-        &__volume_control {
-          margin-right: auto;
-        }
-      }
-
-      .mini-player-control {
-        margin-left: auto;
-      }
-    }
-  }
-
-  &.lt-player--landscape {
-    &__lg {
-      .plyr {
-        &__controls {
-          .bottom-controller {
-            &__previous-chapter-view {
-              display: none;
-            }
-
-            &__next-chapter-view {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &__md {
-      .plyr {
-        &__controls {
-          .bottom-controller {
-            &__previous-chapter-view {
-              display: none;
-            }
-
-            &__next-chapter-view {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &__sm {
-      .plyr {
-        &__controls {
-          .bottom-controller {
-            &__center-buttons {
-              gap: 20px;
-            }
-
-            &__previous-chapter-view {
-              display: none;
-            }
-
-            &__next-chapter-view {
-              display: none;
-            }
-
-            .skip-backward-seconds,
-            .skip-forward-seconds {
-              display: flex;
-            }
-          }
-        }
-      }
-    }
-
-    &__xs {
-      .plyr {
-        &__controls {
-          .bottom-controller {
-            .plyr__controls_speed-button {
-              width: 32px;
-              height: 32px;
-              font-size: 10px;
-              transition: none;
-            }
-
-            &__left-buttons,
-            &__center-buttons,
-            &__right-buttons {
-              gap: 20px;
-            }
-
-            &__previous-chapter-view {
-              display: none;
-            }
-
-            &__next-chapter-view {
-              display: none;
-            }
-
-            .skip-backward-seconds,
-            .skip-forward-seconds {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &__xxs {
-      .plyr {
-        &__progress {
-          &--wrapper {
-            padding: 0 10px;
-            bottom: 50px;
-          }
-        }
-
-        &__controls {
-          .bottom-controller {
-            padding: 15px 10px;
-
-            .play-button {
-              padding: 12px;
-            }
-
-            .plyr__controls_speed-button {
-              width: 32px;
-              height: 32px;
-              font-size: 10px;
-              transition: none;
-            }
-
-            button {
-              @include buttons-xs;
-            }
-
-            &__left-buttons,
-            &__center-buttons,
-            &__right-buttons {
-              gap: 16px;
-            }
-
-            &__center-buttons {
-              gap: 20px;
-            }
-
-            &__previous-chapter-view {
-              display: none;
-            }
-
-            &__next-chapter-view {
-              display: none;
-            }
-
-            .skip-backward-seconds,
-            .skip-forward-seconds {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-landscape--desktop {
-  .plyr {
-    &__controls {
-      .bottom-controller {
-        &__right-buttons {
-          direction: unset;
-        }
-      }
-    }
-  }
-}
-
-.lt-player-portrate--mobile,
-.lt-player-portrate--desktop {
-  .plyr {
-    &__progress {
-      &--wrapper {
-        width: 100%;
-        padding: 0 25px;
-        position: absolute;
-        bottom: 90px;
-      }
-    }
-  }
-
-  &.lt-player--portrait {
-    &__xs {
-      .plyr {
-        &__controls {
-          .bottom-controller {
-            padding: 16px;
-
-            button {
-              @include buttons-xs;
-            }
-
-            .play-button {
-              padding: 12px;
-            }
-
-            .plyr__controls_speed-button {
-              width: 32px;
-              height: 32px;
-              font-size: 10px;
-              transition: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 .plyr {
   &__progress {
     z-index: 9;
 
     &--wrapper {
-      width: 100%;
-      padding: 0 40px;
       position: absolute;
-      bottom: 90px;
+      width: 100%;
+      padding: 0 10px;
+      bottom: 50px;
     }
   }
 
@@ -295,35 +18,75 @@
       bottom: 0;
       width: 100%;
       height: 36%;
-      max-width: 500px;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      padding: 24px;
+      padding: 15px 10px;
+      max-width: 100%;
 
       button {
         @extend %lt-player-btn;
         @include dark-btn;
+        @include buttons-xs;
         z-index: 10;
         flex: 0 0 auto;
       }
 
-      .plyr__controls_speed-button {
-        width: 44px;
-        height: 40px;
-        white-space: nowrap;
-        font-size: 12px;
-        transition: none;
-        outline: none;
-        background-color: $default-lt-player-blue;
-
-        &:focus,
-        &:active,
-        &:hover,
-        &:focus-visible {
-          outline: $default-lt-player-blue;
-          background-color: $default-lt-player-blue;
-        }
+      &__left-buttons {
+        margin-right: auto;
+        justify-content: start;
+        flex: 1;
+      }
+
+      &__left-buttons,
+      &__center-buttons,
+      &__right-buttons {
+        display: flex;
+        gap: 16px;
+        align-items: flex-end;
+      }
+
+      &__right-buttons {
+        margin-left: auto;
+        justify-content: end;
+        flex: 1;
+      }
+
+      .skip-backward-seconds,
+      .skip-forward-seconds {
+        display: none;
+      }
+
+      &__previous-chapter-view-wrapper,
+      &__next-chapter-view-wrapper {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+      }
+
+      &__previous-chapter-view,
+      &__next-chapter-view {
+        display: none;
+      }
+
+      &__previous-chapter-view {
+        justify-content: flex-end;
+      }
+
+      &__next-chapter-view {
+        justify-content: flex-start;
+      }
+
+      &__next-chapter-view,
+      &__previous-chapter-view {
+        display: none;
+        align-items: flex-end;
+        margin-top: 0;
+        margin-bottom: 0;
+        width: 75px;
+        font-size: $lt-player-font-size-sm;
+        font-weight: $lt-player-font-weight-sm;
+        color: $default-lt-player-white !important;
       }
 
       &__background {
@@ -335,17 +98,21 @@
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
       }
 
+      &__volume_control {
+        display: none;
+      }
+
+      .mini-player-control {
+        display: none;
+      }
+
       &__play-button_body {
         position: relative;
 
-        &__portrait {
-          bottom: -8px;
-        }
-
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;
-          padding: 16px;
+          bottom: -5px;
         }
       }
 
@@ -473,3 +240,229 @@
     }
   }
 }
+
+.lt-player-orientation--portrait {
+  .plyr {
+    &__progress {
+      &--wrapper {
+        width: 100%;
+        padding: 0 16px;
+        position: absolute;
+        bottom: 56px;
+      }
+    }
+
+    &__controls {
+      .bottom-controller {
+        padding: 16px;
+
+        button {
+          @include buttons-xs;
+        }
+
+        .play-button {
+          padding: 12px;
+        }
+
+        &__left-buttons {
+          margin-right: auto;
+          flex: 0 0 40px;
+        }
+
+        &__right-buttons {
+          margin-left: auto;
+          flex: 0 0 40px;
+        }
+
+        &__center-buttons {
+          justify-content: center;
+          flex: 100;
+          gap: 16px;
+        }
+
+        &__volume_control {
+          display: flex;
+        }
+      }
+    }
+  }
+}
+
+// @Container Query
+
+@container portrait (width > 319px) {
+  .lt-player-orientation--portrait {
+    .plyr {
+      &__progress {
+        &--wrapper {
+          padding: 0 20px;
+          bottom: 84px;
+        }
+      }
+
+      &__controls {
+        .bottom-controller {
+          padding: 20px 20px 28px 20px;
+
+          button {
+            @include buttons-normal;
+          }
+
+          .play-button {
+            padding: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container portrait (width > 374px) {
+  .lt-player-orientation--portrait {
+    .plyr {
+      &__controls {
+        .bottom-controller {
+          &__center-buttons {
+            gap: 32px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 479px) {
+  .lt-player-orientation--landscape {
+    .plyr {
+      &__progress {
+        &--wrapper {
+          padding: 0 20px;
+          bottom: 65px;
+        }
+      }
+
+      &__controls {
+        .bottom-controller {
+          padding: 25px 20px;
+
+          &__center-buttons {
+            gap: 20px;
+          }
+
+          &__previous-chapter-view,
+          &__next-chapter-view {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    .plyr {
+      &__progress {
+        &--wrapper {
+          padding: 0 40px;
+        }
+      }
+
+      &__controls {
+        .bottom-controller {
+          padding: 25px 40px;
+
+          &__left-buttons,
+          &__right-buttons {
+            gap: 10px;
+          }
+
+          &__center-buttons {
+            gap: 16px;
+          }
+
+          &__volume_control {
+            display: flex;
+          }
+
+          .mini-player-control {
+            display: flex;
+          }
+
+          .skip-backward-seconds,
+          .skip-forward-seconds {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+}
+
+@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;
+        }
+      }
+
+      &__controls {
+        .bottom-controller {
+          padding: 28px 40px;
+
+          &__left-buttons,
+          &__right-buttons {
+            gap: 20px;
+          }
+
+          &__center-buttons {
+            gap: 32px;
+          }
+
+          &__next-chapter-view,
+          &__previous-chapter-view {
+            font-size: $lt-player-font-size-lg2;
+          }
+
+          button {
+            @include buttons-normal;
+          }
+
+          .play-button {
+            padding: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 1066px) {
+  .lt-player-orientation--landscape {
+    .plyr {
+      &__controls {
+        .bottom-controller {
+          &__previous-chapter-view,
+          &__next-chapter-view {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+}