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

package/src/assets/sass/core/_typography.scss

@@ -1,13 +0,0 @@
-.lt-player {
-  font-family: $lt-font-family-base;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    font-family: $lt-font-family-base;
-  }
-}

package/src/assets/sass/layout/_all.scss

@@ -1,3 +0,0 @@
-// All layouts
-@import "grid";
-

package/src/assets/sass/sections/_additional-info.scss

@@ -1,90 +0,0 @@
-@import "../abstracts/variables";
-
-.lt-player-portrate--mobile {
-  &.lt-player--portrait {
-    &__xs {
-      .lt-player {
-        &__additional-info-mobile {
-          gap: 0;
-
-          button {
-            @include buttons-xs;
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player {
-  .plyr__controls-enable {
-    .lt-player {
-      &__additional-info-mobile {
-        z-index: 5;
-      }
-    }
-  }
-
-  &__additional-info {
-    width: 80px;
-    align-items: end;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    gap: 32px;
-    background: transparent;
-    padding-bottom: 25px;
-    z-index: 30;
-
-    button {
-      @extend %lt-player-btn;
-      @include white-btn;
-    }
-  }
-
-  &__additional-info-mobile,
-  .lt-player__additional-info__is_set_in-side {
-    align-items: end;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    gap: 16px;
-    background: transparent;
-    padding-bottom: 0;
-
-    button {
-      @extend %lt-player-btn;
-      @include white-btn;
-      background: transparent;
-
-      &:focus,
-      &:hover,
-      &:active {
-        background-color: unset;
-      }
-
-      img {
-        -webkit-filter: brightness(0) invert(1);
-        filter: brightness(0) invert(1);
-      }
-    }
-  }
-}
-
-.lt-player-additional-info {
-  display: none!important;
-}
-
-.lt-player-mobile-add-info-modal {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.lt-state-fullscreen {
-  .lt-player__additional-info,
-  .lt-player__additional-info-mobile {
-    display: none;
-  }
-}

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

@@ -1,6 +0,0 @@
-@import "poster";
-@import "control";
-@import "additional-info";
-@import "settings";
-@import "share";
-@import "subtitles";

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

@@ -1,122 +0,0 @@
-@import "controllers/all";
-
-.lt-player-portrait--desktop {
-  &.lt-player--portrait {
-      .plyr {
-        &__controls-enable {
-          transition-property: opacity, left, top, height;
-          transition-duration: 1s, 3s;
-        }
-      }
-  }
-}
-
-.plyr {
-  .plyr--video, &__controls {
-    touch-action: none!important;
-    pointer-events: auto!important;
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-    background: none!important;
-    display: flex!important;
-    flex-direction: column;
-    position: relative;
-    padding: 0!important;
-  }
-
-  &__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 {
-
-    }
-  }
-
-  &__controls-enable {
-    opacity: 1!important;
-  }
-
-  &__controls-enable-addInfo {
-    opacity: 1!important;
-  }
-}
-
-.plyr--video .plyr__controls {
-  background: none!important;
-}
-
-.plyr .plyr__controls:not(:empty) ~ .plyr__captions {
-  //opacity: 0;
-  //bottom: 0;
-  //top: 0;
-  transform: unset!important;
-  color: $default-lt-player-white !important;
-}
-
-.plyr .plyr__controls-enable:not(:empty) ~ .plyr__captions {
-  //position: absolute !important;
-  //top: 0;
-  //bottom: 0;
-  transform: unset!important;
-}
-
-.plyr .plyr__controls-enable-settings:not(:empty) ~ .plyr__captions {
-  //position: absolute !important;
-  //top: 0;
-  //bottom: 0;
-  transform: unset!important;
-}
-
-
-.plyr--video.plyr--hide-controls .plyr__controls {
-  opacity: 0;
-  pointer-events: none;
-  transform: unset!important;
-}
-
-
-.plyr--video.plyr--hide-controls .plyr__controls-enable-settings .player-lt__modal__mobile-show-modal {
-opacity: 1!important;
-pointer-events: none!important;
-transform: none!important;
-}
-
-.plyr__time+.plyr__time:before {
-content: none!important;
-}
-
-.plyr__time + .plyr__time {
-  display: flex !important;
-}

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

@@ -1,319 +0,0 @@
-@import "../abstracts/variables";
-
-.plyr {
-  .lt-player {
-    &__preload-hide {
-      opacity: 0 !important;
-    }
-
-    &__poster {
-      position: absolute;
-      inset: 0;
-      color: $default-lt-player-white !important;
-      z-index: $z_index_first;
-
-      &__image-body {
-        position:absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 2;
-        opacity: 1;
-        transition: all 0.2s ease-in-out;
-
-        &--preload {
-          opacity: 0;
-          transition: all 0.2s ease-in-out;
-        }
-      }
-
-      &__img {
-        &--set-custom {
-          object-fit: cover;
-          width: 100%;
-          height: 100%;
-        }
-
-        &__set-default {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 10;
-        }
-      }
-
-      &--background {
-        position: absolute;
-        inset: 0;
-        background-color: $default-lt-span-color;
-        z-index: -1;
-      }
-
-      &__body {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 3;
-
-        &:hover {
-          .poster-paragraph {
-            text-decoration: underline;
-          }
-
-          .content__footer {
-            .poster-buttons {
-              .poster-button-play,
-              .poster-button-watch-now {
-                color: $default-lt-button-color;
-                background-color: darken($default_color_player, 10%);
-              }
-            }
-          }
-        }
-
-        .content {
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          z-index: 2;
-          cursor: pointer;
-
-          &__header {
-            padding: 25px 25px 0;
-
-            .poster-title {
-              @extend %line-clamp-3;
-              @include line-clamp-3;
-              color: $default-lt-player-white;
-              font-size: $lt-player-font-size-base;
-              font-weight: $lt-player-font-weight-xs;
-              margin: 0;
-            }
-          }
-
-          &__body {
-            padding: 0 25px;
-
-            .poster-paragraph {
-              @extend %line-clamp-3;
-              @include line-clamp-4;
-              font-weight: $lt-player-font-weight-lg;
-              font-size: $lt-player-font-size-base;
-              line-height: $lt-player-line-height-default;
-              margin: 8px 0;
-              color: $default-lt-player-white;
-              width: 70%;
-            }
-          }
-
-          &__footer {
-            margin-top: auto;
-            padding: 0 25px 25px;
-
-            .poster-buttons {
-              display: flex;
-              gap: 5px;
-
-              .poster-button-play {
-                @extend %lt-player-btn;
-                @include yellow-btn;
-                @include buttons-xxs;
-                font-size: $lt-player-font-size-xs;
-              }
-
-              .poster-button-watch-now {
-                @extend %lt-player-btn;
-                @include yellow-btn;
-                @include buttons-xs;
-                padding: 0 16px;
-                font-size: $lt-player-font-size-xs;
-                font-weight: $lt-player-font-weight-xl;
-              }
-
-              .poster-lt-player-share {
-                @extend %lt-player-btn;
-                @include gray-btn;
-                @include buttons-xxs;
-                margin-left: auto;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-orientation--portrait {
-  .plyr {
-    .lt-player {
-      &__poster {
-        &__img {
-          &--set-custom {
-            // Delete this after review
-            object-position: 90% 50%;
-          }
-        }
-
-        &__body {
-          .content {
-            &__header {
-              .poster-title {
-                font-size: $lt-player-font-size-base;
-                font-weight: $lt-player-font-weight-md;
-              }
-            }
-
-            &__body {
-              margin-top: auto;
-
-              .poster-paragraph {
-                font-size: $lt-player-font-size-xxl;
-                line-height: $lt-player-line-height-default;
-                margin-top: 12px;
-                margin-bottom: 20px;
-                width: 100%;
-                text-decoration: underline;
-              }
-            }
-
-            &__footer {
-              margin-top: unset;
-
-              .poster-buttons {
-                .poster-button-play,
-                .poster-button-watch-now,
-                .poster-lt-player-share {
-                  @include buttons-normal;
-                  font-size: $lt-player-font-size-lg;
-                  font-weight: $lt-player-font-weight-lg;
-                }
-
-                .poster-button-watch-now {
-                  padding: 6px 16px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 375px) {
-  .lt-player-orientation--landscape {
-    .lt-player {
-      &__poster {
-        &__body {
-          .content {
-            &__body {
-              .poster-paragraph {
-                width: 50%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 479px) {
-  .lt-player-orientation--landscape {
-    .lt-player {
-      &__poster {
-        &__body {
-          .content {
-            &__header {
-              padding: 25px 50px 0;
-
-              .poster-title {
-                font-weight: $lt-player-font-weight-xl;
-              }
-            }
-
-            &__body {
-              padding: 0 50px;
-
-              .poster-paragraph {
-                font-size: $lt-player-font-size-xl;
-                margin: 25px 0 8px;
-                width: 60%;
-              }
-            }
-
-            &__footer {
-              padding: 0 50px 25px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 639px) {
-  .lt-player-orientation--landscape {
-    .lt-player {
-      &__poster {
-        &__body {
-          .content {
-            &__header {
-              padding: 50px 50px 0;
-            }
-
-            &__body {
-              .poster-paragraph {
-                font-size: $lg-player-font-size-xxl3;
-                margin: 25px 0 8px;
-                width: 60%;
-              }
-            }
-
-            &__footer {
-              padding: 50px;
-
-              .poster-buttons {
-                .poster-button-play {
-                  @include buttons-normal;
-                }
-
-                .poster-button-watch-now {
-                  @include buttons-normal;
-                  padding: 0 16px;
-                  font-size: $lt-player-font-size-base;
-                }
-
-                .poster-lt-player-share {
-                  @include buttons-normal;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 759px) {
-  .lt-player-orientation--landscape {
-    .lt-player {
-      &__poster {
-        &__body {
-          .content {
-            &__body {
-              .poster-paragraph {
-                font-size: $lt-player-font-size-xxxl3;
-                width: 60%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-