123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- /**
- * These are custom helper methods that are not native
- * to the HTMLMediaElement API. Pass in the native
- * Video element, state and optional desired value to
- * set. To be primarily used in `mapVideoElToProps`.
- */
- export const togglePause = (videoEl, { paused }) => {
- const videoTitleEl = document.getElementById("videoTitle")
- if (videoTitleEl) {
- if (paused) {
- videoEl.play();
- videoTitleEl.style.display = 'none';
- } else {
- videoEl.pause();
- videoTitleEl.style.display = '';
- }
- }
- };
-
- export const setCurrentTime = (videoEl, state, value) => {
- videoEl.currentTime = value;
- };
-
- export const setVolume = (videoEl, state, value) => {
- videoEl.muted = false;
- videoEl.volume = value;
- };
-
- export const mute = (videoEl) => {
- videoEl.muted = true;
- };
-
- export const unmute = (videoEl) => {
- videoEl.muted = false;
- };
-
- export const toggleMute = (videoEl, { volume, muted }) => {
- if (muted || volume <= 0) {
- if (volume <= 0) {
- videoEl.volume = 1;
- }
- videoEl.muted = false;
- } else {
- videoEl.muted = true;
- }
- };
-
- export const toggleFullscreen = (videoEl, callback) => {
- videoEl.requestFullScreen =
- videoEl.requestFullscreen
- || videoEl.msRequestFullscreen
- || videoEl.mozRequestFullScreen
- || videoEl.webkitRequestFullscreen;
- document.exitFullscreen =
- document.exitFullscreen
- || document.msExitFullscreen
- || document.mozCancelFullScreen
- || document.webkitExitFullscreen;
- const fullscreenElement =
- document.fullscreenElement
- || document.msFullscreenElement
- || document.mozFullScreenElement
- || document.webkitFullscreenElement;
- if (fullscreenElement === videoEl) {
- document.querySelector('video').style.maxHeight = '100%';
- window.fullscreen = false;
- document.exitFullscreen();
- } else {
- document.querySelector('video').style.maxHeight = '100%';
- window.fullscreen = true;
- videoEl.requestFullScreen();
- }
- };
-
- export const showTrack = ({ textTracks }, track) => {
- hideTracks({ textTracks });
- track.mode = track.SHOWING || 'showing';
- };
-
- export const hideTracks = ({ textTracks }) => {
- for (var i = 0; i < textTracks.length; i++) {
- textTracks[i].mode = textTracks[i].DISABLED || 'disabled';
- }
- };
-
- export const toggleTracks = (() => {
- let previousTrack;
- return ({ textTracks }) => {
- let currentTrack = [...textTracks]
- .filter((track) => track.mode === track.SHOWING || track.mode === 'showing')[0];
- if (currentTrack) {
- hideTracks({ textTracks });
- previousTrack = currentTrack;
- } else {
- showTrack({ textTracks }, previousTrack || textTracks[0]);
- }
- }
- })();
-
- export const showSpeed = (videoEl, state, speed) => {
- let playbackrates = state.playbackrates;
- hideSpeeds(videoEl, { playbackrates });
- speed.mode = speed.SHOWING || 'showing';
- if (videoEl.dataset) {
- videoEl.dataset['playbackrates'] = JSON.stringify(playbackrates);
- } else {
- videoEl.setAttribute("data-playbackrates", JSON.stringify(playbackrates));
- }
- videoEl.playbackRate = speed.id;
- };
-
- export const hideSpeeds = (videoEl, state) => {
- let playbackrates = state.playbackrates;
- for (var i = 0; i < playbackrates.length; i++) {
- playbackrates[i].mode = playbackrates[i].DISABLED || 'disabled';
- }
- };
-
- export const toggleSpeeds = (() => {
- let previousSpeed;
- return (videoEl, state) => {
- let playbackrates = state.playbackrates;
-
- let currentSpeed = playbackrates
- .filter((item) => item.mode === 'showing')[0];
-
- if (currentSpeed) {
- hideSpeeds(videoEl, { playbackrates });
- previousSpeed = currentSpeed;
- } else {
- showSpeed(videoEl, { playbackrates }, previousSpeed || playbackrates[0]);
- }
- }
- })();
-
- /**
- * Custom getter methods that are commonly used
- * across video layouts. To be primarily used in
- * `mapStateToProps`
- */
- export const getPercentageBuffered = ({ buffered, duration }) =>
- buffered && buffered.length && buffered.end(buffered.length - 1) / duration * 100 || 0;
-
- export const getPercentagePlayed = ({ currentTime, duration }) =>
- currentTime / duration * 100;
|