@latest-thinking/lt-player 1.0.6 → 1.0.7

package/src/components/addInfo/LTPlayerAddInfoMobile.ts

@@ -0,0 +1,110 @@
+import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
+import {additionalInformation} from "../../global/types/ModuleTypes";
+
+export class LTPlayerAddInfoMobile {
+    set(controller: LTPLayerAddInfo.Controller) {
+        const playerContainer = controller.plyr.elements.container;
+        const playerControlsContainer = controller.plyr.elements.controls;
+        let additionalInfoBody: Element = playerContainer.querySelector('.lt-player__additional-info-mobile');
+        let instance = controller;
+        let __this = this;
+
+        let buttons: NodeList = additionalInfoBody.querySelectorAll('button');
+
+        if (buttons.length === 0) {
+            return
+        }
+
+        const  createInformationModal = (info: additionalInformation, key: string) => {
+            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 modal = document.createElement('div');
+            modal.classList.add('lt-player-mobile-add-info-modal')
+            modal.innerHTML = modalTemplate;
+
+            const body = document.querySelector('body');
+
+            if (body) {
+                body.appendChild(modal);
+            }
+        }
+
+        buttons.forEach((button: HTMLElement) => {
+            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(button);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileAdditionalInfoButtons(event) {
+                    event.preventDefault();
+
+                    controller.playerInstance.plyr.elements.controls.classList.add('plyr__controls-enable-addInfo');
+
+                    let targetModal = button.dataset.ltTarget;
+                    let data = instance.additionalData;
+
+
+                    if (data[targetModal] !== undefined) {
+                        createInformationModal(data[targetModal], targetModal)
+                    }
+
+                    playerControlsContainer.classList.add('player-lt__modal__mobile-show-modal');
+
+                    window.Player.players.forEach( item => {item.plyr.pause()});
+
+                    __this.dragCloseModal(controller);
+
+                    controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance)
+                })
+            }
+        })
+
+
+    }
+
+    dragCloseModal(controller: LTPLayerAddInfo.Controller) {
+        const modalBody = document.querySelector('.lt-player-mobile-add-info-modal');
+        const modalHeader = modalBody.querySelector('.player-lt__mobile__modal-header');
+        const  background = modalBody.querySelector('.player-lt__modal__mobile__background');
+
+        const closeModal = () => {
+            modalBody.remove();
+        }
+        if (modalHeader) {
+            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(modalHeader);
+            if (mobileEvent) {
+                mobileEvent.on('pan', function LTPlayerMobileDragDownModal() {
+                    closeModal();
+                    if (controller.plyr.paused) {
+                        controller.plyr.play();
+                    }
+                })
+            }
+        }
+        if (background) {
+            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileCloseModal() {
+                    closeModal();
+                    if (controller.plyr.paused) {
+                        controller.plyr.play();
+                    }
+                })
+            }
+        }
+    }
+}

package/src/components/config/LTPlayerConfig.ts

@@ -29,7 +29,8 @@ export class LTPlayerConfig {
         chapters : null,
         playerType: null,
         device : 'desktop',
-        observe : false
+        observe : false,
+        videoObjectFit : false
     }
     processor : LTPlayerConfigProcessor.Map
 
@@ -64,22 +65,35 @@ export class LTPlayerConfig {
     }
 
     setObjectFit(plyr : Plyr, instanceType : string) {
-        if (plyr.isHTML5) {
 
-            const videoTag = plyr.elements.wrapper.querySelector('video');
+        return new Promise(resolve => {
+            if (plyr.isHTML5) {
 
-            if (videoTag) {
+                const videoTag = plyr.elements.wrapper.querySelector('video');
 
-                videoTag.addEventListener('loadedmetadata', (event)=> {
+                if (videoTag) {
 
-                    const type = Helper.getVideoOrientation(videoTag.videoWidth, videoTag.videoHeight);
+                    videoTag.addEventListener('loadedmetadata', (event)=> {
 
-                    if (type === instanceType) {
-                        videoTag.style.objectFit = 'cover';
-                    }
-                })
+                        const type = Helper.getVideoOrientation(videoTag.videoWidth, videoTag.videoHeight);
+
+                        if (type === instanceType) {
+                            this.configData.videoObjectFit = 'cover';
+                        } else {
+                            this.configData.videoObjectFit = 'clip';
+                        }
+
+                        resolve(true);
+                    })
+                }
             }
-        }
+        })
+
+
+    }
+
+    getObjectFit() {
+        return this.configData.videoObjectFit
     }
 
     setVersion(version : string | number) {

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -706,46 +706,56 @@ export namespace LTPlayerControlsEvents  {
         }
 
 
-        volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        settings(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             let playerControlsContainer = instance.plyr.elements.controls;
-            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-            const volumeButton = volume.querySelector('button');
-            const volumeUp = volume.querySelector('.volume-max');
-            const volumeMute = volume.querySelector('.volume-mute');
-
-            const setVolumeIcon = (volumeState: string) => {
-                if (volumeState === 'up') {
-                    volumeUp.classList.remove('d-none');
-                    volumeMute.classList.remove('d-none');
-                    volumeMute.classList.add('d-none');
-                } else {
-                    volumeUp.classList.remove('d-none');
-                    volumeMute.classList.remove('d-none');
-                    volumeUp.classList.add('d-none');
-                }
-            }
-
-            const setVolume = (): string => {
-                if (instance.plyr.muted) {
-                    instance.plyr.muted = false;
-                    return 'up';
-                } else {
-                    instance.plyr.muted = true;
-                    return 'mute';
-                }
-            }
+            const settingsButton = playerControlsContainer.querySelector('.plyr__controls_settings-button');
 
-            setVolumeIcon('up');
-
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
-
-            mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
-                let volumeState = setVolume();
-                setVolumeIcon(volumeState);
-                instance.playerControl.mobileEvents.showControls(instance);
-            })
+            if (settingsButton) {
 
+            }
         }
+
+        //remove volume
+        // volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        //     let playerControlsContainer = instance.plyr.elements.controls;
+        //     const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+        //     const volumeButton = volume.querySelector('button');
+        //     const volumeUp = volume.querySelector('.volume-max');
+        //     const volumeMute = volume.querySelector('.volume-mute');
+        //
+        //     const setVolumeIcon = (volumeState: string) => {
+        //         if (volumeState === 'up') {
+        //             volumeUp.classList.remove('d-none');
+        //             volumeMute.classList.remove('d-none');
+        //             volumeMute.classList.add('d-none');
+        //         } else {
+        //             volumeUp.classList.remove('d-none');
+        //             volumeMute.classList.remove('d-none');
+        //             volumeUp.classList.add('d-none');
+        //         }
+        //     }
+        //
+        //     const setVolume = (): string => {
+        //         if (instance.plyr.muted) {
+        //             instance.plyr.muted = false;
+        //             return 'up';
+        //         } else {
+        //             instance.plyr.muted = true;
+        //             return 'mute';
+        //         }
+        //     }
+        //
+        //     setVolumeIcon('up');
+        //
+        //     let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
+        //
+        //     mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
+        //         let volumeState = setVolume();
+        //         setVolumeIcon(volumeState);
+        //         instance.playerControl.mobileEvents.showControls(instance);
+        //     })
+        //
+        // }
     }
 
 

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

@@ -18,7 +18,6 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     }
 
     addOpenSettingsEventButton() {
-
         const selectors: defaultType = this.settingsInstance.common.getSelectors();
 
         selectors.button.addEventListener('click', (event: MouseEvent) => {

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;
 
@@ -153,6 +148,7 @@ export class LTPlayerCommon {
         }
 
         //set captions
+        // TODO: Find a way to show/hide subtitles that does not loop on every timeUpdate. Consider using the controls show/hide event.
         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();
         })
     }