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

package/src/components/LTPlayerManager.ts

@@ -1,266 +0,0 @@
-import {playerConfigType, playerManger} from "../global/types/ModuleTypes";
-import {LTPlayer} from "./LTPlayerType"
-import {LTPlayerSetup} from "./LTPlayerSetup";
-export class LTPlayerManager {
-
-    /**
-     * All players instance
-     */
-     players: Array<LTPlayer.LandscapeType| LTPlayer.PortraitType> = [];
-
-
-    /**
-     * Create a new instance of the Player LTPlayerManager
-     *
-     */
-    constructor() {
-        this.initPageDomElements();
-    }
-
-    /**
-     * Init player by default names
-     */
-    initPageDomElements() {
-
-        let domElements: NodeListOf<HTMLElement>;
-
-        domElements = document.querySelectorAll(`.${process.env.DEFAULT_DOM_HTML_ELEMENTS}, #${process.env.DEFAULT_DOM_HTML_ELEMENTS}`);
-
-        if (domElements.length !== 0) {
-            domElements = document.querySelectorAll('[data-lt-player-config]');
-        }
-
-        if (domElements.length === 0) {
-            // console.error(`Lt Player: No Element or Node List Of Element, found in dom!`);
-            // console.error('Use one of below examples')
-            // console.table({
-            //     Example_1: '<div class="lt-player" data-lt-player-config="{config}"> </div>',
-            //     Example_2: '<div data-lt-player-config="{config}"> </div>'
-            // })
-            return;
-        }
-
-        domElements.forEach(element => {
-            this.initBySelector(element);
-        })
-
-        return;
-
-    }
-
-    /**
-     * Init player by identifier
-     * @param identifier
-     * @param playerConfig
-     */
-    initByClassOrID(identifier: string, playerConfig?: playerConfigType) {
-
-        if (typeof identifier !== 'string') {
-            console.error('Identifier has another type of');
-            return;
-        }
-
-        let defaultSelector: HTMLElement = document.querySelector(`.${identifier}, #${identifier}`);
-
-
-        if (!defaultSelector) {
-            if (process.env.DEBUG === "true") {
-                console.error(`No item with ${identifier} found`);
-            }
-            return;
-        }
-        return new Promise(resolve => {
-            this.initBySelector(defaultSelector, playerConfig).then(result => {
-                resolve(result);
-            })
-        })
-
-    }
-
-    /**
-     * Init player by HTMLElement selector
-     * @param selector
-     * @param playerConfig
-     */
-    initBySelector(selector: HTMLElement, playerConfig?: playerConfigType) {
-
-        let config: playerConfigType | string = selector.dataset.ltPlayerConfig;
-
-        if (!config) {
-            config = playerConfig;
-        }
-
-        if (config !== undefined) {
-            let configData: playerConfigType;
-
-            if (typeof config === "string") {
-                configData = JSON.parse(config);
-            } else {
-                configData = config;
-            }
-
-            Object.assign(configData.body, {playerContainer: selector})
-
-            return new Promise(resolve => {
-                this.initPlayer(configData).then( result => {
-                    resolve(result);
-                })
-            })
-        }
-
-        return new Promise((resolve, reject) => {
-            console.error(`Lt Player: No "data-lt-player-config" attribute is set on element!`);
-            console.log(selector)
-            console.error('Use one of below examples')
-            console.table({
-                Example_1: '<div class="lt-player" data-lt-player-config="{config}"> </div>',
-            })
-            reject()
-        })
-
-
-    }
-
-    /**
-     * Init Player Instance, parse config
-     * @param playerConfig
-     * @protected
-     */
-    public initPlayer(playerConfig?: playerConfigType): Promise<any> | null {
-
-        const setup = new LTPlayerSetup();
-
-            return new Promise((resolve, reject) => {
-                if (!setup.checkIfPlayerExists(playerConfig)) {
-                    reject('Duplicate player');
-                    return;
-                }
-                let setupPLayer = setup.init(playerConfig);
-
-                if (setupPLayer) {
-                    setupPLayer.then( result => {
-                        this.players.push(result);
-                        resolve(result);
-                    })
-                } else {
-                    reject('Player is not setup')
-                }
-
-            })
-    }
-
-    /**
-     * Get player instance
-     * @return null | LTPlayer.LandscapeType | LTPlayer.PortraitType
-     * @param player
-     */
-    getPlayer(player: string | Element | HTMLElement | number): null | LTPlayer.LandscapeType | LTPlayer.PortraitType {
-
-        if (this.players.length === 0) {
-            return null;
-        }
-
-        const getPlayerByID = (id: any) : null | LTPlayer.LandscapeType | LTPlayer.PortraitType => {
-
-            let response = null;
-
-            this.players.forEach(instance => {
-                if (instance.playerConfig.getConfigData().playerId === id) {
-                    response = instance;
-                }
-            })
-
-            return response;
-        }
-
-        const getPlayerByElement = (player : Element | HTMLElement) : null | LTPlayer.LandscapeType | LTPlayer.PortraitType => {
-
-            let response = null;
-
-            const playerInstance = (player as playerManger).playerManager;
-
-
-            this.players.forEach(instance => {
-                if (instance === playerInstance) {
-                    response = instance;
-                }
-            })
-
-            return response;
-        }
-
-        if (typeof player === 'string') {
-            return getPlayerByID(parseInt(player));
-        }
-
-        if (typeof player === 'number') {
-            return getPlayerByID(player)
-        }
-
-        if (player instanceof Element) {
-            return getPlayerByElement(player);
-        }
-    }
-
-    getPlayerByExternalId(id: string | number): null | LTPlayer.LandscapeType | LTPlayer.PortraitType {
-        if (this.players.length === 0) {
-            return null;
-        }
-
-        let response = null;
-
-        this.players.forEach(instance => {
-            if (instance.playerConfig.getConfigData().externalId == id) {
-                response = instance;
-            }
-        })
-
-        return response;
-    }
-
-    /**
-     * Pause all players
-     */
-    pauseAllPlayers() {
-        this.players.forEach(instance => {
-            if(instance.plyr.playing) {
-                instance.plyr.pause();
-            }
-        })
-    }
-
-    /**
-     * Stop all players
-     */
-    stopAllPlayers() {
-        this.players.forEach(instance => {
-            if(instance.plyr.playing) {
-                instance.plyr.stop();
-            }
-        })
-    }
-
-    async destruct() {
-        const destructInstance = async (instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) => {
-          await instance.destruct();
-        }
-
-        const iterateInstances = async (array: Array<any>, callback:any): Promise<void> => {
-            for (let index = 0; index < array.length; index++) {
-                await callback(array[index]);
-            }
-        }
-
-        const initDestruct = async (): Promise<void> => {
-            await iterateInstances(this.players, async (callback: LTPlayer.PortraitType | LTPlayer.LandscapeType) => {
-                await destructInstance(callback);
-            })
-        }
-
-
-        return initDestruct().then(() => {
-            this.players = [];
-            console.clear();
-        });
-    }
-}

package/src/components/LTPlayerSettingsManager.ts

@@ -1,117 +0,0 @@
-import {LTPlayer} from "./LTPlayerType";
-import Plyr from "plyr";
-import {LTPlayerStorage} from "./LTPlayerStorage";
-import {settings} from "json-schema-library";
-
-export class LTPlayerSettingsManager {
-    instance: LTPlayer.PortraitType | LTPlayer.LandscapeType
-    player: Plyr
-    storage: LTPlayerStorage
-    constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-        this.player = instance.plyr;
-        this.instance = instance;
-        this.storage = new LTPlayerStorage();
-    }
-
-    applyGlobalSettings() {
-        const settings = this.storage.getSettings();
-        this.player.speed = settings.speed;
-        this.player.volume = settings.volume;
-        this.player.muted = settings.muted;
-        this.volumeIconsChange();
-        this.speedButtonChange(this.player.elements.container);
-    }
-
-    setGlobalSettings() {
-        const settings = {
-            speed: this.player.speed,
-            volume: this.player.volume,
-            muted: this.player.muted
-        }
-        console.log(settings.volume);
-        console.log(settings.muted);
-
-        this.storage.setSettings(settings);
-    }
-
-    speedButtonChange(container: HTMLElement) {
-        const storage = new LTPlayerStorage();
-        const speed = storage.getSpeed();
-        const displaySpeed = Math.floor(speed * 10) / 10;
-        const speedSpan = container.querySelector('.plyr__control.plyr__controls_speed-button > span');
-        if(speedSpan) {
-            speedSpan.innerHTML = displaySpeed + "X";
-            speedSpan.className = '';
-            speedSpan.classList.add('playback-speed--' + speed + 'X');
-        }
-    }
-
-    volumeIconsChange() {
-        if (this.instance.playerConfig.getDevice() === 'desktop') {
-            this.volumeItemsDesktop();
-        } else {
-            this.volumeIconsMobile();
-        }
-    }
-
-    volumeIconsMobile() {
-        if (this.storage.getMutedState() === false) {
-            this.player.volume = 1;
-            this.storage.setVolume(1);
-        }
-        const playerControlsContainer = this.player.elements.controls;
-        const volume: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-
-        if (volume) {
-            const volumeUnmute = volume.querySelector('.volume-max');
-            const volumeMute = volume.querySelector('.volume-mute');
-
-            if (this.player.muted) {
-                volumeUnmute.classList.remove('d-none');
-                volumeMute.classList.remove('d-none');
-                volumeUnmute.classList.add('d-none');
-            } else {
-                volumeUnmute.classList.remove('d-none');
-                volumeMute.classList.remove('d-none');
-                volumeMute.classList.add('d-none');
-            }
-        }
-    }
-
-    volumeItemsDesktop() {
-        const range = this.storage.getVolume().toString()
-        const playerControlsContainer = this.player.elements.controls;
-        const volumeMax: HTMLElement = playerControlsContainer.querySelector('.volume-max');
-        const volume75: HTMLElement = playerControlsContainer.querySelector('.volume-75');
-        const volume50: HTMLElement = playerControlsContainer.querySelector('.volume-50');
-        const volumeMute: HTMLElement = playerControlsContainer.querySelector('.volume-mute');
-        const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-        const volumeIconsManager = (item: HTMLElement) => {
-
-            const rangeVolumesItems: NodeListOf<HTMLElement> = volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
-
-            rangeVolumesItems.forEach(function (value) {
-                if (item.dataset.rangeValue === value.dataset.rangeValue) {
-                    value.classList.remove('d-none');
-                } else {
-                    value.classList.add('d-none')
-                }
-            })
-        }
-
-
-        const volumeThresholds = [
-            { threshold: 1, element: volumeMax },
-            { threshold: 0.65, element: volume75 },
-            { threshold: 0.35, element: volume50 },
-            { threshold: 0, element: volumeMute }
-        ];
-
-        for (let i = 0; i < volumeThresholds.length; i++) {
-            if (range >= volumeThresholds[i].threshold) {
-                volumeIconsManager(volumeThresholds[i].element);
-                break;
-            }
-        }
-    }
-}

package/src/components/LTPlayerSetup.ts

@@ -1,286 +0,0 @@
-import {LTPlayer} from "./LTPlayerType";
-import {defaultType, playerConfigType, PlayerType, urlVideoType} from "../global/types/ModuleTypes";
-import {Helper} from "../services/Helper";
-import {ValidatorService} from "../services/ValidatorService";
-import * as playerSchema from "../json-schema/player-config.json";
-import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
-import Plyr from "plyr";
-import {LTPlayerDevMethode} from "./LTPlayerDevMethode";
-import Player = LTPlayerDevMethode.Player;
-
-export class LTPlayerSetup {
-
-    additionalInfoService: LTPLayerAddInfo.Controller;
-
-    checkIfPlayerExists(playerConfig?: playerConfigType): boolean
-    {
-        let response = false;
-        if (playerConfig.body.playerContainer instanceof HTMLElement) {
-            response = !playerConfig.body.playerContainer.classList.contains('is-loaded');
-        }
-        return response;
-    }
-
-    init(playerConfig?: playerConfigType): Promise<any> {
-
-        Helper.setDebugEvent('Start init player', 'info');
-
-        if (!playerConfig || Object.keys(playerConfig).length === 0) {
-            Helper.setDebugEvent('Lt Player: The config object is empty', 'error')
-            Helper.setDebugEvent('Use one of below examples', 'error')
-            Helper.setDebugEvent({
-                Example_1: 'Use object to configure player (Player.init({versions : "Player versions", body : {player configure body}}))',
-                Example_2: 'Use HTML dataset attribute to configure Player (data-lt-player-config="{versions : "Player versions", body : {player configure body}"))'
-            }, 'table')
-            return;
-        }
-
-        const validateResult = ValidatorService.validate('init', playerSchema, playerConfig);
-
-        if (!validateResult) {
-            return;
-        }
-
-        Helper.setDebugEvent('Validate player config', 'info');
-
-        if (typeof playerConfig.body.playerContainer === "string") {
-
-            const playerContainerPlayer = document.querySelector(`.${playerConfig.body.playerContainer}, #${playerConfig.body.playerContainer}`);
-
-            if (!playerContainerPlayer) {
-                console.error(`No Element found with ${playerConfig.body.playerContainer}`);
-                return;
-            }
-
-            playerConfig.body.playerContainer = playerContainerPlayer;
-        }
-
-
-        if (process.env.DEBUG === "true") {
-            console.info('Setup Player Container');
-        }
-
-        playerConfig.body.device = Helper.getDevice();
-
-        if (process.env.DEBUG === "true") {
-            console.info(`Set Device - ${playerConfig.body.device}`);
-        }
-
-        const playerContainer = playerConfig.body.playerContainer;
-
-        playerContainer.classList.add(`lt-player`);
-        playerContainer.classList.add(`is-loaded`);
-
-        this.setAdditionalInfo(playerConfig);
-
-        if (process.env.DEBUG === "true") {
-            console.info(`Set Additional Info`);
-        }
-
-        if (playerConfig.body.playerType === undefined) {
-            const checkVersion = (version : string | number) : boolean => {
-                if (typeof version === 'string') {
-                    if (parseInt(version) === 1) {
-                        return true;
-                    }
-                }
-
-                if (typeof version === "number") {
-                    if (version === 1) {
-                        return true;
-                    }
-                }
-
-                return false;
-
-            }
-
-            if (checkVersion(playerConfig.version)) {
-                return new Promise((resolve, reject) => {
-                    playerConfig.body.playerType = 2;
-
-                    resolve(this.setType(playerConfig, playerContainer));
-                    reject(null);
-                });
-            }
-
-            return new Promise((resolve, reject) => {
-                playerConfig.body.playerType = this.getVideoTypeByUrl(playerConfig.body.videoUrl).then(response => {
-                    playerConfig.body.playerType = response;
-                    resolve(this.setType(playerConfig, playerContainer));
-                });
-            })
-        } else {
-            return new Promise((resolve, reject) => {
-                resolve(this.setType(playerConfig, playerContainer));
-                reject(null);
-            });
-        }
-    }
-
-    setType(playerConfig: playerConfigType, playerContainer: HTMLElement) {
-
-        let player: LTPlayer.LandscapeType | LTPlayer.PortraitType = this.setPlayerType(playerConfig.body.playerType);
-
-        if (!player) {
-            console.error('No "playerType" is set in config!')
-            return;
-        }
-
-        let setupPlayer = player.setup(playerConfig, this.additionalInfoService);
-
-        if (process.env.DEBUG === "true") {
-            console.info(`Finish Setup Player`);
-        }
-
-
-        if (!setupPlayer) {
-            return;
-        }
-
-        if (process.env.DEBUG === "true") {
-            player.plyr.on('ready', () => {
-                console.log(`Player id=${player.playerConfig.getPlayerId()} finish setup`);
-            })
-        }
-
-        playerConfig.body.playerContainer = player;
-        this.additionalInfoService = null;
-
-        return player;
-    }
-
-    getVideoTypeByUrl(url: string) {
-
-        let videoData = Helper.processConfigData(url) as urlVideoType;
-
-        const processEmbed = () => {
-
-            const embedRequest = (url: string) =>{
-                return new Promise((resolveOuter, reject) => {
-                    fetch(`https://vimeo.com/api/oembed.json?url=${url}`).then(
-                        response => {
-                            resolveOuter(response.json());
-                        },
-                        error => {
-                            reject(error);
-                        })
-                });
-            }
-
-
-            videoData.embedId = Helper.getEmbeddedID(url);
-            videoData.embedHash = Helper.getEmbeddedHash(url);
-
-
-            return embedRequest(url).then(
-                respose => {
-                    return new Promise((resolve, reject) => {
-
-                        let res: any = respose;
-
-                        if (res.width > res.height) {
-                            resolve('landscape');
-                        } else {
-                            resolve('portrait');
-                        }
-                    });
-
-            });
-
-        }
-
-        const processVideo = () => {
-            let videoTag = document.createElement('video');
-            videoTag.src = url;
-
-            if (url.includes('.m3u8')) {
-                return new Promise((resolve) => {
-                    resolve('portrait')
-                })
-            }
-
-            return new Promise((resolve) => {
-                videoTag.addEventListener( "loadedmetadata", function (e) {
-                    if (this.videoWidth > this.videoHeight) {
-                        resolve('landscape');
-                    } else {
-                        resolve('portrait');
-                    }
-                }, false );
-            })
-
-
-        }
-
-        switch (videoData.type) {
-            case 'embedded':
-                return processEmbed()
-            case 'video':
-                return processVideo();
-
-        }
-    }
-
-    /**
-     * Set Additional Info
-     * @param playerConfig
-     */
-    setAdditionalInfo(playerConfig: defaultType): void {
-
-        const additionalInfoContainer:HTMLElement = playerConfig.body.playerContainer.querySelector('.lt-player-additional-info');
-
-        if (additionalInfoContainer) {
-            this.additionalInfoService = new LTPLayerAddInfo.Controller();
-            this.additionalInfoService.setContainer(additionalInfoContainer);
-            return;
-        }
-
-
-        if (playerConfig.body.additionalInfo !== undefined && Object.keys(playerConfig.body.additionalInfo).length > 0) {
-            this.additionalInfoService = new LTPLayerAddInfo.Controller();
-            this.additionalInfoService.setConfig(playerConfig.body.additionalInfo);
-            return;
-        }
-
-
-        this.additionalInfoService = null;
-        return;
-
-
-    }
-
-    /**
-     * Set player type
-     * @param type
-     */
-    setPlayerType(type: number | string): LTPlayer.PortraitType | LTPlayer.LandscapeType {
-
-        let player: PlayerType = null;
-
-        switch (type) {
-            case "1":
-                player = new LTPlayer.PortraitType();
-            break
-            case "2":
-                player = new LTPlayer.LandscapeType();
-                break
-            case 1:
-                player = new LTPlayer.PortraitType();
-                break
-            case 2:
-                player = new LTPlayer.LandscapeType()
-                break
-            case 'portrait':
-                player = new LTPlayer.PortraitType();
-                break
-            case 'landscape':
-                player = new LTPlayer.LandscapeType()
-                break
-        }
-
-        return player;
-    }
-
-
-}