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

package/package.json

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

package/src/assets/sass/components/_modal.scss

@@ -9,7 +9,7 @@
 }
 
 @mixin modal-h4 {
-  font-size: $lt-player-font-size-xxl;
+  font-size: $lt-player-font-size-xxl2;
   font-weight: $lt-player-font-weight-lg;
   margin-bottom: 0;
   margin-top: 16px;
@@ -48,6 +48,17 @@
 
 .lt-player-portrate--mobile {
   &.lt-player--portrait {
+    &__lg,
+    &__md,
+    &__sm,
+    &__xs {
+      .player-lt {
+        &__modal-body {
+          padding: 0;
+        }
+      }
+    }
+
     &__xs {
       .player-lt {
         &__mobile {
@@ -60,7 +71,7 @@
             h6,
             p,
             b,
-            stronb,
+            strong,
             span {
               font-size: $lt-player-font-size-base;
             }
@@ -110,6 +121,7 @@
       text-align: left;
       padding: 16px;
       overflow: auto;
+      font-family: $lt-font-family-base;
 
       button,
       a {
@@ -197,13 +209,35 @@
     transform: translate(-50%, -50%);
     background-color: $default-lt-player-white;
     color: $default-lt-player-modal-color;
-    padding: 32px 40px;
     border-radius: 0;
     font-family: $lt-font-family-base;
     width: 100%;
     max-height: 540px;
-    max-width: 715px;
     overflow: auto;
+    max-width: 620px;
+    padding: 40px 0;
+
+    span {
+      margin-right: 40px;
+    }
+
+    .modal-flex {
+      display: flex;
+      align-items: end;
+      gap: 24px;
+      flex-wrap: wrap;
+
+      img {
+        max-width: 220px;
+        margin-bottom: 0;
+        flex: 50%;
+      }
+
+      h3 {
+        flex: 50%;
+        word-break: unset;
+      }
+    }
 
     &::-webkit-scrollbar-track {
       -webkit-box-shadow: transparent;
@@ -220,7 +254,7 @@
     }
 
     hr {
-      margin: 16px 0;
+      margin: 24px 0;
       border-top: 1px solid $default-lt-button-other;
     }
 
@@ -263,16 +297,24 @@
       @include modal-p;
       margin-top: 8px;
       margin-bottom: 32px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 
+  &__modal-body {
+    padding: 0 40px;
+  }
+
   &__close-button {
     z-index: 20;
     float: right;
     width: 24px;
-    font-size: $lt-player-font-size-xxl2 !important;
+    font-size: $lt-player-font-size-xxxl2 !important;
     line-height: 1;
-    padding: 0 .2em .15em;
+    padding: 0;
     text-align: center;
     cursor: pointer;
     border-radius: 0.25rem;

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

@@ -115,6 +115,7 @@
 
         .content {
           display: flex;
+          width: 100%;
           flex-direction: column;
           justify-content: space-between;
           position: absolute;
@@ -186,6 +187,7 @@
                 @extend %lt-player-btn;
                 background-color: $default-lt-button-other;
                 margin-left: auto;
+                padding: 12px 12px;
               }
             }
           }

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

@@ -7,6 +7,10 @@
     &__controls-enable-settings {
       .top-controllers {
         padding: 40px 40px 0;
+
+        &__background {
+          display: none;
+        }
       }
     }
   }

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;

package/src/components/share/LTPlayerShareEvents.ts

@@ -9,6 +9,7 @@ export namespace LTPlayerShareEvents {
         activeModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
             selectors.shareContainer.classList.remove('share-inactive');
             selectors.shareContainer.classList.add('share-active');
+            this.setCopyButtonsEvents(instance, selectors)
             if (instance.plyr.playing) {
                 this.isPlaying = true;
                 instance.plyr.pause();
@@ -31,13 +32,22 @@ export namespace LTPlayerShareEvents {
                     instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
                     instance.plyr.elements.controls.querySelector('.lt-player-share'),
                 ],
-                shareContainer : instance.plyr.elements.container.querySelector('.share-controller-wrapper')
+                shareContainer : instance.plyr.elements.container.querySelector('.share-controller-wrapper'),
+                copyButtons : instance.plyr.elements.container.querySelectorAll('.share-controller-link')
             };
         }
 
-        copyButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            return instance.plyr.elements.container.querySelectorAll('.share-controller-link');
+        setCopyButtonsEvents(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+            if (selectors.copyButtons.length > 0) {
+                selectors.copyButtons.forEach((button: HTMLElement) => {
+                    button.addEventListener('click', function LTPlayerShareCopy() {
+                        navigator.clipboard.writeText(button.dataset.copy);
+                    })
+
+                })
+            }
         }
+
     }
     export class mobile {
         common : LTPlayerShareEvents.common

package/src/services/ResizeService.ts

@@ -148,7 +148,9 @@ export class ResizeService {
             this.playerInstance.plyr.elements.container.insertAdjacentHTML("afterend", buttonsTemplate);
             let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             inserted.classList.add('lt-player__additional-info__is_set_out-side');
-            deskEvent.set(controller);
+            this.playerInstance.plyr.on('ready', () => {
+                deskEvent.set(controller);
+            })
         }
 
         const createAddInfoButtonsInSide = () => {
@@ -157,12 +159,29 @@ export class ResizeService {
                 addInfoContainer.remove();
             }
 
-            let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
+            if (this.playerInstance.plyr.elements.controls !== undefined) {
+                let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
+
+                controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
+                let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
+                inserted.classList.add('lt-player__additional-info__is_set_in-side');
+
+                deskEvent.set(controller);
+            } else {
+                this.playerInstance.plyr.on('ready', () => {
+
+                    let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
+
+                    controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
+                    let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
+                    inserted.classList.add('lt-player__additional-info__is_set_in-side');
+
+                    deskEvent.set(controller);
+                })
+            }
+
+
 
-            controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-            inserted.classList.add('lt-player__additional-info__is_set_in-side');
-            deskEvent.set(controller);
         }
 
         if (containerWidth >= 380) {

package/src/views/additionalInfo.handlebars

@@ -1,5 +1,30 @@
 {{#modal}}
     {{#mobile}}
+        {{#object_data}}
+            <div class="player-lt__mobile__modal-header">
+                <span class="line-button"></span>
+            </div>
+            <div class="player-lt__mobile__modal-content">
+                {{#abstract}}
+                    <h2>{{abstract.title}}</h2>
+                    <p>{{abstract.description}}</p>
+                    <p>{{abstract.videoDOI}}</p>
+                    <p>{{abstract.videoCitation}}</p>
+                {{/abstract}}
+
+                {{#institution}}
+                    <h2>{{institution.title}}</h2>
+                    <img src="{{institution.image}}" alt="image">
+                    <p>{{institution.institutionName}}</p>
+                    <p>{{institution.description}}</p>
+                {{/institution}}
+
+                {{#bio}}
+                    <h2>{{bio.title}}</h2>
+                    <p>{{bio.description}}</p>
+                {{/bio}}
+            </div>
+        {{/object_data}}
         {{#data}}
                 <div class="player-lt__mobile__modal-header">
                     <span class="line-button"></span>
@@ -10,6 +35,39 @@
         {{/data}}
     {{/mobile}}
     {{#desktop}}
+        {{#object_data}}
+            <div class="player-lt__modal lt-modal-{{id}}">
+                <div class="player-lt__modal-content">
+                    <span class="player-lt__close-button">&times;</span>
+                        <div class="player-lt__modal-body">
+                          {{#abstract}}
+                            <h2>{{abstract.title}}</h2>
+                            <p>{{abstract.description}}</p>
+                            <hr>
+                            <h3>Video DOI</h3>
+                            <p>{{abstract.videoDOI}}</p>
+                            <h3>Video Citation</h3>
+                            <p>{{abstract.videoCitation}}</p>
+                          {{/abstract}}
+
+                          {{#institution}}
+                            <h2>{{institution.title}}</h2>
+                            <div class="modal-flex">
+                              <img src="{{institution.image}}" alt="image">
+                              <h3>{{institution.institutionName}}</h3>
+                            </div>
+                            <hr>
+                            <p>{{institution.description}}</p>
+                          {{/institution}}
+
+                          {{#bio}}
+                            <h2>{{bio.title}}</h2>
+                            <p>{{bio.description}}</p>
+                          {{/bio}}
+                        </div>
+                </div>
+            </div>
+        {{/object_data}}
         {{#data}}
             <div class="player-lt__modal lt-modal-{{id}}">
                 <div class="player-lt__modal-content">