@latest-thinking/lt-player 1.0.5 → 1.0.6-b

package/src/components/share/{LTPlayerShare.ts → LTPlayerShareManager.ts}

@@ -4,37 +4,55 @@ import {IconsService} from "../../services/IconsService";
 import {TemplateService} from "../../services/TemplateService";
 import {LTPlayerShareEvents} from "./LTPlayerShareEvents";
 import {shareType} from "../../global/types/ModuleTypes";
+import {LTPlayerShareDesktop} from "./LTPlayerShareDesktop";
+import {LTPlayerShareMobile} from "./LTPlayerShareMobile";
 
-export class LTPlayerShare {
+export class LTPlayerShareManager {
     instance: LTPlayer.LandscapeType | LTPlayer.PortraitType
     playerConfig: LTPlayerConfig
     iconService: IconsService
     templateService: TemplateService
-    events: shareType = { desktop: new LTPlayerShareEvents.desktop(), mobile: new LTPlayerShareEvents.mobile() }
-
-    constructor() {
+    events: shareType = {
+        desktop : undefined,
+        mobile : undefined
     }
+    desktop : LTPlayerShareDesktop
+    mobile: LTPlayerShareMobile
 
     init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
         this.instance = instance;
         this.playerConfig = instance.playerConfig;
         this.templateService = instance.templateService;
         this.iconService = instance.iconService;
-        this.setTemplate();
         this.appendScriptTag();
+        this.setByDevice();
     }
 
-    setTemplate() {
-      const playerContainer = this.instance.plyr.elements.wrapper;
-      playerContainer.insertAdjacentHTML("afterend", this.templateService.getShare(this.playerConfig.getShareData()));
+    setByDevice() {
+        switch (this.playerConfig.getDevice()) {
+            case "desktop":
+               this.desktop = new LTPlayerShareDesktop(this);
+               this.events.desktop = new LTPlayerShareEvents.desktop(this);
+                break
+            case "mobile":
+                this.mobile = new LTPlayerShareMobile(this);
+                this.events.mobile = new LTPlayerShareEvents.mobile(this)
+        }
     }
 
     appendScriptTag() {
         const script = document.createElement("script");
+        script.classList.add('lt-player-add-to-any')
         script.type = "text/javascript";
         script.src = "https://static.addtoany.com/menu/page.js";
         script.async;
         document.body.appendChild(script);
     }
 
+    removeScriptTag() {
+        const script = document.querySelector('.lt-player-add-to-any');
+        if(script) {
+            script.remove();
+        }
+    }
 }

package/src/components/share/LTPlayerShareMobile.ts

@@ -0,0 +1,154 @@
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
+
+export class LTPlayerShareMobile {
+
+    manager : LTPlayerShareManager
+    isPlaying : boolean
+
+    constructor(instance : LTPlayerShareManager) {
+        this.manager = instance;
+    }
+
+    activeModal() {
+        if (!this.manager.playerConfig.getShareData().canonicalUrl) {
+            if (!this.manager.playerConfig.getShareData().embedUrl) {
+                return
+            } else {
+                this.createModal();
+                this.setCopyContent(true);
+            }
+        } else {
+            this.createModal();
+            this.setCopyContent(false);
+        }
+
+        (window as any).a2a.init_all();
+
+        this.setCopyButtonsEvents()
+        this.setSwitchButton()
+
+        if (this.manager.instance.plyr.playing) {
+            this.isPlaying = true;
+            this.manager.instance.plyr.pause();
+        } else {
+            this.isPlaying = false;
+        }
+
+        setTimeout(() => {
+            const shareContainer = document.querySelector('.share-controller-wrapper');
+            const shareContainerHeader = document.querySelector('.share-controller-mobile-modal-header');
+            let instance = this;
+
+            if (shareContainer) {
+                let mobileEvent: HammerManager = this.manager.instance.eventInstance.mobileEvents.setMobileEvent(shareContainer);
+                if (mobileEvent) {
+                    mobileEvent.on('singletap', function LTPlayerMobileShareButtonsExit(event) {
+                        event.preventDefault();
+                        let target = event.target as HTMLElement;
+                        if (!target.classList.contains('player-lt__close-button') && !target.classList.contains('lt-player-mobile-share')) {
+                            instance.inactiveModal();
+                        }
+                    })
+                }
+            }
+
+            if (shareContainerHeader) {
+                let mobileEvent: HammerManager = this.manager.instance.eventInstance.mobileEvents.setMobileEvent(shareContainer);
+                if (mobileEvent) {
+                    mobileEvent.on('pan', function LTPlayerMobileShareButtonsExitPan(event) {
+                        event.preventDefault();
+                        let target = event.target as HTMLElement;
+                        if (!target.classList.contains('player-lt__close-button') ) {
+                            instance.inactiveModal();
+                        }
+                    })
+                }
+            }
+        }, 100)
+    }
+    setSwitchButton() {
+        const switchButton = document.querySelector('.share-controller-wrapper').querySelector('.button_embed');
+        const urlInput = document.querySelector('.share-controller-wrapper').querySelector('.share-controller-url');
+        const instance = this.manager.instance;
+
+        if (!instance.playerConfig.getShareData().embedUrl || !instance.playerConfig.getShareData().canonicalUrl) {
+            switchButton.classList.add('d-none');
+            return;
+        }
+
+        switchButton.addEventListener('click', () => {
+            if (urlInput.classList.contains('canonicalUrl')) {
+                urlInput.classList.remove('canonicalUrl');
+                urlInput.classList.add('embedUrl');
+                this.setCopyContent(true);
+            } else {
+                urlInput.classList.add('canonicalUrl');
+                urlInput.classList.remove('embedUrl');
+                this.setCopyContent(false);
+            }
+        })
+    }
+
+    setCopyButtonsEvents() {
+        const selectors = document.querySelectorAll('.share-controller-link');
+        const urlInput = document.querySelector('.share-controller-wrapper').querySelector('.share-controller-url');
+
+        if (selectors.length > 0) {
+            selectors.forEach((button: HTMLElement) => {
+                button.addEventListener('click', function LTPlayerShareCopy() {
+                    navigator.clipboard.writeText((urlInput as HTMLElement).dataset.copy);
+                })
+
+            })
+        }
+    }
+
+    setCopyContent(embed : boolean) {
+        const urlInput = document.querySelector('.share-controller-wrapper').querySelector('.share-controller-url');
+
+        if (!urlInput) {
+            return;
+        }
+
+        if (!embed) {
+            urlInput.classList.add('canonicalUrl');
+            urlInput.innerHTML = `${this.manager.instance.playerConfig.getShareData().canonicalUrl}`;
+            (urlInput as HTMLElement).dataset.copy = this.manager.instance.playerConfig.getShareData().canonicalUrl;
+            urlInput.addEventListener('click', () => {
+                window.open(this.manager.instance.playerConfig.getShareData().canonicalUrl)
+            })
+            return
+        }
+        urlInput.classList.add('embedUrl');
+        const iframe = `<iframe width="560" height="315" src="${this.manager.instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+        (urlInput as HTMLElement).innerText = iframe;
+        (urlInput as HTMLElement).dataset.copy = iframe;
+    }
+
+    createModal() {
+
+        let modalTemplate = this.manager.instance.templateService.getShare(this.manager.playerConfig.getShareData());
+
+        const modal = document.createElement('div');
+        modal.classList.add('lt-player-mobile-share-modal')
+        modal.innerHTML = modalTemplate;
+
+        const body = document.querySelector('body');
+
+        if (body) {
+            body.appendChild(modal);
+        }
+    }
+
+    inactiveModal() {
+        const modal = document.querySelector('.lt-player-mobile-share-modal');
+
+        if (modal) {
+            modal.remove();
+        }
+
+        if (this.isPlaying) {
+            this.manager.instance.plyr.play();
+        }
+    }
+}

package/src/components/video/LTPlayerVideo.ts

@@ -0,0 +1,49 @@
+import {LTPlayer} from "../LTPlayerType";
+import {LTPlayerConfig} from "../config/LTPlayerConfig";
+import Plyr from "plyr";
+
+export class LTPlayerVideo {
+    instanceType : LTPlayer.LandscapeType | LTPlayer.PortraitType
+    playerConfig : LTPlayerConfig
+    plyr : Plyr
+    objectFit: string
+    init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        this.instanceType = instance;
+        this.playerConfig = instance.playerConfig;
+        this.plyr = instance.plyr;
+        this.objectFit =instance.playerConfig.getObjectFit();
+        this.appendObjectFit();
+    }
+
+    appendObjectFit() {
+        if (!this.objectFit) {
+            return;
+        }
+
+        if (!this.plyr.isHTML5) {
+            return;
+        }
+
+        const videoTag = this.plyr.elements.wrapper.querySelector('video');
+
+        if (this.objectFit === 'cover') {
+            videoTag.style.objectFit = this.objectFit;
+        }
+    }
+
+    removeObjectFit() {
+        if (!this.objectFit) {
+            return;
+        }
+
+        if (!this.plyr.isHTML5) {
+            return;
+        }
+
+        const videoTag = this.plyr.elements.wrapper.querySelector('video');
+
+        if (this.objectFit === 'cover') {
+            videoTag.style.objectFit = null;
+        }
+    }
+}

package/src/global/controllers/LTPlayerController.ts

@@ -10,7 +10,9 @@ import {LTPlayerMini} from "../../components/controls/LTPlayerMini";
 import {LTPlayerDevMethode} from "../../components/LTPlayerDevMethode";
 import {LTPlayerEventsManager} from "../../components/LTPlayerEventsManager";
 import {LTPlayerPosterManager} from "../../components/poster/LTPlayerPosterManager";
-import {LTPlayerShare} from "../../components/share/LTPlayerShare";
+import {LTPlayerShareManager} from "../../components/share/LTPlayerShareManager";
+import {LTPlayerHls} from "../../components/LTPlayerHls";
+import {LTPlayerVideo} from "../../components/video/LTPlayerVideo";
 
 /**
  * Default Player type Service
@@ -31,7 +33,9 @@ export class LTPlayerController {
     devMethodePreload: LTPlayerDevMethode.Preload
     eventInstance: LTPlayerEventsManager
     posterManager : LTPlayerPosterManager
-    share : LTPlayerShare
+    share : LTPlayerShareManager
+    hls : LTPlayerHls
+    videoService : LTPlayerVideo
     /**
      * Base player type service
      */
@@ -41,6 +45,7 @@ export class LTPlayerController {
         this.templateService = new TemplateService();
         this.playerControl = new LTPlayerControls(this.templateService);
         this.posterManager = new LTPlayerPosterManager();
-        this.share = new LTPlayerShare();
+        this.share = new LTPlayerShareManager();
+        this.videoService = new LTPlayerVideo();
     }
 }

package/src/services/Helper.ts

@@ -88,4 +88,28 @@ export class Helper {
         }
         return url.protocol === "http:" || url.protocol === "https:";
     }
+
+    static checkIsHls(url : string): boolean {
+        const extensions = [
+            'm3u8'
+        ]
+
+        let response = false;
+
+        extensions.forEach(item => {
+            if (url.includes(item)) {
+                response = true;
+            }
+        })
+
+        return response;
+    }
+
+    static getVideoOrientation(width: number, height: number) {
+        if (width > height) {
+            return 'landscape';
+        } else {
+            return 'portrait'
+        }
+    }
 }

package/src/services/ResizeService.ts

@@ -55,10 +55,13 @@ export class ResizeService {
             height: 150
         },
         size : {
-            1067 : "lg",
-            800 : "md",
-            533 : "sm",
-            266 : "xs"
+            1067 : "xxl",
+            913 : "xl",
+            820 : "lg",
+            760 : "md",
+            640 : "sm",
+            480 : "xs",
+            266 : "xxs"
         }
     }
 
@@ -145,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 = () => {
@@ -154,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) {
@@ -282,6 +304,7 @@ export class ResizeService {
                 setHeight();
             }
         } else {
+
             setWidth();
 
             if (version !== 1) {

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">

package/src/views/background.handlebars

@@ -1,4 +1,4 @@
-<div class="lt-player-mini-player-background">
+<div class="lt-player-mini-player-background {{classObserve}}">
     <div class="logo">
         <img src="{{logo}}" alt="">
     </div>

package/src/views/controls.handlebars

@@ -31,14 +31,14 @@
           </div>
         </div>
       </div>
-      <div class="lt-player-notification">
+      <div class="lt-player-notification landscape">
         <!--                <div class="lt-player-video-content">-->
         <!--                    <div class="content__body">-->
         <!--                        <h4 class="poster-title">{{videoParagraph}}</h4>-->
         <!--                        <p class="poster-paragraph">{{videoTitle}}</p>-->
         <!--                    </div>-->
         <!--                </div>-->
-        <div class="lt-player-notification__notification-button-state">
+        <div class="lt-player-notification__notification-button-state landscape">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -167,7 +167,7 @@
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
-            <div class="lt-player-notification">
+            <div class="lt-player-notification portrait">
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">
@@ -222,8 +222,8 @@
           </div>
         </div>
       </div>
-      <div class="lt-player-notification">
-        <div class="lt-player-notification__notification-button-state">
+      <div class="lt-player-notification portrait">
+        <div class="lt-player-notification__notification-button-state portrait">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -334,7 +334,7 @@
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
-            <div class="lt-player-notification">
+            <div class="lt-player-notification portrait">
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">

package/src/views/poster.handlebars

@@ -1,6 +1,7 @@
 <div class="lt-player__poster">
     <div class="lt-player__poster__image-body lt-player__poster__background__grey" >
-        <img class="lt-player__poster__img lt-player__poster__img__set-default" alt="" src="{{logoBig}}">
+        <img class="lt-player__poster__img lt-player__poster__img__set-default d-none" alt="" src="{{logoBig}}">
+        <img class="lt-player__poster__img--set-custom d-none" alt="" src="{{config.configData.posterImage}}">
     </div>
     <div class="lt-player__poster__body">
         <div class="content">