@geekapps/silo-elements-nextjs 0.2.55 → 0.2.57

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 (8) hide show
  1. package/dist/VideoPlayer.d.ts +33 -1
  2. package/dist/VideoPlayer.js +908 -797
  3. package/dist/VideoPlayer.js.map +1 -1
  4. package/dist/index.js +907 -796
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
  8. package/styles.css +1 -1
package/dist/index.js CHANGED
@@ -1160,6 +1160,14 @@ function StoryboardFrame(_props) {
1160
1160
  return null;
1161
1161
  }
1162
1162
  StoryboardFrame.displayName = "SiloStoryboardFrame";
1163
+ function AgeRating(_props) {
1164
+ return null;
1165
+ }
1166
+ AgeRating.displayName = "SiloAgeRating";
1167
+ function Rating(_props) {
1168
+ return null;
1169
+ }
1170
+ Rating.displayName = "SiloRating";
1163
1171
  function Video({
1164
1172
  title,
1165
1173
  description,
@@ -1281,6 +1289,8 @@ function Video({
1281
1289
  const dragPointerIdRef = useRef(null);
1282
1290
  const [isPlaying, setIsPlaying] = useState(false);
1283
1291
  const [hasPlayed, setHasPlayed] = useState(false);
1292
+ const [ageRatingOverlay, setAgeRatingOverlay] = useState(false);
1293
+ const ageRatingTimerRef = useRef(null);
1284
1294
  const [clickIcon, setClickIcon] = useState(null);
1285
1295
  const clickIconTimerRef = useRef(null);
1286
1296
  const [isLoading, setIsLoading] = useState(true);
@@ -1388,7 +1398,14 @@ function Video({
1388
1398
  };
1389
1399
  const onPlay = () => {
1390
1400
  setIsPlaying(true);
1391
- setHasPlayed(true);
1401
+ setHasPlayed((prev) => {
1402
+ if (!prev && parsed.ageRating?.data) {
1403
+ setAgeRatingOverlay(true);
1404
+ if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
1405
+ ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 4e3);
1406
+ }
1407
+ return true;
1408
+ });
1392
1409
  showControlsTemporarily();
1393
1410
  };
1394
1411
  const onPause = () => {
@@ -1967,600 +1984,760 @@ function Video({
1967
1984
  "."
1968
1985
  ] });
1969
1986
  }
1970
- return /* @__PURE__ */ jsx(
1987
+ return /* @__PURE__ */ jsxs(
1971
1988
  "div",
1972
1989
  {
1973
1990
  ref: containerRef,
1974
1991
  className: `@container mx-auto w-full max-w-6xl${className ?? ""}`,
1975
- children: /* @__PURE__ */ jsxs(
1976
- "div",
1977
- {
1978
- ref: playerRef,
1979
- tabIndex: 0,
1980
- onKeyDown: handleKeyDown,
1981
- onMouseMove: showControlsTemporarily,
1982
- onMouseLeave: () => {
1983
- closeSettings();
1984
- if (isPlaying && autoHideControls) {
1985
- setControlsVisible(false);
1986
- }
1987
- },
1988
- onBlur: (e) => {
1989
- if (!e.currentTarget.contains(e.relatedTarget)) {
1992
+ children: [
1993
+ /* @__PURE__ */ jsx("style", { children: `@keyframes silo-fade-out{0%{opacity:1}70%{opacity:1}100%{opacity:0}}` }),
1994
+ /* @__PURE__ */ jsxs(
1995
+ "div",
1996
+ {
1997
+ ref: playerRef,
1998
+ tabIndex: 0,
1999
+ onKeyDown: handleKeyDown,
2000
+ onMouseMove: showControlsTemporarily,
2001
+ onMouseLeave: () => {
1990
2002
  closeSettings();
1991
- }
1992
- },
1993
- onTouchStart: showControlsTemporarily,
1994
- onTouchMove: showControlsTemporarily,
1995
- className: "relative w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
1996
- style: fixedHeight ? {
1997
- height: typeof fixedHeight === "number" ? `${fixedHeight}px` : fixedHeight
1998
- } : maxHeight ? {
1999
- maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
2000
- aspectRatio: "16/9"
2001
- } : { aspectRatio: "16/9" },
2002
- children: [
2003
- /* @__PURE__ */ jsxs(
2004
- "video",
2005
- {
2006
- ref: videoRef,
2007
- className: `h-full w-full ${isFullscreen ? "object-contain" : "object-cover"}`,
2008
- playsInline: true,
2009
- preload: "metadata",
2010
- crossOrigin: "anonymous",
2011
- children: [
2012
- captions.map((subtitle) => /* @__PURE__ */ jsx(
2013
- "track",
2014
- {
2015
- kind: "subtitles",
2016
- src: subtitle.src,
2017
- srcLang: subtitle.srclang,
2018
- label: subtitle.label,
2019
- default: subtitle.default
2020
- },
2021
- `${activeSource.src}-${subtitle.srclang}-${subtitle.src}`
2022
- )),
2023
- parsed.storyboard?.src && /* @__PURE__ */ jsx(
2024
- "track",
2025
- {
2026
- kind: "metadata",
2027
- label: "thumbnails",
2028
- src: parsed.storyboard.src
2029
- }
2030
- )
2031
- ]
2003
+ if (isPlaying && autoHideControls) {
2004
+ setControlsVisible(false);
2032
2005
  }
2033
- ),
2034
- poster && !hasPlayed && /* @__PURE__ */ jsx(
2035
- "img",
2036
- {
2037
- src: poster,
2038
- "aria-hidden": true,
2039
- className: "pointer-events-none absolute inset-0 h-full w-full object-contain bg-black"
2006
+ },
2007
+ onBlur: (e) => {
2008
+ if (!e.currentTarget.contains(e.relatedTarget)) {
2009
+ closeSettings();
2040
2010
  }
2041
- ),
2042
- /* @__PURE__ */ jsx(
2043
- "div",
2044
- {
2045
- className: "pointer-events-none absolute inset-0 z-10 grid place-items-center",
2046
- style: {
2047
- opacity: clickIcon ? 1 : 0,
2048
- transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out"
2049
- },
2050
- 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-7 @sm:size-9 @lg:size-11", fill: "white" }) : /* @__PURE__ */ jsx(
2051
- Play,
2011
+ },
2012
+ onTouchStart: showControlsTemporarily,
2013
+ onTouchMove: showControlsTemporarily,
2014
+ className: "relative w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
2015
+ style: fixedHeight ? {
2016
+ height: typeof fixedHeight === "number" ? `${fixedHeight}px` : fixedHeight
2017
+ } : maxHeight ? {
2018
+ maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
2019
+ aspectRatio: "16/9"
2020
+ } : { aspectRatio: "16/9" },
2021
+ children: [
2022
+ /* @__PURE__ */ jsxs(
2023
+ "video",
2024
+ {
2025
+ ref: videoRef,
2026
+ className: `h-full w-full ${isFullscreen ? "object-contain" : "object-cover"}`,
2027
+ playsInline: true,
2028
+ preload: "metadata",
2029
+ crossOrigin: "anonymous",
2030
+ children: [
2031
+ captions.map((subtitle) => /* @__PURE__ */ jsx(
2032
+ "track",
2033
+ {
2034
+ kind: "subtitles",
2035
+ src: subtitle.src,
2036
+ srcLang: subtitle.srclang,
2037
+ label: subtitle.label,
2038
+ default: subtitle.default
2039
+ },
2040
+ `${activeSource.src}-${subtitle.srclang}-${subtitle.src}`
2041
+ )),
2042
+ parsed.storyboard?.src && /* @__PURE__ */ jsx(
2043
+ "track",
2044
+ {
2045
+ kind: "metadata",
2046
+ label: "thumbnails",
2047
+ src: parsed.storyboard.src
2048
+ }
2049
+ )
2050
+ ]
2051
+ }
2052
+ ),
2053
+ poster && !hasPlayed && /* @__PURE__ */ jsx(
2054
+ "img",
2055
+ {
2056
+ src: poster,
2057
+ "aria-hidden": true,
2058
+ className: "pointer-events-none absolute inset-0 h-full w-full object-contain bg-black"
2059
+ }
2060
+ ),
2061
+ ageRatingOverlay && parsed.ageRating?.data && (() => {
2062
+ const ar = parsed.ageRating;
2063
+ const regionKey = resolveAgeRatingRegion(ar.locale, ar.data);
2064
+ if (!regionKey) return null;
2065
+ const code = ar.data[regionKey];
2066
+ const lookupKey = `${regionKey}:${code}`;
2067
+ const info = ar.lookup?.[lookupKey];
2068
+ return /* @__PURE__ */ jsx(
2069
+ "div",
2052
2070
  {
2053
- className: "ml-0.5 size-7 @sm:size-9 @lg:size-11",
2054
- fill: "white"
2071
+ className: "pointer-events-none absolute inset-0 z-40 flex items-start justify-start p-4",
2072
+ style: { animation: "silo-fade-out 4s forwards" },
2073
+ children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg px-3 py-2", style: { background: "rgba(0,0,0,0.72)", backdropFilter: "blur(8px)" }, children: [
2074
+ info?.imageUrl ? /* @__PURE__ */ jsx("img", { src: info.imageUrl, alt: code, className: "h-10 w-auto object-contain" }) : /* @__PURE__ */ jsx("span", { className: "flex h-10 min-w-10 items-center justify-center rounded border border-white/30 px-1.5 text-sm font-bold text-white", children: code }),
2075
+ (info?.title || info?.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
2076
+ info.title && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: info.title }),
2077
+ info.description && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/60 leading-tight max-w-48", children: info.description })
2078
+ ] })
2079
+ ] })
2055
2080
  }
2056
- ) })
2057
- }
2058
- ),
2059
- 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" }) }),
2060
- /* @__PURE__ */ jsxs(
2061
- "div",
2062
- {
2063
- ref: chromeRef,
2064
- onClick: togglePlay,
2065
- 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"}`,
2066
- children: [
2067
- 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" }),
2068
- /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
2069
- isFullscreen && /* @__PURE__ */ jsx(
2070
- "header",
2081
+ );
2082
+ })(),
2083
+ /* @__PURE__ */ jsx(
2084
+ "div",
2085
+ {
2086
+ className: "pointer-events-none absolute inset-0 z-10 grid place-items-center",
2087
+ style: {
2088
+ opacity: clickIcon ? 1 : 0,
2089
+ transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out"
2090
+ },
2091
+ 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-7 @sm:size-9 @lg:size-11", fill: "white" }) : /* @__PURE__ */ jsx(
2092
+ Play,
2071
2093
  {
2072
- onClick: (e) => e.stopPropagation(),
2073
- 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",
2074
- children: /* @__PURE__ */ jsxs("div", { children: [
2075
- title && /* @__PURE__ */ jsx(
2076
- "h1",
2077
- {
2078
- className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl",
2079
- style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" },
2080
- children: title
2081
- }
2082
- ),
2083
- description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
2084
- ] })
2094
+ className: "ml-0.5 size-7 @sm:size-9 @lg:size-11",
2095
+ fill: "white"
2085
2096
  }
2086
- ),
2087
- /* @__PURE__ */ jsxs(
2088
- "footer",
2089
- {
2090
- onClick: (e) => e.stopPropagation(),
2091
- className: "relative z-10 px-4 pb-4 text-white",
2092
- children: [
2093
- settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
2094
- /* @__PURE__ */ jsx(
2095
- "div",
2097
+ ) })
2098
+ }
2099
+ ),
2100
+ 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" }) }),
2101
+ /* @__PURE__ */ jsxs(
2102
+ "div",
2103
+ {
2104
+ ref: chromeRef,
2105
+ onClick: togglePlay,
2106
+ 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"}`,
2107
+ children: [
2108
+ 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" }),
2109
+ /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
2110
+ isFullscreen && /* @__PURE__ */ jsx(
2111
+ "header",
2112
+ {
2113
+ onClick: (e) => e.stopPropagation(),
2114
+ 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",
2115
+ children: /* @__PURE__ */ jsxs("div", { children: [
2116
+ title && /* @__PURE__ */ jsx(
2117
+ "h1",
2096
2118
  {
2097
- className: "fixed inset-0 z-70",
2098
- onClick: closeSettings
2119
+ className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl",
2120
+ style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" },
2121
+ children: title
2099
2122
  }
2100
2123
  ),
2101
- /* @__PURE__ */ jsxs(
2102
- "div",
2103
- {
2104
- 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",
2105
- style: {
2106
- width: Math.min(
2107
- 224,
2108
- Math.max(180, (playerWidth || 640) * 0.22)
2109
- ) + "px",
2110
- opacity: settingsVisible ? 1 : 0,
2111
- transform: settingsVisible ? "translateY(0) scale(1)" : "translateY(8px) scale(0.97)",
2112
- transition: "opacity 0.18s ease, transform 0.18s ease"
2113
- },
2114
- children: [
2115
- settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
2116
- {
2117
- id: "quality",
2118
- label: "Qualidade",
2119
- value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto"
2120
- },
2121
- ...captions.length > 0 ? [
2122
- {
2123
- id: "subtitles",
2124
- label: "Legendas",
2125
- value: subtitleStyle.track === "off" ? "Desligado" : captions.find(
2126
- (s) => s.srclang === subtitleStyle.track
2127
- )?.label ?? subtitleStyle.track
2128
- }
2129
- ] : [],
2130
- ...audioTracks.length > 1 ? [
2131
- {
2132
- id: "audio",
2133
- label: "\xC1udio",
2134
- value: audioTracks.find(
2135
- (t) => t.id === selectedAudio
2136
- )?.label ?? ""
2137
- }
2138
- ] : [],
2139
- {
2140
- id: "playback",
2141
- label: "Velocidade",
2142
- value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7`
2143
- }
2144
- ].map((item) => /* @__PURE__ */ jsxs(
2145
- "button",
2146
- {
2147
- type: "button",
2148
- onClick: () => setSettingsTab(item.id),
2149
- 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",
2150
- children: [
2151
- /* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
2152
- /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
2153
- item.value,
2154
- /* @__PURE__ */ jsx(
2155
- "svg",
2156
- {
2157
- className: "size-3 opacity-50",
2158
- viewBox: "0 0 12 12",
2159
- fill: "none",
2160
- children: /* @__PURE__ */ jsx(
2161
- "path",
2162
- {
2163
- d: "M4.5 3l3 3-3 3",
2164
- stroke: "currentColor",
2165
- strokeWidth: "1.5",
2166
- strokeLinecap: "round",
2167
- strokeLinejoin: "round"
2168
- }
2169
- )
2170
- }
2171
- )
2172
- ] })
2173
- ]
2174
- },
2175
- item.id
2176
- )) }),
2177
- settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
2178
- /* @__PURE__ */ jsxs(
2179
- "button",
2180
- {
2181
- type: "button",
2182
- onClick: () => setSettingsTab("root"),
2183
- 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",
2184
- children: [
2185
- /* @__PURE__ */ jsx(
2186
- "svg",
2187
- {
2188
- className: "size-3.5",
2189
- viewBox: "0 0 12 12",
2190
- fill: "none",
2191
- children: /* @__PURE__ */ jsx(
2192
- "path",
2193
- {
2194
- d: "M7.5 3L4.5 6l3 3",
2195
- stroke: "currentColor",
2196
- strokeWidth: "1.5",
2197
- strokeLinecap: "round",
2198
- strokeLinejoin: "round"
2199
- }
2200
- )
2201
- }
2202
- ),
2203
- "Qualidade"
2204
- ]
2205
- }
2206
- ),
2207
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
2208
- "button",
2124
+ description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
2125
+ ] })
2126
+ }
2127
+ ),
2128
+ /* @__PURE__ */ jsxs(
2129
+ "footer",
2130
+ {
2131
+ onClick: (e) => e.stopPropagation(),
2132
+ className: "relative z-10 px-4 pb-4 text-white",
2133
+ children: [
2134
+ settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
2135
+ /* @__PURE__ */ jsx(
2136
+ "div",
2137
+ {
2138
+ className: "fixed inset-0 z-70",
2139
+ onClick: closeSettings
2140
+ }
2141
+ ),
2142
+ /* @__PURE__ */ jsxs(
2143
+ "div",
2144
+ {
2145
+ 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",
2146
+ style: {
2147
+ width: Math.min(
2148
+ 224,
2149
+ Math.max(180, (playerWidth || 640) * 0.22)
2150
+ ) + "px",
2151
+ opacity: settingsVisible ? 1 : 0,
2152
+ transform: settingsVisible ? "translateY(0) scale(1)" : "translateY(8px) scale(0.97)",
2153
+ transition: "opacity 0.18s ease, transform 0.18s ease"
2154
+ },
2155
+ children: [
2156
+ settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
2209
2157
  {
2210
- type: "button",
2211
- onClick: () => {
2212
- changeQuality(quality.id);
2213
- setSettingsTab("root");
2214
- },
2215
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2216
- children: [
2217
- /* @__PURE__ */ jsx(
2218
- "svg",
2219
- {
2220
- className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
2221
- viewBox: "0 0 16 16",
2222
- fill: "none",
2223
- children: /* @__PURE__ */ jsx(
2224
- "path",
2225
- {
2226
- d: "M3 8l3.5 3.5L13 4.5",
2227
- stroke: "currentColor",
2228
- strokeWidth: "1.8",
2229
- strokeLinecap: "round",
2230
- strokeLinejoin: "round"
2231
- }
2232
- )
2233
- }
2234
- ),
2235
- /* @__PURE__ */ jsxs(
2236
- "span",
2237
- {
2238
- className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
2239
- children: [
2240
- quality.label,
2241
- quality.id === "auto" ? " (ABR)" : ""
2242
- ]
2243
- }
2244
- )
2245
- ]
2158
+ id: "quality",
2159
+ label: "Qualidade",
2160
+ value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto"
2246
2161
  },
2247
- quality.id
2248
- )) })
2249
- ] }),
2250
- settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
2251
- /* @__PURE__ */ jsxs(
2252
- "button",
2162
+ ...captions.length > 0 ? [
2163
+ {
2164
+ id: "subtitles",
2165
+ label: "Legendas",
2166
+ value: subtitleStyle.track === "off" ? "Desligado" : captions.find(
2167
+ (s) => s.srclang === subtitleStyle.track
2168
+ )?.label ?? subtitleStyle.track
2169
+ }
2170
+ ] : [],
2171
+ ...audioTracks.length > 1 ? [
2172
+ {
2173
+ id: "audio",
2174
+ label: "\xC1udio",
2175
+ value: audioTracks.find(
2176
+ (t) => t.id === selectedAudio
2177
+ )?.label ?? ""
2178
+ }
2179
+ ] : [],
2253
2180
  {
2254
- type: "button",
2255
- onClick: () => setSettingsTab("root"),
2256
- 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",
2257
- children: [
2258
- /* @__PURE__ */ jsx(
2259
- "svg",
2260
- {
2261
- className: "size-3.5",
2262
- viewBox: "0 0 12 12",
2263
- fill: "none",
2264
- children: /* @__PURE__ */ jsx(
2265
- "path",
2266
- {
2267
- d: "M7.5 3L4.5 6l3 3",
2268
- stroke: "currentColor",
2269
- strokeWidth: "1.5",
2270
- strokeLinecap: "round",
2271
- strokeLinejoin: "round"
2272
- }
2273
- )
2274
- }
2275
- ),
2276
- "Legendas"
2277
- ]
2181
+ id: "playback",
2182
+ label: "Velocidade",
2183
+ value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7`
2278
2184
  }
2279
- ),
2280
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [
2281
- { srclang: "off", label: "Desligado" },
2282
- ...captions
2283
- ].map((s) => /* @__PURE__ */ jsxs(
2185
+ ].map((item) => /* @__PURE__ */ jsxs(
2284
2186
  "button",
2285
2187
  {
2286
2188
  type: "button",
2287
- onClick: () => {
2288
- const next = s.srclang === "off" ? "off" : s.srclang;
2289
- setSubtitleMode(next);
2290
- setSubtitleStyle((st) => ({
2291
- ...st,
2292
- track: next
2293
- }));
2294
- },
2295
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2189
+ onClick: () => setSettingsTab(item.id),
2190
+ 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",
2296
2191
  children: [
2297
- /* @__PURE__ */ jsx(
2298
- "svg",
2299
- {
2300
- className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`,
2301
- viewBox: "0 0 16 16",
2302
- fill: "none",
2303
- children: /* @__PURE__ */ jsx(
2304
- "path",
2305
- {
2306
- d: "M3 8l3.5 3.5L13 4.5",
2307
- stroke: "currentColor",
2308
- strokeWidth: "1.8",
2309
- strokeLinecap: "round",
2310
- strokeLinejoin: "round"
2311
- }
2312
- )
2313
- }
2314
- ),
2315
- /* @__PURE__ */ jsx(
2316
- "span",
2317
- {
2318
- className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55",
2319
- children: s.label
2320
- }
2321
- )
2192
+ /* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
2193
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
2194
+ item.value,
2195
+ /* @__PURE__ */ jsx(
2196
+ "svg",
2197
+ {
2198
+ className: "size-3 opacity-50",
2199
+ viewBox: "0 0 12 12",
2200
+ fill: "none",
2201
+ children: /* @__PURE__ */ jsx(
2202
+ "path",
2203
+ {
2204
+ d: "M4.5 3l3 3-3 3",
2205
+ stroke: "currentColor",
2206
+ strokeWidth: "1.5",
2207
+ strokeLinecap: "round",
2208
+ strokeLinejoin: "round"
2209
+ }
2210
+ )
2211
+ }
2212
+ )
2213
+ ] })
2322
2214
  ]
2323
2215
  },
2324
- s.srclang
2216
+ item.id
2325
2217
  )) }),
2326
- subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
2327
- "button",
2328
- {
2329
- type: "button",
2330
- onClick: () => setSettingsTab("subtitles-style"),
2331
- 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",
2332
- children: [
2333
- /* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
2334
- /* @__PURE__ */ jsx(
2335
- "svg",
2336
- {
2337
- className: "size-3 opacity-50",
2338
- viewBox: "0 0 12 12",
2339
- fill: "none",
2340
- children: /* @__PURE__ */ jsx(
2341
- "path",
2342
- {
2343
- d: "M4.5 3l3 3-3 3",
2344
- stroke: "currentColor",
2345
- strokeWidth: "1.5",
2346
- strokeLinecap: "round",
2347
- strokeLinejoin: "round"
2348
- }
2349
- )
2350
- }
2351
- )
2352
- ]
2353
- }
2354
- )
2355
- ] }),
2356
- settingsTab === "subtitles-style" && /* @__PURE__ */ jsxs("div", { children: [
2357
- /* @__PURE__ */ jsxs(
2358
- "button",
2359
- {
2360
- type: "button",
2361
- onClick: () => setSettingsTab("subtitles"),
2362
- 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",
2363
- children: [
2364
- /* @__PURE__ */ jsx(
2365
- "svg",
2366
- {
2367
- className: "size-3.5",
2368
- viewBox: "0 0 12 12",
2369
- fill: "none",
2370
- children: /* @__PURE__ */ jsx(
2371
- "path",
2372
- {
2373
- d: "M7.5 3L4.5 6l3 3",
2374
- stroke: "currentColor",
2375
- strokeWidth: "1.5",
2376
- strokeLinecap: "round",
2377
- strokeLinejoin: "round"
2378
- }
2379
- )
2380
- }
2381
- ),
2382
- "Apar\xEAncia"
2383
- ]
2384
- }
2385
- ),
2386
- /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
2387
- /* @__PURE__ */ jsxs("div", { children: [
2388
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
2389
- /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
2390
- "button",
2391
- {
2392
- type: "button",
2393
- onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
2394
- 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"}`,
2395
- children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
2218
+ settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
2219
+ /* @__PURE__ */ jsxs(
2220
+ "button",
2221
+ {
2222
+ type: "button",
2223
+ onClick: () => setSettingsTab("root"),
2224
+ 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",
2225
+ children: [
2226
+ /* @__PURE__ */ jsx(
2227
+ "svg",
2228
+ {
2229
+ className: "size-3.5",
2230
+ viewBox: "0 0 12 12",
2231
+ fill: "none",
2232
+ children: /* @__PURE__ */ jsx(
2233
+ "path",
2234
+ {
2235
+ d: "M7.5 3L4.5 6l3 3",
2236
+ stroke: "currentColor",
2237
+ strokeWidth: "1.5",
2238
+ strokeLinecap: "round",
2239
+ strokeLinejoin: "round"
2240
+ }
2241
+ )
2242
+ }
2243
+ ),
2244
+ "Qualidade"
2245
+ ]
2246
+ }
2247
+ ),
2248
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
2249
+ "button",
2250
+ {
2251
+ type: "button",
2252
+ onClick: () => {
2253
+ changeQuality(quality.id);
2254
+ setSettingsTab("root");
2396
2255
  },
2397
- s
2398
- )) })
2399
- ] }),
2400
- /* @__PURE__ */ jsxs("div", { children: [
2401
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Cor" }),
2402
- /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [
2403
- ["white", "Branco", "#fff"],
2404
- ["yellow", "Amarelo", "#facc15"],
2405
- ["cyan", "Ciano", "#22d3ee"]
2406
- ].map(([val, label, color]) => /* @__PURE__ */ jsx(
2407
- "button",
2408
- {
2409
- type: "button",
2410
- onClick: () => setSubtitleStyle((st) => ({
2256
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2257
+ children: [
2258
+ /* @__PURE__ */ jsx(
2259
+ "svg",
2260
+ {
2261
+ className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
2262
+ viewBox: "0 0 16 16",
2263
+ fill: "none",
2264
+ children: /* @__PURE__ */ jsx(
2265
+ "path",
2266
+ {
2267
+ d: "M3 8l3.5 3.5L13 4.5",
2268
+ stroke: "currentColor",
2269
+ strokeWidth: "1.8",
2270
+ strokeLinecap: "round",
2271
+ strokeLinejoin: "round"
2272
+ }
2273
+ )
2274
+ }
2275
+ ),
2276
+ /* @__PURE__ */ jsxs(
2277
+ "span",
2278
+ {
2279
+ className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
2280
+ children: [
2281
+ quality.label,
2282
+ quality.id === "auto" ? " (ABR)" : ""
2283
+ ]
2284
+ }
2285
+ )
2286
+ ]
2287
+ },
2288
+ quality.id
2289
+ )) })
2290
+ ] }),
2291
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
2292
+ /* @__PURE__ */ jsxs(
2293
+ "button",
2294
+ {
2295
+ type: "button",
2296
+ onClick: () => setSettingsTab("root"),
2297
+ 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",
2298
+ children: [
2299
+ /* @__PURE__ */ jsx(
2300
+ "svg",
2301
+ {
2302
+ className: "size-3.5",
2303
+ viewBox: "0 0 12 12",
2304
+ fill: "none",
2305
+ children: /* @__PURE__ */ jsx(
2306
+ "path",
2307
+ {
2308
+ d: "M7.5 3L4.5 6l3 3",
2309
+ stroke: "currentColor",
2310
+ strokeWidth: "1.5",
2311
+ strokeLinecap: "round",
2312
+ strokeLinejoin: "round"
2313
+ }
2314
+ )
2315
+ }
2316
+ ),
2317
+ "Legendas"
2318
+ ]
2319
+ }
2320
+ ),
2321
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [
2322
+ { srclang: "off", label: "Desligado" },
2323
+ ...captions
2324
+ ].map((s) => /* @__PURE__ */ jsxs(
2325
+ "button",
2326
+ {
2327
+ type: "button",
2328
+ onClick: () => {
2329
+ const next = s.srclang === "off" ? "off" : s.srclang;
2330
+ setSubtitleMode(next);
2331
+ setSubtitleStyle((st) => ({
2411
2332
  ...st,
2412
- color: val
2413
- })),
2414
- 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"}`,
2415
- style: { color },
2416
- children: label
2333
+ track: next
2334
+ }));
2417
2335
  },
2418
- val
2419
- )) })
2420
- ] }),
2421
- /* @__PURE__ */ jsxs("div", { children: [
2422
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Fundo" }),
2423
- /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [
2424
- ["none", "Nenhum"],
2425
- ["semi", "Semi"],
2426
- ["solid", "S\xF3lido"]
2427
- ].map(([val, label]) => /* @__PURE__ */ jsx(
2428
- "button",
2429
- {
2430
- type: "button",
2431
- onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
2432
- 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"}`,
2433
- children: label
2434
- },
2435
- val
2436
- )) })
2437
- ] })
2438
- ] })
2439
- ] }),
2440
- settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
2441
- /* @__PURE__ */ jsxs(
2442
- "button",
2443
- {
2444
- type: "button",
2445
- onClick: () => setSettingsTab("root"),
2446
- 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",
2447
- children: [
2448
- /* @__PURE__ */ jsx(
2449
- "svg",
2450
- {
2451
- className: "size-3.5",
2452
- viewBox: "0 0 12 12",
2453
- fill: "none",
2454
- children: /* @__PURE__ */ jsx(
2455
- "path",
2456
- {
2457
- d: "M7.5 3L4.5 6l3 3",
2458
- stroke: "currentColor",
2459
- strokeWidth: "1.5",
2460
- strokeLinecap: "round",
2461
- strokeLinejoin: "round"
2462
- }
2463
- )
2464
- }
2465
- ),
2466
- "\xC1udio"
2467
- ]
2468
- }
2469
- ),
2470
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2471
- "button",
2472
- {
2473
- type: "button",
2474
- onClick: () => {
2475
- changeAudio(track.id);
2476
- setSettingsTab("root");
2336
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2337
+ children: [
2338
+ /* @__PURE__ */ jsx(
2339
+ "svg",
2340
+ {
2341
+ className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`,
2342
+ viewBox: "0 0 16 16",
2343
+ fill: "none",
2344
+ children: /* @__PURE__ */ jsx(
2345
+ "path",
2346
+ {
2347
+ d: "M3 8l3.5 3.5L13 4.5",
2348
+ stroke: "currentColor",
2349
+ strokeWidth: "1.8",
2350
+ strokeLinecap: "round",
2351
+ strokeLinejoin: "round"
2352
+ }
2353
+ )
2354
+ }
2355
+ ),
2356
+ /* @__PURE__ */ jsx(
2357
+ "span",
2358
+ {
2359
+ className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55",
2360
+ children: s.label
2361
+ }
2362
+ )
2363
+ ]
2477
2364
  },
2478
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2479
- children: [
2480
- /* @__PURE__ */ jsx(
2481
- "svg",
2365
+ s.srclang
2366
+ )) }),
2367
+ subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
2368
+ "button",
2369
+ {
2370
+ type: "button",
2371
+ onClick: () => setSettingsTab("subtitles-style"),
2372
+ 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",
2373
+ children: [
2374
+ /* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
2375
+ /* @__PURE__ */ jsx(
2376
+ "svg",
2377
+ {
2378
+ className: "size-3 opacity-50",
2379
+ viewBox: "0 0 12 12",
2380
+ fill: "none",
2381
+ children: /* @__PURE__ */ jsx(
2382
+ "path",
2383
+ {
2384
+ d: "M4.5 3l3 3-3 3",
2385
+ stroke: "currentColor",
2386
+ strokeWidth: "1.5",
2387
+ strokeLinecap: "round",
2388
+ strokeLinejoin: "round"
2389
+ }
2390
+ )
2391
+ }
2392
+ )
2393
+ ]
2394
+ }
2395
+ )
2396
+ ] }),
2397
+ settingsTab === "subtitles-style" && /* @__PURE__ */ jsxs("div", { children: [
2398
+ /* @__PURE__ */ jsxs(
2399
+ "button",
2400
+ {
2401
+ type: "button",
2402
+ onClick: () => setSettingsTab("subtitles"),
2403
+ 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",
2404
+ children: [
2405
+ /* @__PURE__ */ jsx(
2406
+ "svg",
2407
+ {
2408
+ className: "size-3.5",
2409
+ viewBox: "0 0 12 12",
2410
+ fill: "none",
2411
+ children: /* @__PURE__ */ jsx(
2412
+ "path",
2413
+ {
2414
+ d: "M7.5 3L4.5 6l3 3",
2415
+ stroke: "currentColor",
2416
+ strokeWidth: "1.5",
2417
+ strokeLinecap: "round",
2418
+ strokeLinejoin: "round"
2419
+ }
2420
+ )
2421
+ }
2422
+ ),
2423
+ "Apar\xEAncia"
2424
+ ]
2425
+ }
2426
+ ),
2427
+ /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
2428
+ /* @__PURE__ */ jsxs("div", { children: [
2429
+ /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
2430
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
2431
+ "button",
2482
2432
  {
2483
- className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
2484
- viewBox: "0 0 16 16",
2485
- fill: "none",
2486
- children: /* @__PURE__ */ jsx(
2487
- "path",
2488
- {
2489
- d: "M3 8l3.5 3.5L13 4.5",
2490
- stroke: "currentColor",
2491
- strokeWidth: "1.8",
2492
- strokeLinecap: "round",
2493
- strokeLinejoin: "round"
2494
- }
2495
- )
2496
- }
2497
- ),
2498
- /* @__PURE__ */ jsx(
2499
- "span",
2433
+ type: "button",
2434
+ onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
2435
+ 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"}`,
2436
+ children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
2437
+ },
2438
+ s
2439
+ )) })
2440
+ ] }),
2441
+ /* @__PURE__ */ jsxs("div", { children: [
2442
+ /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Cor" }),
2443
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [
2444
+ ["white", "Branco", "#fff"],
2445
+ ["yellow", "Amarelo", "#facc15"],
2446
+ ["cyan", "Ciano", "#22d3ee"]
2447
+ ].map(([val, label, color]) => /* @__PURE__ */ jsx(
2448
+ "button",
2500
2449
  {
2501
- className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
2502
- children: track.label
2503
- }
2504
- )
2505
- ]
2506
- },
2507
- track.id
2508
- )) })
2509
- ] }),
2510
- settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
2511
- /* @__PURE__ */ jsxs(
2512
- "button",
2513
- {
2514
- type: "button",
2515
- onClick: () => setSettingsTab("root"),
2516
- 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",
2517
- children: [
2518
- /* @__PURE__ */ jsx(
2519
- "svg",
2450
+ type: "button",
2451
+ onClick: () => setSubtitleStyle((st) => ({
2452
+ ...st,
2453
+ color: val
2454
+ })),
2455
+ 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"}`,
2456
+ style: { color },
2457
+ children: label
2458
+ },
2459
+ val
2460
+ )) })
2461
+ ] }),
2462
+ /* @__PURE__ */ jsxs("div", { children: [
2463
+ /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Fundo" }),
2464
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [
2465
+ ["none", "Nenhum"],
2466
+ ["semi", "Semi"],
2467
+ ["solid", "S\xF3lido"]
2468
+ ].map(([val, label]) => /* @__PURE__ */ jsx(
2469
+ "button",
2520
2470
  {
2521
- className: "size-3.5",
2522
- viewBox: "0 0 12 12",
2523
- fill: "none",
2524
- children: /* @__PURE__ */ jsx(
2525
- "path",
2526
- {
2527
- d: "M7.5 3L4.5 6l3 3",
2528
- stroke: "currentColor",
2529
- strokeWidth: "1.5",
2530
- strokeLinecap: "round",
2531
- strokeLinejoin: "round"
2532
- }
2533
- )
2534
- }
2535
- ),
2536
- "Velocidade"
2537
- ]
2471
+ type: "button",
2472
+ onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
2473
+ 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"}`,
2474
+ children: label
2475
+ },
2476
+ val
2477
+ )) })
2478
+ ] })
2479
+ ] })
2480
+ ] }),
2481
+ settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
2482
+ /* @__PURE__ */ jsxs(
2483
+ "button",
2484
+ {
2485
+ type: "button",
2486
+ onClick: () => setSettingsTab("root"),
2487
+ 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",
2488
+ children: [
2489
+ /* @__PURE__ */ jsx(
2490
+ "svg",
2491
+ {
2492
+ className: "size-3.5",
2493
+ viewBox: "0 0 12 12",
2494
+ fill: "none",
2495
+ children: /* @__PURE__ */ jsx(
2496
+ "path",
2497
+ {
2498
+ d: "M7.5 3L4.5 6l3 3",
2499
+ stroke: "currentColor",
2500
+ strokeWidth: "1.5",
2501
+ strokeLinecap: "round",
2502
+ strokeLinejoin: "round"
2503
+ }
2504
+ )
2505
+ }
2506
+ ),
2507
+ "\xC1udio"
2508
+ ]
2509
+ }
2510
+ ),
2511
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2512
+ "button",
2513
+ {
2514
+ type: "button",
2515
+ onClick: () => {
2516
+ changeAudio(track.id);
2517
+ setSettingsTab("root");
2518
+ },
2519
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2520
+ children: [
2521
+ /* @__PURE__ */ jsx(
2522
+ "svg",
2523
+ {
2524
+ className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
2525
+ viewBox: "0 0 16 16",
2526
+ fill: "none",
2527
+ children: /* @__PURE__ */ jsx(
2528
+ "path",
2529
+ {
2530
+ d: "M3 8l3.5 3.5L13 4.5",
2531
+ stroke: "currentColor",
2532
+ strokeWidth: "1.8",
2533
+ strokeLinecap: "round",
2534
+ strokeLinejoin: "round"
2535
+ }
2536
+ )
2537
+ }
2538
+ ),
2539
+ /* @__PURE__ */ jsx(
2540
+ "span",
2541
+ {
2542
+ className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
2543
+ children: track.label
2544
+ }
2545
+ )
2546
+ ]
2547
+ },
2548
+ track.id
2549
+ )) })
2550
+ ] }),
2551
+ settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
2552
+ /* @__PURE__ */ jsxs(
2553
+ "button",
2554
+ {
2555
+ type: "button",
2556
+ onClick: () => setSettingsTab("root"),
2557
+ 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",
2558
+ children: [
2559
+ /* @__PURE__ */ jsx(
2560
+ "svg",
2561
+ {
2562
+ className: "size-3.5",
2563
+ viewBox: "0 0 12 12",
2564
+ fill: "none",
2565
+ children: /* @__PURE__ */ jsx(
2566
+ "path",
2567
+ {
2568
+ d: "M7.5 3L4.5 6l3 3",
2569
+ stroke: "currentColor",
2570
+ strokeWidth: "1.5",
2571
+ strokeLinecap: "round",
2572
+ strokeLinejoin: "round"
2573
+ }
2574
+ )
2575
+ }
2576
+ ),
2577
+ "Velocidade"
2578
+ ]
2579
+ }
2580
+ ),
2581
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
2582
+ "button",
2583
+ {
2584
+ type: "button",
2585
+ onClick: () => {
2586
+ setPlaybackRate(speed);
2587
+ closeSettings();
2588
+ },
2589
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2590
+ children: [
2591
+ /* @__PURE__ */ jsx(
2592
+ "svg",
2593
+ {
2594
+ className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`,
2595
+ viewBox: "0 0 16 16",
2596
+ fill: "none",
2597
+ children: /* @__PURE__ */ jsx(
2598
+ "path",
2599
+ {
2600
+ d: "M3 8l3.5 3.5L13 4.5",
2601
+ stroke: "currentColor",
2602
+ strokeWidth: "1.8",
2603
+ strokeLinecap: "round",
2604
+ strokeLinejoin: "round"
2605
+ }
2606
+ )
2607
+ }
2608
+ ),
2609
+ /* @__PURE__ */ jsx(
2610
+ "span",
2611
+ {
2612
+ className: playbackRate === speed ? "font-semibold text-white" : "text-white/55",
2613
+ children: speed === 1 ? "Normal" : `${speed}\xD7`
2614
+ }
2615
+ )
2616
+ ]
2617
+ },
2618
+ speed
2619
+ )) })
2620
+ ] })
2621
+ ]
2622
+ }
2623
+ )
2624
+ ] }),
2625
+ /* @__PURE__ */ jsxs(
2626
+ "div",
2627
+ {
2628
+ ref: progressRef,
2629
+ onPointerMove: handleProgressPointerMove,
2630
+ onPointerEnter: handleProgressPointerEnter,
2631
+ onPointerLeave: handleProgressPointerLeave,
2632
+ onPointerDown: handleProgressPointerDown,
2633
+ onPointerUp: handleProgressPointerUp,
2634
+ className: "relative mb-2 h-8 cursor-pointer overflow-visible",
2635
+ children: [
2636
+ /* @__PURE__ */ jsxs(
2637
+ "div",
2638
+ {
2639
+ className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/18",
2640
+ style: {
2641
+ height: isDragging ? "7px" : isHoveringProgress ? "5px" : "3px",
2642
+ transition: "height 0.15s ease"
2643
+ },
2644
+ children: [
2645
+ /* @__PURE__ */ jsx(
2646
+ "div",
2647
+ {
2648
+ className: "absolute inset-y-0 left-0 rounded-full bg-white/28",
2649
+ style: { width: `${bufferedPercent}%` }
2650
+ }
2651
+ ),
2652
+ /* @__PURE__ */ jsx(
2653
+ "div",
2654
+ {
2655
+ className: "absolute inset-y-0 left-0 rounded-full bg-white",
2656
+ style: { width: `${progressPercent}%`, transition: "width 0.05s linear" }
2657
+ }
2658
+ )
2659
+ ]
2660
+ }
2661
+ ),
2662
+ /* @__PURE__ */ jsx(
2663
+ "div",
2664
+ {
2665
+ className: "pointer-events-none absolute rounded-full bg-white shadow-[0_1px_6px_rgba(0,0,0,0.5)]",
2666
+ style: {
2667
+ top: "50%",
2668
+ left: `${progressPercent}%`,
2669
+ transform: "translate(-50%, -50%)",
2670
+ width: isDragging ? "18px" : isHoveringProgress ? "14px" : "10px",
2671
+ height: isDragging ? "18px" : isHoveringProgress ? "14px" : "10px",
2672
+ transition: "width 0.2s cubic-bezier(0.34,1.56,0.64,1), height 0.2s cubic-bezier(0.34,1.56,0.64,1)"
2538
2673
  }
2539
- ),
2540
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
2541
- "button",
2674
+ }
2675
+ ),
2676
+ chapters.length > 0 && duration > 0 && chapters.map((ch, i) => /* @__PURE__ */ jsx(
2677
+ "div",
2678
+ {
2679
+ className: "pointer-events-none absolute top-1/2 -translate-y-1/2 w-0.5 rounded-full bg-white/50",
2680
+ style: { left: `${ch.startTime / duration * 100}%`, height: isDragging ? "7px" : isHoveringProgress ? "5px" : "3px", transition: "height 0.15s ease" }
2681
+ },
2682
+ i
2683
+ )),
2684
+ preview && (() => {
2685
+ const frameW = preview.cue.w ?? 160;
2686
+ const frameH = preview.cue.h ?? 90;
2687
+ const thumbW = 200;
2688
+ const thumbH = Math.round(thumbW * (frameH / frameW));
2689
+ const scale = thumbW / frameW;
2690
+ const isSprite = preview.cue.x != null && preview.cue.y != null;
2691
+ return /* @__PURE__ */ jsxs(
2692
+ "div",
2542
2693
  {
2543
- type: "button",
2544
- onClick: () => {
2545
- setPlaybackRate(speed);
2546
- closeSettings();
2694
+ className: "pointer-events-none absolute flex flex-col items-center gap-1",
2695
+ style: {
2696
+ bottom: "calc(100% + 6px)",
2697
+ left: preview.left,
2698
+ transform: "translateX(-50%)",
2699
+ zIndex: 80
2547
2700
  },
2548
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2549
2701
  children: [
2550
2702
  /* @__PURE__ */ jsx(
2551
- "svg",
2703
+ "div",
2552
2704
  {
2553
- className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`,
2554
- viewBox: "0 0 16 16",
2555
- fill: "none",
2556
- children: /* @__PURE__ */ jsx(
2557
- "path",
2705
+ className: "overflow-hidden rounded-lg shadow-2xl ring-1 ring-white/20",
2706
+ style: { width: thumbW, height: thumbH, flexShrink: 0 },
2707
+ children: isSprite ? (
2708
+ // Sprite: need full sheet dimensions to compute backgroundSize correctly.
2709
+ // Load them once from the image's natural size.
2710
+ (() => {
2711
+ const imgUrl = preview.cue.image;
2712
+ if (storyboardSheetUrlRef.current !== imgUrl) {
2713
+ storyboardSheetUrlRef.current = imgUrl;
2714
+ const img = new window.Image();
2715
+ img.onload = () => setStoryboardSheetSize({ w: img.naturalWidth, h: img.naturalHeight });
2716
+ img.src = imgUrl;
2717
+ }
2718
+ if (!storyboardSheetSize) return null;
2719
+ const bsW = storyboardSheetSize.w * scale;
2720
+ const bsH = storyboardSheetSize.h * scale;
2721
+ return /* @__PURE__ */ jsx(
2722
+ "div",
2723
+ {
2724
+ style: {
2725
+ width: thumbW,
2726
+ height: thumbH,
2727
+ backgroundImage: `url(${imgUrl})`,
2728
+ backgroundRepeat: "no-repeat",
2729
+ backgroundPosition: `-${(preview.cue.x ?? 0) * scale}px -${(preview.cue.y ?? 0) * scale}px`,
2730
+ backgroundSize: `${bsW}px ${bsH}px`
2731
+ }
2732
+ }
2733
+ );
2734
+ })()
2735
+ ) : /* @__PURE__ */ jsx(
2736
+ "img",
2558
2737
  {
2559
- d: "M3 8l3.5 3.5L13 4.5",
2560
- stroke: "currentColor",
2561
- strokeWidth: "1.8",
2562
- strokeLinecap: "round",
2563
- strokeLinejoin: "round"
2738
+ src: preview.cue.image,
2739
+ alt: "",
2740
+ style: { width: thumbW, height: thumbH, objectFit: "cover", objectPosition: "center", display: "block" }
2564
2741
  }
2565
2742
  )
2566
2743
  }
@@ -2568,262 +2745,160 @@ function Video({
2568
2745
  /* @__PURE__ */ jsx(
2569
2746
  "span",
2570
2747
  {
2571
- className: playbackRate === speed ? "font-semibold text-white" : "text-white/55",
2572
- children: speed === 1 ? "Normal" : `${speed}\xD7`
2748
+ className: "rounded-md px-2 py-0.5 text-[11px] font-semibold tabular-nums text-white/90",
2749
+ style: { background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)" },
2750
+ children: formatTime(preview.time)
2573
2751
  }
2574
2752
  )
2575
2753
  ]
2576
- },
2577
- speed
2578
- )) })
2579
- ] })
2754
+ }
2755
+ );
2756
+ })()
2580
2757
  ]
2581
2758
  }
2582
- )
2583
- ] }),
2584
- /* @__PURE__ */ jsxs(
2585
- "div",
2586
- {
2587
- ref: progressRef,
2588
- onPointerMove: handleProgressPointerMove,
2589
- onPointerEnter: handleProgressPointerEnter,
2590
- onPointerLeave: handleProgressPointerLeave,
2591
- onPointerDown: handleProgressPointerDown,
2592
- onPointerUp: handleProgressPointerUp,
2593
- className: "relative mb-2 h-8 cursor-pointer overflow-visible",
2594
- children: [
2595
- /* @__PURE__ */ jsxs(
2596
- "div",
2759
+ ),
2760
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
2761
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 @sm:gap-2", children: [
2762
+ /* @__PURE__ */ jsx(
2763
+ "button",
2597
2764
  {
2598
- className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/18",
2599
- style: {
2600
- height: isDragging ? "7px" : isHoveringProgress ? "5px" : "3px",
2601
- transition: "height 0.15s ease"
2602
- },
2603
- children: [
2604
- /* @__PURE__ */ jsx(
2605
- "div",
2606
- {
2607
- className: "absolute inset-y-0 left-0 rounded-full bg-white/28",
2608
- style: { width: `${bufferedPercent}%` }
2609
- }
2610
- ),
2611
- /* @__PURE__ */ jsx(
2612
- "div",
2613
- {
2614
- className: "absolute inset-y-0 left-0 rounded-full bg-white",
2615
- style: { width: `${progressPercent}%`, transition: "width 0.05s linear" }
2616
- }
2617
- )
2618
- ]
2765
+ type: "button",
2766
+ onClick: togglePlay,
2767
+ className: "grid size-8 place-items-center rounded-full text-white transition hover:bg-white/10 @sm:size-9",
2768
+ "aria-label": isPlaying ? "Pause" : "Play",
2769
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-5", fill: "white" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-5", fill: "white" })
2619
2770
  }
2620
2771
  ),
2772
+ /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
2773
+ formatTime(currentTime),
2774
+ /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
2775
+ /* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
2776
+ ] }),
2777
+ (() => {
2778
+ if (chapters.length === 0) return null;
2779
+ const ch = [...chapters].reverse().find((c) => currentTime >= c.startTime);
2780
+ return ch ? /* @__PURE__ */ jsx("span", { className: "hidden max-w-40 truncate text-[11px] text-white/50 @sm:block", children: ch.title }) : null;
2781
+ })()
2782
+ ] }),
2783
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
2784
+ parsed.rating && (() => {
2785
+ const r = parsed.rating;
2786
+ const reactions = [
2787
+ { key: "LOVE", emoji: "\u2764\uFE0F" },
2788
+ { key: "LIKE", emoji: "\u{1F44D}" },
2789
+ { key: "DISLIKE", emoji: "\u{1F44E}" }
2790
+ ];
2791
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
2792
+ reactions.map(({ key, emoji }) => {
2793
+ const count = r.counts?.[key] ?? 0;
2794
+ const active = r.userReaction === key;
2795
+ return /* @__PURE__ */ jsxs(
2796
+ "button",
2797
+ {
2798
+ type: "button",
2799
+ onClick: (e) => {
2800
+ e.stopPropagation();
2801
+ r.onReact?.(active ? null : key);
2802
+ },
2803
+ className: `flex items-center gap-0.5 rounded px-1.5 py-1 text-[11px] transition hover:bg-white/10 ${active ? "opacity-100" : "opacity-50 hover:opacity-80"}`,
2804
+ "aria-label": key.toLowerCase(),
2805
+ "aria-pressed": active,
2806
+ children: [
2807
+ /* @__PURE__ */ jsx("span", { children: emoji }),
2808
+ count > 0 && /* @__PURE__ */ jsx("span", { className: "text-white/70 tabular-nums", children: count })
2809
+ ]
2810
+ },
2811
+ key
2812
+ );
2813
+ }),
2814
+ /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" })
2815
+ ] });
2816
+ })(),
2621
2817
  /* @__PURE__ */ jsx(
2622
- "div",
2818
+ VolumeSlider,
2623
2819
  {
2624
- className: "pointer-events-none absolute rounded-full bg-white shadow-[0_1px_6px_rgba(0,0,0,0.5)]",
2625
- style: {
2626
- top: "50%",
2627
- left: `${progressPercent}%`,
2628
- transform: "translate(-50%, -50%)",
2629
- width: isDragging ? "18px" : isHoveringProgress ? "14px" : "10px",
2630
- height: isDragging ? "18px" : isHoveringProgress ? "14px" : "10px",
2631
- transition: "width 0.2s cubic-bezier(0.34,1.56,0.64,1), height 0.2s cubic-bezier(0.34,1.56,0.64,1)"
2632
- }
2820
+ volume: isMuted ? 0 : volume,
2821
+ onMuteToggle: () => setIsMuted((v) => !v),
2822
+ onVolumeChange: (v) => {
2823
+ setVolume(v);
2824
+ setIsMuted(v === 0);
2825
+ },
2826
+ isMuted
2633
2827
  }
2634
2828
  ),
2635
- chapters.length > 0 && duration > 0 && chapters.map((ch, i) => /* @__PURE__ */ jsx(
2636
- "div",
2829
+ /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
2830
+ captions.length > 0 && /* @__PURE__ */ jsx(
2831
+ "button",
2637
2832
  {
2638
- className: "pointer-events-none absolute top-1/2 -translate-y-1/2 w-0.5 rounded-full bg-white/50",
2639
- style: { left: `${ch.startTime / duration * 100}%`, height: isDragging ? "7px" : isHoveringProgress ? "5px" : "3px", transition: "height 0.15s ease" }
2640
- },
2641
- i
2642
- )),
2643
- preview && (() => {
2644
- const frameW = preview.cue.w ?? 160;
2645
- const frameH = preview.cue.h ?? 90;
2646
- const thumbW = 200;
2647
- const thumbH = Math.round(thumbW * (frameH / frameW));
2648
- const scale = thumbW / frameW;
2649
- const isSprite = preview.cue.x != null && preview.cue.y != null;
2650
- return /* @__PURE__ */ jsxs(
2651
- "div",
2652
- {
2653
- className: "pointer-events-none absolute flex flex-col items-center gap-1",
2654
- style: {
2655
- bottom: "calc(100% + 6px)",
2656
- left: preview.left,
2657
- transform: "translateX(-50%)",
2658
- zIndex: 80
2659
- },
2660
- children: [
2661
- /* @__PURE__ */ jsx(
2662
- "div",
2663
- {
2664
- className: "overflow-hidden rounded-lg shadow-2xl ring-1 ring-white/20",
2665
- style: { width: thumbW, height: thumbH, flexShrink: 0 },
2666
- children: isSprite ? (
2667
- // Sprite: need full sheet dimensions to compute backgroundSize correctly.
2668
- // Load them once from the image's natural size.
2669
- (() => {
2670
- const imgUrl = preview.cue.image;
2671
- if (storyboardSheetUrlRef.current !== imgUrl) {
2672
- storyboardSheetUrlRef.current = imgUrl;
2673
- const img = new window.Image();
2674
- img.onload = () => setStoryboardSheetSize({ w: img.naturalWidth, h: img.naturalHeight });
2675
- img.src = imgUrl;
2676
- }
2677
- if (!storyboardSheetSize) return null;
2678
- const bsW = storyboardSheetSize.w * scale;
2679
- const bsH = storyboardSheetSize.h * scale;
2680
- return /* @__PURE__ */ jsx(
2681
- "div",
2682
- {
2683
- style: {
2684
- width: thumbW,
2685
- height: thumbH,
2686
- backgroundImage: `url(${imgUrl})`,
2687
- backgroundRepeat: "no-repeat",
2688
- backgroundPosition: `-${(preview.cue.x ?? 0) * scale}px -${(preview.cue.y ?? 0) * scale}px`,
2689
- backgroundSize: `${bsW}px ${bsH}px`
2690
- }
2691
- }
2692
- );
2693
- })()
2694
- ) : /* @__PURE__ */ jsx(
2695
- "img",
2696
- {
2697
- src: preview.cue.image,
2698
- alt: "",
2699
- style: { width: thumbW, height: thumbH, objectFit: "cover", objectPosition: "center", display: "block" }
2700
- }
2701
- )
2702
- }
2703
- ),
2704
- /* @__PURE__ */ jsx(
2705
- "span",
2706
- {
2707
- className: "rounded-md px-2 py-0.5 text-[11px] font-semibold tabular-nums text-white/90",
2708
- style: { background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)" },
2709
- children: formatTime(preview.time)
2710
- }
2711
- )
2712
- ]
2713
- }
2714
- );
2715
- })()
2716
- ]
2717
- }
2718
- ),
2719
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
2720
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 @sm:gap-2", children: [
2721
- /* @__PURE__ */ jsx(
2722
- "button",
2723
- {
2724
- type: "button",
2725
- onClick: togglePlay,
2726
- className: "grid size-8 place-items-center rounded-full text-white transition hover:bg-white/10 @sm:size-9",
2727
- "aria-label": isPlaying ? "Pause" : "Play",
2728
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-5", fill: "white" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-5", fill: "white" })
2729
- }
2730
- ),
2731
- /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
2732
- formatTime(currentTime),
2733
- /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
2734
- /* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
2735
- ] }),
2736
- (() => {
2737
- if (chapters.length === 0) return null;
2738
- const ch = [...chapters].reverse().find((c) => currentTime >= c.startTime);
2739
- return ch ? /* @__PURE__ */ jsx("span", { className: "hidden max-w-40 truncate text-[11px] text-white/50 @sm:block", children: ch.title }) : null;
2740
- })()
2741
- ] }),
2742
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
2743
- /* @__PURE__ */ jsx(
2744
- VolumeSlider,
2745
- {
2746
- volume: isMuted ? 0 : volume,
2747
- onMuteToggle: () => setIsMuted((v) => !v),
2748
- onVolumeChange: (v) => {
2749
- setVolume(v);
2750
- setIsMuted(v === 0);
2751
- },
2752
- isMuted
2753
- }
2754
- ),
2755
- /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
2756
- captions.length > 0 && /* @__PURE__ */ jsx(
2757
- "button",
2758
- {
2759
- type: "button",
2760
- onClick: () => {
2761
- const next = subtitleMode === "off" ? captions[0]?.srclang ?? "off" : "off";
2762
- setSubtitleMode(next);
2763
- setSubtitleStyle((st) => ({ ...st, track: next }));
2764
- },
2765
- className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2766
- "aria-label": "Captions",
2767
- children: /* @__PURE__ */ jsx(Captions$1, { className: "size-4 @sm:size-5" })
2768
- }
2769
- ),
2770
- /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
2771
- "button",
2772
- {
2773
- type: "button",
2774
- onClick: () => settingsOpen ? closeSettings() : openSettings(),
2775
- className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
2776
- "aria-label": "Settings",
2777
- children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
2778
- }
2779
- ) }),
2780
- /* @__PURE__ */ jsx(
2781
- "button",
2782
- {
2783
- type: "button",
2784
- onClick: toggleFullscreen,
2785
- className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
2786
- "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
2787
- children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
2788
- }
2789
- )
2833
+ type: "button",
2834
+ onClick: () => {
2835
+ const next = subtitleMode === "off" ? captions[0]?.srclang ?? "off" : "off";
2836
+ setSubtitleMode(next);
2837
+ setSubtitleStyle((st) => ({ ...st, track: next }));
2838
+ },
2839
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2840
+ "aria-label": "Captions",
2841
+ children: /* @__PURE__ */ jsx(Captions$1, { className: "size-4 @sm:size-5" })
2842
+ }
2843
+ ),
2844
+ /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
2845
+ "button",
2846
+ {
2847
+ type: "button",
2848
+ onClick: () => settingsOpen ? closeSettings() : openSettings(),
2849
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
2850
+ "aria-label": "Settings",
2851
+ children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
2852
+ }
2853
+ ) }),
2854
+ /* @__PURE__ */ jsx(
2855
+ "button",
2856
+ {
2857
+ type: "button",
2858
+ onClick: toggleFullscreen,
2859
+ className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
2860
+ "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
2861
+ children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
2862
+ }
2863
+ )
2864
+ ] })
2790
2865
  ] })
2791
- ] })
2792
- ]
2866
+ ]
2867
+ }
2868
+ )
2869
+ ]
2870
+ }
2871
+ ),
2872
+ activeCue && /* @__PURE__ */ jsx(
2873
+ "div",
2874
+ {
2875
+ 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"}`,
2876
+ children: /* @__PURE__ */ jsx(
2877
+ "div",
2878
+ {
2879
+ className: "max-w-[80%] rounded-lg px-4 py-1.5 text-center font-medium leading-snug",
2880
+ style: {
2881
+ fontSize: (() => {
2882
+ const base = Math.max(12, Math.min(playerHeight * 0.028, 32));
2883
+ if (subtitleStyle.size === "small") return `${base * 0.75}px`;
2884
+ if (subtitleStyle.size === "large") return `${base * 1.35}px`;
2885
+ if (subtitleStyle.size === "xlarge") return `${base * 1.8}px`;
2886
+ return `${base}px`;
2887
+ })(),
2888
+ color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
2889
+ backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.55)",
2890
+ backdropFilter: subtitleStyle.bg === "semi" ? "blur(6px)" : void 0,
2891
+ textShadow: subtitleStyle.bg === "none" ? "0 1px 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,0.9)" : "0 1px 3px rgba(0,0,0,0.5)"
2892
+ },
2893
+ children: activeCue
2793
2894
  }
2794
2895
  )
2795
- ]
2796
- }
2797
- ),
2798
- activeCue && /* @__PURE__ */ jsx(
2799
- "div",
2800
- {
2801
- 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"}`,
2802
- children: /* @__PURE__ */ jsx(
2803
- "div",
2804
- {
2805
- className: "max-w-[80%] rounded-lg px-4 py-1.5 text-center font-medium leading-snug",
2806
- style: {
2807
- fontSize: (() => {
2808
- const base = Math.max(12, Math.min(playerHeight * 0.028, 32));
2809
- if (subtitleStyle.size === "small") return `${base * 0.75}px`;
2810
- if (subtitleStyle.size === "large") return `${base * 1.35}px`;
2811
- if (subtitleStyle.size === "xlarge") return `${base * 1.8}px`;
2812
- return `${base}px`;
2813
- })(),
2814
- color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
2815
- backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.55)",
2816
- backdropFilter: subtitleStyle.bg === "semi" ? "blur(6px)" : void 0,
2817
- textShadow: subtitleStyle.bg === "none" ? "0 1px 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,0.9)" : "0 1px 3px rgba(0,0,0,0.5)"
2818
- },
2819
- children: activeCue
2820
- }
2821
- )
2822
- }
2823
- )
2824
- ]
2825
- }
2826
- )
2896
+ }
2897
+ )
2898
+ ]
2899
+ }
2900
+ )
2901
+ ]
2827
2902
  }
2828
2903
  );
2829
2904
  }
@@ -2931,6 +3006,34 @@ function VolumeSlider({
2931
3006
  }
2932
3007
  );
2933
3008
  }
3009
+ var LOCALE_TO_REGION = {
3010
+ "en-US": "US",
3011
+ "en-CA": "CA",
3012
+ "pt-BR": "BR",
3013
+ "de": "EU",
3014
+ "fr": "EU",
3015
+ "es": "EU",
3016
+ "it": "EU",
3017
+ "nl": "EU",
3018
+ "pl": "EU",
3019
+ "de-DE": "EU",
3020
+ "fr-FR": "EU",
3021
+ "es-ES": "EU",
3022
+ "it-IT": "EU",
3023
+ "ja": "JP",
3024
+ "ja-JP": "JP",
3025
+ "ko": "KR",
3026
+ "ko-KR": "KR",
3027
+ "en-AU": "AU"
3028
+ };
3029
+ function resolveAgeRatingRegion(locale, data) {
3030
+ if (!locale) return Object.keys(data)[0];
3031
+ if (LOCALE_TO_REGION[locale] && data[LOCALE_TO_REGION[locale]]) return LOCALE_TO_REGION[locale];
3032
+ const lang = locale.split("-")[0] ?? "";
3033
+ const fromLang = LOCALE_TO_REGION[lang];
3034
+ if (fromLang && data[fromLang]) return fromLang;
3035
+ return Object.keys(data)[0];
3036
+ }
2934
3037
  function parseVideoChildren(children) {
2935
3038
  const parsed = {
2936
3039
  sources: []
@@ -2965,6 +3068,14 @@ function parseVideoChildren(children) {
2965
3068
  const element = child;
2966
3069
  parsed.thumbnailSrc = element.props.src;
2967
3070
  }
3071
+ if (child.type === AgeRating || name === "SiloAgeRating") {
3072
+ const element = child;
3073
+ parsed.ageRating = element.props;
3074
+ }
3075
+ if (child.type === Rating || name === "SiloRating") {
3076
+ const element = child;
3077
+ parsed.rating = element.props;
3078
+ }
2968
3079
  if (child.type === Storyboard || name === "SiloStoryboard") {
2969
3080
  const element = child;
2970
3081
  const frames = [];