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

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

@@ -1,5 +1,6 @@
 import {LTPlayer} from "../LTPlayerType";
 import {plyr} from "../../global/types/ModuleTypes";
+import * as events from "events";
 
 export namespace LTPlayerControlsEvents  {
 
@@ -122,7 +123,6 @@ export namespace LTPlayerControlsEvents  {
                     })
                 }
             }
-
         }
 
         playPauseIconTimeUpdate(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
@@ -154,21 +154,32 @@ export namespace LTPlayerControlsEvents  {
                 }
             }
 
-
         }
-    }
 
-    export class Desktop {
+        subtitlesShow(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            const playerContainer = instance.plyr.elements.container;
+            const playerControls = instance.plyr.elements.controls;
 
-        common: Common
-        constructor() {
-            this.common = new Common();
-        }
-        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            this.common.checkTitleBreakWord(instance)
+            const captions = playerContainer.querySelector('.plyr__captions');
+
+            let checkCaptions = (instance.plyr as plyr).captions.active;
+
+            if (!checkCaptions) {
+                return;
+            }
+
+            if (!captions) {
+                return;
+            }
+
+            if (!playerControls.classList.contains('plyr__controls-enable')) {
+                if (captions.classList.contains('d-none')) {
+                    captions.classList.remove('d-none');
+                }
+            }
         }
-        subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
+        subtitlesHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             const playerContainer = instance.plyr.elements.container;
             const playerControls = instance.plyr.elements.controls;
             const captions = playerContainer.querySelector('.plyr__captions');
@@ -183,26 +194,43 @@ export namespace LTPlayerControlsEvents  {
                 return;
             }
 
-
-            if (!playerControls.classList.contains('plyr__controls-enable')) {
-                captions.classList.remove('d-none');
-                // captions.classList.remove('on-controls-hover');
-                return;
+            if (playerControls.classList.contains('plyr__controls-enable')) {
+                if (!captions.classList.contains('d-none')) {
+                    captions.classList.add('d-none');
+                }
             }
-            captions.classList.add('d-none');
-            // captions.classList.add('on-controls-hover');
 
+
+        }
+    }
+
+    export class Desktop {
+
+        common: Common
+        constructor() {
+            this.common = new Common();
         }
+        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            this.common.checkTitleBreakWord(instance)
+        }
+
+
         showHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             const controls = instance.plyr.elements.controls;
+            const eventsInstance = this;
+
             controls.addEventListener('mouseover', function () {
-                controls.classList.add('plyr__controls-enable')
+                controls.classList.add('plyr__controls-enable');
+                eventsInstance.common.subtitlesHide(instance);
             })
 
 
             controls.addEventListener('mouseleave', function () {
                 if (!controls.classList.contains('plyr__controls-enable-settings')) {
-                    controls.classList.remove('plyr__controls-enable')
+                    controls.classList.remove('plyr__controls-enable');
+                    setTimeout(()=>{
+                        eventsInstance.common.subtitlesShow(instance);
+                    }, 100)
                 }
             })
         }
@@ -370,45 +398,28 @@ export namespace LTPlayerControlsEvents  {
 
             const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
             const openVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button');
-            const closeVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
+            const muteUnmuteVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
             const volumeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area');
             const volumeBackground: HTMLElement = playerControlsContainer.querySelector('.volume_control__background');
             const volumeRangeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area__range');
+            const rangeVolumesItems: NodeListOf<HTMLElement>= volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+
+            openVolumeButton.addEventListener('mouseover', (event) => {
+                volumeControl.classList.remove('d-none');
+                volumeBackground.classList.remove('d-none');
+                openVolumeButton.classList.add('d-none');
+                volume.classList.add('volume-control-enable');
+                volume.classList.add('volume-area-open')
+            })
 
-            playerControlsContainer.addEventListener('click', function (event) {
-                const eventTarget = event.target as Element;
-
-                if (eventTarget.classList.contains('subtitles-body__input-switch')) {
-                    return;
-                }
-
-                if (!volume.classList.contains('volume-control-enable')) {
-                    if (!eventTarget.classList.contains('button-open')) {
-                        return;
-                    }
-                }
-
-                if (
-                    !eventTarget.classList.contains('button-close') &&
-                    !eventTarget.classList.contains('volume-area-open')
-                ) {
-                    if (!volume.classList.contains('volume-control-enable')) {
-                        volumeControl.classList.remove('d-none');
-                        volumeBackground.classList.remove('d-none');
-                        openVolumeButton.classList.add('d-none');
-                        volume.classList.add('volume-control-enable');
-                        volume.classList.add('volume-area-open')
-                    } else {
-                        volumeControl.classList.add('d-none');
-                        volumeBackground.classList.add('d-none');
-                        openVolumeButton.classList.remove('d-none');
-                        volume.classList.remove('volume-control-enable');
-                    }
-                }
-                event.preventDefault();
+            volume.addEventListener('mouseleave', () => {
+                volumeControl.classList.add('d-none');
+                volumeBackground.classList.add('d-none');
+                openVolumeButton.classList.remove('d-none');
+                volume.classList.remove('volume-control-enable');
             })
 
-            closeVolumeButton.addEventListener('click', (event) => {
+            muteUnmuteVolumeButton.addEventListener('click', (event) => {
                 event.preventDefault();
                 if (instance.plyr.volume > 0) {
                     instance.playerControl.playerVolumeBefore = instance.plyr.volume;
@@ -433,12 +444,11 @@ export namespace LTPlayerControlsEvents  {
                     range = range.toString()
                 }
 
-                const volumeMax: HTMLElement = closeVolumeButton.querySelector('.volume-max');
-                const volume75: HTMLElement = closeVolumeButton.querySelector('.volume-75');
-                const volume50: HTMLElement = closeVolumeButton.querySelector('.volume-50');
-                const volumeMute: HTMLElement = closeVolumeButton.querySelector('.volume-mute');
+                const volumeMax: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-max');
+                const volume75: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-75');
+                const volume50: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-50');
+                const volumeMute: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-mute');
                 const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-
                 const volumeIconsManger = (item: HTMLElement) => {
 
                     const rangeVolumesItems: NodeListOf<HTMLElement>= volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
@@ -469,7 +479,26 @@ export namespace LTPlayerControlsEvents  {
             }
 
             volumeRangeControl.addEventListener('input', function () {
-                volumeIcons((volumeRangeControl as HTMLInputElement).value);
+
+                let itemsDataSet: string[] = [];
+
+                rangeVolumesItems.forEach(item => {
+                    itemsDataSet.push(item.dataset.rangeValue)
+                })
+
+                if (itemsDataSet.length === 0) {
+                    return;
+                }
+
+                const getClosest = (curr: any, prev: any,  range: any) => {
+                    return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
+                }
+
+
+                let closest = itemsDataSet.reduce(function(prev, curr) {
+                    return getClosest(curr, prev, (volumeRangeControl as HTMLInputElement).value);
+                });
+                volumeIcons(closest);
             })
 
             instance.plyr.volume = 1;
@@ -528,6 +557,8 @@ export namespace LTPlayerControlsEvents  {
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
+            const eventsInstance = this;
+
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
             if (playerContainer.classList.contains('plyr--hide-controls')) {
@@ -544,6 +575,8 @@ export namespace LTPlayerControlsEvents  {
                 playerControlsContainer.classList.add('plyr__controls-enable');
             }
 
+            eventsInstance.common.subtitlesHide(instance);
+
             if (this.controlsTimeOut) {
                 clearTimeout(this.controlsTimeOut);
             }
@@ -554,6 +587,7 @@ export namespace LTPlayerControlsEvents  {
         hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
+            const eventsInstance = this;
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
             if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
@@ -573,6 +607,8 @@ export namespace LTPlayerControlsEvents  {
                         }
                     }, 4000);
                 }
+                console.log('hide;')
+                eventsInstance.common.subtitlesShow(instance);
             }
         }
 
@@ -706,46 +742,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) => {