@geekapps/silo-elements-nextjs 0.2.26 → 0.2.28

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 +231 -225
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +231 -225
  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, Rewind, Pause, FastForward, VolumeX, Volume2, Captions, Settings, 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
 
@@ -1942,166 +1942,167 @@ function Video({
1942
1942
  {
1943
1943
  ref: chromeRef,
1944
1944
  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"}`,
1945
+ 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
1946
  children: [
1947
- /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
1947
+ 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
1948
  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
1949
- /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "relative z-10 flex items-start justify-between gap-4 px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: [
1950
- /* @__PURE__ */ jsxs("div", { children: [
1951
- title && isFullscreen && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
1952
- description && isFullscreen && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
1953
- ] }),
1954
- parsed.sources.length > 1 && /* @__PURE__ */ jsx(
1955
- "select",
1956
- {
1957
- value: String(sourceIndex),
1958
- onChange: (e) => setSourceIndex(Number(e.target.value)),
1959
- "aria-label": "Video source",
1960
- className: "h-8 rounded-full border border-white/15 bg-white/10 px-3 text-xs font-semibold text-white outline-none backdrop-blur-md transition hover:bg-white/15",
1961
- children: parsed.sources.map((source, index) => /* @__PURE__ */ jsx("option", { value: String(index), className: "text-black", children: source.label ?? source.type ?? `Source ${index + 1}` }, `${source.src}-${index}`))
1962
- }
1963
- )
1964
- ] }),
1965
- /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", children: [
1949
+ isFullscreen && /* @__PURE__ */ jsx("header", { onClick: (e) => e.stopPropagation(), className: "relative z-10 flex items-start px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: /* @__PURE__ */ jsxs("div", { children: [
1950
+ title && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
1951
+ description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
1952
+ ] }) }),
1953
+ /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
1966
1954
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
1967
1955
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
1968
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-3 z-50 mb-2 w-56 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl @sm:right-5 @lg:right-9", children: [
1969
- /* @__PURE__ */ jsxs(
1970
- "div",
1971
- {
1972
- style: {
1973
- display: settingsTab === "root" ? "block" : "none",
1974
- animation: settingsTab === "root" ? "settingsSlideIn 0.18s ease" : void 0
1975
- },
1976
- children: [
1977
- /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Settings" }),
1978
- [
1979
- { id: "quality", label: "Quality", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
1980
- ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Subtitles / CC", value: subtitleStyle.track === "off" ? "Off" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
1981
- ...audioTracks.length > 1 ? [{ id: "audio", label: "Audio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
1982
- { id: "playback", label: "Speed", value: playbackRate === 1 ? "Normal" : `${playbackRate}x` }
1983
- ].map((item) => /* @__PURE__ */ jsxs(
1984
- "button",
1985
- {
1986
- type: "button",
1987
- onClick: () => setSettingsTab(item.id),
1988
- className: "flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-white/80 transition hover:bg-white/10 hover:text-white",
1989
- children: [
1990
- /* @__PURE__ */ jsx("span", { children: item.label }),
1991
- /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-white/40", children: [
1992
- item.value,
1993
- /* @__PURE__ */ jsx("svg", { className: "size-3.5 opacity-50", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
1994
- ] })
1995
- ]
1996
- },
1997
- item.id
1998
- ))
1999
- ]
2000
- },
2001
- "root"
2002
- ),
2003
- ["quality", "subtitles", "audio", "playback"].map((tab) => /* @__PURE__ */ jsxs(
2004
- "div",
1956
+ /* @__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: [
1957
+ settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
1958
+ { id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
1959
+ ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
1960
+ ...audioTracks.length > 1 ? [{ id: "audio", label: "\xC1udio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
1961
+ { id: "playback", label: "Velocidade", value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7` }
1962
+ ].map((item) => /* @__PURE__ */ jsxs(
1963
+ "button",
2005
1964
  {
2006
- style: {
2007
- display: settingsTab === tab ? "block" : "none",
2008
- animation: settingsTab === tab ? "settingsSlideIn 0.18s ease" : void 0
2009
- },
1965
+ type: "button",
1966
+ onClick: () => setSettingsTab(item.id),
1967
+ 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",
2010
1968
  children: [
2011
- /* @__PURE__ */ jsxs(
2012
- "button",
2013
- {
2014
- type: "button",
2015
- onClick: () => setSettingsTab("root"),
2016
- className: "flex w-full items-center gap-2 border-b border-white/10 px-3 py-2.5 text-xs font-semibold text-white/60 transition hover:text-white",
2017
- children: [
2018
- /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2019
- tab === "quality" ? "Quality" : tab === "subtitles" ? "Subtitles / CC" : tab === "audio" ? "Audio" : "Speed"
2020
- ]
2021
- }
2022
- ),
2023
- /* @__PURE__ */ jsxs("div", { className: "max-h-52 overflow-y-auto py-1", children: [
2024
- tab === "quality" && [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(SettingsItem, { active: selectedQuality === quality.id, onClick: () => {
2025
- changeQuality(quality.id);
2026
- setSettingsTab("root");
2027
- }, children: [
2028
- quality.label,
2029
- quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
2030
- ] }, quality.id)),
2031
- tab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
2032
- /* @__PURE__ */ jsxs("div", { children: [
2033
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Track" }),
2034
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
2035
- "button",
2036
- {
2037
- type: "button",
2038
- onClick: () => {
2039
- const next = s.srclang === "off" ? "off" : s.srclang;
2040
- setSubtitleMode(next);
2041
- setSubtitleStyle((st) => ({ ...st, track: next }));
2042
- },
2043
- className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.track === s.srclang ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
2044
- children: s.label
2045
- },
2046
- s.srclang
2047
- )) })
2048
- ] }),
2049
- /* @__PURE__ */ jsxs("div", { children: [
2050
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Size" }),
2051
- /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
2052
- "button",
2053
- {
2054
- type: "button",
2055
- onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
2056
- className: `rounded-md px-2 py-1 text-xs font-medium capitalize transition ${subtitleStyle.size === s ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
2057
- children: s === "xlarge" ? "XL" : s.charAt(0).toUpperCase() + s.slice(1)
2058
- },
2059
- s
2060
- )) })
2061
- ] }),
2062
- /* @__PURE__ */ jsxs("div", { children: [
2063
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Color" }),
2064
- /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
2065
- "button",
2066
- {
2067
- type: "button",
2068
- onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
2069
- className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
2070
- style: { backgroundColor: hex }
2071
- },
2072
- c
2073
- )) })
2074
- ] }),
2075
- /* @__PURE__ */ jsxs("div", { children: [
2076
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Background" }),
2077
- /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
2078
- "button",
2079
- {
2080
- type: "button",
2081
- onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
2082
- className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.bg === v ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
2083
- children: label
2084
- },
2085
- v
2086
- )) })
2087
- ] })
2088
- ] }),
2089
- tab === "audio" && audioTracks.map((track) => /* @__PURE__ */ jsx(SettingsItem, { active: selectedAudio === track.id, onClick: () => {
2090
- changeAudio(track.id);
2091
- setSettingsTab("root");
2092
- }, children: track.label }, track.id)),
2093
- tab === "playback" && PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsx(SettingsItem, { active: playbackRate === speed, onClick: () => {
2094
- setPlaybackRate(speed);
2095
- setSettingsOpen(false);
2096
- setSettingsTab("root");
2097
- }, children: speed === 1 ? "Normal" : `${speed}x` }, speed))
1969
+ /* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
1970
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
1971
+ item.value,
1972
+ /* @__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" }) })
2098
1973
  ] })
2099
1974
  ]
2100
1975
  },
2101
- tab
2102
- ))
1976
+ item.id
1977
+ )) }),
1978
+ settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
1979
+ /* @__PURE__ */ jsxs(
1980
+ "button",
1981
+ {
1982
+ type: "button",
1983
+ onClick: () => setSettingsTab("root"),
1984
+ 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",
1985
+ children: [
1986
+ /* @__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" }) }),
1987
+ "Qualidade"
1988
+ ]
1989
+ }
1990
+ ),
1991
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
1992
+ "button",
1993
+ {
1994
+ type: "button",
1995
+ onClick: () => {
1996
+ changeQuality(quality.id);
1997
+ setSettingsTab("root");
1998
+ },
1999
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2000
+ children: [
2001
+ /* @__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" }) }),
2002
+ /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
2003
+ quality.label,
2004
+ quality.id === "auto" ? " (ABR)" : ""
2005
+ ] })
2006
+ ]
2007
+ },
2008
+ quality.id
2009
+ )) })
2010
+ ] }),
2011
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
2012
+ /* @__PURE__ */ jsxs(
2013
+ "button",
2014
+ {
2015
+ type: "button",
2016
+ onClick: () => setSettingsTab("root"),
2017
+ 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",
2018
+ children: [
2019
+ /* @__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" }) }),
2020
+ "Legendas"
2021
+ ]
2022
+ }
2023
+ ),
2024
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Desligado" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
2025
+ "button",
2026
+ {
2027
+ type: "button",
2028
+ onClick: () => {
2029
+ const next = s.srclang === "off" ? "off" : s.srclang;
2030
+ setSubtitleMode(next);
2031
+ setSubtitleStyle((st) => ({ ...st, track: next }));
2032
+ setSettingsTab("root");
2033
+ },
2034
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2035
+ children: [
2036
+ /* @__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" }) }),
2037
+ /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
2038
+ ]
2039
+ },
2040
+ s.srclang
2041
+ )) })
2042
+ ] }),
2043
+ settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
2044
+ /* @__PURE__ */ jsxs(
2045
+ "button",
2046
+ {
2047
+ type: "button",
2048
+ onClick: () => setSettingsTab("root"),
2049
+ 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",
2050
+ children: [
2051
+ /* @__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" }) }),
2052
+ "\xC1udio"
2053
+ ]
2054
+ }
2055
+ ),
2056
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2057
+ "button",
2058
+ {
2059
+ type: "button",
2060
+ onClick: () => {
2061
+ changeAudio(track.id);
2062
+ setSettingsTab("root");
2063
+ },
2064
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2065
+ children: [
2066
+ /* @__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" }) }),
2067
+ /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
2068
+ ]
2069
+ },
2070
+ track.id
2071
+ )) })
2072
+ ] }),
2073
+ settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
2074
+ /* @__PURE__ */ jsxs(
2075
+ "button",
2076
+ {
2077
+ type: "button",
2078
+ onClick: () => setSettingsTab("root"),
2079
+ 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",
2080
+ children: [
2081
+ /* @__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" }) }),
2082
+ "Velocidade"
2083
+ ]
2084
+ }
2085
+ ),
2086
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
2087
+ "button",
2088
+ {
2089
+ type: "button",
2090
+ onClick: () => {
2091
+ setPlaybackRate(speed);
2092
+ setSettingsOpen(false);
2093
+ setSettingsTab("root");
2094
+ },
2095
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2096
+ children: [
2097
+ /* @__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" }) }),
2098
+ /* @__PURE__ */ jsx("span", { className: playbackRate === speed ? "font-semibold text-white" : "text-white/55", children: speed === 1 ? "Normal" : `${speed}\xD7` })
2099
+ ]
2100
+ },
2101
+ speed
2102
+ )) })
2103
+ ] })
2103
2104
  ] }),
2104
- /* @__PURE__ */ jsx("style", { children: `@keyframes settingsSlideIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}` })
2105
+ /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
2105
2106
  ] }),
2106
2107
  /* @__PURE__ */ jsxs(
2107
2108
  "div",
@@ -2110,33 +2111,41 @@ function Video({
2110
2111
  onPointerMove: handleProgressPointerMove,
2111
2112
  onPointerLeave: handleProgressPointerLeave,
2112
2113
  onPointerDown: handleProgressPointerDown,
2113
- className: "relative mb-3 h-5 cursor-pointer @sm:mb-4 @lg:mb-6",
2114
+ className: "group relative mb-2 h-5 cursor-pointer",
2114
2115
  children: [
2115
- preview && /* @__PURE__ */ jsxs(
2116
- "div",
2117
- {
2118
- className: "pointer-events-none absolute bottom-8 z-20 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur",
2119
- style: { left: preview.left },
2120
- children: [
2121
- /* @__PURE__ */ jsx(
2122
- "div",
2123
- {
2124
- className: "overflow-hidden rounded-md bg-neutral-900",
2125
- style: {
2126
- width: preview.cue.w ?? 160,
2127
- height: preview.cue.h ?? 90,
2128
- backgroundImage: `url(${preview.cue.image})`,
2129
- backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x}px -${preview.cue.y}px` : "center",
2130
- backgroundSize: preview.cue.x != null ? "auto" : "cover",
2131
- backgroundRepeat: "no-repeat"
2116
+ preview && (() => {
2117
+ const srcW = preview.cue.w ?? 160;
2118
+ const srcH = preview.cue.h ?? 90;
2119
+ const aspect = srcW / srcH;
2120
+ const thumbH = Math.max(120, Math.min(playerHeight * 0.25, 300));
2121
+ const thumbW = Math.round(thumbH * aspect);
2122
+ const scale = thumbH / srcH;
2123
+ return /* @__PURE__ */ jsxs(
2124
+ "div",
2125
+ {
2126
+ className: "pointer-events-none absolute bottom-10 z-60 -translate-x-1/2 rounded-xl bg-black/80 p-1.5 shadow-2xl ring-1 ring-white/15 backdrop-blur",
2127
+ style: { left: preview.left },
2128
+ children: [
2129
+ /* @__PURE__ */ jsx(
2130
+ "div",
2131
+ {
2132
+ className: "overflow-hidden rounded-lg bg-neutral-900",
2133
+ style: {
2134
+ width: thumbW,
2135
+ height: thumbH,
2136
+ backgroundImage: `url(${preview.cue.image})`,
2137
+ backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x * scale}px -${preview.cue.y * scale}px` : "center",
2138
+ backgroundSize: preview.cue.x != null ? `auto ${thumbH}px` : "cover",
2139
+ backgroundRepeat: "no-repeat"
2140
+ }
2132
2141
  }
2133
- }
2134
- ),
2135
- /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })
2136
- ]
2137
- }
2138
- ),
2139
- /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 @sm:h-1.25", children: [
2142
+ ),
2143
+ /* @__PURE__ */ jsx("div", { className: "pt-1.5 text-center text-xs font-semibold text-white/80", children: formatTime(preview.time) })
2144
+ ]
2145
+ }
2146
+ );
2147
+ })(),
2148
+ /* @__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: [
2140
2149
  /* @__PURE__ */ jsx(
2141
2150
  "div",
2142
2151
  {
@@ -2155,42 +2164,27 @@ function Video({
2155
2164
  ]
2156
2165
  }
2157
2166
  ),
2158
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 @sm:gap-4 @lg:gap-5", children: [
2159
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 @sm:gap-4 @lg:gap-5", children: [
2160
- /* @__PURE__ */ jsx(
2161
- "button",
2162
- {
2163
- type: "button",
2164
- onClick: () => seekRelative(-10),
2165
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2166
- "aria-label": "Rewind 10 seconds",
2167
- children: /* @__PURE__ */ jsx(Rewind, { className: "size-4 @sm:size-6" })
2168
- }
2169
- ),
2167
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
2168
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 @sm:gap-2", children: [
2169
+ /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "back", onClick: () => seekRelative(-15) }),
2170
2170
  /* @__PURE__ */ jsx(
2171
2171
  "button",
2172
2172
  {
2173
2173
  type: "button",
2174
2174
  onClick: togglePlay,
2175
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2175
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2176
2176
  "aria-label": isPlaying ? "Pause" : "Play",
2177
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "size-4 @sm:size-6" })
2177
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-6" })
2178
2178
  }
2179
2179
  ),
2180
- /* @__PURE__ */ jsx(
2181
- "button",
2182
- {
2183
- type: "button",
2184
- onClick: () => seekRelative(10),
2185
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2186
- "aria-label": "Forward 10 seconds",
2187
- children: /* @__PURE__ */ jsx(FastForward, { className: "size-4 @sm:size-6" })
2188
- }
2189
- ),
2190
- /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-1 text-xs font-semibold text-white/75 @sm:flex @sm:gap-2 @sm:text-sm", children: [
2180
+ /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "forward", onClick: () => seekRelative(15) }),
2181
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs font-semibold text-white/75 @sm:text-sm", children: [
2191
2182
  /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
2192
2183
  /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
2193
- /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
2184
+ /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
2185
+ "-",
2186
+ formatTime(Math.max(0, duration - currentTime))
2187
+ ] })
2194
2188
  ] })
2195
2189
  ] }),
2196
2190
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
@@ -2199,9 +2193,9 @@ function Video({
2199
2193
  {
2200
2194
  type: "button",
2201
2195
  onClick: () => setIsMuted((value) => !value),
2202
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2196
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2203
2197
  "aria-label": isMuted ? "Unmute" : "Mute",
2204
- children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-6" })
2198
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
2205
2199
  }
2206
2200
  ),
2207
2201
  /* @__PURE__ */ jsx(
@@ -2227,12 +2221,12 @@ function Video({
2227
2221
  {
2228
2222
  type: "button",
2229
2223
  onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
2230
- className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2224
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2231
2225
  "aria-label": "Captions",
2232
2226
  children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
2233
2227
  }
2234
2228
  ),
2235
- /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
2229
+ /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
2236
2230
  "button",
2237
2231
  {
2238
2232
  type: "button",
@@ -2240,12 +2234,9 @@ function Video({
2240
2234
  setSettingsOpen((v) => !v);
2241
2235
  setSettingsTab("root");
2242
2236
  },
2243
- className: `flex h-6 items-center gap-1 rounded px-1.5 text-xs font-semibold transition hover:text-white/80 @sm:h-8 @sm:px-2 ${settingsOpen ? "text-white" : "text-white/60"}`,
2237
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
2244
2238
  "aria-label": "Settings",
2245
- children: [
2246
- /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
2247
- /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
2248
- ]
2239
+ children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
2249
2240
  }
2250
2241
  ) }),
2251
2242
  /* @__PURE__ */ jsx(
@@ -2253,9 +2244,9 @@ function Video({
2253
2244
  {
2254
2245
  type: "button",
2255
2246
  onClick: toggleFullscreen,
2256
- className: "grid size-6 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80 @sm:size-8",
2247
+ className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
2257
2248
  "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
2258
- children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-5 @sm:size-7" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-5 @sm:size-7" })
2249
+ children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
2259
2250
  }
2260
2251
  )
2261
2252
  ] })
@@ -2275,7 +2266,7 @@ function Video({
2275
2266
  activeCue && /* @__PURE__ */ jsx(
2276
2267
  "div",
2277
2268
  {
2278
- 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"}`,
2269
+ 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
2270
  children: /* @__PURE__ */ jsx(
2280
2271
  "div",
2281
2272
  {
@@ -2305,21 +2296,36 @@ function Video({
2305
2296
  );
2306
2297
  }
2307
2298
  var VideoPlayer = Video;
2308
- function SettingsItem({
2309
- children,
2310
- active,
2311
- onClick
2312
- }) {
2313
- return /* @__PURE__ */ jsxs(
2299
+ function SeekButton({ seconds, direction, onClick }) {
2300
+ return /* @__PURE__ */ jsx(
2314
2301
  "button",
2315
2302
  {
2316
2303
  type: "button",
2317
2304
  onClick,
2318
- className: `flex w-full items-center gap-2 px-4 py-2.5 text-left text-base font-medium transition hover:bg-white/10 ${active ? "text-white" : "text-white/55"}`,
2319
- children: [
2320
- /* @__PURE__ */ jsx("span", { className: `size-1.5 rounded-full ${active ? "bg-white" : "bg-transparent"}` }),
2321
- children
2322
- ]
2305
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2306
+ "aria-label": `${direction === "back" ? "Rewind" : "Forward"} ${seconds} seconds`,
2307
+ children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", fill: "none", className: "size-7 @sm:size-8", children: [
2308
+ /* @__PURE__ */ jsx(
2309
+ "path",
2310
+ {
2311
+ 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",
2312
+ stroke: "currentColor",
2313
+ strokeWidth: "2",
2314
+ strokeLinecap: "round"
2315
+ }
2316
+ ),
2317
+ /* @__PURE__ */ jsx(
2318
+ "path",
2319
+ {
2320
+ d: direction === "back" ? "M18 6l-4 4 4 4" : "M18 6l4 4-4 4",
2321
+ stroke: "currentColor",
2322
+ strokeWidth: "2",
2323
+ strokeLinecap: "round",
2324
+ strokeLinejoin: "round"
2325
+ }
2326
+ ),
2327
+ /* @__PURE__ */ jsx("text", { x: "18", y: "22", textAnchor: "middle", fill: "currentColor", fontSize: "9", fontWeight: "600", fontFamily: "system-ui", children: seconds })
2328
+ ] })
2323
2329
  }
2324
2330
  );
2325
2331
  }