@geekapps/silo-elements-nextjs 0.2.32 → 0.2.34
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/dist/VideoPlayer.d.ts +18 -0
- package/dist/VideoPlayer.js +141 -115
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +141 -115
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from
|
|
|
3
3
|
export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import gsap from 'gsap';
|
|
6
|
-
import {
|
|
6
|
+
import { Pause, Play, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
|
|
7
7
|
|
|
8
8
|
// src/ImageUploader.tsx
|
|
9
9
|
|
|
@@ -1212,21 +1212,27 @@ var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
|
|
|
1212
1212
|
function Sources(_props) {
|
|
1213
1213
|
return null;
|
|
1214
1214
|
}
|
|
1215
|
+
Sources.displayName = "SiloSources";
|
|
1215
1216
|
function Source(_props) {
|
|
1216
1217
|
return null;
|
|
1217
1218
|
}
|
|
1219
|
+
Source.displayName = "SiloSource";
|
|
1218
1220
|
function Subtitles(_props) {
|
|
1219
1221
|
return null;
|
|
1220
1222
|
}
|
|
1223
|
+
Subtitles.displayName = "SiloSubtitles";
|
|
1221
1224
|
function Subtitle(_props) {
|
|
1222
1225
|
return null;
|
|
1223
1226
|
}
|
|
1227
|
+
Subtitle.displayName = "SiloSubtitle";
|
|
1224
1228
|
function Storyboard(_props) {
|
|
1225
1229
|
return null;
|
|
1226
1230
|
}
|
|
1231
|
+
Storyboard.displayName = "SiloStoryboard";
|
|
1227
1232
|
function StoryboardFrame(_props) {
|
|
1228
1233
|
return null;
|
|
1229
1234
|
}
|
|
1235
|
+
StoryboardFrame.displayName = "SiloStoryboardFrame";
|
|
1230
1236
|
function Video({
|
|
1231
1237
|
title,
|
|
1232
1238
|
description,
|
|
@@ -1963,8 +1969,9 @@ function Video({
|
|
|
1963
1969
|
/* @__PURE__ */ jsx(
|
|
1964
1970
|
"div",
|
|
1965
1971
|
{
|
|
1966
|
-
className:
|
|
1967
|
-
|
|
1972
|
+
className: "pointer-events-none absolute inset-0 z-10 grid place-items-center",
|
|
1973
|
+
style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
|
|
1974
|
+
children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)] @sm:size-14 @lg:size-16", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-7 @lg:size-8" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-7 @lg:size-8" }) })
|
|
1968
1975
|
}
|
|
1969
1976
|
),
|
|
1970
1977
|
isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
|
|
@@ -1985,7 +1992,7 @@ function Video({
|
|
|
1985
1992
|
/* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
|
|
1986
1993
|
settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1987
1994
|
/* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-70", onClick: () => setSettingsOpen(false) }),
|
|
1988
|
-
/* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-
|
|
1995
|
+
/* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-2 z-70 mb-2 overflow-hidden rounded-2xl bg-[#1c1c1e]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/10", style: { width: Math.min(224, Math.max(180, (playerWidth || 640) * 0.22)) + "px", animation: "spFadeIn 0.15s ease" }, children: [
|
|
1989
1996
|
settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
|
|
1990
1997
|
{ id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
|
|
1991
1998
|
...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
|
|
@@ -2061,7 +2068,6 @@ function Video({
|
|
|
2061
2068
|
const next = s.srclang === "off" ? "off" : s.srclang;
|
|
2062
2069
|
setSubtitleMode(next);
|
|
2063
2070
|
setSubtitleStyle((st) => ({ ...st, track: next }));
|
|
2064
|
-
setSettingsTab("root");
|
|
2065
2071
|
},
|
|
2066
2072
|
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2067
2073
|
children: [
|
|
@@ -2070,7 +2076,75 @@ function Video({
|
|
|
2070
2076
|
]
|
|
2071
2077
|
},
|
|
2072
2078
|
s.srclang
|
|
2073
|
-
)) })
|
|
2079
|
+
)) }),
|
|
2080
|
+
subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
|
|
2081
|
+
"button",
|
|
2082
|
+
{
|
|
2083
|
+
type: "button",
|
|
2084
|
+
onClick: () => setSettingsTab("subtitles-style"),
|
|
2085
|
+
className: "flex w-full items-center justify-between gap-3 border-t border-white/8 px-4 py-3 text-sm transition hover:bg-white/8",
|
|
2086
|
+
children: [
|
|
2087
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
|
|
2088
|
+
/* @__PURE__ */ jsx("svg", { className: "size-3 opacity-50", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4.5 3l3 3-3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
2089
|
+
]
|
|
2090
|
+
}
|
|
2091
|
+
)
|
|
2092
|
+
] }),
|
|
2093
|
+
settingsTab === "subtitles-style" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2094
|
+
/* @__PURE__ */ jsxs(
|
|
2095
|
+
"button",
|
|
2096
|
+
{
|
|
2097
|
+
type: "button",
|
|
2098
|
+
onClick: () => setSettingsTab("subtitles"),
|
|
2099
|
+
className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
|
|
2100
|
+
children: [
|
|
2101
|
+
/* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2102
|
+
"Apar\xEAncia"
|
|
2103
|
+
]
|
|
2104
|
+
}
|
|
2105
|
+
),
|
|
2106
|
+
/* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
|
|
2107
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2108
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
|
|
2109
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
|
|
2110
|
+
"button",
|
|
2111
|
+
{
|
|
2112
|
+
type: "button",
|
|
2113
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
|
|
2114
|
+
className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ${subtitleStyle.size === s ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
|
|
2115
|
+
children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
|
|
2116
|
+
},
|
|
2117
|
+
s
|
|
2118
|
+
)) })
|
|
2119
|
+
] }),
|
|
2120
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2121
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Cor" }),
|
|
2122
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [["white", "Branco", "#fff"], ["yellow", "Amarelo", "#facc15"], ["cyan", "Ciano", "#22d3ee"]].map(([val, label, color]) => /* @__PURE__ */ jsx(
|
|
2123
|
+
"button",
|
|
2124
|
+
{
|
|
2125
|
+
type: "button",
|
|
2126
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, color: val })),
|
|
2127
|
+
className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ring-1 ${subtitleStyle.color === val ? "ring-white/40" : "ring-transparent hover:ring-white/15"}`,
|
|
2128
|
+
style: { color },
|
|
2129
|
+
children: label
|
|
2130
|
+
},
|
|
2131
|
+
val
|
|
2132
|
+
)) })
|
|
2133
|
+
] }),
|
|
2134
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2135
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Fundo" }),
|
|
2136
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [["none", "Nenhum"], ["semi", "Semi"], ["solid", "S\xF3lido"]].map(([val, label]) => /* @__PURE__ */ jsx(
|
|
2137
|
+
"button",
|
|
2138
|
+
{
|
|
2139
|
+
type: "button",
|
|
2140
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
|
|
2141
|
+
className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ${subtitleStyle.bg === val ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
|
|
2142
|
+
children: label
|
|
2143
|
+
},
|
|
2144
|
+
val
|
|
2145
|
+
)) })
|
|
2146
|
+
] })
|
|
2147
|
+
] })
|
|
2074
2148
|
] }),
|
|
2075
2149
|
settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2076
2150
|
/* @__PURE__ */ jsxs(
|
|
@@ -2144,32 +2218,27 @@ function Video({
|
|
|
2144
2218
|
onPointerLeave: handleProgressPointerLeave,
|
|
2145
2219
|
onPointerDown: handleProgressPointerDown,
|
|
2146
2220
|
onPointerUp: handleProgressPointerUp,
|
|
2147
|
-
className: "group relative mb-
|
|
2221
|
+
className: "group relative mb-3 h-7 cursor-pointer",
|
|
2148
2222
|
children: [
|
|
2149
|
-
/* @__PURE__ */ jsxs(
|
|
2150
|
-
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 bg-white/30", style: { width: `${bufferedPercent}%` } }),
|
|
2151
|
-
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 bg-white/85", style: { width: `${progressPercent}%` } })
|
|
2152
|
-
] }),
|
|
2153
|
-
/* @__PURE__ */ jsx(
|
|
2223
|
+
/* @__PURE__ */ jsxs(
|
|
2154
2224
|
"div",
|
|
2155
2225
|
{
|
|
2156
|
-
className: "absolute
|
|
2157
|
-
style: {
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
}
|
|
2226
|
+
className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150",
|
|
2227
|
+
style: { height: isDragging ? "6px" : "3px" },
|
|
2228
|
+
children: [
|
|
2229
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/30", style: { width: `${bufferedPercent}%` } }),
|
|
2230
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/90", style: { width: `${progressPercent}%` } })
|
|
2231
|
+
]
|
|
2163
2232
|
}
|
|
2164
2233
|
),
|
|
2165
2234
|
/* @__PURE__ */ jsx(
|
|
2166
2235
|
"div",
|
|
2167
2236
|
{
|
|
2168
|
-
className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow
|
|
2237
|
+
className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-md transition-[width,height] duration-100 group-hover:size-4",
|
|
2169
2238
|
style: {
|
|
2170
2239
|
left: `${progressPercent}%`,
|
|
2171
|
-
width: isDragging ? "
|
|
2172
|
-
height: isDragging ? "
|
|
2240
|
+
width: isDragging ? "16px" : "10px",
|
|
2241
|
+
height: isDragging ? "16px" : "10px"
|
|
2173
2242
|
}
|
|
2174
2243
|
}
|
|
2175
2244
|
)
|
|
@@ -2177,57 +2246,54 @@ function Video({
|
|
|
2177
2246
|
}
|
|
2178
2247
|
),
|
|
2179
2248
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
2180
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 @sm:gap-2", children: [
|
|
2181
|
-
/* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "back", onClick: () => seekRelative(-15) }),
|
|
2249
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 @sm:gap-2", children: [
|
|
2182
2250
|
/* @__PURE__ */ jsx(
|
|
2183
2251
|
"button",
|
|
2184
2252
|
{
|
|
2185
2253
|
type: "button",
|
|
2186
2254
|
onClick: togglePlay,
|
|
2187
|
-
className: "grid size-8 place-items-center text-white
|
|
2255
|
+
className: "grid size-8 place-items-center rounded-full bg-white/15 text-white backdrop-blur-sm ring-1 ring-white/15 transition hover:bg-white/25 @sm:size-9",
|
|
2188
2256
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
2189
|
-
children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-
|
|
2257
|
+
children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-5" })
|
|
2190
2258
|
}
|
|
2191
2259
|
),
|
|
2192
|
-
/* @__PURE__ */
|
|
2193
|
-
|
|
2194
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
2195
|
-
/* @__PURE__ */ jsx("span", { className: "text-white/
|
|
2196
|
-
/* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
|
|
2197
|
-
"-",
|
|
2198
|
-
formatTime(Math.max(0, duration - currentTime))
|
|
2199
|
-
] })
|
|
2260
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
|
|
2261
|
+
formatTime(currentTime),
|
|
2262
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
|
|
2263
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
|
|
2200
2264
|
] })
|
|
2201
2265
|
] }),
|
|
2202
2266
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
"
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2267
|
+
/* @__PURE__ */ jsxs("div", { className: "group flex items-center", children: [
|
|
2268
|
+
/* @__PURE__ */ jsx(
|
|
2269
|
+
"button",
|
|
2270
|
+
{
|
|
2271
|
+
type: "button",
|
|
2272
|
+
onClick: () => setIsMuted((value) => !value),
|
|
2273
|
+
className: "grid size-8 place-items-center text-white/70 transition hover:text-white @sm:size-9",
|
|
2274
|
+
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2275
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
|
|
2276
|
+
}
|
|
2277
|
+
),
|
|
2278
|
+
/* @__PURE__ */ jsx("div", { className: "w-0 overflow-hidden transition-all duration-200 group-hover:w-16 @md:group-hover:w-20", children: /* @__PURE__ */ jsx(
|
|
2279
|
+
"input",
|
|
2280
|
+
{
|
|
2281
|
+
type: "range",
|
|
2282
|
+
min: "0",
|
|
2283
|
+
max: "1",
|
|
2284
|
+
step: "0.01",
|
|
2285
|
+
value: isMuted ? 0 : volume,
|
|
2286
|
+
onChange: (event) => {
|
|
2287
|
+
const nextVolume = Number(event.target.value);
|
|
2288
|
+
setVolume(nextVolume);
|
|
2289
|
+
setIsMuted(nextVolume === 0);
|
|
2290
|
+
},
|
|
2291
|
+
className: "h-1 w-14 accent-white @md:w-20",
|
|
2292
|
+
"aria-label": "Audio level"
|
|
2293
|
+
}
|
|
2294
|
+
) })
|
|
2295
|
+
] }),
|
|
2296
|
+
/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
|
|
2231
2297
|
parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
|
|
2232
2298
|
"button",
|
|
2233
2299
|
{
|
|
@@ -2267,14 +2333,6 @@ function Video({
|
|
|
2267
2333
|
]
|
|
2268
2334
|
}
|
|
2269
2335
|
),
|
|
2270
|
-
/* @__PURE__ */ jsx(
|
|
2271
|
-
"div",
|
|
2272
|
-
{
|
|
2273
|
-
className: "pointer-events-none absolute inset-0 z-50 grid place-items-center",
|
|
2274
|
-
style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
|
|
2275
|
-
children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-full bg-black/40 text-white backdrop-blur-sm ring-1 ring-white/20 @sm:size-14 @lg:size-16", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6 @lg:size-7" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-6 @lg:size-7" }) })
|
|
2276
|
-
}
|
|
2277
|
-
),
|
|
2278
2336
|
preview && (() => {
|
|
2279
2337
|
const srcW = preview.cue.w ?? 160;
|
|
2280
2338
|
const srcH = preview.cue.h ?? 90;
|
|
@@ -2340,70 +2398,41 @@ function Video({
|
|
|
2340
2398
|
);
|
|
2341
2399
|
}
|
|
2342
2400
|
var VideoPlayer = Video;
|
|
2343
|
-
function SeekButton({ seconds, direction, onClick }) {
|
|
2344
|
-
return /* @__PURE__ */ jsx(
|
|
2345
|
-
"button",
|
|
2346
|
-
{
|
|
2347
|
-
type: "button",
|
|
2348
|
-
onClick,
|
|
2349
|
-
className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
|
|
2350
|
-
"aria-label": `${direction === "back" ? "Rewind" : "Forward"} ${seconds} seconds`,
|
|
2351
|
-
children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", fill: "none", className: "size-7 @sm:size-8", children: [
|
|
2352
|
-
/* @__PURE__ */ jsx(
|
|
2353
|
-
"path",
|
|
2354
|
-
{
|
|
2355
|
-
d: direction === "back" ? "M18 6C11.373 6 6 11.373 6 18s5.373 12 12 12 12-5.373 12-12" : "M18 6C24.627 6 30 11.373 30 18S24.627 30 18 30 6 24.627 6 18",
|
|
2356
|
-
stroke: "currentColor",
|
|
2357
|
-
strokeWidth: "2",
|
|
2358
|
-
strokeLinecap: "round"
|
|
2359
|
-
}
|
|
2360
|
-
),
|
|
2361
|
-
/* @__PURE__ */ jsx(
|
|
2362
|
-
"path",
|
|
2363
|
-
{
|
|
2364
|
-
d: direction === "back" ? "M18 6l-4 4 4 4" : "M18 6l4 4-4 4",
|
|
2365
|
-
stroke: "currentColor",
|
|
2366
|
-
strokeWidth: "2",
|
|
2367
|
-
strokeLinecap: "round",
|
|
2368
|
-
strokeLinejoin: "round"
|
|
2369
|
-
}
|
|
2370
|
-
),
|
|
2371
|
-
/* @__PURE__ */ jsx("text", { x: "18", y: "22", textAnchor: "middle", fill: "currentColor", fontSize: "9", fontWeight: "600", fontFamily: "system-ui", children: seconds })
|
|
2372
|
-
] })
|
|
2373
|
-
}
|
|
2374
|
-
);
|
|
2375
|
-
}
|
|
2376
2401
|
function parseVideoChildren(children) {
|
|
2377
2402
|
const parsed = {
|
|
2378
2403
|
sources: [],
|
|
2379
2404
|
subtitles: []
|
|
2380
2405
|
};
|
|
2406
|
+
function isType(child, fn) {
|
|
2407
|
+
if (child.type === fn) return true;
|
|
2408
|
+
return child.type?.displayName === fn.displayName && !!fn.displayName;
|
|
2409
|
+
}
|
|
2381
2410
|
React.Children.forEach(children, (child) => {
|
|
2382
2411
|
if (!React.isValidElement(child)) return;
|
|
2383
|
-
if (child
|
|
2412
|
+
if (isType(child, Sources)) {
|
|
2384
2413
|
const element = child;
|
|
2385
2414
|
React.Children.forEach(element.props.children, (sourceChild) => {
|
|
2386
2415
|
if (!React.isValidElement(sourceChild)) return;
|
|
2387
|
-
if (sourceChild
|
|
2416
|
+
if (!isType(sourceChild, Source)) return;
|
|
2388
2417
|
const sourceElement = sourceChild;
|
|
2389
2418
|
parsed.sources.push(sourceElement.props);
|
|
2390
2419
|
});
|
|
2391
2420
|
}
|
|
2392
|
-
if (child
|
|
2421
|
+
if (isType(child, Subtitles)) {
|
|
2393
2422
|
const element = child;
|
|
2394
2423
|
React.Children.forEach(element.props.children, (subtitleChild) => {
|
|
2395
2424
|
if (!React.isValidElement(subtitleChild)) return;
|
|
2396
|
-
if (subtitleChild
|
|
2425
|
+
if (!isType(subtitleChild, Subtitle)) return;
|
|
2397
2426
|
const subtitleElement = subtitleChild;
|
|
2398
2427
|
parsed.subtitles.push(subtitleElement.props);
|
|
2399
2428
|
});
|
|
2400
2429
|
}
|
|
2401
|
-
if (child
|
|
2430
|
+
if (isType(child, Storyboard)) {
|
|
2402
2431
|
const element = child;
|
|
2403
2432
|
const frames = [];
|
|
2404
2433
|
React.Children.forEach(element.props.children, (frameChild) => {
|
|
2405
2434
|
if (!React.isValidElement(frameChild)) return;
|
|
2406
|
-
if (frameChild
|
|
2435
|
+
if (!isType(frameChild, StoryboardFrame)) return;
|
|
2407
2436
|
const frameElement = frameChild;
|
|
2408
2437
|
frames.push(frameElement.props);
|
|
2409
2438
|
});
|
|
@@ -2477,18 +2506,15 @@ function parseVttTimestamp(value) {
|
|
|
2477
2506
|
return Number(normalized) || 0;
|
|
2478
2507
|
}
|
|
2479
2508
|
function formatTime(seconds) {
|
|
2480
|
-
if (!Number.isFinite(seconds)) return "
|
|
2509
|
+
if (!Number.isFinite(seconds)) return "0:00";
|
|
2481
2510
|
const safeSeconds = Math.max(0, Math.floor(seconds));
|
|
2482
2511
|
const hours = Math.floor(safeSeconds / 3600);
|
|
2483
2512
|
const minutes = Math.floor(safeSeconds % 3600 / 60);
|
|
2484
2513
|
const secs = safeSeconds % 60;
|
|
2485
2514
|
if (hours > 0) {
|
|
2486
|
-
return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(
|
|
2487
|
-
2,
|
|
2488
|
-
"0"
|
|
2489
|
-
)}`;
|
|
2515
|
+
return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
|
|
2490
2516
|
}
|
|
2491
|
-
return `${
|
|
2517
|
+
return `${minutes}:${String(secs).padStart(2, "0")}`;
|
|
2492
2518
|
}
|
|
2493
2519
|
var RADIUS = { full: "50%", md: "12px", sm: "6px" };
|
|
2494
2520
|
function Avatar({
|