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

package/src/components/events/LTPlayerDesktop.ts

@@ -1,222 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerSettingsControlsManager} from "../controls/LTPlayerSettingsControlsManager";
-import Plyr from "plyr";
-import {plyr} from "../../global/types/ModuleTypes";
-import {LTPlayerEventsManager} from "../LTPlayerEventsManager";
-import {LTPlayerCommon} from "./LTPlayerCommon";
-import {EventsInterfaces} from "../../global/interfaces/EventsInterfaces";
-import {LoaderService} from "../../services/LoaderService";
-
-export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces {
-    setup(eventManager: LTPlayerEventsManager) {
-        this.player = eventManager.player;
-        this.plyr = eventManager.plyr;
-
-        //init common events
-        this.removeDesktopPlyrEvents();
-
-        //init desktop events
-        this.plyrOnReady();
-        this.plyrEmbedOnReady();
-        this.plyrEndVideo();
-        this.plyrFullScreen();
-        this.plyrTimeUpdate();
-        this.plyrOnPlay();
-        this.plyrOnPause();
-        this.plyrOnSeek();
-        this.plyrOnCueChange();
-
-        this.setupCommon()
-    }
-
-    plyrOnSeek():void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('seeked', function LTPlayerSeek(){
-            if (plyr.stopped === true) {
-                eventManager.endVideo()
-            }
-
-            if (plyr.isEmbed) {
-                if (plyr.paused) {
-                    return;
-                }
-                let playerContainer = instance.plyr.elements.container;
-                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
-            }
-        })
-    }
-
-    plyrOnReady(): void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('ready', function LTPLayerDeskTopReady() {
-            // set player id
-            if (!instance.playerConfig.getPlayerId()) {
-                instance.playerConfig.setPlayerId((instance.plyr as plyr).id);
-                instance.playerId = instance.playerConfig.getPlayerId();
-            }
-
-
-            eventManager.setDefaultSettingsConfig();
-
-            if (instance.plyr.isHTML5) {
-
-                if (instance.hls) {
-                    instance.hls.init();
-                }
-                eventManager.onReadyPlayer();
-                eventManager.modal(instance);
-                instance.posterManager.desktopEvents.posterBody(instance);
-
-                if (instance.playerConfig.getPreload()) {
-                    eventManager.preloadPoster.ready(instance);
-                }
-            }
-
-            //set show/hide controls
-            instance.playerControl.desktopEvents.showHide(instance)
-
-            //set fullscreen button
-            instance.playerControl.desktopEvents.fullScreenButtons(instance);
-
-            //set play/pause icon
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'ready');
-
-            //set rewind/forward
-            instance.playerControl.desktopEvents.backwardForward(instance);
-
-            instance.playerControl.desktopEvents.backwardForwardSeconds(instance);
-
-            //set volume controller
-            instance.playerControl.desktopEvents.volume(instance);
-
-            //set settings controller
-            instance.playerControl.settingsControlsManager.init(instance);
-
-            //set chapters buttons
-            if (instance.playerControl.chaptersService) {
-                instance.playerControl.chaptersService.setButtonsEvents(instance);
-            }
-        })
-    }
-
-    modal(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        window.addEventListener('click', function LTPLayerWindowClick(event: MouseEvent) {
-
-            if (instance.additionalInfoService) {
-                instance.additionalInfoService.desktopEvents.windowDesktopEvents(event, instance);
-            }
-            LTPlayerSettingsControlsManager.closeSettingsEvent(event);
-        })
-    }
-    plyrEmbedOnReady(): void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        if (plyr.isEmbed) {
-            plyr.on('ready', function LTPLayerDesktopReadyEmbed() {
-                plyr.embed.ready().then (function LTPlayerEmbedReady() {
-                    eventManager.modal(instance);
-                    eventManager.onReadyPlayer();
-                    instance.posterManager.desktopEvents.posterBody(instance);
-                    if (instance.playerConfig.getPreload()) {
-                        eventManager.preloadPoster.ready(instance);
-                    }
-                })
-            })
-        }
-    }
-
-    plyrEndVideo() {
-        let eventManager = this;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('ended', function LTPlayerDesktopEndVideo() {
-            eventManager.endVideo();
-        })
-    }
-
-    plyrFullScreen() {
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
-            //remove mini player on fullscreen
-
-            instance.statusFeedbackService.setFullscreen()
-            instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
-
-            //fullscreen icon
-            instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
-
-            instance.videoService.removeObjectFit();
-
-        });
-
-        plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
-            //add mini player on exit fullscreen
-
-            instance.statusFeedbackService.clearFullscreen()
-            instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
-
-            //fullscreen icon
-            instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
-
-            instance.videoService.appendObjectFit();
-        })
-    }
-
-
-    plyrTimeUpdate(): void {
-        let common = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('timeupdate', function LTPlayerDesktopTimeUpdate(event) {
-            common.timeUpdate(event);
-            if (instance.playerConfig.getPreload().isActive) {
-                common.preloadPoster.timeUpdate(instance, 'event');
-            }
-            LoaderService.removeSpinner(plyr.elements.container)
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-        })
-    }
-
-    plyrOnPlay() {
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-        plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
-            instance.statusFeedbackService.setLoading()
-            LoaderService.removeSpinner(plyr.elements.container)
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-        })
-    }
-
-    plyrOnPause() {
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('pause', function LTPlayerDesktopTimeUpdate(event) {
-            LoaderService.removeSpinner(plyr.elements.container)
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-        })
-    }
-
-    plyrOnCueChange() {
-        let common = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
-            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
-                common.setCustomSubtitles(plyr.elements.controls, event)
-            }
-        })
-    }
-}

package/src/components/events/LTPlayerMobile.ts

@@ -1,243 +0,0 @@
-import {LTPlayerEventsManager} from "../LTPlayerEventsManager";
-import {LTPlayerCommon} from "./LTPlayerCommon";
-import {EventsInterfaces} from "../../global/interfaces/EventsInterfaces";
-import {LTPlayer} from "../LTPlayerType";
-import Plyr from "plyr";
-import {plyr} from "../../global/types/ModuleTypes";
-import {LoaderService} from "../../services/LoaderService";
-
-export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
-
-    setup(eventManager: LTPlayerEventsManager) {
-        this.player = eventManager.player;
-        this.plyr = eventManager.plyr;
-
-        //init common events
-        this.removeMobilePlyrEvents();
-
-        //init mobile events
-        this.plyrOnReady();
-        this.plyrEmbedOnReady();
-        this.plyrEndVideo();
-        this.plyrFullScreen();
-        this.plyrTimeUpdate();
-        this.plyrOnPlay();
-        this.plyrOnPause();
-        this.plyrOnSeek();
-        this.plyrOnCueChange()
-
-        this.setupCommon()
-    }
-
-    plyrOnSeek():void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('seeked', function LTPlayerSeek(){
-            if (plyr.stopped === true) {
-                eventManager.endVideo()
-            }
-
-            if (plyr.isEmbed) {
-                if (plyr.paused) {
-                    return;
-                }
-                let playerContainer = instance.plyr.elements.container;
-                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
-            }
-        })
-    }
-    plyrOnReady(): void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('ready', function LTPLayerMobileReady() {
-
-            if (!instance.playerConfig.getPlayerId()) {
-                instance.playerConfig.setPlayerId((instance.plyr as plyr).id);
-                instance.playerId = instance.playerConfig.getPlayerId();
-            }
-
-            eventManager.setDefaultSettingsConfig();
-
-            if (instance.plyr.isHTML5) {
-
-                if (instance.hls) {
-                    instance.hls.init();
-                }
-
-                eventManager.onReadyPlayer();
-                instance.posterManager.mobileEvents.posterBody(instance);
-
-                instance.playerControl.mobileEvents.seekBar(instance);
-
-                if (instance.playerConfig.getPreload()) {
-                    eventManager.preloadPoster.ready(instance);
-                }
-            }
-
-            instance.posterManager.mobileEvents.showControls(instance);
-
-            instance.playerControl.mobileEvents.controlsTimeShow(instance);
-
-            instance.playerControl.mobileEvents.fullScreenButtons(instance);
-
-            //set play/pause icon
-            instance.playerControl.mobileEvents.playPauseIcon(instance, 'ready');
-
-            //set rewind/forward
-            instance.playerControl.mobileEvents.backwardForward(instance);
-            instance.playerControl.mobileEvents.backwardForwardSeconds(instance);
-
-            //remove volume controller
-            instance.playerControl.mobileEvents.volume(instance);
-
-            //set settings controller
-            instance.playerControl.settingsControlsManager.init(instance);
-
-            //set chapters buttons
-            if (instance.playerControl.chaptersService) {
-                instance.playerControl.chaptersService.setMobileButtonEvents(instance);
-            }
-        })
-    }
-
-    plyrEmbedOnReady(): void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        if (plyr.isEmbed) {
-            plyr.on('ready', function LTPLayerMobileReadyEmbed(): void {
-                plyr.embed.ready().then(function LTPlayerEmbedReady():void {
-                    eventManager.onReadyPlayer();
-                    instance.playerControl.mobileEvents.seekBar(instance);
-                    instance.posterManager.mobileEvents.posterBody(instance);
-                    if (instance.playerConfig.getPreload()) {
-                        eventManager.preloadPoster.ready(instance);
-                    }
-                })
-            });
-        }
-    }
-
-    plyrEndVideo() {
-        let eventManager = this;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('ended', function LTPlayerMobileEndVideo() {
-            eventManager.endVideo();
-        })
-    }
-
-    plyrFullScreen(): void {
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
-            instance.statusFeedbackService.setFullscreen()
-            instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
-            //fullscreen icon
-            instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
-
-            instance.videoService.removeObjectFit();
-        });
-
-        plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
-            instance.statusFeedbackService.clearFullscreen()
-            instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
-            //fullscreen icon
-            instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
-            instance.videoService.appendObjectFit();
-        })
-    }
-
-    plyrTimeUpdate(): void {
-        let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('timeupdate', function LTPlayerMobileTimeUpdate(event) {
-
-            if (instance.playerConfig.getPreload().isActive) {
-                eventManager.preloadPoster.timeUpdate(instance, 'event');
-            }
-            LoaderService.removeSpinner(plyr.elements.container)
-
-            eventManager.timeUpdate(event);
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-            instance.playerControl.mobileEvents.removePlyrControlsClass(instance);
-        })
-    }
-
-    plyrOnPlay() {
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
-            instance.statusFeedbackService.setLoading()
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-        })
-    }
-
-    plyrOnPause() {
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('pause', function LTPlayerDesktopTimeUpdate(event) {
-            LoaderService.removeSpinner(plyr.elements.container)
-            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
-        })
-    }
-
-    setMobileEvent = (selector: Element): undefined | HammerManager => {
-        let instance = this;
-
-        //check if getDevice is mobile or desktop
-        if (instance.player.playerConfig.getDevice() === 'mobile') {
-            const manager = new Hammer.Manager(selector);
-            manager.add(new Hammer.Pan({
-                direction : 30
-            }))
-
-            manager.add(new Hammer.Tap({
-                event : 'tripletap',
-                taps : 3
-            }));
-
-            manager.add(new Hammer.Tap({
-                event : 'doubletap',
-                taps : 2
-            }));
-
-            manager.add( new Hammer.Tap({
-                event : 'singletap'
-            }));
-
-            manager.get('doubletap').recognizeWith('singletap');
-            manager.get('singletap').requireFailure('doubletap');
-            manager.get('tripletap').recognizeWith('doubletap');
-            manager.get('doubletap').requireFailure('tripletap');
-            manager.get('pan').set({direction: Hammer.DIRECTION_DOWN});
-
-            return manager;
-        }
-
-        return undefined;
-    }
-
-    plyrOnCueChange() {
-        let common = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
-        let plyr: Plyr = this.plyr;
-
-        plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
-            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
-                common.setCustomSubtitles(plyr.elements.controls, event)
-            }
-        })
-    }
-
-}

package/src/components/poster/LTPlayerPoster.ts

@@ -1,78 +0,0 @@
-import {TemplateService} from "../../services/TemplateService";
-import {LTPlayerConfig} from "../config/LTPlayerConfig";
-import {IconsService} from "../../services/IconsService";
-import Plyr from "plyr";
-import {Helper} from "../../services/Helper";
-
-export class LTPlayerPoster {
-    custom_selector: string = 'lt-player__poster';
-    config: LTPlayerConfig;
-    iconService: IconsService;
-    templateService: TemplateService;
-    plyr: Plyr
-    constructor(player: Plyr, templateService: TemplateService, config: LTPlayerConfig, iconService: IconsService) {
-        this.plyr = player;
-        this.iconService = iconService;
-        this.templateService = templateService;
-        this.config = config;
-    }
-
-    setTemplate() {
-
-        Object.assign(this.config, this.iconService.getIconsByComponent('poster'));
-
-        const logo: string = this.iconService.getLogo();
-
-        const playerTypeString = Helper.getPlayerStringType(this.config.getPlayerType());
-
-        let templateData = {[playerTypeString]: true, config:this.config, logoBig: logo, isShare : !!(this.config.isShareData())}
-
-        const posterTemplate = this.templateService.getPoster(templateData);
-
-        const container = this.plyr.elements.wrapper;
-
-        container.insertAdjacentHTML("afterend", posterTemplate);
-    }
-
-
-    setImage() {
-        const customImageSelector = this.plyr.elements.container.querySelector('.lt-player__poster__img--set-custom');
-        const defaultImageSelector = this.plyr.elements.container.querySelector('.lt-player__poster__img__set-default');
-
-        const checkImage = (imageUrl: string, callback: (arg0: boolean) => void) => {
-            let img = new Image();
-
-            img.onerror = function() {
-                callback(false);
-            };
-
-            img.onload = function() {
-                callback(true);
-            };
-
-            img.src = imageUrl;
-        }
-
-
-        const setDefault = () => {
-            if (defaultImageSelector) {
-                defaultImageSelector.classList.remove('d-none');
-            }
-        }
-
-
-        if (this.config.getPosterImage()) {
-            if (customImageSelector) {
-                checkImage(this.config.getPosterImage(), function (exist) {
-                    if (!exist) {
-                        setDefault();
-                    } else {
-                        customImageSelector.classList.remove('d-none');
-                    }
-                })
-            }
-        } else {
-           setDefault()
-        }
-    }
-}