feat: release v0.0.1

dist/react/video-player/video-player.js

@@ -0,0 +1,59 @@
+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