shaka-player
Version:
DASH/EME video player library
291 lines (240 loc) • 8.62 kB
JavaScript
/*! @license
* Shaka Player
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
goog.provide('shaka.ui.OverflowMenu');
goog.require('goog.asserts');
goog.require('shaka.ads.Utils');
goog.require('shaka.log');
goog.require('shaka.ui.ContextMenu');
goog.require('shaka.ui.Controls');
goog.require('shaka.ui.Element');
goog.require('shaka.ui.Enums');
goog.require('shaka.ui.Icon');
goog.require('shaka.ui.Locales');
goog.require('shaka.ui.Localization');
goog.require('shaka.ui.Utils');
goog.require('shaka.util.Dom');
goog.require('shaka.util.FakeEvent');
goog.require('shaka.util.Iterables');
/**
* @extends {shaka.ui.Element}
* @final
* @export
*/
shaka.ui.OverflowMenu = class extends shaka.ui.Element {
/**
* @param {!HTMLElement} parent
* @param {!shaka.ui.Controls} controls
*/
constructor(parent, controls) {
super(parent, controls);
/** @private {!shaka.extern.UIConfiguration} */
this.config_ = this.controls.getConfig();
/** @private {HTMLElement} */
this.controlsContainer_ = this.controls.getControlsContainer();
/** @private {HTMLElement } */
this.videoContainer_ = this.controls.getVideoContainer();
/** @private {!Array<shaka.extern.IUIElement>} */
this.children_ = [];
this.addOverflowMenuButton_();
this.addOverflowMenu_();
this.createChildren_();
this.eventManager.listenMulti(
this.localization,
[
shaka.ui.Localization.LOCALE_UPDATED,
shaka.ui.Localization.LOCALE_CHANGED,
], () => {
this.updateAriaLabel_();
});
this.eventManager.listen(
this.adManager, shaka.ads.Utils.AD_STARTED, () => {
if (this.ad && this.ad.isLinear()) {
shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
}
});
this.eventManager.listen(
this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
shaka.ui.Utils.setDisplay(this.overflowMenuButton_, true);
});
this.eventManager.listen(this.overflowMenuButton_, 'click', () => {
if (!this.controls.isOpaque()) {
return;
}
this.onOverflowMenuButtonClick_();
});
this.updateAriaLabel_();
if (this.ad && this.ad.isLinear()) {
// There was already an ad.
shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
}
/** @private {ResizeObserver} */
this.resizeObserver_ = null;
const resize = () => this.adjustCustomStyle_();
// Use ResizeObserver if available, fallback to window resize event
if (window.ResizeObserver) {
this.resizeObserver_ = new ResizeObserver(resize);
this.resizeObserver_.observe(this.controls.getVideoContainer());
} else {
// Fallback for older browsers
this.eventManager.listen(window, 'resize', resize);
}
}
/** @override */
release() {
this.controlsContainer_ = null;
for (const element of this.children_) {
element.release();
}
this.children_ = [];
if (this.resizeObserver_) {
this.resizeObserver_.disconnect();
this.resizeObserver_ = null;
}
super.release();
}
/**
* @param {string} name
* @param {!shaka.extern.IUIElement.Factory} factory
* @param {boolean=} registerInContext
* @export
*/
static registerElement(name, factory, registerInContext = true) {
shaka.ui.OverflowMenu.elementNamesToFactories_.set(name, factory);
if (registerInContext) {
shaka.ui.ContextMenu.registerElement(name, factory);
}
}
/**
* @private
*/
addOverflowMenu_() {
/** @private {!HTMLElement} */
this.overflowMenu_ = shaka.util.Dom.createHTMLElement('div');
this.overflowMenu_.classList.add('shaka-overflow-menu');
this.overflowMenu_.classList.add('shaka-no-propagation');
this.overflowMenu_.classList.add('shaka-show-controls-on-mouse-over');
this.overflowMenu_.classList.add('shaka-hidden');
this.controlsContainer_.appendChild(this.overflowMenu_);
}
/**
* @private
*/
addOverflowMenuButton_() {
/** @private {!HTMLButtonElement} */
this.overflowMenuButton_ = shaka.util.Dom.createButton();
this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
this.overflowMenuButton_.classList.add('shaka-no-propagation');
this.overflowMenuButton_.classList.add('shaka-tooltip');
new shaka.ui.Icon(this.overflowMenuButton_).use(
shaka.ui.Enums.MaterialDesignSVGIcons['OPEN_OVERFLOW']);
const markEl = shaka.util.Dom.createHTMLElement('span');
markEl.classList.add('shaka-overflow-quality-mark');
markEl.style.display = 'none';
this.overflowMenuButton_.appendChild(markEl);
this.parent.appendChild(this.overflowMenuButton_);
}
/**
* @private
*/
createChildren_() {
for (const name of this.config_.overflowMenuButtons) {
if (shaka.ui.OverflowMenu.elementNamesToFactories_.get(name)) {
const factory =
shaka.ui.OverflowMenu.elementNamesToFactories_.get(name);
goog.asserts.assert(this.controls, 'Controls should not be null!');
this.children_.push(factory.create(this.overflowMenu_, this.controls));
} else {
shaka.log.alwaysWarn('Unrecognized overflow menu element requested:',
name);
}
}
}
/** @private */
onOverflowMenuButtonClick_() {
this.controls.hideContextMenus();
if (this.controls.anySettingsMenusAreOpen()) {
this.controls.hideSettingsMenus();
} else {
// Force to close any submenu.
this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuclose'));
shaka.ui.Utils.setDisplay(this.overflowMenu_, true);
this.controls.computeOpacity();
// If overflow menu has currently visible buttons, focus on the
// first one, when the menu opens.
const isDisplayed =
(element) => element.classList.contains('shaka-hidden') == false;
const Iterables = shaka.util.Iterables;
if (Iterables.some(this.overflowMenu_.childNodes, isDisplayed)) {
// Focus on the first visible child of the overflow menu
const visibleElements =
Iterables.filter(this.overflowMenu_.childNodes, isDisplayed);
/** @type {!HTMLElement} */ (visibleElements[0]).focus();
}
this.adjustCustomStyle_();
}
}
/**
* @private
*/
updateAriaLabel_() {
const LocIds = shaka.ui.Locales.Ids;
this.overflowMenuButton_.ariaLabel =
this.localization.resolve(LocIds.MORE_SETTINGS);
}
/**
* @private
*/
adjustCustomStyle_() {
// Compute max height
const rectMenu = this.overflowMenu_.getBoundingClientRect();
const styleMenu = window.getComputedStyle(this.overflowMenu_);
const paddingTop = parseFloat(styleMenu.paddingTop);
const paddingBottom = parseFloat(styleMenu.paddingBottom);
const rectContainer = this.videoContainer_.getBoundingClientRect();
const gap = 5;
const heightIntersection =
rectMenu.bottom - rectContainer.top - paddingTop - paddingBottom - gap;
this.overflowMenu_.style.maxHeight = heightIntersection + 'px';
if (this.config_.showMenusOnTheRight) {
this.overflowMenu_.style.right = '15px';
return;
}
// Compute horizontal position
const bottomControlsPos = this.controlsContainer_.getBoundingClientRect();
const overflowMenuButtonPos =
this.overflowMenuButton_.getBoundingClientRect();
const leftGap = overflowMenuButtonPos.left - bottomControlsPos.left;
const rightGap = bottomControlsPos.right - overflowMenuButtonPos.right;
const EDGE_PADDING = 15;
const MIN_GAP = 60;
// Overflow menu button is either placed to the left or center
if (leftGap < rightGap) {
const left = leftGap < MIN_GAP ?
EDGE_PADDING : Math.max(leftGap, EDGE_PADDING);
this.overflowMenu_.style.left = left + 'px';
this.overflowMenu_.style.right = 'auto';
} else {
const right = rightGap < MIN_GAP ?
EDGE_PADDING : Math.max(rightGap, EDGE_PADDING);
this.overflowMenu_.style.right = right + 'px';
this.overflowMenu_.style.left = 'auto';
}
}
};
/**
* @implements {shaka.extern.IUIElement.Factory}
* @final
*/
shaka.ui.OverflowMenu.Factory = class {
/** @override */
create(rootElement, controls) {
return new shaka.ui.OverflowMenu(rootElement, controls);
}
};
shaka.ui.Controls.registerElement(
'overflow_menu', new shaka.ui.OverflowMenu.Factory());
/** @private {!Map<string, !shaka.extern.IUIElement.Factory>} */
shaka.ui.OverflowMenu.elementNamesToFactories_ = new Map();