@latest-thinking/lt-player 1.0.7 → 1.0.8

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

@@ -1,242 +1,316 @@
 @import "../abstracts/variables";
-.lt-player__poster__image-body {
-  position:absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  opacity: 1;
-  transition: all 0.2s ease-in-out;
-}
-
-.lt-player__poster__image-body--preload {
-  opacity: 0;
-  transition: all 0.2s ease-in-out;
-}
-.lt-player__poster__img__set-default {
-  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-}
-.lt-player__poster__background__grey {
-  background-color: grey
-}
-
-.lt-player__poster__img--set-custom {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.lt-player-landscape--desktop {
-  .plyr {
-    .lt-player {
-      &__poster {
-        &__body {
-          .content {
-            &__header {
-              padding: 32px;
-            }
-
-            &__body {
-              padding: 0 32px;
-            }
-
-            &__footer {
-              padding: 32px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-landscape--mobile,
-.lt-player-landscape--desktop {
-  &.lt-player--landscape {
-    &__xxs {
-      .plyr {
-        .lt-player {
-          &__poster {
-            &__body {
-              .content {
-                &__header {
-                  padding: 10px;
-                }
-
-                &__body {
-                  padding: 0 10px;
-
-                  .poster-paragraph {
-                    font-size: 16px;
-                  }
-                }
-
-                &__footer {
-                  padding: 15px 10px;
-
-                  .poster-buttons {
-                    button {
-                      @include buttons-sm;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-portrate--mobile {
-  &.lt-player--portrait {
-    &__xs {
-      .lt-player {
-        &__poster {
-          &__body {
-            .content {
-              &__body {
-                .poster-paragraph {
-                  font-size: 16px;
-                }
-              }
-
-              &__footer {
-                .poster-buttons {
-                  .poster-button-play {
-                    @include buttons-xs;
-                  }
-
-                  .poster-button-watch-now {
-                    font-size: $lt-player-font-size-xs;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
 
 .plyr {
-  &__poster {
-    background-size: cover !important;
-  }
-
-  .no-poster-image {
-    background: black !important;
-  }
-
   .lt-player {
-
     &__preload-hide {
-      opacity: 0!important;
+      opacity: 0 !important;
     }
 
     &__poster {
-      background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
       position: absolute;
-      color: $default-lt-player-white!important;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
+      color: $default-lt-player-white !important;
       z-index: $z_index_first;
 
-      &__body {
+      &__image-body {
+        position:absolute;
         width: 100%;
         height: 100%;
-        display: grid;
-        position: absolute;
-        z-index: 3;
+        z-index: 2;
+        opacity: 1;
+        transition: all 0.2s ease-in-out;
 
-        .content {
-          display: flex;
+        &--preload {
+          opacity: 0;
+          transition: all 0.2s ease-in-out;
+        }
+      }
+
+      &__img {
+        &--set-custom {
+          object-fit: cover;
           width: 100%;
-          flex-direction: column;
-          justify-content: space-between;
+          height: 100%;
+        }
+
+        &__set-default {
           position: absolute;
-          bottom: 0;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 10;
+        }
+      }
 
-          &__header {
-            padding: 24px;
+      &--background {
+        position: absolute;
+        inset: 0;
+        background-color: $default-lt-span-color;
+        z-index: -1;
+      }
 
-            .poster-logo-header {
-              display: flex;
-              align-items: center;
+      &__body {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
 
-              .poster-footer-text {
-                font-size: $lt-player-font-size-base;
-                margin: auto 0;
-                font-weight: $lt-player-font-weight-sm;
-              }
+        &:hover {
+          .poster-paragraph {
+            text-decoration: underline;
+          }
 
-              .logo {
-                display: flex;
+          .content__footer {
+            .poster-buttons {
+              .poster-button-play,
+              .poster-button-watch-now {
+                color: $default-lt-button-color;
+                background-color: darken($default_color_player, 10%);
               }
             }
           }
+        }
 
-          &__body {
-            margin-top: auto;
-            padding: 0 24px;
+        .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 !important;
+              color: $default-lt-player-white;
               font-size: $lt-player-font-size-base;
               font-weight: $lt-player-font-weight-xs;
-              margin: 0 0 8px;
+              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-xxl;
-              margin: 0;
-              color: $default-lt-player-white !important;
-              display: block;
+              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 {
-            padding: 24px;
+            margin-top: auto;
+            padding: 0 25px 25px;
 
             .poster-buttons {
               display: flex;
-              gap: 8px;
+              gap: 5px;
 
               .poster-button-play {
                 @extend %lt-player-btn;
                 @include yellow-btn;
-                padding: 12px 12px;
+                @include buttons-xxs;
+                font-size: $lt-player-font-size-xs;
               }
 
               .poster-button-watch-now {
                 @extend %lt-player-btn;
                 @include yellow-btn;
-                padding: 8px 16px;
+                @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;
-                background-color: $default-lt-button-other;
+                @include gray-btn;
+                @include buttons-xxs;
                 margin-left: auto;
-                padding: 12px 12px;
               }
             }
           }
         }
+      }
+    }
+  }
+}
+
+.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%;
+              }
+            }
 
-        .custom-poster-text {
-          left: 5.62%;
-          right: 5.62%;
-          top: 73.5%;
-          bottom: 22.71%;
+            &__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%;
+              }
+            }
+          }
         }
       }
     }

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

@@ -24,7 +24,6 @@
   }
 
   .settings-controllers-enable {
-    transition:.3s;
     position: absolute;
     width: 100%;
     z-index: 30;
@@ -257,8 +256,9 @@
       background: $default-lt-player-white;
       border-radius: 0 0 0 30px;
       padding: 0 0 32px 0;
-      bottom: -200%;
-      transition:.3s;
+      bottom: 0;
+      opacity: 0;
+
 
       .line-button {
         @extend %line-button;
@@ -273,7 +273,6 @@
     }
 
     .settings-controllers-enable {
-      transition:.3s;
       position: absolute;
       width: 100%;
       z-index: 30;
@@ -281,9 +280,11 @@
       background: $default-lt-player-white;
       border-radius: 0 0 0 30px;
       bottom: 0;
+      opacity: 1;
       display: flex;
       flex-direction: column;
       padding: 0 0 24px 0;
+      border: 1px solid $default-lt-span-color;
 
       &__speed-range {
         padding: 24px 24px 0 24px;
@@ -513,6 +514,7 @@
         transition: none;
         width: 100%;
         border-radius: 0;
+        border: none;
 
         &__subtitles {
           padding: 16px 24px 24px;

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

@@ -108,9 +108,9 @@
           a {
             padding: 0;
 
-            &:first-child {
+            &:hover {
               .share-icon__icon {
-                background: $default_color_player;
+                background-color: $default_color_player;
               }
             }
 
@@ -234,12 +234,6 @@
           a {
             padding: 0;
 
-            &:first-child {
-              .share-icon__icon {
-                background: $default_color_player;
-              }
-            }
-
             .share-icon__icon {
               @extend %center-elements;
               width: 32px;

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

@@ -96,6 +96,7 @@
         bottom: 0;
         height: 40%;
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
+        border-radius: 0 0 0 30px;
       }
 
       &__volume_control {

package/src/components/LTPlayerHls.ts

@@ -14,7 +14,16 @@ export class LTPlayerHls {
         this.instance = instance;
         this.config = instance.playerConfig;
         this.playerSettings = playerSettings;
-        this.hlsInstance = new Hls();
+        this.hlsInstance = new Hls({
+            "enableWorker": true,
+            "lowLatencyMode": true,
+            "backBufferLength": 20,
+            "abrEwmaFastVoD": 1,
+            "autoStartLoad": true,
+            "abrBandWidthUpFactor": 0.95,
+            "maxMaxBufferLength": 15,
+            "abrEwmaDefaultEstimate": 50
+        });
     }
 
     init() {

package/src/components/LTPlayerSetup.ts

@@ -180,6 +180,13 @@ export class LTPlayerSetup {
         const processVideo = () => {
             let videoTag = document.createElement('video');
             videoTag.src = url;
+
+            if (url.includes('.m3u8')) {
+                return new Promise((resolve) => {
+                    resolve('portrait')
+                })
+            }
+
             return new Promise((resolve) => {
                 videoTag.addEventListener( "loadedmetadata", function (e) {
                     if (this.videoWidth > this.videoHeight) {

package/src/components/LTPlayerType.ts

@@ -1,6 +1,6 @@
 import {LTPlayerController} from "../global/controllers/LTPlayerController";
 import {TypeInterface} from "../global/interfaces/TypeInterface";
-import {defaultType, playerConfigType} from "../global/types/ModuleTypes";
+import {defaultType, playerConfigType, plyr} from "../global/types/ModuleTypes";
 import {LTPlayerMini} from "./controls/LTPlayerMini";
 import {LTPlayerConfig} from "./config/LTPlayerConfig";
 import Plyr from "plyr";
@@ -18,6 +18,8 @@ export namespace LTPlayer {
      */
     export class PortraitType extends LTPlayerController implements TypeInterface {
 
+        pausedPlayer: Plyr;
+
         /**
          * Create a new Player instance root element
          * @returns never
@@ -195,6 +197,9 @@ export namespace LTPlayer {
 
 
     export class LandscapeType extends LTPlayerController implements TypeInterface {
+
+        pausedPlayer: Plyr;
+
         /**
          * Create a new Video Player root element
          * @returns never