react-language-selector-snipercruzz
Version:
A React component for selecting languages.
275 lines (274 loc) • 11.2 kB
JavaScript
;
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally{
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally{
if (_d) throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _type_of(obj) {
"@swc/helpers - typeof";
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o) return;
if (typeof o === "string") return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = function(target, all) {
for(var name in all)__defProp(target, name, {
get: all[name],
enumerable: true
});
};
var __copyProps = function(to, from, except, desc) {
if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
try {
var _loop = function() {
var key = _step.value;
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: function() {
return from[key];
},
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
};
for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally{
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally{
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return to;
};
var __toESM = function(mod, isNodeMode, target) {
return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod);
};
var __toCommonJS = function(mod) {
return __copyProps(__defProp({}, "__esModule", {
value: true
}), mod);
};
// index.ts
var index_exports = {};
__export(index_exports, {
VideoPlayer: function() {
return VideoPlayer_default;
}
});
module.exports = __toCommonJS(index_exports);
// src/VideoPlayer.tsx
var import_react = __toESM(require("react"));
var VideoPlayer = function(param) {
var sources = param.sources, _param_width = param.width, width = _param_width === void 0 ? "100%" : _param_width, _param_height = param.height, height = _param_height === void 0 ? "auto" : _param_height;
var videoRef = (0, import_react.useRef)(null);
var _ref = _sliced_to_array((0, import_react.useState)(0), 2), currentIndex = _ref[0], setCurrentIndex = _ref[1];
var _ref1 = _sliced_to_array((0, import_react.useState)(false), 2), playing = _ref1[0], setPlaying = _ref1[1];
var _ref2 = _sliced_to_array((0, import_react.useState)(false), 2), muted = _ref2[0], setMuted = _ref2[1];
var _ref3 = _sliced_to_array((0, import_react.useState)(1), 2), volume = _ref3[0], setVolume = _ref3[1];
var _ref4 = _sliced_to_array((0, import_react.useState)(0), 2), progress = _ref4[0], setProgress = _ref4[1];
var _ref5 = _sliced_to_array((0, import_react.useState)(0), 2), duration = _ref5[0], setDuration = _ref5[1];
var _ref6 = _sliced_to_array((0, import_react.useState)(false), 2), fullscreen = _ref6[0], setFullscreen = _ref6[1];
var _ref7 = _sliced_to_array((0, import_react.useState)(1), 2), playbackRate = _ref7[0], setPlaybackRate = _ref7[1];
var currentVideo = sources[currentIndex];
(0, import_react.useEffect)(function() {
var video = videoRef.current;
if (!video) return;
var handleTimeUpdate = function() {
return setProgress(video.currentTime);
};
var handleLoadedMetadata = function() {
return setDuration(video.duration);
};
video.addEventListener("timeupdate", handleTimeUpdate);
video.addEventListener("loadedmetadata", handleLoadedMetadata);
return function() {
video.removeEventListener("timeupdate", handleTimeUpdate);
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
};
}, [
currentIndex
]);
var togglePlay = function() {
var video = videoRef.current;
if (!video) return;
if (video.paused) {
video.play();
setPlaying(true);
} else {
video.pause();
setPlaying(false);
}
};
var toggleMute = function() {
if (videoRef.current) {
videoRef.current.muted = !muted;
setMuted(!muted);
}
};
var changeVolume = function(e) {
var newVolume = parseFloat(e.target.value);
if (videoRef.current) {
videoRef.current.volume = newVolume;
}
setVolume(newVolume);
};
var handleSeek = function(e) {
if (videoRef.current) {
var newTime = parseFloat(e.target.value);
videoRef.current.currentTime = newTime;
setProgress(newTime);
}
};
var toggleFullscreen = function() {
var _videoRef_current;
var container = (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.parentElement;
if (!container) return;
if (!document.fullscreenElement) {
var _container_requestFullscreen;
(_container_requestFullscreen = container.requestFullscreen) === null || _container_requestFullscreen === void 0 ? void 0 : _container_requestFullscreen.call(container);
setFullscreen(true);
} else {
var _document_exitFullscreen, _document;
(_document_exitFullscreen = (_document = document).exitFullscreen) === null || _document_exitFullscreen === void 0 ? void 0 : _document_exitFullscreen.call(_document);
setFullscreen(false);
}
};
var handleRateChange = function(e) {
var rate = parseFloat(e.target.value);
if (videoRef.current) {
videoRef.current.playbackRate = rate;
}
setPlaybackRate(rate);
};
var formatTime = function(time) {
return new Date(time * 1e3).toISOString().substr(time >= 3600 ? 11 : 14, 5);
};
var nextVideo = function() {
setCurrentIndex(function(prev) {
return (prev + 1) % sources.length;
});
setProgress(0);
};
var prevVideo = function() {
setCurrentIndex(function(prev) {
return (prev - 1 + sources.length) % sources.length;
});
setProgress(0);
};
return /* @__PURE__ */ import_react.default.createElement("div", {
style: {
width: width
}
}, /* @__PURE__ */ import_react.default.createElement("video", {
ref: videoRef,
src: currentVideo.src,
width: "100%",
height: height,
poster: currentVideo.thumbnail
}), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
marginTop: 8
}
}, /* @__PURE__ */ import_react.default.createElement("button", {
onClick: togglePlay
}, playing ? "Pause" : "Play"), /* @__PURE__ */ import_react.default.createElement("button", {
onClick: toggleMute
}, muted ? "Unmute" : "Mute"), /* @__PURE__ */ import_react.default.createElement("button", {
onClick: prevVideo
}, "\u23EE"), /* @__PURE__ */ import_react.default.createElement("button", {
onClick: nextVideo
}, "\u23ED"), /* @__PURE__ */ import_react.default.createElement("button", {
onClick: toggleFullscreen
}, fullscreen ? "Exit Fullscreen" : "Fullscreen"), /* @__PURE__ */ import_react.default.createElement("input", {
type: "range",
min: "0",
max: duration,
value: progress,
onChange: handleSeek,
step: "0.1"
}), /* @__PURE__ */ import_react.default.createElement("span", null, formatTime(progress), " / ", formatTime(duration)), /* @__PURE__ */ import_react.default.createElement("input", {
type: "range",
min: "0",
max: "1",
step: "0.01",
value: volume,
onChange: changeVolume
}), /* @__PURE__ */ import_react.default.createElement("select", {
value: playbackRate,
onChange: handleRateChange
}, [
0.5,
1,
1.5,
2
].map(function(rate) {
return /* @__PURE__ */ import_react.default.createElement("option", {
key: rate,
value: rate
}, rate, "x");
}))), currentVideo.label && /* @__PURE__ */ import_react.default.createElement("p", null, "Now Playing: ", currentVideo.label));
};
var VideoPlayer_default = VideoPlayer;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
VideoPlayer: VideoPlayer
});