pull out lbry volume class
This commit is contained in:
parent
d920375d64
commit
c201826f45
2 changed files with 47 additions and 53 deletions
46
ui/component/viewers/videoViewer/internal/lbry-volume-bar.js
Normal file
46
ui/component/viewers/videoViewer/internal/lbry-volume-bar.js
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
// ****************************************************************************
|
||||||
|
// LbryVolumeBarClass
|
||||||
|
// ****************************************************************************
|
||||||
|
|
||||||
|
import videojs from 'video.js';
|
||||||
|
|
||||||
|
const isDev = process.env.NODE_ENV !== 'production';
|
||||||
|
|
||||||
|
const VIDEOJS_CONTROL_BAR_CLASS = 'ControlBar';
|
||||||
|
const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
|
||||||
|
const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl';
|
||||||
|
const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar';
|
||||||
|
|
||||||
|
class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) {
|
||||||
|
constructor(player, options = {}) {
|
||||||
|
super(player, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
static replaceExisting(player) {
|
||||||
|
try {
|
||||||
|
const volumeControl = player
|
||||||
|
.getChild(VIDEOJS_CONTROL_BAR_CLASS)
|
||||||
|
.getChild(VIDEOJS_VOLUME_PANEL_CLASS)
|
||||||
|
.getChild(VIDEOJS_VOLUME_CONTROL_CLASS);
|
||||||
|
const volumeBar = volumeControl.getChild(VIDEOJS_VOLUME_BAR_CLASS);
|
||||||
|
volumeControl.removeChild(volumeBar);
|
||||||
|
volumeControl.addChild(new LbryVolumeBarClass(player));
|
||||||
|
} catch (error) {
|
||||||
|
// In case it slips in 'Production', the original volume bar will be used and the site should still be working
|
||||||
|
// (just not exactly the way we want).
|
||||||
|
if (isDev) throw Error('\n\nvideojs.jsx: Volume Panel hierarchy changed?\n\n' + error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseDown(event) {
|
||||||
|
super.handleMouseDown(event);
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseMove(event) {
|
||||||
|
super.handleMouseMove(event);
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LbryVolumeBarClass;
|
|
@ -17,6 +17,7 @@ import recsys from './plugins/videojs-recsys/plugin';
|
||||||
import qualityLevels from 'videojs-contrib-quality-levels';
|
import qualityLevels from 'videojs-contrib-quality-levels';
|
||||||
import isUserTyping from 'util/detect-typing';
|
import isUserTyping from 'util/detect-typing';
|
||||||
import runAds from './ads';
|
import runAds from './ads';
|
||||||
|
import LbryVolumeBarClass from './lbry-volume-bar';
|
||||||
|
|
||||||
const isDev = process.env.NODE_ENV !== 'production';
|
const isDev = process.env.NODE_ENV !== 'production';
|
||||||
|
|
||||||
|
@ -78,18 +79,6 @@ type Props = {
|
||||||
// muted?: boolean,
|
// muted?: boolean,
|
||||||
// };
|
// };
|
||||||
|
|
||||||
function hitsFiftyPercent() {
|
|
||||||
// from 0 - 999
|
|
||||||
const rand = Math.floor(Math.random() * (1000 + 1));
|
|
||||||
|
|
||||||
// 499 is 50% chance of running
|
|
||||||
if (rand > 499) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc)
|
// check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc)
|
||||||
function activeElementIsPartOfVideoElement() {
|
function activeElementIsPartOfVideoElement() {
|
||||||
const videoElementParent = document.getElementsByClassName('video-js-parent')[0];
|
const videoElementParent = document.getElementsByClassName('video-js-parent')[0];
|
||||||
|
@ -135,47 +124,6 @@ if (!Object.keys(videojs.getPlugins()).includes('recsys')) {
|
||||||
videojs.registerPlugin('recsys', recsys);
|
videojs.registerPlugin('recsys', recsys);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ****************************************************************************
|
|
||||||
// LbryVolumeBarClass
|
|
||||||
// ****************************************************************************
|
|
||||||
|
|
||||||
const VIDEOJS_CONTROL_BAR_CLASS = 'ControlBar';
|
|
||||||
const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
|
|
||||||
const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl';
|
|
||||||
const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar';
|
|
||||||
|
|
||||||
class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) {
|
|
||||||
constructor(player, options = {}) {
|
|
||||||
super(player, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
static replaceExisting(player) {
|
|
||||||
try {
|
|
||||||
const volumeControl = player
|
|
||||||
.getChild(VIDEOJS_CONTROL_BAR_CLASS)
|
|
||||||
.getChild(VIDEOJS_VOLUME_PANEL_CLASS)
|
|
||||||
.getChild(VIDEOJS_VOLUME_CONTROL_CLASS);
|
|
||||||
const volumeBar = volumeControl.getChild(VIDEOJS_VOLUME_BAR_CLASS);
|
|
||||||
volumeControl.removeChild(volumeBar);
|
|
||||||
volumeControl.addChild(new LbryVolumeBarClass(player));
|
|
||||||
} catch (error) {
|
|
||||||
// In case it slips in 'Production', the original volume bar will be used and the site should still be working
|
|
||||||
// (just not exactly the way we want).
|
|
||||||
if (isDev) throw Error('\n\nvideojs.jsx: Volume Panel hierarchy changed?\n\n' + error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseDown(event) {
|
|
||||||
super.handleMouseDown(event);
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseMove(event) {
|
|
||||||
super.handleMouseMove(event);
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ****************************************************************************
|
// ****************************************************************************
|
||||||
// VideoJs
|
// VideoJs
|
||||||
// ****************************************************************************
|
// ****************************************************************************
|
||||||
|
|
Loading…
Reference in a new issue