pull out lbry volume class

This commit is contained in:
Anthony 2021-11-05 11:27:52 +01:00
parent d920375d64
commit c201826f45
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 47 additions and 53 deletions

View 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;

View file

@ -17,6 +17,7 @@ import recsys from './plugins/videojs-recsys/plugin';
import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing';
import runAds from './ads';
import LbryVolumeBarClass from './lbry-volume-bar';
const isDev = process.env.NODE_ENV !== 'production';
@ -78,18 +79,6 @@ type Props = {
// 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)
function activeElementIsPartOfVideoElement() {
const videoElementParent = document.getElementsByClassName('video-js-parent')[0];
@ -135,47 +124,6 @@ if (!Object.keys(videojs.getPlugins()).includes('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
// ****************************************************************************