mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-12-09 21:42:31 -05:00
Frontent dev env (#247)
* Added frontend development files/environment * More items-categories related removals * Improvements in pages templates (inc. static pages) * Improvements in video player * Added empty home page message + cta * Updates in media, playlist and management pages * Improvements in material icons font loading * Replaced media & playlists links in frontend dev-env * frontend package version update * chnaged frontend dev url port * static files update * Changed default position of theme switcher * enabled frontend docker container
This commit is contained in:
Yiannis Stergiou
GitHub
3041
frontend/packages/vjs-plugin/src/MediaCmsVjsPlugin.js
Normal file
3041
frontend/packages/vjs-plugin/src/MediaCmsVjsPlugin.js
Normal file
File diff suppressed because it is too large
Load Diff
119
frontend/packages/vjs-plugin/src/inc/components.js
Executable file
119
frontend/packages/vjs-plugin/src/inc/components.js
Executable file
@@ -0,0 +1,119 @@
|
||||
export const videojsComponent = videojs.getComponent('Component');
|
||||
export const videojsClickableComponent = videojs.getComponent('ClickableComponent');
|
||||
export const videojsComponentButton = videojs.getComponent('Button');
|
||||
|
||||
export const __MediaCMSComponent__ = videojs.extend(videojsComponent, {
|
||||
constructor() {
|
||||
videojsComponent.apply(this, arguments);
|
||||
this.setAttribute('class', this.buildCSSClass());
|
||||
},
|
||||
buildCSSClass() {
|
||||
return '';
|
||||
},
|
||||
});
|
||||
|
||||
export const __MediaCMSButtonClickableComponent__ = videojs.extend(videojsClickableComponent, {
|
||||
buildCSSClass() {
|
||||
return '';
|
||||
},
|
||||
});
|
||||
|
||||
export const __SettingsPanelComponent__ = composeAndExtendCustomComp( 'vjs-settings-panel' );
|
||||
export const __SettingsPanelInnerComponent__ = composeAndExtendCustomComp( 'vjs-settings-panel-inner' );
|
||||
export const __SettingsPanelTitleComponent__ = composeAndExtendCustomComp( 'vjs-setting-panel-title');
|
||||
export const __SettingsMenuComponent__ = composeAndExtendCustomComp( 'vjs-settings-menu' );
|
||||
export const __SettingsMenuItemComponent__ = videojsComposeAndExtendCustomComp( __MediaCMSButtonClickableComponent__, 'vjs-settings-menu-item' );
|
||||
export const __SettingsMenuItemLabelComponent__ = composeAndExtendCustomComp( 'vjs-setting-menu-item-label' );
|
||||
export const __SettingsMenuItemContentComponent__ = composeAndExtendCustomComp( 'vjs-setting-menu-item-content' );
|
||||
|
||||
function composeCustomCompMethods(ret, extnd, innerHtml, extraCSSClass, htmlAttr){
|
||||
|
||||
var innerHtmlIsHTMLElement = !! innerHtml && innerHtml.nodeType === 1;
|
||||
|
||||
if( ! innerHtmlIsHTMLElement ){
|
||||
switch( typeof innerHtml ){
|
||||
case 'string':
|
||||
innerHtml = innerHtml.trim();
|
||||
innerHtml = '' === innerHtml ? null : innerHtml;
|
||||
break;
|
||||
case 'number':
|
||||
innerHtml = innerHtml.toString();
|
||||
break;
|
||||
default:
|
||||
innerHtml = null;
|
||||
}
|
||||
}
|
||||
|
||||
switch( typeof extraCSSClass ){
|
||||
case 'string':
|
||||
extraCSSClass = extraCSSClass.trim();
|
||||
extraCSSClass = '' === extraCSSClass ? null : extraCSSClass;
|
||||
break;
|
||||
default:
|
||||
extraCSSClass = null;
|
||||
}
|
||||
|
||||
if( ! htmlAttr || ! Object.keys( htmlAttr ).length ){
|
||||
htmlAttr = null;
|
||||
}
|
||||
|
||||
if( innerHtml || htmlAttr ){
|
||||
ret.constructor = function(){
|
||||
|
||||
extnd.apply(this, arguments);
|
||||
|
||||
let k;
|
||||
|
||||
if( innerHtml ){
|
||||
|
||||
if( innerHtmlIsHTMLElement ){
|
||||
this.el_.appendChild( innerHtml );
|
||||
}
|
||||
else{
|
||||
this.el_.innerHTML = innerHtml;
|
||||
}
|
||||
}
|
||||
|
||||
if( htmlAttr ){
|
||||
for(k in htmlAttr){
|
||||
if( htmlAttr.hasOwnProperty(k) ){
|
||||
this.el_.setAttribute( k, htmlAttr[k] );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if( extraCSSClass ){
|
||||
ret.buildCSSClass = function(){
|
||||
return extraCSSClass + ' ' + extnd.prototype.buildCSSClass.call(this);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function videosjsExtendCustomComp( parent, methods ){
|
||||
return videojs.extend( parent, methods );
|
||||
}
|
||||
|
||||
function videosjsFormatExtendObj( parent, methods ){
|
||||
return {
|
||||
extend: parent,
|
||||
methods: methods
|
||||
};
|
||||
}
|
||||
|
||||
export function videojsComposeAndExtendCustomComp( extnd, extraCSSClass, innerHtml, htmlAttr ){
|
||||
const ret = {};
|
||||
composeCustomCompMethods(ret, extnd, innerHtml, extraCSSClass, htmlAttr);
|
||||
return videosjsExtendCustomComp( extnd, ret );
|
||||
}
|
||||
|
||||
export function composeCustomComp( extnd, extraCSSClass, innerHtml, htmlAttr ){
|
||||
const ret = {};
|
||||
composeCustomCompMethods(ret, extnd, innerHtml, extraCSSClass, htmlAttr);
|
||||
return videosjsFormatExtendObj( extnd, ret );
|
||||
}
|
||||
|
||||
export function composeAndExtendCustomComp( extraCSSClass, innerHtml, htmlAttr ){
|
||||
return videojsComposeAndExtendCustomComp( __MediaCMSComponent__, extraCSSClass, innerHtml, htmlAttr );
|
||||
}
|
||||
797
frontend/packages/vjs-plugin/src/inc/functions-helpers.js
Executable file
797
frontend/packages/vjs-plugin/src/inc/functions-helpers.js
Executable file
@@ -0,0 +1,797 @@
|
||||
import {
|
||||
composeCustomComp,
|
||||
videojsComponent,
|
||||
videojsComponentButton,
|
||||
__MediaCMSComponent__,
|
||||
__MediaCMSButtonClickableComponent__,
|
||||
__SettingsPanelComponent__,
|
||||
__SettingsPanelInnerComponent__,
|
||||
__SettingsPanelTitleComponent__,
|
||||
__SettingsMenuComponent__,
|
||||
__SettingsMenuItemComponent__,
|
||||
__SettingsMenuItemLabelComponent__,
|
||||
__SettingsMenuItemContentComponent__
|
||||
} from './components';
|
||||
|
||||
export function generateControlBarComponents(pluginInstanceRef) {
|
||||
|
||||
function childrenGen( parentKey, child, allComps, parentsConn, level ){
|
||||
|
||||
var k, addedChild = false;
|
||||
|
||||
allComps[level]= void 0 === allComps[level] ? [] : allComps[level];
|
||||
|
||||
for( k in child ){
|
||||
|
||||
if( child.hasOwnProperty(k) ){
|
||||
|
||||
if( child[k] && child[k].children ){
|
||||
|
||||
if( childrenGen( k, child[k].children, allComps, parentsConn, level + 1 ) ){
|
||||
addedChild = true;
|
||||
allComps[level].push(k);
|
||||
parentsConn[k] = parentKey;
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
||||
addedChild = true;
|
||||
allComps[level].push(k);
|
||||
parentsConn[k] = parentKey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return addedChild;
|
||||
}
|
||||
|
||||
function gen(parent, ControlBar) {
|
||||
const componentsToAppend = [], parentsConnections = {}, appendedComponents = {};
|
||||
let i, j, prnt, customCompKey, customCompName;
|
||||
if( parent.children ){
|
||||
|
||||
childrenGen( 'controlBar', parent.children, componentsToAppend, parentsConnections, 0 );
|
||||
|
||||
/*console.log( componentsToAppend );
|
||||
console.log( parentsConnections );*/
|
||||
|
||||
i = 0;
|
||||
while(i<componentsToAppend.length){
|
||||
j = 0;
|
||||
while(j < componentsToAppend[i].length){
|
||||
prnt = 0 === i ? pluginInstanceRef.player.getChild( parentsConnections[ componentsToAppend[i][j] ] ) : appendedComponents[ parentsConnections[ componentsToAppend[i][j] ] ];
|
||||
prnt.addChild(componentsToAppend[i][j], {});
|
||||
appendedComponents[ componentsToAppend[i][j] ] = prnt.getChild( componentsToAppend[i][j] );
|
||||
j++;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return gen;
|
||||
}
|
||||
|
||||
export function generateTouchControlComponents(pluginInstanceRef, options) {
|
||||
|
||||
if( options.enabledTouchControls ){
|
||||
|
||||
let TouchControls,
|
||||
TouchControlsInner,
|
||||
TouchPrevious,
|
||||
TouchPlay,
|
||||
TouchNext;
|
||||
|
||||
const previousButton = composeCustomComp( videojsComponentButton, 'vjs-icon-previous-item' );
|
||||
const playButton = composeCustomComp( videojsComponentButton, 'vjs-icon-play' );
|
||||
const nextButton = composeCustomComp( videojsComponentButton, 'vjs-icon-next-item' );
|
||||
|
||||
playButton.methods.handleClick = function(ev){
|
||||
if( this.player_.paused() ){
|
||||
this.player_.play();
|
||||
setTimeout( (function(){
|
||||
this.player_.userActive(false);
|
||||
}).bind(this), 250 );
|
||||
}
|
||||
else{
|
||||
this.player_.pause();
|
||||
}
|
||||
};
|
||||
|
||||
if( options.controlBar.next ){ nextButton.methods.handleClick = function(ev){ this.player_.trigger('clicked_next_button'); }; }
|
||||
if( options.controlBar.previous ){ previousButton.methods.handleClick = function(ev){ this.player_.trigger('clicked_previous_button'); }; }
|
||||
|
||||
videojs.registerComponent( 'TouchControls', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-controls' ).methods ) );
|
||||
videojs.registerComponent( 'TouchControlsInner', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__ ).methods ) );
|
||||
|
||||
videojs.registerComponent( 'TouchPreviousButton', videojs.extend( previousButton.extend , previousButton.methods) );
|
||||
videojs.registerComponent( 'TouchPlayButton', videojs.extend( playButton.extend , playButton.methods) );
|
||||
videojs.registerComponent( 'TouchNextButton', videojs.extend( nextButton.extend , nextButton.methods) );
|
||||
|
||||
videojs.registerComponent( 'TouchPlay', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-play-button' ).methods ) );
|
||||
|
||||
if( options.controlBar.next || options.controlBar.previous ){
|
||||
videojs.registerComponent( 'TouchPrevious', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-previous-button' + ( ! options.controlBar.previous ? ' vjs-touch-disabled-button' : '' ) ).methods ) );
|
||||
videojs.registerComponent( 'TouchNext', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-next-button' + ( ! options.controlBar.next ? ' vjs-touch-disabled-button' : '' ) ).methods ) );
|
||||
}
|
||||
else{
|
||||
videojs.registerComponent( 'TouchPrevious', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-previous-button' + ( ! options.controlBar.previous ? ' vjs-touch-hidden-button' : '' ) ).methods ) );
|
||||
videojs.registerComponent( 'TouchNext', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-touch-next-button' + ( ! options.controlBar.next ? ' vjs-touch-hidden-button' : '' ) ).methods ) );
|
||||
}
|
||||
|
||||
pluginInstanceRef.player.addChild( 'TouchControls' );
|
||||
|
||||
TouchControls = pluginInstanceRef.player.getChild('TouchControls');
|
||||
|
||||
TouchControls.addChild( 'TouchControlsInner' );
|
||||
|
||||
TouchControlsInner = TouchControls.getChild('TouchControlsInner');
|
||||
|
||||
TouchControlsInner.addChild( 'TouchPrevious' );
|
||||
TouchControlsInner.addChild( 'TouchPlay' );
|
||||
TouchControlsInner.addChild( 'TouchNext' );
|
||||
|
||||
TouchPrevious = TouchControlsInner.getChild( 'TouchPrevious' );
|
||||
TouchPlay = TouchControlsInner.getChild( 'TouchPlay' );
|
||||
TouchNext = TouchControlsInner.getChild( 'TouchNext' );
|
||||
|
||||
TouchPrevious.addChild( 'TouchPreviousButton' );
|
||||
TouchPlay.addChild( 'TouchPlayButton' );
|
||||
TouchNext.addChild( 'TouchNextButton' );
|
||||
}
|
||||
}
|
||||
|
||||
export function generateCornerLayersComponents(pluginInstanceRef, options) {
|
||||
|
||||
const layers = {};
|
||||
const compPrefix = 'CornerLayer_';
|
||||
let k;
|
||||
|
||||
if( options.cornerLayers.topLeft ){
|
||||
layers.topLeft = {
|
||||
className: 'vjs-corner-layer vjs-corner-top-left',
|
||||
parent: pluginInstanceRef.player,
|
||||
content: options.cornerLayers.topLeft,
|
||||
};
|
||||
}
|
||||
|
||||
if( options.cornerLayers.topRight ){
|
||||
layers.topRight = {
|
||||
className: 'vjs-corner-layer vjs-corner-top-right',
|
||||
parent: pluginInstanceRef.player,
|
||||
content: options.cornerLayers.topRight,
|
||||
};
|
||||
}
|
||||
|
||||
if( options.cornerLayers.bottomLeft ){
|
||||
layers.bottomLeft = {
|
||||
className: 'vjs-corner-layer vjs-corner-bottom-left',
|
||||
parent: pluginInstanceRef.player,
|
||||
content: options.cornerLayers.bottomLeft,
|
||||
};
|
||||
}
|
||||
|
||||
if( options.cornerLayers.bottomRight ){
|
||||
layers.bottomRight = {
|
||||
className: 'vjs-corner-layer vjs-corner-bottom-right',
|
||||
parent: pluginInstanceRef.player,
|
||||
content: options.cornerLayers.bottomRight,
|
||||
};
|
||||
}
|
||||
|
||||
for(k in layers){
|
||||
if( layers.hasOwnProperty(k) ){
|
||||
if( layers[k].content ){
|
||||
|
||||
videojs.registerComponent( compPrefix + k, videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, layers[k].className, layers[k].content ).methods ) );
|
||||
|
||||
layers[k].parent.addChild( compPrefix + k );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function generateActionsAnimationsComponents(pluginInstanceRef){
|
||||
videojs.registerComponent( 'ActionsAnimations', videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-actions-anim', '<span></span>' ).methods ) );
|
||||
pluginInstanceRef.player.addChild( 'ActionsAnimations' );
|
||||
}
|
||||
|
||||
export function generateLoadingSpinnerComponent(pluginInstanceRef){
|
||||
|
||||
pluginInstanceRef.player.removeChild('LoadingSpinner');
|
||||
|
||||
videojs.registerComponent(
|
||||
'LoadingSpinner',
|
||||
videojs.extend(
|
||||
__MediaCMSComponent__ ,
|
||||
composeCustomComp(
|
||||
__MediaCMSComponent__,
|
||||
'vjs-loading-spinner',
|
||||
'<div class="spinner">\
|
||||
<div class="spinner-container">\
|
||||
<div class="spinner-rotator">\
|
||||
<div class="spinner-left"><div class="spinner-circle"></div></div>\
|
||||
<div class="spinner-right"><div class="spinner-circle"></div></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>'
|
||||
).methods
|
||||
)
|
||||
);
|
||||
|
||||
pluginInstanceRef.player.addChild( 'LoadingSpinner' );
|
||||
}
|
||||
|
||||
function initComponents(pluginInstanceRef, which, struct, args){
|
||||
let k;
|
||||
let tmp;
|
||||
switch(which){
|
||||
case 'bottomBackground':
|
||||
struct.bottomBackground = null;
|
||||
videojs.registerComponent("BottomBackground", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-bottom-bg' ).methods));
|
||||
break;
|
||||
case 'progressControl':
|
||||
struct.progressControl = null;
|
||||
break;
|
||||
case '__settings':
|
||||
|
||||
struct.settingsPanel = {
|
||||
children: {
|
||||
settingsPanelInner: {
|
||||
children: {
|
||||
settingsMenu: { children:{} },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
tmp = composeCustomComp( __SettingsPanelComponent__, 'vjs-settings-root');
|
||||
|
||||
tmp.methods.constructor = function() {
|
||||
|
||||
videojsComponent.apply(this, arguments);
|
||||
|
||||
this.setAttribute('class', this.buildCSSClass());
|
||||
|
||||
const that = this;
|
||||
|
||||
function onFocusout(ev){
|
||||
if (that.el_.contains(ev.relatedTarget)) {
|
||||
return;
|
||||
}
|
||||
that.player_.trigger('focusoutSettingsPanel');
|
||||
}
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['updatedSettingsPanelsVisibility'], function(){
|
||||
videojs.dom[ this.state.isOpenSettingsOptions ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-visible-panel' );
|
||||
});
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['openedSettingsPanel'], function( ev, openedFromKeyboard ){
|
||||
that.el_.setAttribute('tabindex', '-1');
|
||||
that.el_.addEventListener('focusout', onFocusout );
|
||||
if( !!openedFromKeyboard ){
|
||||
that.el_.querySelector('.vjs-settings-menu-item').focus();
|
||||
}
|
||||
else{
|
||||
that.el_.focus();
|
||||
}
|
||||
});
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['closedSettingsPanel'], function( ev, closedFromKeyboard ){
|
||||
that.el_.removeAttribute('tabindex');
|
||||
that.el_.removeEventListener('focusout', onFocusout );
|
||||
if( !!closedFromKeyboard ){
|
||||
that.el_.querySelector('.vjs-settings-menu-item').focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
videojs.registerComponent('SettingsPanel', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
videojs.registerComponent('SettingsPanelInner', videojs.extend( __SettingsPanelInnerComponent__, composeCustomComp( __SettingsPanelInnerComponent__ ).methods));
|
||||
|
||||
videojs.registerComponent('SettingsMenu', videojs.extend( __SettingsMenuComponent__, composeCustomComp( __SettingsMenuComponent__ ).methods));
|
||||
|
||||
if( args.enabledPlaybackSpeedPanel ){
|
||||
|
||||
struct.settingsPanel.children.settingsPanelInner.children.settingsMenu.children.selectedPlaybackSpeed = {
|
||||
children: {
|
||||
selectedPlaybackSpeedLabel: null,
|
||||
selectedPlaybackSpeedContent: null,
|
||||
}
|
||||
};
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemComponent__, 'vjs-selected-speed' );
|
||||
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger('openPlaybackSpeedOptions', ! ev.screenX && ! ev.screenY );
|
||||
};
|
||||
|
||||
videojs.registerComponent('SelectedPlaybackSpeed', videojs.extend( tmp.extend , tmp.methods));
|
||||
videojs.registerComponent('SelectedPlaybackSpeedLabel', videojs.extend( __SettingsMenuItemLabelComponent__, composeCustomComp( __SettingsMenuItemLabelComponent__, null, 'Playback speed' ).methods));
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, args.selectedPlaybackSpeed );
|
||||
|
||||
tmp.methods.constructor = function() {
|
||||
videojsComponent.apply(this, arguments);
|
||||
const that = this;
|
||||
that.el_.innerHTML = pluginInstanceRef.selectedPlaybackSpeedTitle();
|
||||
this.setAttribute('class', this.buildCSSClass());
|
||||
pluginInstanceRef.on(this.player_, ['updatedSelectedPlaybackSpeed'], function(){
|
||||
that.el_.innerHTML = this.selectedPlaybackSpeedTitle();
|
||||
});
|
||||
};
|
||||
|
||||
videojs.registerComponent('SelectedPlaybackSpeedContent', videojs.extend( tmp.extend , tmp.methods));
|
||||
}
|
||||
|
||||
if( args.enabledResolutionsPanel ){
|
||||
|
||||
struct.settingsPanel.children.settingsPanelInner.children.settingsMenu.children.selectedResolution = {
|
||||
children: {
|
||||
selectedResolutionLabel: null,
|
||||
selectedResolutionContent: null,
|
||||
}
|
||||
};
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemComponent__, 'vjs-selected-quality' );
|
||||
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger('openQualityOptions', ! ev.screenX && ! ev.screenY );
|
||||
};
|
||||
|
||||
videojs.registerComponent('SelectedResolution', videojs.extend( tmp.extend , tmp.methods));
|
||||
videojs.registerComponent('SelectedResolutionLabel', videojs.extend( __SettingsMenuItemLabelComponent__, composeCustomComp( __SettingsMenuItemLabelComponent__, null, 'Quality' ).methods));
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, args.selectedResolution );
|
||||
|
||||
tmp.methods.constructor = function() {
|
||||
videojsComponent.apply(this, arguments);
|
||||
const that = this;
|
||||
that.el_.innerHTML = args.selectedResolution;
|
||||
this.setAttribute('class', this.buildCSSClass());
|
||||
pluginInstanceRef.on(this.player_, ['updatedSelectedQuality'], function(){
|
||||
that.el_.innerHTML = this.selectedQualityTitle();
|
||||
});
|
||||
};
|
||||
|
||||
videojs.registerComponent('SelectedResolutionContent', videojs.extend( tmp.extend , tmp.methods));
|
||||
}
|
||||
|
||||
break;
|
||||
case '__resolution':
|
||||
|
||||
struct.resolutionsPanel = {
|
||||
children: {
|
||||
resolutionsPanelInner: {
|
||||
children: {
|
||||
resolutionsMenuTitle: {
|
||||
children: {
|
||||
resolutionsMenuBackButton: null
|
||||
}
|
||||
},
|
||||
resolutionsMenu: { children: {} }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
tmp = composeCustomComp( __SettingsPanelComponent__, 'vjs-resolutions-panel');
|
||||
|
||||
tmp.methods.constructor = function() {
|
||||
|
||||
videojsComponent.apply(this, arguments);
|
||||
|
||||
this.setAttribute('class', this.buildCSSClass());
|
||||
|
||||
const that = this;
|
||||
|
||||
function onFocusout(ev){
|
||||
if (that.el_.contains(ev.relatedTarget)) {
|
||||
return;
|
||||
}
|
||||
that.player_.trigger('focusoutResolutionsPanel');
|
||||
}
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['updatedSettingsPanelsVisibility'], function(){
|
||||
videojs.dom[ this.state.isOpenQualityOptions ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-visible-panel' );
|
||||
});
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['openedQualities'], function(ev, openedFromKeyboard){
|
||||
that.el_.setAttribute('tabindex', '-1');
|
||||
that.el_.addEventListener('focusout', onFocusout);
|
||||
if( !!openedFromKeyboard ){
|
||||
that.el_.querySelector('.vjs-setting-panel-title > *[role="button"]').focus();
|
||||
}
|
||||
else{
|
||||
that.el_.focus();
|
||||
}
|
||||
});
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['closedQualities'], function(ev, closedFromKeyboard){
|
||||
that.el_.removeAttribute('tabindex');
|
||||
that.el_.removeEventListener('focusout', onFocusout);
|
||||
if( !!closedFromKeyboard ){
|
||||
that.el_.querySelector('.vjs-settings-menu-item').focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
videojs.registerComponent('ResolutionsPanel', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
videojs.registerComponent('ResolutionsPanelInner', videojs.extend( __SettingsPanelInnerComponent__, composeCustomComp( __SettingsPanelInnerComponent__ ).methods));
|
||||
|
||||
videojs.registerComponent('ResolutionsMenu', videojs.extend( __SettingsMenuComponent__, composeCustomComp( __SettingsMenuComponent__ ).methods));
|
||||
|
||||
videojs.registerComponent('ResolutionsMenuTitle', videojs.extend( __SettingsPanelTitleComponent__ , composeCustomComp( __SettingsPanelTitleComponent__, 'vjs-settings-back' ).methods));
|
||||
|
||||
tmp = composeCustomComp( __MediaCMSButtonClickableComponent__, null, 'Quality' );
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger('closeQualityOptions', ! ev.screenX && ! ev.screenY );
|
||||
|
||||
};
|
||||
|
||||
videojs.registerComponent('ResolutionsMenuBackButton', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
const resolutionKeys = (function(){
|
||||
|
||||
let i;
|
||||
const ret = [];
|
||||
const keys = Object.keys( args.resolutions );
|
||||
const stringKeys = [];
|
||||
const numericKeys = [];
|
||||
|
||||
i = 0;
|
||||
while( i < keys.length ){
|
||||
|
||||
if( isNaN( 0 + keys[i] ) ){
|
||||
stringKeys.push( keys[i] );
|
||||
}
|
||||
else{
|
||||
numericKeys.push( [ parseFloat( keys[i] ), keys[i] ] );
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
|
||||
numericKeys.sort( (a, b) => b[0] - a[0] );
|
||||
|
||||
i = 0;
|
||||
while( i < numericKeys.length ){
|
||||
ret.push( numericKeys[i][1] );
|
||||
i += 1;
|
||||
}
|
||||
|
||||
i = 0;
|
||||
while( i < stringKeys.length ){
|
||||
ret.push( stringKeys[i] );
|
||||
i += 1;
|
||||
}
|
||||
|
||||
return ret;
|
||||
}());
|
||||
|
||||
let i = 0;
|
||||
while( i < resolutionKeys.length ){
|
||||
|
||||
k = resolutionKeys[i];
|
||||
|
||||
struct.resolutionsPanel.children.resolutionsPanelInner.children.resolutionsMenu.children[ 'resolutionOption_' + k ] = {
|
||||
children: {
|
||||
['resolutionOption_' + k + '_content'] : null
|
||||
}
|
||||
};
|
||||
|
||||
(function( key, title ){
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemComponent__, key.toString() === pluginInstanceRef.state.theSelectedQuality.toString() ? 'vjs-selected-menu-item' : null, null/*, { 'data-opt': key }*/ );
|
||||
|
||||
tmp.methods.constructor = function(){
|
||||
__SettingsMenuItemComponent__.apply(this, arguments);
|
||||
const that = this;
|
||||
this.qualityKey = key;
|
||||
this.setAttribute('data-opt', key);
|
||||
pluginInstanceRef.on(this.player_, ['updatedSelectedQuality'], function(){
|
||||
videojs.dom[ that.qualityKey === this.state.theSelectedQuality ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-selected-menu-item' );
|
||||
});
|
||||
};
|
||||
|
||||
tmp.methods.handleClick = function(){
|
||||
this.player_.trigger('selectedQuality', this.el_.getAttribute('data-opt'));
|
||||
};
|
||||
|
||||
videojs.registerComponent('ResolutionOption_' + key, videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, title );
|
||||
videojs.registerComponent('ResolutionOption_' + key + '_content', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
}( k, args.resolutions[k].title || k ));
|
||||
|
||||
i += 1;
|
||||
}
|
||||
|
||||
break;
|
||||
case '__playbackSpeed':
|
||||
|
||||
struct.playbackSpeedsPanel = {
|
||||
children: {
|
||||
playbackSpeedsPanelInner: {
|
||||
children: {
|
||||
playbackSpeedsMenuTitle: {
|
||||
children: {
|
||||
playbackSpeedsMenuBackButton: null
|
||||
}
|
||||
},
|
||||
playbackSpeedsMenu: { children: {} }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
tmp = composeCustomComp( __SettingsPanelComponent__, 'vjs-playback-speed-panel');
|
||||
|
||||
tmp.methods.constructor = function() {
|
||||
|
||||
videojsComponent.apply(this, arguments);
|
||||
|
||||
this.setAttribute('class', this.buildCSSClass());
|
||||
|
||||
const that = this;
|
||||
|
||||
function onFocusout(ev){
|
||||
if (that.el_.contains(ev.relatedTarget)) {
|
||||
return;
|
||||
}
|
||||
that.player_.trigger('focusoutPlaybackSpeedsPanel');
|
||||
}
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['updatedSettingsPanelsVisibility'], function(){
|
||||
videojs.dom[ this.state.isOpenPlaybackSpeedOptions ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-visible-panel' );
|
||||
});
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['openedPlaybackSpeeds'], function(ev, openedFromKeyboard){
|
||||
that.el_.setAttribute('tabindex', '-1');
|
||||
that.el_.addEventListener('focusout', onFocusout);
|
||||
if( !!openedFromKeyboard ){
|
||||
that.el_.querySelector('.vjs-setting-panel-title > *[role="button"]').focus();
|
||||
}
|
||||
else{
|
||||
that.el_.focus();
|
||||
}
|
||||
});
|
||||
|
||||
pluginInstanceRef.on(this.player_, ['closedPlaybackSpeeds'], function(ev, closedFromKeyboard){
|
||||
that.el_.removeAttribute('tabindex');
|
||||
that.el_.removeEventListener('focusout', onFocusout);
|
||||
if( !!closedFromKeyboard ){
|
||||
that.el_.querySelector('.vjs-settings-menu-item').focus();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
videojs.registerComponent('PlaybackSpeedsPanel', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
videojs.registerComponent('PlaybackSpeedsPanelInner', videojs.extend( __SettingsPanelInnerComponent__, composeCustomComp( __SettingsPanelInnerComponent__ ).methods));
|
||||
|
||||
videojs.registerComponent('PlaybackSpeedsMenu', videojs.extend( __SettingsMenuComponent__, composeCustomComp( __SettingsMenuComponent__ ).methods));
|
||||
|
||||
videojs.registerComponent('PlaybackSpeedsMenuTitle', videojs.extend( __SettingsPanelTitleComponent__ , composeCustomComp( __SettingsPanelTitleComponent__, 'vjs-settings-back' ).methods));
|
||||
|
||||
tmp = composeCustomComp( __MediaCMSButtonClickableComponent__, null, 'Playback speed' );
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger('closePlaybackSpeedOptions', ! ev.screenX && ! ev.screenY );
|
||||
|
||||
};
|
||||
|
||||
videojs.registerComponent('PlaybackSpeedsMenuBackButton', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
for(k in args.playbackSpeeds){
|
||||
|
||||
if( args.playbackSpeeds.hasOwnProperty(k) ){
|
||||
|
||||
struct.playbackSpeedsPanel.children.playbackSpeedsPanelInner.children.playbackSpeedsMenu.children[ 'playbackSpeedOption_' + args.playbackSpeeds[k].speed ] = {
|
||||
children: {
|
||||
['playbackSpeedOption_' + args.playbackSpeeds[k].speed + '_content'] : null
|
||||
}
|
||||
};
|
||||
|
||||
(function( key, title ){
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemComponent__, key.toString() === pluginInstanceRef.state.theSelectedPlaybackSpeed.toString() ? 'vjs-selected-menu-item' : null, null/*, { 'data-opt': key }*/ );
|
||||
|
||||
tmp.methods.constructor = function(){
|
||||
__SettingsMenuItemComponent__.apply(this, arguments);
|
||||
const that = this;
|
||||
this.playbackSpeedKey = key;
|
||||
this.setAttribute('data-opt', key);
|
||||
pluginInstanceRef.on(this.player_, ['updatedSelectedPlaybackSpeed'], function(){
|
||||
videojs.dom[ that.playbackSpeedKey === this.state.theSelectedPlaybackSpeed ? 'addClass' : 'removeClass' ]( that.el_, 'vjs-selected-menu-item' );
|
||||
});
|
||||
};
|
||||
|
||||
tmp.methods.handleClick = function(){
|
||||
this.player_.trigger('selectedPlaybackSpeed', this.el_.getAttribute('data-opt'));
|
||||
};
|
||||
|
||||
videojs.registerComponent('PlaybackSpeedOption_' + key, videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
tmp = composeCustomComp( __SettingsMenuItemContentComponent__, null, title );
|
||||
videojs.registerComponent('PlaybackSpeedOption_' + key + '_content', videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
}( args.playbackSpeeds[k].speed, args.playbackSpeeds[k].title || k ));
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
case '__leftControls':
|
||||
struct.leftControls = { children: {} };
|
||||
|
||||
if( args.options.controlBar.previous ){
|
||||
|
||||
tmp = composeCustomComp( videojsComponentButton, 'vjs-previous-button' );
|
||||
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger('clicked_previous_button');
|
||||
};
|
||||
|
||||
videojs.registerComponent("PreviousButton", videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
struct.leftControls.children.previousButton = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.play ){
|
||||
struct.leftControls.children.playToggle = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.next ){
|
||||
|
||||
tmp = composeCustomComp( videojsComponentButton, 'vjs-next-button' );
|
||||
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger('clicked_next_button');
|
||||
};
|
||||
|
||||
videojs.registerComponent("NextButton", videojs.extend( tmp.extend , tmp.methods));
|
||||
|
||||
struct.leftControls.children.nextButton = null;
|
||||
}
|
||||
|
||||
/*if( args.options.controlBar.previous ){
|
||||
|
||||
struct.leftControls.children.previous = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.next ){
|
||||
// videojs.registerComponent("Next", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-bottom-bg' ).methods));
|
||||
videojs.registerComponent("Next", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-bottom-bg' ).methods));
|
||||
|
||||
struct.leftControls.children.next = null;
|
||||
}*/
|
||||
|
||||
if( args.options.controlBar.volume ){
|
||||
struct.leftControls.children.volumePanel = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.time ){
|
||||
struct.leftControls.children.currentTimeDisplay = null;
|
||||
struct.leftControls.children.timeDivider = null;
|
||||
struct.leftControls.children.durationDisplay = null;
|
||||
}
|
||||
|
||||
/*console.log( struct.leftControls.children );*/
|
||||
|
||||
videojs.registerComponent("LeftControls", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-left-controls' ).methods));
|
||||
|
||||
break;
|
||||
case '__rightControls':
|
||||
struct.rightControls = { children: {} };
|
||||
|
||||
if( args.enabledSettingsPanel ){
|
||||
struct.rightControls.children.settingsToggle = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.theaterMode ){
|
||||
struct.rightControls.children.theaterModeToggle = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.pictureInPicture ){
|
||||
struct.rightControls.children.pictureInPictureToggle = null;
|
||||
}
|
||||
|
||||
if( args.options.controlBar.fullscreen ){
|
||||
struct.rightControls.children.fullscreenToggle = null;
|
||||
}
|
||||
|
||||
videojs.registerComponent("RightControls", videojs.extend( __MediaCMSComponent__ , composeCustomComp( __MediaCMSComponent__, 'vjs-right-controls' ).methods));
|
||||
|
||||
if( args.enabledSettingsPanel ){
|
||||
|
||||
tmp = composeCustomComp( videojsComponentButton, 'vjs-settings-control vjs-icon-cog' );
|
||||
|
||||
tmp.methods.handleClick = function(ev){
|
||||
this.player_.trigger( pluginInstanceRef.state.isOpenSettingsOptions ? 'closeSettingsPanel' : 'openSettingsPanel', ! ev.screenX && ! ev.screenY );
|
||||
};
|
||||
|
||||
videojs.registerComponent("SettingsToggle", videojs.extend( tmp.extend , tmp.methods));
|
||||
}
|
||||
|
||||
if( args.options.controlBar.theaterMode ){
|
||||
|
||||
tmp = composeCustomComp( videojsComponentButton, 'vjs-theater-mode-control' );
|
||||
|
||||
tmp.methods.handleClick = function(){
|
||||
this.player_.trigger('theatermodechange');
|
||||
this.updateControlText();
|
||||
};
|
||||
|
||||
tmp.methods.updateControlText = function(){
|
||||
this.controlText(this.player_.localize(pluginInstanceRef.isTheaterMode() ? 'Default mode' : 'Theater mode'));
|
||||
};
|
||||
|
||||
videojs.registerComponent("TheaterModeToggle", videojs.extend( tmp.extend , tmp.methods));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
export function controlBarComponentsStructs( pluginInstanceRef, options ){
|
||||
|
||||
let struct = {};
|
||||
|
||||
const enabledResolutionsPanel = void 0 !== options.resolutions && void 0 !== options.resolutions.options && !!Object.keys( options.resolutions.options ).length;
|
||||
const enabledPlaybackSpeedPanel = void 0 !== options.playbackSpeeds && void 0 !== options.playbackSpeeds.options && !!Object.keys( options.playbackSpeeds.options ).length;
|
||||
|
||||
const enabledSettingsPanel = enabledResolutionsPanel || enabledPlaybackSpeedPanel; // @note: At the moment the only setting option is video resolution.
|
||||
|
||||
if( options.controlBar.bottomBackground ){
|
||||
initComponents(pluginInstanceRef, 'bottomBackground', struct);
|
||||
}
|
||||
|
||||
if( options.controlBar.progress ){
|
||||
initComponents(pluginInstanceRef, 'progressControl', struct);
|
||||
}
|
||||
|
||||
if( enabledResolutionsPanel ){
|
||||
initComponents(pluginInstanceRef, '__resolution', struct, { resolutions: options.resolutions.options } );
|
||||
}
|
||||
|
||||
if( enabledPlaybackSpeedPanel ){
|
||||
initComponents(pluginInstanceRef, '__playbackSpeed', struct, { playbackSpeeds: options.playbackSpeeds.options } );
|
||||
}
|
||||
|
||||
if( enabledSettingsPanel ){
|
||||
|
||||
if( enabledResolutionsPanel && enabledPlaybackSpeedPanel ){
|
||||
|
||||
initComponents(pluginInstanceRef, '__settings', struct, {
|
||||
enabledResolutionsPanel: enabledResolutionsPanel,
|
||||
selectedResolution: enabledResolutionsPanel ? options.resolutions.default : null,
|
||||
enabledPlaybackSpeedPanel: enabledPlaybackSpeedPanel,
|
||||
selectedPlaybackSpeed: enabledPlaybackSpeedPanel ? options.playbackSpeeds.default : null,
|
||||
});
|
||||
}
|
||||
else if( enabledResolutionsPanel ){
|
||||
initComponents(pluginInstanceRef, '__settings', struct, {
|
||||
enabledResolutionsPanel: enabledResolutionsPanel,
|
||||
selectedResolution: enabledResolutionsPanel ? options.resolutions.default : null,
|
||||
});
|
||||
}
|
||||
else if( enabledPlaybackSpeedPanel ){
|
||||
|
||||
initComponents(pluginInstanceRef, '__settings', struct, {
|
||||
enabledPlaybackSpeedPanel: enabledPlaybackSpeedPanel,
|
||||
selectedPlaybackSpeed: enabledPlaybackSpeedPanel ? options.playbackSpeeds.default : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if( options.controlBar.play || options.controlBar.previous || options.controlBar.next || options.controlBar.volume || options.controlBar.time ){
|
||||
initComponents(pluginInstanceRef, '__leftControls', struct, { options: options } );
|
||||
}
|
||||
|
||||
if( enabledSettingsPanel || options.controlBar.theaterMode || options.controlBar.fullscreen || options.controlBar.pictureInPictureToggle ){
|
||||
initComponents(pluginInstanceRef, '__rightControls', struct, { options: options, enabledSettingsPanel: enabledSettingsPanel } );
|
||||
}
|
||||
|
||||
return { children: struct };
|
||||
}
|
||||
192
frontend/packages/vjs-plugin/src/inc/functions.js
Executable file
192
frontend/packages/vjs-plugin/src/inc/functions.js
Executable file
@@ -0,0 +1,192 @@
|
||||
import {
|
||||
generateControlBarComponents,
|
||||
controlBarComponentsStructs,
|
||||
generateCornerLayersComponents,
|
||||
generateActionsAnimationsComponents,
|
||||
generateLoadingSpinnerComponent,
|
||||
generateTouchControlComponents
|
||||
} from './functions-helpers';
|
||||
|
||||
export function setControlBarComponents(pluginInstncRef, options, player) {
|
||||
if ( isDefined( options ) && isDefined( options.controlBar ) ) {
|
||||
generateControlBarComponents(pluginInstncRef)( controlBarComponentsStructs(pluginInstncRef, options), player.getChild('controlBar') );
|
||||
}
|
||||
}
|
||||
|
||||
export function setCornerLayersComponents(pluginInstncRef, options) {
|
||||
if ( isDefined( options ) ) {
|
||||
generateCornerLayersComponents(pluginInstncRef, options);
|
||||
}
|
||||
}
|
||||
|
||||
export function setActionsAnimationsComponents(pluginInstncRef) {
|
||||
generateActionsAnimationsComponents(pluginInstncRef);
|
||||
}
|
||||
|
||||
export function replaceLoadingSpinnerComponent(pluginInstncRef) {
|
||||
generateLoadingSpinnerComponent(pluginInstncRef);
|
||||
}
|
||||
|
||||
export function setTouchControlComponents(pluginInstncRef, options) {
|
||||
generateTouchControlComponents(pluginInstncRef, options);
|
||||
}
|
||||
|
||||
export function removeClassname(el, cls) {
|
||||
if (el.classList) {
|
||||
el.classList.remove(cls);
|
||||
} else {
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + cls.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
}
|
||||
|
||||
export function addClassname(el, cls) {
|
||||
if (el.classList) {
|
||||
el.classList.add(cls);
|
||||
} else {
|
||||
el.className += ' ' + cls;
|
||||
}
|
||||
}
|
||||
|
||||
export function centralizeBoxPosition(vw, vh, vr, pw, ph, pr) {
|
||||
|
||||
const ret = {};
|
||||
|
||||
const videoRatio = isDefined( vr ) && ! isNull( vr ) ? vr : vw / vh,
|
||||
playerRatio = isDefined( pr ) && ! isNull( pr ) ? pr : pw / ph,
|
||||
playerVerticalOrientation = 1 > playerRatio,
|
||||
videoVerticalOrientation = 1 > videoRatio;
|
||||
|
||||
if (!playerVerticalOrientation) {
|
||||
|
||||
if (!videoVerticalOrientation) {
|
||||
|
||||
// Both ARE NOT "vertical";
|
||||
|
||||
if (videoRatio > playerRatio) {
|
||||
|
||||
if (vw >= pw) {
|
||||
ret.w = pw;
|
||||
ret.h = ret.w / videoRatio;
|
||||
} else {
|
||||
ret.w = vw;
|
||||
ret.h = vh;
|
||||
}
|
||||
|
||||
} else {
|
||||
ret.h = vw >= pw ? ph : (vh >= ph ? ph : vh);
|
||||
ret.w = ret.h * videoRatio;
|
||||
}
|
||||
} else {
|
||||
|
||||
// Video IS "vertical" and player IS NOT "vertical";
|
||||
|
||||
if (vh >= ph) {
|
||||
ret.h = ph;
|
||||
ret.w = ret.h * videoRatio;
|
||||
} else {
|
||||
ret.w = vw;
|
||||
ret.h = vh;
|
||||
}
|
||||
}
|
||||
|
||||
} else if (!videoVerticalOrientation) {
|
||||
|
||||
// Player IS "vertical" and video IS NOT "vertical";
|
||||
|
||||
if (vw >= pw) {
|
||||
ret.w = pw;
|
||||
ret.h = ret.w / videoRatio;
|
||||
} else {
|
||||
ret.w = vw;
|
||||
ret.h = vh;
|
||||
}
|
||||
} else {
|
||||
|
||||
// Both ARE "vertical";
|
||||
|
||||
if (videoRatio > playerRatio) {
|
||||
|
||||
if (vw >= pw) {
|
||||
ret.w = pw;
|
||||
ret.h = ret.w / videoRatio;
|
||||
|
||||
} else {
|
||||
ret.w = vw;
|
||||
ret.h = vh;
|
||||
}
|
||||
|
||||
} else if (vw >= pw) {
|
||||
ret.h = ph;
|
||||
ret.w = ret.h * videoRatio;
|
||||
} else if (vh >= ph) {
|
||||
ret.h = ph;
|
||||
ret.w = ret.h * videoRatio;
|
||||
} else {
|
||||
ret.w = vw;
|
||||
ret.h = vh;
|
||||
}
|
||||
}
|
||||
|
||||
ret.t = (ph - ret.h) / 2;
|
||||
ret.l = (pw - ret.w) / 2;
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function isBoolean(v){
|
||||
return "boolean" === typeof v || v instanceof Boolean;
|
||||
}
|
||||
|
||||
export function isString(v){
|
||||
return "string" === typeof v || v instanceof String;
|
||||
}
|
||||
|
||||
export function isDefined(v){
|
||||
return void 0 != v;
|
||||
}
|
||||
|
||||
export function isNull(v){
|
||||
return null === v;
|
||||
}
|
||||
|
||||
export function isArray(v){
|
||||
return ! Array.isArray ? '[object Array]' === Object.prototype.toString.call(v) : Array.isArray(v);
|
||||
}
|
||||
|
||||
export function ifBooleanElse(bol, els){
|
||||
return isBoolean(bol) ? bol : els;
|
||||
}
|
||||
|
||||
export function applyCssTransform(elem, val){
|
||||
val = val.replace(/ /g,""); // Remove all blank characters, otherwise doesn't work in IE.
|
||||
elem.style.transform = val;
|
||||
elem.style.msTransform = val;
|
||||
elem.style.MozTransform = val;
|
||||
elem.style.WebkitTransform = val;
|
||||
elem.style.OTransform = val;
|
||||
}
|
||||
|
||||
function browserSupports_csstransforms() {
|
||||
var i, v, b = document.body || document.documentElement, s = b.style, p = 'transition';
|
||||
if ( 'string' === typeof s[p] ) {
|
||||
return true;
|
||||
}
|
||||
v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
|
||||
p = p.charAt(0).toUpperCase() + p.substr(1);
|
||||
i=0;
|
||||
while(i<v.length){
|
||||
if ( 'string' === typeof s[v[i]+p] ) {
|
||||
return true;
|
||||
}
|
||||
i+=1;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function browserSupports(type){
|
||||
switch(type){
|
||||
case 'csstransforms':
|
||||
return browserSupports_csstransforms();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
174
frontend/packages/vjs-plugin/src/inc/videoPreviewThumb.js
Executable file
174
frontend/packages/vjs-plugin/src/inc/videoPreviewThumb.js
Executable file
@@ -0,0 +1,174 @@
|
||||
function videoPreviewThumb(player, options){
|
||||
|
||||
player.getChild('ControlBar').getChild('ProgressControl').getChild('SeekBar').removeChild('MouseTimeDisplay');
|
||||
|
||||
var halfThumbWidth = -1;
|
||||
|
||||
var defaults = {
|
||||
frame:{
|
||||
width: 160,
|
||||
height: 120,
|
||||
}
|
||||
};
|
||||
|
||||
function extend() {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
var target = args.shift() || {};
|
||||
var i, obj, prop;
|
||||
for (i in args) {
|
||||
obj = args[i];
|
||||
for (prop in obj) {
|
||||
if (obj.hasOwnProperty(prop)) {
|
||||
target[prop] = 'object' === typeof obj[prop] ? extend(target[prop], obj[prop]) : obj[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
function getAllComputedStyles(el) {
|
||||
return window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle;
|
||||
}
|
||||
|
||||
function getComputedStyle(el, pseudo) {
|
||||
return function(prop) {
|
||||
return window.getComputedStyle ? window.getComputedStyle(el, pseudo)[prop] : el.currentStyle[prop];
|
||||
};
|
||||
}
|
||||
|
||||
function offsetParent(el) {
|
||||
return 'HTML' !== el.nodeName && 'static' === getComputedStyle(el)('position') ? offsetParent(el.offsetParent) : el;
|
||||
}
|
||||
|
||||
function updateDimensions(){
|
||||
if ( isFullscreen ){
|
||||
halfThumbWidth = ( innerBorderWidth.left + innerBorderWidth.right + ( 1.5 * settings.frame.width ) ) / 2 ;
|
||||
spriteDom.inner.style.height = ( innerBorderWidth.top + innerBorderWidth.bottom + ( 1.5 * settings.frame.height ) ) + 'px';
|
||||
spriteDom.inner.style.width = ( innerBorderWidth.left + innerBorderWidth.right + ( 1.5 * settings.frame.width ) ) + 'px';
|
||||
}
|
||||
else {
|
||||
halfThumbWidth = ( innerBorderWidth.left + innerBorderWidth.right + settings.frame.width ) / 2 ;
|
||||
spriteDom.inner.style.height = ( innerBorderWidth.top + innerBorderWidth.bottom + settings.frame.height ) + 'px';
|
||||
spriteDom.inner.style.width = ( innerBorderWidth.left + innerBorderWidth.right + settings.frame.width ) + 'px';
|
||||
}
|
||||
spriteDom.inner.style.left = ( -1 * halfThumbWidth ) + 'px';
|
||||
}
|
||||
|
||||
var spriteDom = {
|
||||
wrap: document.createElement('div'),
|
||||
inner: document.createElement('div'),
|
||||
img: document.createElement('img'),
|
||||
timeDisplay: document.createElement('div'),
|
||||
timeDisplayInner: document.createElement('div'),
|
||||
};
|
||||
|
||||
var innerBorderWidth = {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
};
|
||||
|
||||
var progressControl = player.controlBar.childNameIndex_.ProgressControl;
|
||||
var progressControlElem;
|
||||
|
||||
var seekBar = progressControl.childNameIndex_.SeekBar;
|
||||
|
||||
var duration = player.duration();
|
||||
var isFullscreen = player.isFullscreen();
|
||||
|
||||
var settings = extend({}, defaults, options);
|
||||
|
||||
/*settings.frame.height = defaults.width / ( settings.frame.width / settings.frame.height );
|
||||
settings.frame.width = defaults.width;*/
|
||||
|
||||
/*settings.frame.width = ( settings.frame.width / settings.frame.height ) * defaults.width;
|
||||
settings.frame.height = defaults.height;*/
|
||||
|
||||
/*settings.frame.height = 192 / ( settings.frame.width / settings.frame.height );
|
||||
settings.frame.width = 192;*/
|
||||
|
||||
spriteDom.wrap.className = 'vjs-preview-thumb';
|
||||
spriteDom.inner.className = 'vjs-preview-thumb-inner';
|
||||
spriteDom.inner.style.backgroundImage = 'url(' + settings.url + ')'
|
||||
spriteDom.timeDisplay.className = 'vjs-preview-thumb-time-display';
|
||||
spriteDom.timeDisplayInner.innerHTML = '0:00';
|
||||
|
||||
var spriteHeight = 0;
|
||||
|
||||
player.on('durationchange', function(e) { duration = player.duration(); }); // when the container is MP4.
|
||||
player.on('loadedmetadata', function(e) { duration = player.duration(); }); // when the container is HLS.
|
||||
|
||||
player.on('fullscreenchange', function(e) {
|
||||
setTimeout( function() {
|
||||
isFullscreen = player.isFullscreen();
|
||||
updateDimensions();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
player.one( 'playing', function(e) { // @note: Listener bind once.
|
||||
|
||||
updateDimensions();
|
||||
|
||||
player.addClass('vjs-enabled-preview-thumb'); // @note: Enable preview functionality.
|
||||
|
||||
spriteDom.img.onload = function() {
|
||||
|
||||
var innerStyles = getAllComputedStyles(spriteDom.inner);
|
||||
|
||||
if( void 0 !== innerStyles ){
|
||||
innerBorderWidth.top = parseFloat( innerStyles.borderTopWidth );
|
||||
innerBorderWidth.left = parseFloat( innerStyles.borderLeftWidth );
|
||||
innerBorderWidth.right = parseFloat( innerStyles.borderRightWidth );
|
||||
innerBorderWidth.bottom = parseFloat( innerStyles.borderBottomWidth );
|
||||
}
|
||||
|
||||
spriteHeight = this.naturalHeight;
|
||||
|
||||
spriteDom.img = void 0; // Unset image element.
|
||||
|
||||
updateDimensions();
|
||||
};
|
||||
|
||||
spriteDom.img.src = settings.url;
|
||||
});
|
||||
|
||||
function moveListener(event) {
|
||||
|
||||
progressControlElem = progressControlElem || progressControl.el();
|
||||
|
||||
var progressControlClientRect = offsetParent( progressControlElem ).getBoundingClientRect();
|
||||
|
||||
var pageXOffset = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft;
|
||||
var pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
|
||||
|
||||
var left = ( pageX || ( event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft ) ) - ( progressControlClientRect.left + pageXOffset );
|
||||
var right = ( progressControlClientRect.width || progressControlClientRect.right ) + pageXOffset;
|
||||
|
||||
var mouseTime = ! spriteHeight ? 0 : Math.min( ( ( spriteHeight / settings.frame.height ) * settings.frame.seconds ) - 1, Math.floor( ( left - progressControlElem.offsetLeft ) / progressControl.width() * duration ) );
|
||||
|
||||
spriteDom.timeDisplayInner.innerHTML = videojs.formatTime( duration * ( left / right ) );
|
||||
|
||||
if( left < halfThumbWidth ){
|
||||
left = halfThumbWidth;
|
||||
}
|
||||
else if( left > right - halfThumbWidth ){
|
||||
left = right - halfThumbWidth;
|
||||
}
|
||||
|
||||
spriteDom.wrap.style.transform = 'translate(' + Math.min( right - halfThumbWidth, left ) + 'px, 0px)';
|
||||
|
||||
spriteDom.inner.style.backgroundPositionY = ( ( isFullscreen ? -1.5 : -1 ) * settings.frame.height * Math.floor( mouseTime / settings.frame.seconds ) ) + 'px';
|
||||
}
|
||||
|
||||
progressControl.on('mouseover', moveListener);
|
||||
progressControl.on('mousemove', moveListener);
|
||||
|
||||
spriteDom.timeDisplay.appendChild(spriteDom.timeDisplayInner);
|
||||
spriteDom.inner.appendChild(spriteDom.timeDisplay);
|
||||
spriteDom.wrap.appendChild(spriteDom.inner);
|
||||
|
||||
progressControl.el_.appendChild(spriteDom.wrap);
|
||||
}
|
||||
|
||||
export default videoPreviewThumb;
|
||||
3
frontend/packages/vjs-plugin/src/index.js
Executable file
3
frontend/packages/vjs-plugin/src/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { MediaCmsVjsPlugin } from './MediaCmsVjsPlugin';
|
||||
|
||||
export default MediaCmsVjsPlugin;
|
||||
2098
frontend/packages/vjs-plugin/src/styles.scss
Executable file
2098
frontend/packages/vjs-plugin/src/styles.scss
Executable file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user