Gabe Kangas
3 years ago
10 changed files with 886 additions and 14 deletions
@ -0,0 +1,57 @@
@@ -0,0 +1,57 @@
|
||||
import React from 'react'; |
||||
|
||||
// This imports the functional component from the previous sample.
|
||||
import VideoJS from './player'; |
||||
|
||||
export default function OwncastPlayer(props) { |
||||
const playerRef = React.useRef(null); |
||||
const { source } = props; |
||||
|
||||
const videoJsOptions = { |
||||
autoplay: false, |
||||
controls: true, |
||||
responsive: true, |
||||
fluid: true, |
||||
liveui: true, |
||||
preload: 'auto', |
||||
controlBar: { |
||||
progressControl: { |
||||
seekBar: false, |
||||
}, |
||||
}, |
||||
html5: { |
||||
vhs: { |
||||
// used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.
|
||||
enableLowInitialPlaylist: true, |
||||
experimentalBufferBasedABR: true, |
||||
useNetworkInformationApi: true, |
||||
maxPlaylistRetries: 30, |
||||
}, |
||||
}, |
||||
liveTracker: { |
||||
trackingThreshold: 0, |
||||
liveTolerance: 15, |
||||
}, |
||||
sources: [ |
||||
{ |
||||
src: `${source}/hls/stream.m3u8`, |
||||
type: 'application/x-mpegURL', |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
const handlePlayerReady = player => { |
||||
playerRef.current = player; |
||||
|
||||
// You can handle player events here, for example:
|
||||
player.on('waiting', () => { |
||||
player.log('player is waiting'); |
||||
}); |
||||
|
||||
player.on('dispose', () => { |
||||
player.log('player will dispose'); |
||||
}); |
||||
}; |
||||
|
||||
return <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />; |
||||
} |
||||
@ -0,0 +1,438 @@
@@ -0,0 +1,438 @@
|
||||
import React from 'react'; |
||||
import videojs from 'video.js'; |
||||
|
||||
require('video.js/dist/video-js.css'); |
||||
|
||||
// import { getLocalStorage, setLocalStorage } from '../../utils/helpers.js';
|
||||
// import { PLAYER_VOLUME, URL_STREAM } from '../../utils/constants.js';
|
||||
|
||||
export function VideoJS(props) { |
||||
const videoRef = React.useRef(null); |
||||
const playerRef = React.useRef(null); |
||||
const { options, onReady } = props; |
||||
|
||||
React.useEffect(() => { |
||||
// Make sure Video.js player is only initialized once
|
||||
if (!playerRef.current) { |
||||
const videoElement = videoRef.current; |
||||
|
||||
// if (!videoElement) return;
|
||||
|
||||
const player = (playerRef.current = videojs(videoElement, options, () => { |
||||
player.log('player is ready'); |
||||
onReady && onReady(player); |
||||
})); |
||||
|
||||
// You can update player in the `else` block here, for example:
|
||||
// } else {
|
||||
player.autoplay(options.autoplay); |
||||
player.src(options.sources); |
||||
} |
||||
}, [options, videoRef]); |
||||
|
||||
// Dispose the Video.js player when the functional component unmounts
|
||||
React.useEffect(() => { |
||||
const player = playerRef.current; |
||||
|
||||
return () => { |
||||
if (player) { |
||||
player.dispose(); |
||||
playerRef.current = null; |
||||
} |
||||
}; |
||||
}, [playerRef]); |
||||
|
||||
return ( |
||||
<div data-vjs-player> |
||||
<video ref={videoRef} className="video-js vjs-big-play-centered" /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default VideoJS; |
||||
|
||||
// import PlaybackMetrics from '../metrics/playback.js';
|
||||
// import LatencyCompensator from './latencyCompensator.js';
|
||||
|
||||
// const VIDEO_ID = 'video';
|
||||
// const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled';
|
||||
|
||||
// // Video setup
|
||||
// const VIDEO_SRC = {
|
||||
// src: URL_STREAM,
|
||||
// type: 'application/x-mpegURL',
|
||||
// };
|
||||
// const VIDEO_OPTIONS = {
|
||||
// autoplay: false,
|
||||
// liveui: true,
|
||||
// preload: 'auto',
|
||||
// controlBar: {
|
||||
// progressControl: {
|
||||
// seekBar: false,
|
||||
// },
|
||||
// },
|
||||
// html5: {
|
||||
// vhs: {
|
||||
// // used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.
|
||||
// enableLowInitialPlaylist: true,
|
||||
// experimentalBufferBasedABR: true,
|
||||
// useNetworkInformationApi: true,
|
||||
// maxPlaylistRetries: 30,
|
||||
// },
|
||||
// },
|
||||
// liveTracker: {
|
||||
// trackingThreshold: 0,
|
||||
// liveTolerance: 15,
|
||||
// },
|
||||
// sources: [VIDEO_SRC],
|
||||
// };
|
||||
|
||||
// export const POSTER_DEFAULT = `/img/logo.png`;
|
||||
// export const POSTER_THUMB = `/thumbnail.jpg`;
|
||||
|
||||
// export default class MenuSeparator extends VjsMenuItem {
|
||||
// constructor(player, options) {
|
||||
// super(player, options);
|
||||
// }
|
||||
|
||||
// createEl(tag = 'button', props = {}, attributes = {}) {
|
||||
// const el = super.createEl(tag, props, attributes);
|
||||
// el.innerHTML = '<hr style="opacity: 0.3; margin-left: 10px; margin-right: 10px;" />';
|
||||
// return el;
|
||||
// }
|
||||
// }
|
||||
|
||||
// class OwncastPlayer {
|
||||
// constructor() {
|
||||
// window.VIDEOJS_NO_DYNAMIC_STYLE = true; // style override
|
||||
|
||||
// this.vjsPlayer = null;
|
||||
// this.latencyCompensator = null;
|
||||
// this.playbackMetrics = null;
|
||||
|
||||
// this.appPlayerReadyCallback = null;
|
||||
// this.appPlayerPlayingCallback = null;
|
||||
// this.appPlayerEndedCallback = null;
|
||||
|
||||
// this.hasStartedPlayback = false;
|
||||
// this.latencyCompensatorEnabled = false;
|
||||
|
||||
// // bind all the things because safari
|
||||
// this.startPlayer = this.startPlayer.bind(this);
|
||||
// this.handleReady = this.handleReady.bind(this);
|
||||
// this.handlePlaying = this.handlePlaying.bind(this);
|
||||
// this.handleVolume = this.handleVolume.bind(this);
|
||||
// this.handleEnded = this.handleEnded.bind(this);
|
||||
// this.handleError = this.handleError.bind(this);
|
||||
// this.addQualitySelector = this.addVideoSettingsMenu.bind(this);
|
||||
// this.addQualitySelector = this.addVideoSettingsMenu.bind(this);
|
||||
// this.toggleLatencyCompensator = this.toggleLatencyCompensator.bind(this);
|
||||
// this.startLatencyCompensator = this.startLatencyCompensator.bind(this);
|
||||
// this.stopLatencyCompensator = this.stopLatencyCompensator.bind(this);
|
||||
// this.qualitySelectionMenu = null;
|
||||
// this.latencyCompensatorToggleButton = null;
|
||||
// }
|
||||
|
||||
// init() {
|
||||
// // this.addAirplay();
|
||||
// // this.addVideoSettingsMenu();
|
||||
|
||||
// // Add a cachebuster param to playlist URLs.
|
||||
// videojs.Vhs.xhr.beforeRequest = options => {
|
||||
// if (options.uri.match('m3u8')) {
|
||||
// const cachebuster = Math.random().toString(16).substr(2, 8);
|
||||
// options.uri = `${options.uri}?cachebust=${cachebuster}`;
|
||||
// }
|
||||
|
||||
// return options;
|
||||
// };
|
||||
|
||||
// this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
|
||||
|
||||
// this.vjsPlayer.ready(this.handleReady);
|
||||
// }
|
||||
|
||||
// setupPlayerCallbacks(callbacks) {
|
||||
// const { onReady, onPlaying, onEnded, onError } = callbacks;
|
||||
|
||||
// this.appPlayerReadyCallback = onReady;
|
||||
// this.appPlayerPlayingCallback = onPlaying;
|
||||
// this.appPlayerEndedCallback = onEnded;
|
||||
// this.appPlayerErrorCallback = onError;
|
||||
// }
|
||||
|
||||
// // play
|
||||
// startPlayer() {
|
||||
// this.log('Start playing');
|
||||
// const source = { ...VIDEO_SRC };
|
||||
|
||||
// try {
|
||||
// this.vjsPlayer.volume(getLocalStorage(PLAYER_VOLUME) || 1);
|
||||
// } catch (err) {
|
||||
// console.warn(err);
|
||||
// }
|
||||
// this.vjsPlayer.src(source);
|
||||
// }
|
||||
|
||||
// setupPlaybackMetrics() {
|
||||
// // this.playbackMetrics = new PlaybackMetrics(this.vjsPlayer, videojs);
|
||||
// }
|
||||
|
||||
// setupLatencyCompensator() {
|
||||
// const tech = this.vjsPlayer.tech({ IWillNotUseThisInPlugins: true });
|
||||
|
||||
// // VHS is required.
|
||||
// if (!tech || !tech.vhs) {
|
||||
// }
|
||||
|
||||
// // const latencyCompensatorEnabledSaved = getLocalStorage(LATENCY_COMPENSATION_ENABLED);
|
||||
|
||||
// // if (latencyCompensatorEnabledSaved === 'true' && tech && tech.vhs) {
|
||||
// // this.startLatencyCompensator();
|
||||
// // } else {
|
||||
// // this.stopLatencyCompensator();
|
||||
// // }
|
||||
// }
|
||||
|
||||
// startLatencyCompensator() {
|
||||
// // this.latencyCompensator = new LatencyCompensator(this.vjsPlayer);
|
||||
// // this.latencyCompensator.enable();
|
||||
// // this.latencyCompensatorEnabled = true;
|
||||
// // this.setLatencyCompensatorItemTitle('disable minimized latency');
|
||||
// }
|
||||
|
||||
// stopLatencyCompensator() {
|
||||
// // if (this.latencyCompensator) {
|
||||
// // this.latencyCompensator.disable();
|
||||
// // }
|
||||
// // this.LatencyCompensator = null;
|
||||
// // this.latencyCompensatorEnabled = false;
|
||||
// // this.setLatencyCompensatorItemTitle(
|
||||
// // '<span style="font-size: 0.8em">enable minimized latency (experimental)</span>',
|
||||
// // );
|
||||
// }
|
||||
|
||||
// handleReady() {
|
||||
// console.log('handleReady');
|
||||
// this.vjsPlayer.on('error', this.handleError);
|
||||
// this.vjsPlayer.on('playing', this.handlePlaying);
|
||||
// this.vjsPlayer.on('volumechange', this.handleVolume);
|
||||
// this.vjsPlayer.on('ended', this.handleEnded);
|
||||
|
||||
// this.vjsPlayer.on('loadeddata', () => {
|
||||
// this.setupPlaybackMetrics();
|
||||
// this.setupLatencyCompensator();
|
||||
// });
|
||||
|
||||
// if (this.appPlayerReadyCallback) {
|
||||
// // start polling
|
||||
// this.appPlayerReadyCallback();
|
||||
// }
|
||||
|
||||
// this.vjsPlayer.log.level('debug');
|
||||
// }
|
||||
|
||||
// handleVolume() {
|
||||
// setLocalStorage(PLAYER_VOLUME, this.vjsPlayer.muted() ? 0 : this.vjsPlayer.volume());
|
||||
// }
|
||||
|
||||
// handlePlaying() {
|
||||
// if (this.appPlayerPlayingCallback) {
|
||||
// // start polling
|
||||
// this.appPlayerPlayingCallback();
|
||||
// }
|
||||
|
||||
// if (this.latencyCompensator && !this.hasStartedPlayback) {
|
||||
// this.latencyCompensator.enable();
|
||||
// }
|
||||
|
||||
// this.hasStartedPlayback = true;
|
||||
// }
|
||||
|
||||
// handleEnded() {
|
||||
// if (this.appPlayerEndedCallback) {
|
||||
// this.appPlayerEndedCallback();
|
||||
// }
|
||||
|
||||
// this.stopLatencyCompensator();
|
||||
// }
|
||||
|
||||
// handleError(e) {
|
||||
// this.log(`on Error: ${JSON.stringify(e)}`);
|
||||
// if (this.appPlayerEndedCallback) {
|
||||
// this.appPlayerEndedCallback();
|
||||
// }
|
||||
// }
|
||||
|
||||
// toggleLatencyCompensator() {
|
||||
// if (this.latencyCompensatorEnabled) {
|
||||
// this.stopLatencyCompensator();
|
||||
// setLocalStorage(LATENCY_COMPENSATION_ENABLED, false);
|
||||
// } else {
|
||||
// this.startLatencyCompensator();
|
||||
// setLocalStorage(LATENCY_COMPENSATION_ENABLED, true);
|
||||
// }
|
||||
// }
|
||||
|
||||
// setLatencyCompensatorItemTitle(title) {
|
||||
// const item = document.querySelector('.latency-toggle-item > .vjs-menu-item-text');
|
||||
// if (!item) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// item.innerHTML = title;
|
||||
// }
|
||||
|
||||
// log(message) {
|
||||
// // console.log(`>>> Player: ${message}`);
|
||||
// }
|
||||
|
||||
// render(): JSX.Element {
|
||||
// return (
|
||||
// <div data-vjs-player>
|
||||
// <video ref={videoRef} className='video-js vjs-big-play-centered' />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// async addVideoSettingsMenu() {
|
||||
// if (this.qualityMenuButton) {
|
||||
// player.controlBar.removeChild(this.qualityMenuButton);
|
||||
// }
|
||||
|
||||
// videojs.hookOnce('setup', async player => {
|
||||
// let qualities = [];
|
||||
|
||||
// try {
|
||||
// const response = await fetch('http://localhost:8080/api/video/variants');
|
||||
// qualities = await response.json();
|
||||
// } catch (e) {
|
||||
// console.error(e);
|
||||
// }
|
||||
|
||||
// const MenuItem = videojs.getComponent('MenuItem');
|
||||
// const MenuButtonClass = videojs.getComponent('MenuButton');
|
||||
|
||||
// const lowLatencyItem = new MenuItem(player, {
|
||||
// selectable: true,
|
||||
// });
|
||||
// lowLatencyItem.setAttribute('class', 'latency-toggle-item');
|
||||
// lowLatencyItem.on('click', () => {
|
||||
// this.toggleLatencyCompensator();
|
||||
// });
|
||||
// this.latencyCompensatorToggleButton = lowLatencyItem;
|
||||
|
||||
// const separator = new MenuSeparator(player, {
|
||||
// selectable: false,
|
||||
// });
|
||||
|
||||
// const MenuButton = videojs.extend(MenuButtonClass, {
|
||||
// // The `init()` method will also work for constructor logic here, but it is
|
||||
// // deprecated. If you provide an `init()` method, it will override the
|
||||
// // `constructor()` method!
|
||||
// constructor() {
|
||||
// MenuButtonClass.call(this, player);
|
||||
// },
|
||||
|
||||
// createItems() {
|
||||
// const tech = this.player_.tech({ IWillNotUseThisInPlugins: true });
|
||||
|
||||
// const defaultAutoItem = new MenuItem(player, {
|
||||
// selectable: true,
|
||||
// label: 'Auto',
|
||||
// });
|
||||
|
||||
// const items = qualities.map(item => {
|
||||
// const newMenuItem = new MenuItem(player, {
|
||||
// selectable: true,
|
||||
// label: item.name,
|
||||
// });
|
||||
|
||||
// // Quality selected
|
||||
// newMenuItem.on('click', () => {
|
||||
// // If for some reason tech doesn't exist, then don't do anything
|
||||
// if (!tech) {
|
||||
// console.warn('Invalid attempt to access null player tech');
|
||||
// return;
|
||||
// }
|
||||
// // Only enable this single, selected representation.
|
||||
// tech.vhs.representations().forEach((rep, index) => {
|
||||
// rep.enabled(index === item.index);
|
||||
// });
|
||||
// newMenuItem.selected(false);
|
||||
// });
|
||||
|
||||
// return newMenuItem;
|
||||
// });
|
||||
|
||||
// defaultAutoItem.on('click', () => {
|
||||
// // Re-enable all representations.
|
||||
// tech.vhs.representations().forEach((rep, index) => {
|
||||
// rep.enabled(true);
|
||||
// });
|
||||
// defaultAutoItem.selected(false);
|
||||
// });
|
||||
|
||||
// const supportsLatencyCompensator = !!tech && !!tech.vhs;
|
||||
|
||||
// // Only show the quality selector if there is more than one option.
|
||||
// if (qualities.length < 2 && supportsLatencyCompensator) {
|
||||
// return [lowLatencyItem];
|
||||
// }
|
||||
// if (qualities.length > 1 && supportsLatencyCompensator) {
|
||||
// return [defaultAutoItem, ...items, separator, lowLatencyItem];
|
||||
// }
|
||||
// if (!supportsLatencyCompensator && qualities.length == 1) {
|
||||
// return [];
|
||||
// }
|
||||
|
||||
// return [defaultAutoItem, ...items];
|
||||
// },
|
||||
// });
|
||||
|
||||
// // If none of the settings in this menu are applicable then don't show it.
|
||||
// const tech = player.tech({ IWillNotUseThisInPlugins: true });
|
||||
|
||||
// if (qualities.length < 2 && (!tech || !tech.vhs)) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const menuButton = new MenuButton();
|
||||
// menuButton.addClass('vjs-quality-selector');
|
||||
// player.controlBar.addChild(menuButton, {}, player.controlBar.children_.length - 2);
|
||||
// this.qualityMenuButton = menuButton;
|
||||
// this.latencyCompensatorToggleButton = lowLatencyItem;
|
||||
// });
|
||||
// }
|
||||
|
||||
// addAirplay() {
|
||||
// videojs.hookOnce('setup', player => {
|
||||
// if (window.WebKitPlaybackTargetAvailabilityEvent) {
|
||||
// const videoJsButtonClass = videojs.getComponent('Button');
|
||||
// const concreteButtonClass = videojs.extend(videoJsButtonClass, {
|
||||
// // The `init()` method will also work for constructor logic here, but it is
|
||||
// // deprecated. If you provide an `init()` method, it will override the
|
||||
// // `constructor()` method!
|
||||
// constructor() {
|
||||
// videoJsButtonClass.call(this, player);
|
||||
// },
|
||||
|
||||
// handleClick() {
|
||||
// const videoElement = document.getElementsByTagName('video')[0];
|
||||
// videoElement.webkitShowPlaybackTargetPicker();
|
||||
// },
|
||||
// });
|
||||
|
||||
// const concreteButtonInstance = player.controlBar.addChild(new concreteButtonClass());
|
||||
// concreteButtonInstance.addClass('vjs-airplay');
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// export { OwncastPlayer };
|
||||
|
||||
// const VjsMenuItem = videojs.getComponent('MenuItem');
|
||||
|
||||
// VjsMenuItem.registerComponent('MenuSeparator', MenuSeparator);
|
||||
@ -1,16 +1,32 @@
@@ -1,16 +1,32 @@
|
||||
import React from 'react'; |
||||
import { ComponentStory, ComponentMeta } from '@storybook/react'; |
||||
import VideoPoster from '../components/video/VideoPoster'; |
||||
import OwncastPlayer from '../components/video/owncastplayer'; |
||||
|
||||
const streams = { |
||||
DemoServer: `https://watch.owncast.online`, |
||||
RetroStrangeTV: `https://live.retrostrange.com`, |
||||
localhost: `http://localhost:8080`, |
||||
}; |
||||
|
||||
export default { |
||||
title: 'owncast/VideoPoster', |
||||
component: VideoPoster, |
||||
title: 'owncast/Player', |
||||
component: OwncastPlayer, |
||||
argTypes: { |
||||
source: { |
||||
options: Object.keys(streams), |
||||
mapping: streams, |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
}, |
||||
}, |
||||
parameters: {}, |
||||
} as ComponentMeta<typeof VideoPoster>; |
||||
|
||||
const VideoPosterExample = () => <VideoPoster />; |
||||
} as ComponentMeta<typeof OwncastPlayer>; |
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof VideoPoster> = args => <VideoPosterExample />; |
||||
const Template: ComponentStory<typeof OwncastPlayer> = args => <OwncastPlayer {...args} />; |
||||
|
||||
export const Basic = Template.bind({}); |
||||
export const LiveDemo = Template.bind({}); |
||||
LiveDemo.args = { |
||||
online: true, |
||||
source: 'https://watch.owncast.online', |
||||
}; |
||||
|
||||
Loading…
Reference in new issue