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

package/src/components/controls/LTPlayerChapters.ts

@@ -1,285 +0,0 @@
-import Plyr, {PlyrEvent} from "plyr";
-import {defaultType, plyr} from "../../global/types/ModuleTypes";
-import {LTPlayer} from "../LTPlayerType";
-
-export class LTPlayerChapters {
-    /**
-     * Player instance
-     * @private
-     */
-    player: LTPlayer.PortraitType | LTPlayer.LandscapeType
-    /**
-     * LTPlayerChapters array list
-     * @private
-     */
-    chapters: Array<any>
-
-    /**
-     * The first Element from chapters array
-     * @private
-     */
-    firstChapter: defaultType
-    /**
-     * The last Element from chapters array
-     * @private
-     */
-    lastChapter: defaultType;
-
-    /**
-     * Player instance current time
-     * @private
-     */
-    currentTime: number
-
-    /**
-     * Set chapters events and functionality
-     * @param chapters
-     */
-    constructor(chapters: Array<any>) {
-        this.chapters = chapters;
-        this.setupInitChapter();
-    }
-
-    setupInitChapter() {
-        if (this.chapters.length !== 0) {
-            this.lastChapter  = this.chapters[this.chapters.length - 1];
-            this.firstChapter  = this.chapters[0];
-        }
-    }
-
-    /**
-     * Init chapters setup
-     */
-    updateCurrentTimeAndTitle(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, event: PlyrEvent) {
-
-        this.player = instance;
-
-        const eventPlayer = event.detail.plyr as plyr
-
-        if (eventPlayer.id !== (instance.plyr as plyr).id) {
-            return;
-        }
-
-        instance.playerControl.chaptersService.currentTime = eventPlayer.currentTime;
-
-        if (instance.plyr.paused) {
-            instance.playerControl.chaptersService.currentTime += 0.1;
-        }
-
-        let chapters = instance.playerControl.chaptersService.findChapter(instance.playerControl.chaptersService.currentTime, instance.playerControl.chaptersService.chapters)
-
-        if (chapters !== undefined) {
-            instance.playerControl.chaptersService.setChapterPreviousNext(chapters[2], chapters[0]);
-            // instance.playerControl.chaptersService.setTitleChapterName(chapters[1]);
-            instance.playerControl.chaptersService.setButtonsChapterTime(chapters[0], chapters[2])
-        }
-    }
-
-    /**
-     * Set skip-backward and skip-forward event
-     */
-    setButtonsEvents(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-        this.player = instance;
-        let player = instance.plyr;
-        let playerControlsContainer = instance.plyr.elements.controls;
-
-        const leftButton: HTMLElement = playerControlsContainer.querySelector('.skip-backward');
-        const rightButton: HTMLElement = playerControlsContainer.querySelector('.skip-forward');
-
-        leftButton.addEventListener('click', function (event) {
-            event.preventDefault();
-            if (leftButton.dataset.ltPlayerChaptertimestamp === "false") {
-                return;
-            }
-            if (leftButton.dataset.ltPlayerChaptertimestamp) {
-                player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp) + 0.1;
-            }
-        })
-
-        rightButton.addEventListener('click', function (event) {
-
-            event.preventDefault();
-
-            if (instance.playerControl.chaptersService.currentTime > instance.playerControl.chaptersService.lastChapter.timestamp) {
-
-                player.stop();
-                const playerContainer = player.elements.container;
-
-                const customPoster = playerContainer.querySelector('.lt-player__poster');
-                const controls = playerContainer.querySelector('.plyr__controls');
-
-                playerContainer.classList.add('plyr--stopped')
-                customPoster.classList.remove('d-none');
-                controls.classList.add('d-none');
-                return;
-            }
-
-            if (rightButton.dataset.ltPlayerChaptertimestamp) {
-                player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp) + 0.1;
-            }
-
-        })
-    }
-
-    setMobileButtonEvents(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-        this.player = instance;
-        let player = instance.plyr;
-        let playerControlsContainer = instance.plyr.elements.controls;
-
-        const leftButton: HTMLElement = playerControlsContainer.querySelector('.skip-backward');
-        const rightButton: HTMLElement = playerControlsContainer.querySelector('.skip-forward');
-
-        if (leftButton) {
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(leftButton);
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileChaptersLeftButton(event) {
-                    event.preventDefault();
-                    if (leftButton.dataset.ltPlayerChaptertimestamp === "false") {
-                        return;
-                    }
-                    if (leftButton.dataset.ltPlayerChaptertimestamp) {
-                        player.currentTime = parseFloat(leftButton.dataset.ltPlayerChaptertimestamp) + 0.1;
-                    }
-
-                    instance.playerControl.mobileEvents.showControls(instance);
-                })
-            }
-        }
-
-        if (rightButton) {
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(rightButton);
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileChaptersLeftButton(event) {
-                    event.preventDefault();
-
-                    if (instance.playerControl.chaptersService.currentTime > instance.playerControl.chaptersService.lastChapter.timestamp) {
-
-                        player.stop();
-                        const playerContainer = player.elements.container;
-
-                        const customPoster = playerContainer.querySelector('.lt-player__poster');
-                        const controls = playerContainer.querySelector('.plyr__controls');
-
-                        playerContainer.classList.add('plyr--stopped')
-                        customPoster.classList.remove('d-none');
-                        controls.classList.add('d-none');
-                        return;
-                    }
-
-                    if (rightButton.dataset.ltPlayerChaptertimestamp) {
-                        player.currentTime = parseFloat(rightButton.dataset.ltPlayerChaptertimestamp) + 0.1;
-                    }
-
-                    instance.playerControl.mobileEvents.showControls(instance);
-                })
-            }
-        }
-    }
-
-    /**
-     * Add button data attribute [dataset.ltPlayerChaptertimestamp]
-     * @param left
-     * @param right
-     */
-    setButtonsChapterTime(left: defaultType|null, right:defaultType|null) {
-
-        const playerControlsContainer = this.player.plyr.elements.controls;
-
-        const leftButton: HTMLElement = playerControlsContainer.querySelector('.skip-backward');
-
-        leftButton.dataset.ltPlayerChaptertimestamp = String(false);
-
-        if (left !== null && left != undefined) {
-            leftButton.dataset.ltPlayerChaptertimestamp = left.timestamp;
-        }
-
-        const rightButton: HTMLElement = playerControlsContainer.querySelector('.skip-forward');
-
-        if (right !== null && right != undefined) {
-            rightButton.dataset.ltPlayerChaptertimestamp = right.timestamp;
-        }
-
-    }
-
-    setChapterPreviousNext(nextChapter: defaultType, previousChapter: defaultType) {
-        const playerControlsContainer = this.player.plyr.elements.controls;
-        const previous = playerControlsContainer.querySelector('.bottom-controller__previous-chapter-view');
-        const next = playerControlsContainer.querySelector('.bottom-controller__next-chapter-view');
-        if (next) {
-            next.innerHTML = '';
-            if (nextChapter) {
-                next.innerHTML = nextChapter.name;
-            }
-        }
-
-        if (previous) {
-            previous.innerHTML = '';
-            if (previousChapter) {
-                previous.innerHTML = previousChapter.name;
-            }
-        }
-    }
-
-    /**
-     * Set Chapter Title name
-     * @param chapter
-     */
-    setTitleChapterName(chapter: defaultType) {
-        const playerControlsContainer = this.player.plyr.elements.controls;
-        const topControllersContainer = playerControlsContainer.querySelector('.top-controllers__body__center');
-        const chapterTitleSelector = topControllersContainer.getElementsByTagName('p')[0];
-        if (chapter) {
-            chapterTitleSelector.innerHTML = chapter.name;
-        } else {
-            chapterTitleSelector.innerHTML = '';
-        }
-    }
-
-    /**
-     * Find LTPlayerChapters
-     * @param time
-     * @param state
-     */
-    findChapter(time: number, state: Array<any>) {
-
-        if (time == null || state.length == 0) {
-            return undefined;
-        }
-
-        let current: null;
-        let left: null;
-        let right = null;
-
-        const findPrevious = (state: defaultType, elementIndex: number) => {
-            if (elementIndex === null) {
-                return null;
-            }
-
-            return state[elementIndex - 2] || null;
-        }
-
-        const findCurrent = (state: defaultType, elementIndex: number) => {
-            if (elementIndex === null) {
-                return null;
-            }
-            return state[elementIndex - 1] ||null;
-        }
-
-        for (let index = 0; index < state.length; index += 1) {
-            const element = state[index];
-            if (element.timestamp >= time) {
-                right = element;
-                current = findCurrent(state, index);
-                left = findPrevious(state, index);
-                return [left, current, right]
-            }
-        }
-
-        current = state[state.length - 1];
-        left = state[state.length - 2];
-
-        return [left, current, right]
-    }
-}

package/src/components/controls/LTPlayerControls.ts

@@ -1,57 +0,0 @@
-import Plyr from "plyr";
-import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerConfig} from "../config/LTPlayerConfig";
-import {IconsService} from "../../services/IconsService";
-import {LTPlayerChapters} from "./LTPlayerChapters";
-import {LTPlayerSettingsControlsManager} from "./LTPlayerSettingsControlsManager";
-import {LTPlayerControlsEvents} from "./LTPlayerControlsEvents";
-
-export class LTPlayerControls {
-
-    templateService: TemplateService;
-    playerVolumeBefore: number
-    settingsControlsManager: LTPlayerSettingsControlsManager
-    chaptersService : LTPlayerChapters
-    desktopEvents: LTPlayerControlsEvents.Desktop;
-    mobileEvents: LTPlayerControlsEvents.Mobile;
-    commonEvents: LTPlayerControlsEvents.Common;
-
-    /**
-     * Generate Player LTPlayerControls to pass in Plyr
-     * @param templateService
-     */
-    constructor(templateService: TemplateService) {
-        this.settingsControlsManager = new LTPlayerSettingsControlsManager();
-        this.templateService = templateService;
-        this.commonEvents = new LTPlayerControlsEvents.Common();
-        this.setDesktopEvents();
-        this.setMobileEvents();
-
-    }
-
-    setDesktopEvents() {
-        this.desktopEvents = new LTPlayerControlsEvents.Desktop();
-    }
-
-    setMobileEvents() {
-        this.mobileEvents = new LTPlayerControlsEvents.Mobile();
-    }
-
-    /**
-     * Set player chapters
-     * @param chapters
-     */
-    initChapters(chapters: Array<any>) {
-        this.chaptersService = new LTPlayerChapters(chapters);
-    }
-
-
-    /**
-     * Get LTPlayerControls Html
-     * @param config
-     * @param iconService
-     */
-    getControls(config: LTPlayerConfig, iconService: IconsService) {
-        return this.templateService.getTemplateControls(config, iconService);
-    }
-}