@react95/core
Version:
Windows 95 styleguide
208 lines (207 loc) • 7.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const React = require("react");
const icons = require("@react95/icons");
const Video_css = require("./Video.css.cjs");
const Frame = require("../Frame/Frame.cjs");
const Button = require("../Button/Button.cjs");
const Range = require("../Range/Range.cjs");
const TitleBar = require("../TitleBar/TitleBar.cjs");
const Play = require("./buttons/Play.cjs");
const Pause = require("./buttons/Pause.cjs");
const Stop = require("./buttons/Stop.cjs");
const Fullscreen = require("./buttons/Fullscreen.cjs");
const cn = require("classnames");
const Source = ({ src }) => /* @__PURE__ */ React.createElement("source", { src, type: `video/${src.substring(src.length - 3)}` });
const PlayOrPause = ({ playing }) => playing ? /* @__PURE__ */ React.createElement(Pause, null) : /* @__PURE__ */ React.createElement(Play, null);
const arrayFy = (str) => [].concat(str);
function updateProgressBar(player, updateProgress) {
const percentage = Math.floor(100 / player.duration * player.currentTime);
updateProgress(percentage);
}
function parseCurrentTime(secs) {
if (!secs) {
return "00:00";
}
const sec = parseInt(secs.toString(), 10);
const hours = Math.floor(sec / 3600);
const minutes = Math.floor(sec / 60) % 60;
const seconds = sec % 60;
return [hours, minutes, seconds].map((v) => v < 10 ? `0${v}` : v).filter((v, i) => v !== "00" || i > 0).join(":");
}
const VideoRenderer = ({ name, src, videoProps, ...props }, ref) => {
const [playing, setPlaying] = React.useState(false);
const [loadeddata, setLoadeddata] = React.useState(false);
const [progress, setProgress] = React.useState(0);
const player = React.useRef(null);
const progressRef = React.useRef(null);
const wrapperRef = React.useRef(null);
const playPauseRef = React.useRef(null);
const stopRef = React.useRef(null);
const fullScreenRef = React.useRef(null);
const paths = arrayFy(src);
const [pathname] = paths;
const normalizedName = name || pathname.replace(/^.*[\\/]/, "");
const title = `${normalizedName}${!loadeddata ? " (Opening)" : ""}`;
React.useImperativeHandle(ref, () => ({
get video() {
return player;
},
get progress() {
return progressRef;
},
get wrapper() {
return wrapperRef;
},
get playpause() {
return playPauseRef;
},
get stop() {
return stopRef;
},
get fullScreen() {
return fullScreenRef;
}
}));
React.useEffect(() => {
var _a, _b, _c, _d;
(_a = player.current) == null ? void 0 : _a.addEventListener(
"ended",
() => {
setPlaying(false);
setProgress(0);
},
false
);
(_b = player.current) == null ? void 0 : _b.addEventListener(
"timeupdate",
() => {
if (player.current) {
updateProgressBar(player.current, setProgress);
}
},
false
);
(_c = player.current) == null ? void 0 : _c.addEventListener(
"loadeddata",
() => {
setLoadeddata(true);
},
false
);
(_d = player.current) == null ? void 0 : _d.addEventListener(
"playing",
() => {
setPlaying(true);
},
false
);
}, [player.current]);
return /* @__PURE__ */ React.createElement(
Frame.Frame,
{
...props,
padding: "$2",
boxShadow: "$out",
backgroundColor: "$material",
ref: wrapperRef
},
/* @__PURE__ */ React.createElement(TitleBar.TitleBar, { icon: /* @__PURE__ */ React.createElement(icons.Mplayer113, { variant: "16x16_4" }), title }),
/* @__PURE__ */ React.createElement(
"video",
{
className: Video_css.videoTag({ visible: loadeddata }),
...videoProps,
ref: player
},
paths.map((s) => /* @__PURE__ */ React.createElement(Source, { key: s, src: s }))
),
loadeddata && /* @__PURE__ */ React.createElement("span", { className: Video_css.divider }),
/* @__PURE__ */ React.createElement(Frame.Frame, { maxWidth: "250px", mx: "auto", mb: "$4" }, /* @__PURE__ */ React.createElement("div", { className: Video_css.countDownContainer }, /* @__PURE__ */ React.createElement(Frame.Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React.createElement(
"div",
{
className: Video_css.videoFont,
style: {
marginTop: "auto"
}
},
player.current && parseCurrentTime(player.current.duration)
), /* @__PURE__ */ React.createElement("div", { className: Video_css.videoFont, style: { height: 12 } }, !loadeddata && "Openning")), /* @__PURE__ */ React.createElement(Frame.Frame, { display: "flex", flexDirection: "column", w: "40%" }, /* @__PURE__ */ React.createElement("div", { className: cn(Video_css.videoFont, Video_css.currentTime) }, player.current && parseCurrentTime(player.current.currentTime)), /* @__PURE__ */ React.createElement("div", { className: cn(Video_css.videoFont, Video_css.elapsedTime) }, "time"))), /* @__PURE__ */ React.createElement("div", { className: Video_css.controls }, /* @__PURE__ */ React.createElement(
Button.Button,
{
as: "button",
className: Video_css.controlBtn,
disabled: !loadeddata,
onClick: () => {
var _a, _b;
if (!playing) {
(_a = player.current) == null ? void 0 : _a.play();
} else {
(_b = player.current) == null ? void 0 : _b.pause();
}
setPlaying(!playing);
},
ref: playPauseRef
},
loadeddata ? /* @__PURE__ */ React.createElement(PlayOrPause, { playing }) : /* @__PURE__ */ React.createElement(
icons.User4,
{
style: { borderRight: "none", borderBottom: "none" },
variant: "32x32_4"
}
)
), /* @__PURE__ */ React.createElement(
Button.Button,
{
className: Video_css.controlBtn,
disabled: !loadeddata,
onClick: () => {
if (player.current) {
player.current.pause();
player.current.currentTime = 0;
}
setPlaying(false);
},
ref: stopRef
},
/* @__PURE__ */ React.createElement(Stop, null)
), /* @__PURE__ */ React.createElement(
Button.Button,
{
className: Video_css.controlBtn,
disabled: !loadeddata,
onClick: () => {
var _a;
(_a = player == null ? void 0 : player.current) == null ? void 0 : _a.requestFullscreen();
},
ref: fullScreenRef
},
/* @__PURE__ */ React.createElement(Fullscreen, null)
), /* @__PURE__ */ React.createElement(
Range.Range,
{
className: Video_css.range,
ref: progressRef,
min: "0",
max: "100",
step: "1",
value: progress,
style: {
width: "70%",
marginLeft: 20
},
onChange: ({ target }) => {
const { current: video } = player;
if (video) {
const value = parseInt(target.value);
const percent = value / 100;
video.currentTime = percent * video.duration;
setProgress(value);
}
}
}
)))
);
};
const Video = React.forwardRef(VideoRenderer);
exports.Video = Video;