@latest-thinking/lt-player 1.2.0 → 2.0.0-b

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

@@ -1,522 +0,0 @@
-@import "../../abstracts/variables";
-
-.plyr {
-  &__progress {
-    z-index: 9;
-
-    &--wrapper {
-      width: 100%;
-      padding: 0 10px;
-      display: none;
-    }
-
-    &--wrapper-enable {
-      display: block;
-    }
-  }
-
-  &__controls {
-    .bottom-controller {
-      display: none;
-      justify-content: space-between;
-      align-items: flex-end;
-      padding: 15px 10px;
-      width: 100%;
-      max-width: 100%;
-
-      button {
-        @extend %lt-player-btn;
-        @include dark-btn;
-        @include buttons-xs;
-        z-index: 10;
-        flex: 0 0 auto;
-      }
-
-      &__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;
-
-        .plyr__controls_speed-button {
-          width: 30px;
-          height: 30px;
-          background-color: $default-lt-player-blue;
-          font-size: $lt-player-font-size-xs;
-          font-weight: $lt-player-font-weight-md;
-
-          &:hover {
-            background-color: darken($default-lt-player-blue, 5%);
-          }
-
-          &:focus,
-          &:active {
-            background-color: $default-lt-player-blue;
-          }
-
-          span {
-            font-size: $lt-player-font-size-xxs;
-          }
-        }
-      }
-
-      .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: 80px;
-        white-space: nowrap;
-        font-size: $lt-player-font-size-sm;
-        font-weight: $lt-player-font-weight-sm;
-        color: $default-lt-player-white !important;
-      }
-
-      &__background {
-        position: absolute;
-        width: 100%;
-        left: 0;
-        bottom: 0;
-        height: 40%;
-        background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
-        z-index: -1;
-      }
-
-      &__volume_control {
-        display: none;
-      }
-
-      .mini-player-control {
-        display: none;
-      }
-
-      &__play-button_body {
-        position: relative;
-
-        .play-button {
-          @extend %lt-player-btn;
-          @include yellow-btn;
-          bottom: -5px;
-        }
-      }
-
-      &__current {
-        display: flex;
-        justify-content: space-between;
-        margin-left: -8px;
-        margin-right: -8px;
-
-        .plyr {
-          &__time {
-            font-size: $lt-player-font-size-xs;
-            color: $default-lt-span-color;
-          }
-        }
-      }
-
-      .volume-control-enable {
-        position: absolute;
-        display: flex;
-        height: 200px;
-        justify-content: center;
-        align-items: flex-end;
-        background: $default-lt-player-white;
-        z-index: 30;
-
-        .volume_control {
-          &__background {
-            &__area {
-              position: absolute;
-              rotate: 270deg!important;
-              bottom: 80px;
-              max-width: 110px;
-              min-width: 80px;
-              width: 20%;
-
-              .volume_control__background__area__range {
-                color: $default-lt-button-color !important;
-                min-width: 128px;
-                -webkit-appearance: none;
-                appearance: none;
-                background: transparent;
-                cursor: pointer;
-              }
-
-              .volume_control__background__area__range::-webkit-slider-runnable-track {
-                @extend %input-range--webkit-slider-runnable-track;
-              }
-
-              .volume_control__background__area__range::-moz-range-track {
-                @extend %input-range--moz-range-track;
-              }
-
-              .volume_control__background__area__range::-ms-track {
-                @extend %input-range--ms-track;
-              }
-
-              .volume_control__background__area__range::-webkit-slider-thumb {
-                @extend %input-range--webkit-slider-thumb;
-                border-color: $default-lt-player-black;
-                background: $default-lt-player-white;
-              }
-
-              .volume_control__background__area__range::-moz-range-thumb {
-                @extend %input-range--moz-range-thumb;
-                border-color: $default-lt-player-black;
-                background: $default-lt-player-white;
-              }
-
-              .volume_control__background__area__range::-ms-thumb {
-                @extend %input-range--ms-thumb;
-                margin-top: 3px;
-                border: 7px solid black;
-                height: 20px;
-                width: 20px;
-                background: $default-lt-player-white;
-                cursor: pointer;
-              }
-
-              .volume_control__background__area__range::-moz-range-progress {
-                @extend %input-range--moz-range-progress;
-              }
-            }
-
-            .volume_control__volume-button-close {
-              bottom: 80px;
-              background: $default-lt-player-white;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              border: none;
-            }
-          }
-        }
-      }
-    }
-
-    .bottom-controller-enable {
-      display: flex;
-    }
-  }
-
-  .fade-animation-controllers {
-    .bottom-controller {
-      opacity: 1 !important;
-      transition-property: opacity, left, top, height;
-      transition-duration: 1s, 3s;
-
-      &__background {
-        position: absolute;
-        width: 100%;
-        height: 160px;
-        bottom: 0;
-        right: 0;
-        background: linear-gradient(transparent,rgba(0,0,0,.75))!important;
-        background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)))!important;
-        opacity: 1 !important;
-        transition-property: opacity, left, top, height;
-        transition-duration: 1s, 3s;
-      }
-    }
-
-    .top-controllers {
-      background: linear-gradient(transparent,rgba(0,0,0,.75))!important;
-      background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)))!important;
-      opacity: 1 !important;
-      transition-property: opacity, left, top, height;
-      transition-duration: 1s, 3s;
-    }
-  }
-}
-
-.lt-player-orientation--portrait {
-  .plyr {
-    &__progress {
-      &--wrapper {
-        padding: 0 16px;
-      }
-    }
-
-    &__controls {
-      .bottom-controller {
-        padding: 0 16px 20px;
-
-        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;
-        }
-      }
-    }
-  }
-}
-
-.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) {
-  .lt-player-orientation--portrait {
-    .plyr {
-      &__progress {
-        &--wrapper {
-          padding: 0 20px;
-        }
-      }
-
-      &__controls {
-        .bottom-controller {
-          padding: 0 20px 28px 20px;
-
-          button {
-            @include buttons-normal;
-          }
-
-          .play-button {
-            padding: 16px;
-          }
-        }
-
-        .plyr__controls_speed-button {
-          width: 40px;
-          height: 40px;
-
-          span {
-            font-size: $lt-player-font-size-sm;
-          }
-        }
-      }
-    }
-  }
-}
-
-@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 $lt-player-padding-xxl / 2;
-
-          .bottom-controller__current {
-            display: flex;
-          }
-        }
-      }
-
-      &__controls {
-        .bottom-controller {
-          padding: 0 $lt-player-padding-xxl / 2 25px $lt-player-padding-xxl / 2;
-
-          &__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 $lt-player-padding-xxl;
-        }
-      }
-
-      &__controls {
-        .bottom-controller {
-          padding: 0 $lt-player-padding-xxl 25px $lt-player-padding-xxl;
-
-          &__left-buttons,
-          &__right-buttons {
-            gap: 10px;
-          }
-
-          &__center-buttons {
-            gap: 16px;
-          }
-
-          &__volume_control {
-            display: flex;
-            left: 80px;
-          }
-
-          .mini-player-control {
-            display: flex;
-          }
-
-          .skip-backward-seconds,
-          .skip-forward-seconds {
-            display: flex;
-          }
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 912px) {
-  .lt-player-orientation--landscape {
-    .plyr {
-      &__progress {
-        &--wrapper {
-          padding: 0 $lt-player-padding-xxl;
-        }
-      }
-
-      &__controls {
-        .bottom-controller {
-          padding: 0 $lt-player-padding-xxl 28px $lt-player-padding-xxl;
-
-          &__left-buttons,
-          &__right-buttons {
-            gap: 20px;
-          }
-
-          &__center-buttons {
-            gap: 32px;
-          }
-
-          &__volume_control {
-            left: 100px;
-          }
-
-          &__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;
-            gap: 8px;
-          }
-        }
-      }
-    }
-  }
-}

package/src/assets/sass/sections/controllers/_mini-player.scss

@@ -1,169 +0,0 @@
-.plyr {
-  .lt-player-mini-player-background {
-    width: 100%;
-    height: 100%;
-  }
-
-  .lt-player-mini-player-observe {
-    min-height: 200px;
-    max-height: 600px;
-    height: auto;
-  }
-
-  .lt-player-mini-enable {
-    position: fixed;
-    z-index: 10000;
-    bottom: 20px;
-    right: 20px;
-    opacity: 1;
-    overflow: unset;
-
-    .plyr__video-embed__container {
-      transform: unset !important;
-      position: unset !important;
-    }
-  }
-
-  .lt-player-mini-2 {
-    max-width: 344px;
-    max-height: 194px;
-  }
-
-  .lt-player-mini-1 {
-    max-width: 160px;
-    max-height: 290px;
-  }
-
-  .lt-player-mini-player-background {
-    z-index: 100;
-
-    .logo {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      background: #cfd1d4;
-
-    }
-  }
-
-  .lt-player-mini-player-controls-enable {
-    opacity: 1!important;
-    transition-property: opacity, left, top, height;
-    transition-duration: 1s, 3s;
-  }
-
-
-  .lt-player-mini-player-controls {
-    @extend %center-elements;
-    position: absolute;
-    z-index: 100;
-    width: 100%;
-    height: 100%;
-    bottom: 0;
-    right: 0;
-    opacity: 0;
-    transition-property: opacity, left, top, height;
-    transition-duration: 1s, 3s;
-
-    &__exit {
-      @extend %lt-player-btn;
-      @include dark-btn;
-      position: absolute;
-      top: -16px;
-      right: -16px;
-      padding: 5px;
-    }
-
-    &__play-button {
-      @extend %lt-player-btn;
-      @include yellow-btn;
-      padding: 12px;
-    }
-
-    &__progress__seek {
-      position: absolute;
-      bottom: 0;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 0 !important;
-      height: 6px !important;
-      color: transparent !important;
-    }
-
-    input[type="range"]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      border: 0px double transparent !important;
-      height: 0px;
-      width: 0px;
-      border-radius: 20px;
-      background: transparent!important;
-      cursor: pointer;
-      margin-top: 4px;
-      box-shadow: transparent !important;
-    }
-
-    input[type="range"]::-moz-range-thumb {
-      box-shadow: none !important;
-      border: 0px double transparent !important;
-      height: 0px;
-      width: 0px;
-      border-radius: 20px;
-      background: transparent;
-      cursor: pointer;
-    }
-    input[type="range"]::-ms-thumb {
-      box-shadow: none !important;
-      border: 0px double transparent !important;
-      height: 0px;
-      width: 0px;
-      border-radius: 20px;
-      background: transparent !important;
-      cursor: pointer;
-    }
-    input[type=range]::-webkit-slider-runnable-track {
-      height: 8px;
-      cursor: pointer;
-      box-shadow: none !important;
-      background: transparent !important;
-      border-radius: 0px;
-      border: 0px solid transparent !important;
-    }
-    input[type=range]:focus::-webkit-slider-runnable-track {
-      background: transparent !important;
-    }
-    input[type=range]::-moz-range-track {
-      height: 8px;
-      cursor: pointer;
-      box-shadow: none;
-      background: transparent !important;
-      border-radius: 0px;
-      border: 0px solid transparent !important;
-    }
-    input[type=range]::-ms-track {
-      height: 8px;
-      cursor: pointer;
-      background: transparent !important;
-      border-color: transparent !important;
-      border-width: 16px 0;
-      color: transparent !important;
-    }
-    input[type=range]::-ms-fill-lower {
-      background: transparent !important;
-      border: 0px solid transparent !important;
-      border-radius: 0px;
-      box-shadow: none;
-    }
-    input[type=range]:focus::-ms-fill-lower {
-      background: transparent !important;
-    }
-    input[type=range]::-ms-fill-upper {
-      background: transparent !important;
-      border: 0px solid transparent !important;
-      border-radius: 0px;
-      box-shadow: none;
-    }
-    input[type=range]:focus::-ms-fill-upper {
-      background: transparent !important;
-    }
-  }
-}