react-cp-youtube
Version:
YouTube player with custom controls implemented in React.
811 lines (785 loc) • 52.8 kB
JavaScript
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var reactDeviceDetect = require('react-device-detect');
var reactFullScreen = require('react-full-screen');
var YouTube = require('react-youtube');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var YouTube__default = /*#__PURE__*/_interopDefaultLegacy(YouTube);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
var ToggleButton = function (props) {
var _a = React.useState(props.value), state = _a[0], setState = _a[1];
React.useEffect(function () {
setState(props.value);
}, [props.value]);
var toggle = function () {
var newState = !state;
setState(newState);
props.onToggle(newState);
};
return (React.createElement("div", { onClick: toggle, className: "toggleButton", style: props.style },
React.createElement("img", { src: state ? props.onImage : props.offImage, alt: "toggleButton", className: "toggleButtonImage" })));
};
var VideoProgress = function (props) {
var _a = React.useState(props.value), val = _a[0], setVal = _a[1];
var outer_div = React.useRef(null);
var _b = React.useState(false), showMouseTracker = _b[0], setShowMouseTracker = _b[1];
var _mouse_pressed = React.useRef(false);
var bounds_width = React.useRef(0);
var bounds_left = React.useRef(0);
var handleTouchMove = function (event) {
event.preventDefault();
handleMove(event.changedTouches[0].pageX);
};
var handleMouseMove = function (event) {
event.preventDefault();
handleMove(event.pageX);
};
var handleMove = function (pgX) {
if (_mouse_pressed.current) {
var max = bounds_width.current;
var pos = pgX - bounds_left.current;
var percentage = Math.round((pos / max) * 100);
if (percentage > 100)
percentage = 100;
if (percentage < 0)
percentage = 0;
setVal(percentage);
props.onInput(percentage);
}
};
var handleMouseDown = function (event) {
var _a;
event.preventDefault();
var bounds = (_a = outer_div.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
if (bounds) {
bounds_width.current = bounds.width;
bounds_left.current = bounds.left;
}
_mouse_pressed.current = true;
setShowMouseTracker(true);
};
var handleMouseUp = function (event) {
event.preventDefault();
_mouse_pressed.current = false;
props.onChange(val);
setShowMouseTracker(false);
};
var handleClick = function (event) {
var _a;
event.preventDefault();
var bounds = (_a = outer_div.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
if (bounds) {
var max = bounds.width;
var pos = event.pageX - bounds.left;
var percentage = Math.round((pos / max) * 100);
if (percentage > 100)
percentage = 100;
if (percentage < 0)
percentage = 0;
setVal(percentage);
props.onChange(percentage);
}
};
React.useEffect(function () {
if (!_mouse_pressed.current) {
setVal(props.value);
}
}, [props.value]);
return (React.createElement("div", null,
showMouseTracker && (React.createElement("div", { className: "hidden-mouse-tracker unselectable", onMouseMove: handleMouseMove, onTouchMove: handleTouchMove, onMouseUp: handleMouseUp, onTouchEnd: handleMouseUp, onMouseLeave: handleMouseUp })),
React.createElement("div", { className: "custom-youtube-player-progress-bar-outer unselectable", onClick: handleClick, ref: outer_div },
React.createElement("div", { className: "custom-youtube-player-progress-bar-inner unselectable", onClick: handleClick, style: {
width: Math.min(val, 100) + "%",
backgroundColor: props.color,
transition: _mouse_pressed.current ? "none" : "width 0.5s linear",
} },
React.createElement("div", { className: "custom-youtube-player-progress-bar-knob unselectable", style: {
left: "calc(" + Math.min(val, 100) + "% - 6px)",
backgroundColor: props.color,
transition: _mouse_pressed.current ? "none" : "left 0.5s linear",
}, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown }),
reactDeviceDetect.isMobile && (React.createElement("div", { className: "custom-youtube-player-progress-bar-hidden-knob unselectable", style: {
left: "calc(" + Math.min(val, 100) + "% - 18px)",
}, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown }))))));
};
function useWindowSize() {
// Initialize state with undefined width/height so server and client renders match
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
var _a = React.useState({
width: 0,
height: 0,
}), windowSize = _a[0], setWindowSize = _a[1];
React.useEffect(function () {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
// Add event listener
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return function () { return window.removeEventListener("resize", handleResize); };
}, []); // Empty array ensures that effect is only run on mount
return windowSize;
}
var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='476px' height='497px' viewBox='0 0 476 497' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3ecog-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='cog-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M469.4%2c307.7 L426.8%2c283.1 C431.1%2c259.9 431.1%2c236.1 426.8%2c212.9 L469.4%2c188.3 C474.3%2c185.5 476.5%2c179.7 474.9%2c174.3 C463.8%2c138.7 444.9%2c106.5 420.2%2c79.7 C416.4%2c75.6 410.2%2c74.6 405.4%2c77.4 L362.8%2c102 C344.9%2c86.6 324.3%2c74.7 302%2c66.9 L302%2c17.8 C302%2c12.2 298.1%2c7.3 292.6%2c6.1 C255.9%2c-2.1 218.3%2c-1.7 183.4%2c6.1 C177.9%2c7.3 174%2c12.2 174%2c17.8 L174%2c67 C151.8%2c74.9 131.2%2c86.8 113.2%2c102.1 L70.7%2c77.5 C65.8%2c74.7 59.7%2c75.6 55.9%2c79.8 C31.2%2c106.5 12.3%2c138.7 1.2%2c174.4 C-0.5%2c179.8 1.8%2c185.6 6.7%2c188.4 L49.3%2c213 C45%2c236.2 45%2c260 49.3%2c283.2 L6.7%2c307.8 C1.8%2c310.6 -0.4%2c316.4 1.2%2c321.8 C12.3%2c357.4 31.2%2c389.6 55.9%2c416.4 C59.7%2c420.5 65.9%2c421.5 70.7%2c418.7 L113.3%2c394.1 C131.2%2c409.5 151.8%2c421.4 174.1%2c429.2 L174.1%2c478.4 C174.1%2c484 178%2c488.9 183.5%2c490.1 C220.2%2c498.3 257.8%2c497.9 292.7%2c490.1 C298.2%2c488.9 302.1%2c484 302.1%2c478.4 L302.1%2c429.2 C324.3%2c421.3 344.9%2c409.4 362.9%2c394.1 L405.5%2c418.7 C410.4%2c421.5 416.5%2c420.6 420.3%2c416.4 C445%2c389.7 463.9%2c357.5 475%2c321.8 C476.5%2c316.3 474.3%2c310.5 469.4%2c307.7 Z M238%2c328 C193.9%2c328 158%2c292.1 158%2c248 C158%2c203.9 193.9%2c168 238%2c168 C282.1%2c168 318%2c203.9 318%2c248 C318%2c292.1 282.1%2c328 238%2c328 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='448px' height='448px' viewBox='0 0 448 448' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3ecompress-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='compress-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M436%2c160 L312%2c160 C298.7%2c160 288%2c149.3 288%2c136 L288%2c12 C288%2c5.4 293.4%2c0 300%2c0 L340%2c0 C346.6%2c0 352%2c5.4 352%2c12 L352%2c96 L436%2c96 C442.6%2c96 448%2c101.4 448%2c108 L448%2c148 C448%2c154.6 442.6%2c160 436%2c160 Z M160%2c136 L160%2c12 C160%2c5.4 154.6%2c0 148%2c0 L108%2c0 C101.4%2c0 96%2c5.4 96%2c12 L96%2c96 L12%2c96 C5.4%2c96 0%2c101.4 0%2c108 L0%2c148 C0%2c154.6 5.4%2c160 12%2c160 L136%2c160 C149.3%2c160 160%2c149.3 160%2c136 Z M160%2c436 L160%2c312 C160%2c298.7 149.3%2c288 136%2c288 L12%2c288 C5.4%2c288 0%2c293.4 0%2c300 L0%2c340 C0%2c346.6 5.4%2c352 12%2c352 L96%2c352 L96%2c436 C96%2c442.6 101.4%2c448 108%2c448 L148%2c448 C154.6%2c448 160%2c442.6 160%2c436 Z M352%2c436 L352%2c352 L436%2c352 C442.6%2c352 448%2c346.6 448%2c340 L448%2c300 C448%2c293.4 442.6%2c288 436%2c288 L312%2c288 C298.7%2c288 288%2c298.7 288%2c312 L288%2c436 C288%2c442.6 293.4%2c448 300%2c448 L340%2c448 C346.6%2c448 352%2c442.6 352%2c436 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='448px' height='448px' viewBox='0 0 448 448' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3eexpand-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='expand-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M0%2c148 L0%2c24 C0%2c10.7 10.7%2c0 24%2c0 L148%2c0 C154.6%2c0 160%2c5.4 160%2c12 L160%2c52 C160%2c58.6 154.6%2c64 148%2c64 L64%2c64 L64%2c148 C64%2c154.6 58.6%2c160 52%2c160 L12%2c160 C5.4%2c160 0%2c154.6 0%2c148 Z M288%2c12 L288%2c52 C288%2c58.6 293.4%2c64 300%2c64 L384%2c64 L384%2c148 C384%2c154.6 389.4%2c160 396%2c160 L436%2c160 C442.6%2c160 448%2c154.6 448%2c148 L448%2c24 C448%2c10.7 437.3%2c0 424%2c0 L300%2c0 C293.4%2c0 288%2c5.4 288%2c12 Z M436%2c288 L396%2c288 C389.4%2c288 384%2c293.4 384%2c300 L384%2c384 L300%2c384 C293.4%2c384 288%2c389.4 288%2c396 L288%2c436 C288%2c442.6 293.4%2c448 300%2c448 L424%2c448 C437.3%2c448 448%2c437.3 448%2c424 L448%2c300 C448%2c293.4 442.6%2c288 436%2c288 Z M160%2c436 L160%2c396 C160%2c389.4 154.6%2c384 148%2c384 L64%2c384 L64%2c300 C64%2c293.4 58.6%2c288 52%2c288 L12%2c288 C5.4%2c288 0%2c293.4 0%2c300 L0%2c424 C0%2c437.3 10.7%2c448 24%2c448 L148%2c448 C154.6%2c448 160%2c442.6 160%2c436 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$3 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='512px' height='386px' viewBox='0 0 512 386' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3eforward-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='forward-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M500.5%2c168.4 L308.5%2c8.4 C287.9%2c-8.7 256%2c5.6 256%2c33 L256%2c353 C256%2c380.4 287.9%2c394.8 308.5%2c377.6 L500.5%2c217.6 C515.8%2c204.8 515.8%2c181.2 500.5%2c168.4 Z M244.5%2c168.4 L52.5%2c8.4 C31.9%2c-8.7 0%2c5.6 0%2c33 L0%2c353 C0%2c380.4 31.9%2c394.8 52.5%2c377.6 L244.5%2c217.6 C259.8%2c204.8 259.8%2c181.2 244.5%2c168.4 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$4 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='448px' height='448px' viewBox='0 0 448 448' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3epause-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='pause-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M144%2c448 L48%2c448 C21.5%2c448 0%2c426.5 0%2c400 L0%2c48 C0%2c21.5 21.5%2c0 48%2c0 L144%2c0 C170.5%2c0 192%2c21.5 192%2c48 L192%2c400 C192%2c426.5 170.5%2c448 144%2c448 Z M448%2c400 L448%2c48 C448%2c21.5 426.5%2c0 400%2c0 L304%2c0 C277.5%2c0 256%2c21.5 256%2c48 L256%2c400 C256%2c426.5 277.5%2c448 304%2c448 L400%2c448 C426.5%2c448 448%2c426.5 448%2c400 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$5 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='448px' height='513px' viewBox='0 0 448 513' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3ePath%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='play-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M424.4%2c214.7 L72.4%2c6.6 C43.8%2c-10.3 0%2c6.1 0%2c47.9 L0%2c464 C0%2c501.5 40.7%2c524.1 72.4%2c505.3 L424.4%2c297.3 C455.8%2c278.8 455.9%2c233.2 424.4%2c214.7 Z' id='Path'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$6 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='438px' height='266px' viewBox='0 0 438 266' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3echevron-up-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='chevron-up-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M235.971%2c7.524 L430.314%2c201.867 C439.687%2c211.24 439.687%2c226.436 430.314%2c235.808 L407.647%2c258.475 C398.29%2c267.832 383.125%2c267.85 373.746%2c258.515 L219%2c104.495 L64.255%2c258.516 C54.876%2c267.851 39.711%2c267.833 30.354%2c258.476 L7.687%2c235.809 C-1.686%2c226.436 -1.686%2c211.24 7.687%2c201.868 L202.03%2c7.525 C211.402%2c-1.848 226.598%2c-1.848 235.971%2c7.524 Z' id='Path'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$7 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='352px' height='352px' viewBox='0 0 352 352' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3ePath%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='times-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M242.72%2c176 L342.79%2c75.93 C355.07%2c63.65 355.07%2c43.74 342.79%2c31.45 L320.55%2c9.21 C308.27%2c-3.07 288.36%2c-3.07 276.07%2c9.21 L176%2c109.28 L75.93%2c9.21 C63.65%2c-3.07 43.74%2c-3.07 31.45%2c9.21 L9.21%2c31.45 C-3.07%2c43.73 -3.07%2c63.64 9.21%2c75.93 L109.28%2c176 L9.21%2c276.07 C-3.07%2c288.35 -3.07%2c308.26 9.21%2c320.55 L31.45%2c342.79 C43.73%2c355.07 63.65%2c355.07 75.93%2c342.79 L176%2c242.72 L276.07%2c342.79 C288.35%2c355.07 308.27%2c355.07 320.55%2c342.79 L342.79%2c320.55 C355.07%2c308.27 355.07%2c288.36 342.79%2c276.07 L242.72%2c176 Z' id='Path'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var Icon = function (props) {
return (React.createElement("div", { className: "toggleButton" + " " + props.className, style: props.style, onClick: props.onClick },
React.createElement("img", { src: props.icon, alt: "icon", className: "toggleButtonImage" })));
};
var img$8 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='512px' height='384px' viewBox='0 0 512 384' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3evolume-mute-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='volume-mute-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M215.03%2c7.05 L126.06%2c96 L24%2c96 C10.74%2c96 0%2c106.74 0%2c120 L0%2c264 C0%2c277.25 10.74%2c288 24%2c288 L126.06%2c288 L215.03%2c376.95 C230.06%2c391.98 256%2c381.42 256%2c359.98 L256%2c24.02 C256%2c2.56 230.04%2c-7.96 215.03%2c7.05 Z M461.64%2c192 L507.28%2c146.36 C513.58%2c140.06 513.58%2c129.84 507.28%2c123.54 L484.46%2c100.72 C478.16%2c94.42 467.94%2c94.42 461.64%2c100.72 L416%2c146.36 L370.36%2c100.72 C364.06%2c94.42 353.84%2c94.42 347.54%2c100.72 L324.72%2c123.54 C318.42%2c129.84 318.42%2c140.06 324.72%2c146.36 L370.36%2c192 L324.73%2c237.63 C318.43%2c243.93 318.43%2c254.15 324.73%2c260.45 L347.55%2c283.27 C353.85%2c289.57 364.07%2c289.57 370.37%2c283.27 L416%2c237.64 L461.64%2c283.28 C467.94%2c289.58 478.16%2c289.58 484.46%2c283.28 L507.28%2c260.46 C513.58%2c254.16 513.58%2c243.94 507.28%2c237.64 L461.64%2c192 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$9 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='480px' height='384px' viewBox='0 0 480 384' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3evolume-up-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='volume-up-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M215.03%2c7.05 L126.06%2c96 L24%2c96 C10.74%2c96 0%2c106.74 0%2c120 L0%2c264 C0%2c277.25 10.74%2c288 24%2c288 L126.06%2c288 L215.03%2c376.95 C230.06%2c391.98 256%2c381.42 256%2c359.98 L256%2c24.02 C256%2c2.56 230.04%2c-7.96 215.03%2c7.05 Z M480%2c192 C480%2c128.47 447.94%2c70.06 394.23%2c35.76 C383.04%2c28.62 368.2%2c31.94 361.11%2c43.22 C354.02%2c54.5 357.33%2c69.43 368.52%2c76.58 C408.27%2c101.97 432%2c145.11 432%2c192 C432%2c238.89 408.27%2c282.03 368.52%2c307.42 C357.33%2c314.56 354.02%2c329.49 361.11%2c340.78 C367.62%2c351.14 382.23%2c355.92 394.23%2c348.24 C447.94%2c313.94 480%2c255.54 480%2c192 Z M338.23%2c115.13 C326.65%2c108.8 312.04%2c112.97 305.62%2c124.58 C299.23%2c136.19 303.46%2c150.78 315.07%2c157.19 C327.98%2c164.28 336%2c177.63 336%2c192 C336%2c206.38 327.98%2c219.72 315.08%2c226.81 C303.47%2c233.22 299.24%2c247.81 305.63%2c259.42 C312.06%2c271.08 326.68%2c275.22 338.24%2c268.87 C366.47%2c253.32 384.01%2c223.87 384.01%2c191.99 C384.01%2c160.11 366.47%2c130.67 338.23%2c115.13 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var img$a = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='385px' height='384px' viewBox='0 0 385 384' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3evolume-down-solid%3c/title%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='volume-down-solid' fill='white' fill-rule='nonzero'%3e %3cpath d='M215.03%2c7.04 L126.06%2c96 L24%2c96 C10.74%2c96 0%2c106.74 0%2c120 L0%2c264 C0%2c277.25 10.74%2c288 24%2c288 L126.06%2c288 L215.03%2c376.95 C230.06%2c391.98 256%2c381.42 256%2c359.98 L256%2c24.02 C256%2c2.55 230.04%2c-7.96 215.03%2c7.04 Z M338.23%2c115.12 C326.65%2c108.79 312.04%2c112.96 305.62%2c124.57 C299.23%2c136.18 303.46%2c150.77 315.07%2c157.18 C327.98%2c164.28 336%2c177.62 336%2c192 C336%2c206.38 327.98%2c219.72 315.08%2c226.81 C303.47%2c233.22 299.24%2c247.81 305.63%2c259.42 C312.06%2c271.08 326.68%2c275.22 338.24%2c268.87 C366.47%2c253.32 384.01%2c223.87 384.01%2c191.99 C384.01%2c160.11 366.47%2c130.67 338.23%2c115.12 Z' id='Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
var VolumeControl = function (props) {
var _a = React.useState(false), showVolume = _a[0], setShowVolume = _a[1];
// ############# Volume expand ##############
var enterVolumeArea = function (event) {
event.preventDefault();
setShowVolume(true);
};
var leaveVolumeArea = function (event) {
event.preventDefault();
setShowVolume(false);
};
return (React.createElement("div", { className: "volume-container", onMouseEnter: enterVolumeArea, onMouseLeave: leaveVolumeArea },
React.createElement(Icon, { style: { width: "1em" }, icon: props.volume == 0
? img$8
: props.volume < 50
? img$a
: img$9, onClick: function () { return props.onVolumeChange(props.volume == 0 ? 100 : 0); } }),
(showVolume || props.alwayShow) && (React.createElement("div", { style: {
width: "4em",
display: "inline-block",
verticalAlign: "middle",
marginLeft: "1em",
} },
React.createElement(VideoProgress, { value: props.volume, min: 0, max: 100, color: "white", onChange: props.onVolumeChange, onInput: props.onVolumeChange })))));
};
var player;
var VideoPlayer = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h;
var handle = reactFullScreen.useFullScreenHandle();
var _j = React.useState(0), time = _j[0], setTime = _j[1];
var _k = React.useState(100), volume = _k[0], setVolume = _k[1];
var _l = React.useState("0:00 / 0:00"), formatedTime = _l[0], setFormatedTime = _l[1];
var _m = React.useState(false), isFullscreen = _m[0], setIsFullscreen = _m[1];
var _o = React.useState(props.playing === undefined ? true : props.playing), isPlaying = _o[0], setIsPlaying = _o[1];
var _p = React.useState(true), showControls = _p[0], setShowControls = _p[1];
var _q = React.useState(false), hoverControls = _q[0], setHoverControls = _q[1];
var _r = React.useState(false), showPlaybackRateOptions = _r[0], setShowPlaybackRateOptions = _r[1];
var _s = React.useState(1.0), playbackRate = _s[0], setPlaybackRate = _s[1];
var _t = React.useState(false), showQualityOptions = _t[0], setShowQualityOptions = _t[1];
var _u = React.useState(["-"]), qualityLevels = _u[0], setQualityLevels = _u[1];
var _v = React.useState(0), fullScreenMargin = _v[0], setFullScreenMargin = _v[1];
var timeoutRef = React.useRef(null);
var size = useWindowSize();
//const [showVolume, setShowVolume] = useState(false);
var _w = React.useState(false), showMobileSettings = _w[0], setShowMobileSettings = _w[1];
var video_container = React.useRef(null);
var userInitiated = React.useRef(true);
var play = function () {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
youtubePlayer.playVideo();
userInitiated.current = false;
}
};
var pause = function () {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
youtubePlayer.pauseVideo();
userInitiated.current = false;
}
};
var seek = function (time) {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
youtubePlayer.seekTo(time);
userInitiated.current = false;
}
};
React.useEffect(function () {
if (isFullscreen) {
var availWidth = size.width;
var availHeight = size.height;
var videoHeight = (availWidth / 16) * 9;
var mgTop = (availHeight - videoHeight) / 2;
setFullScreenMargin(mgTop);
}
else {
setFullScreenMargin(0);
}
}, [size]);
//################## Handle prop changes ##################
/**
* Handle videoid change
*/
React.useEffect(function () {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
var startTime = 0;
if (props.time)
startTime = props.time;
youtubePlayer.loadVideoById(props.videoId, startTime);
if (props.playing) {
play();
}
else {
pause();
}
}
}, [props.videoId]);
var seekTime = function (time) { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, duration, newTime;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(player !== null)) return [3 /*break*/, 2];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getDuration()];
case 1:
duration = _a.sent();
newTime = time;
if (newTime > duration) {
newTime = duration;
}
else if (newTime < 0) {
newTime = 0;
}
youtubePlayer.seekTo(newTime);
return [2 /*return*/, newTime];
case 2: return [2 /*return*/, 0];
}
});
}); };
/**
* Handle time change
*/
React.useEffect(function () {
if (props.time !== undefined) {
seek(props.time);
}
}, [props.time]);
/**
* Handle playing change
*/
React.useEffect(function () {
if (props.playing !== undefined)
togglePlay(props.playing);
}, [props.playing]);
/**
* Handle playback rate change
*/
React.useEffect(function () {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
if (props.playing !== undefined)
youtubePlayer.setPlaybackRate(props.rate);
}
}, [props.rate]);
//################## Handle keyboard input ##################
//TODO: Correct type
var keyboardEvents = function (event) {
if (props.disableKb === true || event.target !== document.body)
return;
event.preventDefault();
switch (event.code) {
case "Space":
togglePlay(!isPlaying);
break;
case "ArrowRight":
skip();
break;
case "ArrowLeft":
back();
break;
}
};
/**
* Skip 5 seconds ahead
*/
var skip = function () { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, currentTime, newTime;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(player !== null)) return [3 /*break*/, 3];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getCurrentTime()];
case 1:
currentTime = _a.sent();
return [4 /*yield*/, seekTime(currentTime + 10)];
case 2:
newTime = _a.sent();
if (props.onTimeChange)
props.onTimeChange(newTime, userInitiated.current);
if (props.onTimeUpdate)
props.onTimeUpdate(newTime, userInitiated.current);
userInitiated.current = true;
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
/**
* Go back 5 seconds
*/
var back = function () { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, currentTime, newTime;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(player !== null)) return [3 /*break*/, 3];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getCurrentTime()];
case 1:
currentTime = _a.sent();
return [4 /*yield*/, seekTime(currentTime - 10)];
case 2:
newTime = _a.sent();
if (props.onTimeChange)
props.onTimeChange(newTime, userInitiated.current);
if (props.onTimeUpdate)
props.onTimeUpdate(newTime, userInitiated.current);
userInitiated.current = true;
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
React.useEffect(function () {
document.addEventListener("keydown", keyboardEvents, false);
return function () { return document.removeEventListener("keydown", keyboardEvents, false); };
});
//################## Other Functions ##################
var togglePlay = function (state) {
setIsPlaying(state);
if (player !== null) {
var youtubePlayer = player.internalPlayer;
if (state) {
youtubePlayer.playVideo();
}
else {
youtubePlayer.pauseVideo();
}
}
};
var volumeOnChange = function (val) { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer;
return __generator(this, function (_a) {
if (player !== null) {
youtubePlayer = player.internalPlayer;
if (val == 0) {
youtubePlayer.mute();
}
else if (youtubePlayer.isMuted()) {
youtubePlayer.unMute();
}
youtubePlayer.setVolume(val);
setVolume(val);
}
return [2 /*return*/];
});
}); };
//################## Time related functions ##################
var handleTimeChange = function (val) { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, duration, newTime;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
handleTimeInput(val);
if (!(player !== null)) return [3 /*break*/, 2];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getDuration()];
case 1:
duration = _a.sent();
newTime = (val / 100) * duration;
if (props.onTimeChange)
props.onTimeChange(newTime, userInitiated.current);
if (props.onTimeUpdate)
props.onTimeUpdate(newTime, userInitiated.current);
userInitiated.current = true;
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
var handleTimeInput = function (val) { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, duration;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(player !== null)) return [3 /*break*/, 2];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getDuration()];
case 1:
duration = _a.sent();
youtubePlayer.seekTo((val / 100) * duration);
setTime(val);
setFormatedTime(formatTime((val / 100) * duration) + " / " + formatTime(duration));
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
//Handles videoInformation time updates
React.useEffect(function () {
var interval = setInterval(function () { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, currentTime, duration;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(player !== null)) return [3 /*break*/, 3];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getCurrentTime()];
case 1:
currentTime = _a.sent();
return [4 /*yield*/, youtubePlayer.getDuration()];
case 2:
duration = _a.sent();
setTime((currentTime / duration) * 100);
setFormatedTime(formatTime(currentTime) + " / " + formatTime(duration));
if (props.onTimeUpdate) {
props.onTimeUpdate(currentTime, userInitiated.current);
userInitiated.current = true;
}
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); }, 500);
return function () { return clearInterval(interval); };
});
React.useEffect(function () {
var interval = setInterval(function () {
var elem = document.activeElement;
if (elem && elem.tagName == "IFRAME") {
clearInterval(interval);
window.focus();
elem.blur();
}
}, 100);
return function () { return clearInterval(interval); };
});
//################## Handle fullscreen change ##################
var fullscreenChanged = function (state, _) {
if (state) {
var availWidth = size.width;
var availHeight = size.height;
var videoHeight = (availWidth / 16) * 9;
var mgTop = (availHeight - videoHeight) / 2;
setFullScreenMargin(mgTop);
}
else {
setFullScreenMargin(0);
}
setIsFullscreen(state);
};
//################## Move detection ##################
var handleMove = function (_) {
setShowControls(true);
};
var handleMouseEnter = function (_) {
setHoverControls(true);
};
var handleMouseLeave = function (_) {
setHoverControls(false);
};
var MoveDetectors = function () {
var items = [];
for (var index = 0; index < 9; index++) {
items.push(React.createElement("div", { className: "moveDetectorHorizontal", key: "mdh-" + index, style: { top: index + 1 + "0%" }, onMouseMove: handleMove }));
items.push(React.createElement("div", { className: "moveDetectorVertical", key: "mdv-" + index, style: { left: index + 1 + "0%" }, onMouseMove: handleMove }));
}
return items;
};
React.useEffect(function () {
if (timeoutRef.current !== null) {
clearTimeout(timeoutRef.current);
}
if (hoverControls)
return;
timeoutRef.current = setTimeout(function () {
timeoutRef.current = null;
setShowControls(false);
}, 5000);
}, [showControls, hoverControls]);
//################## Handle youtube events ##################
var _onStateChange = function (event) {
if (props.onStateChange)
props.onStateChange(event.data);
};
var _onPlay = function () {
setShowControls(true);
setIsPlaying(true);
if (props.onPlay) {
props.onPlay(userInitiated.current);
userInitiated.current = true;
}
};
var _onPause = function () {
setShowControls(true);
setIsPlaying(false);
if (props.onPause) {
props.onPause(userInitiated.current);
userInitiated.current = true;
}
};
var _onEnd = function (_) {
if (props.onVideoFinished) {
console.warn("DEPRECATION WARNING: onVideoFinished will be deprecated in further versions. Please use onEnd.");
props.onVideoFinished();
}
if (props.onEnd)
props.onEnd();
};
var _onError = function (event) {
if (props.onError)
props.onError(event.data);
};
var _onReady = function (_) {
if (props.onReady)
props.onReady();
if (isPlaying) {
play();
}
else {
pause();
}
};
var _onPlaybackQualityChange = function (event) {
if (props.onPlaybackQualityChange)
props.onPlaybackQualityChange(event.data);
};
/**
* Handles the onPlaybackRateChange event of the YouTube player.
*/
var _onPlaybackRateChange = function () { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, playBackRate;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getPlaybackRate()];
case 1:
playBackRate = _a.sent();
if (props.onPlaybackRateChange)
props.onPlaybackRateChange(playBackRate);
setPlaybackRate(playBackRate);
return [2 /*return*/];
}
});
}); };
var changePlaybackRate = function (rate) {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
youtubePlayer.setPlaybackRate(rate);
}
setPlaybackRate(rate);
setShowPlaybackRateOptions(false);
};
var playbackRateOptions = function () {
var steps = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
return (React.createElement("div", { className: "control-options", style: { maxHeight: getVideoContainerHeight() * 0.8 } },
React.createElement("h2", null, "Speed"),
React.createElement("ul", null, steps.map(function (value, index) {
return (React.createElement("li", { key: index, onClick: function () { return changePlaybackRate(value); }, style: {
fontWeight: playbackRate == value ? "bold" : "initial",
} }, value == 1.0 ? "Standard" : value));
}))));
};
var changeQuality = function (quality) {
if (player !== null) {
var youtubePlayer = player.internalPlayer;
youtubePlayer.setPlaybackQuality(quality);
}
setShowQualityOptions(false);
};
var requestQualityLevels = function () { return __awaiter(void 0, void 0, void 0, function () {
var youtubePlayer, ql;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(player !== null)) return [3 /*break*/, 2];
youtubePlayer = player.internalPlayer;
return [4 /*yield*/, youtubePlayer.getAvailableQualityLevels()];
case 1:
ql = _a.sent();
setQualityLevels(ql);
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
var qualityOptions = function () {
requestQualityLevels();
return (React.createElement("div", { className: "control-options", style: { maxHeight: getVideoContainerHeight() * 0.8 } },
React.createElement("h2", null, "Quality"),
React.createElement("ul", null, qualityLevels.map(function (level, i) {
return (React.createElement("li", { onClick: function () { return changeQuality(level); }, key: i }, mapQuality(level)));
}))));
};
var getVideoContainerHeight = function () {
var _a;
var bounds = (_a = video_container.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
if (bounds) {
return bounds.height;
}
return 200;
};
var toggleQuality = function (s) {
if (s) {
setShowQualityOptions(false);
setShowPlaybackRateOptions(true);
}
else {
setShowQualityOptions(false);
setShowPlaybackRateOptions(false);
}
};
var togglePlaybackRate = function (s) {
if (s) {
setShowPlaybackRateOptions(false);
setShowQualityOptions(true);
}
else {
setShowPlaybackRateOptions(false);
setShowQualityOptions(false);
}
};
var toggleFullscreen = function (s) {
if (s) {
handle.enter();
}
else {
handle.exit();
}
};
var toggleMobileSettings = function (_) {
requestQualityLevels();
setShowMobileSettings(true);
};
// ############# Volume expand end ##########
var opts = {
height: "390",
width: "640",
playerVars: __assign({ controls: ((_a = props.options) === null || _a === void 0 ? void 0 : _a.controls) || 0, playsinline: ((_b = props.options) === null || _b === void 0 ? void 0 : _b.playsinline) || 1, rel: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.rel) || 0, modestbranding: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.modestbranding) || 1, autoplay: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.autoplay) || 1, disablekb: ((_f = props.options) === null || _f === void 0 ? void 0 : _f.disablekb) || 1, showinfo: ((_g = props.options) === null || _g === void 0 ? void 0 : _g.showinfo) || 0, iv_load_policy: ((_h = props.options) === null || _h === void 0 ? void 0 : _h.iv_load_policy) || 3 }, props.options),
};
var DesktopPlayer = function () {
return (React.createElement("div", null, showControls && (React.createElement("div", { className: "controls", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
React.createElement("div", { className: "controlRow0" },
showPlaybackRateOptions && playbackRateOptions(),
showQualityOptions && qualityOptions()),
React.createElement("div", { className: "control-shadow" },
React.createElement("div", { className: "controlRow1" },
React.createElement(VideoProgress, { value: time, min: 0, max: 100, color: "#ff0000", onChange: handleTimeChange, onInput: handleTimeInput })),
React.createElement("div", { className: "controlRow2" },
React.createElement(ToggleButton, { style: { marginRight: "0.5em", width: "1em" }, onToggle: togglePlay, onImage: img$4, offImage: img$5, value: isPlaying }),
React.createElement(VolumeControl, { volume: volume, onVolumeChange: volumeOnChange, alwayShow: false }),
React.createElement("span", { className: "timeInfo" }, formatedTime),
React.createElement("div", { style: { float: "right" } },
React.createElement(ToggleButton, { style: { marginRight: "1em" }, onToggle: toggleQuality, onImage: img$3, offImage: img$3, value: showPlaybackRateOptions }),
React.createElement(ToggleButton, { style: { marginRight: "1em" }, onToggle: togglePlaybackRate, onImage: img, offImage: img, value: showQualityOptions }),
React.createElement(ToggleButton, { style: {}, onToggle: toggleFullscreen, onImage: img$1, offImage: img$2, value: isFullscreen }))))))));
};
var MobilePlayer = function () {
return (React.createElement("div", null,
!showControls && (React.createElement("div", { onClick: function () { return setShowControls(true); }, className: "mobile-expand" },
React.createElement("img", { src: img$6, alt: "expand", className: "mobile-expand-icon" }))),
showControls && (React.createElement("div", { className: "controls", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
React.createElement("div", { className: "controlRow0" },
showPlaybackRateOptions && playbackRateOptions(),
showQualityOptions && qualityOptions()),
React.createElement("div", { className: "control-shadow" },
React.createElement("div", { className: "controlRow1" },
React.createElement(VideoProgress, { value: time, min: 0, max: 100, color: "#ff0000", onChange: handleTimeChange, onInput: handleTimeInput })),
React.createElement("div", { className: "controlRow2" },
React.createElement(ToggleButton, { style: { marginRight: "0.5em", width: "1em" }, onToggle: togglePlay, onImage: img$4, offImage: img$5, value: isPlaying }),
React.createElement("span", { className: "timeInfo" }, formatedTime),
React.createElement("div", { style: { float: "right" } },
React.createElement(ToggleButton, { style: { marginRight: "1em" }, onToggle: toggleMobileSettings, onImage: img, offImage: img, value: showPlaybackRateOptions }),
React.createElement(ToggleButton, { style: {}, onToggle: toggleFullscreen, onImage: img$1, offImage: img$2, value: isFullscreen })))))),
showMobileSettings && (React.createElement("div", { className: "mobile-settings-background" },
React.createElement("div", { className: "mobile-settings" },
React.createElement(Icon, { icon: img$7, onClick: function () { return setShowMobileSettings(false); }, className: "mobile-settings-close" }),
React.createElement("h2", null, "Volume"),
React.createElement("hr", null),
React.createElement(VolumeControl, { volume: volume, onVolumeChange: volumeOnChange, alwayShow: true }),
React.createElement("h2", null, "Quality"),
React.createElement("hr", null),
React.createElement("select", { onChange: function () { return changeQuality(""); } }, qualityLevels.map(function (level, i) {
return (React.createElement("option", { key: i, value: level }, mapQuality(level)));
})),
React.createElement("h2", null, "Playbackrate"),
React.createElement("hr", null),
React.createElement("select", { value: playbackRate, onChange: function (e) {
changePlaybackRate(parseF