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

package/src/components/controls/LTPlayerMini.ts

@@ -1,285 +0,0 @@
-import Plyr from "plyr";
-import {defaultType} from "../../global/types/ModuleTypes";
-import {TemplateService} from "../../services/TemplateService";
-import {IconsService} from "../../services/IconsService";
-import {LTPlayer} from "../LTPlayerType";
-
-/**
- * Create and add mini-player
- */
-export class LTPlayerMini {
-
-    player: Plyr
-    playerContainer: defaultType = {
-        width: null,
-        height: null
-    }
-    templateService: TemplateService
-    private iconService: IconsService;
-
-    playerType : string
-
-    instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
-
-    observe : ResizeObserver
-
-    constructor() {
-    }
-
-    /**
-     * Init mini player setup
-     * @param player
-     * @param templateService
-     * @param iconService
-     * @param playerType
-     * @param instance
-     */
-    init(player: Plyr, templateService: TemplateService, iconService: IconsService, playerType : string, instance : LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        this.instance = instance;
-        this.templateService = templateService;
-        this.iconService = iconService;
-        this.player = player;
-        this.playerType = playerType;
-        this.setup();
-    }
-
-    enterMiniPlayer() {
-        this.playerContainer.width = this.player.elements.wrapper.getBoundingClientRect().width;
-        this.playerContainer.height = this.player.elements.wrapper.getBoundingClientRect().height;
-        this.player.elements.wrapper.classList.add('lt-player-mini-enable');
-        this.player.elements.wrapper.classList.add(`lt-player-mini-${this.playerType}`)
-        this.setBackground(this.player.elements.wrapper);
-        this.addMouseHoverControllers();
-        this.addPlayPauseEvents();
-        this.setSeekBar();
-
-    }
-
-    /**
-     * Setup mini player
-     * @private
-     */
-    private setup() {
-        const player = this.player;
-        const _this = this;
-        player.on('ready', function () {
-            const playerContainer = player.elements.container;
-            const playerWrapper = player.elements.wrapper;
-            const button = playerContainer.querySelector('.mini-player-control');
-
-            if (button) {
-                button.addEventListener('click', function (event) {
-                    event.preventDefault();
-                    _this.playerContainer.width = playerContainer.getBoundingClientRect().width;
-                    _this.playerContainer.height = playerContainer.getBoundingClientRect().height;
-                    playerWrapper.classList.add('lt-player-mini-enable');
-                    playerWrapper.classList.add(`lt-player-mini-${_this.playerType}`)
-                    _this.setBackground(playerWrapper);
-                    _this.addMouseHoverControllers();
-                    _this.addPlayPauseEvents();
-                    _this.setSeekBar();
-                    _this.exitMiniPlayer(_this.player);
-                })
-            }
-        })
-    }
-
-    /**
-     * Set seek bar, add style component
-     */
-    setSeekBar() {
-       const player = this.player;
-       const playerContainer = player.elements.container;
-       const seekBar: HTMLInputElement | any =  playerContainer.querySelector('.lt-player-mini-player-controls__progress__seek');
-
-        seekBar.addEventListener('input', function () {
-            player.currentTime = parseInt(seekBar.value);
-        })
-
-        const setValue = (seekBar: HTMLInputElement | any) => {
-            let value = (seekBar.value - seekBar.min)/(seekBar.max-seekBar.min)*100;
-            seekBar.value = player.currentTime.toFixed(2).toString();
-            seekBar.max = player.duration.toFixed(2).toString();
-            seekBar.style.background = 'linear-gradient(to right, #D8D846 0%, #D8D846 ' + value + '%, transparent ' + value + '%, transparent 100%)';
-        }
-
-
-        player.on('timeupdate', function () {
-            seekBar.value = player.currentTime.toFixed(2).toString();
-            seekBar.max = player.duration.toFixed(2).toString();
-            setValue(seekBar);
-        })
-        setValue(seekBar);
-
-    }
-
-    /**
-     * Set background on primary player on mini player is enable
-     * @param playerWrapper
-     */
-    private setBackground(playerWrapper: HTMLElement) {
-
-        const background = this.templateService.getBackGroundTemplate({logo : this.iconService.getLogo()});
-
-        const controls = this.templateService.getControlsMiniPlayer({
-            mini_player: 'true',
-            icons:  this.iconService.getIconsByComponent('controls'),
-        })
-
-        playerWrapper.insertAdjacentHTML("afterend", background);
-        playerWrapper.children[0].insertAdjacentHTML("afterend", controls);
-
-        if (this.instance.playerConfig.getObserve()) {
-            if (this.instance.playerConfig.isObserveHeight() !== undefined && !this.instance.playerConfig.isObserveHeight()) {
-                this.setObserveBackground();
-            }
-        } else {
-            this.setObserveBackground();
-        }
-
-    }
-
-    setObserveBackground() {
-
-        const miniPlayerBackground : HTMLElement = this.player.elements.container.querySelector('.lt-player-mini-player-background');
-
-        this.observe = new ResizeObserver(response => {
-            let documentWidth = response[0].contentRect.width;
-            let miniPlayerBackgroundWidth = miniPlayerBackground.getBoundingClientRect().width;
-            if (documentWidth >= miniPlayerBackgroundWidth) {
-                if (documentWidth > this.playerContainer.width) {
-                    if (this.player.elements.controls.getBoundingClientRect().height === 103) {
-                        miniPlayerBackground.style.width  = `${this.playerContainer.width}px`;
-                        miniPlayerBackground.style.height = `${this.playerContainer.height}px`;
-                    } else {
-                        miniPlayerBackground.style.width = `${this.player.elements.controls.getBoundingClientRect().width}px`;
-                        miniPlayerBackground.style.height = `${this.player.elements.controls.getBoundingClientRect().height}px`;
-                    }
-                } else {
-                    miniPlayerBackground.style.width = `${this.playerContainer.width}px`;
-                    let calc = this.playerContainer.height + (response[0].contentRect.width - this.playerContainer.width);
-                    miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
-                }
-            }
-            if (documentWidth < miniPlayerBackgroundWidth) {
-                miniPlayerBackground.style.width = `${documentWidth}px`;
-                let calc = this.playerContainer.height - (this.playerContainer.width - response[0].contentRect.width);
-                miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
-            }
-
-        });
-
-        this.observe.observe(document.body);
-    }
-
-    /**
-     * Add mini player mouse event
-     * @private
-     */
-    private addMouseHoverControllers() {
-        const playerContainer = this.player.elements.container;
-        const miniPLayerSelector = playerContainer.querySelector('.lt-player-mini-enable');
-
-        miniPLayerSelector.addEventListener('mouseover', function () {
-           const miniPLayerControls = miniPLayerSelector.querySelector('.lt-player-mini-player-controls');
-
-           if (miniPLayerControls) {
-               miniPLayerControls.classList.add('lt-player-mini-player-controls-enable');
-           }
-
-        })
-
-        miniPLayerSelector.addEventListener('mouseleave', function () {
-            const miniPLayerControls = miniPLayerSelector.querySelector('.lt-player-mini-player-controls');
-            if (miniPLayerControls) {
-                miniPLayerControls.classList.remove('lt-player-mini-player-controls-enable');
-            }
-        })
-    }
-
-    /**
-     * Add play/pause event
-     */
-    addPlayPauseEvents() {
-        const playerContainer = this.player.elements.container;
-        const player = this.player;
-
-
-        const playButton = playerContainer.querySelector('.lt-player-mini-player-controls__play-button');
-
-
-        if (playButton) {
-            let playerContainer = player.elements.container;
-
-            const playIcon = playerContainer.querySelector('.lt-player-mini-player-controls__play-icon');
-            const pauseIcon = playerContainer.querySelector('.lt-player-mini-player-controls__pause-icon');
-
-            if (player.playing) {
-                playIcon.classList.add('d-none');
-                pauseIcon.classList.remove('d-none');
-            } else {
-                pauseIcon.classList.add('d-none');
-                playIcon.classList.remove('d-none');
-            }
-
-            playButton.addEventListener('click', function (event) {
-                event.preventDefault();
-                if (player.playing) {
-                    player.pause();
-                    playIcon.classList.remove('d-none');
-                    pauseIcon.classList.add('d-none');
-                } else {
-                    player.play();
-                    pauseIcon.classList.remove('d-none');
-                    playIcon.classList.add('d-none');
-                }
-            })
-        }
-    }
-
-    /**
-     * Add exit mini player event, return to primary player
-     * @param player
-     */
-    exitMiniPlayer(player: Plyr) {
-        const playerContainer = player.elements.container;
-        const exit = playerContainer.querySelector('.lt-player-mini-player-controls__exit');
-        let _this = this;
-
-        if (!exit) {
-            return
-        }
-
-        exit.addEventListener('click', function (event) {
-            event.preventDefault();
-            playerContainer.querySelector('.lt-player-mini-player-controls').remove();
-            playerContainer.querySelector('.lt-player-mini-player-background').remove();
-            playerContainer.querySelector('.lt-player-mini-enable').classList.remove(`lt-player-mini-${_this.playerType}`)
-            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable');
-            _this.observe.disconnect();
-
-        })
-    }
-
-
-    event = {
-        removeMiniPLOnFullScreen(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, type: string) {
-
-            let player = instance.plyr;
-            const playerControllers = player.elements.controls;
-            const fullScreenButton = playerControllers.querySelector('.mini-player-control');
-
-            if (fullScreenButton) {
-                switch (type) {
-                    case 'enterfullscreen' :
-                        fullScreenButton.classList.add('d-none');
-                        break
-                    case  'exitfullscreen':
-                        fullScreenButton.classList.remove('d-none');
-                        break
-                }
-            }
-
-        }
-    }
-}

package/src/components/controls/LTPlayerSettingsControlsManager.ts

@@ -1,60 +0,0 @@
-import Plyr from "plyr";
-import {TemplateService} from "../../services/TemplateService";
-import {plyr} from "../../global/types/ModuleTypes";
-import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerCommonSettingsControllers} from "./settings/LTPlayerCommonSettingsControllers";
-import {LTPlayerMobileSettingsControllers} from "./settings/LTPlayerMobileSettingsControllers";
-import {LTPlayerDesktopSettingsControllers} from "./settings/LTPlayerDesktopSettingsControllers";
-
-export class LTPlayerSettingsControlsManager {
-    playerInstance: LTPlayer.PortraitType | LTPlayer.LandscapeType
-    player: Plyr
-    templateService: TemplateService
-    playerID: number
-    common: LTPlayerCommonSettingsControllers
-    mobile: LTPlayerMobileSettingsControllers
-    desktop: LTPlayerDesktopSettingsControllers
-
-    init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-        this.playerInstance = instance;
-        this.player = instance.plyr;
-        this.templateService = instance.templateService;
-        this.common = new LTPlayerCommonSettingsControllers(instance);
-        const playerType = this.player as plyr;
-        this.playerID = playerType.id;
-
-        if (instance.playerConfig.getDevice() === 'mobile') {
-            this.mobile = new LTPlayerMobileSettingsControllers(this);
-        } else {
-            this.desktop = new LTPlayerDesktopSettingsControllers(this);
-        }
-
-    }
-    static closeSettingsEvent(event: MouseEvent) {
-
-        const playerControlsContainer: NodeListOf<Element> = document.querySelectorAll('.plyr__controls');
-
-        if (playerControlsContainer.length === 0) {
-            return;
-        }
-
-        playerControlsContainer.forEach( control => {
-            if (control.classList.contains('plyr__controls-enable-settings')) {
-                const settingsBody = control.querySelector('.settings-controllers');
-
-                if (!(event.target as HTMLTextAreaElement).classList.contains('settings') && settingsBody.classList.contains('settings-controllers-enable')) {
-                    const settingsBody = control.querySelector('.settings-controllers');
-
-                    control.classList.remove('plyr__controls-enable-settings');
-                    settingsBody.classList.remove('settings-controllers-enable');
-
-                    const background = control.querySelector('.settings-controllers-enable__background');
-
-                    if (!background.classList.contains('d-none')) {
-                        background.classList.add('d-none');
-                    }
-                }
-            }
-        })
-    }
-}

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

@@ -1,71 +0,0 @@
-import {LTPlayer} from "../../LTPlayerType";
-
-export class LTPlayerCommonSettingsControllers {
-
-    instance: LTPlayer.PortraitType | LTPlayer.LandscapeType
-
-    constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-        this.instance = instance;
-    }
-
-    addSettingsTemplate(string: 'mobile' | 'desktop') {
-        const settingsTemplate = this.instance.templateService.getSettings(
-            {
-                id : this.instance.playerConfig.getPlayerId(),
-                [string] : true,
-                captions_enabled: this.instance.playerConfig.getCaptionsEnabled() &&
-                    this.instance.playerConfig.hasCaptionsUrl(),
-                captions_missing: !this.instance.playerConfig.hasCaptionsUrl()
-            }
-        );
-        const lastElement = this.instance.plyr.elements.controls.lastElementChild;
-
-        if (lastElement) {
-            lastElement.insertAdjacentHTML("afterend", settingsTemplate);
-        }
-    }
-
-    openSettings() {
-        if (!this.getSelectors().playerControlsContainer.classList.contains('plyr__controls-enable-settings')) {
-            this.getSelectors().playerControlsContainer.classList.add('plyr__controls-enable-settings');
-        }
-
-        if (!this.getSelectors().settingsContainer.classList.contains('settings-controllers-enable')) {
-            this.getSelectors().settingsContainer.classList.add('settings-controllers-enable');
-
-            if (this.getSelectors().background.classList.contains('d-none')) {
-                this.getSelectors().background.classList.remove('d-none');
-            }
-        }
-    }
-
-    getSelectors() {
-        return {
-            playerControlsContainer : this.instance.plyr.elements.controls,
-            settingsContainer : this.instance.plyr.elements.controls.querySelector('.settings-controllers'),
-            background : this.instance.plyr.elements.controls.querySelector('.settings-controllers-enable__background'),
-            button : this.instance.plyr.elements.controls.querySelector('.plyr__controls_settings-button'),
-            saveButton : this.instance.plyr.elements.controls.querySelector('.button-save'),
-            playerContainer : this.instance.plyr.elements.container
-        }
-    }
-
-    closeSettings() {
-        const settingsBody = this.getSelectors().playerControlsContainer.querySelector('.settings-controllers');
-
-        if (settingsBody.classList.contains('settings-controllers-enable')) {
-
-            const settingsBody = this.getSelectors().playerControlsContainer.querySelector('.settings-controllers');
-            this.getSelectors().playerControlsContainer.classList.remove('plyr__controls-enable-settings');
-            settingsBody.classList.remove('settings-controllers-enable');
-
-            const background = this.getSelectors().playerContainer.querySelector('.settings-controllers-enable__background');
-
-            if (!background.classList.contains('d-none')) {
-                background.classList.add('d-none');
-            }
-
-        }
-    }
-
-}

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

@@ -1,135 +0,0 @@
-import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManager";
-import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
-import {defaultType} from "../../../global/types/ModuleTypes";
-import {LTPlayerStorage} from "../../LTPlayerStorage";
-
-export class LTPlayerDesktopSettingsControllers implements SettingsControlsInterfaces  {
-    settingsInstance: LTPlayerSettingsControlsManager
-    constructor(settingsInstance: LTPlayerSettingsControlsManager) {
-        this.settingsInstance = settingsInstance;
-        this.init();
-    }
-
-    init() {
-        this.setButtonSpeed();
-        this.settingsInstance.common.addSettingsTemplate(this.settingsInstance.playerInstance.playerConfig.getDevice());
-        this.addOpenSettingsEventButton();
-        this.initCaptionsEvent();
-        this.initSpeedVideoEvent();
-        this.initSaveButton();
-    }
-
-    addOpenSettingsEventButton() {
-        const selectors: defaultType = this.settingsInstance.common.getSelectors();
-        if (selectors.button) {
-            selectors.button.addEventListener('click', (event: MouseEvent) => {
-                event.preventDefault();
-                this.settingsInstance.common.openSettings();
-            })
-        }
-    }
-
-    initCaptionsEvent() {
-
-        const selectors = this.settingsInstance.common.getSelectors();
-
-        const checkBox = selectors.playerControlsContainer.querySelector(`.subtitles-body__input-switch`) as HTMLInputElement;
-
-        if (checkBox) {
-            checkBox.addEventListener('change', () => {
-
-                if (!checkBox.checked) {
-                    this.settingsInstance.playerInstance.captionsService.disableCaptions();
-                } else {
-                    this.settingsInstance.playerInstance.captionsService.enableCaptions();
-                }
-
-            })
-        }
-    }
-
-    initSpeedVideoEvent() {
-        const playerInstance = this.settingsInstance.playerInstance;
-        const playerControlsContainer = this.settingsInstance.player.elements.controls;
-        const player = this.settingsInstance.player;
-        const rangeInput: HTMLInputElement = playerControlsContainer.querySelector('.speed-range-input');
-
-
-        const myRange: HTMLInputElement = playerControlsContainer.querySelector(`#speed-range-${playerInstance.playerConfig.getPlayerId()}`);
-
-        myRange.value = String(0);
-
-        const myValue: HTMLElement = playerControlsContainer.querySelector(`#speed-range-value-${playerInstance.playerConfig.getPlayerId()}`);
-
-        myValue.style.top = "-20px";
-
-        let values:any = [1,1.25,1.50,2];
-
-        myRange.oninput = function() {
-            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 selectors = this.settingsInstance.common.getSelectors();
-        const instance = this;
-
-        const saveButton = selectors.playerControlsContainer.querySelector('.button-save');
-
-        saveButton.addEventListener('click', function (event) {
-            event.preventDefault();
-            instance.settingsInstance.common.closeSettings();
-        })
-    }
-
-    setButtonSpeed() {
-        const playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-        const playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        const plyr = this.settingsInstance.playerInstance.plyr;
-        const instance = this.settingsInstance.playerInstance;
-        const storage = new LTPlayerStorage();
-
-        if (playerSpeedButton) {
-            const speedSpan = document.createElement('span');
-            playerSpeedButton.appendChild(speedSpan);
-
-            const displaySpeed = Math.floor(plyr.speed * 10) / 10;
-            speedSpan.innerHTML = displaySpeed + "X";
-            speedSpan.className = '';
-            speedSpan.classList.add('playback-speed--' + plyr.speed + 'X');
-
-            playerSpeedButton.addEventListener('click', function(event) {
-                const 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 = '';
-                console.log(playSpeed.toPrecision(2));
-                speedSpan.classList.add('playback-speed--' + playSpeed + 'X');
-
-                instance.playerControl.mobileEvents.showControls(instance);
-            })
-        }
-    }
-}