@geekapps/silo-elements-nextjs 0.2.26 → 0.2.27

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 +146 -205
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +146 -205
  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, Settings, Captions, Volume2, Pause, VolumeX, Minimize, Maximize } from 'lucide-react';
7
7
 
8
8
  // src/ImageUploader.tsx
9
9
 
@@ -1944,164 +1944,108 @@ function Video({
1944
1944
  onClick: togglePlay,
1945
1945
  className: `absolute inset-0 z-30 flex flex-col justify-between transition-opacity duration-200 ${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
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
+ ] }),
1962
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
1963
+ "button",
1964
+ {
1965
+ 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",
1968
+ 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" }) }) }),
1970
+ /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
1971
+ quality.label,
1972
+ quality.id === "auto" ? " (ABR)" : ""
1973
+ ] })
1974
+ ]
1975
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
- ]
1976
+ quality.id
1977
+ )) })
1978
+ ] }),
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 }));
1996
1993
  },
1997
- item.id
1998
- ))
1999
- ]
2000
- },
2001
- "root"
2002
- ),
2003
- ["quality", "subtitles", "audio", "playback"].map((tab) => /* @__PURE__ */ jsxs(
2004
- "div",
2005
- {
2006
- style: {
2007
- display: settingsTab === tab ? "block" : "none",
2008
- animation: settingsTab === tab ? "settingsSlideIn 0.18s ease" : void 0
2009
- },
2010
- 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))
2098
- ] })
2099
- ]
2100
- },
2101
- tab
2102
- ))
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
+ ]
1999
+ },
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
+ ]
2018
+ },
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
+ ] })
2046
+ ] })
2103
2047
  ] }),
2104
- /* @__PURE__ */ jsx("style", { children: `@keyframes settingsSlideIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}` })
2048
+ /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
2105
2049
  ] }),
2106
2050
  /* @__PURE__ */ jsxs(
2107
2051
  "div",
@@ -2110,12 +2054,12 @@ function Video({
2110
2054
  onPointerMove: handleProgressPointerMove,
2111
2055
  onPointerLeave: handleProgressPointerLeave,
2112
2056
  onPointerDown: handleProgressPointerDown,
2113
- className: "relative mb-3 h-5 cursor-pointer @sm:mb-4 @lg:mb-6",
2057
+ className: "group relative mb-2 h-5 cursor-pointer",
2114
2058
  children: [
2115
2059
  preview && /* @__PURE__ */ jsxs(
2116
2060
  "div",
2117
2061
  {
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",
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",
2119
2063
  style: { left: preview.left },
2120
2064
  children: [
2121
2065
  /* @__PURE__ */ jsx(
@@ -2136,7 +2080,7 @@ function Video({
2136
2080
  ]
2137
2081
  }
2138
2082
  ),
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: [
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: [
2140
2084
  /* @__PURE__ */ jsx(
2141
2085
  "div",
2142
2086
  {
@@ -2155,42 +2099,27 @@ function Video({
2155
2099
  ]
2156
2100
  }
2157
2101
  ),
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
- ),
2102
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
2103
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 @sm:gap-2", children: [
2104
+ /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "back", onClick: () => seekRelative(-15) }),
2170
2105
  /* @__PURE__ */ jsx(
2171
2106
  "button",
2172
2107
  {
2173
2108
  type: "button",
2174
2109
  onClick: togglePlay,
2175
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2110
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2176
2111
  "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" })
2112
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-6" })
2178
2113
  }
2179
2114
  ),
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: [
2115
+ /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "forward", onClick: () => seekRelative(15) }),
2116
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs font-semibold text-white/75 @sm:text-sm", children: [
2191
2117
  /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
2192
2118
  /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
2193
- /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
2119
+ /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
2120
+ "-",
2121
+ formatTime(Math.max(0, duration - currentTime))
2122
+ ] })
2194
2123
  ] })
2195
2124
  ] }),
2196
2125
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
@@ -2199,9 +2128,9 @@ function Video({
2199
2128
  {
2200
2129
  type: "button",
2201
2130
  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",
2131
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2203
2132
  "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" })
2133
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
2205
2134
  }
2206
2135
  ),
2207
2136
  /* @__PURE__ */ jsx(
@@ -2227,12 +2156,12 @@ function Video({
2227
2156
  {
2228
2157
  type: "button",
2229
2158
  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"}`,
2159
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2231
2160
  "aria-label": "Captions",
2232
2161
  children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
2233
2162
  }
2234
2163
  ),
2235
- /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
2164
+ /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
2236
2165
  "button",
2237
2166
  {
2238
2167
  type: "button",
@@ -2240,12 +2169,9 @@ function Video({
2240
2169
  setSettingsOpen((v) => !v);
2241
2170
  setSettingsTab("root");
2242
2171
  },
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"}`,
2172
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
2244
2173
  "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
- ]
2174
+ children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
2249
2175
  }
2250
2176
  ) }),
2251
2177
  /* @__PURE__ */ jsx(
@@ -2253,9 +2179,9 @@ function Video({
2253
2179
  {
2254
2180
  type: "button",
2255
2181
  onClick: toggleFullscreen,
2256
- className: "grid size-6 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80 @sm:size-8",
2182
+ className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
2257
2183
  "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" })
2184
+ children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
2259
2185
  }
2260
2186
  )
2261
2187
  ] })
@@ -2275,7 +2201,7 @@ function Video({
2275
2201
  activeCue && /* @__PURE__ */ jsx(
2276
2202
  "div",
2277
2203
  {
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"}`,
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
2205
  children: /* @__PURE__ */ jsx(
2280
2206
  "div",
2281
2207
  {
@@ -2305,21 +2231,36 @@ function Video({
2305
2231
  );
2306
2232
  }
2307
2233
  var VideoPlayer = Video;
2308
- function SettingsItem({
2309
- children,
2310
- active,
2311
- onClick
2312
- }) {
2313
- return /* @__PURE__ */ jsxs(
2234
+ function SeekButton({ seconds, direction, onClick }) {
2235
+ return /* @__PURE__ */ jsx(
2314
2236
  "button",
2315
2237
  {
2316
2238
  type: "button",
2317
2239
  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
- ]
2240
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
2241
+ "aria-label": `${direction === "back" ? "Rewind" : "Forward"} ${seconds} seconds`,
2242
+ children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", fill: "none", className: "size-7 @sm:size-8", children: [
2243
+ /* @__PURE__ */ jsx(
2244
+ "path",
2245
+ {
2246
+ 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",
2247
+ stroke: "currentColor",
2248
+ strokeWidth: "2",
2249
+ strokeLinecap: "round"
2250
+ }
2251
+ ),
2252
+ /* @__PURE__ */ jsx(
2253
+ "path",
2254
+ {
2255
+ d: direction === "back" ? "M18 6l-4 4 4 4" : "M18 6l4 4-4 4",
2256
+ stroke: "currentColor",
2257
+ strokeWidth: "2",
2258
+ strokeLinecap: "round",
2259
+ strokeLinejoin: "round"
2260
+ }
2261
+ ),
2262
+ /* @__PURE__ */ jsx("text", { x: "18", y: "22", textAnchor: "middle", fill: "currentColor", fontSize: "9", fontWeight: "600", fontFamily: "system-ui", children: seconds })
2263
+ ] })
2323
2264
  }
2324
2265
  );
2325
2266
  }