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

package/src/assets/sass/components/_loader.scss

@@ -1,187 +0,0 @@
-@import "../abstracts/variables";
-
-.lt-state-loader-active {
-  .lt-player__poster {
-    display: none;
-  }
-
-  .loader {
-    display: inline-block;
-
-    &__backdrop {
-      display: block;
-    }
-  }
-}
-
-.loader {
-  --_loader-dimensions: 80px;
-
-  @include center-position(50%, 50%);
-  display: none;
-  width: var(--_loader-dimensions);
-  height: var(--_loader-dimensions);
-
-  &__backdrop {
-    position: absolute;
-    inset: 0;
-    display: none;
-    z-index: 2;
-    background-color: rgb(0, 0, 0, 0.2);
-  }
-
-  div {
-    position: absolute;
-    display: block;
-    width: calc((var(--_loader-dimensions) / 10) * 8);
-    height: calc((var(--_loader-dimensions) / 10) * 8);
-    margin: 8px;
-    border: 8px solid $default-lt-player-white;
-    border-radius: 50%;
-    animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: $default-lt-player-white transparent transparent transparent;
-
-    &:nth-child(1) {
-      animation-delay: -0.45s;
-    }
-
-    &:nth-child(2) {
-      animation-delay: -0.3s;
-    }
-
-    &:nth-child(3) {
-      animation-delay: -0.15s;
-    }
-  }
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.lt-player-orientation--portrait {
-  .loader {
-    top: 35%;
-  }
-}
-
-.lt-player-orientation--landscape {
-  .loader {
-    --_loader-dimensions: 40px;
-  }
-
-  &.lt-state-loader-active {
-    &.lt-state-captions-enabled {
-      .loader {
-        --_top-positon: 40%;
-        top: var(--_top-positon);
-        translate: -50% calc(var(--_top-positon) * -1);
-      }
-    }
-
-    &:not(&.lt-state-captions-enabled) {
-      .loader {
-        --_top-positon: 30%;
-        top: var(--_top-positon);
-        translate: -50% calc(var(--_top-positon) * -1);
-      }
-    }
-  }
-}
-
-@container landscape (width > 479px) {
-  .lt-player-orientation--landscape {
-    .loader {
-      --_loader-dimensions: 80px;
-    }
-
-    &.lt-state-loader-active {
-      &.lt-state-captions-enabled {
-        .loader {
-          --_top-positon: 35%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-
-      &:not(&.lt-state-captions-enabled) {
-        .loader {
-          --_top-positon: 35%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 639px) {
-  .lt-player-orientation--landscape {
-    &.lt-state-loader-active {
-      &.lt-state-captions-enabled {
-        .loader {
-          --_top-positon: 20%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-
-      &:not(&.lt-state-captions-enabled) {
-        .loader {
-          --_top-positon: 35%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 759px) {
-  .lt-player-orientation--landscape {
-    &.lt-state-loader-active {
-      &.lt-state-captions-enabled {
-        .loader {
-          --_top-positon: 25%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-
-      &:not(&.lt-state-captions-enabled) {
-        .loader {
-          --_top-positon: 35%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-    }
-  }
-}
-
-@container landscape (width > 912px) {
-  .lt-player-orientation--landscape {
-    &.lt-state-loader-active {
-      &.lt-state-captions-enabled {
-        .loader {
-          --_top-positon: 30%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-
-      &:not(&.lt-state-captions-enabled) {
-        .loader {
-          --_top-positon: 40%;
-          top: var(--_top-positon);
-          translate: -50% calc(var(--_top-positon) * -1);
-        }
-      }
-    }
-  }
-}

package/src/assets/sass/components/_modal.scss

@@ -1,365 +0,0 @@
-@import "../abstracts/variables";
-
-$modal-max-width: 620px;
-
-@mixin modal-max-width {
-  @media (max-width: #{$modal-max-width}) {
-    @content;
-  }
-}
-
-@mixin modal-min-width {
-  @media (min-width: #{$modal-max-width}) {
-    @content;
-  }
-}
-
-@mixin modal-h2 {
-  font-size: $lt-player-font-size-xxxl2;
-  font-weight: $lt-player-font-weight-lg;
-  margin-top: 0;
-  margin-bottom: 16px;
-  color: $default-lt-player-modal-color !important;
-}
-
-@mixin modal-h4 {
-  font-size: $lt-player-font-size-xxl2;
-  font-weight: $lt-player-font-weight-lg;
-  margin-bottom: 0;
-  margin-top: 16px;
-  color: $default-lt-player-modal-color !important;
-}
-
-@mixin modal-b {
-  display: block;
-  font-size: $lt-player-font-size-base;
-  margin-top: 16px;
-  color: $default-lt-player-modal-color !important;
-}
-
-@mixin modal-p {
-  font-weight: $lt-player-font-weight-sm;
-  line-height: $lt-player-line-height;
-  font-size: $lt-player-font-size-base;
-  margin-bottom: 0;
-  color: $default-lt-player-modal-color !important;
-}
-
-@mixin modal-img {
-  max-width: 100%;
-  height: auto;
-  margin-bottom: 16px;
-}
-
-@mixin modal-text-color {
-  color: $default-lt-player-modal-color !important;
-}
-
-@mixin modal-btn {
-  @extend %lt-player-btn;
-  @include yellow-btn;
-}
-
-body[modal-open-body] {
-  //position: fixed;
-  width: 100%;
-  overflow-x: hidden;
-}
-
-.lt-player-portrate--mobile {
-  &.lt-player--portrait {
-    &__lg,
-    &__md,
-    &__sm,
-    &__xs {
-      .player-lt {
-        &__modal-body {
-          padding: 0;
-        }
-      }
-    }
-
-    &__xs {
-      .player-lt {
-        &__mobile {
-          &__modal-content {
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6,
-            p,
-            b,
-            strong,
-            span {
-              font-size: $lt-player-font-size-base;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.player-lt {
-  &__mobile {
-    transition: 0.4s;
-    position: absolute;
-    width: 100%;
-    z-index: 30;
-    left: 0;
-    background: $default-lt-player-white;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    height: 90%;
-    border-radius: 10px 10px 0 0;
-
-    &__modal-header {
-      position: sticky;
-      top: 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background-color: $default-lt-player-modal-header;
-      min-height: 50px;
-      padding: 0 16px;
-      border-radius: 15px 15px 0 0;
-
-      .player-lt__close-button {
-        margin-bottom: 0;
-      }
-
-      .line-button {
-        @extend %line-button;
-      }
-    }
-
-    &__modal-content {
-      color: $default-lt-button-color;
-      text-align: left;
-      overflow: auto;
-      padding: 20px;
-      font-family: $lt-font-family-base;
-
-      button,
-      a {
-        @include modal-btn;
-      }
-
-      img {
-        @include modal-img;
-      }
-
-      h2,
-      h4,
-      p {
-        @include modal-text-color;
-      }
-
-      h1,
-      h2 {
-        @include modal-h2;
-      }
-
-      h3,
-      h4,
-      h5,
-      h6 {
-        @include modal-h4;
-      }
-
-      b,
-      strong,
-      span {
-        @include modal-b;
-      }
-
-      p {
-        @include modal-p;
-      }
-    }
-  }
-
-  &__modal {
-    z-index: 9999;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-
-    @include modal-min-width {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-
-    &__mobile {
-      position: absolute;
-      width: 100%;
-      z-index: 50;
-      left: 0;
-      background: $default-lt-player-white;
-      padding: 0 0 32px 0;
-      bottom: 0;
-      transition: .3s;
-      max-height: 90%;
-      overflow: auto;
-      border-radius: 10px 10px 0 0;
-
-      &__background {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        background: #27282A;
-        opacity: 0.75;
-        z-index: 10;
-      }
-    }
-  }
-
-  &__modal-content {
-    word-break: break-word;
-    z-index: 20;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: $default-lt-player-white;
-    color: $default-lt-player-modal-color;
-    border-radius: 0;
-    font-family: $lt-font-family-base;
-    width: 100%;
-    max-height: calc(100% - 50px);
-    overflow: auto;
-    max-width: 620px;
-
-    @include modal-max-width {
-      max-height: unset;
-      width: auto;
-      height: 100%;
-      position: unset;
-      transform: unset;
-      border: 1px solid $default-lt-span-color;
-      border-radius: 0 0 0 30px;
-    }
-
-    .modal-flex {
-      display: flex;
-      align-items: end;
-      gap: 24px;
-      flex-wrap: wrap;
-
-      img {
-        max-width: 220px;
-        margin-bottom: 0;
-        flex: 50%;
-      }
-
-      h3 {
-        flex: 50%;
-        word-break: unset;
-      }
-    }
-
-    &::-webkit-scrollbar-track {
-      -webkit-box-shadow: transparent;
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar {
-      width: 10px;
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #D9D9D9;
-    }
-
-    hr {
-      margin: 24px 0;
-      border-top: 1px solid $default-lt-button-other;
-    }
-
-    button,
-    a {
-      @include modal-btn;
-    }
-
-    img {
-      @include modal-img;
-    }
-
-    h2,
-    h4,
-    p {
-      @include modal-text-color;
-    }
-
-    h1,
-    h2 {
-      @include modal-h2;
-      margin-bottom: 32px;
-    }
-
-    h3,
-    h4,
-    h5,
-    h6, {
-      @include modal-h4;
-      margin-top: 0;
-    }
-
-    b,
-    strong,
-    span {
-      @include modal-b;
-    }
-
-    p {
-      @include modal-p;
-      margin-top: 8px;
-      margin-bottom: 32px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__modal-body {
-    padding: 40px;
-
-    @include modal-max-width {
-      padding: 20px;
-    }
-  }
-
-  &__close-button {
-    z-index: 20;
-    width: 24px;
-    font-size: $lt-player-font-size-xxxl2 !important;
-    line-height: 1;
-    padding: 0;
-    text-align: center;
-    cursor: pointer;
-    border-radius: 0.25rem;
-    background-color: transparent;
-    color: $default-lt-button-color;
-    transition: color 0.12s ease-in-out;
-    position: absolute;
-    top: 40px;
-    right: 40px;
-    margin-top: 0 !important;
-
-    @include modal-max-width {
-      top: 20px;
-      right: 20px;
-    }
-  }
-
-  &__close-button:hover {
-    color: #d75b4c;
-  }
-}

package/src/assets/sass/components/_range.scss

@@ -1,33 +0,0 @@
-.plyr--full-ui.plyr--video {
-  input[type=range] {
-    cursor: pointer;
-
-    &:active {
-      outline: unset;
-    }
-
-    &::-moz-range-progress {
-      @extend %input-range--moz-range-progress;
-    }
-
-    &::-webkit-slider-runnable-track {
-      @extend %input-range--webkit-slider-runnable-track;
-    }
-
-    &::-moz-range-track {
-      @extend %input-range--moz-range-track;
-    }
-
-    &::-webkit-slider-thumb {
-      @extend %input-range--webkit-slider-thumb;
-    }
-
-    &::-moz-range-thumb {
-      @extend %input-range--moz-range-thumb;
-    }
-
-    &::-ms-thumb {
-      @extend %input-range--ms-thumb;
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-// Add cores
-@import "fonts";
-@import "player";
-@import "typography";
-
-.lt-player-onload-poster {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-

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

@@ -1,55 +0,0 @@
-//---------------------------------------------
-//
-//  Fonts
-//
-//    1. Loading Mixins
-//    2. Loading Fonts
-//    3. Loading Icons CSS
-//
-//---------------------------------------------
-
-//---------------------------------------------
-// 1. Loading Mixins
-//---------------------------------------------
-
-//---------------------------------------------
-// 2. Loading Fonts
-//---------------------------------------------
-
-//---------------------------------------------
-// MuseoSans
-//---------------------------------------------
-
-@font-face {
-  font-family: "MuseoSans";
-  src: url('../../fonts/museo/MuseoSans-100.otf') format('opentype');
-  font-weight: 100;
-}
-
-@font-face {
-  font-family: "MuseoSans";
-  src: url('../../fonts/museo/MuseoSans-300.otf') format('opentype');
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: "MuseoSans";
-  src: url('../../fonts/museo/MuseoSans-500.otf') format('opentype');
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: "MuseoSans";
-  src: url('../../fonts/museo/MuseoSans-700.otf') format('opentype');
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "MuseoSans";
-  src: url('../../fonts/museo/MuseoSans-900.otf') format('opentype');
-  font-weight: 900;
-}
-
-//---------------------------------------------
-// 3. Loading Icons CSS
-//---------------------------------------------

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

@@ -1,71 +0,0 @@
-.lt-player-orientation--portrait {
-  .plyr {
-    iframe,
-    video {
-      border-radius: 0 0 0 32px !important;
-      background: $default-lt-player-black !important;
-    }
-
-    video {
-      background: transparent !important;
-    }
-  }
-}
-
-// THIS MUST STAY - DO NOT DELETE
-.poster-lt-player-share,
-.mini-player-control {
-  visibility: hidden;
-}
-
-.plyr__video-wrapper {
-  background: transparent !important;
-}
-
-.plyr {
-  z-index: unset!important;
-  width: 100%;
-  &__video-embed {
-
-    &__container {
-      transform: none!important;
-      position: unset!important;
-      padding-bottom: 0!important;
-    }
-
-    &__poster {
-      background-size: cover!important;
-      background-repeat: no-repeat!important;
-      background-position: center center!important;
-    }
-  }
-}
-
-.lt-player-portrate--mobile {
-  .fullscreen-custom-control {
-    display: none !important;
-  }
-}
-
-.lt-player-wrapper {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.lt-player {
-  border-radius: 0 0 0 30px;
-  overflow: hidden;
-
-  &.fullscreen-disabled {
-    .fullscreen-custom-control {
-      display: none;
-    }
-  }
-}
-
-.lt-player-orientation--landscape {
-  .lt-player-wrapper {
-    object-fit: contain;
-  }
-}