@latest-thinking/lt-player 1.1.0-k → 1.1.0-m

package/examples/samples/vtt/demo.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.500 --> 00:00:20.000
+The Web is always changing and the way we access it is changing and the way we access it is changing<br> Hello <br> and the way we access it is changing
+
+00:00:20.500 --> 00:00:60.300
+and the way we access it is changing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.1.0-k",
+  "version": "1.1.0-m",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

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

@@ -50,4 +50,18 @@
   .fullscreen-custom-control {
     display: none !important;
   }
+}
+
+.lt-player-wrapper {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.lt-player {
+  &.fullscreen-disabled {
+    .fullscreen-custom-control {
+      display: none;
+    }
+  }
 }

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

@@ -21,7 +21,6 @@
     background: none!important;
     display: flex!important;
     flex-direction: column;
-    justify-content: space-between!important;
     position: relative;
     padding: 0!important;
   }

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

@@ -316,3 +316,71 @@
     }
   }
 }
+
+.plyr__controls {
+  opacity: 1 !important;
+}
+
+
+.plyr__controls {
+  .top-controllers {
+    //position: unset !important;
+    //margin-bottom: auto;
+  }
+
+  .bottom-controller {
+    //height: unset !important;
+    //position: unset !important;
+  }
+}
+
+.plyr__controls .settings-controllers {
+  //padding: 0 !important;
+  //position: unset !important;
+}
+
+.lt-player-orientation--portrait .plyr__progress--wrapper {
+  //position: unset !important;
+}
+
+.lt-player-notification {
+  //position: unset !important;
+  //width: 100% !important;
+  //height: unset !important;
+  //display: unset !important;
+  //padding: 20px 20px 28px 20px;
+}
+
+.lt-player-orientation--portrait .lt-player-notification .lt-player-video-content {
+  //padding: 0 !important;
+}
+
+.lt-player-orientation--portrait .plyr__controls .bottom-controller {
+  //padding: 0 20px 28px 20px !important;
+}
+
+.plyr__controls .bottom-controller .volume-control-enable {
+  //position: absolute !important;
+}
+
+.lt-player-rewind-area {
+  //position: absolute;
+  //left: 0;
+  //width: 50% !important;
+  //top: 0;
+}
+
+.lt-player-forward-area {
+  //position: absolute;
+  //right: 0;
+  //width: 50% !important;
+  //top: 0;
+}
+
+.lt-player-notification .lt-player-video-content {
+  //position: unset !important;
+}
+
+.plyr.plyr--full-ui .plyr--video, .plyr__controls {
+  //justify-content: unset !important;
+}

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

@@ -255,11 +255,9 @@
       left: 0;
       background: $default-lt-player-white;
       border-radius: 0 0 0 30px;
-      padding: 0 0 32px 0;
       bottom: 0;
       opacity: 0;
 
-
       .line-button {
         @extend %line-button;
       }

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

@@ -1,30 +1,34 @@
-.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: none;
+
+  span {
+    &:empty {
+      display: none;
     }
   }
 }
 
-.plyr__caption {
-  display: flex!important;
-  justify-content: center!important;
-  margin: auto!important;
-  width: 75%;
-  color: $default-lt-player-white !important;
-  background-color: $default-lt-player-black !important;
-  font-size: $lt-player-font-size-lg !important;
-  line-height: $lt-player-line-height !important;
-  padding: 8px 12px !important;
-  font-family: $lt-font-family-base !important;
-  white-space: unset !important;
-}
+.lt-player-custom-captions {
+  margin-bottom: 16px;
 
-.plyr__captions span:empty {
-  display: none!important;
+  span {
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    width: 75%;
+    color: $default-lt-player-black;
+    background-color: rgba(216, 216, 70, 0.7);
+    font-size: $lt-player-font-size-lg;
+    line-height: $lt-player-line-height;
+    font-weight: $lt-player-font-weight-md;
+    padding: 8px 12px;
+    border-radius: 40px;
+    font-family: "MuseoSans", sans-serif;
+    white-space: unset;
+    box-decoration-break: clone;
+
+    &:empty {
+      padding: 0;
+    }
+  }
 }

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

@@ -5,23 +5,18 @@
     z-index: 9;
 
     &--wrapper {
-      position: absolute;
       width: 100%;
       padding: 0 10px;
-      bottom: 50px;
     }
   }
 
   &__controls {
     .bottom-controller {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 36%;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       padding: 15px 10px;
+      width: 100%;
       max-width: 100%;
 
       button {
@@ -104,7 +99,7 @@
         align-items: flex-end;
         margin-top: 0;
         margin-bottom: 0;
-        width: 75px;
+        width: 90px;
         font-size: $lt-player-font-size-sm;
         font-weight: $lt-player-font-weight-sm;
         color: $default-lt-player-white !important;
@@ -153,7 +148,7 @@
       }
 
       .volume-control-enable {
-        position: relative;
+        position: absolute;
         display: flex;
         height: 200px;
         justify-content: center;
@@ -267,16 +262,13 @@
   .plyr {
     &__progress {
       &--wrapper {
-        width: 100%;
         padding: 0 16px;
-        position: absolute;
-        bottom: 56px;
       }
     }
 
     &__controls {
       .bottom-controller {
-        padding: 16px;
+        padding: 0 16px 20px;
 
         button {
           @include buttons-xs;
@@ -318,13 +310,12 @@
       &__progress {
         &--wrapper {
           padding: 0 20px;
-          bottom: 84px;
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 20px 20px 28px 20px;
+          padding: 0 20px 28px 20px;
 
           button {
             @include buttons-normal;
@@ -368,7 +359,6 @@
       &__progress {
         &--wrapper {
           padding: 0 20px;
-          bottom: 65px;
         }
       }
 
@@ -414,6 +404,7 @@
 
           &__volume_control {
             display: flex;
+            left: 100px;
           }
 
           .mini-player-control {
@@ -448,7 +439,6 @@
       &__progress {
         &--wrapper {
           padding: 0 40px;
-          bottom: 81px;
         }
       }
 

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

@@ -2,12 +2,7 @@
 
 .lt-player-notification {
   width: 100%;
-  height: 100%;
-  display: flex;
-
-  &.portrait {
-    position: relative;
-  }
+  padding: 20px 20px 28px 20px;
 
   &__notification-button-state {
     position: absolute;
@@ -32,11 +27,9 @@
   }
 
   .lt-player-video-content {
-    position: absolute;
-    bottom: 110px;
     text-align: left;
     display: flex;
-    padding: 0 16px;
+    padding: 0;
     width: 100%;
     user-select: none;
     align-items: end;
@@ -98,9 +91,19 @@
   .lt-player-rewind-area,
   .lt-player-forward-area {
     touch-action: inherit !important;
-    width: 100%;
+    width: 50%;
     height: 100%;
     z-index: 4;
+    position: absolute;
+    top: 0;
+  }
+
+  .lt-player-forward-area {
+    right: 0;
+  }
+
+  .lt-player-rewind-area {
+    left: 0;
   }
 
   .lt-player-rewind,
@@ -225,9 +228,6 @@
   .lt-player-orientation--portrait {
     .lt-player-notification {
       .lt-player-video-content {
-        padding: 0 20px;
-        bottom: 136px;
-
         .poster-title {
           @extend %line-clamp-3;
           @include line-clamp-3;

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

@@ -14,7 +14,7 @@
     .top-controllers {
       width: 100%;
       padding: 10px 10px 0;
-      position: absolute;
+      margin-bottom: auto;
 
       button {
         @extend %lt-player-btn;

package/src/components/LTPlayerType.ts

@@ -128,6 +128,7 @@ export namespace LTPlayer {
 
             if (this.playerConfig.getFullscreenMode()) {
                 Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
+                this.playerConfig.getPlayerElementContainer().classList.add('fullscreen-disabled');
             }
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');

package/src/components/LTPlayerUpdate.ts

@@ -12,7 +12,7 @@ export class LTPlayerUpdate {
     }
 
     updatePlayer(config: defaultType) {
-        this.updateSource(config.body.videoUrl);
+        this.updateVideo(config.body.videoUrl, config.body.posterImage);
         this.updateTitle(config.body.videoParagraph);
         this.updateAuthor(config.body.videoTitle);
         this.updateChapters(config);
@@ -24,11 +24,13 @@ export class LTPlayerUpdate {
         this.player.playerControl.initChapters(config.body.chapters);
     }
 
-    updateSource(videoUrl: string) {
+    updateVideo(videoUrl: string, poster: string) {
+        const video = document.querySelector('video');
+        video.poster = poster;
         if (Hls.isSupported()) {
             this.player.hls.hlsInstance.detachMedia();
             this.player.hls.hlsInstance.loadSource(videoUrl);
-            this.player.hls.hlsInstance.attachMedia(document.querySelector('video'));
+            this.player.hls.hlsInstance.attachMedia(video);
         } else {
             document.querySelector('video').src = videoUrl;
         }

package/src/components/config/LTPlayerConfig.ts

@@ -6,6 +6,7 @@ export class LTPlayerConfig {
 
     private configData: playerConfigType = {
         version : null,
+        alwaysDisplayControls: false,
         embed: false,
         preload: false,
         autoPlay : false,
@@ -94,6 +95,10 @@ export class LTPlayerConfig {
 
     }
 
+    isAlwaysDisplayControls() {
+        return this.configData.alwaysDisplayControls
+    }
+
     getObjectFit() {
         return this.configData.videoObjectFit
     }

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -15,6 +15,8 @@ export namespace LTPlayerConfigProcessor {
 
         mapByVersion(name: string, value : any) {
             switch (name) {
+                case 'alwaysDisplayControls':
+                    return value;
                 case 'embed':
                     return Processor.processEmbed(value, this.version);
                 case 'preload':
@@ -61,14 +63,14 @@ export namespace LTPlayerConfigProcessor {
 
     export class Processor {
 
-        static processObserve(data : defaultType, version : number) {
+        static processObserve(data: defaultType, version: number) {
 
-            let output : defaultType = {
-                width : false,
-                height : false
+            let output: defaultType = {
+                width: false,
+                height: false
             }
 
-            if(!data) {
+            if (!data) {
                 return;
             }
             if (version === 1) {
@@ -79,7 +81,7 @@ export namespace LTPlayerConfigProcessor {
                 return;
             }
 
-            const setPropriety = (value : boolean | string | number) : boolean => {
+            const setPropriety = (value: boolean | string | number): boolean => {
                 if (!value) {
                     return false;
                 }
@@ -109,9 +111,9 @@ export namespace LTPlayerConfigProcessor {
             return output
         }
 
-        static processChapters(data : defaultType, version : number) {
+        static processChapters(data: defaultType, version: number) {
 
-            if(!data) {
+            if (!data) {
                 return;
             }
 
@@ -128,19 +130,19 @@ export namespace LTPlayerConfigProcessor {
         }
 
 
-        static processDefaultConfig(data : defaultType, version : number) {
-            let outputData : defaultType = {
-                speed : {
-                    selected : 1,
-                    captions : false,
+        static processDefaultConfig(data: defaultType, version: number) {
+            let outputData: defaultType = {
+                speed: {
+                    selected: 1,
+                    captions: false,
                     update: true
                 },
-                captions : {
-                    active : false
+                captions: {
+                    active: false
                 },
-                clickToPlay : false,
-                playsinline : true,
-                pip : false
+                clickToPlay: false,
+                playsinline: true,
+                pip: false
             }
 
             if (!data) {
@@ -167,9 +169,9 @@ export namespace LTPlayerConfigProcessor {
 
         }
 
-        static processVimeoConfig(data : defaultType, version : number) {
+        static processVimeoConfig(data: defaultType, version: number) {
 
-            let outputData : defaultType = {
+            let outputData: defaultType = {
                 controls: false,
                 active: false,
                 gesture: 'media',
@@ -191,7 +193,7 @@ export namespace LTPlayerConfigProcessor {
                 return outputData;
             }
 
-            if (Object.keys(data).length === 0){
+            if (Object.keys(data).length === 0) {
                 return outputData;
             }
 
@@ -206,21 +208,21 @@ export namespace LTPlayerConfigProcessor {
             return outputData;
         }
 
-        static processShareData(data : defaultType, version : number) {
+        static processShareData(data: defaultType, version: number) {
             if (!data) {
                 return null
             }
 
             type shareDataConfig = {
-                canonicalUrl : string,
-                embedUrl : string,
-                title : string
+                canonicalUrl: string,
+                embedUrl: string,
+                title: string
             } | null
 
-            let outputData : shareDataConfig = {
-                canonicalUrl : undefined,
-                embedUrl : undefined,
-                title : undefined
+            let outputData: shareDataConfig = {
+                canonicalUrl: undefined,
+                embedUrl: undefined,
+                title: undefined
             }
 
             if (version === 1) {
@@ -251,7 +253,7 @@ export namespace LTPlayerConfigProcessor {
             return outputData;
         }
 
-        static processPlayerContainer(data : Element | defaultType, version : number) {
+        static processPlayerContainer(data: Element | defaultType, version: number) {
             if (!data) {
                 return null
             }
@@ -263,7 +265,7 @@ export namespace LTPlayerConfigProcessor {
             return data;
         }
 
-        static processVideoUrl(data : string | defaultType, version : number) {
+        static processVideoUrl(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -276,14 +278,14 @@ export namespace LTPlayerConfigProcessor {
                 }
             }
 
-            type configData = {videoUrl : string, videoType : string, embedId : string, embedHash : string, origin : string};
+            type configData = { videoUrl: string, videoType: string, embedId: string, embedHash: string, origin: string };
 
-            let outputData : configData = {
-                videoUrl : undefined,
-                videoType : undefined,
-                embedHash : undefined,
-                embedId : undefined,
-                origin : undefined
+            let outputData: configData = {
+                videoUrl: undefined,
+                videoType: undefined,
+                embedHash: undefined,
+                embedId: undefined,
+                origin: undefined
             }
 
             if (!Helper.isValidHttpUrl(data)) {
@@ -332,7 +334,7 @@ export namespace LTPlayerConfigProcessor {
             return outputData;
         }
 
-        static processVideoParagraph(data : string | defaultType, version : number) {
+        static processVideoParagraph(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -346,14 +348,14 @@ export namespace LTPlayerConfigProcessor {
                 }
             }
 
-            if (typeof data === 'string' && /[a-zA-Z]/.test(data)){
+            if (typeof data === 'string' && /[a-zA-Z]/.test(data)) {
                 outputData = data;
             }
 
             return outputData;
         }
 
-        static processPosterImage(data: string | defaultType, version : number) {
+        static processPosterImage(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -374,7 +376,8 @@ export namespace LTPlayerConfigProcessor {
             console.error(`Set valid url for poster image config item => posterImage : ${data} `);
             return undefined;
         }
-        static processVideoTitle(data : string | defaultType, version : number) {
+
+        static processVideoTitle(data: string | defaultType, version: number) {
 
             if (!data) {
                 return null
@@ -389,20 +392,21 @@ export namespace LTPlayerConfigProcessor {
             }
 
             if (data) {
-                if (typeof data === 'string' && /[a-zA-Z]/.test(data)){
+                if (typeof data === 'string' && /[a-zA-Z]/.test(data)) {
                     outputData = data;
                 }
             }
 
             return outputData;
         }
-        static processAutoPlay(data : boolean | string | object, version : number) {
+
+        static processAutoPlay(data: boolean | string | object, version: number) {
 
             if (!data) {
                 return null
             }
 
-            let outputData : boolean = false;
+            let outputData: boolean = false;
 
             if (version === 1) {
                 return outputData;
@@ -423,7 +427,8 @@ export namespace LTPlayerConfigProcessor {
 
             return outputData;
         }
-        static processPreload(data : object | null, version : number) {
+
+        static processPreload(data: object | null, version: number) {
 
             if (!data) {
                 return null
@@ -433,8 +438,8 @@ export namespace LTPlayerConfigProcessor {
                 return
             }
 
-            type outputType = {start : number, stop : number, autoType : boolean, isActive : boolean};
-            const setTimeRange = (config: defaultType, itemOutput : outputType) => {
+            type outputType = { start: number, stop: number, autoType: boolean, isActive: boolean };
+            const setTimeRange = (config: defaultType, itemOutput: outputType) => {
 
                 if (config.start) {
 
@@ -471,7 +476,7 @@ export namespace LTPlayerConfigProcessor {
                 return itemOutput;
             }
 
-            const setPreloadType = (type: defaultType, itemOutput : outputType) => {
+            const setPreloadType = (type: defaultType, itemOutput: outputType) => {
 
                 itemOutput.autoType = true;
 
@@ -491,18 +496,17 @@ export namespace LTPlayerConfigProcessor {
 
             }
 
-            const setActive = (itemOutput : outputType) => {
+            const setActive = (itemOutput: outputType) => {
                 itemOutput.isActive = true;
                 return itemOutput
             }
 
 
-
-            let itemOutput : outputType = {
-                start : 0,
-                stop : 10,
-                isActive : false,
-                autoType : false,
+            let itemOutput: outputType = {
+                start: 0,
+                stop: 10,
+                isActive: false,
+                autoType: false,
 
             };