@gcorevideo/player 2.18.3 → 2.19.0

package/lib/plugins/level-selector/LevelSelector.js

@@ -1,68 +1,64 @@
 import { Events, template, UICorePlugin } from '@clappr/core';
-import assert from 'assert';
-import buttonHtml from '../../../assets/plugins/level-selector/button.ejs';
-import listHtml from '../../../assets/plugins/level-selector/list.ejs';
+import { reportError, trace } from '@gcorevideo/utils';
+import { CLAPPR_VERSION } from '../build.js';
+import buttonHtml from '../../../assets/level-selector/button.ejs';
+import listHtml from '../../../assets/level-selector/list.ejs';
 import hdIcon from '../../../assets/icons/new/hd.svg';
 import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
 import checkIcon from '../../../assets/icons/new/check.svg';
-import '../../../assets/plugins/level-selector/style.scss';
-import { trace } from '../../trace/index.js';
-assert(process.env.CLAPPR_VERSION, 'CLAPPR_VERSION is required');
-const CLAPPR_VERSION = process.env.CLAPPR_VERSION;
-// assert(process.env.VERSION, 'VERSION is required');
-// const VERSION: string = process.env.VERSION;
-// import Player from '../../Player';
-// import LogManager from '../../utils/LogManager';
+import '../../../assets/level-selector/style.scss';
 const T = 'plugins.level_selector';
-const AUTO = -1;
-const NO_LEVEL = {
-    level: {
-        bitrate: 0,
-        // mediaType: 'video',
-        width: 0,
-        height: 0,
-        // scanType: '',
-        // qualityIndex: -1,
-    },
-    id: -1,
-};
-// type LevelInfo = {
-//   id: number;
-//   label: string;
-// }
-// const NO_LEVEL = {
-//   id: -1,
-//   label: 'Auto',
-// };
-export default class LevelSelector extends UICorePlugin {
-    currentLevel = null;
+const VERSION = '2.18.3';
+/**
+ * Allows to control the quality level of the playback.
+ * @beta
+ *
+ * @remarks
+ * The plugin is rendered as a button in the gear menu.
+ * When clicked, it shows a list of quality levels to choose from.
+ *
+ * Configuration options:
+ *
+ * - `labels`: The labels to show in the level selector. [vertical resolution]: string
+ * - `restrictResolution`: The maximum resolution to allow in the level selector.
+ * - `title`: The title to show in the level selector.
+ *
+ * @example
+ * ```ts
+ * {
+ *   levelSelector: {
+ *     restrictResolution: 360,
+ *     labels: { 360: '360p', 720: '720p' },
+ *   },
+ * }
+ * ```
+ */
+export class LevelSelector extends UICorePlugin {
     levels = [];
     levelLabels = [];
     removeAuto = false;
+    isHd = false;
+    isOpen = false;
+    buttonTemplate = null;
+    listTemplate = null;
     get name() {
         return 'level_selector';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    //   static get version() {
-    //     return VERSION;
-    //   }
-    // get template() {
-    //   return template(pluginHtml);
-    // }
+    static get version() {
+        return VERSION;
+    }
     get attributes() {
         return {
-            'class': this.name,
-            'data-level-selector': ''
+            class: this.name,
+            'data-level-selector': '',
         };
     }
     currentText = 'Auto';
     selectedLevelId = -1;
-    //   constructor(core) {
-    //     super(core);
-    //   }
     get events() {
         return {
             'click .gear-sub-menu_btn': 'onLevelSelect',
@@ -71,41 +67,40 @@ export default class LevelSelector extends UICorePlugin {
         };
     }
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents);
+        this.listenTo(this.core, Events.CORE_READY, () => this.bindPlaybackEvents());
         this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        // this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
         this.listenTo(this.core, 'gear:rendered', this.render);
-        // this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
     }
     unBindEvents() {
-        this.stopListening(this.core, Events.CORE_READY, this.bindPlaybackEvents);
+        this.stopListening(this.core, Events.CORE_READY, () => this.bindPlaybackEvents());
         this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        // this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
         this.stopListening(this.core, 'gear:rendered', this.render);
-        // this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
     }
     bindPlaybackEvents() {
-        // this.currentLevel = {};
-        this.currentLevel = NO_LEVEL;
         this.removeAuto = false;
-        const currentPlayback = this.core.activePlayback;
-        this.listenTo(currentPlayback, Events.PLAYBACK_LEVELS_AVAILABLE, this.fillLevels);
-        this.listenTo(currentPlayback, Events.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
-        this.listenTo(currentPlayback, Events.PLAYBACK_LEVEL_SWITCH_END, this.stopLevelSwitch);
-        this.listenTo(currentPlayback, Events.PLAYBACK_BITRATE, this.updateCurrentLevel);
-        this.listenTo(currentPlayback, Events.PLAYBACK_STOP, this.onStop);
-        const playbackLevelsAvailableWasTriggered = currentPlayback.levels && currentPlayback.levels.length > 0;
-        playbackLevelsAvailableWasTriggered && this.fillLevels(currentPlayback.levels);
+        this.isHd = false;
+        const activePlayback = this.core.activePlayback;
+        this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, (levels) => this.fillLevels(levels));
+        this.listenTo(activePlayback, Events.PLAYBACK_LEVEL_SWITCH_START, this.onLevelSwitchStart);
+        this.listenTo(activePlayback, Events.PLAYBACK_LEVEL_SWITCH_END, this.onLevelSwitchEnd);
+        this.listenTo(activePlayback, Events.PLAYBACK_BITRATE, this.updateCurrentLevel);
+        this.listenTo(activePlayback, Events.PLAYBACK_STOP, this.onStop);
+        this.listenTo(activePlayback, Events.PLAYBACK_HIGHDEFINITIONUPDATE, (isHd) => {
+            this.isHd = isHd;
+            this.deferRender();
+        });
+        if (activePlayback?.levels?.length > 0) {
+            this.fillLevels(activePlayback.levels);
+        }
     }
     onStop() {
+        trace(`${T} onStop`);
         const currentPlayback = this.core.activePlayback;
         this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, () => {
-            trace(`${T} PLAYBACK_PLAY`, {
-                playbackType: currentPlayback.getPlaybackType(),
-            });
+            trace(`${T} on PLAYBACK_PLAY after stop`, { selectedLevelId: this.selectedLevelId });
             if (currentPlayback.getPlaybackType() === 'live') {
                 if (this.selectedLevelId !== -1) {
-                    currentPlayback.currentLevel = this.findLevelBy(this.selectedLevelId) || NO_LEVEL;
+                    currentPlayback.currentLevel = this.selectedLevelId;
                 }
             }
         });
@@ -119,109 +114,123 @@ export default class LevelSelector extends UICorePlugin {
         if (!this.core.activeContainer) {
             return false;
         }
-        const currentPlayback = this.core.activePlayback;
-        if (!currentPlayback) {
+        const activePlayback = this.core.activePlayback;
+        if (!activePlayback) {
+            return false;
+        }
+        const supportsCurrentLevel = 'currentLevel' in activePlayback;
+        if (!supportsCurrentLevel) {
             return false;
         }
-        // TODO typeof currentPlayback.currentLevel === 'number' should it be
-        const respondsToCurrentLevel = currentPlayback.currentLevel !== undefined;
         // Only care if we have at least 2 to choose from
-        const hasLevels = !!(this.levels && this.levels.length > 1);
-        return respondsToCurrentLevel && hasLevels;
+        return !!(this.levels && this.levels.length > 1);
     }
     render() {
-        if (this.shouldRender()) {
-            // this.$el.html(this.template({ 'levels': this.levels, 'title': this.getTitle() }));
-            const t = template(buttonHtml);
-            this.$el.html(t({
+        if (!this.shouldRender()) {
+            return this;
+        }
+        this.renderButton();
+        return this;
+    }
+    renderButton() {
+        if (!this.buttonTemplate) {
+            this.buttonTemplate = template(buttonHtml);
+        }
+        if (!this.isOpen) {
+            const html = this.buttonTemplate?.({
+                arrowRightIcon,
                 currentText: this.currentText,
+                isHd: this.isHd,
                 hdIcon,
-                arrowRightIcon,
-            }));
-            this.core.mediaControl.$el?.find('.gear-options-list [data-quality]').html(this.el);
-            // this.highlightCurrentLevel();
+            });
+            this.$el.html(html);
+            this.core.mediaControl.$el
+                ?.find('.gear-options-list [data-quality]')
+                .html(this.el);
         }
-        if (this.removeAuto) {
-            this.core.mediaControl
-                .$el
-                .find('.gear-options-list [data-quality]')
-                .find('[data-level-selector-select="-1"]')
-                .parent()
-                .remove();
+    }
+    renderDropdown() {
+        if (!this.listTemplate) {
+            this.listTemplate = template(listHtml);
         }
-        return this;
+        const html = this.listTemplate({
+            arrowLeftIcon,
+            checkIcon,
+            labels: this.levelLabels,
+            levels: this.levels,
+            maxLevel: this.maxLevel,
+            removeAuto: this.removeAuto,
+        });
+        this.$el.html(html);
+        this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+    }
+    get maxLevel() {
+        const maxRes = this.core.options.levelSelector?.restrictResolution;
+        return maxRes
+            ? this.levels.findIndex((level) => level.height === maxRes)
+            : -1;
     }
-    fillLevels(levels, initialLevel = AUTO) {
-        trace('${T} fillLevels', { levels, initialLevel });
-        // Player.player.trigger('levels', levels);
-        // this.core.trigger('levels', levels);
-        // TODO fire directly on the plugin object
-        // Remove quality selector if it's not HLS
-        if (initialLevel !== -1) {
+    fillLevels(levels) {
+        const maxResolution = this.core.options.levelSelector?.restrictResolution;
+        this.levels = levels;
+        this.makeLevelsLabels();
+        if (maxResolution) {
             this.removeAuto = true;
+            // TODO account for vertical resolutions, i.e, normalize the resolution to the width
+            const initialLevel = levels
+                .filter((level) => level.height <= maxResolution)
+                .pop();
+            this.setLevel(initialLevel?.level ?? 0);
         }
-        // if (this.selectedLevelId === undefined) { // TODO compare with AUTO?
-        //   this.selectedLevelId = initialLevel;
-        // }
-        this.levels = levels;
-        this.configureLevelsLabels();
-        this.render();
+        this.deferRender();
     }
-    configureLevelsLabels() {
-        trace('${T} configureLevelsLabels', { options: this.core.options, levels: this.levels });
-        const labels = this.core.options.pluginSettings?.level_selector?.labels;
+    makeLevelsLabels() {
+        const labels = this.core.options.levelSelector?.labels ?? {};
         this.levelLabels = [];
-        if (labels) {
-            for (let i = 0; i < this.levels.length; i++) {
-                const level = this.levels[i];
-                const ll = level.level.width > level.level.height ? level.level.height : level.level.width;
-                const label = labels[ll] || `${ll}p`;
-                this.levelLabels.push(label);
-            }
+        for (let i = 0; i < this.levels.length; i++) {
+            const level = this.levels[i];
+            const ll = level.width > level.height ? level.height : level.width;
+            const label = labels[ll] || `${ll}p`;
+            this.levelLabels.push(label);
         }
-        trace('${T} configureLevelsLabels leave', { levelLabels: this.levelLabels });
     }
     findLevelBy(id) {
-        return this.levels.find((level) => level.id === id);
+        return this.levels.find((level) => level.level === id);
     }
     onLevelSelect(event) {
-        const selectedLevel = event.currentTarget?.dataset?.id;
-        trace('${T} onLevelSelect', { selectedLevel });
-        this.setIndexLevel(parseInt(event.currentTarget?.dataset?.id ?? "-1", 10));
-        // this.toggleContextMenu();
-        // event.stopPropagation();
-        // return false;
+        const selectedLevel = parseInt(event.currentTarget?.dataset?.id ?? '-1', 10);
+        this.setLevel(selectedLevel);
+        event.stopPropagation();
+        return false;
     }
     goBack() {
+        trace(`${T} goBack`);
+        this.isOpen = false;
         this.core.trigger('gear:refresh');
+        this.deferRender();
     }
-    setIndexLevel(index) {
+    setLevel(index) {
+        trace(`${T} setIndexLevel`, { index });
         this.selectedLevelId = index;
-        if (this.core.activePlayback) {
-            this.core.activePlayback.trigger('playback:level:select:start');
+        if (!this.core.activePlayback) {
+            return;
         }
-        if (this.core.activePlayback.currentLevel.id === this.selectedLevelId) {
-            return false;
+        if (this.core.activePlayback.currentLevel === this.selectedLevelId) {
+            return;
         }
         this.core.activePlayback.currentLevel = this.selectedLevelId;
         try {
-            this.updateText(this.selectedLevelId);
             this.highlightCurrentLevel();
         }
         catch (error) {
-            // LogManager.exception(error);
             reportError(error);
         }
+        this.deferRender();
     }
     onShowLevelSelectMenu() {
-        const t = template(listHtml);
-        this.$el.html(t({
-            levels: this.levels,
-            labels: this.levelLabels,
-            arrowLeftIcon,
-            checkIcon,
-        }));
-        this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+        trace(`${T} onShowLevelSelectMenu`);
+        this.isOpen = true;
+        this.renderDropdown();
         this.highlightCurrentLevel();
     }
     allLevelElements() {
@@ -231,57 +240,62 @@ export default class LevelSelector extends UICorePlugin {
         return this.$(`ul.gear-sub-menu a[data-id="${id}"]`).parent();
     }
     getTitle() {
-        return (this.core.options.level_selector || {}).title;
+        return (this.core.options.levelSelector || {}).title;
     }
-    startLevelSwitch() {
-        // Player.player.trigger('startLevelSwitch');
+    onLevelSwitchStart() {
+        this.core.activePlayback.trigger('playback:level:select:start');
         this.levelElement(this.selectedLevelId).addClass('changing');
     }
-    stopLevelSwitch() {
-        if (this.core.activePlayback) {
-            this.core.activePlayback.trigger('playback:level:select:end', {
-                label: this.getLevelLabel(this.selectedLevelId)
-            });
-        }
+    onLevelSwitchEnd() {
         this.levelElement(this.selectedLevelId).removeClass('changing');
-        // Player.player.trigger('stopLevelSwitch');
     }
     updateText(level) {
         if (level === undefined || isNaN(level)) {
             return;
         }
         this.currentText = this.getLevelLabel(level);
+        this.deferRender();
     }
     getLevelLabel(id) {
         if (id === -1) {
             return 'Auto';
         }
-        const index = this.levels.findIndex((l) => l.id === id);
+        const index = this.levels.findIndex((l) => l.level === id);
         if (index < 0) {
             return 'Auto';
         }
-        return this.levelLabels[index] || formatLevelLabel(this.levels[index]);
+        return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
     }
     updateCurrentLevel(info) {
-        trace('${T} updateCurrentLevel', { info, levels: this.levels });
-        const level = this.findLevelBy(info.level);
-        this.currentLevel = level ? level : null;
+        trace(`${T} updateCurrentLevel`, { info });
         this.highlightCurrentLevel();
-        // Player.player.trigger('updateCurrentLevel', info);
     }
     highlightCurrentLevel() {
-        trace('${T} highlightCurrentLevel', { currentLevel: this.currentLevel, selectedLevelId: this.selectedLevelId });
+        trace(`${T} highlightCurrentLevel`, {
+            selectedLevelId: this.selectedLevelId,
+        });
         this.allLevelElements().removeClass('current');
         this.allLevelElements().find('a').removeClass('gcore-skin-active');
-        if (this.currentLevel) {
-            const currentLevelElement = this.levelElement(this.selectedLevelId);
-            currentLevelElement.addClass('current');
-            currentLevelElement.find('a').addClass('gcore-skin-active');
-        }
+        const currentLevelElement = this.levelElement(this.selectedLevelId);
+        currentLevelElement.addClass('current');
+        currentLevelElement.find('a').addClass('gcore-skin-active');
         this.updateText(this.selectedLevelId);
     }
+    deferRender = debounce(() => this.render(), 0);
 }
 function formatLevelLabel(level) {
-    const h = level.level.width > level.level.height ? level.level.height : level.level.width;
+    const h = level.width > level.height ? level.height : level.width;
     return `${h}p`;
 }
+function debounce(fn, wait) {
+    let timerId = null;
+    return function () {
+        if (timerId !== null) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => {
+            timerId = null;
+            fn();
+        }, wait);
+    };
+}

package/lib/plugins/logo/Logo.d.ts

@@ -0,0 +1,29 @@
+import { UIContainerPlugin, Container } from '@clappr/core';
+import '../../../assets/logo/styles/logo.scss';
+export declare class Logo extends UIContainerPlugin {
+    private hasStartedPlaying;
+    private $logoContainer;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get template(): any;
+    get attributes(): {
+        class: string;
+        'data-logo': string;
+    };
+    private get shouldRender();
+    bindEvents(): void;
+    stopListening(): this;
+    private onPlay;
+    private onStop;
+    private update;
+    constructor(container: Container);
+    render(): this;
+    private setLogoImgAttrs;
+    private setLogoWidth;
+    private setPosition;
+    private setStyles;
+    private setStyle;
+}
+//# sourceMappingURL=Logo.d.ts.map

package/lib/plugins/logo/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/plugins/logo/Logo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAyB,SAAS,EAAE,MAAM,cAAc,CAAC;AAOnF,OAAO,uCAAuC,CAAC;AAe/C,qBAAa,IAAK,SAAQ,iBAAiB;IACzC,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,cAAc,CAA4B;IAElD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,OAAO,KAAK,YAAY,GAEvB;IAEQ,UAAU;IAQV,aAAa;IAMtB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,MAAM;gBAYF,SAAS,EAAE,SAAS;IAYvB,MAAM;IAaf,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,YAAY;IA6DpB,OAAO,CAAC,WAAW;IAuCnB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,QAAQ;CAKjB"}

package/lib/plugins/logo/Logo.js

@@ -0,0 +1,181 @@
+import { UIContainerPlugin, Events, template as t } from '@clappr/core';
+import { CLAPPR_VERSION } from '../build.js';
+import { calculateSize } from './utils/index.js';
+import logoHTML from '../../../assets/logo/templates/logo.ejs';
+import '../../../assets/logo/styles/logo.scss';
+export class Logo extends UIContainerPlugin {
+    hasStartedPlaying = false;
+    $logoContainer = null;
+    get name() {
+        return 'logo';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get template() {
+        return t(logoHTML);
+    }
+    get attributes() {
+        return {
+            'class': 'player-logo',
+            'data-logo': ''
+        };
+    }
+    get shouldRender() {
+        return !!this.options.logo && !!this.options.logo.path;
+    }
+    bindEvents() {
+        window.addEventListener('resize', this.setPosition);
+        this.listenTo(this.container, Events.CONTAINER_RESIZE, this.setPosition);
+        this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
+        this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
+        this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, this.setPosition);
+    }
+    stopListening() {
+        window.removeEventListener('resize', this.setPosition);
+        // @ts-ignore
+        return super.stopListening();
+    }
+    onPlay() {
+        this.hasStartedPlaying = true;
+        this.setPosition();
+    }
+    onStop() {
+        this.hasStartedPlaying = false;
+        this.update();
+    }
+    update() {
+        if (!this.shouldRender) {
+            return;
+        }
+        if (!this.hasStartedPlaying) {
+            this.$el.hide();
+        }
+        else {
+            this.$el.show();
+        }
+    }
+    constructor(container) {
+        super(container);
+        this.setPosition = this.setPosition.bind(this);
+        this.hasStartedPlaying = false;
+        if (!this.options.logo) {
+            this.disable();
+            return;
+        }
+        this.render();
+    }
+    render() {
+        if (!this.shouldRender) {
+            return this;
+        }
+        this.$el.html(this.template());
+        this.setLogoImgAttrs();
+        this.container.$el.append(this.$el.get(0));
+        this.update();
+        return this;
+    }
+    setLogoImgAttrs() {
+        const { logo: { path: imgUrl, width = 60, height = 60 } } = this.options;
+        this.$logoContainer = this.$el.find('.clappr-logo');
+        const $logo = this.$logoContainer.find('.clappr-logo-img');
+        $logo.attr({
+            'src': `${imgUrl}`,
+            'style': `width: ${width}px;height: ${height}px;`
+        });
+    }
+    setLogoWidth(size) {
+        let { logo: { width = 60, height = 60, objectFit = 'contain' } } = this.options;
+        const $logo = this.$logoContainer.find('.clappr-logo-img');
+        // TODO size must always be defined
+        if (size) {
+            const logoWidthTimes = Math.floor(size.width / width);
+            const logoHeightTimes = Math.floor(size.height / height);
+            if (logoHeightTimes < 4) {
+                let maxTimes = logoHeightTimes;
+                if (logoWidthTimes < 4) {
+                    maxTimes = logoWidthTimes < logoHeightTimes ? logoWidthTimes : logoHeightTimes;
+                }
+                switch (maxTimes) {
+                    case 0:
+                    case 1:
+                        maxTimes = 2;
+                        break;
+                    case 2:
+                        maxTimes = 1.5;
+                        break;
+                    case 3:
+                        maxTimes = 1;
+                        break;
+                    default:
+                        break;
+                }
+                width /= maxTimes;
+                height /= maxTimes;
+            }
+            else {
+                if (logoWidthTimes < 4) {
+                    let maxTimes = 1;
+                    switch (logoWidthTimes) {
+                        case 0:
+                        case 1:
+                            maxTimes = 2;
+                            break;
+                        case 2:
+                            maxTimes = 1.5;
+                            break;
+                        case 3:
+                            maxTimes = 1;
+                            break;
+                        default:
+                            break;
+                    }
+                    width /= maxTimes;
+                    height /= maxTimes;
+                }
+            }
+        }
+        $logo.attr({
+            'style': `width: ${width}px;height: ${height}px;object-fit: ${objectFit}`
+        });
+    }
+    setPosition() {
+        if (!this.shouldRender) {
+            return;
+        }
+        const $el = this.container.$el;
+        const targetRect = $el.get(0).getBoundingClientRect();
+        const $video = $el.find('video[data-html5-video]');
+        if (!$video.get(0)) {
+            return;
+        }
+        const { videoWidth, videoHeight } = $video.get(0);
+        const dimensions = calculateSize({
+            dom: {
+                width: targetRect.width,
+                height: targetRect.height
+            },
+            media: {
+                width: videoWidth,
+                height: videoHeight
+            }
+        });
+        const { logo } = this.options;
+        const { letterboxing: { vertical, horizontal } } = dimensions;
+        if (dimensions.media && dimensions.media.width && dimensions.media.height) {
+            this.setLogoWidth({ width: dimensions.media.width, height: dimensions.media.height });
+        }
+        const el = this.$logoContainer.get(0);
+        this.setStyles(logo, ['top', 'bottom'], el, vertical);
+        this.setStyles(logo, ['left', 'right'], el, horizontal);
+        this.update();
+    }
+    setStyles(opts, props, el, value) {
+        props.forEach(p => this.setStyle(opts, p, el, value));
+    }
+    setStyle(opts, p, el, value) {
+        if (opts[p]) {
+            el.style[p] = `${opts[p] + value}px`;
+        }
+    }
+}