lbry-desktop/ui/component/viewers/videoViewer/internal/overlays.js

119 lines
3.2 KiB
JavaScript
Raw Normal View History

import React from 'react';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import ReactDOMServer from 'react-dom/server';
import './plugins/videojs-overlay/plugin';
import './plugins/videojs-overlay/plugin.scss';
// ****************************************************************************
// ****************************************************************************
const OVERLAY_NAME_ONE_OFF = 'one-off';
const OVERLAY_CLASS_PLAYBACK_RATE = 'vjs-overlay-playrate';
const OVERLAY_CLASS_SEEKED = 'vjs-overlay-seeked';
// ****************************************************************************
// ****************************************************************************
/**
* Overlays that will always be registered with the plugin.
* @type {*[]}
*/
const PERMANENT_OVERLAYS = [
// Nothing for now.
// --- Example: ---
// {
// content: 'Video is now playing',
// start: 'play',
// end: 'pause',
// align: 'center',
// },
];
export const OVERLAY_DATA = {
// https://github.com/brightcove/videojs-overlay/blob/master/README.md#documentation
overlays: [...PERMANENT_OVERLAYS],
};
/**
* Wrapper to hide away the complexity of adding dynamic content, which the
* plugin currently does not support. To change the 'content' of an overlay,
* we need to re-create the entire array.
* This wrapper ensures the PERMANENT_OVERLAYS (and potentially other overlays)
* don't get lost.
*/
function showOneOffOverlay(player, className, overlayJsx, align) {
// Delete existing:
OVERLAY_DATA.overlays = OVERLAY_DATA.overlays.filter(x => x.name !== OVERLAY_NAME_ONE_OFF);
// Create new one:
OVERLAY_DATA.overlays.push({
name: OVERLAY_NAME_ONE_OFF,
class: className,
content: ReactDOMServer.renderToStaticMarkup(overlayJsx),
start: 'immediate',
align: align,
});
// Display it:
player.overlay(OVERLAY_DATA);
}
/**
* Displays a transient "Playback Rate" overlay.
*
* @param player The videojs instance.
* @param newRate The current playback rate value.
* @param isSpeedUp true if the change was speeding up, false otherwise.
*/
export function showPlaybackRateOverlay(player, newRate, isSpeedUp) {
const overlayJsx = (
<div>
<p>{newRate}x</p>
<p>
<Icon icon={isSpeedUp ? ICONS.ARROW_RIGHT : ICONS.ARROW_LEFT} size={48} />
</p>
</div>
);
showOneOffOverlay(player, OVERLAY_CLASS_PLAYBACK_RATE, overlayJsx, 'center');
}
/**
* Displays a transient "Seeked" overlay.
*
* @param player The videojs instance.
* @param duration The seek delta duration.
* @param isForward true if seeking forward, false otherwise.
*/
export function showSeekedOverlay(player, duration, isForward) {
const overlayJsx = (
<div>
<p>
{isForward ? '+' : '-'}
{duration}
</p>
</div>
);
showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
}
2021-03-19 21:18:39 +01:00
/**
* Displays a transient "Volume Percentage" overlay.
*
* @param player The videojs instance.
* @param percentage how much % of volume active.
*/
export function showVolumeverlay(player, percentage) {
const overlayJsx = (
<div>
<p>
{percentage}
{'%'}
</p>
</div>
);
showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
}