@latest-thinking/lt-player 1.0.5 → 1.0.6-b

package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss

@@ -3,19 +3,18 @@
     &__xs {
       .lt-player-notification {
         .lt-player-video-content {
-          padding: 0 1rem;
+          padding: 0 16px;
 
           .poster-title {
             @extend %line-clamp-3;
             @include line-clamp-3;
-            font-size: .8rem;
+            font-size: $lt-player-font-size-xs;
           }
 
           .poster-paragraph {
             &__content {
-              font-size: .9rem;
+              font-size: 14px;
             }
-
           }
         }
       }
@@ -25,7 +24,7 @@
       .lt-player-notification {
         .lt-player-video-content {
           .poster-title {
-            font-size: 1rem;
+            font-size: $lt-player-font-size-base;
           }
         }
       }
@@ -37,11 +36,14 @@
   width: 100%;
   height: 100%;
   display: flex;
-  position: relative;
+
+  &.portrait {
+    position: relative;
+  }
 
   &__notification-button-state {
     position: absolute;
-    top: 40%;
+    top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 
@@ -52,7 +54,7 @@
       @extend %lt-player-btn;
       @include dark-btn;
       background: rgba(39, 40, 42, 0.5);
-      padding: 1rem;
+      padding: 16px;
     }
 
     .active {
@@ -63,16 +65,16 @@
 
   .lt-player-video-content {
     position: absolute;
-    bottom: 5rem;
+    bottom: 176px;
     text-align: left;
     display: flex;
-    padding: 0 1.5rem;
+    padding: 0 24px;
     width: 100%;
-    justify-content: space-between;
+    user-select: none;
+    align-items: end;
 
     .content__body {
       z-index: 2;
-      margin-top: auto;
       width: 100%;
     }
 
@@ -80,16 +82,13 @@
       @extend %line-clamp-3;
       @include line-clamp-4;
       color: $default-lt-player-white !important;
-      font-size: 1.313rem;
+      font-size: $lt-player-font-size-xxl;
       font-weight: $lt-player-font-weight-lg;
       line-height: $lt-player-line-height;
       margin: 0;
     }
 
     .poster-paragraph {
-
-      margin-bottom: 3rem;
-
       &__content {
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -97,11 +96,11 @@
         word-wrap: break-word;
         text-overflow: ellipsis;
         overflow: hidden;
-
+        font-size: $lt-player-font-size-base;
         font-weight: $lt-player-font-weight-sm;
         color: $default-lt-player-white !important;
         margin-bottom: 0;
-        max-height: 3.1rem;
+        max-height: 50px;
         transition: max-height 0.3s ease-in-out;
       }
 
@@ -119,38 +118,37 @@
     border: none;
     margin: 0;
     text-decoration: none;
-    font-size: 0.8rem;
+    font-size: $lt-player-font-size-xs;
     color: white;
     cursor: pointer;
     position: absolute;
-    bottom: 6rem;
-    right: 6rem;
+    bottom: 144px;
+    right: 96px;
     z-index: 8;
   }
 
-
-  .lt-player-rewind-area {
+  .lt-player-rewind-area,
+  .lt-player-forward-area {
     touch-action: inherit!important;
     width: 100%;
     height: 100%;
-    z-index: 3;
+    z-index: 4;
   }
 
-  .lt-player-rewind {
+  .lt-player-rewind,
+  .lt-player-forward {
     width: 50%;
-    height: 130%;
-    top: -10rem;
-    display:flex;
-    flex-direction: row;
+    top: 10%;
+    display: flex;
     position: absolute;
     text-align: center;
-    border-radius:0 100% 100% 0;
-    left: 0;
-
+    border-radius: 100% 0 0 100%;
+    height: unset;
+    bottom: 10%;
 
     &__icon-wrapper {
       display: flex;
-      padding: 0 .5rem;
+      padding: 0 8px;
       user-select: none;
 
       &.rotate {
@@ -164,83 +162,48 @@
 
     &__icon {
       display: flex;
-      justify-content:flex-start;
-      align-items:center;
-
+      justify-content: flex-start;
+      align-items: center;
       color: rgba(255,255,255, 1);
       user-select: none;
-
-      &__portrait {
-        margin: auto auto 18rem 3rem;
-      }
-
-      &__landscape {
-        margin: auto auto 13rem 4rem;
-      }
     }
 
     span {
-      font-size: 12px;
+      font-size: $lt-player-font-size-xs;
       user-select: none;
     }
-
-  }
-
-  .lt-player-forward-area {
-    touch-action: inherit!important;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
   }
 
-  .lt-player-forward {
-    width: 50%;
-    height: 130%;
-    top: -10rem;
-    display:flex;
-    flex-direction: row;
-    position: absolute;
-    text-align: center;
-    border-radius:100% 0 0 100%;
-    right: 0;
+  .lt-player-rewind {
+    left: 0;
 
-    &__icon-wrapper {
-      display: flex;
-      padding: 0 .5rem;
+    &__icon {
+      flex-direction: row-reverse;
 
-      &.rotate {
-        rotate: 180deg;
+      &__portrait {
+        margin: auto auto auto 48px;
       }
 
-      img {
-        max-width: 20px;
+      &__landscape {
+        margin: auto auto auto 64px;
       }
     }
+  }
 
-    &__icon {
-      display: flex;
-      justify-content:flex-start;
-      align-items:center;
-
-      color: rgba(255,255,255, 1);
+  .lt-player-forward {
+    right: 0;
 
+    &__icon {
       &__portrait {
-        margin: auto 3rem 18rem auto;
+        margin: auto 48px auto auto;
       }
 
       &__landscape {
-        margin: auto 4rem 13rem auto;
+        margin: auto 64px auto auto;
       }
-
     }
-
-    span{
-      font-size:12px;
-    }
-
   }
 
-
   .lt-player-notify {
     transition: background 0.8s;
     //background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;

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

@@ -6,7 +6,30 @@
     &__controls-enable,
     &__controls-enable-settings {
       .top-controllers {
-        padding: 2rem 2rem 0 2rem;
+        padding: 40px 40px 0;
+
+        &__background {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.lt-player-landscape--mobile,
+.lt-player-landscape--desktop {
+  &.lt-player--landscape {
+    &__xxs {
+      .plyr {
+        &__controls {
+          .top-controllers {
+            padding: 10px;
+
+            button {
+              @include buttons-xs;
+            }
+          }
+        }
       }
     }
   }
@@ -19,7 +42,7 @@
       .plyr {
         &__controls {
           .top-controllers {
-            padding: 1rem;
+            padding: 16px;
 
             button {
               @include buttons-xs;
@@ -43,10 +66,10 @@
   &__controls-enable,
   &__controls-enable-settings {
     .top-controllers {
-      z-index: 10;
       width: 100%;
-      height: 29%;
-      padding: 1.5rem 1.5rem 0 1.5rem;
+      padding: 24px 24px 0 24px;
+      position: absolute;
+
       button {
         @extend %lt-player-btn;
         @include dark-btn;
@@ -60,17 +83,23 @@
         height: 20%;
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
         rotate: 180deg;
+        display: none;
       }
 
       &__body {
         display: flex;
         justify-content: space-between;
 
-        &__left {
+        &__left,
+        &__right {
           display: flex;
           flex-direction: column;
-          align-items: start;
-          flex: 0 0 20%
+          flex: 0 0 12%;
+          z-index: 5;
+        }
+
+        &__left {
+          align-items: flex-start;
         }
 
         &__center {
@@ -78,10 +107,7 @@
         }
 
         &__right {
-          display: flex;
-          flex-direction: column;
           align-items: end;
-          flex: 0 0 20%
         }
 
         &__center {
@@ -101,7 +127,7 @@
         &__right {
 
           .mini-player-control {
-            margin-top: 1rem;
+            margin-top: 16px;
           }
         }
       }
@@ -159,4 +185,4 @@
   //  }
   //
   //}
-}
+}

package/src/components/LTPlayerDevMethode.ts

@@ -8,9 +8,11 @@ export namespace LTPlayerDevMethode {
     export class Player  {
 
         player: Plyr
+        instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
 
-        constructor(player: Plyr) {
-            this.player = player;
+        constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            this.player = instance.plyr;
+            this.instance = instance
         }
 
        play() {
@@ -77,7 +79,9 @@ export namespace LTPlayerDevMethode {
                let miniPlayer = {
                    controls : playerContainer.querySelector('.lt-player-mini-player-controls'),
                    background: playerContainer.querySelector('.lt-player-mini-player-background'),
-                   enable: playerContainer.querySelector('.lt-player-mini-enable')
+                   enable: playerContainer.querySelector('.lt-player-mini-enable'),
+                   size_land: playerContainer.querySelector(`.lt-player-mini-1`),
+                   size_port: playerContainer.querySelector(`.lt-player-mini-2`)
                };
 
                if (miniPlayer.controls) {
@@ -88,6 +92,14 @@ export namespace LTPlayerDevMethode {
                    miniPlayer.background.remove();
                }
 
+               if (miniPlayer.size_land) {
+                   miniPlayer.size_land.classList.remove(`lt-player-mini-1`)
+               }
+
+               if (miniPlayer.size_port) {
+                   miniPlayer.size_port.classList.remove(`lt-player-mini-2`)
+               }
+
                if (miniPlayer.enable) {
                    miniPlayer.enable.classList.remove('lt-player-mini-enable')
                }
@@ -106,6 +118,14 @@ export namespace LTPlayerDevMethode {
            exitFullScreen();
 
        }
+
+        enterMiniPlayer() {
+            this.instance.miniPlayer.enterMiniPlayer();
+       }
+
+       exitMiniPlayer() {
+           this.instance.miniPlayer.exitMiniPlayer(this.player);
+       }
     }
 
     export class Preload {

package/src/components/LTPlayerHls.ts

@@ -0,0 +1,29 @@
+import {LTPlayer} from "./LTPlayerType";
+import {LTPlayerConfig} from "./config/LTPlayerConfig";
+import Hls from "hls.js";
+import {defaultType} from "../global/types/ModuleTypes";
+
+export class LTPlayerHls {
+    instance : LTPlayer.LandscapeType | LTPlayer.PortraitType
+    config : LTPlayerConfig
+    playerSettings : defaultType
+
+    hlsInstance : Hls
+
+    constructor(instance : LTPlayer.LandscapeType | LTPlayer.PortraitType, playerSettings : defaultType) {
+        this.instance = instance;
+        this.config = instance.playerConfig;
+        this.playerSettings = playerSettings;
+        this.hlsInstance = new Hls();
+    }
+
+    init() {
+        if (Hls.isSupported()) {
+            this.hlsInstance.loadSource(this.config.getVideoUrl().videoUrl);
+            this.hlsInstance.attachMedia(this.config.getPlayerElementContainer().querySelector('video'));
+            this.hlsInstance.on(Hls.Events.MANIFEST_PARSED,function() {
+                console.log('MANIFEST_PARSED');
+            });
+        }
+    }
+}

package/src/components/LTPlayerSetup.ts

@@ -85,6 +85,7 @@ export class LTPlayerSetup {
             if (checkVersion(playerConfig.version)) {
                 return new Promise((resolve, reject) => {
                     playerConfig.body.playerType = 2;
+
                     resolve(this.setType(playerConfig, playerContainer));
                     reject(null);
                 });
@@ -193,19 +194,14 @@ export class LTPlayerSetup {
         }
 
         switch (videoData.type) {
-
             case 'embedded':
                 return processEmbed()
             case 'video':
                 return processVideo();
 
         }
-
     }
 
-
-
-
     /**
      * Set Additional Info
      * @param playerConfig
@@ -214,15 +210,24 @@ export class LTPlayerSetup {
 
         const additionalInfoContainer:HTMLElement = playerConfig.body.playerContainer.querySelector('.lt-player-additional-info');
 
-        if (!additionalInfoContainer) {
-            this.additionalInfoService = null;
+        if (additionalInfoContainer) {
+            this.additionalInfoService = new LTPLayerAddInfo.Controller();
+            this.additionalInfoService.setContainer(additionalInfoContainer);
             return;
         }
 
-        this.additionalInfoService = new LTPLayerAddInfo.Controller();
-        this.additionalInfoService.set(additionalInfoContainer);
 
+        if (playerConfig.body.additionalInfo !== undefined && Object.keys(playerConfig.body.additionalInfo).length > 0) {
+            this.additionalInfoService = new LTPLayerAddInfo.Controller();
+            this.additionalInfoService.setConfig(playerConfig.body.additionalInfo);
+            return;
+        }
+
+
+        this.additionalInfoService = null;
         return;
+
+
     }
 
     /**