@latest-thinking/lt-player 1.0.6 → 1.0.7

package/src/components/share/LTPlayerShareDesktop.ts

@@ -0,0 +1,120 @@
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
+
+export class LTPlayerShareDesktop {
+    manager : LTPlayerShareManager
+    isPlaying : boolean
+    constructor(instance : LTPlayerShareManager) {
+        this.manager = instance;
+        this.setTemplate();
+    }
+    setTemplate() {
+      const playerContainer = this.manager.instance.plyr.elements.wrapper;
+      playerContainer.insertAdjacentHTML("afterend", this.manager.templateService.getShare(this.manager.playerConfig.getShareData()));
+    }
+
+    activeModal() {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        selectors.shareContainer.classList.remove('share-inactive');
+        selectors.shareContainer.classList.add('share-active');
+        (window as any).a2a.init_all();
+        if (!instance.playerConfig.getShareData().canonicalUrl) {
+            if (!instance.playerConfig.getShareData().embedUrl) {
+                selectors.shareContainer.querySelector('.share-controller-top').classList.add('d-none')
+            } else {
+                this.setCopyContent(true);
+            }
+        } else {
+            this.setCopyContent(false);
+        }
+
+        this.setCopyButtonsEvents()
+        this.setSwitchButton()
+        if (instance.plyr.playing) {
+            this.isPlaying = true;
+            instance.plyr.pause();
+        } else {
+            this.isPlaying = false;
+        }
+    }
+
+
+    setSwitchButton() {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        if (!instance.playerConfig.getShareData().embedUrl || !instance.playerConfig.getShareData().canonicalUrl) {
+            selectors.switchButton.classList.add('d-none');
+            return;
+        }
+
+        selectors.switchButton.addEventListener('click', () => {
+            if (selectors.urlInput.classList.contains('canonicalUrl')) {
+                selectors.urlInput.classList.remove('canonicalUrl');
+                selectors.urlInput.classList.add('embedUrl');
+                this.setCopyContent(true);
+            } else {
+                selectors.urlInput.classList.add('canonicalUrl');
+                selectors.urlInput.classList.remove('embedUrl');
+                this.setCopyContent(false);
+            }
+        })
+    }
+
+    setCopyContent(embed : boolean) {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        if (!embed) {
+            selectors.urlInput.classList.add('canonicalUrl');
+            selectors.urlInput.innerHTML = `${instance.playerConfig.getShareData().canonicalUrl}`;
+            (selectors.urlInput as HTMLElement).dataset.copy = instance.playerConfig.getShareData().canonicalUrl;
+            selectors.urlInput.addEventListener('click', () => {
+                window.open(instance.playerConfig.getShareData().canonicalUrl)
+            })
+            return
+        }
+        selectors.urlInput.classList.add('embedUrl');
+        const iframe = `<iframe width="560" height="315" src="${instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+        (selectors.urlInput as HTMLElement).innerText = iframe;
+        (selectors.urlInput as HTMLElement).dataset.copy = iframe;
+    }
+
+    inactiveModal() {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        selectors.shareContainer.classList.add('share-inactive');
+        selectors.shareContainer.classList.remove('share-active');
+        if (this.isPlaying) {
+            instance.plyr.play();
+        }
+    }
+
+    getSelector() {
+        return {
+            buttons : [
+                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
+                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
+            ],
+            urlInput : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.share-controller-url'),
+            shareContainer : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper'),
+            copyButtons : this.manager.instance.plyr.elements.container.querySelectorAll('.share-controller-link'),
+            switchButton : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.button_embed')
+        };
+    }
+
+    setCopyButtonsEvents() {
+        const selectors = this.getSelector();
+
+        if (selectors.copyButtons.length > 0) {
+            selectors.copyButtons.forEach((button: HTMLElement) => {
+                button.addEventListener('click', function LTPlayerShareCopy() {
+                    navigator.clipboard.writeText((selectors.urlInput as HTMLElement).dataset.copy);
+                })
+
+            })
+        }
+    }
+}

package/src/components/share/LTPlayerShareEvents.ts

@@ -1,162 +1,60 @@
-import {LTPlayer} from "../LTPlayerType";
-import {defaultType} from "../../global/types/ModuleTypes";
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
 
 export namespace LTPlayerShareEvents {
 
-    export class common {
-
-        isPlaying : boolean
-        activeModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-            selectors.shareContainer.classList.remove('share-inactive');
-            selectors.shareContainer.classList.add('share-active');
-
-            if (!instance.playerConfig.getShareData().canonicalUrl) {
-                if (!instance.playerConfig.getShareData().embedUrl) {
-                    selectors.shareContainer.querySelector('.share-controller-top').classList.add('d-none')
-                } else {
-                    this.setCopyContent(instance, selectors, true);
-                }
-            } else {
-                this.setCopyContent(instance, selectors, false);
-            }
-
-            this.setCopyButtonsEvents(instance, selectors)
-            this.setSwitchButton(instance, selectors)
-            if (instance.plyr.playing) {
-                this.isPlaying = true;
-                instance.plyr.pause();
-            } else {
-                this.isPlaying = false;
-            }
-        }
-
-
-        setSwitchButton(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-            if (!instance.playerConfig.getShareData().embedUrl || !instance.playerConfig.getShareData().canonicalUrl) {
-                selectors.switchButton.classList.add('d-none');
-                return;
-            }
-
-            selectors.switchButton.addEventListener('click', () => {
-                if (selectors.urlInput.classList.contains('canonicalUrl')) {
-                    selectors.urlInput.classList.remove('canonicalUrl');
-                    selectors.urlInput.classList.add('embedUrl');
-                    this.setCopyContent(instance, selectors, true);
-                } else {
-                    selectors.urlInput.classList.add('canonicalUrl');
-                    selectors.urlInput.classList.remove('embedUrl');
-                    this.setCopyContent(instance, selectors, false);
-                }
-            })
-
-
-        }
-
-
-        setCopyContent(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType, embed : boolean) {
-
-            if (!embed) {
-                selectors.urlInput.classList.add('canonicalUrl');
-                selectors.urlInput.innerHTML = `${instance.playerConfig.getShareData().canonicalUrl}`;
-                selectors.urlInput.dataset.copy = instance.playerConfig.getShareData().canonicalUrl;
-                return
-            }
-            selectors.urlInput.classList.add('embedUrl');
-            selectors.urlInput.innerText = `<iframe width="560" height="315" src="${instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
-            selectors.urlInput.dataset.copy = `<iframe width="560" height="315" src="${instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
-
-        }
-
-
-        inactiveModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-            selectors.shareContainer.classList.add('share-inactive');
-            selectors.shareContainer.classList.remove('share-active');
-            if (this.isPlaying) {
-                instance.plyr.play();
-            }
-        }
-
-        getSelector(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            return {
-                buttons : [
-                    instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
-                    instance.plyr.elements.controls.querySelector('.lt-player-share'),
-                ],
-                urlInput : instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.share-controller-url'),
-                shareContainer : instance.plyr.elements.container.querySelector('.share-controller-wrapper'),
-                copyButtons : instance.plyr.elements.container.querySelectorAll('.share-controller-link'),
-                switchButton : instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.a2a_button_embed')
-            };
-        }
-
-        setCopyButtonsEvents(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+    export class mobile {
 
-            if (selectors.copyButtons.length > 0) {
-                selectors.copyButtons.forEach((button: HTMLElement) => {
-                    button.addEventListener('click', function LTPlayerShareCopy() {
-                        navigator.clipboard.writeText(selectors.urlInput.dataset.copy);
-                    })
+        manager : LTPlayerShareManager
 
-                })
-            }
+        constructor(manager: LTPlayerShareManager) {
+            this.manager = manager;
         }
 
-    }
-    export class mobile {
-        common : LTPlayerShareEvents.common
-        constructor() {
-            this.common = new common();
-        }
+        init() {
+            const buttons = [
+                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
+                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
+            ];
 
-        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            const instance = this;
 
-            const common = this.common;
-            common.getSelector(instance).buttons.forEach(button => {
+            buttons.forEach(button => {
                 if (button) {
-                    button.addEventListener('click', () => {
-                        common.activeModal(instance, this.common.getSelector(instance));
-                    })
+                    let mobileEvent: HammerManager = this.manager.instance.eventInstance.mobileEvents.setMobileEvent(button);
+                    if (mobileEvent) {
+                        mobileEvent.on('singletap', function LTPlayerMobileShareButtons(event) {
+                            event.preventDefault();
+                            instance.manager.mobile.activeModal();
+                        })
+                    }
                 }
             })
-
-            if (common.getSelector(instance).shareContainer) {
-                common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
-                    event.preventDefault();
-                    if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
-                        let target = event.target as HTMLElement;
-                        if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                            common.inactiveModal(instance, common.getSelector(instance));
-                        }
-                    }
-                })
-            }
         }
     }
 
     export class desktop {
-        common : LTPlayerShareEvents.common
-        constructor() {
-            this.common = new common();
+        manager : LTPlayerShareManager
+        constructor(manager: LTPlayerShareManager) {
+            this.manager = manager;
         }
 
-        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            const common = this.common;
-            common.getSelector(instance).buttons.forEach(button => {
+        init() {
+            const manager = this.manager;
+            manager.desktop.getSelector().buttons.forEach(button => {
                 if (button) {
                     button.addEventListener('click', () => {
-                        common.activeModal(instance, this.common.getSelector(instance));
+                        manager.desktop.activeModal();
                     })
                 }
             })
 
-            if (common.getSelector(instance).shareContainer) {
-                common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
+            if (manager.desktop.getSelector().shareContainer) {
+                manager.desktop.getSelector().shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
                     event.preventDefault();
-                    if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
+                    if ( manager.desktop.getSelector().shareContainer.classList.contains('share-active')) {
                         let target = event.target as HTMLElement;
                         if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                            common.inactiveModal(instance, common.getSelector(instance));
+                            manager.desktop.inactiveModal();
                         }
                     }
                 })

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,8 +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
@@ -32,8 +33,9 @@ export class LTPlayerController {
     devMethodePreload: LTPlayerDevMethode.Preload
     eventInstance: LTPlayerEventsManager
     posterManager : LTPlayerPosterManager
-    share : LTPlayerShare
+    share : LTPlayerShareManager
     hls : LTPlayerHls
+    videoService : LTPlayerVideo
     /**
      * Base player type service
      */
@@ -43,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/index.ts

@@ -1,5 +1,11 @@
 import {LTPlayerManager} from "./components/LTPlayerManager";
 
+const supportsContainerQueries = "container" in document.documentElement.style;
+if (!supportsContainerQueries) {
+    let polyfill_script = document.createElement('script');
+    polyfill_script.setAttribute('src','https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js');
+    document.body.appendChild(polyfill_script);
+}
 
 //todo remove from window, it's for developer
 window.addEventListener('load', function () {