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

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -1,172 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import {LoaderService} from "../../services/LoaderService";
-
-export namespace LTPlayerPosterEvents {
-    export class Common {
-
-        poster = {
-            getButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType): undefined | NodeListOf<Element> {
-                const playerContainer = instance.plyr.elements.container;
-                const playButtons = playerContainer.querySelectorAll('.poster-button-play, .poster-button-watch-now');
-
-                if (playButtons.length === 0) {
-                    if (process.env.DEBUG === "true") {
-                        console.error('No button selector found');
-                    }
-                    return undefined;
-                }
-
-                return playButtons;
-            },
-
-            reset(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-                const playerContainer = instance.plyr.elements.container;
-                const disablePoster = () => {
-                    playerContainer.querySelector(`.lt-player__poster`).classList.add('d-none');
-                    playerContainer.querySelector('.plyr__controls').classList.remove('d-none');
-                }
-
-                const play = () => {
-                    if (instance.plyr.isEmbed) {
-                        disablePoster();
-                        playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner())
-                        instance.plyr.embed.play().then(() => {
-                                instance.plyr.volume = 1;
-                            LoaderService.removeSpinner(playerContainer)
-                        },
-                        () => {
-                            instance.plyr.volume = 1;
-                            LoaderService.removeSpinner(playerContainer)
-                            instance.plyr.play();
-                        });
-                    } else {
-                        disablePoster();
-                        instance.plyr.volume = 1;
-                        instance.plyr.play();
-                    }
-
-                    if (instance.playerConfig.getPreload()) {
-                        LoaderService.removeSpinner(playerContainer);
-
-                        if (instance.playerConfig.getDevice() === 'mobile') {
-                            if (instance.plyr.isEmbed) {
-                                instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
-                                    if (response.length !== 0) {
-                                        instance.plyr.toggleCaptions(true);
-                                    }
-                                })
-                            } else {
-                                instance.plyr.toggleCaptions(true);
-                            }
-                        }
-                    }
-
-                }
-
-                if (instance.playerConfig.getPreload().isActive) {
-                    instance.plyr.volume = 1;
-                    instance.plyr.currentTime = 0;
-                    instance.playerConfig.getPreload().isActive = false;
-                }
-
-                play();
-            }
-        }
-
-    }
-
-
-    export class Desktop {
-        /**
-         * Add play event on poster
-         */
-        posterBody(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            const common: Common = new LTPlayerPosterEvents.Common();
-
-            const playerContainer: HTMLElement = instance.plyr.elements.container;
-            const posterBody: HTMLElement = playerContainer.querySelector('.lt-player__poster__body');
-
-
-            if (posterBody) {
-                posterBody.addEventListener('click', function LTPlayerPosterButtons(event) {
-                    event.preventDefault();
-
-                    if((event.target as HTMLInputElement).classList.contains('poster-lt-player-share') ||
-                        (event.target as HTMLInputElement).classList.contains('filter')
-                    ) {
-                        return;
-                    }
-
-                    instance.playerControl.desktopEvents.titleLineBreak(instance);
-                    instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-                    common.poster.reset(instance);
-
-                })
-            }
-        }
-    }
-
-    export class Mobile {
-        /**
-         * Add play event on poster mobile
-         */
-        posterBody(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            const playerContainer: HTMLElement = instance.plyr.elements.container;
-            const playerPoster: Element = playerContainer.querySelector('.plyr__poster');
-            const playerBody: Element = playerContainer.querySelector('.lt-player__poster__body');
-            const common: Common = new LTPlayerPosterEvents.Common();
-
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerBody);
-
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobilePosterPlay() {
-
-                    if (playerPoster.classList.contains('d-none')) {
-                        return;
-                    }
-
-                    instance.playerControl.desktopEvents.titleLineBreak(instance);
-
-                    instance.playerControl.mobileEvents.playPauseIcon(instance, 'timeupdate');
-                    common.poster.reset(instance);
-
-                    playerContainer.classList.remove('plyr__poster-enabled');
-
-                    instance.playerControl.mobileEvents.showControls(instance);
-                });
-            }
-        }
-
-        /**
-         * Remove Onload Poster from player
-         */
-        onload(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            // const playerElementContainer = instance.playerConfig.getPlayerElementContainer();
-            // const playerOnloadPosterSelector = playerElementContainer.parentElement.querySelector('.lt-player-onload-poster');
-            //
-            // if (playerOnloadPosterSelector) {
-            //     // playerElementContainer.classList.remove('d-none');
-            //     playerElementContainer.parentElement.querySelector('.lt-player-onload-poster').remove();
-            // }
-        }
-
-        showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerContainer: HTMLElement = instance.plyr.elements.container;
-            const playerControlsContainer: HTMLElement = instance.plyr.elements.controls;
-            const playerPoster: Element = playerContainer.querySelector('.plyr__poster');
-
-
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerPoster);
-
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobilePosterShowControls() {
-                    if (!playerControlsContainer.classList.contains('.plyr__controls-enable')) {
-                        instance.playerControl.mobileEvents.showControls(instance);
-                    }
-                });
-            }
-        }
-    }
-}

package/src/components/poster/LTPlayerPosterManager.ts

@@ -1,46 +0,0 @@
-import {LTPlayerPosterPreload} from "./LTPlayerPosterPreload";
-import {LTPlayerPoster} from "./LTPlayerPoster";
-import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerDevMethode} from "../LTPlayerDevMethode";
-import {LTPlayerConfig} from "../config/LTPlayerConfig";
-import {TemplateService} from "../../services/TemplateService";
-import {IconsService} from "../../services/IconsService";
-import {LTPlayerPosterEvents} from "./LTPlayerPosterEvents";
-
-export class LTPlayerPosterManager {
-
-    instance: LTPlayer.LandscapeType | LTPlayer.PortraitType
-    preload: LTPlayerPosterPreload
-    poster: LTPlayerPoster
-    playerConfig: LTPlayerConfig
-    iconService: IconsService
-    templateService: TemplateService
-    desktopEvents: LTPlayerPosterEvents.Desktop;
-    mobileEvents: LTPlayerPosterEvents.Mobile;
-    constructor() {
-        this.desktopEvents = new LTPlayerPosterEvents.Desktop();
-        this.mobileEvents = new LTPlayerPosterEvents.Mobile();
-    }
-
-    init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-        this.instance = instance;
-        this.playerConfig = instance.playerConfig;
-        this.templateService = instance.templateService;
-        this.iconService = instance.iconService;
-
-        this.poster = new LTPlayerPoster(this.instance.plyr, this.templateService, this.playerConfig, this.iconService);
-
-        this.poster.setTemplate();
-        this.poster.setImage();
-        if (this.playerConfig.getPreload()) {
-            this.initPreload();
-        }
-
-    }
-    initPreload() {
-        this.preload = new LTPlayerPosterPreload();
-        this.preload.initPreload(this.instance.plyr, this.templateService, this.playerConfig, this.iconService);
-        this.instance.devMethodePreload = new LTPlayerDevMethode.Preload(this.instance, this.preload);
-    }
-}

package/src/components/poster/LTPlayerPosterPreload.ts

@@ -1,51 +0,0 @@
-import {LTPlayerPoster} from "./LTPlayerPoster";
-import Plyr from "plyr";
-import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerConfig} from "../config/LTPlayerConfig";
-import {IconsService} from "../../services/IconsService";
-import {LoaderService} from "../../services/LoaderService";
-import {LTPlayer} from "../LTPlayerType";
-
-/**
- * Preload video
- */
-export class LTPlayerPosterPreload {
-    config: LTPlayerConfig;
-    iconService: IconsService;
-    templateService: TemplateService;
-    plyr: Plyr
-
-    /**
-     * Setup preload video with poster cover
-     * @param plyr
-     * @param templateService
-     * @param config
-     * @param iconService
-     */
-    initPreload(plyr: Plyr, templateService: TemplateService, config: LTPlayerConfig, iconService: IconsService) {
-
-        this.plyr = plyr;
-        this.iconService = iconService;
-        this.templateService = templateService;
-        this.config = config;
-
-        const playerContainer = plyr.elements.container;
-        const imagePosterContainer = playerContainer.querySelector('.lt-player__poster__image-body');
-
-
-        if (imagePosterContainer) {
-
-            if (config.isAutoPreload()) {
-                this.plyr.on('play', () => {
-                    imagePosterContainer.classList.add('lt-player__poster__image-body--preload');
-                })
-            } else {
-                setTimeout(() => {
-                    imagePosterContainer.classList.add('lt-player__poster__image-body--preload');
-                }, 800)
-            }
-
-
-        }
-    }
-}

package/src/components/poster/LTPlayerPosterPreloadEvents.ts

@@ -1,152 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import {LoaderService} from "../../services/LoaderService";
-
-export class LTPlayerPosterPreloadEvents {
-    static preloadEvents = {
-        removePosterImage(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerElementContainer = instance.playerConfig.getPlayerElementContainer();
-            const playerOnloadPosterSelector = playerElementContainer.parentElement.querySelector('.plyr__poster');
-            if (playerOnloadPosterSelector) {
-                playerOnloadPosterSelector.classList.add('lt-player__preload-hide');
-            }
-        },
-
-        embedPlay(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-            let playerContainer = instance.plyr.elements.container;
-            playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
-            const preloadData = instance.playerConfig.getPreload();
-            const playAutoPreload = () => {
-                console.log('preload play')
-                if (preloadData.start !== 0) {
-                    instance.plyr.embed.setCurrentTime(preloadData.start).then(() => {
-                        instance.plyr.embed.setMuted(true).then(function () {
-                            instance.plyr.embed.play().then(function () {
-                                instance.plyr.volume = 0;
-                                LoaderService.removeSpinner(playerContainer)
-                            });
-                        }).catch(function () {
-                            // an error occurred
-                        });
-                    });
-                    LoaderService.removeSpinner(playerContainer)
-                } else {
-                    instance.plyr.volume = 0;
-                    if (instance.plyr.embed) {
-                        instance.plyr.embed.play().then(function () {
-                            LoaderService.removeSpinner(playerContainer)
-                        });
-                    } else {
-                        instance.plyr.play()
-                        LoaderService.removeSpinner(playerContainer)
-                    }
-
-                }
-            }
-
-            const pausePreload = () => {
-                console.log('preload play')
-                if (preloadData.start !== 0) {
-                    instance.plyr.embed.setCurrentTime(preloadData.start).then( () => {
-                        instance.plyr.embed.pause().then(function() {
-                            instance.plyr.volume = 0;
-                            LoaderService.removeSpinner(playerContainer)
-                        });
-                    });
-                } else {
-                    if (instance.plyr.embed) {
-                        instance.plyr.embed.pause().then(function () {
-                            LoaderService.removeSpinner(playerContainer)
-                        });
-                    } else {
-                        instance.plyr.pause()
-                        LoaderService.removeSpinner(playerContainer)
-                    }
-                }
-                LoaderService.removeSpinner(playerContainer)
-            }
-
-            const playEvent = () => {
-                if (instance.playerConfig.isAutoPreload()) {
-                    playAutoPreload();
-                } else {
-                    pausePreload();
-                }
-            }
-
-            switch (type) {
-                case 'event':
-                    this.removePosterImage(instance);
-                    playEvent();
-                break
-                case 'action':
-                    playAutoPreload();
-                break
-            }
-        },
-
-        html5Play(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-
-            const play = () => {
-                instance.plyr.volume = 0;
-                const preloadData = instance.playerConfig.getPreload();
-
-                if (preloadData.start !== 0) {
-                    instance.plyr.currentTime = preloadData.start;
-                }
-
-                switch (type) {
-                    case 'event':
-                        this.removePosterImage(instance);
-                        if (instance.playerConfig.isAutoPreload()) {
-                            instance.plyr.play();
-                        } else {
-                            instance.plyr.pause();
-                        }
-                        break
-                    case 'action':
-                        instance.plyr.play();
-                        break
-                }
-            }
-
-
-            let checkPlayer = false;
-
-            instance.plyr.on('loadeddata', () => {
-                checkPlayer = true;
-                play();
-            })
-
-            if (!checkPlayer) {
-                play();
-            }
-
-        },
-
-        stop(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-            const playEvent = () => {
-                const preloadData = instance.playerConfig.getPreload();
-                if (instance.plyr.currentTime >= preloadData.stop) {
-                    if (instance.plyr.isEmbed) {
-                        this.embedPlay(instance, 'action');
-                    } else {
-                        this.html5Play(instance, 'action');
-                    }
-
-                }
-            }
-
-            const stop = () => {
-                instance.plyr.pause();
-            }
-
-            switch (type) {
-                case 'event':
-                    playEvent();
-                break
-                case 'action' :
-                   stop();
-            }
-        }
-    }
-}

package/src/components/share/LTPlayerShareDesktop.ts

@@ -1,131 +0,0 @@
-import {LTPlayerShareManager} from "./LTPlayerShareManager";
-
-export class LTPlayerShareDesktop {
-    manager : LTPlayerShareManager
-    isPlaying : boolean
-    switchButtonSet: boolean
-    constructor(instance : LTPlayerShareManager) {
-        this.manager = instance;
-        this.setTemplate();
-    }
-    setTemplate() {
-      const playerContainer = this.manager.instance.plyr.elements.wrapper;
-      playerContainer.insertAdjacentHTML("afterend", this.manager.templateService.getShare(this.manager.playerConfig.getShareData()));
-    }
-
-    activeModal() {
-        const selectors = this.getSelector();
-        const instance = this.manager.instance;
-
-        selectors.shareContainer.classList.remove('share-inactive');
-        selectors.shareContainer.classList.add('share-active');
-        (window as any).a2a.init_all();
-        if (!instance.playerConfig.getShareData().canonicalUrl) {
-            if (!instance.playerConfig.getShareData().embedUrl) {
-                selectors.shareContainer.querySelector('.share-controller-top').classList.add('d-none')
-            } else {
-                this.setCopyContent(true);
-            }
-        } else {
-            this.setCopyContent(false);
-        }
-
-        this.setCopyButtonsEvents();
-
-        if (!this.switchButtonSet) {
-            this.setSwitchButton();
-            this.switchButtonSet = true;
-        }
-
-        if (instance.plyr.playing) {
-            this.isPlaying = true;
-            instance.plyr.pause();
-        } else {
-            this.isPlaying = false;
-        }
-    }
-
-
-    setSwitchButton() {
-        const selectors = this.getSelector();
-        const instance = this.manager.instance;
-
-        if (!instance.playerConfig.getShareData().embedUrl || !instance.playerConfig.getShareData().canonicalUrl) {
-            selectors.switchButton.classList.add('d-none');
-            return;
-        }
-
-        const switchEvent = () => {
-
-            if (selectors.urlInput.classList.contains('canonicalUrl')) {
-                selectors.urlInput.classList.remove('canonicalUrl');
-                selectors.urlInput.classList.add('embedUrl');
-                this.setCopyContent(true);
-            } else {
-                selectors.urlInput.classList.add('canonicalUrl');
-                selectors.urlInput.classList.remove('embedUrl');
-                this.setCopyContent(false);
-            }
-        }
-
-        selectors.switchButton.addEventListener('click', () => {
-            switchEvent();
-        })
-    }
-
-    setCopyContent(embed : boolean) {
-        const selectors = this.getSelector();
-        const instance = this.manager.instance;
-
-        if (!embed) {
-            selectors.urlInput.classList.add('canonicalUrl');
-            selectors.urlInput.innerHTML = `${instance.playerConfig.getShareData().canonicalUrl}`;
-            (selectors.urlInput as HTMLElement).dataset.copy = instance.playerConfig.getShareData().canonicalUrl;
-            selectors.urlInput.addEventListener('click', () => {
-                window.open(instance.playerConfig.getShareData().canonicalUrl)
-            })
-            return
-        }
-        selectors.urlInput.classList.add('embedUrl');
-        const iframe = `<iframe width="560" height="315" src="${instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
-        (selectors.urlInput as HTMLElement).innerText = iframe;
-        (selectors.urlInput as HTMLElement).dataset.copy = iframe;
-    }
-
-    inactiveModal() {
-        const selectors = this.getSelector();
-        const instance = this.manager.instance;
-
-        selectors.shareContainer.classList.add('share-inactive');
-        selectors.shareContainer.classList.remove('share-active');
-        if (this.isPlaying) {
-            instance.plyr.play();
-        }
-    }
-
-    getSelector() {
-        return {
-            buttons : [
-                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
-                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
-            ],
-            urlInput : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.share-controller-url'),
-            shareContainer : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper'),
-            copyButtons : this.manager.instance.plyr.elements.container.querySelectorAll('.share-controller-link'),
-            switchButton : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.button_embed')
-        };
-    }
-
-    setCopyButtonsEvents() {
-        const selectors = this.getSelector();
-
-        if (selectors.copyButtons.length > 0) {
-            selectors.copyButtons.forEach((button: HTMLElement) => {
-                button.addEventListener('click', function LTPlayerShareCopy() {
-                    navigator.clipboard.writeText((selectors.urlInput as HTMLElement).dataset.copy);
-                })
-
-            })
-        }
-    }
-}

package/src/components/share/LTPlayerShareEvents.ts

@@ -1,64 +0,0 @@
-import {LTPlayerShareManager} from "./LTPlayerShareManager";
-
-export namespace LTPlayerShareEvents {
-
-    export class mobile {
-
-        manager : LTPlayerShareManager
-
-        constructor(manager: LTPlayerShareManager) {
-            this.manager = manager;
-        }
-
-        init() {
-            const buttons = [
-                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
-                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
-            ];
-
-            const instance = this;
-
-            buttons.forEach(button => {
-                if (button) {
-                    let mobileEvent: HammerManager = this.manager.instance.eventInstance.mobileEvents.setMobileEvent(button);
-                    if (mobileEvent) {
-                        mobileEvent.on('singletap', function LTPlayerMobileShareButtons(event) {
-                            event.preventDefault();
-                            instance.manager.mobile.activeModal();
-                        })
-                    }
-                }
-            })
-        }
-    }
-
-    export class desktop {
-        manager : LTPlayerShareManager
-        constructor(manager: LTPlayerShareManager) {
-            this.manager = manager;
-        }
-
-        init() {
-            const manager = this.manager;
-            manager.desktop.getSelector().buttons.forEach(button => {
-                if (button) {
-                    button.addEventListener('click', () => {
-                        manager.desktop.activeModal();
-                    })
-                }
-            })
-
-            if (manager.desktop.getSelector().shareContainer) {
-                manager.desktop.getSelector().shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
-                    event.preventDefault();
-                    if ( manager.desktop.getSelector().shareContainer.classList.contains('share-active')) {
-                        let target = event.target as HTMLElement;
-                        if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                            manager.desktop.inactiveModal();
-                        }
-                    }
-                })
-            }
-        }
-    }
-}

package/src/components/share/LTPlayerShareManager.ts

@@ -1,58 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerConfig} from "../config/LTPlayerConfig";
-import {IconsService} from "../../services/IconsService";
-import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerShareEvents} from "./LTPlayerShareEvents";
-import {shareType} from "../../global/types/ModuleTypes";
-import {LTPlayerShareDesktop} from "./LTPlayerShareDesktop";
-import {LTPlayerShareMobile} from "./LTPlayerShareMobile";
-
-export class LTPlayerShareManager {
-    instance: LTPlayer.LandscapeType | LTPlayer.PortraitType
-    playerConfig: LTPlayerConfig
-    iconService: IconsService
-    templateService: TemplateService
-    events: shareType = {
-        desktop : undefined,
-        mobile : undefined
-    }
-    desktop : LTPlayerShareDesktop
-    mobile: LTPlayerShareMobile
-
-    init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        this.instance = instance;
-        this.playerConfig = instance.playerConfig;
-        this.templateService = instance.templateService;
-        this.iconService = instance.iconService;
-        this.appendScriptTag();
-        this.setByDevice();
-    }
-
-    setByDevice() {
-        switch (this.playerConfig.getDevice()) {
-            case "desktop":
-               this.desktop = new LTPlayerShareDesktop(this);
-               this.events.desktop = new LTPlayerShareEvents.desktop(this);
-                break
-            case "mobile":
-                this.mobile = new LTPlayerShareMobile(this);
-                this.events.mobile = new LTPlayerShareEvents.mobile(this)
-        }
-    }
-
-    appendScriptTag() {
-        const script = document.createElement("script");
-        script.classList.add('lt-player-add-to-any')
-        script.type = "text/javascript";
-        script.src = "https://static.addtoany.com/menu/page.js";
-        script.async;
-        document.body.appendChild(script);
-    }
-
-    removeScriptTag() {
-        const script = document.querySelector('.lt-player-add-to-any');
-        if(script) {
-            script.remove();
-        }
-    }
-}