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

package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts

@@ -1,6 +1,5 @@
 import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManager";
 import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
-import {defaultType} from "../../../global/types/ModuleTypes";
 
 export class LTPlayerMobileSettingsControllers implements SettingsControlsInterfaces {
     settingsInstance: LTPlayerSettingsControlsManager
@@ -10,48 +9,185 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
     }
 
     init() {
-        this.settingsInstance.common.addSettingsTemplate(this.settingsInstance.playerInstance.playerConfig.getDevice());
-        this.setDefaultSpeed();
-        this.setButtonSpeed();
+        this.addOpenSettingsEventButton();
     }
 
-    setDefaultSpeed() {
-        this.settingsInstance.playerInstance.plyr.speed = 1;
+    addOpenSettingsEventButton() {
+        const settingsButton = this.settingsInstance.playerInstance.plyr.elements.controls.querySelector('.plyr__controls_settings-button');
+        const instance = this;
+        if (settingsButton) {
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(settingsButton);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileSettingsButton() {
+                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+                    instance.createModal();
+                    instance.setActiveModal();
+                    instance.initCaptionsEvent();
+                    instance.initSpeedVideoEvent();
+                    instance.initSaveButton();
+                    setTimeout(() => {
+                        instance.setInactiveTouchModal();
+                    }, 100)
+                })
+            }
+        }
     }
 
-    setButtonSpeed() {
-        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
-        let plyr = this.settingsInstance.playerInstance.plyr;
-        let instance = this.settingsInstance.playerInstance;
+    setInactiveTouchModal() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const background = modal.querySelector('.settings-controllers-enable__background');
+        const settingsContainerHeader = modal.querySelector('.settings-controllers-header')
+        const instance = this;
 
-        if (playerSpeedButton) {
-            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
+        if (background) {
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
             if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
+                mobileEvent.on('singletap', function LTPlayerMobileSettingsBackground(event) {
+                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+                    event.preventDefault();
+                    let target = event.target as HTMLElement;
+                    if (!target.classList.contains('settings-controllers')) {
+                        instance.setInactiveModal();
+                    }
+                })
+            }
+        }
 
-                    let playSpeed = plyr.speed + 0.25;
+        if (settingsContainerHeader) {
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(settingsContainerHeader);
+            if (mobileEvent) {
+                mobileEvent.on('pan', function LTPlayerMobileSettingsHeader(event) {
+                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+                    event.preventDefault();
+                    let target = event.target as HTMLElement;
+                    instance.setInactiveModal();
+                })
+            }
+        }
 
-                    if (playSpeed > 2) {
-                        playerSpeedButton.innerHTML = `1x`;
-                        plyr.speed = 1;
-                        return;
-                    }
+    }
 
-                    if (playSpeed === 1.75) {
-                        plyr.speed = playSpeed + 0.25
-                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
-                        return;
-                    }
+    createModal() {
+        let modalTemplate = this.settingsInstance.playerInstance.templateService.getSettings({id : this.settingsInstance.playerInstance.playerConfig.getPlayerId()});
 
-                    plyr.speed = playSpeed;
-                    playerSpeedButton.innerHTML = `${playSpeed}X`;
+        const modal = document.createElement('div');
+        modal.classList.add('lt-player-mobile-settings-modal')
+        modal.innerHTML = modalTemplate;
 
-                    instance.playerControl.mobileEvents.showControls(instance);
-                })
+        const body = document.querySelector('body');
+
+        if (body) {
+            body.appendChild(modal);
+        }
+    }
+
+    setActiveModal() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const background = modal.querySelector('.settings-controllers-enable__background');
+
+        if (background) {
+            if (background.classList.contains('d-none')) {
+                background.classList.remove('d-none')
             }
         }
     }
 
+    setInactiveModal() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        if (modal) {
+            modal.remove();
+        }
+    }
+    initCaptionsEvent() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const checkBox = modal.querySelector(`#captions-lt-player-${this.settingsInstance.playerInstance.playerConfig.getPlayerId()}`) as HTMLInputElement;
+        const instance = this;
+        if (checkBox) {
+            checkBox.addEventListener('change', () => {
+                instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+
+                if (!checkBox.checked) {
+                    this.settingsInstance.player.toggleCaptions(false);
+                    return
+                }
+
+                this.settingsInstance.player.toggleCaptions(true);
+
+            })
+        }
+    }
+    initSpeedVideoEvent() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const playerInstance = this.settingsInstance.playerInstance;
+        const player = this.settingsInstance.player;
+        const rangeInput: HTMLInputElement = modal.querySelector('.speed-range-input');
+
+
+        const myRange: HTMLInputElement = modal.querySelector(`#speed-range-${playerInstance.playerConfig.getPlayerId()}`);
+
+        myRange.value = String(0);
+
+        const myValue: HTMLElement = modal.querySelector(`#speed-range-value-${playerInstance.playerConfig.getPlayerId()}`);
+
+        myValue.style.top = "-20px";
+
+        let values:any = [1,1.25,1.50,2];
+
+        const instance = this;
+        myRange.oninput = function() {
+            instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+            player.speed = parseFloat(values[rangeInput.value]);
+            myValue.innerHTML = `${values[rangeInput.value]}X`;
+        };
+
+        player.speed = parseFloat(String(values[0]));
+        myValue.innerHTML = `${values[0]}X`;
+    }
+    initSaveButton() {
+        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const instance = this;
+
+        const saveButton = modal.querySelector('.button-save');
+
+        saveButton.addEventListener('click', function (event) {
+            instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
+            event.preventDefault();
+            instance.setInactiveModal();
+        })
+    }
+    // setButtonSpeed() {
+    //     let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
+    //     let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
+    //     playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
+    //     let plyr = this.settingsInstance.playerInstance.plyr;
+    //     let instance = this.settingsInstance.playerInstance;
+    //
+    //     if (playerSpeedButton) {
+    //         let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
+    //         if (mobileEvent) {
+    //             mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
+    //
+    //                 let playSpeed = plyr.speed + 0.25;
+    //
+    //                 if (playSpeed > 2) {
+    //                     playerSpeedButton.innerHTML = `1x`;
+    //                     plyr.speed = 1;
+    //                     return;
+    //                 }
+    //
+    //                 if (playSpeed === 1.75) {
+    //                     plyr.speed = playSpeed + 0.25
+    //                     playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
+    //                     return;
+    //                 }
+    //
+    //                 plyr.speed = playSpeed;
+    //                 playerSpeedButton.innerHTML = `${playSpeed}X`;
+    //
+    //                 instance.playerControl.mobileEvents.showControls(instance);
+    //             })
+    //         }
+    //     }
+    // }
+
 }

package/src/components/events/LTPlayer.ts

@@ -116,6 +116,14 @@ export namespace LTPlayerEvents {
                 const settingsBody = playerContainer.querySelector('.settings-controllers');
 
                 if (!settingsBody) {
+
+                    const modal = document.querySelector('.lt-player-mobile-settings-modal');
+
+                    if (modal) {
+                        modal.remove();
+                    }
+
+
                     return;
                 }
 

package/src/components/events/LTPlayerCommon.ts

@@ -27,33 +27,26 @@ export class LTPlayerCommon {
 
         instance.plyr.speed = 1;
 
-
-        if (instance.playerConfig.getDevice() === 'desktop') {
-            instance.plyr.toggleCaptions(false);
-            return;
-        }
-
-        if (instance.playerConfig.getPreload()) {
-            instance.plyr.toggleCaptions(false);
-            return;
-        }
-
-        if (instance.plyr.isEmbed) {
-            instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
-                if (response.length !== 0) {
-                    instance.plyr.toggleCaptions(true);
-                } else {
-                    instance.plyr.toggleCaptions(false);
-                }
-            })
-        } else {
-
-            let checkCaptions = (instance.plyr as plyr).captions;
-
-            if (checkCaptions.currentTrack >= 0) {
-                instance.plyr.toggleCaptions(true);
-            }
-        }
+        instance.plyr.toggleCaptions(false);
+        return;
+
+        //
+        // if (instance.plyr.isEmbed) {
+        //     instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
+        //         if (response.length !== 0) {
+        //             instance.plyr.toggleCaptions(true);
+        //         } else {
+        //             instance.plyr.toggleCaptions(false);
+        //         }
+        //     })
+        // } else {
+        //
+        //     let checkCaptions = (instance.plyr as plyr).captions;
+        //
+        //     if (checkCaptions.currentTrack >= 0) {
+        //         instance.plyr.toggleCaptions(true);
+        //     }
+        // }
     }
     removeDesktopPlyrEvents() {
         let plyrInstance = this.plyr as Plyr as Plyr & { eventListeners: Array<any> }
@@ -107,16 +100,18 @@ export class LTPlayerCommon {
         });
     }
     onReadyPlayer() {
-
         //set share button
-        this.player.share.events.desktop.init(this.player);
+        if (this.player.playerConfig.getShareData()) {
+            if (this.player.playerConfig.getDevice() === 'mobile') {
+                this.player.share.events.mobile.init();
+            } else {
+                this.player.share.events.desktop.init();
+            }
+        }
 
-        // this.player.windowService.init(this.player);
         //set poster
         this.player.posterManager.mobileEvents.onload(this.player);
 
-
-
         if (this.player.playerConfig.isAutoPlay()) {
             let playerContainer = this.player.plyr.elements.container;
 
@@ -151,9 +146,6 @@ export class LTPlayerCommon {
         if (this.player.playerControl.chaptersService) {
             this.player.playerControl.chaptersService.updateCurrentTimeAndTitle(this.player, event);
         }
-
-        //set captions
-        this.player.playerControl.desktopEvents.subtitles(this.player);
     }
 
 

package/src/components/events/LTPlayerDesktop.ts

@@ -147,6 +147,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
 
+            instance.videoService.removeObjectFit();
+
         });
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen() {
@@ -155,6 +157,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
+
+            instance.videoService.appendObjectFit();
         })
     }
 

package/src/components/events/LTPlayerMobile.ts

@@ -83,8 +83,8 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             instance.playerControl.mobileEvents.backwardForward(instance);
             instance.playerControl.mobileEvents.backwardForwardSeconds(instance);
 
-            //set volume controller
-            instance.playerControl.mobileEvents.volume(instance);
+            //remove volume controller
+            // instance.playerControl.mobileEvents.volume(instance);
 
             //set settings controller
             instance.playerControl.settingsControlsManager.init(instance);
@@ -132,11 +132,13 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
 
+            instance.videoService.removeObjectFit();
         });
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen() {
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
+            instance.videoService.appendObjectFit();
         })
     }
 

package/src/components/share/LTPlayerShareDesktop.ts

@@ -0,0 +1,131 @@
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
+
+export class LTPlayerShareDesktop {
+    manager : LTPlayerShareManager
+    isPlaying : boolean
+    switchButtonSet: 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();
+
+        if (!this.switchButtonSet) {
+            this.setSwitchButton();
+            this.switchButtonSet = true;
+        }
+
+        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;
+        }
+
+        const switchEvent = () => {
+
+            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);
+            }
+        }
+
+        selectors.switchButton.addEventListener('click', () => {
+            switchEvent();
+        })
+    }
+
+    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);
+                })
+
+            })
+        }
+    }
+}