@latest-thinking/lt-player 1.0.5 → 1.0.6

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

@@ -1,122 +1,145 @@
+//.lt-player-portrate--mobile,
+//.lt-player-portrate--desktop,
+//.lt-player-landscape--mobile {
+//  .plyr {
+//    .share-controller {
+//      .share-active {
+//        position: relative;
+//
+//
+//        .share-controller-content {
+//          max-width: 100%;
+//          .line-button {
+//            visibility: visible;
+//            margin-bottom: 32px;
+//          }
+//        }
+//      }
+//    }
+//  }
+//}
+
 .plyr {
-    .share-controller {
+  .share-controller {
+    .share-inactive {
+      display: none;
+    }
 
-      .share-inactive {
-        display: none;
-      }
+    .share-active {
+      align-items: center;
+      background: rgba(0, 0, 0, .3);
+      -webkit-backdrop-filter: blur(14px);
+      backdrop-filter: blur(14px);
+      bottom: 0;
+      color: $default-lt-player-white;
+      display: flex;
+      justify-content: center;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 99;
+
+      .share-controller-content {
+        background: $default-lt-player-white;
+        padding: 0 28px 20px;
+        text-align: center;
+        width: 100%;
+        max-width: 376px;
+
+        .line-button {
+          display: flex;
+          width: 56px;
+          height: 6px;
+          background-color: $default-lt-line-button;
+          margin: 8px auto;
+          cursor: pointer;
+          visibility: hidden;
+        }
 
-      .share-active {
-        align-items: center;
-        background: rgba(0,0,0,.3);
-        -webkit-backdrop-filter: blur(14px);
-        backdrop-filter: blur(14px);
-        bottom: 0;
-        color: #fff;
-        display: flex;
-        justify-content: center;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 99;
-
-        .share-controller-content {
-          background: #fff;
-          border-radius: 10px;
-          max-width: 90%;
-          padding: 40px;
-          text-align: center;
-
-          .share-controller-frame {
-            position: relative;
-
-            .player-share-close-button {
-              color: #000;
-              position: absolute;
-              right: -20px;
-              top: -20px;
-            }
+        .share-controller-frame {
+          position: relative;
 
+          .player-share-close-button {
+            color: $default-lt-player-black;
+            position: absolute;
+            right: -20px;
+            top: -20px;
+          }
+        }
 
+        .share-controller-title,
+        .share-controller-via {
+          h3 {
+            color: $default-lt-button-color;
+            font-size: $lt-player-font-size-base;
+            font-weight: $lt-player-font-weight-lg;
+            margin-top: 0;
           }
+        }
 
-          .share-controller-title {
-            margin-bottom: 30px;
-            span {
-              color: #181818;
-              font-size: 32px;
-              font-weight: 700;
-            }
+        .share-controller-via {
+          margin-bottom: 25px;
+        }
 
+        .share-controller-link-wrapper {
+          @extend %center-elements;
+          flex-flow: column wrap;
+          gap: 20px;
+          word-break: break-word;
+
+          .share-controller-url {
+            font-size: $lt-player-font-size-base;
+            color: $default-lt-player-modal-color;
+            font-weight: $lt-player-font-weight-sm;
+            text-decoration: underline;
+            cursor: pointer;
+            max-width: 90%;
           }
 
-          .share-controller-link-wrapper {
-            align-items: center;
-            display: flex;
-            //padding: 0 20px;
-
-            input.share-controller-url {
-              border: none;
-              color: rgba(24,24,24,.5);
-              flex: 1;
-              font-size: 12px;
-              overflow: hidden;
-              text-align: center;
-              white-space: nowrap;
-            }
-            .share-controller-link {
-              color: #6cf;
-              font-weight: 500;
-              margin-left: 20px;
-              white-space: nowrap;
-            }
-          }
-          .share-controller-hr {
-            border-top: 2px solid #eee;
-            margin-top: 5px;
-          }
-          .share-controller-via {
-            color: #181818;
-            font-size: 18px;
-            margin: 30px 0;
+          .share-controller-link {
+            @extend %lt-player-btn;
+            @include yellow-btn;
+            color: $default-lt-button-color !important;
+            max-width: 142px;
+            width: 100%;
           }
+        }
 
-          .share-controller-icons {
-            display: flex;
-            justify-content: center;
+        .share-controller-hr {
+          opacity: 0.3;
+          margin: 20px 0;
+        }
 
-            a {
-              align-items: center;
-              display: flex;
-              flex-direction: column;
-              margin: 0 7px;
-              text-align: center;
-
-              .share-icon__icon {
-                border-radius: 50%;
-                box-shadow: 0 4px 20px rgba(0,0,0,.1);
-                display: block;
-                margin-bottom: 5px;
-                max-height: 35px;
-                max-width: 35px;
-
-                img {
-                  max-width: 35px;
-                }
-              }
-              span {
-                color: #181818;
-                font-size: 12px;
-                font-weight: 300;
-              }
+        .share-controller-icons {
+          @extend %center-elements;
+          gap: 15px;
+          flex-wrap: wrap;
 
+          div {
+            display: none;
           }
 
+          a {
+            padding: 0;
 
+            &:first-child {
+              .share-icon__icon {
+                background: $default_color_player;
+              }
+            }
+
+            .share-icon__icon {
+              @extend %center-elements;
+              width: 32px;
+              height: 32px;
+              max-width: 32px;
+              max-height: 32px;
+              background: $default-lt-button-color;
+            }
           }
         }
-
       }
     }
-
+  }
 }

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

@@ -1,3 +1,16 @@
+.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: flex!important;
   justify-content: center!important;
@@ -7,7 +20,7 @@
   background-color: $default-lt-player-black !important;
   font-size: $lt-player-font-size-lg !important;
   line-height: $lt-player-line-height !important;
-  padding: .5rem .75rem !important;
+  padding: 8px 12px !important;
   font-family: $lt-font-family-base !important;
   white-space: unset !important;
 }

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

@@ -6,10 +6,10 @@
     &__controls {
       .bottom-controller {
         max-width: 100%;
-        padding: 2rem;
+        padding: 28px 40px;
 
         .play-button {
-          padding: 1rem;
+          padding: 16px;
           bottom: -5px;
         }
 
@@ -17,48 +17,50 @@
         &__center-buttons,
         &__right-buttons {
           display: flex;
-          gap: 1rem;
-          align-items: end;
+          gap: 20px;
+          align-items: flex-end;
         }
 
         &__left-buttons {
           margin-right: auto;
-          display: grid;
+          display: flex;
           grid-template-columns: 1fr 1fr;
+          flex: 1;
         }
 
         &__center-buttons {
-          gap: 2rem;
+          gap: 32px;
         }
 
         &__right-buttons {
           margin-left: auto;
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          direction: rtl;
+          display: flex;
+          flex: 1;
+          justify-content: end;
         }
 
         &__previous-chapter-view-wrapper,
         &__next-chapter-view-wrapper {
           display: flex;
-          gap: 1rem;
-          align-items: end;
+          gap: 16px;
+          align-items: flex-end;
         }
 
         &__previous-chapter-view {
-          justify-content: end;
+          justify-content: flex-end;
         }
 
         &__next-chapter-view {
-          justify-content: start;
+          justify-content: flex-start;
         }
 
         &__next-chapter-view,
         &__previous-chapter-view {
           display: flex;
-          align-items: end;
-          margin-bottom: .4rem;
+          align-items: flex-end;
+          margin-bottom: 4px;
           width: 100px;
+          font-size: $lt-player-font-size-lg;
           color: $default-lt-player-white !important;
         }
 
@@ -74,17 +76,32 @@
   }
 
   &.lt-player--landscape {
+    &__lg {
+      .plyr {
+        &__controls {
+          .bottom-controller {
+            &__previous-chapter-view {
+              display: none;
+            }
+
+            &__next-chapter-view {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
     &__md {
       .plyr {
         &__controls {
           .bottom-controller {
-            .play-button {
-              padding: .75rem;
-              bottom: -2px;
+            &__previous-chapter-view {
+              display: none;
             }
 
-            &__center-buttons {
-              gap: 1rem;
+            &__next-chapter-view {
+              display: none;
             }
           }
         }
@@ -95,13 +112,42 @@
       .plyr {
         &__controls {
           .bottom-controller {
-            .play-button {
-              padding: .75rem;
-              bottom: -2px;
+            &__center-buttons {
+              gap: 20px;
             }
 
-            &__center-buttons {
-              gap: 1rem;
+            &__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 {
@@ -121,21 +167,27 @@
       }
     }
 
-    &__xs {
+    &__xxs {
       .plyr {
+        &__progress {
+          &--wrapper {
+            padding: 0 10px;
+            bottom: 50px;
+          }
+        }
+
         &__controls {
           .bottom-controller {
-            padding: 1.5rem;
+            padding: 15px 10px;
 
             .play-button {
-              padding: .75rem;
-              bottom: -2px;
+              padding: 12px;
             }
 
             .plyr__controls_speed-button {
               width: 32px;
               height: 32px;
-              font-size: .6rem;
+              font-size: 10px;
               transition: none;
             }
 
@@ -146,7 +198,11 @@
             &__left-buttons,
             &__center-buttons,
             &__right-buttons {
-              gap: .5rem;
+              gap: 16px;
+            }
+
+            &__center-buttons {
+              gap: 20px;
             }
 
             &__previous-chapter-view {
@@ -175,10 +231,6 @@
         &__right-buttons {
           direction: unset;
         }
-
-        &__play-button_body {
-          bottom: -3px;
-        }
       }
     }
   }
@@ -186,25 +238,36 @@
 
 .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: 1rem;
+            padding: 16px;
 
             button {
               @include buttons-xs;
             }
 
             .play-button {
-              padding: .75rem;
+              padding: 12px;
             }
 
             .plyr__controls_speed-button {
               width: 32px;
               height: 32px;
-              font-size: .6rem;
+              font-size: 10px;
               transition: none;
             }
           }
@@ -216,27 +279,27 @@
 
 .plyr {
   &__progress {
-    top: -75px;
     z-index: 9;
 
     &--wrapper {
-      position: relative;
       width: 100%;
-      padding: 0 2rem;
+      padding: 0 40px;
+      position: absolute;
+      bottom: 90px;
     }
   }
 
   &__controls {
     .bottom-controller {
       position: absolute;
-      bottom: 1rem;
+      bottom: 0;
       width: 100%;
       height: 36%;
       max-width: 500px;
       display: flex;
       justify-content: space-between;
-      align-items: end;
-      padding: 1.5rem;
+      align-items: flex-end;
+      padding: 24px;
 
       button {
         @extend %lt-player-btn;
@@ -282,16 +345,15 @@
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;
-          padding: 1rem;
+          padding: 16px;
         }
       }
 
       &__current {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 2rem;
-        margin-left: -0.5rem;
-        margin-right: -0.5rem;
+        margin-left: -8px;
+        margin-right: -8px;
 
         .plyr {
           &__time {
@@ -306,7 +368,7 @@
         display: flex;
         height: 200px;
         justify-content: center;
-        align-items: end;
+        align-items: flex-end;
         background: $default-lt-player-white;
         z-index: 30;
 
@@ -315,61 +377,61 @@
             &__area {
               position: absolute;
               rotate: 270deg!important;
-              bottom: 5rem;
+              bottom: 80px;
               max-width: 110px;
               min-width: 80px;
               width: 20%;
 
-                .volume_control__background__area__range {
-                  color: $default-lt-button-color !important;
-                  min-width: 8rem;
-                  -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__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: 5rem;
+              bottom: 80px;
               background: $default-lt-player-white;
               display: flex;
               justify-content: center;
@@ -391,7 +453,7 @@
       &__background {
         position: absolute;
         width: 100%;
-        height: 10rem;
+        height: 160px;
         bottom: 0;
         right: 0;
         background: linear-gradient(transparent,rgba(0,0,0,.75))!important;