@rudra-studio/rudra-media 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/components/VideoPlayer/index.d.ts +10 -0
- package/components/VideoPlayer/index.js +57 -0
- package/index.d.ts +2 -0
- package/index.js +5 -0
- package/package.json +46 -0
package/README.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface VideoPlayerProps {
|
|
2
|
+
url?: string;
|
|
3
|
+
controls?: boolean;
|
|
4
|
+
autoPlay?: boolean;
|
|
5
|
+
loop?: boolean;
|
|
6
|
+
muted?: boolean;
|
|
7
|
+
aspectRatio?: 'video' | 'square' | 'auto';
|
|
8
|
+
radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
9
|
+
}
|
|
10
|
+
export default function VideoPlayer({ url, controls, autoPlay, loop, muted, aspectRatio, radius }: VideoPlayerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/VideoPlayer/index.tsx
|
|
4
|
+
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" }) {
|
|
5
|
+
let c = s === "none" ? "rounded-none" : `rounded-${s}`, l = o === "video" ? "aspect-video" : o === "square" ? "aspect-square" : "aspect-auto", u = (e) => {
|
|
6
|
+
let t = e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);
|
|
7
|
+
return t && t[2].length === 11 ? t[2] : null;
|
|
8
|
+
}, d = (e) => {
|
|
9
|
+
let t = e.match(/vimeo\.com\/(?:.*#|.*\/videos\/)?([0-9]+)/);
|
|
10
|
+
return t ? t[1] : null;
|
|
11
|
+
}, f = u(t), p = f ? null : d(t);
|
|
12
|
+
return /* @__PURE__ */ e("div", {
|
|
13
|
+
className: `relative w-full overflow-hidden bg-slate-900 shadow-lg flex items-center justify-center ${c} ${l}`,
|
|
14
|
+
children: (() => {
|
|
15
|
+
if (f) {
|
|
16
|
+
let t = new URLSearchParams({
|
|
17
|
+
controls: n ? "1" : "0",
|
|
18
|
+
autoplay: r ? "1" : "0",
|
|
19
|
+
mute: a || r ? "1" : "0",
|
|
20
|
+
playsinline: "1"
|
|
21
|
+
});
|
|
22
|
+
return i && (t.append("loop", "1"), t.append("playlist", f)), /* @__PURE__ */ e("iframe", {
|
|
23
|
+
src: `https://www.youtube.com/embed/${f}?${t.toString()}`,
|
|
24
|
+
title: "YouTube video player",
|
|
25
|
+
frameBorder: "0",
|
|
26
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
|
|
27
|
+
allowFullScreen: !0,
|
|
28
|
+
className: "absolute top-0 left-0 w-full h-full"
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
return p ? /* @__PURE__ */ e("iframe", {
|
|
32
|
+
src: `https://player.vimeo.com/video/${p}?${new URLSearchParams({
|
|
33
|
+
autoplay: r ? "1" : "0",
|
|
34
|
+
loop: i ? "1" : "0",
|
|
35
|
+
muted: a || r ? "1" : "0",
|
|
36
|
+
controls: n ? "1" : "0",
|
|
37
|
+
dnt: "1"
|
|
38
|
+
}).toString()}`,
|
|
39
|
+
title: "Vimeo video player",
|
|
40
|
+
frameBorder: "0",
|
|
41
|
+
allow: "autoplay; fullscreen; picture-in-picture",
|
|
42
|
+
allowFullScreen: !0,
|
|
43
|
+
className: "absolute top-0 left-0 w-full h-full"
|
|
44
|
+
}) : /* @__PURE__ */ e("video", {
|
|
45
|
+
src: t,
|
|
46
|
+
controls: n,
|
|
47
|
+
autoPlay: r,
|
|
48
|
+
loop: i,
|
|
49
|
+
muted: a || r,
|
|
50
|
+
playsInline: !0,
|
|
51
|
+
className: "absolute top-0 left-0 w-full h-full object-cover bg-black"
|
|
52
|
+
});
|
|
53
|
+
})()
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
export { t as default };
|
package/index.d.ts
ADDED
package/index.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import e from "./components/VideoPlayer/index.js";
|
|
3
|
+
export { e as VideoPlayer };
|
|
4
|
+
|
|
5
|
+
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){}
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"dependencies": {
|
|
3
|
+
"@react-three/fiber": "9.6.1",
|
|
4
|
+
"gsap": "3.12.2",
|
|
5
|
+
"lucide-react": "^1.8.0",
|
|
6
|
+
"motion": "12.0.0",
|
|
7
|
+
"react-player": "latest",
|
|
8
|
+
"tailwindcss": "3.4.4",
|
|
9
|
+
"three": "0.184.0"
|
|
10
|
+
},
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"autoprefixer": "^10.4.0",
|
|
13
|
+
"postcss": "^8.4.0",
|
|
14
|
+
"sass": "^1.72.0",
|
|
15
|
+
"tailwindcss": "^3.4.0"
|
|
16
|
+
},
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"import": "./index.js",
|
|
20
|
+
"require": "./index.js",
|
|
21
|
+
"types": "./index.d.ts"
|
|
22
|
+
},
|
|
23
|
+
"./*": {
|
|
24
|
+
"import": "./*.js",
|
|
25
|
+
"require": "./*.js",
|
|
26
|
+
"types": "./*.d.ts"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"jsdelivr": "./index.umd.js",
|
|
30
|
+
"main": "./index.js",
|
|
31
|
+
"name": "@rudra-studio/rudra-media",
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"react": "^19.0.0",
|
|
34
|
+
"react-dom": "^19.0.0",
|
|
35
|
+
"tailwindcss": ">=3.0.0"
|
|
36
|
+
},
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
},
|
|
40
|
+
"scripts": {
|
|
41
|
+
"test": "echo 'Skipping unit tests for now...' && exit 0"
|
|
42
|
+
},
|
|
43
|
+
"types": "./index.d.ts",
|
|
44
|
+
"unpkg": "./index.umd.js",
|
|
45
|
+
"version": "1.0.1"
|
|
46
|
+
}
|