59 lines
3.0 KiB
JavaScript
59 lines
3.0 KiB
JavaScript
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||
|
|
import "./tach-video-js.css";
|
||
|
|
import { memo, useMemo } from "react";
|
||
|
|
import cn from "classnames";
|
||
|
|
import VideoJS from "./components/video-js";
|
||
|
|
import WithBlur from "./components/with-blur";
|
||
|
|
import WithCover from "./components/with-cover";
|
||
|
|
import WithDurationBadge from "./components/with-duration-badge";
|
||
|
|
import WithErrors from "./components/with-errors";
|
||
|
|
import { WithMouseEvents } from "./components/with-mouse-events";
|
||
|
|
import { WithObservation } from "./components/with-observation";
|
||
|
|
import WithProcessing from "./components/with-processing";
|
||
|
|
import { gcd } from "./shared/math";
|
||
|
|
import styles from "./video.module.scss";
|
||
|
|
const calculateAspectWidth = (width, height) => {
|
||
|
|
const divisor = gcd(width, height);
|
||
|
|
return width / divisor;
|
||
|
|
};
|
||
|
|
const calculateAspectHeight = (width, height) => {
|
||
|
|
const divisor = gcd(width, height);
|
||
|
|
return height / divisor;
|
||
|
|
};
|
||
|
|
const calculateAspectRatio = (width, height) => {
|
||
|
|
const aspectWidth = calculateAspectWidth(width, height) > 20
|
||
|
|
? 20
|
||
|
|
: calculateAspectWidth(width, height);
|
||
|
|
const aspectHeight = calculateAspectHeight(width, height) > 15
|
||
|
|
? 11
|
||
|
|
: calculateAspectHeight(width, height);
|
||
|
|
return `${aspectWidth}:${aspectHeight}`;
|
||
|
|
};
|
||
|
|
export const VideoPlayer = memo(({ src, type, showErrors = false, showProcessing = false, withLoading = false, withBlur = false, duration = false, preload = "auto", controls = true, muted = false, fluid = true, responsive = true, autoplay = false, width, height, aspectRatio, preferHQ = false, lazy = false, debug = false, forceHover = false, ...props }) => {
|
||
|
|
const videoJsOptions = {
|
||
|
|
autoplay,
|
||
|
|
controls,
|
||
|
|
responsive: true,
|
||
|
|
aspectRatio: useMemo(() => aspectRatio
|
||
|
|
? aspectRatio === "none"
|
||
|
|
? undefined
|
||
|
|
: aspectRatio
|
||
|
|
: width && height
|
||
|
|
? calculateAspectRatio(width, height)
|
||
|
|
: "4:3", [aspectRatio, width, height]),
|
||
|
|
preload,
|
||
|
|
fluid,
|
||
|
|
muted,
|
||
|
|
sources: [{ src: src, type: type || "application/x-mpegurl" }],
|
||
|
|
preferHQ,
|
||
|
|
debug,
|
||
|
|
};
|
||
|
|
// TODO: change to provider or split props between layers
|
||
|
|
return (_jsx("div", { className: cn([styles.videoMain, props.className]), style: {
|
||
|
|
// width: width || undefined,
|
||
|
|
aspectRatio: videoJsOptions.aspectRatio?.split(":").join("/"),
|
||
|
|
}, children: _jsx(WithProcessing, { options: videoJsOptions, showProcessing: showProcessing, ...props, children: _jsx(WithDurationBadge, { duration: !showProcessing && duration, children: _jsx(WithCover, { cover: videoJsOptions.poster, forceHover: forceHover, children: _jsx(WithErrors, { showErrors: !showProcessing && showErrors, children: _jsx(WithBlur, { withBlur: !showProcessing && withBlur, children: _jsx(WithObservation, { children: _jsx(WithMouseEvents, { children: _jsx(VideoJS, {}) }) }) }) }) }) }) }) }));
|
||
|
|
});
|
||
|
|
VideoPlayer.displayName = "VideoPlayer";
|
||
|
|
export default VideoPlayer;
|
||
|
|
//# sourceMappingURL=video-player.js.map
|