@latest-thinking/lt-player 1.0.5-l → 1.0.5-n

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

@@ -1,7 +1,3 @@
-body {
-  margin: 0 !important;
-}
-
 @import "../../abstracts/variables";
 
 .lt-player-landscape--desktop,
@@ -10,10 +6,10 @@ body {
     &__controls {
       .bottom-controller {
         max-width: 100%;
-        padding: 2rem;
+        padding: 28px 40px;
 
         .play-button {
-          padding: 1rem;
+          padding: 16px;
           bottom: -5px;
         }
 
@@ -46,7 +42,7 @@ body {
         &__previous-chapter-view-wrapper,
         &__next-chapter-view-wrapper {
           display: flex;
-          gap: 1rem;
+          gap: 16px;
           align-items: flex-end;
         }
 
@@ -62,8 +58,9 @@ body {
         &__previous-chapter-view {
           display: flex;
           align-items: flex-end;
-          margin-bottom: .4rem;
+          margin-bottom: 4px;
           width: 100px;
+          font-size: $lt-player-font-size-lg;
           color: $default-lt-player-white !important;
         }
 
@@ -79,19 +76,26 @@ body {
   }
 
   &.lt-player--landscape {
-    &__md {
+    &__lg {
       .plyr {
         &__controls {
           .bottom-controller {
-            .play-button {
-              //padding: .75rem;
-              //bottom: -2px;
+            &__previous-chapter-view {
+              display: none;
             }
 
-            &__center-buttons {
-              //gap: 1rem;
+            &__next-chapter-view {
+              display: none;
             }
+          }
+        }
+      }
+    }
 
+    &__md {
+      .plyr {
+        &__controls {
+          .bottom-controller {
             &__previous-chapter-view {
               display: none;
             }
@@ -108,13 +112,8 @@ body {
       .plyr {
         &__controls {
           .bottom-controller {
-            .play-button {
-              padding: .75rem;
-              bottom: -2px;
-            }
-
             &__center-buttons {
-              gap: 1rem;
+              gap: 20px;
             }
 
             &__previous-chapter-view {
@@ -138,17 +137,55 @@ body {
       .plyr {
         &__controls {
           .bottom-controller {
-            padding: 1.5rem;
+            .plyr__controls_speed-button {
+              width: 32px;
+              height: 32px;
+              font-size: 10px;
+              transition: none;
+            }
+
+            &__left-buttons,
+            &__center-buttons,
+            &__right-buttons {
+              gap: 20px;
+            }
 
+            &__previous-chapter-view {
+              display: none;
+            }
+
+            &__next-chapter-view {
+              display: none;
+            }
+
+            .skip-backward-seconds,
+            .skip-forward-seconds {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    &__xxs {
+      .plyr {
+        &__progress {
+          &--wrapper {
+            bottom: 70px;
+          }
+        }
+
+        &__controls {
+          .bottom-controller {
             .play-button {
-              padding: .75rem;
+              padding: 12px;
               bottom: -2px;
             }
 
             .plyr__controls_speed-button {
               width: 32px;
               height: 32px;
-              font-size: .6rem;
+              font-size: 10px;
               transition: none;
             }
 
@@ -159,7 +196,7 @@ body {
             &__left-buttons,
             &__center-buttons,
             &__right-buttons {
-              gap: .5rem;
+              gap: 16px;
             }
 
             &__previous-chapter-view {
@@ -199,25 +236,36 @@ body {
 
 .lt-player-portrate--mobile,
 .lt-player-portrate--desktop {
+  .plyr {
+    &__progress {
+      &--wrapper {
+        width: 100%;
+        padding: 0 25px;
+        position: absolute;
+        bottom: 90px;
+      }
+    }
+  }
+
   &.lt-player--portrait {
     &__xs {
       .plyr {
         &__controls {
           .bottom-controller {
-            padding: 1rem;
+            padding: 16px;
 
             button {
               @include buttons-xs;
             }
 
             .play-button {
-              padding: .75rem;
+              padding: 12px;
             }
 
             .plyr__controls_speed-button {
               width: 32px;
               height: 32px;
-              font-size: .6rem;
+              font-size: 10px;
               transition: none;
             }
           }
@@ -233,9 +281,9 @@ body {
 
     &--wrapper {
       width: 100%;
-      padding: 0 2rem;
+      padding: 0 40px;
       position: absolute;
-      bottom: 6rem;
+      bottom: 90px;
     }
   }
 
@@ -249,7 +297,7 @@ body {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      padding: 1.5rem;
+      padding: 24px;
 
       button {
         @extend %lt-player-btn;
@@ -295,15 +343,15 @@ body {
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;
-          padding: 1rem;
+          padding: 16px;
         }
       }
 
       &__current {
         display: flex;
         justify-content: space-between;
-        margin-left: -0.5rem;
-        margin-right: -0.5rem;
+        margin-left: -8px;
+        margin-right: -8px;
 
         .plyr {
           &__time {
@@ -327,14 +375,14 @@ body {
             &__area {
               position: absolute;
               rotate: 270deg!important;
-              bottom: 5rem;
+              bottom: 80px;
               max-width: 110px;
               min-width: 80px;
               width: 20%;
 
               .volume_control__background__area__range {
                 color: $default-lt-button-color !important;
-                min-width: 8rem;
+                min-width: 128px;
                 -webkit-appearance: none;
                 appearance: none;
                 background: transparent;
@@ -381,7 +429,7 @@ body {
             }
 
             .volume_control__volume-button-close {
-              bottom: 5rem;
+              bottom: 80px;
               background: $default-lt-player-white;
               display: flex;
               justify-content: center;
@@ -403,7 +451,7 @@ body {
       &__background {
         position: absolute;
         width: 100%;
-        height: 10rem;
+        height: 160px;
         bottom: 0;
         right: 0;
         background: linear-gradient(transparent,rgba(0,0,0,.75))!important;

package/src/assets/sass/sections/controllers/_mini-player.scss

@@ -78,7 +78,7 @@
     &__play-button {
       @extend %lt-player-btn;
       @include yellow-btn;
-      padding: .75rem;
+      padding: 12px;
     }
 
     &__progress__seek {

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;
           }
         }
       }
@@ -55,7 +54,7 @@
       @extend %lt-player-btn;
       @include dark-btn;
       background: rgba(39, 40, 42, 0.5);
-      padding: 1rem;
+      padding: 16px;
     }
 
     .active {
@@ -66,10 +65,10 @@
 
   .lt-player-video-content {
     position: absolute;
-    bottom: 11rem;
+    bottom: 176px;
     text-align: left;
     display: flex;
-    padding: 0 1.5rem;
+    padding: 0 24px;
     width: 100%;
     user-select: none;
     align-items: end;
@@ -83,7 +82,7 @@
       @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;
@@ -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,12 +118,12 @@
     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: 9rem;
-    right: 6rem;
+    bottom: 144px;
+    right: 96px;
     z-index: 8;
   }
 
@@ -149,7 +148,7 @@
 
     &__icon-wrapper {
       display: flex;
-      padding: 0 .5rem;
+      padding: 0 8px;
       user-select: none;
 
       &.rotate {
@@ -170,7 +169,7 @@
     }
 
     span {
-      font-size: 12px;
+      font-size: $lt-player-font-size-xs;
       user-select: none;
     }
   }
@@ -182,11 +181,11 @@
       flex-direction: row-reverse;
 
       &__portrait {
-        margin: auto auto auto 3rem;
+        margin: auto auto auto 48px;
       }
 
       &__landscape {
-        margin: auto auto auto 4rem;
+        margin: auto auto auto 64px;
       }
     }
   }
@@ -196,11 +195,11 @@
 
     &__icon {
       &__portrait {
-        margin: auto 3rem auto auto;
+        margin: auto 48px auto auto;
       }
 
       &__landscape {
-        margin: auto 4rem auto auto;
+        margin: auto 64px auto auto;
       }
     }
   }

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

@@ -6,7 +6,11 @@
     &__controls-enable,
     &__controls-enable-settings {
       .top-controllers {
-        padding: 2rem 2rem 0 2rem;
+        padding: 40px 40px 0;
+
+        &__background {
+          display: none;
+        }
       }
     }
   }
@@ -19,7 +23,7 @@
       .plyr {
         &__controls {
           .top-controllers {
-            padding: 1rem;
+            padding: 16px;
 
             button {
               @include buttons-xs;
@@ -44,7 +48,7 @@
   &__controls-enable-settings {
     .top-controllers {
       width: 100%;
-      padding: 1.5rem 1.5rem 0 1.5rem;
+      padding: 24px 24px 0 24px;
       position: absolute;
 
       button {
@@ -103,7 +107,7 @@
         &__right {
 
           .mini-player-control {
-            margin-top: 1rem;
+            margin-top: 16px;
           }
         }
       }

package/src/components/LTPlayerSetup.ts

@@ -201,12 +201,8 @@ export class LTPlayerSetup {
                 return processVideo();
 
         }
-
     }
 
-
-
-
     /**
      * Set Additional Info
      * @param playerConfig
@@ -215,15 +211,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;
+
+
     }
 
     /**

package/src/components/LTPlayerType.ts

@@ -40,6 +40,11 @@ export namespace LTPlayer {
             this.miniPlayer = new LTPlayerMini();
             this.setPlayerConfig(configData.body, configData.version);
             this.initPlayer();
+
+            if (this.additionalInfoService) {
+                this.additionalInfoService.init(this, this.playerConfig.getPlayerId(), this.iconService, this.templateService)
+            }
+
             this.setEvents();
 
             return true;

package/src/components/addInfo/LTPlayerAddInfoManager.ts

@@ -42,7 +42,7 @@ export namespace LTPLayerAddInfo {
     export class Controller extends LTPlayerAddInfoManager {
         activePlayer: Plyr;
 
-        set(container: HTMLElement) {
+        setContainer(container: HTMLElement) {
             this.container = container;
             this.setDataContent();
         }
@@ -61,6 +61,14 @@ export namespace LTPLayerAddInfo {
             })
         }
 
+        setConfig(config: defaultType) {
+            Object.keys(config).forEach(item => {
+                if (Object.keys(config[item]).length > 0) {
+                    Object.assign(this.additionalData, {[item] : config[item]})
+                }
+            })
+        }
+
         init(player: LTPlayer.PortraitType | LTPlayer.LandscapeType, playerId: number, iconService: IconsService, templateService: TemplateService) {
 
             if (Object.keys(this.additionalData).length === 0) {
@@ -101,7 +109,6 @@ export namespace LTPLayerAddInfo {
 
         setCurrentPlayerPlay(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, event: PlyrEvent) {
             this.activePlayer = event.detail.plyr;
-            console.log(this.activePlayer.elements.container)
         }
         remove(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
@@ -132,7 +139,9 @@ export namespace LTPLayerAddInfo {
 
             switch (this.controller.device) {
                 case 'mobile':
-                    this.mobile();
+                    this.controller.plyr.on('ready', () => {
+                        this.mobile();
+                    })
                     break
                 case 'desktop':
                     this.desktop();
@@ -176,7 +185,6 @@ export namespace LTPLayerAddInfo {
 
 
         desktop() {
-            const playerContainer = this.controller.plyr.elements.container;
             const icons: defaultType = this.controller.iconService.getIconsByComponent('additionalInfo');
 
             let templateData: { target: string; icon: any; }[] = [];
@@ -204,7 +212,6 @@ export namespace LTPLayerAddInfo {
                 exist: 'true',
                 buttons: templateData
             });
-
             this.controller.playerInstance.windowService.setEventAddInfo(buttonsTemplate, this.desktopEvents, this.controller);
         }
     }

package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts

@@ -37,12 +37,25 @@ export namespace LTPlayerAdditionalInfo  {
             }
 
             const  createInformationModal = (info: additionalInformation, key: string) => {
-                let modalTemplate = controller.templateService.getAdditionalInfo({
-                    desktop : true,
-                    modal : true,
-                    id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                    data : info
-                })
+
+                let modalTemplate = null;
+
+                if (typeof info === 'object') {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        desktop : true,
+                        modal : true,
+                        id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                        object_data : true,
+                        [key] : info
+                    })
+                } else {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        desktop : true,
+                        modal : true,
+                        id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                        data : info
+                    })
+                }
 
                 document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
             }
@@ -104,12 +117,24 @@ export namespace LTPlayerAdditionalInfo  {
             }
 
             const  createInformationModal = (info: additionalInformation, key: string) => {
-                let modalTemplate = instance.templateService.getAdditionalInfo({
-                    mobile : true,
-                    modal : true,
-                    data : info,
-                    [controller.device] : true
-                })
+                let modalTemplate = null;
+
+                if (typeof info === 'object') {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        mobile : true,
+                        modal : true,
+                        [controller.device] : true,
+                        object_data : true,
+                        [key] : info
+                    })
+                } else {
+                    modalTemplate = controller.templateService.getAdditionalInfo({
+                        mobile : true,
+                        modal : true,
+                        data : info,
+                        [controller.device] : true
+                    })
+                }
 
                 const playerControlsContainer = instance.plyr.elements.controls;
                 const modal = playerControlsContainer.querySelector('.player-lt__modal__mobile');

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -207,10 +207,6 @@ export namespace LTPlayerConfigProcessor {
                 return null
             }
 
-            if (version === 1) {
-                return null;
-            }
-
             type shareDataConfig = {
                 canonicalUrl : string,
                 embedUrl : string,
@@ -223,6 +219,15 @@ export namespace LTPlayerConfigProcessor {
                 title : undefined
             }
 
+            if (version === 1) {
+                data = {
+                    canonicalUrl: data.canonical_url ?? null,
+                    embedUrl: `${window.location.origin}/embed/${data.id}`,
+                    title: data.title ?? null,
+                };
+            }
+
+
             if (Object.keys(data).length === 0) {
                 return;
             }
@@ -240,7 +245,6 @@ export namespace LTPlayerConfigProcessor {
             }
 
             return outputData;
-
         }
 
         static processPlayerContainer(data : Element | defaultType, version : number) {

package/src/components/events/LTPlayerCommon.ts

@@ -106,7 +106,6 @@ export class LTPlayerCommon {
             }
         });
     }
-
     onReadyPlayer() {
 
         //set share button
@@ -116,9 +115,7 @@ export class LTPlayerCommon {
         //set poster
         this.player.posterManager.mobileEvents.onload(this.player);
 
-        if (this.player.additionalInfoService) {
-            this.player.additionalInfoService.init(this.player, this.player.playerId, this.player.iconService, this.player.templateService);
-        }
+
 
         if (this.player.playerConfig.isAutoPlay()) {
             let playerContainer = this.player.plyr.elements.container;