@rudra-studio/rudra-media 1.0.1 → 1.0.2

package/components/CameraTest/index.d.ts

@@ -0,0 +1 @@
+export default function CameraTest(): import("react/jsx-runtime").JSX.Element;

package/components/CameraTest/index.js

@@ -0,0 +1,67 @@
+import e from "../StreamPlayer/index.js";
+import t from "../../hooks/useMedia.js";
+import { useCallback as n, useEffect as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/CameraTest/index.tsx
+function s() {
+	let [s, c] = i(null), [l, u] = i("idle"), [d, f] = i(null), { start: p, stop: m, isRecording: h, recordedVideo: g } = t(s), _ = async () => {
+		u("connecting"), f(null);
+		try {
+			c(await navigator.mediaDevices.getUserMedia({
+				video: !0,
+				audio: !0
+			})), u("live");
+		} catch {
+			f("Could not access camera"), u("error");
+		}
+	}, v = n(() => {
+		s && (h && m(), s.getTracks().forEach((e) => e.stop()), c(null), u("idle"));
+	}, [
+		s,
+		h,
+		m
+	]);
+	return r(() => () => v(), [v]), /* @__PURE__ */ o("div", {
+		className: "max-w-2xl mx-auto p-4 space-y-4",
+		children: [/* @__PURE__ */ a(e, {
+			stream: s,
+			status: l,
+			overlay: /* @__PURE__ */ o("div", {
+				className: "text-white text-center p-6",
+				children: [/* @__PURE__ */ a("p", {
+					className: "font-bold",
+					children: d || "Camera is off"
+				}), l === "idle" && /* @__PURE__ */ a("button", {
+					onClick: _,
+					className: "mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-semibold transition-colors",
+					children: "Enable Camera"
+				})]
+			}),
+			controls: l === "live" && /* @__PURE__ */ o("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ a("button", {
+					onClick: h ? m : p,
+					className: `px-6 py-2 rounded-full font-bold shadow-lg transition-transform hover:scale-105 ${h ? "bg-red-500 animate-pulse" : "bg-blue-600"}`,
+					children: h ? "Stop Recording" : "Record Video"
+				}), /* @__PURE__ */ a("button", {
+					onClick: v,
+					className: "px-6 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-full font-bold shadow-lg transition-transform hover:scale-105",
+					children: "Stop Camera"
+				})]
+			})
+		}), g && /* @__PURE__ */ o("div", {
+			className: "bg-slate-800 p-4 rounded-xl text-center",
+			children: [/* @__PURE__ */ a("p", {
+				className: "text-white mb-2",
+				children: "Recording Ready:"
+			}), /* @__PURE__ */ a("a", {
+				href: g,
+				download: "video.webm",
+				className: "text-blue-400 underline",
+				children: "Download File"
+			})]
+		})]
+	});
+}
+//#endregion
+export { s as default };

package/components/Image/index.d.ts

@@ -0,0 +1,11 @@
+export interface OptimizedImageProps {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    aspectRatio?: 'video' | 'square' | 'portrait' | 'auto';
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    blurPlaceholder?: string;
+    className?: string;
+}
+export default function OptimizedImage({ src, alt, width, height, aspectRatio, radius, blurPlaceholder, className }: OptimizedImageProps): import("react/jsx-runtime").JSX.Element;

package/components/Image/index.js

@@ -0,0 +1,27 @@
+import { useState as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Image/index.tsx
+function r({ src: r, alt: i, width: a, height: o, aspectRatio: s = "auto", radius: c = "xl", blurPlaceholder: l, className: u = "" }) {
+	let [d, f] = e(!1), [p, m] = e(!1);
+	return /* @__PURE__ */ n("div", {
+		className: `relative overflow-hidden bg-slate-200 shadow-lg ${c === "none" ? "rounded-none" : `rounded-${c}`} ${s === "video" ? "aspect-video" : s === "square" ? "aspect-square" : s === "portrait" ? "aspect-[3/4]" : "aspect-auto"} ${u}`,
+		style: {
+			width: a ? `${a}px` : "100%",
+			height: o ? `${o}px` : void 0
+		},
+		children: [l && !d && /* @__PURE__ */ t("img", {
+			src: l,
+			alt: "",
+			className: "absolute inset-0 w-full h-full object-cover blur-lg scale-110"
+		}), /* @__PURE__ */ t("img", {
+			src: p ? "https://placehold.co/400x400?text=Error" : r,
+			alt: i,
+			loading: "lazy",
+			onLoad: () => f(!0),
+			onError: () => m(!0),
+			className: `w-full h-full object-cover transition-opacity duration-700 ease-in-out ${d ? "opacity-100" : "opacity-0"}`
+		})]
+	});
+}
+//#endregion
+export { r as default };

package/components/StreamPlayer/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface StreamPlayerProps {
+    stream: MediaStream | null;
+    status: 'idle' | 'connecting' | 'live' | 'error';
+    controls?: React.ReactNode;
+    overlay?: React.ReactNode;
+    className?: string;
+}
+export default function StreamPlayer({ stream, status, controls, overlay, className }: StreamPlayerProps): import("react/jsx-runtime").JSX.Element;

package/components/StreamPlayer/index.js

@@ -0,0 +1,45 @@
+import { useEffect as e, useRef as t } from "react";
+import { AnimatePresence as n, motion as r } from "motion/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/StreamPlayer/index.tsx
+function o({ stream: o, status: s, controls: c, overlay: l, className: u = "" }) {
+	let d = t(null);
+	return e(() => {
+		d.current && o && (d.current.srcObject = o);
+	}, [o]), /* @__PURE__ */ a("div", {
+		className: `relative w-full aspect-video bg-slate-950 rounded-2xl overflow-hidden shadow-2xl ${u}`,
+		children: [
+			/* @__PURE__ */ i("video", {
+				ref: d,
+				autoPlay: !0,
+				playsInline: !0,
+				muted: !0,
+				className: "w-full h-full object-cover"
+			}),
+			/* @__PURE__ */ i(n, {
+				mode: "wait",
+				children: s !== "live" && /* @__PURE__ */ a(r.div, {
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: { opacity: 0 },
+					className: "absolute inset-0 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm z-10",
+					children: [s === "connecting" && /* @__PURE__ */ i(r.div, {
+						animate: { rotate: 360 },
+						transition: {
+							repeat: Infinity,
+							duration: 1,
+							ease: "linear"
+						},
+						className: "w-12 h-12 border-4 border-white/20 border-t-blue-500 rounded-full"
+					}), l]
+				}, s)
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "absolute bottom-4 left-0 right-0 z-20 flex justify-center px-4",
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+export { o as default };

package/components/VideoPlayer/index.d.ts

@@ -4,7 +4,9 @@ export interface VideoPlayerProps {
     autoPlay?: boolean;
     loop?: boolean;
     muted?: boolean;
+    width?: number;
+    height?: number;
     aspectRatio?: 'video' | 'square' | 'auto';
     radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 }
-export default function VideoPlayer({ url, controls, autoPlay, loop, muted, aspectRatio, radius }: VideoPlayerProps): import("react/jsx-runtime").JSX.Element;
+export default function VideoPlayer({ url, controls, autoPlay, loop, muted, aspectRatio, radius, width, height }: VideoPlayerProps): import("react/jsx-runtime").JSX.Element;

package/components/VideoPlayer/index.js

@@ -1,56 +1,60 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/VideoPlayer/index.tsx
-function t({ url: t = "https://www.youtube.com/watch?v=dQw4w9WgXcQ", controls: n = !0, autoPlay: r = !1, loop: i = !1, muted: a = !1, aspectRatio: o = "video", radius: s = "xl" }) {
-	let c = s === "none" ? "rounded-none" : `rounded-${s}`, l = o === "video" ? "aspect-video" : o === "square" ? "aspect-square" : "aspect-auto", u = (e) => {
+function t({ url: t = "https://www.youtube.com/watch?v=dQw4w9WgXcQ", controls: n = !0, autoPlay: r = !1, loop: i = !1, muted: a = !1, aspectRatio: o = "video", radius: s = "xl", width: c, height: l }) {
+	let u = s === "none" ? "rounded-none" : `rounded-${s}`, d = o === "video" ? "aspect-video" : o === "square" ? "aspect-square" : "aspect-auto", f = (e) => {
 		let t = e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);
 		return t && t[2].length === 11 ? t[2] : null;
-	}, d = (e) => {
+	}, p = (e) => {
 		let t = e.match(/vimeo\.com\/(?:.*#|.*\/videos\/)?([0-9]+)/);
 		return t ? t[1] : null;
-	}, f = u(t), p = f ? null : d(t);
+	}, m = f(t), h = m ? null : p(t);
 	return /* @__PURE__ */ e("div", {
-		className: `relative w-full overflow-hidden bg-slate-900 shadow-lg flex items-center justify-center ${c} ${l}`,
-		children: (() => {
-			if (f) {
-				let t = new URLSearchParams({
-					controls: n ? "1" : "0",
-					autoplay: r ? "1" : "0",
-					mute: a || r ? "1" : "0",
-					playsinline: "1"
-				});
-				return i && (t.append("loop", "1"), t.append("playlist", f)), /* @__PURE__ */ e("iframe", {
-					src: `https://www.youtube.com/embed/${f}?${t.toString()}`,
-					title: "YouTube video player",
-					frameBorder: "0",
-					allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-					allowFullScreen: !0,
-					className: "absolute top-0 left-0 w-full h-full"
-				});
-			}
-			return p ? /* @__PURE__ */ e("iframe", {
-				src: `https://player.vimeo.com/video/${p}?${new URLSearchParams({
-					autoplay: r ? "1" : "0",
-					loop: i ? "1" : "0",
-					muted: a || r ? "1" : "0",
-					controls: n ? "1" : "0",
-					dnt: "1"
-				}).toString()}`,
-				title: "Vimeo video player",
-				frameBorder: "0",
-				allow: "autoplay; fullscreen; picture-in-picture",
-				allowFullScreen: !0,
-				className: "absolute top-0 left-0 w-full h-full"
-			}) : /* @__PURE__ */ e("video", {
-				src: t,
-				controls: n,
-				autoPlay: r,
-				loop: i,
-				muted: a || r,
-				playsInline: !0,
-				className: "absolute top-0 left-0 w-full h-full object-cover bg-black"
-			});
-		})()
+		className: `relative overflow-hidden bg-slate-900 shadow-lg flex items-center justify-center 
+      ${u} ${d} 
+      ${c ? "" : "min-w-[320px]"} w-full`,
+		style: {
+			width: c ? `${c}px` : void 0,
+			height: l ? `${l}px` : void 0
+		},
+		children: m ? /* @__PURE__ */ e("iframe", {
+			src: `https://www.youtube.com/embed/${m}?${new URLSearchParams({
+				controls: n ? "1" : "0",
+				autoplay: r ? "1" : "0",
+				mute: a || r ? "1" : "0",
+				playsinline: "1",
+				...i && {
+					loop: "1",
+					playlist: m
+				}
+			}).toString()}`,
+			title: "YouTube video player",
+			frameBorder: "0",
+			allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+			allowFullScreen: !0,
+			className: "absolute inset-0 w-full h-full"
+		}) : h ? /* @__PURE__ */ e("iframe", {
+			src: `https://player.vimeo.com/video/${h}?${new URLSearchParams({
+				autoplay: r ? "1" : "0",
+				loop: i ? "1" : "0",
+				muted: a || r ? "1" : "0",
+				controls: n ? "1" : "0",
+				dnt: "1"
+			}).toString()}`,
+			title: "Vimeo video player",
+			frameBorder: "0",
+			allow: "autoplay; fullscreen; picture-in-picture",
+			allowFullScreen: !0,
+			className: "absolute inset-0 w-full h-full"
+		}) : /* @__PURE__ */ e("video", {
+			src: t,
+			controls: n,
+			autoPlay: r,
+			loop: i,
+			muted: a || r,
+			playsInline: !0,
+			className: "absolute inset-0 w-full h-full object-cover bg-black"
+		})
 	});
 }
 //#endregion

package/hooks/useMedia.d.ts

@@ -0,0 +1,6 @@
+declare const useMediaRecorder: (stream: MediaStream | null) => {
+    start: (onComplete: (blob: Blob) => void) => void;
+    stop: () => void;
+    isRecording: boolean;
+};
+export default useMediaRecorder;

package/hooks/useMedia.js

@@ -0,0 +1,23 @@
+import e from "../utils/createRecorder.js";
+import t from "../utils/stopRecorder.js";
+import { useState as n } from "react";
+//#region src/hooks/useMedia.ts
+var r = (r) => {
+	let [i, a] = n(null);
+	return {
+		start: (t) => {
+			if (!r) return;
+			let n = e({
+				stream: r,
+				onComplete: t
+			});
+			n.start(), a(n);
+		},
+		stop: () => {
+			i && t({ recorder: i });
+		},
+		isRecording: !!i
+	};
+};
+//#endregion
+export { r as default };

package/index.d.ts

@@ -1,2 +1,15 @@
+export { default as CameraTest } from './components/CameraTest';
+export type { OptimizedImageProps } from './components/Image';
+export { default as OptimizedImage } from './components/Image';
+export type { StreamPlayerProps } from './components/StreamPlayer';
+export { default as StreamPlayer } from './components/StreamPlayer';
 export type { VideoPlayerProps } from './components/VideoPlayer';
 export { default as VideoPlayer } from './components/VideoPlayer';
+export { default as useMediaRecorder } from './hooks/useMedia';
+export { default as checkPermissions } from './utils/checkPermission';
+export type { createRecorderProps } from './utils/createRecorder';
+export { default as createRecorder } from './utils/createRecorder';
+export type { requestStreamProps } from './utils/requestStream';
+export { default as requestStream } from './utils/requestStream';
+export type { stopRecorderProps } from './utils/stopRecorder';
+export { default as stopRecorder } from './utils/stopRecorder';

package/index.js

@@ -1,5 +1,13 @@
 /* empty css       */
-import e from "./components/VideoPlayer/index.js";
-export { e as VideoPlayer };
+import e from "./components/StreamPlayer/index.js";
+import t from "./utils/createRecorder.js";
+import n from "./utils/stopRecorder.js";
+import r from "./hooks/useMedia.js";
+import i from "./components/CameraTest/index.js";
+import a from "./components/Image/index.js";
+import o from "./components/VideoPlayer/index.js";
+import s from "./utils/checkPermission.js";
+import c from "./utils/requestStream.js";
+export { i as CameraTest, a as OptimizedImage, e as StreamPlayer, o as VideoPlayer, s as checkPermissions, t as createRecorder, c as requestStream, n as stopRecorder, r as useMediaRecorder };
 
-try{if(typeof document!=="undefined"){const e=document.createElement("style");e.textContent="*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.flex{display:flex}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.h-full{height:100%}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-none{border-radius:0}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.object-cover{-o-object-fit:cover;object-fit:cover}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}";const target = window.__RUDRA_SHADOW_ROOT__ || document.head; target.appendChild(e);}}catch(err){}
+try{if(typeof document!=="undefined"){const e=document.createElement("style");e.textContent="*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-4{bottom:1rem}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.aspect-\\[3\\/4\\]{aspect-ratio:3/4}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.h-12{height:3rem}.h-full{height:100%}.w-12{width:3rem}.w-full{width:100%}.min-w-\\[320px\\]{min-width:320px}.max-w-2xl{max-width:42rem}.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.border-4{border-width:4px}.border-white\\/20{border-color:#fff3}.border-t-blue-500{--tw-border-opacity:1;border-top-color:rgb(59 130 246/var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity))}.bg-slate-950\\/80{background-color:#020617cc}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.blur-lg{--tw-blur:blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}";const target = window.__RUDRA_SHADOW_ROOT__ || document.head; target.appendChild(e);}}catch(err){}

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@react-three/fiber": "9.6.1",
-    "gsap": "3.12.2",
+    "gsap": "3.12.5",
     "lucide-react": "^1.8.0",
     "motion": "12.0.0",
     "react-player": "latest",
@@ -42,5 +42,5 @@
   },
   "types": "./index.d.ts",
   "unpkg": "./index.umd.js",
-  "version": "1.0.1"
+  "version": "1.0.2"
 }

package/utils/checkPermission.d.ts

@@ -0,0 +1,2 @@
+declare const checkPermissions: () => Promise<boolean>;
+export default checkPermissions;

package/utils/checkPermission.js

@@ -0,0 +1,13 @@
+//#region src/utils/checkPermission.ts
+var e = async () => {
+	try {
+		return (await navigator.mediaDevices.getUserMedia({
+			video: !0,
+			audio: !0
+		})).getTracks().forEach((e) => e.stop()), !0;
+	} catch {
+		return !1;
+	}
+};
+//#endregion
+export { e as default };

package/utils/createRecorder.d.ts

@@ -0,0 +1,6 @@
+export interface createRecorderProps {
+    stream: MediaStream;
+    onDataAvailable: (blob: Blob) => void;
+}
+declare const createRecorder: (stream: MediaStream, onDataAvailable: (blob: Blob) => void) => MediaRecorder;
+export default createRecorder;

package/utils/createRecorder.js

@@ -0,0 +1,11 @@
+//#region src/utils/createRecorder.ts
+var e = (e, t) => {
+	let n = [], r = new MediaRecorder(e, { mimeType: "video/webm" });
+	return r.ondataavailable = (e) => {
+		e.data.size > 0 && n.push(e.data);
+	}, r.onstop = () => {
+		t(new Blob(n, { type: "video/webm" }));
+	}, r;
+};
+//#endregion
+export { e as default };

package/utils/requestStream.d.ts

@@ -0,0 +1,5 @@
+export interface requestStreamProps {
+    constraints: MediaStreamConstraints;
+}
+declare const requestStream: ({ constraints }: requestStreamProps) => Promise<MediaStream>;
+export default requestStream;

package/utils/requestStream.js

@@ -0,0 +1,4 @@
+//#region src/utils/requestStream.ts
+var e = async ({ constraints: e }) => await navigator.mediaDevices.getUserMedia(e);
+//#endregion
+export { e as default };

package/utils/stopRecorder.d.ts

@@ -0,0 +1,5 @@
+export interface stopRecorderProps {
+    recorder: MediaRecorder;
+}
+declare const stopRecorder: ({ recorder }: stopRecorderProps) => void;
+export default stopRecorder;

package/utils/stopRecorder.js

@@ -0,0 +1,6 @@
+//#region src/utils/stopRecorder.ts
+var e = ({ recorder: e }) => {
+	e.state !== "inactive" && e.stop();
+};
+//#endregion
+export { e as default };