@geekapps/silo-elements-nextjs 0.2.27 → 0.2.29

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 +192 -117
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +192 -117
  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, Settings, Captions, Volume2, Pause, VolumeX, Minimize, Maximize } from 'lucide-react';
6
+ import { Play, Pause, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
7
7
 
8
8
  // src/ImageUploader.tsx
9
9
 
@@ -1287,6 +1287,7 @@ function Video({
1287
1287
  const [isMuted, setIsMuted] = useState(false);
1288
1288
  const [isFullscreen, setIsFullscreen] = useState(false);
1289
1289
  const [playerHeight, setPlayerHeight] = useState(0);
1290
+ const [playerWidth, setPlayerWidth] = useState(0);
1290
1291
  const [error, setError] = useState(null);
1291
1292
  const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
1292
1293
  const progressPercent = duration ? currentTime / duration * 100 : 0;
@@ -1472,7 +1473,10 @@ function Video({
1472
1473
  if (!player) return;
1473
1474
  const ro = new ResizeObserver((entries) => {
1474
1475
  const entry = entries[0];
1475
- if (entry) setPlayerHeight(entry.contentRect.height);
1476
+ if (entry) {
1477
+ setPlayerHeight(entry.contentRect.height);
1478
+ setPlayerWidth(entry.contentRect.width);
1479
+ }
1476
1480
  });
1477
1481
  ro.observe(player);
1478
1482
  return () => ro.disconnect();
@@ -1942,7 +1946,7 @@ function Video({
1942
1946
  {
1943
1947
  ref: chromeRef,
1944
1948
  onClick: togglePlay,
1945
- className: `absolute inset-0 z-30 flex flex-col justify-between transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
1949
+ className: `absolute inset-0 z-30 flex flex-col transition-opacity duration-200 ${isFullscreen ? "justify-between" : "justify-end"} ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
1946
1950
  children: [
1947
1951
  isFullscreen && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
1948
1952
  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
@@ -1953,20 +1957,52 @@ function Video({
1953
1957
  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
1954
1958
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
1955
1959
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
1956
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 mb-3 flex flex-col gap-2.5", style: { animation: "spFadeIn 0.15s ease" }, children: [
1957
- /* @__PURE__ */ jsxs("div", { className: "w-52 overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8", children: [
1958
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
1959
- /* @__PURE__ */ jsx(Settings, { className: "size-4 text-white/60" }),
1960
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Video Quality" })
1961
- ] }),
1960
+ /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 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: [
1961
+ settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
1962
+ { id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
1963
+ ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
1964
+ ...audioTracks.length > 1 ? [{ id: "audio", label: "\xC1udio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
1965
+ { id: "playback", label: "Velocidade", value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7` }
1966
+ ].map((item) => /* @__PURE__ */ jsxs(
1967
+ "button",
1968
+ {
1969
+ type: "button",
1970
+ onClick: () => setSettingsTab(item.id),
1971
+ className: "flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition hover:bg-white/8 first:pt-3.5 last:pb-3.5",
1972
+ children: [
1973
+ /* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
1974
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
1975
+ item.value,
1976
+ /* @__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" }) })
1977
+ ] })
1978
+ ]
1979
+ },
1980
+ item.id
1981
+ )) }),
1982
+ settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
1983
+ /* @__PURE__ */ jsxs(
1984
+ "button",
1985
+ {
1986
+ type: "button",
1987
+ onClick: () => setSettingsTab("root"),
1988
+ 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",
1989
+ children: [
1990
+ /* @__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" }) }),
1991
+ "Qualidade"
1992
+ ]
1993
+ }
1994
+ ),
1962
1995
  /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
1963
1996
  "button",
1964
1997
  {
1965
1998
  type: "button",
1966
- onClick: () => changeQuality(quality.id),
1967
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
1999
+ onClick: () => {
2000
+ changeQuality(quality.id);
2001
+ setSettingsTab("root");
2002
+ },
2003
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
1968
2004
  children: [
1969
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
2005
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
1970
2006
  /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
1971
2007
  quality.label,
1972
2008
  quality.id === "auto" ? " (ABR)" : ""
@@ -1976,78 +2012,103 @@ function Video({
1976
2012
  quality.id
1977
2013
  )) })
1978
2014
  ] }),
1979
- (parsed.subtitles.length > 0 || audioTracks.length > 1) && /* @__PURE__ */ jsx("div", { className: `overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8 ${parsed.subtitles.length > 0 && audioTracks.length > 1 ? "w-80" : "w-52"}`, children: /* @__PURE__ */ jsxs("div", { className: `grid ${parsed.subtitles.length > 0 && audioTracks.length > 1 ? "grid-cols-2 divide-x divide-white/8" : "grid-cols-1"}`, children: [
1980
- parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
1981
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
1982
- /* @__PURE__ */ jsx(Captions, { className: "size-4 text-white/60" }),
1983
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Subtitles" })
1984
- ] }),
1985
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
1986
- "button",
1987
- {
1988
- type: "button",
1989
- onClick: () => {
1990
- const next = s.srclang === "off" ? "off" : s.srclang;
1991
- setSubtitleMode(next);
1992
- setSubtitleStyle((st) => ({ ...st, track: next }));
1993
- },
1994
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
1995
- children: [
1996
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
1997
- /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
1998
- ]
2015
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
2016
+ /* @__PURE__ */ jsxs(
2017
+ "button",
2018
+ {
2019
+ type: "button",
2020
+ onClick: () => setSettingsTab("root"),
2021
+ 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",
2022
+ children: [
2023
+ /* @__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" }) }),
2024
+ "Legendas"
2025
+ ]
2026
+ }
2027
+ ),
2028
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Desligado" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
2029
+ "button",
2030
+ {
2031
+ type: "button",
2032
+ onClick: () => {
2033
+ const next = s.srclang === "off" ? "off" : s.srclang;
2034
+ setSubtitleMode(next);
2035
+ setSubtitleStyle((st) => ({ ...st, track: next }));
2036
+ setSettingsTab("root");
1999
2037
  },
2000
- s.srclang
2001
- )) })
2002
- ] }),
2003
- audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
2004
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
2005
- /* @__PURE__ */ jsx(Volume2, { className: "size-4 text-white/60" }),
2006
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Audio" })
2007
- ] }),
2008
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2009
- "button",
2010
- {
2011
- type: "button",
2012
- onClick: () => changeAudio(track.id),
2013
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
2014
- children: [
2015
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
2016
- /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
2017
- ]
2038
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2039
+ children: [
2040
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2041
+ /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
2042
+ ]
2043
+ },
2044
+ s.srclang
2045
+ )) })
2046
+ ] }),
2047
+ settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
2048
+ /* @__PURE__ */ jsxs(
2049
+ "button",
2050
+ {
2051
+ type: "button",
2052
+ onClick: () => setSettingsTab("root"),
2053
+ 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",
2054
+ children: [
2055
+ /* @__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" }) }),
2056
+ "\xC1udio"
2057
+ ]
2058
+ }
2059
+ ),
2060
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2061
+ "button",
2062
+ {
2063
+ type: "button",
2064
+ onClick: () => {
2065
+ changeAudio(track.id);
2066
+ setSettingsTab("root");
2018
2067
  },
2019
- track.id
2020
- )) })
2021
- ] })
2022
- ] }) }),
2023
- /* @__PURE__ */ jsxs("div", { className: "w-64 overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8", children: [
2024
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
2025
- /* @__PURE__ */ jsxs("svg", { className: "size-4 text-white/60", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
2026
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
2027
- /* @__PURE__ */ jsx("path", { d: "M12 12l-2-4M12 12l3.5-1.5", strokeLinecap: "round" })
2028
- ] }),
2029
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Playback Speed" })
2030
- ] }),
2031
- /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 pt-3", children: [
2032
- /* @__PURE__ */ jsx(
2033
- "input",
2034
- {
2035
- type: "range",
2036
- min: 0,
2037
- max: PLAYBACK_SPEEDS.length - 1,
2038
- step: 1,
2039
- value: PLAYBACK_SPEEDS.indexOf(playbackRate) === -1 ? PLAYBACK_SPEEDS.indexOf(1) : PLAYBACK_SPEEDS.indexOf(playbackRate),
2040
- onChange: (e) => setPlaybackRate(PLAYBACK_SPEEDS[Number(e.target.value)] ?? 1),
2041
- className: "w-full accent-white"
2042
- }
2043
- ),
2044
- /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex justify-between", children: PLAYBACK_SPEEDS.map((s) => /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium ${playbackRate === s ? "text-white font-bold" : "text-white/40"}`, children: s === 1 ? "1x" : `${s}x` }, s)) })
2045
- ] })
2068
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2069
+ children: [
2070
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2071
+ /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
2072
+ ]
2073
+ },
2074
+ track.id
2075
+ )) })
2076
+ ] }),
2077
+ settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
2078
+ /* @__PURE__ */ jsxs(
2079
+ "button",
2080
+ {
2081
+ type: "button",
2082
+ onClick: () => setSettingsTab("root"),
2083
+ 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",
2084
+ children: [
2085
+ /* @__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" }) }),
2086
+ "Velocidade"
2087
+ ]
2088
+ }
2089
+ ),
2090
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
2091
+ "button",
2092
+ {
2093
+ type: "button",
2094
+ onClick: () => {
2095
+ setPlaybackRate(speed);
2096
+ setSettingsOpen(false);
2097
+ setSettingsTab("root");
2098
+ },
2099
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2100
+ children: [
2101
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2102
+ /* @__PURE__ */ jsx("span", { className: playbackRate === speed ? "font-semibold text-white" : "text-white/55", children: speed === 1 ? "Normal" : `${speed}\xD7` })
2103
+ ]
2104
+ },
2105
+ speed
2106
+ )) })
2046
2107
  ] })
2047
2108
  ] }),
2048
2109
  /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
2049
2110
  ] }),
2050
- /* @__PURE__ */ jsxs(
2111
+ /* @__PURE__ */ jsx(
2051
2112
  "div",
2052
2113
  {
2053
2114
  ref: progressRef,
@@ -2055,48 +2116,22 @@ function Video({
2055
2116
  onPointerLeave: handleProgressPointerLeave,
2056
2117
  onPointerDown: handleProgressPointerDown,
2057
2118
  className: "group relative mb-2 h-5 cursor-pointer",
2058
- children: [
2059
- preview && /* @__PURE__ */ jsxs(
2119
+ children: /* @__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: "2px" }, children: [
2120
+ /* @__PURE__ */ jsx(
2060
2121
  "div",
2061
2122
  {
2062
- className: "pointer-events-none absolute bottom-8 z-50 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur",
2063
- style: { left: preview.left },
2064
- children: [
2065
- /* @__PURE__ */ jsx(
2066
- "div",
2067
- {
2068
- className: "overflow-hidden rounded-md bg-neutral-900",
2069
- style: {
2070
- width: preview.cue.w ?? 160,
2071
- height: preview.cue.h ?? 90,
2072
- backgroundImage: `url(${preview.cue.image})`,
2073
- backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x}px -${preview.cue.y}px` : "center",
2074
- backgroundSize: preview.cue.x != null ? "auto" : "cover",
2075
- backgroundRepeat: "no-repeat"
2076
- }
2077
- }
2078
- ),
2079
- /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })
2080
- ]
2123
+ className: "absolute inset-y-0 left-0 bg-white/30",
2124
+ style: { width: `${bufferedPercent}%` }
2081
2125
  }
2082
2126
  ),
2083
- /* @__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: "2px" }, children: [
2084
- /* @__PURE__ */ jsx(
2085
- "div",
2086
- {
2087
- className: "absolute inset-y-0 left-0 bg-white/30",
2088
- style: { width: `${bufferedPercent}%` }
2089
- }
2090
- ),
2091
- /* @__PURE__ */ jsx(
2092
- "div",
2093
- {
2094
- className: "absolute inset-y-0 left-0 bg-white/85",
2095
- style: { width: `${progressPercent}%` }
2096
- }
2097
- )
2098
- ] })
2099
- ]
2127
+ /* @__PURE__ */ jsx(
2128
+ "div",
2129
+ {
2130
+ className: "absolute inset-y-0 left-0 bg-white/85",
2131
+ style: { width: `${progressPercent}%` }
2132
+ }
2133
+ )
2134
+ ] })
2100
2135
  }
2101
2136
  ),
2102
2137
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
@@ -2198,10 +2233,50 @@ function Video({
2198
2233
  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" }) })
2199
2234
  }
2200
2235
  ),
2236
+ preview && (() => {
2237
+ const srcW = preview.cue.w ?? 160;
2238
+ const srcH = preview.cue.h ?? 90;
2239
+ const thumbW = Math.max(120, Math.round((playerWidth || 640) * 0.1));
2240
+ const thumbH = Math.round(thumbW * (srcH / srcW));
2241
+ const scale = thumbW / srcW;
2242
+ const isSprite = preview.cue.x != null && preview.cue.y != null;
2243
+ return /* @__PURE__ */ jsxs(
2244
+ "div",
2245
+ {
2246
+ className: "pointer-events-none absolute z-50 -translate-x-1/2 rounded-xl bg-black/75 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur-sm",
2247
+ style: { bottom: controlsVisible ? "72px" : "16px", left: preview.left, transition: "bottom 0.2s" },
2248
+ children: [
2249
+ /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", style: { width: thumbW, height: thumbH }, children: isSprite ? (
2250
+ // Inner div at native tile size, positioned to show the right sprite cell,
2251
+ // then scaled up to fill thumbW×thumbH. transformOrigin top-left ensures
2252
+ // the clip window aligns correctly.
2253
+ /* @__PURE__ */ jsx("div", { style: {
2254
+ width: srcW,
2255
+ height: srcH,
2256
+ backgroundImage: `url(${preview.cue.image})`,
2257
+ backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
2258
+ backgroundSize: "auto",
2259
+ backgroundRepeat: "no-repeat",
2260
+ transform: `scale(${scale})`,
2261
+ transformOrigin: "top left"
2262
+ } })
2263
+ ) : /* @__PURE__ */ jsx("div", { style: {
2264
+ width: thumbW,
2265
+ height: thumbH,
2266
+ backgroundImage: `url(${preview.cue.image})`,
2267
+ backgroundSize: "cover",
2268
+ backgroundPosition: "center",
2269
+ backgroundRepeat: "no-repeat"
2270
+ } }) }),
2271
+ /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/75", children: formatTime(preview.time) })
2272
+ ]
2273
+ }
2274
+ );
2275
+ })(),
2201
2276
  activeCue && /* @__PURE__ */ jsx(
2202
2277
  "div",
2203
2278
  {
2204
- className: `pointer-events-none absolute inset-x-0 z-35 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
2279
+ className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
2205
2280
  children: /* @__PURE__ */ jsx(
2206
2281
  "div",
2207
2282
  {