@latest-thinking/lt-player 1.0.5-n → 1.0.6-a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.5-n",
+  "version": "1.0.6-a",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",
@@ -33,6 +33,7 @@
     "fixed": "^0.3.1",
     "hammerjs": "^2.0.8",
     "handlebars": "^4.7.7",
+    "hls.js": "^1.4.1-0.canary.9078",
     "html-loader": "^3.1.0",
     "json-schema-library": "^7.4.4",
     "mini-css-extract-plugin": "^2.5.1",

package/src/assets/sass/abstracts/_mixins.scss

@@ -73,7 +73,7 @@
 }
 
 @mixin buttons-xs {
-  padding: 8px 8px;
+  padding: 7px 7px;
 
   img {
     width: 16px;

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

@@ -49,6 +49,45 @@
   }
 }
 
+.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 {

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;

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

@@ -171,15 +171,17 @@
       .plyr {
         &__progress {
           &--wrapper {
-            bottom: 70px;
+            padding: 0 10px;
+            bottom: 50px;
           }
         }
 
         &__controls {
           .bottom-controller {
+            padding: 15px 10px;
+
             .play-button {
               padding: 12px;
-              bottom: -2px;
             }
 
             .plyr__controls_speed-button {
@@ -199,6 +201,10 @@
               gap: 16px;
             }
 
+            &__center-buttons {
+              gap: 20px;
+            }
+
             &__previous-chapter-view {
               display: none;
             }
@@ -225,10 +231,6 @@
         &__right-buttons {
           direction: unset;
         }
-
-        &__play-button_body {
-          bottom: -3px;
-        }
       }
     }
   }

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

@@ -16,6 +16,25 @@
   }
 }
 
+.lt-player-landscape--mobile,
+.lt-player-landscape--desktop {
+  &.lt-player--landscape {
+    &__xxs {
+      .plyr {
+        &__controls {
+          .top-controllers {
+            padding: 10px;
+
+            button {
+              @include buttons-xs;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .lt-player-portrate--mobile,
 .lt-player-portrate--desktop {
   &.lt-player--portrait {
@@ -64,6 +83,7 @@
         height: 20%;
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
         rotate: 180deg;
+        display: none;
       }
 
       &__body {

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/LTPlayerType.ts

@@ -8,8 +8,8 @@ import {LTPlayerDevMethode} from "./LTPlayerDevMethode";
 import {LTPlayerEventsManager} from "./LTPlayerEventsManager";
 import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
 import {LTPlayerEvents} from "./events/LTPlayer";
-import {LTPlayerPosterManager} from "./poster/LTPlayerPosterManager";
-import {config} from "json-schema-library";
+import {Helper} from "../services/Helper";
+import {LTPlayerHls} from "./LTPlayerHls";
 
 export namespace LTPlayer {
 
@@ -45,6 +45,10 @@ export namespace LTPlayer {
                 this.additionalInfoService.init(this, this.playerConfig.getPlayerId(), this.iconService, this.templateService)
             }
 
+            if (Helper.checkIsHls(this.playerConfig.getVideoUrl().videoUrl)){
+                this.hls = new LTPlayerHls(this, undefined);
+            }
+
             this.setEvents();
 
             return true;
@@ -116,7 +120,7 @@ export namespace LTPlayer {
 
             Object.assign(playerSettings, this.playerConfig.getDefaultConfigItems());
 
-            Object.assign(playerSettings, {ratios : '9:16'});
+            Object.assign(playerSettings, {ratio : '9:16'});
 
             if (this.playerConfig.getFullscreenMode()) {
                 Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
@@ -124,7 +128,9 @@ export namespace LTPlayer {
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
 
-            const player = new Plyr(element, playerSettings)
+            const player = new Plyr(element, playerSettings);
+
+            this.playerConfig.setObjectFit(player, 'portrait');
 
             this.windowService.init(this);
 
@@ -216,6 +222,13 @@ export namespace LTPlayer {
             this.miniPlayer = new LTPlayerMini();
             this.setPlayerConfig(configData.body, configData.version);
             this.initPlayer();
+
+
+            if (Helper.checkIsHls(this.playerConfig.getVideoUrl().videoUrl)){
+                this.hls = new LTPlayerHls(this, undefined);
+            }
+
+
             this.setEvents();
 
             return true;
@@ -243,7 +256,7 @@ export namespace LTPlayer {
 
             Object.assign(playerSettings, this.playerConfig.getDefaultConfigItems());
 
-            Object.assign(playerSettings, {ratios : '16:9'});
+            Object.assign(playerSettings, {ratio : '16:9'});
 
             if (this.playerConfig.getFullscreenMode()) {
                 Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
@@ -253,6 +266,8 @@ export namespace LTPlayer {
 
             const player = new Plyr(element, playerSettings);
 
+            this.playerConfig.setObjectFit(player, 'landscape');
+
             this.windowService.init(this);
 
             this.plyr = player;

package/src/components/config/LTPlayerConfig.ts

@@ -1,5 +1,7 @@
 import {playerConfigType} from "../../global/types/ModuleTypes";
 import {LTPlayerConfigProcessor} from "./LTPlayerConfigProcessor";
+import {Helper} from "../../services/Helper";
+import Plyr from "plyr";
 export class LTPlayerConfig {
 
     private configData: playerConfigType = {
@@ -61,6 +63,25 @@ export class LTPlayerConfig {
         })
     }
 
+    setObjectFit(plyr : Plyr, instanceType : string) {
+        if (plyr.isHTML5) {
+
+            const videoTag = plyr.elements.wrapper.querySelector('video');
+
+            if (videoTag) {
+
+                videoTag.addEventListener('loadedmetadata', (event)=> {
+
+                    const type = Helper.getVideoOrientation(videoTag.videoWidth, videoTag.videoHeight);
+
+                    if (type === instanceType) {
+                        videoTag.style.objectFit = 'cover';
+                    }
+                })
+            }
+        }
+    }
+
     setVersion(version : string | number) {
 
         if (typeof version === 'string') {

package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts

@@ -66,11 +66,11 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
 
         myRange.oninput = function() {
             player.speed = parseFloat(values[rangeInput.value]);
-            myValue.innerHTML = values[rangeInput.value];
+            myValue.innerHTML = `${values[rangeInput.value]}X`;
         };
 
         player.speed = parseFloat(String(values[0]));
-        myValue.innerHTML = values[0];
+        myValue.innerHTML = `${values[0]}X`;
     }
     initSaveButton() {
 

package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts

@@ -22,7 +22,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
     setButtonSpeed() {
         let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
         let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
+        playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
         let plyr = this.settingsInstance.playerInstance.plyr;
         let instance = this.settingsInstance.playerInstance;
 
@@ -34,19 +34,19 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                     let playSpeed = plyr.speed + 0.25;
 
                     if (playSpeed > 2) {
-                        playerSpeedButton.innerHTML = '1';
+                        playerSpeedButton.innerHTML = `1x`;
                         plyr.speed = 1;
                         return;
                     }
 
                     if (playSpeed === 1.75) {
                         plyr.speed = playSpeed + 0.25
-                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}`;
+                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
                         return;
                     }
 
                     plyr.speed = playSpeed;
-                    playerSpeedButton.innerHTML = `${playSpeed}`;
+                    playerSpeedButton.innerHTML = `${playSpeed}X`;
 
                     instance.playerControl.mobileEvents.showControls(instance);
                 })

package/src/components/events/LTPlayerCommon.ts

@@ -109,14 +109,13 @@ export class LTPlayerCommon {
     onReadyPlayer() {
 
         //set share button
-        this.player.share.events.desktop.init(this.player);
+        if (this.player.playerConfig.getShareData()) {
+            this.player.share.events.desktop.init(this.player);
+        }
 
-        // this.player.windowService.init(this.player);
         //set poster
         this.player.posterManager.mobileEvents.onload(this.player);
 
-
-
         if (this.player.playerConfig.isAutoPlay()) {
             let playerContainer = this.player.plyr.elements.container;
 

package/src/components/events/LTPlayerDesktop.ts

@@ -59,6 +59,10 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             eventManager.setDefaultSettingsConfig();
 
             if (instance.plyr.isHTML5) {
+
+                if (instance.hls) {
+                    instance.hls.init();
+                }
                 eventManager.onReadyPlayer();
                 eventManager.modal(instance);
                 instance.posterManager.desktopEvents.buttons(instance);

package/src/components/events/LTPlayerMobile.ts

@@ -55,6 +55,11 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             }
 
             if (instance.plyr.isHTML5) {
+
+                if (instance.hls) {
+                    instance.hls.init();
+                }
+
                 eventManager.onReadyPlayer();
                 instance.posterManager.mobileEvents.buttons(instance);