@vnejs/uis.react.video 0.1.1

package/dist/Video.d.ts

@@ -0,0 +1,3 @@
+import { type VideoProps } from "./Video.types.js";
+export declare const Video: ({ src, loop, isPlaying, transition, opacity, volume, className, onEnded, }: VideoProps) => import("react").JSX.Element;
+//# sourceMappingURL=Video.d.ts.map

package/dist/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../src/Video.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMnD,eAAO,MAAM,KAAK,GAAI,4EASnB,UAAU,gCAqDZ,CAAC"}

package/dist/Video.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { b } from "./Video.styles.js";
+const TRANSPARENT_IMAGE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiLz4=";
+export const Video = ({ src = "", loop = false, isPlaying = true, transition = 0, opacity = null, volume = 1, className = "", onEnded, }) => {
+    const videoRef = useRef(null);
+    const style = useMemo(() => {
+        const result = {
+            transition: transition ? `${transition}ms` : "none",
+        };
+        if (opacity !== null)
+            result.opacity = opacity;
+        return result;
+    }, [transition, opacity]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.volume = volume;
+        video.loop = loop;
+        if (!isPlaying) {
+            video.pause();
+            video.currentTime = 0;
+            return;
+        }
+        if (src)
+            void video.play().catch(() => undefined);
+    }, [src, loop, volume, isPlaying]);
+    const handleEnded = useCallback(() => {
+        if (loop)
+            return;
+        videoRef.current?.pause();
+        onEnded?.();
+    }, [loop, onEnded]);
+    if (!src)
+        return null;
+    return (_jsx("video", { ref: videoRef, className: b({}, [className]), style: style, src: src, loop: loop, playsInline: true, muted: false, poster: TRANSPARENT_IMAGE, crossOrigin: "anonymous", disablePictureInPicture: true, onEnded: handleEnded }));
+};
+//# sourceMappingURL=Video.js.map

package/dist/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sourceRoot":"","sources":["../src/Video.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAEtC,MAAM,iBAAiB,GAAG,4GAA4G,CAAC;AAEvI,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,GAAG,GAAG,EAAE,EACR,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,IAAI,EAChB,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,IAAI,EACd,MAAM,GAAG,CAAC,EACV,SAAS,GAAG,EAAE,EACd,OAAO,GACI,EAAE,EAAE;IACf,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAoC;YAC9C,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,CAAC,MAAM;SACpD,CAAC;QAEF,IAAI,OAAO,KAAK,IAAI;YAAE,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;QAE/C,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAElB,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,KAAK,CAAC,KAAK,EAAE,CAAC;YACd,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAI,GAAG;YAAE,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,IAAI;YAAE,OAAO;QAEjB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC1B,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IAEtB,OAAO,CACL,gBACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EAC7B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,WAAW,QACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAC,WAAW,EACvB,uBAAuB,QACvB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/Video.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const b: any;
+//# sourceMappingURL=Video.styles.d.ts.map

package/dist/Video.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.styles.d.ts","sourceRoot":"","sources":["../src/Video.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,KAAc,CAAC"}

package/dist/Video.styles.js

@@ -0,0 +1,14 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Video");
+const CSS = `
+${sel(b())} {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Video.styles.js.map

package/dist/Video.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.styles.js","sourceRoot":"","sources":["../src/Video.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC;AAE7B,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;CAQT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/dist/Video.types.d.ts

@@ -0,0 +1,12 @@
+import type { CssInsertValueNumber } from "@vnejs/uis.utils";
+export type VideoProps = {
+    src?: string;
+    loop?: boolean;
+    isPlaying?: boolean;
+    transition?: CssInsertValueNumber;
+    opacity?: CssInsertValueNumber | null;
+    volume?: number;
+    className?: string;
+    onEnded?: () => void;
+};
+//# sourceMappingURL=Video.types.d.ts.map

package/dist/Video.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.types.d.ts","sourceRoot":"","sources":["../src/Video.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC"}

package/dist/Video.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Video.types.js.map

package/dist/Video.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.types.js","sourceRoot":"","sources":["../src/Video.types.tsx"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { VideoProps } from "./Video.types.js";
+export { Video } from "./Video.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Video } from "./Video.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vnejs/uis.react.video",
+  "version": "0.1.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npx @vnejs/monorepo package",
+    "publish:major:uis:react": "npm run publish:major",
+    "publish:minor:uis:react": "npm run publish:minor",
+    "publish:patch:uis:react": "npm run publish:patch",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
+  },
+  "peerDependencies": {
+    "@vnejs/uis.utils": "~0.1.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ]
+}

package/src/Video.styles.ts

@@ -0,0 +1,16 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Video");
+
+const CSS = `
+${sel(b())} {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+`;
+
+injectStyles(CSS);

package/src/Video.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { type VideoProps } from "./Video.types.js";
+
+import { b } from "./Video.styles.js";
+
+const TRANSPARENT_IMAGE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiLz4=";
+
+export const Video = ({
+  src = "",
+  loop = false,
+  isPlaying = true,
+  transition = 0,
+  opacity = null,
+  volume = 1,
+  className = "",
+  onEnded,
+}: VideoProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const style = useMemo(() => {
+    const result: Record<string, string | number> = {
+      transition: transition ? `${transition}ms` : "none",
+    };
+
+    if (opacity !== null) result.opacity = opacity;
+
+    return result;
+  }, [transition, opacity]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    video.volume = volume;
+    video.loop = loop;
+
+    if (!isPlaying) {
+      video.pause();
+      video.currentTime = 0;
+      return;
+    }
+
+    if (src) void video.play().catch(() => undefined);
+  }, [src, loop, volume, isPlaying]);
+
+  const handleEnded = useCallback(() => {
+    if (loop) return;
+
+    videoRef.current?.pause();
+    onEnded?.();
+  }, [loop, onEnded]);
+
+  if (!src) return null;
+
+  return (
+    <video
+      ref={videoRef}
+      className={b({}, [className])}
+      style={style}
+      src={src}
+      loop={loop}
+      playsInline
+      muted={false}
+      poster={TRANSPARENT_IMAGE}
+      crossOrigin="anonymous"
+      disablePictureInPicture
+      onEnded={handleEnded}
+    />
+  );
+};

package/src/Video.types.tsx

@@ -0,0 +1,12 @@
+import type { CssInsertValueNumber } from "@vnejs/uis.utils";
+
+export type VideoProps = {
+  src?: string;
+  loop?: boolean;
+  isPlaying?: boolean;
+  transition?: CssInsertValueNumber;
+  opacity?: CssInsertValueNumber | null;
+  volume?: number;
+  className?: string;
+  onEnded?: () => void;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { VideoProps } from "./Video.types.js";
+export { Video } from "./Video.js";

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../../globals.d.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.stories.tsx"
+  ]
+}