export default function SettingsContentItem(name, content, action) {
let active;
const contentItemElement = createElement(ContentItemTemplate(content));
const contentItemUI = new UI(contentItemElement);
contentItemUI.on('click tap enter', () => {
action();
});
const instance = {
activate() {
toggleClass(contentItemElement, 'jw-settings-item-active', true);
contentItemElement.setAttribute('aria-checked', 'true');
active = true;
},
deactivate() {
toggleClass(contentItemElement, 'jw-settings-item-active', false);
contentItemElement.setAttribute('aria-checked', 'false');
active = false;
},
element() {
return contentItemElement;
},
destroy() {
this.deactivate();
contentItemUI.destroy();
}
};
Object.defineProperty(instance, 'active', {
enumerable: true,
get: () => active
});
return instance;
}
function updateContainerStyles(width, height) {
const audioMode = isAudioMode(_model);
// Set timeslider flags
if (_.isNumber(width) && _.isNumber(height)) {
const breakpoint = getBreakpoint(width);
setBreakpoint(_playerElement, breakpoint);
const smallPlayer = breakpoint < 2;
toggleClass(_playerElement, 'jw-flag-small-player', smallPlayer);
toggleClass(_playerElement, 'jw-orientation-portrait', (height > width));
}
toggleClass(_playerElement, 'jw-flag-audio-player', audioMode);
_model.set('audioMode', audioMode);
}
function onAspectRatioChange(model, aspectratio) {
toggleClass(_playerElement, 'jw-flag-aspect-mode', !!aspectratio);
const aspectRatioContainer = _playerElement.querySelector('.jw-aspect');
style(aspectRatioContainer, {
paddingTop: aspectratio || null
});
}
tap: () => {
_this.trigger(DISPLAY_CLICK);
if (settingsMenuVisible()) {
_controls.settingsMenu.close();
}
const state = model.get('state');
if (controls &&
((state === STATE_IDLE || state === STATE_COMPLETE) ||
(model.get('instream') && state === STATE_PAUSED))) {
api.playToggle(reasonInteraction());
}
if (controls && state === STATE_PAUSED) {
// Toggle visibility of the controls when tapping the media
// Do not add mobile toggle "jw-flag-controls-hidden" in these cases
if (model.get('instream') || model.get('castActive') || (model.get('mediaType') === 'audio')) {
return;
}
toggleClass(_playerElement, 'jw-flag-controls-hidden');
_captionsRenderer.renderCues(true);
} else if (_controls) {
if (!_controls.showing) {
_controls.userActive();
} else {
_controls.userInactive();
}
}
},
function updateContainerStyles(width, height) {
// Set responsive player classes
if (isNumber(width) && isNumber(height)) {
const breakpoint = getBreakpoint(width);
setBreakpoint(_playerElement, breakpoint);
const smallPlayer = breakpoint < 2;
toggleClass(_playerElement, 'jw-flag-small-player', smallPlayer);
toggleClass(_playerElement, 'jw-orientation-portrait', (height > width));
}
// Only change audio player mode when controls are enabled
if (_model.get('controls')) {
const audioMode = isAudioMode(_model);
toggleClass(_playerElement, 'jw-flag-audio-player', audioMode);
_model.set('audioMode', audioMode);
}
}
const redraw = (opened) => {
if (opened && instance.dirty) {
replaceInnerHtml(textElement, instance.text);
instance.dirty = false;
}
instance.opened = opened;
toggleClass(tooltipElement, 'jw-open', opened);
};
function _toggleDOMFullscreen(playerElement, fullscreenState) {
toggleClass(playerElement, 'jw-flag-fullscreen', fullscreenState);
style(document.body, { overflowY: (fullscreenState) ? 'hidden' : '' });
if (fullscreenState && _controls) {
// When going into fullscreen, we want the control bar to fade after a few seconds
_controls.userActive();
}
_resizeMedia();
_responsiveListener();
}
function _onMediaTypeChange(model, val) {
const isAudioFile = (val === 'audio');
const provider = model.get('provider');
toggleClass(_playerElement, 'jw-flag-media-audio', isAudioFile);
const isFlash = (provider && provider.name.indexOf('flash') === 0);
const element = (isAudioFile && !isFlash) ? _videoLayer : _videoLayer.nextSibling;
// Put the preview element before the media element in order to display browser captions
// otherwise keep it on top of the media element to display captions with the captions renderer
_playerElement.insertBefore(_preview.el, element);
}
function _errorHandler(model, evt) {
if (!evt) {
_title.playlistItem(model, model.get('playlistItem'));
return;
}
const errorContainer = ErrorContainer(model, evt.message);
if (ErrorContainer.cloneIcon) {
errorContainer.querySelector('.jw-icon').appendChild(ErrorContainer.cloneIcon('error'));
}
_title.hide();
_playerElement.appendChild(errorContainer.firstChild);
toggleClass(_playerElement, 'jw-flag-audio-player', !!model.get('audioMode'));
}
function onFlashBlockedChange(model, isBlocked) {
toggleClass(_playerElement, 'jw-flag-flash-blocked', isBlocked);
}
_model.on('change:playRejected', function (model, val) {
toggleClass(_playerElement, 'jw-flag-play-rejected', val);
});
_model.on('change:scrubbing', function (model, val) {
toggleClass(_playerElement, 'jw-flag-dragging', val);
});
closeSlider(evt) {
super.closeTooltip(evt);
toggleClass(this.horizontalContainer, this.openClass, false);
this.horizontalContainer.blur();
}
export default function SettingsSubmenu(name, categoryButton, isDefault) {
let active;
let contentItems = [];
const submenuElement = createElement(SubmenuTemplate(name));
const categoryButtonElement = categoryButton.element();
categoryButtonElement.setAttribute('name', name);
categoryButtonElement.className += ' jw-submenu-' + name;
categoryButton.show();
// return focus to topbar element when tabbing after the first or last item
const onFocus = function(evt) {
const focus =
categoryButtonElement &&
evt.keyCode === 9 && (
evt.srcElement === contentItems[0].element() && evt.shiftKey ||
evt.srcElement === contentItems[contentItems.length - 1].element() && !evt.shiftKey
);
if (focus) {
categoryButtonElement.focus();
}
};
const instance = {
addContent(items) {
if (!items) {
return;
}
items.forEach(item => {
submenuElement.appendChild(item.element());
});
contentItems = items;
contentItems[0].element().addEventListener('keydown', onFocus);
contentItems[contentItems.length - 1].element().addEventListener('keydown', onFocus);
},
replaceContent(items) {
instance.removeContent();
this.addContent(items);
},
removeContent() {
contentItems[0].element().removeEventListener('keydown', onFocus);
contentItems[contentItems.length - 1].element().removeEventListener('keydown', onFocus);
emptyElement(submenuElement);
contentItems = [];
},
activate() {
toggleClass(submenuElement, 'jw-settings-submenu-active', true);
submenuElement.setAttribute('aria-expanded', 'true');
categoryButtonElement.setAttribute('aria-checked', 'true');
active = true;
},
deactivate() {
toggleClass(submenuElement, 'jw-settings-submenu-active', false);
submenuElement.setAttribute('aria-expanded', 'false');
categoryButtonElement.setAttribute('aria-checked', 'false');
active = false;
},
activateItem(itemOrdinal = 0) {
const item = contentItems[itemOrdinal];
if (!item || item.active) {
return;
}
deactivateAllItems(contentItems);
item.activate();
},
element() {
return submenuElement;
},
destroy() {
if (!contentItems) {
return;
}
contentItems.forEach(item => {
item.destroy();
});
this.removeContent();
}
};
Object.defineProperties(instance,
{
name: {
enumerable: true,
get: () => name
},
active: {
enumerable: true,
get: () => active
},
categoryButtonElement: {
enumerable: true,
get: () => categoryButtonElement
},
isDefault: {
enumerable: true,
get: () => isDefault
}
}
);
return instance;
}
function _setLiveMode(model, streamType) {
const live = (streamType === 'LIVE');
toggleClass(_playerElement, 'jw-flag-live', live);
}
_model.on('change:hideAdsControls', function (model, val) {
toggleClass(_playerElement, 'jw-flag-ads-hide-controls', val);
});
openSlider(evt) {
super.openTooltip(evt);
toggleClass(this.horizontalContainer, this.openClass, true);
}