DRY: VIDEO_PLAYBACK_RATES
This commit is contained in:
parent
a7cf89a977
commit
c5e185fa6d
3 changed files with 7 additions and 8 deletions
|
@ -1,13 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as OVERLAY from './overlays';
|
import * as OVERLAY from './overlays';
|
||||||
import * as KEYCODES from 'constants/keycodes';
|
import * as KEYCODES from 'constants/keycodes';
|
||||||
|
import { VIDEO_PLAYBACK_RATES } from 'constants/player';
|
||||||
import isUserTyping from 'util/detect-typing';
|
import isUserTyping from 'util/detect-typing';
|
||||||
|
|
||||||
const SEEK_STEP_5 = 5;
|
const SEEK_STEP_5 = 5;
|
||||||
const SEEK_STEP = 10; // time to seek in seconds
|
const SEEK_STEP = 10; // time to seek in seconds
|
||||||
|
|
||||||
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
|
|
||||||
|
|
||||||
// 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];
|
||||||
|
@ -84,10 +83,10 @@ function changePlaybackSpeed(shouldSpeedUp: boolean, playerRef) {
|
||||||
if (!player) return;
|
if (!player) return;
|
||||||
const isSpeedUp = shouldSpeedUp;
|
const isSpeedUp = shouldSpeedUp;
|
||||||
const rate = player.playbackRate();
|
const rate = player.playbackRate();
|
||||||
let rateIndex = videoPlaybackRates.findIndex((x) => x === rate);
|
let rateIndex = VIDEO_PLAYBACK_RATES.findIndex((x) => x === rate);
|
||||||
if (rateIndex >= 0) {
|
if (rateIndex >= 0) {
|
||||||
rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0);
|
rateIndex = isSpeedUp ? Math.min(rateIndex + 1, VIDEO_PLAYBACK_RATES.length - 1) : Math.max(rateIndex - 1, 0);
|
||||||
const nextRate = videoPlaybackRates[rateIndex];
|
const nextRate = VIDEO_PLAYBACK_RATES[rateIndex];
|
||||||
|
|
||||||
OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp);
|
OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp);
|
||||||
player.userActive(true);
|
player.userActive(true);
|
||||||
|
|
|
@ -6,6 +6,7 @@ import './plugins/videojs-mobile-ui/plugin';
|
||||||
import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
|
import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
|
||||||
import '@silvermine/videojs-airplay/dist/silvermine-videojs-airplay.css';
|
import '@silvermine/videojs-airplay/dist/silvermine-videojs-airplay.css';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
|
import { VIDEO_PLAYBACK_RATES } from 'constants/player';
|
||||||
import * as OVERLAY from './overlays';
|
import * as OVERLAY from './overlays';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
@ -101,7 +102,6 @@ type Props = {
|
||||||
doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
|
doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
|
|
||||||
const IS_IOS = platform.isIOS();
|
const IS_IOS = platform.isIOS();
|
||||||
|
|
||||||
if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
|
if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
|
||||||
|
@ -219,7 +219,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
|
|
||||||
const videoJsOptions = {
|
const videoJsOptions = {
|
||||||
preload: 'auto',
|
preload: 'auto',
|
||||||
playbackRates: videoPlaybackRates,
|
playbackRates: VIDEO_PLAYBACK_RATES,
|
||||||
responsive: true,
|
responsive: true,
|
||||||
controls: true,
|
controls: true,
|
||||||
html5: {
|
html5: {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
export const VIDEO_ALMOST_FINISHED_THRESHOLD = 0.8;
|
export const VIDEO_ALMOST_FINISHED_THRESHOLD = 0.8;
|
||||||
|
export const VIDEO_PLAYBACK_RATES = Object.freeze([0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2]);
|
||||||
|
|
||||||
// Quality Options
|
// Quality Options
|
||||||
export const AUTO = 'auto';
|
export const AUTO = 'auto';
|
||||||
export const ORIGINAL = 'original';
|
export const ORIGINAL = 'original';
|
||||||
|
|
||||||
export const VIDEO_QUALITY_OPTIONS = [AUTO, ORIGINAL, 144, 240, 360, 480, 720, 1080];
|
export const VIDEO_QUALITY_OPTIONS = [AUTO, ORIGINAL, 144, 240, 360, 480, 720, 1080];
|
||||||
|
|
Loading…
Reference in a new issue