@geekapps/silo-elements-nextjs 0.2.32 → 0.2.33

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.
Files changed (6) hide show
  1. package/dist/VideoPlayer.js +125 -109
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +125 -109
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. 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 { Play, Pause, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
6
+ import { Pause, Play, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
7
7
 
8
8
  // src/ImageUploader.tsx
9
9
 
@@ -1963,8 +1963,9 @@ function Video({
1963
1963
  /* @__PURE__ */ jsx(
1964
1964
  "div",
1965
1965
  {
1966
- className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
1967
- children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20 @sm:size-14 @lg:size-16", children: /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-6 @lg:size-7" }) })
1966
+ className: "pointer-events-none absolute inset-0 z-10 grid place-items-center",
1967
+ style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
1968
+ 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
1969
  }
1969
1970
  ),
1970
1971
  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 +1986,7 @@ function Video({
1985
1986
  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
1986
1987
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
1987
1988
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-70", onClick: () => setSettingsOpen(false) }),
1988
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-70 mb-2 w-56 overflow-hidden rounded-2xl bg-[#1c1c1e]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/10", style: { animation: "spFadeIn 0.15s ease" }, children: [
1989
+ /* @__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
1990
  settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
1990
1991
  { id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
1991
1992
  ...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 +2062,6 @@ function Video({
2061
2062
  const next = s.srclang === "off" ? "off" : s.srclang;
2062
2063
  setSubtitleMode(next);
2063
2064
  setSubtitleStyle((st) => ({ ...st, track: next }));
2064
- setSettingsTab("root");
2065
2065
  },
2066
2066
  className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2067
2067
  children: [
@@ -2070,7 +2070,75 @@ function Video({
2070
2070
  ]
2071
2071
  },
2072
2072
  s.srclang
2073
- )) })
2073
+ )) }),
2074
+ subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
2075
+ "button",
2076
+ {
2077
+ type: "button",
2078
+ onClick: () => setSettingsTab("subtitles-style"),
2079
+ 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",
2080
+ children: [
2081
+ /* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
2082
+ /* @__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" }) })
2083
+ ]
2084
+ }
2085
+ )
2086
+ ] }),
2087
+ settingsTab === "subtitles-style" && /* @__PURE__ */ jsxs("div", { children: [
2088
+ /* @__PURE__ */ jsxs(
2089
+ "button",
2090
+ {
2091
+ type: "button",
2092
+ onClick: () => setSettingsTab("subtitles"),
2093
+ 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",
2094
+ children: [
2095
+ /* @__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" }) }),
2096
+ "Apar\xEAncia"
2097
+ ]
2098
+ }
2099
+ ),
2100
+ /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
2101
+ /* @__PURE__ */ jsxs("div", { children: [
2102
+ /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
2103
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
2104
+ "button",
2105
+ {
2106
+ type: "button",
2107
+ onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
2108
+ 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"}`,
2109
+ children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
2110
+ },
2111
+ s
2112
+ )) })
2113
+ ] }),
2114
+ /* @__PURE__ */ jsxs("div", { children: [
2115
+ /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Cor" }),
2116
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [["white", "Branco", "#fff"], ["yellow", "Amarelo", "#facc15"], ["cyan", "Ciano", "#22d3ee"]].map(([val, label, color]) => /* @__PURE__ */ jsx(
2117
+ "button",
2118
+ {
2119
+ type: "button",
2120
+ onClick: () => setSubtitleStyle((st) => ({ ...st, color: val })),
2121
+ 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"}`,
2122
+ style: { color },
2123
+ children: label
2124
+ },
2125
+ val
2126
+ )) })
2127
+ ] }),
2128
+ /* @__PURE__ */ jsxs("div", { children: [
2129
+ /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Fundo" }),
2130
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [["none", "Nenhum"], ["semi", "Semi"], ["solid", "S\xF3lido"]].map(([val, label]) => /* @__PURE__ */ jsx(
2131
+ "button",
2132
+ {
2133
+ type: "button",
2134
+ onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
2135
+ 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"}`,
2136
+ children: label
2137
+ },
2138
+ val
2139
+ )) })
2140
+ ] })
2141
+ ] })
2074
2142
  ] }),
2075
2143
  settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
2076
2144
  /* @__PURE__ */ jsxs(
@@ -2144,32 +2212,27 @@ function Video({
2144
2212
  onPointerLeave: handleProgressPointerLeave,
2145
2213
  onPointerDown: handleProgressPointerDown,
2146
2214
  onPointerUp: handleProgressPointerUp,
2147
- className: "group relative mb-2 h-5 cursor-pointer",
2215
+ className: "group relative mb-3 h-7 cursor-pointer",
2148
2216
  children: [
2149
- /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150 group-hover:h-1", style: { height: isDragging ? "4px" : "2px" }, children: [
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(
2217
+ /* @__PURE__ */ jsxs(
2154
2218
  "div",
2155
2219
  {
2156
- className: "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow transition-[width,height] duration-100",
2157
- style: {
2158
- left: `${progressPercent}%`,
2159
- width: isDragging ? "14px" : "0px",
2160
- height: isDragging ? "14px" : "0px",
2161
- opacity: isDragging ? 1 : 0
2162
- }
2220
+ className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150",
2221
+ style: { height: isDragging ? "6px" : "3px" },
2222
+ children: [
2223
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/30", style: { width: `${bufferedPercent}%` } }),
2224
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/90", style: { width: `${progressPercent}%` } })
2225
+ ]
2163
2226
  }
2164
2227
  ),
2165
2228
  /* @__PURE__ */ jsx(
2166
2229
  "div",
2167
2230
  {
2168
- className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow opacity-0 transition-[width,height,opacity] duration-100 group-hover:opacity-100",
2231
+ 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
2232
  style: {
2170
2233
  left: `${progressPercent}%`,
2171
- width: isDragging ? "14px" : "10px",
2172
- height: isDragging ? "14px" : "10px"
2234
+ width: isDragging ? "16px" : "10px",
2235
+ height: isDragging ? "16px" : "10px"
2173
2236
  }
2174
2237
  }
2175
2238
  )
@@ -2177,57 +2240,54 @@ function Video({
2177
2240
  }
2178
2241
  ),
2179
2242
  /* @__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) }),
2243
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 @sm:gap-2", children: [
2182
2244
  /* @__PURE__ */ jsx(
2183
2245
  "button",
2184
2246
  {
2185
2247
  type: "button",
2186
2248
  onClick: togglePlay,
2187
- className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2249
+ 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
2250
  "aria-label": isPlaying ? "Pause" : "Play",
2189
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-6" })
2251
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-5" })
2190
2252
  }
2191
2253
  ),
2192
- /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "forward", onClick: () => seekRelative(15) }),
2193
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs font-semibold text-white/75 @sm:text-sm", children: [
2194
- /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
2195
- /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
2196
- /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
2197
- "-",
2198
- formatTime(Math.max(0, duration - currentTime))
2199
- ] })
2254
+ /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
2255
+ formatTime(currentTime),
2256
+ /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
2257
+ /* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
2200
2258
  ] })
2201
2259
  ] }),
2202
2260
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
2203
- /* @__PURE__ */ jsx(
2204
- "button",
2205
- {
2206
- type: "button",
2207
- onClick: () => setIsMuted((value) => !value),
2208
- className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2209
- "aria-label": isMuted ? "Unmute" : "Mute",
2210
- children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
2211
- }
2212
- ),
2213
- /* @__PURE__ */ jsx(
2214
- "input",
2215
- {
2216
- type: "range",
2217
- min: "0",
2218
- max: "1",
2219
- step: "0.01",
2220
- value: isMuted ? 0 : volume,
2221
- onChange: (event) => {
2222
- const nextVolume = Number(event.target.value);
2223
- setVolume(nextVolume);
2224
- setIsMuted(nextVolume === 0);
2225
- },
2226
- className: "hidden h-1 w-14 accent-white @md:block @md:w-20",
2227
- "aria-label": "Audio level"
2228
- }
2229
- ),
2230
- /* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
2261
+ /* @__PURE__ */ jsxs("div", { className: "group flex items-center", children: [
2262
+ /* @__PURE__ */ jsx(
2263
+ "button",
2264
+ {
2265
+ type: "button",
2266
+ onClick: () => setIsMuted((value) => !value),
2267
+ className: "grid size-8 place-items-center text-white/70 transition hover:text-white @sm:size-9",
2268
+ "aria-label": isMuted ? "Unmute" : "Mute",
2269
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
2270
+ }
2271
+ ),
2272
+ /* @__PURE__ */ jsx("div", { className: "w-0 overflow-hidden transition-all duration-200 group-hover:w-16 @md:group-hover:w-20", children: /* @__PURE__ */ jsx(
2273
+ "input",
2274
+ {
2275
+ type: "range",
2276
+ min: "0",
2277
+ max: "1",
2278
+ step: "0.01",
2279
+ value: isMuted ? 0 : volume,
2280
+ onChange: (event) => {
2281
+ const nextVolume = Number(event.target.value);
2282
+ setVolume(nextVolume);
2283
+ setIsMuted(nextVolume === 0);
2284
+ },
2285
+ className: "h-1 w-14 accent-white @md:w-20",
2286
+ "aria-label": "Audio level"
2287
+ }
2288
+ ) })
2289
+ ] }),
2290
+ /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
2231
2291
  parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
2232
2292
  "button",
2233
2293
  {
@@ -2267,14 +2327,6 @@ function Video({
2267
2327
  ]
2268
2328
  }
2269
2329
  ),
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
2330
  preview && (() => {
2279
2331
  const srcW = preview.cue.w ?? 160;
2280
2332
  const srcH = preview.cue.h ?? 90;
@@ -2340,39 +2392,6 @@ function Video({
2340
2392
  );
2341
2393
  }
2342
2394
  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
2395
  function parseVideoChildren(children) {
2377
2396
  const parsed = {
2378
2397
  sources: [],
@@ -2477,18 +2496,15 @@ function parseVttTimestamp(value) {
2477
2496
  return Number(normalized) || 0;
2478
2497
  }
2479
2498
  function formatTime(seconds) {
2480
- if (!Number.isFinite(seconds)) return "00:00";
2499
+ if (!Number.isFinite(seconds)) return "0:00";
2481
2500
  const safeSeconds = Math.max(0, Math.floor(seconds));
2482
2501
  const hours = Math.floor(safeSeconds / 3600);
2483
2502
  const minutes = Math.floor(safeSeconds % 3600 / 60);
2484
2503
  const secs = safeSeconds % 60;
2485
2504
  if (hours > 0) {
2486
- return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(
2487
- 2,
2488
- "0"
2489
- )}`;
2505
+ return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
2490
2506
  }
2491
- return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
2507
+ return `${minutes}:${String(secs).padStart(2, "0")}`;
2492
2508
  }
2493
2509
  var RADIUS = { full: "50%", md: "12px", sm: "6px" };
2494
2510
  function Avatar({