@glitchlab/react-video-player 0.1.0
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 +142 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +309 -0
- package/dist/src/HLSPlayer.d.ts +5 -0
- package/dist/src/VideoPlayerWrapper.d.ts +5 -0
- package/dist/src/index.d.ts +3 -0
- package/dist/src/types/index.d.ts +35 -0
- package/dist/src/utils/icons.d.ts +12 -0
- package/dist/style.css +1 -0
- package/dist/tailwind.config.d.ts +8 -0
- package/package.json +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# react-video-player
|
|
2
|
+
|
|
3
|
+
A lightweight, HLS-capable React video player component with device mode toggling, hover-to-play, and a polished overlay
|
|
4
|
+
UI — built with Tailwind CSS.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- 🎬 **HLS streaming** via `hls.js` with automatic fallback to native playback
|
|
11
|
+
- 📱 **Device mode toggle** — switch between desktop (16:9) and mobile (9:16) aspect ratios
|
|
12
|
+
- 🖱️ **Hover-to-play** — optionally start playback on mouse enter
|
|
13
|
+
- 🎯 **Custom play button** with optional tooltip
|
|
14
|
+
- ✕ **Close button** via `onClose` callback
|
|
15
|
+
- 🎨 Vignette overlays and Tailwind-based styling
|
|
16
|
+
- Fully typed with TypeScript
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install react-video-player
|
|
24
|
+
# or
|
|
25
|
+
yarn add react-video-player
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
> **Peer dependencies:** `react`, `react-dom`, `hls.js`, `clsx`, `tailwindcss`
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import {ReactVideoPlayer} from "react-video-player";
|
|
36
|
+
|
|
37
|
+
export default function App() {
|
|
38
|
+
return (
|
|
39
|
+
<ReactVideoPlayer
|
|
40
|
+
src="https://example.com/video/playlist.m3u8"
|
|
41
|
+
poster="https://example.com/poster.jpg"
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Props
|
|
50
|
+
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
|--------------------|---------------------------------------------------|-----------------------------------------|------------------------------------------------------------------------------------------|
|
|
53
|
+
| `src` | `string` | — | **Required.** Video URL. `.m3u8` files are played via HLS automatically. |
|
|
54
|
+
| `poster` | `string` | — | Poster image shown before playback. |
|
|
55
|
+
| `showDeviceToggle` | `boolean` | `true` | Show the desktop/mobile toggle pill in the top-left corner. |
|
|
56
|
+
| `defaultDevice` | `"desktop" \| "mobile"` | `"desktop"` | Initial device mode. |
|
|
57
|
+
| `hoverPlay` | `boolean` | `false` | Start playing on mouse enter; pause on mouse leave. |
|
|
58
|
+
| `tooltipText` | `string` | — | Text shown in a tooltip above the play button on hover. |
|
|
59
|
+
| `onClose` | `() => void` | — | If provided, renders a close button in the top-right corner. |
|
|
60
|
+
| `className` | `string` | `""` | Additional CSS classes applied to the outer container. |
|
|
61
|
+
| `muted` | `boolean` | `true` | Mute the video. |
|
|
62
|
+
| `loop` | `boolean` | `false` | Loop the video. |
|
|
63
|
+
| `controls` | `boolean` | `false` | Show native browser video controls. |
|
|
64
|
+
| `frameMaxWidth` | `{ desktop?: string; mobile?: string }` | `{ desktop: "960px", mobile: "420px" }` | Max width of the player in each device mode. |
|
|
65
|
+
| `aspectRatio` | `{ desktop?: AspectRatio; mobile?: AspectRatio }` | `{ desktop: "16/9", mobile: "9/16" }` | Aspect ratio in each device mode. `AspectRatio` is typed as `` `${number}/${number}` ``. |
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Examples
|
|
70
|
+
|
|
71
|
+
### Looping background video with no controls
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<ReactVideoPlayer
|
|
75
|
+
src="/videos/hero.m3u8"
|
|
76
|
+
muted
|
|
77
|
+
loop
|
|
78
|
+
showDeviceToggle={false}
|
|
79
|
+
/>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Hover-to-play with a tooltip
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<ReactVideoPlayer
|
|
86
|
+
src="/videos/demo.mp4"
|
|
87
|
+
poster="/images/thumb.jpg"
|
|
88
|
+
hoverPlay
|
|
89
|
+
tooltipText="Watch the demo"
|
|
90
|
+
/>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Dismissible player in a modal
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<ReactVideoPlayer
|
|
97
|
+
src="/videos/walkthrough.m3u8"
|
|
98
|
+
onClose={() => setOpen(false)}
|
|
99
|
+
showDeviceToggle={false}
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Custom aspect ratio and max width
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
<ReactVideoPlayer
|
|
107
|
+
src="/videos/portrait.mp4"
|
|
108
|
+
defaultDevice="mobile"
|
|
109
|
+
aspectRatio={{desktop: "4/3", mobile: "9/16"}}
|
|
110
|
+
frameMaxWidth={{desktop: "720px", mobile: "360px"}}
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## HLS Support
|
|
117
|
+
|
|
118
|
+
The `HLSPlayer` component (used internally) detects `.m3u8` sources and routes them through `hls.js` when the browser
|
|
119
|
+
supports it. On browsers with native HLS support (e.g. Safari), the video element handles playback directly. You can
|
|
120
|
+
also force HLS mode with the `isHls` prop if the URL doesn't end in `.m3u8`.
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## Architecture
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
src/
|
|
128
|
+
├── index.ts # Package entry — exports ReactVideoPlayer
|
|
129
|
+
├── types/
|
|
130
|
+
│ └── index.ts # TypeScript types and interfaces
|
|
131
|
+
├── VideoPlayerWrapper.tsx # Main component with UI, state, and overlays
|
|
132
|
+
├── HLSPlayer.tsx # Low-level video element with HLS.js integration
|
|
133
|
+
├── utils/
|
|
134
|
+
│ └── icons.tsx # SVG icon components (Play, Close, Desktop, Mobile)
|
|
135
|
+
└── styles.css # Tailwind CSS entry
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## License
|
|
141
|
+
|
|
142
|
+
MIT
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),k=require("hls.js"),m=a.forwardRef(({src:t,hlsConfig:n,isHls:l,...r},u)=>{const p=a.useRef(null),i=a.useRef(null);a.useImperativeHandle(u,()=>p.current);const v=typeof window<"u"&&k.isSupported(),w=!!l||v&&typeof t=="string"&&t.endsWith(".m3u8");return a.useEffect(()=>{if(!t)return;const s=p.current;if(s){for(i.current&&(i.current.destroy(),i.current=null),s.pause(),s.removeAttribute("src");s.firstChild;)s.removeChild(s.firstChild);if(w){const f=new k(n);i.current=f,f.attachMedia(s),f.loadSource(t),f.on(k.Events.ERROR,(c,d)=>{d.fatal&&(f.destroy(),i.current=null)})}else s.src=t,s.load();return()=>{for(i.current&&(i.current.destroy(),i.current=null),s.pause(),s.removeAttribute("src");s.firstChild;)s.removeChild(s.firstChild);s.load()}}},[t,w,n]),e.jsx("video",{ref:p,...r})});m.displayName="HLSPlayer";const E=({className:t=""})=>e.jsxs("svg",{className:t,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M14 2H10C6.72077 2 5.08116 2 3.91891 2.81382C3.48891 3.1149 3.1149 3.48891 2.81382 3.91891C2 5.08116 2 6.72077 2 10C2 13.2792 2 14.9188 2.81382 16.0811C3.1149 16.5111 3.48891 16.8851 3.91891 17.1862C5.08116 18 6.72077 18 10 18H14C17.2792 18 18.9188 18 20.0811 17.1862C20.5111 16.8851 20.8851 16.5111 21.1862 16.0811C22 14.9188 22 13.2792 22 10C22 6.72077 22 5.08116 21.1862 3.91891C20.8851 3.48891 20.5111 3.1149 20.0811 2.81382C18.9188 2 17.2792 2 14 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),e.jsx("path",{d:"M11 15H13",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M14.5 22L14.1845 21.5811C13.4733 20.6369 13.2969 19.1944 13.7468 18M9.5 22L9.8155 21.5811C10.5267 20.6369 10.7031 19.1944 10.2532 18",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),e.jsx("path",{d:"M7 22H17",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),B=({className:t=""})=>e.jsxs("svg",{className:t,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M5 9C5 5.70017 5 4.05025 6.02513 3.02513C7.05025 2 8.70017 2 12 2C15.2998 2 16.9497 2 17.9749 3.02513C19 4.05025 19 5.70017 19 9V15C19 18.2998 19 19.9497 17.9749 20.9749C16.9497 22 15.2998 22 12 22C8.70017 22 7.05025 22 6.02513 20.9749C5 19.9497 5 18.2998 5 15V9Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),e.jsx("path",{d:"M11 19H13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M9 2L9.089 2.53402C9.28188 3.69129 9.37832 4.26993 9.77519 4.62204C10.1892 4.98934 10.7761 5 12 5C13.2239 5 13.8108 4.98934 14.2248 4.62204C14.6217 4.26993 14.7181 3.69129 14.911 2.53402L15 2",stroke:"currentColor",strokeWidth:"2",strokeLinejoin:"round"})]}),D=({className:t=""})=>e.jsx("svg",{className:t,width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M6.94994 5.53594L12.1929 0.292938C12.5834 -0.0975275 13.2165 -0.0975279 13.6069 0.292938C13.9974 0.683403 13.9974 1.31647 13.6069 1.70694L8.36394 6.94994L13.6069 12.1929C13.9974 12.5834 13.9974 13.2165 13.6069 13.6069C13.2165 13.9974 12.5834 13.9974 12.1929 13.6069L6.94994 8.36394L1.70694 13.6069C1.31647 13.9974 0.683403 13.9974 0.292938 13.6069C-0.0975279 13.2165 -0.0975277 12.5834 0.292938 12.1929L5.53594 6.94994L0.292938 1.70694C-0.0975279 1.31647 -0.0975279 0.683403 0.292938 0.292938C0.683403 -0.0975279 1.31647 -0.0975277 1.70694 0.292938L6.94994 5.53594Z",fill:"white"})}),R=({className:t=""})=>e.jsxs("svg",{className:t,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("mask",{id:"mask0_4364_137031",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"16",height:"16",children:e.jsx("rect",{width:"16",height:"16",fill:"#D9D9D9"})}),e.jsx("g",{mask:"url(#mask0_4364_137031)",children:e.jsx("path",{d:"M5.3335 11.45V4.54997C5.3335 4.36108 5.40016 4.20275 5.5335 4.07497C5.66683 3.94719 5.82238 3.8833 6.00016 3.8833C6.05572 3.8833 6.11405 3.89163 6.17516 3.9083C6.23627 3.92497 6.29461 3.94997 6.35016 3.9833L11.7835 7.4333C11.8835 7.49997 11.9585 7.5833 12.0085 7.6833C12.0585 7.7833 12.0835 7.88886 12.0835 7.99997C12.0835 8.11108 12.0585 8.21663 12.0085 8.31663C11.9585 8.41663 11.8835 8.49997 11.7835 8.56663L6.35016 12.0166C6.29461 12.05 6.23627 12.075 6.17516 12.0916C6.11405 12.1083 6.05572 12.1166 6.00016 12.1166C5.82238 12.1166 5.66683 12.0527 5.5335 11.925C5.40016 11.7972 5.3335 11.6389 5.3335 11.45Z",fill:"white"})})]});function L(t){var n,l,r="";if(typeof t=="string"||typeof t=="number")r+=t;else if(typeof t=="object")if(Array.isArray(t)){var u=t.length;for(n=0;n<u;n++)t[n]&&(l=L(t[n]))&&(r&&(r+=" "),r+=l)}else for(l in t)t[l]&&(r&&(r+=" "),r+=l);return r}function b(){for(var t,n,l=0,r="",u=arguments.length;l<u;l++)(t=arguments[l])&&(n=L(t))&&(r&&(r+=" "),r+=n);return r}const V=({src:t,poster:n,showDeviceToggle:l=!0,defaultDevice:r="desktop",hoverPlay:u=!1,tooltipText:p,onClose:i,className:v="",muted:w=!0,loop:s=!1,controls:f=!1,frameMaxWidth:c,aspectRatio:d})=>{const g=a.useRef(null),[x,y]=a.useState(r),[j,h]=a.useState(!1),[N,C]=a.useState(!1),S=a.useMemo(()=>x==="mobile"?(d==null?void 0:d.mobile)??"9/16":(d==null?void 0:d.desktop)??"16/9",[x,d]),H=a.useMemo(()=>x==="mobile"?(c==null?void 0:c.mobile)??"420px":(c==null?void 0:c.desktop)??"960px",[x,c]),M=async()=>{if(!u)return;const o=g.current;if(o)try{o.readyState<2&&o.load(),await o.play(),h(!0)}catch{h(!1)}},P=()=>{if(!u)return;const o=g.current;o&&(o.pause(),h(!1))},I=async()=>{const o=g.current;if(o)try{o.paused?(await o.play(),h(!0)):(o.pause(),h(!1))}catch{h(!1)}};return e.jsxs("div",{className:b("relative overflow-hidden rounded-3xl","bg-neutral-900/30 shadow-2xl","ring-1 ring-white/10","mx-auto w-full",v),style:{width:H,aspectRatio:S},onMouseEnter:()=>{C(!0),M()},onMouseLeave:()=>{C(!1),P()},children:[e.jsx(m,{ref:g,src:t,poster:n,muted:w,loop:s,playsInline:!0,preload:"metadata",controls:f,className:"h-full w-full object-cover",onPlay:()=>h(!0),onPause:()=>h(!1)}),e.jsx("div",{className:"pointer-events-none absolute inset-0 bg-linear-to-tr from-black/35 via-black/0 to-black/35"}),l&&e.jsx("div",{className:"absolute left-4 top-4",children:e.jsxs("div",{className:"flex items-center overflow-hidden rounded-2xl bg-white/95 shadow-lg ring-1 ring-black/5",children:[e.jsx("button",{type:"button",onClick:()=>y("desktop"),className:b("flex items-center gap-2 px-4 py-2 text-sm font-semibold z-10 cursor-pointer",x==="desktop"?"text-violet-700":"text-neutral-500 hover:text-neutral-700"),children:e.jsx(E,{className:"h-5 w-5"})}),e.jsx("div",{className:"h-7 w-px bg-neutral-200"}),e.jsx("button",{type:"button",onClick:()=>y("mobile"),className:b("flex items-center gap-2 px-4 py-2 text-sm font-semibold z-10 cursor-pointer",x==="mobile"?"text-violet-700":"text-neutral-500 hover:text-neutral-700"),children:e.jsx(B,{className:"h-5 w-5 "})})]})}),i&&e.jsx("button",{type:"button",onClick:i,className:"absolute right-4 top-4 grid h-10 w-10 place-items-center rounded-full bg-black/35 text-white backdrop-blur-md ring-1 ring-white/15 hover:bg-black/50 cursor-pointer z-10","aria-label":"Close",children:e.jsx(D,{className:"h-5 w-5"})}),!j&&e.jsx(e.Fragment,{children:e.jsx("div",{className:"absolute inset-0 grid place-items-center",children:e.jsxs("button",{type:"button",onClick:()=>void I(),onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!1),className:b("relative grid h-14 w-14 place-items-center rounded-full cursor-pointer ring-1 ring-white/15","bg-violet-700/50 hover:bg-violet-700/90 bg-neutral-200/5 bg-blend-overlay shadow-xl","transition-opacity duration-200"),"aria-label":"Play",children:[e.jsx(R,{className:"h-7 w-7 translate-x-px"}),p&&N&&!j&&e.jsx("div",{className:"absolute -top-12 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-xl bg-black/70 px-3 py-1.5 text-xs text-white shadow-lg ring-1 ring-white/10 backdrop-blur",children:p})]})})}),e.jsx("div",{className:"pointer-events-none absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-black/35 to-transparent"})]})};exports.ReactVideoPlayer=V;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/index'
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
import { jsx as t, jsxs as w, Fragment as V } from "react/jsx-runtime";
|
|
2
|
+
import _, { useRef as x, useImperativeHandle as U, useEffect as Z, useState as y, useMemo as H } from "react";
|
|
3
|
+
import m from "hls.js";
|
|
4
|
+
const P = _.forwardRef(
|
|
5
|
+
({ src: e, hlsConfig: l, isHls: o, ...r }, d) => {
|
|
6
|
+
const f = x(null), s = x(null);
|
|
7
|
+
U(d, () => f.current);
|
|
8
|
+
const k = typeof window < "u" && m.isSupported(), C = !!o || k && typeof e == "string" && e.endsWith(".m3u8");
|
|
9
|
+
return Z(() => {
|
|
10
|
+
if (!e) return;
|
|
11
|
+
const n = f.current;
|
|
12
|
+
if (n) {
|
|
13
|
+
for (s.current && (s.current.destroy(), s.current = null), n.pause(), n.removeAttribute("src"); n.firstChild; ) n.removeChild(n.firstChild);
|
|
14
|
+
if (C) {
|
|
15
|
+
const h = new m(l);
|
|
16
|
+
s.current = h, h.attachMedia(n), h.loadSource(e), h.on(m.Events.ERROR, (c, a) => {
|
|
17
|
+
a.fatal && (h.destroy(), s.current = null);
|
|
18
|
+
});
|
|
19
|
+
} else
|
|
20
|
+
n.src = e, n.load();
|
|
21
|
+
return () => {
|
|
22
|
+
for (s.current && (s.current.destroy(), s.current = null), n.pause(), n.removeAttribute("src"); n.firstChild; ) n.removeChild(n.firstChild);
|
|
23
|
+
n.load();
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
}, [e, C, l]), /* @__PURE__ */ t("video", { ref: f, ...r });
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
P.displayName = "HLSPlayer";
|
|
30
|
+
const z = ({ className: e = "" }) => /* @__PURE__ */ w(
|
|
31
|
+
"svg",
|
|
32
|
+
{
|
|
33
|
+
className: e,
|
|
34
|
+
width: "24",
|
|
35
|
+
height: "24",
|
|
36
|
+
viewBox: "0 0 24 24",
|
|
37
|
+
fill: "none",
|
|
38
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ t(
|
|
41
|
+
"path",
|
|
42
|
+
{
|
|
43
|
+
d: "M14 2H10C6.72077 2 5.08116 2 3.91891 2.81382C3.48891 3.1149 3.1149 3.48891 2.81382 3.91891C2 5.08116 2 6.72077 2 10C2 13.2792 2 14.9188 2.81382 16.0811C3.1149 16.5111 3.48891 16.8851 3.91891 17.1862C5.08116 18 6.72077 18 10 18H14C17.2792 18 18.9188 18 20.0811 17.1862C20.5111 16.8851 20.8851 16.5111 21.1862 16.0811C22 14.9188 22 13.2792 22 10C22 6.72077 22 5.08116 21.1862 3.91891C20.8851 3.48891 20.5111 3.1149 20.0811 2.81382C18.9188 2 17.2792 2 14 2Z",
|
|
44
|
+
stroke: "currentColor",
|
|
45
|
+
strokeWidth: "1.5",
|
|
46
|
+
strokeLinecap: "round"
|
|
47
|
+
}
|
|
48
|
+
),
|
|
49
|
+
/* @__PURE__ */ t(
|
|
50
|
+
"path",
|
|
51
|
+
{
|
|
52
|
+
d: "M11 15H13",
|
|
53
|
+
stroke: "currentColor",
|
|
54
|
+
strokeWidth: "1.5",
|
|
55
|
+
strokeLinecap: "round",
|
|
56
|
+
strokeLinejoin: "round"
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ t(
|
|
60
|
+
"path",
|
|
61
|
+
{
|
|
62
|
+
d: "M14.5 22L14.1845 21.5811C13.4733 20.6369 13.2969 19.1944 13.7468 18M9.5 22L9.8155 21.5811C10.5267 20.6369 10.7031 19.1944 10.2532 18",
|
|
63
|
+
stroke: "currentColor",
|
|
64
|
+
strokeWidth: "1.5",
|
|
65
|
+
strokeLinecap: "round"
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ t("path", { d: "M7 22H17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
), O = ({ className: e = "" }) => /* @__PURE__ */ w(
|
|
72
|
+
"svg",
|
|
73
|
+
{
|
|
74
|
+
className: e,
|
|
75
|
+
width: "24",
|
|
76
|
+
height: "24",
|
|
77
|
+
viewBox: "0 0 24 24",
|
|
78
|
+
fill: "none",
|
|
79
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ t(
|
|
82
|
+
"path",
|
|
83
|
+
{
|
|
84
|
+
d: "M5 9C5 5.70017 5 4.05025 6.02513 3.02513C7.05025 2 8.70017 2 12 2C15.2998 2 16.9497 2 17.9749 3.02513C19 4.05025 19 5.70017 19 9V15C19 18.2998 19 19.9497 17.9749 20.9749C16.9497 22 15.2998 22 12 22C8.70017 22 7.05025 22 6.02513 20.9749C5 19.9497 5 18.2998 5 15V9Z",
|
|
85
|
+
stroke: "currentColor",
|
|
86
|
+
strokeWidth: "2",
|
|
87
|
+
strokeLinecap: "round"
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
/* @__PURE__ */ t(
|
|
91
|
+
"path",
|
|
92
|
+
{
|
|
93
|
+
d: "M11 19H13",
|
|
94
|
+
stroke: "currentColor",
|
|
95
|
+
strokeWidth: "2",
|
|
96
|
+
strokeLinecap: "round",
|
|
97
|
+
strokeLinejoin: "round"
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
/* @__PURE__ */ t(
|
|
101
|
+
"path",
|
|
102
|
+
{
|
|
103
|
+
d: "M9 2L9.089 2.53402C9.28188 3.69129 9.37832 4.26993 9.77519 4.62204C10.1892 4.98934 10.7761 5 12 5C13.2239 5 13.8108 4.98934 14.2248 4.62204C14.6217 4.26993 14.7181 3.69129 14.911 2.53402L15 2",
|
|
104
|
+
stroke: "currentColor",
|
|
105
|
+
strokeWidth: "2",
|
|
106
|
+
strokeLinejoin: "round"
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
), R = ({ className: e = "" }) => /* @__PURE__ */ t(
|
|
112
|
+
"svg",
|
|
113
|
+
{
|
|
114
|
+
className: e,
|
|
115
|
+
width: "14",
|
|
116
|
+
height: "14",
|
|
117
|
+
viewBox: "0 0 14 14",
|
|
118
|
+
fill: "none",
|
|
119
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
120
|
+
children: /* @__PURE__ */ t(
|
|
121
|
+
"path",
|
|
122
|
+
{
|
|
123
|
+
d: "M6.94994 5.53594L12.1929 0.292938C12.5834 -0.0975275 13.2165 -0.0975279 13.6069 0.292938C13.9974 0.683403 13.9974 1.31647 13.6069 1.70694L8.36394 6.94994L13.6069 12.1929C13.9974 12.5834 13.9974 13.2165 13.6069 13.6069C13.2165 13.9974 12.5834 13.9974 12.1929 13.6069L6.94994 8.36394L1.70694 13.6069C1.31647 13.9974 0.683403 13.9974 0.292938 13.6069C-0.0975279 13.2165 -0.0975277 12.5834 0.292938 12.1929L5.53594 6.94994L0.292938 1.70694C-0.0975279 1.31647 -0.0975279 0.683403 0.292938 0.292938C0.683403 -0.0975279 1.31647 -0.0975277 1.70694 0.292938L6.94994 5.53594Z",
|
|
124
|
+
fill: "white"
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
}
|
|
128
|
+
), T = ({ className: e = "" }) => /* @__PURE__ */ w(
|
|
129
|
+
"svg",
|
|
130
|
+
{
|
|
131
|
+
className: e,
|
|
132
|
+
width: "16",
|
|
133
|
+
height: "16",
|
|
134
|
+
viewBox: "0 0 16 16",
|
|
135
|
+
fill: "none",
|
|
136
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ t(
|
|
139
|
+
"mask",
|
|
140
|
+
{
|
|
141
|
+
id: "mask0_4364_137031",
|
|
142
|
+
style: { maskType: "alpha" },
|
|
143
|
+
maskUnits: "userSpaceOnUse",
|
|
144
|
+
x: "0",
|
|
145
|
+
y: "0",
|
|
146
|
+
width: "16",
|
|
147
|
+
height: "16",
|
|
148
|
+
children: /* @__PURE__ */ t("rect", { width: "16", height: "16", fill: "#D9D9D9" })
|
|
149
|
+
}
|
|
150
|
+
),
|
|
151
|
+
/* @__PURE__ */ t("g", { mask: "url(#mask0_4364_137031)", children: /* @__PURE__ */ t(
|
|
152
|
+
"path",
|
|
153
|
+
{
|
|
154
|
+
d: "M5.3335 11.45V4.54997C5.3335 4.36108 5.40016 4.20275 5.5335 4.07497C5.66683 3.94719 5.82238 3.8833 6.00016 3.8833C6.05572 3.8833 6.11405 3.89163 6.17516 3.9083C6.23627 3.92497 6.29461 3.94997 6.35016 3.9833L11.7835 7.4333C11.8835 7.49997 11.9585 7.5833 12.0085 7.6833C12.0585 7.7833 12.0835 7.88886 12.0835 7.99997C12.0835 8.11108 12.0585 8.21663 12.0085 8.31663C11.9585 8.41663 11.8835 8.49997 11.7835 8.56663L6.35016 12.0166C6.29461 12.05 6.23627 12.075 6.17516 12.0916C6.11405 12.1083 6.05572 12.1166 6.00016 12.1166C5.82238 12.1166 5.66683 12.0527 5.5335 11.925C5.40016 11.7972 5.3335 11.6389 5.3335 11.45Z",
|
|
155
|
+
fill: "white"
|
|
156
|
+
}
|
|
157
|
+
) })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
function S(e) {
|
|
162
|
+
var l, o, r = "";
|
|
163
|
+
if (typeof e == "string" || typeof e == "number") r += e;
|
|
164
|
+
else if (typeof e == "object") if (Array.isArray(e)) {
|
|
165
|
+
var d = e.length;
|
|
166
|
+
for (l = 0; l < d; l++) e[l] && (o = S(e[l])) && (r && (r += " "), r += o);
|
|
167
|
+
} else for (o in e) e[o] && (r && (r += " "), r += o);
|
|
168
|
+
return r;
|
|
169
|
+
}
|
|
170
|
+
function b() {
|
|
171
|
+
for (var e, l, o = 0, r = "", d = arguments.length; o < d; o++) (e = arguments[o]) && (l = S(e)) && (r && (r += " "), r += l);
|
|
172
|
+
return r;
|
|
173
|
+
}
|
|
174
|
+
const q = ({
|
|
175
|
+
src: e,
|
|
176
|
+
poster: l,
|
|
177
|
+
showDeviceToggle: o = !0,
|
|
178
|
+
defaultDevice: r = "desktop",
|
|
179
|
+
hoverPlay: d = !1,
|
|
180
|
+
tooltipText: f,
|
|
181
|
+
onClose: s,
|
|
182
|
+
className: k = "",
|
|
183
|
+
muted: C = !0,
|
|
184
|
+
loop: n = !1,
|
|
185
|
+
controls: h = !1,
|
|
186
|
+
frameMaxWidth: c,
|
|
187
|
+
aspectRatio: a
|
|
188
|
+
}) => {
|
|
189
|
+
const g = x(null), [p, L] = y(r), [N, u] = y(!1), [M, v] = y(!1), j = H(() => p === "mobile" ? (a == null ? void 0 : a.mobile) ?? "9/16" : (a == null ? void 0 : a.desktop) ?? "16/9", [p, a]), I = H(() => p === "mobile" ? (c == null ? void 0 : c.mobile) ?? "420px" : (c == null ? void 0 : c.desktop) ?? "960px", [p, c]), E = async () => {
|
|
190
|
+
if (!d) return;
|
|
191
|
+
const i = g.current;
|
|
192
|
+
if (i)
|
|
193
|
+
try {
|
|
194
|
+
i.readyState < 2 && i.load(), await i.play(), u(!0);
|
|
195
|
+
} catch {
|
|
196
|
+
u(!1);
|
|
197
|
+
}
|
|
198
|
+
}, B = () => {
|
|
199
|
+
if (!d) return;
|
|
200
|
+
const i = g.current;
|
|
201
|
+
i && (i.pause(), u(!1));
|
|
202
|
+
}, D = async () => {
|
|
203
|
+
const i = g.current;
|
|
204
|
+
if (i)
|
|
205
|
+
try {
|
|
206
|
+
i.paused ? (await i.play(), u(!0)) : (i.pause(), u(!1));
|
|
207
|
+
} catch {
|
|
208
|
+
u(!1);
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
return /* @__PURE__ */ w(
|
|
212
|
+
"div",
|
|
213
|
+
{
|
|
214
|
+
className: b(
|
|
215
|
+
"relative overflow-hidden rounded-3xl",
|
|
216
|
+
"bg-neutral-900/30 shadow-2xl",
|
|
217
|
+
"ring-1 ring-white/10",
|
|
218
|
+
"mx-auto w-full",
|
|
219
|
+
k
|
|
220
|
+
),
|
|
221
|
+
style: { width: I, aspectRatio: j },
|
|
222
|
+
onMouseEnter: () => {
|
|
223
|
+
v(!0), E();
|
|
224
|
+
},
|
|
225
|
+
onMouseLeave: () => {
|
|
226
|
+
v(!1), B();
|
|
227
|
+
},
|
|
228
|
+
children: [
|
|
229
|
+
/* @__PURE__ */ t(
|
|
230
|
+
P,
|
|
231
|
+
{
|
|
232
|
+
ref: g,
|
|
233
|
+
src: e,
|
|
234
|
+
poster: l,
|
|
235
|
+
muted: C,
|
|
236
|
+
loop: n,
|
|
237
|
+
playsInline: !0,
|
|
238
|
+
preload: "metadata",
|
|
239
|
+
controls: h,
|
|
240
|
+
className: "h-full w-full object-cover",
|
|
241
|
+
onPlay: () => u(!0),
|
|
242
|
+
onPause: () => u(!1)
|
|
243
|
+
}
|
|
244
|
+
),
|
|
245
|
+
/* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-tr from-black/35 via-black/0 to-black/35" }),
|
|
246
|
+
o && /* @__PURE__ */ t("div", { className: "absolute left-4 top-4", children: /* @__PURE__ */ w("div", { className: "flex items-center overflow-hidden rounded-2xl bg-white/95 shadow-lg ring-1 ring-black/5", children: [
|
|
247
|
+
/* @__PURE__ */ t(
|
|
248
|
+
"button",
|
|
249
|
+
{
|
|
250
|
+
type: "button",
|
|
251
|
+
onClick: () => L("desktop"),
|
|
252
|
+
className: b(
|
|
253
|
+
"flex items-center gap-2 px-4 py-2 text-sm font-semibold z-10 cursor-pointer",
|
|
254
|
+
p === "desktop" ? "text-violet-700" : "text-neutral-500 hover:text-neutral-700"
|
|
255
|
+
),
|
|
256
|
+
children: /* @__PURE__ */ t(z, { className: "h-5 w-5" })
|
|
257
|
+
}
|
|
258
|
+
),
|
|
259
|
+
/* @__PURE__ */ t("div", { className: "h-7 w-px bg-neutral-200" }),
|
|
260
|
+
/* @__PURE__ */ t(
|
|
261
|
+
"button",
|
|
262
|
+
{
|
|
263
|
+
type: "button",
|
|
264
|
+
onClick: () => L("mobile"),
|
|
265
|
+
className: b(
|
|
266
|
+
"flex items-center gap-2 px-4 py-2 text-sm font-semibold z-10 cursor-pointer",
|
|
267
|
+
p === "mobile" ? "text-violet-700" : "text-neutral-500 hover:text-neutral-700"
|
|
268
|
+
),
|
|
269
|
+
children: /* @__PURE__ */ t(O, { className: "h-5 w-5 " })
|
|
270
|
+
}
|
|
271
|
+
)
|
|
272
|
+
] }) }),
|
|
273
|
+
s && /* @__PURE__ */ t(
|
|
274
|
+
"button",
|
|
275
|
+
{
|
|
276
|
+
type: "button",
|
|
277
|
+
onClick: s,
|
|
278
|
+
className: "absolute right-4 top-4 grid h-10 w-10 place-items-center rounded-full bg-black/35 text-white backdrop-blur-md ring-1 ring-white/15 hover:bg-black/50 cursor-pointer z-10",
|
|
279
|
+
"aria-label": "Close",
|
|
280
|
+
children: /* @__PURE__ */ t(R, { className: "h-5 w-5" })
|
|
281
|
+
}
|
|
282
|
+
),
|
|
283
|
+
!N && /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t("div", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ w(
|
|
284
|
+
"button",
|
|
285
|
+
{
|
|
286
|
+
type: "button",
|
|
287
|
+
onClick: () => void D(),
|
|
288
|
+
onMouseEnter: () => v(!0),
|
|
289
|
+
onMouseLeave: () => v(!1),
|
|
290
|
+
className: b(
|
|
291
|
+
"relative grid h-14 w-14 place-items-center rounded-full cursor-pointer ring-1 ring-white/15",
|
|
292
|
+
"bg-violet-700/50 hover:bg-violet-700/90 bg-neutral-200/5 bg-blend-overlay shadow-xl",
|
|
293
|
+
"transition-opacity duration-200"
|
|
294
|
+
),
|
|
295
|
+
"aria-label": "Play",
|
|
296
|
+
children: [
|
|
297
|
+
/* @__PURE__ */ t(T, { className: "h-7 w-7 translate-x-px" }),
|
|
298
|
+
f && M && !N && /* @__PURE__ */ t("div", { className: "absolute -top-12 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-xl bg-black/70 px-3 py-1.5 text-xs text-white shadow-lg ring-1 ring-white/10 backdrop-blur", children: f })
|
|
299
|
+
]
|
|
300
|
+
}
|
|
301
|
+
) }) }),
|
|
302
|
+
/* @__PURE__ */ t("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-black/35 to-transparent" })
|
|
303
|
+
]
|
|
304
|
+
}
|
|
305
|
+
);
|
|
306
|
+
};
|
|
307
|
+
export {
|
|
308
|
+
q as ReactVideoPlayer
|
|
309
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { HlsConfig } from 'hls.js';
|
|
2
|
+
|
|
3
|
+
export type DeviceMode = "desktop" | "mobile";
|
|
4
|
+
type AspectRatio = `${number}/${number}`;
|
|
5
|
+
export type VideoPlayerWrapperProps = {
|
|
6
|
+
src: string;
|
|
7
|
+
poster?: string;
|
|
8
|
+
showDeviceToggle?: boolean;
|
|
9
|
+
defaultDevice?: DeviceMode;
|
|
10
|
+
hoverPlay?: boolean;
|
|
11
|
+
tooltipText?: string;
|
|
12
|
+
onClose?: () => void;
|
|
13
|
+
className?: string;
|
|
14
|
+
muted?: boolean;
|
|
15
|
+
loop?: boolean;
|
|
16
|
+
controls?: boolean;
|
|
17
|
+
frameMaxWidth?: {
|
|
18
|
+
desktop?: string;
|
|
19
|
+
mobile?: string;
|
|
20
|
+
};
|
|
21
|
+
aspectRatio?: {
|
|
22
|
+
desktop?: AspectRatio;
|
|
23
|
+
mobile?: AspectRatio;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export interface HLSPlayerProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
|
|
27
|
+
src: string;
|
|
28
|
+
hlsConfig?: HlsConfig;
|
|
29
|
+
isHls?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export interface HLSPlayerRef {
|
|
32
|
+
video: HTMLVideoElement | null;
|
|
33
|
+
cleanup: () => void;
|
|
34
|
+
}
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const IconDesktop: ({ className }: {
|
|
2
|
+
className?: string;
|
|
3
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const IconMobile: ({ className }: {
|
|
5
|
+
className?: string;
|
|
6
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const IconX: ({ className }: {
|
|
8
|
+
className?: string;
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const IconPlay: ({ className }: {
|
|
11
|
+
className?: string;
|
|
12
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-violet-700:oklch(49.1% .27 292.581);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);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}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-12{top:calc(var(--spacing) * -12)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:calc(var(--spacing) * 0)}.right-4{right:calc(var(--spacing) * 4)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.mx-auto{margin-inline:auto}.flex{display:flex}.grid{display:grid}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-10{height:calc(var(--spacing) * 10)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.w-5{width:calc(var(--spacing) * 5)}.w-7{width:calc(var(--spacing) * 7)}.w-10{width:calc(var(--spacing) * 10)}.w-14{width:calc(var(--spacing) * 14)}.w-full{width:100%}.w-px{width:1px}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.cursor-pointer{cursor:pointer}.place-items-center{place-items:center}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing) * 2)}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-xl{border-radius:var(--radius-xl)}.bg-black\/35{background-color:#00000059}@supports (color:color-mix(in lab,red,red)){.bg-black\/35{background-color:color-mix(in oklab,var(--color-black) 35%,transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab,red,red)){.bg-black\/70{background-color:color-mix(in oklab,var(--color-black) 70%,transparent)}}.bg-neutral-200{background-color:var(--color-neutral-200)}.bg-neutral-200\/5{background-color:#e5e5e50d}@supports (color:color-mix(in lab,red,red)){.bg-neutral-200\/5{background-color:color-mix(in oklab,var(--color-neutral-200) 5%,transparent)}}.bg-neutral-900\/30{background-color:#1717174d}@supports (color:color-mix(in lab,red,red)){.bg-neutral-900\/30{background-color:color-mix(in oklab,var(--color-neutral-900) 30%,transparent)}}.bg-violet-700\/50{background-color:#7008e780}@supports (color:color-mix(in lab,red,red)){.bg-violet-700\/50{background-color:color-mix(in oklab,var(--color-violet-700) 50%,transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab,red,red)){.bg-white\/95{background-color:color-mix(in oklab,var(--color-white) 95%,transparent)}}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab,red,red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-tr{--tw-gradient-position:to top right}@supports (background-image:linear-gradient(in lab,red,red)){.bg-linear-to-tr{--tw-gradient-position:to top right in oklab}}.bg-linear-to-tr{background-image:linear-gradient(var(--tw-gradient-stops))}.from-black\/35{--tw-gradient-from:#00000059}@supports (color:color-mix(in lab,red,red)){.from-black\/35{--tw-gradient-from:color-mix(in oklab, var(--color-black) 35%, transparent)}}.from-black\/35{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/0{--tw-gradient-via:#0000}@supports (color:color-mix(in lab,red,red)){.via-black\/0{--tw-gradient-via:color-mix(in oklab, var(--color-black) 0%, transparent)}}.via-black\/0{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-black\/35{--tw-gradient-to:#00000059}@supports (color:color-mix(in lab,red,red)){.to-black\/35{--tw-gradient-to:color-mix(in oklab, var(--color-black) 35%, transparent)}}.to-black\/35{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-neutral-500{color:var(--color-neutral-500)}.text-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.bg-blend-overlay{background-blend-mode:overlay}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-black\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab,red,red)){.ring-black\/5{--tw-ring-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.ring-white\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.ring-white\/10{--tw-ring-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.ring-white\/15{--tw-ring-color:#ffffff26}@supports (color:color-mix(in lab,red,red)){.ring-white\/15{--tw-ring-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.backdrop-blur{--tw-backdrop-blur:blur(8px);-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,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-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-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.hover\:bg-black\/50:hover{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.hover\:bg-black\/50:hover{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.hover\:bg-violet-700\/90:hover{background-color:#7008e7e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-violet-700\/90:hover{background-color:color-mix(in oklab,var(--color-violet-700) 90%,transparent)}}.hover\:text-neutral-700:hover{color:var(--color-neutral-700)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@glitchlab/react-video-player",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React video player with HLS support (hls.js) compatible with Next.js and TypeScript",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/index.cjs",
|
|
8
|
+
"module": "./dist/index.mjs",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"style": "./dist/style.css",
|
|
11
|
+
"files": [
|
|
12
|
+
"dist",
|
|
13
|
+
"README.md"
|
|
14
|
+
],
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"import": "./dist/index.mjs",
|
|
19
|
+
"require": "./dist/index.cjs"
|
|
20
|
+
},
|
|
21
|
+
"./style.css": "./dist/style.css"
|
|
22
|
+
},
|
|
23
|
+
"sideEffects": [
|
|
24
|
+
"./dist/style.css"
|
|
25
|
+
],
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": ">=18",
|
|
28
|
+
"react-dom": ">=18"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"hls.js": "^1.5.0",
|
|
32
|
+
"clsx": "^2.1.1"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@eslint/js": "^10.0.1",
|
|
36
|
+
"@tailwindcss/postcss": "^4.2.1",
|
|
37
|
+
"@types/react": "^18",
|
|
38
|
+
"@types/react-dom": "^18",
|
|
39
|
+
"@typescript-eslint/eslint-plugin": "^8.56.1",
|
|
40
|
+
"@typescript-eslint/parser": "^8.56.1",
|
|
41
|
+
"@vitejs/plugin-react": "^4",
|
|
42
|
+
"autoprefixer": "^10.4.27",
|
|
43
|
+
"eslint": "^10.0.2",
|
|
44
|
+
"eslint-config-prettier": "^10.1.8",
|
|
45
|
+
"eslint-plugin-import": "^2.32.0",
|
|
46
|
+
"eslint-plugin-react": "^7.37.5",
|
|
47
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
48
|
+
"postcss": "^8.5.8",
|
|
49
|
+
"tailwindcss": "^4.2.1",
|
|
50
|
+
"typescript": "^5",
|
|
51
|
+
"typescript-eslint": "^8.56.1",
|
|
52
|
+
"vite": "^5",
|
|
53
|
+
"vite-plugin-dts": "^3"
|
|
54
|
+
},
|
|
55
|
+
"scripts": {
|
|
56
|
+
"build": "vite build",
|
|
57
|
+
"build:watch": "vite build --watch",
|
|
58
|
+
"prepublishOnly": "pnpm build"
|
|
59
|
+
},
|
|
60
|
+
"repository": {
|
|
61
|
+
"type": "git",
|
|
62
|
+
"url": "https://github.com/im-fahad/react-video-player"
|
|
63
|
+
}
|
|
64
|
+
}
|