@latest-thinking/lt-player 1.2.0 → 2.0.0-a

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

@@ -1,211 +0,0 @@
-import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManager";
-import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
-
-export class LTPlayerMobileSettingsControllers implements SettingsControlsInterfaces {
-
-    settingsInstance: LTPlayerSettingsControlsManager
-    constructor(settingsInstance: LTPlayerSettingsControlsManager) {
-        this.settingsInstance = settingsInstance;
-        this.init();
-    }
-
-    init() {
-        this.addOpenSettingsEventButton();
-        this.setButtonSpeed();
-        this.createModal();
-    }
-
-    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.initCaptionsEvent();
-                    instance.initSpeedVideoEvent();
-                    instance.initSaveButton();
-                    instance.showModal()
-                    setTimeout(() => {
-                        instance.setInactiveTouchModal();
-                    }, 100)
-                })
-            }
-        }
-    }
-
-    hideModal() {
-        const body = document.body
-        body.removeAttribute('modal-open-body')
-
-        const modal = this.getModal()
-        modal.close()
-    }
-
-    showModal() {
-        const body = document.body
-        body.setAttribute('modal-open-body', '')
-
-        const modal = this.getModal()
-        modal.showModal()
-    }
-
-    setInactiveTouchModal() {
-        const modal = this.getModal()
-        const background = modal.querySelector('.settings-controllers-enable__background');
-        const settingsContainerHeader = modal.querySelector('.settings-controllers-header')
-        const instance = this;
-
-        if (background) {
-            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileSettingsBackground(event) {
-                    instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
-                    event.preventDefault();
-                })
-            }
-        }
-
-        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.hideModal();
-                })
-            }
-        }
-    }
-
-    getModal(): HTMLDialogElement {
-        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
-        return playerElementContainer.querySelector("dialog")
-    }
-
-    createModal() {
-        let settingsDialog = this.settingsInstance.playerInstance.templateService.getMobileSettings(
-            {
-                id : this.settingsInstance.playerInstance.playerConfig.getPlayerId(),
-                captions_enabled: this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl() &&
-                    this.settingsInstance.playerInstance.playerConfig.getCaptionsEnabled(),
-                captions_missing: !this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl()
-            }
-        );
-        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
-        playerElementContainer.insertAdjacentHTML('beforeend', settingsDialog)
-
-        const modal = this.getModal()
-        modal.addEventListener('click', (e) => {
-            if (e.target === modal) {
-                this.hideModal()
-            }
-        });
-
-    }
-
-    initCaptionsEvent() {
-        const modal = this.getModal()
-        const checkBox = modal.querySelector(`.subtitles-body__input-switch`) as HTMLInputElement;
-        const instance = this;
-        if (checkBox) {
-            checkBox.addEventListener('change', () => {
-                instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
-
-                if (!checkBox.checked) {
-                    this.settingsInstance.playerInstance.captionsService.disableCaptions();
-                } else {
-                    this.settingsInstance.playerInstance.captionsService.enableCaptions();
-                }
-
-            })
-        }
-    }
-    initSpeedVideoEvent() {
-        const modal = this.getModal()
-        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 = this.getModal()
-        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.hideModal();
-        })
-    }
-    setButtonSpeed() {
-        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        let plyr = this.settingsInstance.playerInstance.plyr;
-        let instance = this.settingsInstance.playerInstance;
-
-        if (playerSpeedButton) {
-            let speedSpan = document.createElement('span');
-            playerSpeedButton.appendChild(speedSpan);
-            speedSpan.innerHTML = `1X`;
-            speedSpan.className = '';
-            speedSpan.classList.add('playback-speed--1X');
-
-            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) {
-                        speedSpan.innerHTML = `1X`;
-                        plyr.speed = 1;
-                        speedSpan.className = '';
-                        speedSpan.classList.add('playback-speed--1X');
-                        return;
-                    }
-
-                    if (playSpeed === 1.75) {
-                        plyr.speed = playSpeed + 0.25
-                        speedSpan.innerHTML = `2X`;
-                        speedSpan.className = '';
-                        speedSpan.classList.add('playback-speed--2X');
-                        return;
-                    }
-
-                    plyr.speed = playSpeed;
-                    const displaySpeed = Math.floor(playSpeed * 10) / 10;
-                    speedSpan.innerHTML = displaySpeed + "X";
-                    speedSpan.className = '';
-                    speedSpan.classList.add('playback-speed--' + playSpeed + 'X');
-
-                    instance.playerControl.mobileEvents.showControls(instance);
-                })
-            }
-        }
-    }
-
-}

package/src/components/events/LTPlayer.ts

@@ -1,194 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import {PlyrEvent} from "plyr";
-
-export namespace LTPlayerEvents {
-    export class Desktop {
-        playPause(plyrEvent: PlyrEvent) {
-            const players = window.Player.players;
-            const currentPlayPlayer = plyrEvent.detail.plyr;
-
-            players.forEach( player => {
-                if (player.plyr != currentPlayPlayer) {
-                    player.plyr.pause();
-
-                    player.plyr.on('ready', () => {
-                        const playerContainer = player.plyr.elements.container;
-
-                        const miniPlayerControls = playerContainer.querySelector('.lt-player-mini-player-controls');
-
-                        if (miniPlayerControls) {
-                            miniPlayerControls.remove();
-                        }
-
-                        const miniPlayersBackground = playerContainer.querySelector('.lt-player-mini-player-background');
-
-                        if (miniPlayersBackground) {
-                            miniPlayersBackground.remove();
-                        }
-
-                        const miniPlayerEnable = playerContainer.querySelector('.lt-player-mini-enable');
-                        const miniPlayerEnableSize = playerContainer.querySelector(`.lt-player-mini-${player.playerConfig.getPlayerType()}`);
-
-                        if (miniPlayerEnable) {
-                            miniPlayerEnable.classList.remove('lt-player-mini-enable');
-                        }
-                        if (miniPlayerEnableSize) {
-                            miniPlayerEnableSize.classList.remove(`.lt-player-mini-${player.playerConfig.getPlayerType()}`);
-                        }
-
-                    })
-
-                }
-            })
-
-        }
-
-        endVideo(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            let player = instance.plyr;
-            const playerContainer = player.elements.container;
-
-            const disableControls = () => {
-                const controls = player.elements.controls;
-
-                if (controls.classList.contains('plyr__controls-enable')) {
-                    controls.classList.remove('plyr__controls-enable')
-                }
-
-                const volumeControl = controls.querySelector('.bottom-controller__volume_control');
-                if (volumeControl) {
-                    const volumeButton = volumeControl.querySelector('.button-open');
-                    const volumeBackground = volumeControl.querySelector('.volume_control__background');
-                    const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
-                    const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
-
-
-                    if (volumeButton) {
-                        volumeButton.classList.remove('d-none');
-                    }
-
-                    if (volumeBackground) {
-                        volumeBackground.classList.add('d-none')
-                    }
-
-                    if (volumeBackgroundArea) {
-                        volumeBackgroundArea.classList.add('d-none')
-                    }
-
-                    if (volumeArea) {
-                        volumeArea.classList.remove('volume-area-open')
-                    }
-
-                    if (volumeControl) {
-                        volumeControl.classList.remove('volume-area-open');
-                        volumeControl.classList.remove('volume-control-enable');
-                    }
-                }
-                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
-                if (controlsBackground) {
-                    if (!controlsBackground.classList.contains('d-none')) {
-                        controlsBackground.classList.add('d-none');
-                    }
-                }
-
-            }
-            const enablePoster = () => {
-
-                const customPoster = playerContainer.querySelector('.lt-player__poster');
-                const controls = playerContainer.querySelector('.plyr__controls');
-                const playerPosterImage = playerContainer.querySelector('.lt-player__poster__image-body');
-
-                playerContainer.classList.add('plyr--stopped')
-                customPoster.classList.remove('d-none');
-                controls.classList.add('d-none');
-
-                if (playerPosterImage) {
-                    playerPosterImage.classList.remove('lt-player__poster__image-body--preload');
-                }
-
-                if (!player.poster) {
-                    player.poster = instance.playerConfig.getPosterImage();
-                }
-
-            }
-
-            const disableSettings = () => {
-
-                const settingsBody = playerContainer.querySelector('.settings-controllers');
-
-                if (!settingsBody) {
-
-                    const modal = document.querySelector('.lt-player-mobile-settings-modal');
-
-                    if (modal) {
-                        modal.remove();
-                    }
-
-
-                    return;
-                }
-
-                if (settingsBody.classList.contains('settings-controllers-enable')) {
-
-                    const settingsBody = playerContainer.querySelector('.settings-controllers');
-                    player.elements.controls.classList.remove('plyr__controls-enable-settings')
-
-                    settingsBody.classList.remove('settings-controllers-enable');
-
-                    const background = document.querySelector('.settings-controllers-enable__background');
-
-                    if (!background.classList.contains('d-none')) {
-                        background.classList.add('d-none');
-                    }
-                }
-            }
-
-            const exitMiniPLayer = () => {
-                let miniPlayer = {
-                    controls : playerContainer.querySelector('.lt-player-mini-player-controls'),
-                    background: playerContainer.querySelector('.lt-player-mini-player-background'),
-                    enable: playerContainer.querySelector('.lt-player-mini-enable'),
-                    size: playerContainer.querySelector(`.lt-player-mini-${instance.playerConfig.getPlayerType()}`)
-                };
-
-                if (miniPlayer.controls) {
-                    miniPlayer.controls.remove();
-                }
-
-                if (miniPlayer.background) {
-                    miniPlayer.background.remove();
-                }
-
-                if (miniPlayer.size) {
-                    miniPlayer.size.classList.remove(`lt-player-mini-${instance.playerConfig.getPlayerType()}`)
-                }
-
-                if (miniPlayer.enable) {
-                    miniPlayer.enable.classList.remove('lt-player-mini-enable')
-                }
-            }
-
-            const exitFullScreen = () => {
-                if (player.fullscreen.active) {
-                    player.fullscreen.exit();
-                }
-            }
-
-            enablePoster();
-            disableSettings();
-            exitMiniPLayer();
-            exitFullScreen();
-            disableControls();
-
-            if (!instance.plyr.elements.container.classList.contains('plyr__poster-enabled')) {
-                instance.plyr.elements.container.classList.add('plyr__poster-enabled');
-            }
-
-            instance.statusFeedbackService.clearLoading()
-        }
-
-    }
-    export class Mobile {
-
-    }
-}

package/src/components/events/LTPlayerCommon.ts

@@ -1,252 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import Plyr, {PlyrEvent} from "plyr";
-import {LoaderService} from "../../services/LoaderService";
-import {LTPlayerPosterPreloadEvents} from "../poster/LTPlayerPosterPreloadEvents";
-import {plyr} from "../../global/types/ModuleTypes";
-
-export class LTPlayerCommon {
-
-    player: LTPlayer.PortraitType | LTPlayer.LandscapeType;
-    plyr: Plyr;
-
-    setupCommon() {
-        this.playerPlay()
-        this.plyrOnPlaying()
-        this.plyrOnSeeking()
-        this.plyrOnControlsShown()
-        this.plyrOnCanplay()
-    }
-
-    playerPlay() {
-        const instance = this.player;
-
-        this.plyr.on('play', function LTPlayerPlay(event) {
-
-            if (!instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
-                instance.plyr.elements.controls.classList.add('plyr__controls-enable');
-            }
-
-            instance.desktopEvents.playPause(event);
-
-            if (instance.additionalInfoService) {
-                instance.additionalInfoService.setCurrentPlayerPlay(instance, event);
-            }
-
-        })
-    }
-    setDefaultSettingsConfig() {
-        const instance = this.player;
-
-        instance.plyr.speed = 1;
-
-        if (!instance.plyr.isEmbed) {
-            let checkCaptions = (instance.plyr as plyr).captions;
-
-            if (checkCaptions.currentTrack >= 0) {
-                instance.plyr.toggleCaptions(true);
-                return;
-            }
-            instance.plyr.toggleCaptions(false);
-            return;
-        }
-
-        instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
-            if (response.length !== 0) {
-                instance.plyr.toggleCaptions(true);
-                return;
-            }
-            instance.plyr.toggleCaptions(false);
-
-        })
-    }
-    removeDesktopPlyrEvents() {
-        let plyrInstance = this.plyr as Plyr as Plyr & { eventListeners: Array<any> }
-
-        plyrInstance.eventListeners.forEach(function (eventListener) {
-            //remove dblclick event from plyr
-            if (eventListener.type === 'dblclick') {
-                eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
-            }
-        });
-    }
-
-    removeMobilePlyrEvents() {
-        let plyrInstance = this.plyr as Plyr as Plyr & { eventListeners: Array<any> }
-        const playerInstance = this.player;
-
-        plyrInstance.eventListeners.forEach(function (eventListener) {
-
-            if (playerInstance.playerConfig.getDevice() === 'mobile') {
-                const deleteTouchEvents = () => {
-                    if (!eventListener.element.classList.contains('plyr__progress'))  {
-                        if (!eventListener.element.classList.contains('plyr__progress__seek')) {
-                            eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
-                        }
-                    }
-                    if (eventListener.element.classList.length === 0) {
-                        eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
-                    }
-                }
-
-                //remove mobile touch event from plyr
-                if (eventListener.type === 'touchstart') {
-                    deleteTouchEvents();
-                }
-
-                if (eventListener.type === 'touchend') {
-                    deleteTouchEvents();
-                }
-
-                if (eventListener.type === 'touchmove') {
-                    deleteTouchEvents();
-                }
-                if (eventListener.type === 'mousemove') {
-                    deleteTouchEvents();
-                }
-
-                if (eventListener.type === 'click') {
-                    eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
-                }
-            }
-        });
-    }
-    onReadyPlayer() {
-        //set share button
-        if (this.player.playerConfig.getShareData()) {
-            if (this.player.playerConfig.getDevice() === 'mobile') {
-                this.player.share.events.mobile.init();
-            } else {
-                this.player.share.events.desktop.init();
-            }
-        }
-
-        //set poster
-        this.player.posterManager.mobileEvents.onload(this.player);
-
-        if (this.player.playerConfig.isAutoPlay()) {
-            let playerContainer = this.player.plyr.elements.container;
-
-            const disablePoster = () => {
-                playerContainer.querySelector(`.lt-player__poster`).classList.add('d-none');
-                playerContainer.querySelector('.plyr__controls').classList.remove('d-none');
-            }
-
-            if (this.player.plyr.embed) {
-                disablePoster();
-                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner())
-
-                this.player.plyr.embed.play().then(function () {
-                    LoaderService.removeSpinner(playerContainer)
-                });
-                LoaderService.removeSpinner(playerContainer)
-            } else {
-                this.player.plyr.play();
-                disablePoster();
-            }
-
-        }
-    }
-
-    endVideo() {
-        this.player.desktopEvents.endVideo(this.player);
-    }
-
-    timeUpdate(event: PlyrEvent) {
-
-        //set chapters time and title
-        if (this.player.playerControl.chaptersService) {
-            this.player.playerControl.chaptersService.updateCurrentTimeAndTitle(this.player, event);
-        }
-    }
-
-
-    preloadPoster = {
-        ready(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            const preloadData = instance.playerConfig.getPreload();
-
-            LTPlayerPosterPreloadEvents.preloadEvents.removePosterImage(instance);
-
-            if (preloadData.autoType) {
-                if (instance.plyr.isEmbed) {
-                    LTPlayerPosterPreloadEvents.preloadEvents.embedPlay(instance, 'event');
-
-                }
-
-                if (instance.plyr.isHTML5) {
-                    LTPlayerPosterPreloadEvents.preloadEvents.html5Play(instance, 'event');
-
-                }
-            }
-
-        },
-
-        timeUpdate(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, type: string) {
-            LTPlayerPosterPreloadEvents.preloadEvents.stop(instance, type);
-        }
-    }
-
-    setCustomSubtitles(controls: HTMLElement, event: Plyr.PlyrEvent )
-    {
-        const eventPlayer: any = event.detail.plyr;
-
-        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
-        const spanElement = customSubtitlesElement.querySelector('span');
-
-        if (!spanElement) {
-            return;
-        }
-        if (!eventPlayer.captions.currentTrackNode.activeCues) {
-            return;
-        }
-        if (eventPlayer.captions.currentTrackNode.activeCues.length > 0) {
-            spanElement.innerHTML = eventPlayer.captions.currentTrackNode.activeCues[0].text;
-        } else {
-            spanElement.innerHTML = ''; // Clear previous captions
-        }
-    }
-
-    clearCustomSubtitles(controls: HTMLElement)
-    {
-        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
-        const spanElement = customSubtitlesElement.querySelector('span');
-
-        if (!spanElement) {
-            return;
-        }
-        spanElement.innerHTML = ''; // Clear previous captions
-    }
-
-    plyrOnSeeking() {
-        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        const plyr: Plyr = this.plyr;
-        plyr.on('seeking', () => {
-            instance.statusFeedbackService.setLoadingSeek()
-        })
-    }
-
-    plyrOnPlaying() {
-        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        const plyr: Plyr = this.plyr;
-        plyr.on('playing', () => {
-            instance.statusFeedbackService.clearLoading()
-        })
-    }
-
-    plyrOnCanplay() {
-        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        const plyr: Plyr = this.plyr;
-        plyr.on('canplay', () => {
-            instance.statusFeedbackService.clearLoading()
-        })
-    }
-
-    plyrOnControlsShown() {
-        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        const plyr: Plyr = this.plyr;
-        plyr.on('controlsshown', () => {
-            instance.statusFeedbackService.setControlsVisible()
-        })
-    }
-
-}