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

package/src/services/IconsService.ts

@@ -1,124 +0,0 @@
-export class IconsService {
-
-    path
-
-    posterMapIconsName = [
-        'play',
-        'logo',
-        'share'
-    ];
-
-    controlsMapIconsName = [
-        'play',
-        'skip-backward',
-        'skip-forward',
-        'volume-3',
-        'volume-2',
-        'volume-1',
-        'mute',
-        'settings',
-        'pause',
-        'minimize',
-        'maximize',
-        'mini-player',
-        'share',
-        'external-link',
-        'fast-backward',
-        'fast-forward'
-    ];
-
-    additionalInfoIconsName = [
-        'file-text',
-        'user',
-        'university',
-    ]
-
-    playPause = [
-        'play',
-        'pause'
-    ]
-
-    constructor() {
-        this.path = require.context('../assets/icons', false);
-    }
-
-    getLogo(): any {
-
-        let response = null
-
-        this.path.keys().forEach(item => {
-            let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
-
-            if (name === 'logo-big') {
-                response = this.path(item);
-            }
-        })
-
-        return response;
-    }
-
-    getIconsByComponent(type: string) {
-
-        let response = {};
-
-        switch (type) {
-            case 'poster':
-                this.path.keys().forEach(item => {
-                    this.posterMapIconsName.forEach(mapElement => {
-                        let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
-                        if (name === mapElement) {
-                            Object.assign(response, {[name] : this.path(item)})
-                        }
-                    })
-                })
-            break
-            case 'controls':
-                this.path.keys().forEach(item => {
-                    this.controlsMapIconsName.forEach(mapElement => {
-                        let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
-                        if (name === mapElement) {
-                            Object.assign(response, {[name] : this.path(item)})
-                        }
-                    })
-                })
-            break
-            case 'additionalInfo':
-                this.path.keys().forEach(item => {
-                    this.additionalInfoIconsName.forEach(mapElement => {
-                        let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
-                        if (name === mapElement) {
-                            Object.assign(response, {[name] : this.path(item)})
-                        }
-                    })
-                })
-            break
-            case 'playPause':
-                this.path.keys().forEach(item => {
-                    this.playPause.forEach(mapElement => {
-                        let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
-                        if (name === mapElement) {
-                            Object.assign(response, {[name] : this.path(item)})
-                        }
-                    })
-                })
-        }
-
-
-        return response;
-    }
-
-    getControlsIcons() {
-        let response = {};
-        this.path.keys().forEach(item => {
-            this.posterMapIconsName.forEach(mapElement => {
-                let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
-                if (name === mapElement) {
-                    Object.assign(response, {[name] : this.path(item)})
-                }
-            })
-        })
-
-        return response;
-    }
-
-}

package/src/services/LTPlayerRotateDeviceService.ts

@@ -1,15 +0,0 @@
-export class LTPlayerRotateDeviceService {
-    constructor() {
-    }
-
-    getDeviceOrientation() {
-        if (window.matchMedia("(orientation: portrait)").matches) {
-            return 'portrait';
-        }
-
-        if (window.matchMedia("(orientation: landscape)").matches) {
-            return 'landscape';
-        }
-        return 'portrait';
-    }
-}

package/src/services/LoaderService.ts

@@ -1,21 +0,0 @@
-export class LoaderService {
-    static getSpinner() {
-        return `<div class="lt-player-spinner__loader">
-                    <svg class="lt-player-spinner__loader__circle-svg" viewBox="0 0 50 50">
-                        <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
-                    </svg>
-                </div>`;
-    }
-
-    static removeSpinner(playerContainer: HTMLElement) {
-        if (!playerContainer) {
-            return
-        }
-
-        const spinner = playerContainer.querySelector('.lt-player-spinner__loader');
-
-        if (spinner) {
-            spinner.remove();
-        }
-    }
-}

package/src/services/ResizeService.ts

@@ -1,352 +0,0 @@
-import {LTPlayer} from "../components/LTPlayerType";
-import {defaultType} from "../global/types/ModuleTypes";
-import Plyr from "plyr";
-import {LTPLayerAddInfoResizeManager} from "../components/addInfo/LTPLayerAddInfoResizeManager";
-import {LTPLayerAddInfo} from "../components/addInfo/LTPlayerAddInfoManager";
-import {LTPlayerRotateDeviceService} from "./LTPlayerRotateDeviceService";
-import {LTPlayerAddInfoDesktop} from "../components/addInfo/LTPlayerAddInfoDesktop";
-import {Helper} from "./Helper";
-
-/**
- * Window service (set width and height)
- */
-export class ResizeService {
-    orientation: LTPlayerRotateDeviceService
-    playerInstance: LTPlayer.LandscapeType | LTPlayer.PortraitType
-    player: Plyr
-    playerContainer: HTMLElement
-    playerParentContainer: HTMLElement
-    device: string
-    playerType: string
-    addInfo: LTPLayerAddInfoResizeManager
-
-    addInfoOutSide: false
-    addInfoInSide: true
-
-    playerParam: defaultType  = {
-        width : null,
-        height : null
-    }
-
-
-    defaultPortrate = {
-        max : {
-            width: 500,
-            height: 776
-        },
-        min : {
-            width: 200,
-            height: 400
-        },
-        size : {
-            438 : "lg",
-            375 : "md",
-            350 : "sm",
-            200 : "xs"
-        }
-    }
-
-    defaultLandscape = {
-        max : {
-            width: 1067,
-            height: 600
-        },
-        min : {
-            width: 300,
-            height: 150
-        },
-        size : {
-            1067 : "xxl",
-            913 : "xl",
-            820 : "lg",
-            760 : "md",
-            640 : "sm",
-            480 : "xs",
-            266 : "xxs"
-        }
-    }
-
-    constructor() {
-        this.orientation = new LTPlayerRotateDeviceService();
-    }
-
-    init(playerInstance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        this.playerInstance = playerInstance;
-        this.playerContainer = playerInstance.playerConfig.getPlayerElementContainer();
-        this.player = playerInstance.plyr;
-        this.device = playerInstance.playerConfig.getDevice();
-        this.playerParentContainer = this.playerContainer.parentElement;
-        this.addInfo = new LTPLayerAddInfoResizeManager(playerInstance);
-        this.setPlayerDimensions();
-    }
-
-    protected setPlayerDimensions() {
-
-        if (!this.playerInstance.playerConfig.getPlayerType()) {
-            return;
-        }
-
-
-        switch (this.playerInstance.playerConfig.getPlayerType()) {
-            case "1":
-                this.setPortrate();
-                this.playerType = 'portrait';
-                break
-            case "2":
-                this.setLandScape();
-                this.playerType = 'landscape';
-                break
-            case 1:
-                this.setPortrate();
-                this.playerType = 'portrait';
-                break
-            case 2:
-                this.setLandScape();
-                this.playerType = 'landscape';
-                break
-            case 'portrait':
-                this.playerType = 'landscape';
-                this.setPortrate();
-                break
-            case 'landscape':
-                this.playerType = 'landscape';
-                this.setLandScape();
-                break
-        }
-
-    }
-
-    protected setPortrate() {
-        // this.setEvent(this.defaultPortrate);
-    }
-
-
-    protected setLandScape() {
-        // this.setEvent(this.defaultLandscape);
-    }
-
-    protected setEvent(defaultData: defaultType) {
-        new ResizeObserver(response => {
-            this.setDimensions(response[0].target.clientWidth, response[0].target.clientHeight, defaultData)
-        }).observe(this.playerParentContainer);
-    }
-
-    public setEventAddInfo(buttonsTemplate: string, deskEvent: LTPlayerAddInfoDesktop, controller: LTPLayerAddInfo.Controller) {
-        new ResizeObserver(response => {
-            this.setAddInfoByDimensions(response[0].target.clientWidth, buttonsTemplate, deskEvent, controller)
-        }).observe(this.playerInstance.plyr.elements.container);
-    }
-
-    protected setAddInfoByDimensions(containerWidth: number, buttonsTemplate:string, deskEvent: LTPlayerAddInfoDesktop, controller: LTPLayerAddInfo.Controller) {
-
-
-        const createAddInfoButtonsOutSide = () => {
-            const setButtonsByVideoType = () => {
-                const plyr: Plyr = this.player;
-
-                if (plyr.embed !== undefined) {
-                    deskEvent.set(controller, 'out');
-                    return;
-                }
-
-
-                if (this.playerInstance.playerConfig.getVideoType() === 'embedded') {
-                    plyr.on('ready', function () {
-                        plyr.embed.ready().then (function () {
-                            deskEvent.set(controller, 'out');
-                        })
-                    })
-                    return;
-                }
-
-                if (this.playerInstance.playerConfig.getVideoType() === 'video'){
-                    plyr.on('ready', function () {
-                        deskEvent.set(controller, 'out');
-                        return;
-                    })
-                    deskEvent.set(controller, 'out');
-                    return;
-                }
-
-
-
-            }
-            let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-            if (addInfoContainer) {
-                addInfoContainer.remove();
-            }
-
-            this.playerInstance.plyr.elements.container.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-            inserted.classList.add('lt-player__additional-info__is_set_out-side');
-
-            setButtonsByVideoType();
-        }
-
-        const createAddInfoButtonsInSide = () => {
-
-            let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-            if (addInfoContainer) {
-                addInfoContainer.remove();
-            }
-
-            if (this.playerInstance.plyr.elements.controls !== undefined) {
-                let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
-
-                controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
-                let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-                inserted.classList.add('lt-player__additional-info__is_set_in-side');
-
-                deskEvent.set(controller, 'in');
-            } else {
-                this.playerInstance.plyr.on('ready', () => {
-
-                    let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
-
-                    controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
-                    let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-                    inserted.classList.add('lt-player__additional-info__is_set_in-side');
-
-                    deskEvent.set(controller, 'in');
-                })
-            }
-        }
-
-        if (this.playerInstance.playerConfig.getEmbed()) {
-            createAddInfoButtonsInSide();
-            return;
-        }
-
-        createAddInfoButtonsInSide();
-
-
-        // if (containerWidth >= 380) {
-        //
-        //     if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
-        //         return;
-        //     }
-        //
-        //     if (this.addInfoOutSide) {
-        //         return;
-        //     }
-        //
-        //     this.addInfoOutSide = true;
-        //     this.addInfoInSide = false;
-        //
-        //     createAddInfoButtonsOutSide();
-        // } else {
-        //
-        //     if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
-        //         return;
-        //     }
-        //
-        //     if (this.addInfoInSide) {
-        //         return;
-        //     }
-        //
-        //     this.addInfoInSide = true;
-        //     this.addInfoOutSide = false;
-        //     createAddInfoButtonsInSide();
-        // }
-    }
-
-    protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {
-
-        const setClass = () => {
-            if (this.playerInstance.plyr.elements.container !== undefined) {
-
-                let itemClass:string | boolean = false;
-                let dimension: defaultType = this.defaultPortrate;
-
-                if (this.playerType === 'landscape') {
-                    dimension = this.defaultLandscape;
-                }
-
-                Object.keys(dimension.size).forEach( item => {
-                    if (this.playerContainer.classList.contains(`lt-player--${this.playerType}__${(dimension.size as defaultType)[item]}`)){
-                        this.playerContainer.classList.remove(`lt-player--${this.playerType}__${(dimension.size as defaultType)[item]}`)
-                    }
-                    if (this.playerContainer.clientWidth >= parseInt(item)) {
-                        itemClass = `lt-player--${this.playerType}__${(dimension.size as defaultType)[item]}`;
-                    }
-                })
-
-
-                if (itemClass) {
-                    this.playerContainer.classList.add(itemClass);
-                }
-
-            }
-        }
-
-        const setWidth = () => {
-            if (this.playerInstance.plyr.elements.container !== undefined) {
-                if (this.device === 'mobile' && this.orientation.getDeviceOrientation() === 'landscape' && this.playerType === 'portrate') {
-                    this.playerContainer.style.width = '100%';
-                    return;
-                }
-                if (containerWidth >= defaultData.max.width) {
-                    this.playerContainer.style.width = `${defaultData.max.width}px`;
-                    this.playerParam.width = defaultData.max.width;
-                    return;
-                }
-                if (containerWidth < defaultData.max.width && containerWidth >= defaultData.min.width) {
-                    this.playerContainer.style.width = `${containerWidth}px`;
-                    this.playerParam.width = containerWidth;
-                    return;
-                }
-                if (containerWidth < defaultData.min.width) {
-                    this.playerContainer.style.width = `${defaultData.min.width}px`;
-                    this.playerParam.width = defaultData.min.width;
-                    return;
-                }
-            }
-        }
-
-        const setHeight = () => {
-            if (this.playerInstance.plyr.elements.container !== undefined) {
-                if (this.device === 'mobile' && this.orientation.getDeviceOrientation() === 'landscape' && this.playerType === 'portrate') {
-                    this.playerContainer.style.height = '90vh';
-                    return;
-                }
-                if (containerHeight >= defaultData.max.height) {
-                    this.playerContainer.style.height = `${defaultData.max.height}px`;
-                    this.playerParam.height = defaultData.max.height;
-                    return;
-                }
-                if (containerHeight >= defaultData.min.height && containerHeight < defaultData.max.height) {
-                    this.playerContainer.style.height = `${containerHeight}px`;
-                    this.playerParam.height = containerHeight;
-                    return;
-                }
-                if (containerHeight < defaultData.min.height) {
-                    this.playerContainer.style.height = `${defaultData.min.height}px`;
-                    this.playerParam.height = defaultData.min.height;
-                    return;
-                }
-            }
-        }
-
-        const version = this.playerInstance.playerConfig.getVersion();
-        const observeConfig = this.playerInstance.playerConfig.getObserve();
-
-        if (observeConfig) {
-            if (observeConfig.hasOwnProperty('width') && observeConfig.width) {
-                setWidth();
-            }
-
-            if (observeConfig.hasOwnProperty('height') && observeConfig.height) {
-                setHeight();
-            }
-        } else {
-
-            setWidth();
-
-            if (version !== 1) {
-                setHeight();
-            }
-        }
-
-        setClass();
-    }
-}

package/src/services/TemplateService.ts

@@ -1,136 +0,0 @@
-import Mustache from "mustache";
-import template from '../views/template.handlebars';
-import controlsTemplate from '../views/controls.handlebars';
-import posterTemplate from '../views/poster.handlebars';
-import settingsTemplate from '../views/settings.handlebars';
-import settingsMobileTemplate from '../views/settings.mobile.handlebars';
-import additionalInfo from '../views/additionalInfo.handlebars';
-import share from '../views/share.handlebars';
-import background from '../views/background.handlebars';
-import miniPlayerControls from '../views/controls.handlebars';
-import onloadPoster from '../views/onloadPoster.handlebars';
-import {LTPlayerConfig} from "../components/config/LTPlayerConfig";
-import {IconsService} from "./IconsService";
-import {defaultType} from "../global/types/ModuleTypes";
-
-export class TemplateService {
-    /**
-     * Return player template
-     */
-    constructor() {
-    }
-
-    getOnloadPoster(data: defaultType) {
-        return Mustache.render(onloadPoster, data)
-    }
-
-    /**
-     * Get Share html string
-     * @param data
-     */
-    getShare(data: Object) {
-        return Mustache.render(share, data);
-    }
-
-    /**
-     * Get poster html string
-     * @param data
-     */
-    getPoster(data: Object) {
-        return Mustache.render(posterTemplate, data);
-    }
-
-    getSettings(data: Object) {
-        return Mustache.render(settingsTemplate, data);
-    }
-
-    getMobileSettings(data: Object) {
-        return Mustache.render(settingsMobileTemplate, data);
-    }
-
-    getAdditionalInfo(data : Object) {
-        return Mustache.render(additionalInfo, data);
-    }
-
-    getAdditionalInfoButtons(data: Object) {
-        return Mustache.render(additionalInfo, data);
-    }
-
-    /**
-     *
-     * @param config
-     * @return String
-     */
-    getTemplateByType(config: LTPlayerConfig) {
-        let configData = config.getConfigData();
-
-        Object.assign(configData, {[config.getVideoType()]: true, mobile: (config.getDevice() !== 'mobile')});
-
-        let render = Mustache.render(template, configData);
-
-        delete configData.mobile;
-
-        return render;
-    }
-
-    /**
-     *
-     * @param config
-     * @param iconService
-     */
-    getTemplateControls(config: LTPlayerConfig, iconService: IconsService) {
-
-        let configData = config.getConfigData()
-
-        Object.assign(configData, {icons: iconService.getIconsByComponent('controls')});
-
-        Object.assign(configData, {isShare: config.isShareData()});
-        Object.assign(configData, {player: 'true'});
-
-        if (configData.device === 'mobile') {
-            Object.assign(configData, {mobile: 'true'});
-        } else {
-            Object.assign(configData, {desktop: 'true'});
-        }
-
-        switch (config.getPlayerType()) {
-            case "1":
-                Object.assign(configData, {portrait: 'true'});
-                break
-            case "2":
-                Object.assign(configData, {landscape: 'true'});
-                break
-            case 1:
-                Object.assign(configData, {portrait: 'true'});
-                break
-            case 2:
-                Object.assign(configData, {landscape: 'true'});
-                break
-            case 'portrait':
-                Object.assign(configData, {portrait: 'true'});
-                break
-            case 'landscape':
-                Object.assign(configData, {landscape: 'true'});
-                break
-        }
-
-        Object.assign(configData, {chaptersEnabled: (!!configData['chapters']) })
-
-        let render = Mustache.render(controlsTemplate,configData);
-
-        delete configData.mobile;
-        delete configData.desktop;
-
-        return render;
-    }
-
-    getBackGroundTemplate(data: defaultType) {
-        return Mustache.render(background, data);
-    }
-
-    getControlsMiniPlayer(data: defaultType) {
-        return Mustache.render(miniPlayerControls, data);
-    }
-
-
-}

package/src/services/ValidatorService.ts

@@ -1,31 +0,0 @@
-import { Draft, draft07Config, JSONError } from "json-schema-library";
-import {JSONSchema} from "json-schema-library/lib/types";
-import {defaultType} from "../global/types/ModuleTypes";
-
-export class ValidatorService {
-
-    private static type: defaultType = {
-        init : draft07Config
-    };
-    /**
-     * Validate data with JSON Schema
-     * @param type
-     * @param schema
-     * @param data
-     * @return boolean
-     */
-    static validate(type: string, schema: JSONSchema, data: Object): boolean {
-        const jsonSchema: Draft = new Draft(this.type[type], schema);
-        const errors: JSONError[] = jsonSchema.validate(data);
-
-        if (errors.length > 0) {
-            if (process.env.DEBUG === "true") {
-                console.table(errors);
-            }
-            console.error('Schema Validation Errors!');
-            return false;
-        }
-
-        return true;
-    }
-}