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

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

@@ -55,11 +55,13 @@ export class ResizeService {
             height: 150
         },
         size : {
-            1067 : "xl",
-            913 : "lg",
-            800 : "md",
-            760 : "sm",
-            266 : "xs"
+            1067 : "xxl",
+            913 : "xl",
+            820 : "lg",
+            760 : "md",
+            640 : "sm",
+            480 : "xs",
+            266 : "xxs"
         }
     }
 
@@ -146,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 = () => {
@@ -155,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">