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

package/src/components/addInfo/LTPlayerAddInfoDesktop.ts

@@ -1,127 +0,0 @@
-import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
-import {additionalInformation} from "../../global/types/ModuleTypes";
-import {LTPlayer} from "../LTPlayerType";
-import {LoaderService} from "../../services/LoaderService";
-
-export class LTPlayerAddInfoDesktop {
-    set(controller: LTPLayerAddInfo.Controller, type: string) {
-
-        const playerContainer = controller.plyr.elements.container;
-        const playerControlsContainer = controller.plyr.elements.controls;
-        let additionalInfoBodyOut: Element = playerContainer.nextElementSibling;
-        let additionalInfoBodyIn: Element = playerControlsContainer.querySelector('.lt-player__additional-info');
-        let instance = controller;
-
-        const getInfoButtons = (selector: Element): NodeList => {
-
-            if (!selector) {
-                return null
-            }
-            return selector.querySelectorAll('button');
-        }
-
-        let buttons: NodeList = null;
-
-        const infoButtonsOut: NodeList = getInfoButtons(additionalInfoBodyOut);
-        const infoButtonsIn: NodeList = getInfoButtons(additionalInfoBodyIn);
-
-        if (type == 'in') {
-            buttons = infoButtonsIn;
-        } else {
-            buttons = infoButtonsOut;
-        }
-
-        if (buttons.length === 0) {
-            return
-        }
-
-        const createInformationModal = (info: additionalInformation, key: string) => {
-
-            let modalTemplate = null;
-
-            if (typeof info === 'object') {
-                modalTemplate = controller.templateService.getAdditionalInfo({
-                    desktop: true,
-                    modal: true,
-                    id: `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                    object_data: true,
-                    [key]: info
-                })
-            } else {
-                modalTemplate = controller.templateService.getAdditionalInfo({
-                    desktop: true,
-                    modal: true,
-                    id: `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                    data: info
-                })
-            }
-
-            document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
-        }
-
-        buttons.forEach((button: HTMLElement) => {
-
-            button.addEventListener('click', function (event) {
-
-                event.preventDefault();
-
-                let targetModal = button.dataset.ltTarget;
-                let data = instance.additionalData;
-
-                if (data[targetModal] !== undefined) {
-                    createInformationModal(data[targetModal], targetModal)
-                }
-
-                let modal = document.querySelector(`.lt-modal-${targetModal}-${instance.playerInstance.playerConfig.getPlayerId()}`);
-
-                if (modal) {
-                    modal.classList.add('player-lt__show-modal');
-                    document.body.classList.add('overflow-hidden-body-important');
-                }
-
-                window.Player.players.forEach(item => {
-                    if (item.plyr.playing) {
-                        instance.playerInstance.pausedPlayer = item.plyr;
-                        item.plyr.pause();
-                        return;
-                    }
-                })
-            })
-        })
-    }
-
-    windowDesktopEvents(event: MouseEvent, instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-        const modals = document.querySelectorAll('.player-lt__modal');
-        if (modals.length !== 0) {
-            modals.forEach(modal => {
-                if (modal.classList.contains('player-lt__show-modal')) {
-                    let target = event.target as HTMLElement;
-                    if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
-                        modal.classList.remove('player-lt__show-modal');
-                        document.body.classList.remove('overflow-hidden-body-important');
-                        document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
-
-                        window.Player.players.forEach(item => {
-                            if (item.pausedPlayer !== undefined) {
-                                if (item.pausedPlayer.isEmbed) {
-                                    item.pausedPlayer.embed.play().then(function () {
-                                        return;
-                                    }).catch(function () {
-                                        // an error occurred
-                                    });
-                                }
-
-                                if (item.pausedPlayer.isHTML5) {
-
-                                    item.pausedPlayer.play();
-                                    return;
-                                }
-                            return;
-                            }
-                        })
-                    }
-                }
-            })
-        }
-    }
-}

package/src/components/addInfo/LTPlayerAddInfoManager.ts

@@ -1,230 +0,0 @@
-import {additionalInformation, defaultType} from "../../global/types/ModuleTypes";
-import {TemplateService} from "../../services/TemplateService";
-import {IconsService} from "../../services/IconsService";
-import Plyr, {PlyrEvent} from "plyr";
-import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerAddInfoDesktop} from "./LTPlayerAddInfoDesktop";
-import {LTPlayerAddInfoMobile} from "./LTPlayerAddInfoMobile";
-
-export class LTPlayerAddInfoManager {
-    container: HTMLElement
-    additionalData: additionalInformation = {};
-    playerId: number
-    templateService : TemplateService
-    iconService: IconsService
-    plyr : Plyr
-    playerInstance: LTPlayer.PortraitType | LTPlayer.LandscapeType
-    players: Array<any>;
-    device: string
-    addInfoType: LTPLayerAddInfo.Landscape | LTPLayerAddInfo.Portrate
-    desktopEvents: LTPlayerAddInfoDesktop;
-    mobileEvents: LTPlayerAddInfoMobile
-
-
-    constructor() {
-        this.setDesktopEvents();
-        this.setMobileEvents();
-    }
-
-
-    setDesktopEvents() {
-        this.desktopEvents = new LTPlayerAddInfoDesktop();
-    }
-
-    setMobileEvents() {
-        this.mobileEvents = new LTPlayerAddInfoMobile();
-    }
-}
-
-
-export namespace LTPLayerAddInfo {
-
-    export class Controller extends LTPlayerAddInfoManager {
-        activePlayer: Plyr;
-
-        setContainer(container: HTMLElement) {
-            this.container = container;
-            this.setDataContent();
-        }
-
-        private setDataContent() {
-            const items: HTMLCollection = this.container.children;
-
-            if (items.length === 0) {
-                return;
-            }
-
-            Array.from(items).forEach((item: HTMLElement) => {
-                if (item.hasAttribute('data-lt-player-additional-info-target')) {
-                    Object.assign(this.additionalData, {[item.dataset.ltPlayerAdditionalInfoTarget] : item.innerHTML})
-                }
-            })
-        }
-
-        setConfig(config: defaultType) {
-            Object.keys(config).forEach(item => {
-                if (Object.keys(config[item]).length > 0) {
-                    Object.assign(this.additionalData, {[item] : config[item]})
-                }
-            })
-        }
-
-        init(player: LTPlayer.PortraitType | LTPlayer.LandscapeType, playerId: number, iconService: IconsService, templateService: TemplateService) {
-
-            if (Object.keys(this.additionalData).length === 0) {
-                return;
-            }
-            this.playerInstance = player;
-            this.plyr = player.plyr;
-            this.playerId = playerId;
-            this.iconService = iconService;
-            this.templateService = templateService;
-            this.device = player.playerConfig.getDevice();
-            this.setPlayerType();
-        }
-
-
-        setPlayerType() {
-            switch (this.playerInstance.playerConfig.getPlayerType()) {
-                case 1:
-                    this.addInfoType = new LTPLayerAddInfo.Portrate().setAddInfo(this);
-                    break
-                case 2:
-                    this.addInfoType = new LTPLayerAddInfo.Landscape;
-                    break
-                case '1':
-                    this.addInfoType = new LTPLayerAddInfo.Portrate().setAddInfo(this);
-                    break
-                case '2':
-                    this.addInfoType = new LTPLayerAddInfo.Landscape;
-                    break
-                case 'portrait':
-                    this.addInfoType = new LTPLayerAddInfo.Portrate().setAddInfo(this);
-                    break
-                case 'landscape':
-                    this.addInfoType = new LTPLayerAddInfo.Landscape;
-                    break
-            }
-        }
-
-        setCurrentPlayerPlay(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, event: PlyrEvent) {
-            this.activePlayer = event.detail.plyr;
-        }
-        remove(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-            let modals = document.querySelectorAll('.player-lt__modal');
-
-            if (modals.length !== 0) {
-                modals.forEach(item => {
-                    item.remove();
-                })
-            }
-
-            let container = instance.playerConfig.getPlayerElementContainer();
-
-            let addContainer = container.querySelector('.lt-player__additional-info');
-
-            addContainer.remove();
-        }
-
-    }
-
-    export class Portrate extends Controller {
-
-        controller: LTPLayerAddInfo.Controller
-
-        setAddInfo(controller: LTPLayerAddInfo.Controller) {
-
-            this.controller = controller;
-
-            switch (this.controller.device) {
-                case 'mobile':
-                    this.controller.plyr.on('ready', () => {
-                        this.mobile();
-                    })
-                    break
-                case 'desktop':
-                    this.desktop();
-                    break
-            }
-
-            return this;
-        }
-
-
-        mobile() {
-
-            const icons: defaultType = this.controller.iconService.getIconsByComponent('additionalInfo');
-            const playerControlsContainer = this.controller.plyr.elements.controls;
-            const playerVideoContent = playerControlsContainer.querySelector('.content__body');
-
-            let templateData: { target: string; icon: any; }[] = [];
-
-            Object.keys(this.controller.additionalData).forEach(item => {
-                switch (item) {
-                    case 'abstract':
-                        templateData.push({target: item, icon: icons['file-text']});
-                        break
-                    case 'bio':
-                        templateData.push({target: item, icon: icons['user']});
-                        break
-                    case 'institution':
-                        templateData.push({target: item, icon: icons['university']});
-                        break
-                    default:
-                        templateData.push({target: item, icon: null});
-                }
-            })
-
-            let buttonsTemplate: string = '';
-            buttonsTemplate = this.controller.templateService.getAdditionalInfoButtons({mobile: true, exist: 'true', buttons:templateData})
-            playerVideoContent.insertAdjacentHTML("afterend", buttonsTemplate);
-
-            this.mobileEvents.set(this.controller);
-        }
-
-
-        desktop() {
-            const icons: defaultType = this.controller.iconService.getIconsByComponent('additionalInfo');
-
-            let templateData: { target: string; icon: any; }[] = [];
-
-            Object.keys(this.controller.additionalData).forEach(item => {
-                switch (item) {
-                    case 'abstract':
-                        templateData.push({target: item, icon: icons['file-text']});
-                        break
-                    case 'bio':
-                        templateData.push({target: item, icon: icons['user']});
-                        break
-                    case 'institution':
-                        templateData.push({target: item, icon: icons['university']});
-                        break
-                    default:
-                        templateData.push({target: item, icon: null});
-                }
-            })
-
-            let buttonsTemplate: string = '';
-
-            buttonsTemplate = this.controller.templateService.getAdditionalInfoButtons({
-                desktop: true,
-                exist: 'true',
-                buttons: templateData
-            });
-            this.controller.playerInstance.windowService.setEventAddInfo(buttonsTemplate, this.desktopEvents, this.controller);
-        }
-    }
-
-    export class Landscape extends Controller {
-        controller: LTPLayerAddInfo.Controller
-        setAddInfo() {
-
-        }
-        mobileTouchEvent() {
-
-        }
-
-
-    }
-}

package/src/components/addInfo/LTPlayerAddInfoMobile.ts

@@ -1,113 +0,0 @@
-import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
-import {additionalInformation} from "../../global/types/ModuleTypes";
-import {LTPlayer} from "../LTPlayerType";
-
-export class LTPlayerAddInfoMobile {
-    set(controller: LTPLayerAddInfo.Controller) {
-
-        const playerContainer = controller.plyr.elements.container;
-        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({
-                    desktop: true,
-                    modal: true,
-                    id: `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                    object_data: true,
-                    [key]: info
-                })
-            } else {
-                modalTemplate = controller.templateService.getAdditionalInfo({
-                    desktop: true,
-                    modal: true,
-                    id: `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                    data: info
-                })
-            }
-
-            document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
-        }
-
-        buttons.forEach((button: HTMLElement) => {
-            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(button);
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileAdditionalInfoButtons(event) {
-                    event.preventDefault();
-
-                    let targetModal = button.dataset.ltTarget;
-                    let data = instance.additionalData;
-
-                    if (data[targetModal] !== undefined) {
-                        createInformationModal(data[targetModal], targetModal)
-                    }
-
-                    let modal = document.querySelector(`.lt-modal-${targetModal}-${instance.playerInstance.playerConfig.getPlayerId()}`);
-
-                    if (modal) {
-                        modal.classList.add('player-lt__show-modal');
-                        document.body.classList.add('overflow-hidden-body-important');
-                    }
-
-                    window.Player.players.forEach(item => {
-                        if (item.plyr.playing) {
-                            instance.playerInstance.pausedPlayer = item.plyr;
-                            item.plyr.pause();
-                            return;
-                        }
-                    })
-
-                    __this.closeModal(controller);
-                })
-            }
-        })
-    }
-
-    closeModal(controller: LTPLayerAddInfo.Controller) {
-        const modals = document.querySelectorAll('.player-lt__modal');
-
-        if (modals.length !== 0) {
-            modals.forEach(modal => {
-                const mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(modal);
-                mobileEvent.on('singletap', function(event) {
-                    const target = event.target;
-                    if (modal.classList.contains('player-lt__show-modal')) {
-                        if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
-                            modal.classList.remove('player-lt__show-modal');
-                            document.body.classList.remove('overflow-hidden-body-important');
-                            document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
-                            window.Player.players.forEach(item => {
-                                if (item.pausedPlayer !== undefined) {
-                                    if (item.pausedPlayer.isEmbed) {
-                                        item.pausedPlayer.embed.play().then(function () {
-                                            return;
-                                        }).catch(function () {
-                                            // an error occurred
-                                        });
-                                    }
-
-                                    if (item.pausedPlayer.isHTML5) {
-                                        item.pausedPlayer.play();
-                                        return;
-                                    }
-                                    return;
-                                }
-                            })
-                        }
-                    }
-                });
-            })
-        }
-    }
-}

package/src/components/captions/LTPlayerCaptions.ts

@@ -1,80 +0,0 @@
-import {LTPlayerController} from "../../global/controllers/LTPlayerController";
-
-export class LTPlayerCaptionsManager {
-    player: LTPlayerController
-
-    constructor(player: LTPlayerController) {
-        this.player = player;
-    }
-
-    enableSubtitlesCheckbox() {
-        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
-        const subtitleCheckboxInput = playerContainer.querySelector('.subtitles-body__input-switch')
-        subtitleCheckboxInput.removeAttribute('disabled')
-    }
-
-    disableSubtitlesCheckbox() {
-        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
-        const subtitleCheckboxInput = playerContainer.querySelector('.subtitles-body__input-switch')
-        subtitleCheckboxInput.setAttribute('disabled', '')
-    }
-
-    setCaptions(src: string|null): void {
-        const playerContainer = this.player.playerConfig.getPlayerElementContainer()
-        const videoElement = playerContainer.querySelector("video")
-        const trackElement = videoElement.querySelector("track")
-
-        this.player.plyr.currentTrack = -1;
-        this.clearSubtitles()
-
-        if (trackElement) {
-            trackElement.remove()
-        }
-
-        if (src) {
-            const newTrack = document.createElement('track');
-            Object.assign(newTrack, {
-                kind: 'captions',
-                label: 'English captions',
-                srclang: 'en',
-                default: 'default',
-                src: src
-            });
-
-            newTrack.addEventListener(`load`, evt => {
-                this.player.plyr.currentTrack = 0;
-            });
-            this.enableSubtitlesCheckbox()
-            this.player.plyr.toggleCaptions(true);
-            videoElement.appendChild(newTrack);
-        } else {
-            this.disableSubtitlesCheckbox()
-        }
-    }
-
-    enableCaptions() {
-        this.player.playerConfig.setCaptionsEnabled(true)
-        this.player.plyr.currentTrack = 0;
-        this.player.plyr.toggleCaptions(true)
-        this.player.statusFeedbackService.setCaptionsEnabled()
-    }
-
-    disableCaptions() {
-        this.player.playerConfig.setCaptionsEnabled(false)
-        this.player.plyr.currentTrack = -1;
-        this.player.plyr.toggleCaptions(false)
-        this.clearSubtitles()
-        this.player.statusFeedbackService.clearCaptionsEnabled()
-    }
-
-    clearSubtitles(): void {
-        const controls = this.player.plyr.elements.controls
-        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
-        const spanElement = customSubtitlesElement.querySelector('span');
-
-        if (!spanElement) {
-            return;
-        }
-        spanElement.innerHTML = ''; // Clear previous captions
-    }
-}