cloudinary-video-player
Version:
Cloudinary Video Player
323 lines (313 loc) • 9.96 kB
JavaScript
import { _ as _vjs } from './_videojs-proxy.js';
import { c as componentUtils } from './index2.js';
import './_commonjsHelpers.js';
import './video-player.const.js';
import './cloudinary-config-from-options.js';
import './cloudinary-url-prefix.js';
const ClickableComponent$1 = _vjs.getComponent('ClickableComponent');
class RecommendationsOverlayItem extends ClickableComponent$1 {
setItem(item) {
const {
action,
source
} = item;
this.source = source;
const info = source.info();
this.setTitle(info.title || source.publicId());
this.setPoster(this.source.poster().url({
transformation: {
aspect_ratio: '16:9',
crop: 'pad',
background: 'black'
}
}));
this.setAction(action);
}
setTitle(text) {
this.title.innerText = text;
}
setAction(action) {
this.action = action;
}
handleClick() {
super.handleClick();
this.player().trigger('recommendationshide');
this.action();
}
}
// support VJS5 & VJS6 at the same time
const dom$1 = _vjs.dom || _vjs;
class RecommendationsOverlayPrimaryItem extends RecommendationsOverlayItem {
setItem(item) {
super.setItem(item);
const info = this.source.info();
this.setTitle(info.title);
this.setSubtitle(info.subtitle);
if (info.description) {
const descLength = 300;
const description = info.description.length > descLength ? info.description.substring(0, descLength) + '...' : info.description;
this.setDescription(description);
}
}
setPoster(url) {
this.poster.style.backgroundImage = `url('${url}')`;
}
setTitle(text) {
componentUtils.setText(this.title, text);
this.setAriaCheck(this.title, !!text);
}
setSubtitle(text) {
componentUtils.setText(this.subtitle, text);
this.setAriaCheck(this.subtitle, !!text);
}
setDescription(text) {
componentUtils.setText(this.description, text);
this.setAriaCheck(this.description, !!text);
}
setAriaCheck(element) {
let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (active) {
element.removeAttribute('aria-hidden');
} else {
element.setAttribute('aria-hidden', 'true');
}
}
clearItem() {
this.setTitle('');
this.setSubtitle('');
this.setDescription('');
this.poster.style.backgroundImage = null;
}
createEl() {
const el = super.createEl('div', {
className: 'vjs-recommendations-overlay-item vjs-recommendations-overlay-item-primary'
});
this.poster = dom$1.createEl('div', {
className: 'vjs-recommendations-overlay-item-primary-image'
});
this.title = dom$1.createEl('h2', {
ariaLabel: 'Recmmendation Title'
});
this.setAriaCheck(this.title, false);
this.title.innerHTML = '';
this.subtitle = dom$1.createEl('h3', {
ariaLabel: 'Recmmendation Subtitle'
});
this.setAriaCheck(this.subtitle, false);
this.subtitle.innerHTML = '';
this.description = dom$1.createEl('p');
this.setAriaCheck(this.description, false);
this.description.innerHTML = '';
this.content = dom$1.createEl('div', {
className: 'vjs-recommendations-overlay-item-info vjs-recommendations-overlay-item-primary-content'
});
this.content.appendChild(this.title);
this.content.appendChild(this.subtitle);
this.content.appendChild(this.description);
el.appendChild(this.poster);
el.appendChild(this.content);
return el;
}
}
// support VJS5 & VJS6 at the same time
const dom = _vjs.dom || _vjs;
class RecommendationsOverlaySecondaryItem extends RecommendationsOverlayItem {
setItem(item) {
super.setItem(item);
this.setDuration('');
}
setPoster(url) {
this.el().style.backgroundImage = `url('${url}')`;
}
setDuration(text) {
this.duration.innerText = text;
}
createEl() {
const el = super.createEl('div', {
className: 'vjs-recommendations-overlay-item vjs-recommendations-overlay-item-secondary'
});
this.title = dom.createEl('span', {
className: 'vjs-recommendations-overlay-item-secondary-title'
});
this.title.innerHTML = '';
this.duration = dom.createEl('span', {
className: 'vjs-recommendations-overlay-item-secondary-duration'
});
this.duration.innerHTML = '';
const caption = dom.createEl('div', {
className: 'vjs-recommendations-overlay-item-info'
});
caption.appendChild(this.title);
caption.appendChild(this.duration);
el.appendChild(caption);
return el;
}
handleClick() {
super.handleClick();
this.action();
}
}
const Component$2 = _vjs.getComponent('Component');
class RecommendationsOverlaySecondaryItemsContainer extends Component$2 {
setItems() {
for (var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++) {
items[_key] = arguments[_key];
}
this.clearItems();
if (!items) {
return;
}
items.forEach(item => {
const component = new RecommendationsOverlaySecondaryItem(this.player());
component.setItem(item);
this.addChild(component);
});
}
clearItems() {
this.children().forEach(() => {
this.removeChild(this.children()[0]);
});
}
createEl() {
return super.createEl('div', {
className: 'vjs-recommendations-overlay-item-secondary-container'
});
}
}
const Component$1 = _vjs.getComponent('Component');
class RecommendationsOverlayContent extends Component$1 {
constructor(player) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
super(player, ...args);
this._content = new AspectRatioContent(player);
this.addChild(this._content);
}
setItems(primary) {
for (var _len2 = arguments.length, secondary = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
secondary[_key2 - 1] = arguments[_key2];
}
this._content.setItems(primary, ...secondary);
}
clearItems() {
this._content._primary.clearItem();
this._content._secondaryContainer.clearItems();
}
createEl() {
return super.createEl('div', {
className: 'vjs-recommendations-overlay-content'
});
}
}
class AspectRatioContent extends Component$1 {
constructor(player) {
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
super(player, ...args);
this._primary = new RecommendationsOverlayPrimaryItem(player);
this._secondaryContainer = new RecommendationsOverlaySecondaryItemsContainer(player);
this.addChild(this._primary);
this.addChild(this._secondaryContainer);
}
setItems(primary) {
this._primary.setItem(primary);
for (var _len4 = arguments.length, secondary = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
secondary[_key4 - 1] = arguments[_key4];
}
this._secondaryContainer.setItems(...secondary);
}
createEl() {
return super.createEl('div', {
className: 'aspect-ratio-content'
});
}
}
const ClickableComponent = _vjs.getComponent('ClickableComponent');
class RecommendationOverlayHideButton extends ClickableComponent {
createEl() {
return super.createEl('span', {
className: 'vjs-recommendations-overlay-hide vjs-icon-close'
});
}
handleClick() {
this.options_.clickHandler();
}
}
const MAXIMUM_ITEMS = 4;
const Component = _vjs.getComponent('Component');
// TODO: Use Video.js's ModalDialog instead. It handles clicking block logic.
class RecommendationsOverlay extends Component {
constructor(player, options) {
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
args[_key - 2] = arguments[_key];
}
super(player, ...args);
this._content = new RecommendationsOverlayContent(player);
this.addChild(this._content);
this.addChild(new RecommendationOverlayHideButton(player, {
clickHandler: () => {
this.close();
}
}, ...args));
this.setEvents(player);
this.doNotOpen = false;
}
setEvents(player) {
this.on(player, 'recommendationschanged', (_, eventData) => {
this.setItems(...eventData.items);
});
this.on(player, 'recommendationsnoshow', this.setDoNotOpen);
this.on(player, 'recommendationsshow', this.open);
this.on(player, 'recommendationshide', this.close);
this.on(player, 'cldsourcechanged', () => {
this.clearItems();
this.close();
});
}
setDoNotOpen() {
this.doNotOpen = true;
}
open() {
if (!this.doNotOpen) {
// Only show controls on close if they were visible from the first place
this._showControlsOnClose = this.player().controls();
this.player().controls(false);
this.el().style.visibility = 'visible';
}
}
clearItems() {
this._content.clearItems();
}
close() {
this.el().style.visibility = 'hidden';
if (this._showControlsOnClose) {
this.player().controls(true);
}
}
createEl() {
const recommendationsOverlayClass = 'vjs-recommendations-overlay';
const el = super.createEl('div', {
className: recommendationsOverlayClass
});
_vjs.dom.addClass(el, recommendationsOverlayClass);
return el;
}
setItems(primary) {
for (var _len2 = arguments.length, secondary = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
secondary[_key2 - 1] = arguments[_key2];
}
this.doNotOpen = false;
secondary = secondary.slice(0, MAXIMUM_ITEMS - 1);
this._content.setItems(primary, ...secondary);
}
handleClick() {
this.stopPropagation();
}
dispose() {
super.dispose();
}
}
_vjs.registerComponent('recommendationsOverlay', RecommendationsOverlay);
export { RecommendationsOverlay as default };