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

package/src/components/LTPlayerStatusFeedback.ts

@@ -1,76 +0,0 @@
-import {LTPlayerController} from "../global/controllers/LTPlayerController";
-
-export class LTPlayerStatusFeedback {
-
-    player: LTPlayerController
-    element: HTMLElement
-
-    constructor(player: LTPlayerController) {
-        this.player = player;
-    }
-
-    private getElement(): HTMLElement {
-        if (!this.element) {
-            if (this.player.playerConfig) {
-                this.element = this.player.playerConfig.getPlayerElementContainer()
-            } else {
-                console.error("Failed to get element from playerConfig")
-            }
-        }
-        return this.element
-    }
-
-    private addClass(name: string) {
-        const element = this.getElement()
-        if (element && !element.classList.contains(name)) {
-            element.classList.add(name)
-        }
-    }
-
-    private removeClass(name: string) {
-        const element = this.getElement()
-        if (element && element.classList.contains(name)) {
-            element.classList.remove(name)
-        }
-    }
-
-    setLoading() {
-        this.addClass("lt-state-loader-active")
-    }
-
-    setLoadingSeek() {
-        this.addClass("lt-state-seeking")
-        this.setLoading()
-    }
-
-    clearLoading() {
-        this.removeClass("lt-state-loader-active")
-        this.removeClass("lt-state-seeking")
-    }
-
-    setFullscreen() {
-        this.addClass("lt-state-fullscreen")
-    }
-
-    clearFullscreen() {
-        this.removeClass("lt-state-fullscreen")
-    }
-
-    setControlsVisible() {
-        this.addClass("lt-state-controls-visible")
-    }
-
-    clearControlsVisible() {
-        this.removeClass("lt-state-controls-visible")
-    }
-
-    setCaptionsEnabled() {
-        this.addClass("lt-state-captions-enabled")
-    }
-
-    clearCaptionsEnabled() {
-        this.removeClass("lt-state-captions-enabled")
-    }
-
-}
-

package/src/components/LTPlayerStorage.ts

@@ -1,58 +0,0 @@
-export class LTPlayerStorage {
-
-    constructor() {
-        if (!localStorage.getItem('lt-player')) {
-            this.createStorage();
-        }
-    }
-
-    createStorage() {
-        const defaultSettings = {
-            speed: 1,
-            volume: 1,
-            muted: false
-        };
-        localStorage.setItem('lt-player', JSON.stringify(defaultSettings));
-    }
-
-    setSettings(settings: object) {
-        localStorage.setItem('lt-player', JSON.stringify(settings));
-    }
-
-    getSettings() {
-        return JSON.parse(localStorage.getItem('lt-player'));
-    }
-
-    getSpeed() {
-        const settings = JSON.parse(localStorage.getItem('lt-player'));
-        return settings ? settings.speed : 1;
-    }
-
-    setSpeed(speed: number) {
-        const settings = JSON.parse(localStorage.getItem('lt-player')) || {};
-        settings.speed = speed;
-        localStorage.setItem('lt-player', JSON.stringify(settings));
-    }
-
-    getVolume() {
-        const settings = JSON.parse(localStorage.getItem('lt-player'));
-        return settings ? settings.volume : 1;
-    }
-
-    setVolume(volume: number) {
-        const settings = JSON.parse(localStorage.getItem('lt-player')) || {};
-        settings.volume = volume;
-        localStorage.setItem('lt-player', JSON.stringify(settings));
-    }
-
-    getMutedState() {
-        const settings = JSON.parse(localStorage.getItem('lt-player'));
-        return settings ? settings.muted : false;
-    }
-
-    setMutedState(state: boolean) {
-        const settings = JSON.parse(localStorage.getItem('lt-player')) || {};
-        settings.muted = state;
-        localStorage.setItem('lt-player', JSON.stringify(settings));
-    }
-}

package/src/components/LTPlayerType.ts

@@ -1,371 +0,0 @@
-import {LTPlayerController} from "../global/controllers/LTPlayerController";
-import {TypeInterface} from "../global/interfaces/TypeInterface";
-import {defaultType, playerConfigType, plyr} from "../global/types/ModuleTypes";
-import {LTPlayerMini} from "./controls/LTPlayerMini";
-import {LTPlayerConfig} from "./config/LTPlayerConfig";
-import Plyr from "plyr";
-import {LTPlayerDevMethode} from "./LTPlayerDevMethode";
-import {LTPlayerEventsManager} from "./LTPlayerEventsManager";
-import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
-import {LTPlayerEvents} from "./events/LTPlayer";
-import {Helper} from "../services/Helper";
-import {LTPlayerHls} from "./LTPlayerHls";
-import {LTPlayerUpdate} from "./LTPlayerUpdate";
-
-export namespace LTPlayer {
-
-    /**
-     * Setup Portrait Type Player
-     */
-    export class PortraitType extends LTPlayerController implements TypeInterface {
-
-        pausedPlayer: Plyr;
-        updateManager: LTPlayerUpdate;
-
-        /**
-         * Create a new Player instance root element
-         * @returns never
-         * @param configData
-         * @param additionalInfoService
-         */
-        setup(configData: playerConfigType, additionalInfoService: LTPLayerAddInfo.Controller | null ): boolean {
-
-            if (!configData) {
-                return false;
-            }
-            this.setMobileEvents();
-            this.setDesktopEvents();
-
-            if (process.env.DEBUG === "true") {
-                console.info(`Finish add events`);
-            }
-
-            this.additionalInfoService = additionalInfoService;
-            this.miniPlayer = new LTPlayerMini();
-            this.setPlayerConfig(configData.body, configData.version);
-            this.initPlayer();
-
-            if (this.additionalInfoService) {
-                this.additionalInfoService.init(this, this.playerConfig.getPlayerId(), this.iconService, this.templateService)
-            }
-
-            if (Helper.checkIsHls(this.playerConfig.getVideoUrl().videoUrl)){
-                this.hls = new LTPlayerHls(this, undefined);
-            }
-
-            this.setEvents();
-            this.updateManager = new LTPlayerUpdate(this);
-
-            return true;
-        }
-
-
-        setEvents() {
-            this.eventInstance = new LTPlayerEventsManager(this);
-        }
-        setDesktopEvents() {
-            this.desktopEvents = new LTPlayerEvents.Desktop();
-        }
-
-        setMobileEvents() {
-            this.mobileEvents = new LTPlayerEvents.Mobile();
-        }
-
-        /**
-         * Set Player config Instance
-         * @param configData
-         * @param version
-         * @private
-         */
-        private setPlayerConfig(configData: playerConfigType, version : string | number) {
-            this.playerConfig = new LTPlayerConfig(version);
-            this.playerConfig.mapConfigData(configData);
-        }
-
-        /**
-         * Inner player template in parent dom element
-         * @param config
-         * @private
-         */
-        private innerPlayerTemplate(config: LTPlayerConfig) {
-            const playerContainer: HTMLElement = this.playerConfig.getPlayerElementContainer();
-            playerContainer.innerHTML = this.templateService.getTemplateByType(config);
-        }
-
-        /**
-         * Get Controllers in HTML String Format
-         * @return string
-         * @private
-         */
-        private getPlayerControllers(): string {
-            return this.playerControl.getControls(this.playerConfig, this.iconService)
-        }
-
-        /**
-         * Start init player with config data
-         * @private
-         */
-        private initPlayer() {
-
-            this.innerPlayerTemplate(this.playerConfig);
-
-            this.playerConfig.getPlayerElementContainer().classList.add(`lt-player-portrate--${this.playerConfig.getDevice()}`);
-            this.playerConfig.getPlayerElementContainer().classList.add('lt-player-orientation--portrait');
-
-            let playerSettings = {};
-
-            const controls = this.getPlayerControllers();
-
-            Object.assign(playerSettings, {controls});
-
-            if (this.playerConfig.getVideoType() === 'embedded') {
-                Object.assign(playerSettings, this.playerConfig.getEmbedOrigin())
-            }
-
-            Object.assign(playerSettings, this.playerConfig.getDefaultConfigItems());
-
-            Object.assign(playerSettings, {ratio : '9:16'});
-
-            if (this.playerConfig.getFullscreenMode()) {
-                Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
-                this.playerConfig.getPlayerElementContainer().classList.add('fullscreen-disabled');
-            }
-
-            const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
-
-            this.plyr = new Plyr(element, playerSettings);
-
-            this.playerConfig.setObjectFit(this.plyr, 'portrait').then(() => {
-                this.videoService.init(this);
-            });
-
-            this.windowService.init(this);
-
-            this.posterManager.init(this);
-
-            const chapters = this.playerConfig.getChapters();
-
-            if (chapters) {
-                this.playerControl.initChapters(this.playerConfig.getChapters());
-            }
-
-            this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
-
-            if (this.playerConfig.getShareData()) {
-                this.share.init(this);
-            }
-
-            if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(this.plyr, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
-            }
-        }
-
-        play(isFirst?: boolean) {
-            this.devMethodePlayer.play(isFirst);
-        }
-
-        pause() {
-            this.devMethodePlayer.pause();
-        }
-
-        stop() {
-            this.devMethodePlayer.stop();
-        }
-
-        preload() {
-            return this.devMethodePreload;
-        }
-
-        enterMiniPlayer() {
-            return this.devMethodePlayer.enterMiniPlayer()
-        }
-        exitMiniPlayer() {
-            return this.devMethodePlayer.exitMiniPlayer()
-        }
-
-        destruct() {
-            let _this = this;
-
-            return new Promise((resolve) => {
-                _this.additionalInfoService.remove(this);
-
-                _this.additionalInfoService = null;
-
-                this.plyr.destroy(() => {
-                    _this = undefined;
-                    resolve(true);
-                })
-            })
-        }
-    }
-
-
-    export class LandscapeType extends LTPlayerController implements TypeInterface {
-
-        pausedPlayer: Plyr;
-
-        /**
-         * Create a new Video Player root element
-         * @returns never
-         * @param configData
-         * @param additionalInfoService
-         */
-        setup(configData: playerConfigType, additionalInfoService: LTPLayerAddInfo.Controller | null): boolean {
-
-            if (!configData) {
-                return false;
-            }
-
-            if (additionalInfoService) {
-                console.warn('Additional Info is not implemented for Landscape type!')
-            }
-
-            this.setDesktopEvents();
-            this.setMobileEvents();
-
-            if (process.env.DEBUG === "true") {
-                console.info(`Finish add events`);
-            }
-
-            this.miniPlayer = new LTPlayerMini();
-            this.setPlayerConfig(configData.body, configData.version);
-            this.initPlayer();
-
-
-            if (Helper.checkIsHls(this.playerConfig.getVideoUrl().videoUrl)){
-                this.hls = new LTPlayerHls(this, undefined);
-            }
-
-
-            this.setEvents();
-
-            if (this.playerConfig.getCaptionsEnabled() === true) {
-                this.statusFeedbackService.setCaptionsEnabled()
-            }
-
-            return true;
-        }
-
-        setEvents() {
-            this.eventInstance = new LTPlayerEventsManager(this);
-        }
-
-        private initPlayer() {
-
-            this.innerPlayerTemplate(this.playerConfig);
-
-            this.playerConfig.getPlayerElementContainer().classList.add(`lt-player-landscape--${this.playerConfig.getDevice()}`);
-            this.playerConfig.getPlayerElementContainer().classList.add('lt-player-orientation--landscape');
-
-            let playerSettings = {};
-
-            const controls = this.getPlayerControllers();
-
-            Object.assign(playerSettings, {controls});
-
-            if (this.playerConfig.getVideoType() === 'embedded') {
-                Object.assign(playerSettings, this.playerConfig.getEmbedOrigin())
-            }
-
-            Object.assign(playerSettings, this.playerConfig.getDefaultConfigItems());
-
-            Object.assign(playerSettings, {ratio : '16:9'});
-
-            if (this.playerConfig.getFullscreenMode()) {
-                Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
-            }
-
-            const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
-
-            this.plyr = new Plyr(element, playerSettings);
-
-            this.playerConfig.setObjectFit(this.plyr, 'landscape').then(() => {
-                this.videoService.init(this);
-            });
-
-            this.windowService.init(this);
-
-            this.posterManager.init(this);
-
-            const chapters = this.playerConfig.getChapters();
-
-            if (chapters) {
-                this.playerControl.initChapters(this.playerConfig.getChapters());
-            }
-
-            this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
-
-            if (this.playerConfig.getShareData()) {
-                this.share.init(this);
-            }
-
-            if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(this.plyr, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
-            }
-        }
-
-        private getPlayerControllers(): string {
-            return this.playerControl.getControls(this.playerConfig, this.iconService)
-        }
-
-        private innerPlayerTemplate(config: LTPlayerConfig) {
-            const playerContainer: HTMLElement = this.playerConfig.getPlayerElementContainer();
-            playerContainer.innerHTML = this.templateService.getTemplateByType(config);
-        }
-
-        private setPlayerConfig(configData: playerConfigType, version: string | number) {
-            this.playerConfig = new LTPlayerConfig(version);
-            this.playerConfig.mapConfigData(configData);
-        }
-
-        public getPlayer() {
-            return this.plyr;
-        }
-
-        play() {
-            this.devMethodePlayer.play();
-        }
-
-        pause() {
-            this.devMethodePlayer.pause();
-        }
-
-        stop() {
-            this.devMethodePlayer.stop();
-        }
-
-        preload() {
-            return this.devMethodePreload;
-        }
-
-        enterMiniPlayer() {
-            return this.devMethodePlayer.enterMiniPlayer()
-        }
-
-        exitMiniPlayer() {
-            return this.devMethodePlayer.exitMiniPlayer()
-        }
-
-        destruct() {
-            let _this = this;
-
-            return new Promise((resolve) => {
-                _this.additionalInfoService.remove(this);
-
-                _this.additionalInfoService = null;
-
-                this.plyr.destroy(() => {
-                    _this = undefined;
-                    resolve(true);
-                })
-            })
-        }
-        setDesktopEvents() {
-            this.desktopEvents = new LTPlayerEvents.Desktop();
-        }
-
-        setMobileEvents() {
-            this.mobileEvents = new LTPlayerEvents.Mobile();
-        }
-    }
-}

package/src/components/LTPlayerUpdate.ts

@@ -1,61 +0,0 @@
-import {LTPlayer} from "./LTPlayerType";
-import {defaultType} from "../global/types/ModuleTypes";
-import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
-import Hls from "hls.js";
-
-export class LTPlayerUpdate {
-
-    player: LTPlayer.PortraitType;
-
-    constructor(player: LTPlayer.PortraitType) {
-        this.player = player;
-    }
-
-    updatePlayer(config: defaultType) {
-        console.log(config)
-        this.updateVideo(config.body.videoUrl, config.body.posterImage);
-        this.updateTitle(config.body.videoParagraph);
-        this.updateAuthor(config.body.videoTitle);
-        this.updateSubtitles(config.body.defaultConfig?.captions.url ?? null);
-        this.updateChapters(config);
-        this.player.additionalInfoService.setConfig(config.body.additionalInfo);
-        return;
-    }
-
-    updateChapters(config: defaultType) {
-        this.player.playerControl.initChapters(config.body.chapters);
-    }
-
-    updateVideo(videoUrl: string, poster: string) {
-        const video = document.querySelector('video');
-        video.poster = poster;
-        this.player.playerConfig.setPosterImage(poster);
-        this.player.posterManager.poster.setImage();
-        const coverImage = document.querySelector('.lt-player__poster__img--set-custom') as HTMLImageElement;
-        coverImage.src = poster;
-
-        if (Hls.isSupported()) {
-            this.player.hls.hlsInstance.detachMedia();
-            this.player.hls.hlsInstance.loadSource(videoUrl);
-            this.player.hls.hlsInstance.attachMedia(video);
-        } else {
-            document.querySelector('video').src = videoUrl;
-        }
-    }
-
-    updateTitle(title: string) {
-        const titleHeader = document.querySelector('.poster-title');
-        titleHeader.textContent = '';
-        titleHeader.textContent = title;
-    }
-
-    updateAuthor(author: string) {
-        const authorParagraph = document.querySelector('.poster-paragraph__content');
-        authorParagraph.textContent = '';
-        authorParagraph.textContent = author;
-    }
-
-    updateSubtitles(src: string|null) {
-        this.player.captionsService.setCaptions(src)
-    }
-}

package/src/components/addInfo/LTPLayerAddInfoResizeManager.ts

@@ -1,15 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-
-export class LTPLayerAddInfoResizeManager {
-    device: string
-    playerInstance: LTPlayer.LandscapeType | LTPlayer.PortraitType
-
-    constructor(playerInstance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        this.playerInstance = playerInstance;
-        this.device = playerInstance.playerConfig.getDevice();
-    }
-
-    setContainer() {
-
-    }
-}