@geekapps/silo-elements-nextjs 0.2.39 → 0.2.41
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.
- package/dist/VideoPlayer.js +766 -375
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +766 -375
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
package/dist/index.js
CHANGED
|
@@ -1363,7 +1363,9 @@ function Video({
|
|
|
1363
1363
|
setActiveCue(null);
|
|
1364
1364
|
return;
|
|
1365
1365
|
}
|
|
1366
|
-
const track = Array.from(video.textTracks).find(
|
|
1366
|
+
const track = Array.from(video.textTracks).find(
|
|
1367
|
+
(t) => t.language === mode && t.kind !== "metadata"
|
|
1368
|
+
);
|
|
1367
1369
|
if (!track || !track.activeCues || track.activeCues.length === 0) {
|
|
1368
1370
|
setActiveCue(null);
|
|
1369
1371
|
return;
|
|
@@ -1382,26 +1384,48 @@ function Video({
|
|
|
1382
1384
|
video.textTracks.addEventListener("addtrack", bindTracks);
|
|
1383
1385
|
return () => {
|
|
1384
1386
|
video.textTracks.removeEventListener("addtrack", bindTracks);
|
|
1385
|
-
Array.from(video.textTracks).forEach(
|
|
1387
|
+
Array.from(video.textTracks).forEach(
|
|
1388
|
+
(t) => t.removeEventListener("cuechange", onCueChange)
|
|
1389
|
+
);
|
|
1386
1390
|
};
|
|
1387
1391
|
}, []);
|
|
1388
1392
|
useEffect(() => {
|
|
1389
1393
|
const video = videoRef.current;
|
|
1390
1394
|
const onFullscreenChange = () => {
|
|
1391
1395
|
const doc = document;
|
|
1392
|
-
const nativeFullscreen = Boolean(
|
|
1396
|
+
const nativeFullscreen = Boolean(
|
|
1397
|
+
document.fullscreenElement || doc.webkitFullscreenElement
|
|
1398
|
+
);
|
|
1393
1399
|
const iosVideoFullscreen = Boolean(video?.webkitDisplayingFullscreen);
|
|
1394
1400
|
setIsFullscreen(nativeFullscreen || iosVideoFullscreen);
|
|
1395
1401
|
};
|
|
1396
1402
|
document.addEventListener("fullscreenchange", onFullscreenChange);
|
|
1397
|
-
document.addEventListener(
|
|
1398
|
-
|
|
1399
|
-
|
|
1403
|
+
document.addEventListener(
|
|
1404
|
+
"webkitfullscreenchange",
|
|
1405
|
+
onFullscreenChange
|
|
1406
|
+
);
|
|
1407
|
+
video?.addEventListener(
|
|
1408
|
+
"webkitbeginfullscreen",
|
|
1409
|
+
onFullscreenChange
|
|
1410
|
+
);
|
|
1411
|
+
video?.addEventListener(
|
|
1412
|
+
"webkitendfullscreen",
|
|
1413
|
+
onFullscreenChange
|
|
1414
|
+
);
|
|
1400
1415
|
return () => {
|
|
1401
1416
|
document.removeEventListener("fullscreenchange", onFullscreenChange);
|
|
1402
|
-
document.removeEventListener(
|
|
1403
|
-
|
|
1404
|
-
|
|
1417
|
+
document.removeEventListener(
|
|
1418
|
+
"webkitfullscreenchange",
|
|
1419
|
+
onFullscreenChange
|
|
1420
|
+
);
|
|
1421
|
+
video?.removeEventListener(
|
|
1422
|
+
"webkitbeginfullscreen",
|
|
1423
|
+
onFullscreenChange
|
|
1424
|
+
);
|
|
1425
|
+
video?.removeEventListener(
|
|
1426
|
+
"webkitendfullscreen",
|
|
1427
|
+
onFullscreenChange
|
|
1428
|
+
);
|
|
1405
1429
|
};
|
|
1406
1430
|
}, []);
|
|
1407
1431
|
useEffect(() => {
|
|
@@ -1561,10 +1585,12 @@ function Video({
|
|
|
1561
1585
|
]);
|
|
1562
1586
|
const tracks = hls.audioTracks ?? [];
|
|
1563
1587
|
if (tracks.length > 1) {
|
|
1564
|
-
setAudioTracks(
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1588
|
+
setAudioTracks(
|
|
1589
|
+
tracks.map((t, i) => ({
|
|
1590
|
+
id: i,
|
|
1591
|
+
label: t.name ?? t.lang ?? `Track ${i + 1}`
|
|
1592
|
+
}))
|
|
1593
|
+
);
|
|
1568
1594
|
setSelectedAudio(hls.audioTrack ?? 0);
|
|
1569
1595
|
}
|
|
1570
1596
|
setIsLoading(false);
|
|
@@ -1572,10 +1598,12 @@ function Video({
|
|
|
1572
1598
|
hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
|
|
1573
1599
|
const tracks = data.audioTracks ?? [];
|
|
1574
1600
|
if (tracks.length > 1) {
|
|
1575
|
-
setAudioTracks(
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1601
|
+
setAudioTracks(
|
|
1602
|
+
tracks.map((t, i) => ({
|
|
1603
|
+
id: i,
|
|
1604
|
+
label: t.name ?? t.lang ?? `Track ${i + 1}`
|
|
1605
|
+
}))
|
|
1606
|
+
);
|
|
1579
1607
|
}
|
|
1580
1608
|
});
|
|
1581
1609
|
hls.on(Hls.Events.ERROR, (_, data) => {
|
|
@@ -1628,9 +1656,13 @@ function Video({
|
|
|
1628
1656
|
} else {
|
|
1629
1657
|
video.pause();
|
|
1630
1658
|
}
|
|
1631
|
-
if (clickIconTimerRef.current)
|
|
1659
|
+
if (clickIconTimerRef.current)
|
|
1660
|
+
window.clearTimeout(clickIconTimerRef.current);
|
|
1632
1661
|
setClickIcon(wasPaused ? "play" : "pause");
|
|
1633
|
-
clickIconTimerRef.current = window.setTimeout(
|
|
1662
|
+
clickIconTimerRef.current = window.setTimeout(
|
|
1663
|
+
() => setClickIcon(null),
|
|
1664
|
+
600
|
|
1665
|
+
);
|
|
1634
1666
|
} catch {
|
|
1635
1667
|
setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
|
|
1636
1668
|
}
|
|
@@ -1649,7 +1681,9 @@ function Video({
|
|
|
1649
1681
|
const doc = document;
|
|
1650
1682
|
if (!player && !video) return;
|
|
1651
1683
|
try {
|
|
1652
|
-
const nativeFullscreen = Boolean(
|
|
1684
|
+
const nativeFullscreen = Boolean(
|
|
1685
|
+
document.fullscreenElement || doc.webkitFullscreenElement
|
|
1686
|
+
);
|
|
1653
1687
|
const iosVideoFullscreen = Boolean(video?.webkitDisplayingFullscreen);
|
|
1654
1688
|
if (nativeFullscreen || iosVideoFullscreen) {
|
|
1655
1689
|
if (document.fullscreenElement && document.exitFullscreen) {
|
|
@@ -1764,7 +1798,11 @@ function Video({
|
|
|
1764
1798
|
setPreview(null);
|
|
1765
1799
|
return;
|
|
1766
1800
|
}
|
|
1767
|
-
setPreview({
|
|
1801
|
+
setPreview({
|
|
1802
|
+
cue,
|
|
1803
|
+
time,
|
|
1804
|
+
left: Math.max(80, Math.min(x, rect.width - 80))
|
|
1805
|
+
});
|
|
1768
1806
|
},
|
|
1769
1807
|
[duration, storyboardCues]
|
|
1770
1808
|
);
|
|
@@ -1828,8 +1866,7 @@ function Video({
|
|
|
1828
1866
|
);
|
|
1829
1867
|
if (!activeSource) {
|
|
1830
1868
|
return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: [
|
|
1831
|
-
"O componente Video precisa de pelo menos um",
|
|
1832
|
-
" ",
|
|
1869
|
+
"O componente Video precisa de pelo menos um ",
|
|
1833
1870
|
/* @__PURE__ */ jsx("code", { children: "<Source />" }),
|
|
1834
1871
|
"."
|
|
1835
1872
|
] });
|
|
@@ -1852,7 +1889,12 @@ function Video({
|
|
|
1852
1889
|
}
|
|
1853
1890
|
},
|
|
1854
1891
|
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",
|
|
1855
|
-
style: fixedHeight ? {
|
|
1892
|
+
style: fixedHeight ? {
|
|
1893
|
+
height: typeof fixedHeight === "number" ? `${fixedHeight}px` : fixedHeight
|
|
1894
|
+
} : maxHeight ? {
|
|
1895
|
+
maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
|
|
1896
|
+
aspectRatio: "16/9"
|
|
1897
|
+
} : { aspectRatio: "16/9" },
|
|
1856
1898
|
children: [
|
|
1857
1899
|
/* @__PURE__ */ jsxs(
|
|
1858
1900
|
"video",
|
|
@@ -1897,8 +1939,17 @@ function Video({
|
|
|
1897
1939
|
"div",
|
|
1898
1940
|
{
|
|
1899
1941
|
className: "pointer-events-none absolute inset-0 z-10 grid place-items-center",
|
|
1900
|
-
style: {
|
|
1901
|
-
|
|
1942
|
+
style: {
|
|
1943
|
+
opacity: clickIcon ? 1 : 0,
|
|
1944
|
+
transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out"
|
|
1945
|
+
},
|
|
1946
|
+
children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)] @sm:size-14 @lg:size-16", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-7 @lg:size-8", fill: "white" }) : /* @__PURE__ */ jsx(
|
|
1947
|
+
Play,
|
|
1948
|
+
{
|
|
1949
|
+
className: "ml-0.5 size-5 @sm:size-7 @lg:size-8",
|
|
1950
|
+
fill: "white"
|
|
1951
|
+
}
|
|
1952
|
+
) })
|
|
1902
1953
|
}
|
|
1903
1954
|
),
|
|
1904
1955
|
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" }) }),
|
|
@@ -1908,362 +1959,671 @@ function Video({
|
|
|
1908
1959
|
{
|
|
1909
1960
|
ref: chromeRef,
|
|
1910
1961
|
onClick: togglePlay,
|
|
1911
|
-
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"}`,
|
|
1962
|
+
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"}`,
|
|
1912
1963
|
children: [
|
|
1913
1964
|
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" }),
|
|
1914
1965
|
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
|
|
1915
|
-
isFullscreen && /* @__PURE__ */ jsx(
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
|
|
1924
|
-
{ id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
|
|
1925
|
-
...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
|
|
1926
|
-
...audioTracks.length > 1 ? [{ id: "audio", label: "\xC1udio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
|
|
1927
|
-
{ id: "playback", label: "Velocidade", value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7` }
|
|
1928
|
-
].map((item) => /* @__PURE__ */ jsxs(
|
|
1929
|
-
"button",
|
|
1966
|
+
isFullscreen && /* @__PURE__ */ jsx(
|
|
1967
|
+
"header",
|
|
1968
|
+
{
|
|
1969
|
+
onClick: (e) => e.stopPropagation(),
|
|
1970
|
+
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",
|
|
1971
|
+
children: /* @__PURE__ */ jsxs("div", { children: [
|
|
1972
|
+
title && /* @__PURE__ */ jsx(
|
|
1973
|
+
"h1",
|
|
1930
1974
|
{
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1975
|
+
className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl",
|
|
1976
|
+
style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" },
|
|
1977
|
+
children: title
|
|
1978
|
+
}
|
|
1979
|
+
),
|
|
1980
|
+
description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
|
|
1981
|
+
] })
|
|
1982
|
+
}
|
|
1983
|
+
),
|
|
1984
|
+
/* @__PURE__ */ jsxs(
|
|
1985
|
+
"footer",
|
|
1986
|
+
{
|
|
1987
|
+
onClick: (e) => e.stopPropagation(),
|
|
1988
|
+
className: "relative z-10 px-4 pb-4 text-white",
|
|
1989
|
+
children: [
|
|
1990
|
+
settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1991
|
+
/* @__PURE__ */ jsx(
|
|
1992
|
+
"div",
|
|
1947
1993
|
{
|
|
1948
|
-
|
|
1949
|
-
onClick: () =>
|
|
1950
|
-
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",
|
|
1951
|
-
children: [
|
|
1952
|
-
/* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
1953
|
-
"Qualidade"
|
|
1954
|
-
]
|
|
1994
|
+
className: "fixed inset-0 z-70",
|
|
1995
|
+
onClick: () => setSettingsOpen(false)
|
|
1955
1996
|
}
|
|
1956
1997
|
),
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
"
|
|
1998
|
+
/* @__PURE__ */ jsxs(
|
|
1999
|
+
"div",
|
|
1959
2000
|
{
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
2001
|
+
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",
|
|
2002
|
+
style: {
|
|
2003
|
+
width: Math.min(
|
|
2004
|
+
224,
|
|
2005
|
+
Math.max(180, (playerWidth || 640) * 0.22)
|
|
2006
|
+
) + "px",
|
|
2007
|
+
animation: "spFadeIn 0.15s ease"
|
|
1964
2008
|
},
|
|
1965
|
-
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
1966
2009
|
children: [
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
2010
|
+
settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
|
|
2011
|
+
{
|
|
2012
|
+
id: "quality",
|
|
2013
|
+
label: "Qualidade",
|
|
2014
|
+
value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto"
|
|
2015
|
+
},
|
|
2016
|
+
...parsed.subtitles.length > 0 ? [
|
|
2017
|
+
{
|
|
2018
|
+
id: "subtitles",
|
|
2019
|
+
label: "Legendas",
|
|
2020
|
+
value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find(
|
|
2021
|
+
(s) => s.srclang === subtitleStyle.track
|
|
2022
|
+
)?.label ?? subtitleStyle.track
|
|
2023
|
+
}
|
|
2024
|
+
] : [],
|
|
2025
|
+
...audioTracks.length > 1 ? [
|
|
2026
|
+
{
|
|
2027
|
+
id: "audio",
|
|
2028
|
+
label: "\xC1udio",
|
|
2029
|
+
value: audioTracks.find(
|
|
2030
|
+
(t) => t.id === selectedAudio
|
|
2031
|
+
)?.label ?? ""
|
|
2032
|
+
}
|
|
2033
|
+
] : [],
|
|
2034
|
+
{
|
|
2035
|
+
id: "playback",
|
|
2036
|
+
label: "Velocidade",
|
|
2037
|
+
value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7`
|
|
2038
|
+
}
|
|
2039
|
+
].map((item) => /* @__PURE__ */ jsxs(
|
|
2040
|
+
"button",
|
|
2041
|
+
{
|
|
2042
|
+
type: "button",
|
|
2043
|
+
onClick: () => setSettingsTab(item.id),
|
|
2044
|
+
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",
|
|
2045
|
+
children: [
|
|
2046
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
|
|
2047
|
+
/* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
|
|
2048
|
+
item.value,
|
|
2049
|
+
/* @__PURE__ */ jsx(
|
|
2050
|
+
"svg",
|
|
2051
|
+
{
|
|
2052
|
+
className: "size-3 opacity-50",
|
|
2053
|
+
viewBox: "0 0 12 12",
|
|
2054
|
+
fill: "none",
|
|
2055
|
+
children: /* @__PURE__ */ jsx(
|
|
2056
|
+
"path",
|
|
2057
|
+
{
|
|
2058
|
+
d: "M4.5 3l3 3-3 3",
|
|
2059
|
+
stroke: "currentColor",
|
|
2060
|
+
strokeWidth: "1.5",
|
|
2061
|
+
strokeLinecap: "round",
|
|
2062
|
+
strokeLinejoin: "round"
|
|
2063
|
+
}
|
|
2064
|
+
)
|
|
2065
|
+
}
|
|
2066
|
+
)
|
|
2067
|
+
] })
|
|
2068
|
+
]
|
|
2069
|
+
},
|
|
2070
|
+
item.id
|
|
2071
|
+
)) }),
|
|
2072
|
+
settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2073
|
+
/* @__PURE__ */ jsxs(
|
|
2074
|
+
"button",
|
|
2075
|
+
{
|
|
2076
|
+
type: "button",
|
|
2077
|
+
onClick: () => setSettingsTab("root"),
|
|
2078
|
+
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",
|
|
2079
|
+
children: [
|
|
2080
|
+
/* @__PURE__ */ jsx(
|
|
2081
|
+
"svg",
|
|
2082
|
+
{
|
|
2083
|
+
className: "size-3.5",
|
|
2084
|
+
viewBox: "0 0 12 12",
|
|
2085
|
+
fill: "none",
|
|
2086
|
+
children: /* @__PURE__ */ jsx(
|
|
2087
|
+
"path",
|
|
2088
|
+
{
|
|
2089
|
+
d: "M7.5 3L4.5 6l3 3",
|
|
2090
|
+
stroke: "currentColor",
|
|
2091
|
+
strokeWidth: "1.5",
|
|
2092
|
+
strokeLinecap: "round",
|
|
2093
|
+
strokeLinejoin: "round"
|
|
2094
|
+
}
|
|
2095
|
+
)
|
|
2096
|
+
}
|
|
2097
|
+
),
|
|
2098
|
+
"Qualidade"
|
|
2099
|
+
]
|
|
2100
|
+
}
|
|
2101
|
+
),
|
|
2102
|
+
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
|
|
2103
|
+
"button",
|
|
2104
|
+
{
|
|
2105
|
+
type: "button",
|
|
2106
|
+
onClick: () => {
|
|
2107
|
+
changeQuality(quality.id);
|
|
2108
|
+
setSettingsTab("root");
|
|
2109
|
+
},
|
|
2110
|
+
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2111
|
+
children: [
|
|
2112
|
+
/* @__PURE__ */ jsx(
|
|
2113
|
+
"svg",
|
|
2114
|
+
{
|
|
2115
|
+
className: `size-4 shrink-0${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
|
|
2116
|
+
viewBox: "0 0 16 16",
|
|
2117
|
+
fill: "none",
|
|
2118
|
+
children: /* @__PURE__ */ jsx(
|
|
2119
|
+
"path",
|
|
2120
|
+
{
|
|
2121
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
2122
|
+
stroke: "currentColor",
|
|
2123
|
+
strokeWidth: "1.8",
|
|
2124
|
+
strokeLinecap: "round",
|
|
2125
|
+
strokeLinejoin: "round"
|
|
2126
|
+
}
|
|
2127
|
+
)
|
|
2128
|
+
}
|
|
2129
|
+
),
|
|
2130
|
+
/* @__PURE__ */ jsxs(
|
|
2131
|
+
"span",
|
|
2132
|
+
{
|
|
2133
|
+
className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
|
|
2134
|
+
children: [
|
|
2135
|
+
quality.label,
|
|
2136
|
+
quality.id === "auto" ? " (ABR)" : ""
|
|
2137
|
+
]
|
|
2138
|
+
}
|
|
2139
|
+
)
|
|
2140
|
+
]
|
|
2141
|
+
},
|
|
2142
|
+
quality.id
|
|
2143
|
+
)) })
|
|
2144
|
+
] }),
|
|
2145
|
+
settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2146
|
+
/* @__PURE__ */ jsxs(
|
|
2147
|
+
"button",
|
|
2148
|
+
{
|
|
2149
|
+
type: "button",
|
|
2150
|
+
onClick: () => setSettingsTab("root"),
|
|
2151
|
+
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",
|
|
2152
|
+
children: [
|
|
2153
|
+
/* @__PURE__ */ jsx(
|
|
2154
|
+
"svg",
|
|
2155
|
+
{
|
|
2156
|
+
className: "size-3.5",
|
|
2157
|
+
viewBox: "0 0 12 12",
|
|
2158
|
+
fill: "none",
|
|
2159
|
+
children: /* @__PURE__ */ jsx(
|
|
2160
|
+
"path",
|
|
2161
|
+
{
|
|
2162
|
+
d: "M7.5 3L4.5 6l3 3",
|
|
2163
|
+
stroke: "currentColor",
|
|
2164
|
+
strokeWidth: "1.5",
|
|
2165
|
+
strokeLinecap: "round",
|
|
2166
|
+
strokeLinejoin: "round"
|
|
2167
|
+
}
|
|
2168
|
+
)
|
|
2169
|
+
}
|
|
2170
|
+
),
|
|
2171
|
+
"Legendas"
|
|
2172
|
+
]
|
|
2173
|
+
}
|
|
2174
|
+
),
|
|
2175
|
+
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: [
|
|
2176
|
+
{ srclang: "off", label: "Desligado" },
|
|
2177
|
+
...parsed.subtitles
|
|
2178
|
+
].map((s) => /* @__PURE__ */ jsxs(
|
|
2179
|
+
"button",
|
|
2180
|
+
{
|
|
2181
|
+
type: "button",
|
|
2182
|
+
onClick: () => {
|
|
2183
|
+
const next = s.srclang === "off" ? "off" : s.srclang;
|
|
2184
|
+
setSubtitleMode(next);
|
|
2185
|
+
setSubtitleStyle((st) => ({
|
|
2186
|
+
...st,
|
|
2187
|
+
track: next
|
|
2188
|
+
}));
|
|
2189
|
+
},
|
|
2190
|
+
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2191
|
+
children: [
|
|
2192
|
+
/* @__PURE__ */ jsx(
|
|
2193
|
+
"svg",
|
|
2194
|
+
{
|
|
2195
|
+
className: `size-4 shrink-0${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`,
|
|
2196
|
+
viewBox: "0 0 16 16",
|
|
2197
|
+
fill: "none",
|
|
2198
|
+
children: /* @__PURE__ */ jsx(
|
|
2199
|
+
"path",
|
|
2200
|
+
{
|
|
2201
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
2202
|
+
stroke: "currentColor",
|
|
2203
|
+
strokeWidth: "1.8",
|
|
2204
|
+
strokeLinecap: "round",
|
|
2205
|
+
strokeLinejoin: "round"
|
|
2206
|
+
}
|
|
2207
|
+
)
|
|
2208
|
+
}
|
|
2209
|
+
),
|
|
2210
|
+
/* @__PURE__ */ jsx(
|
|
2211
|
+
"span",
|
|
2212
|
+
{
|
|
2213
|
+
className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55",
|
|
2214
|
+
children: s.label
|
|
2215
|
+
}
|
|
2216
|
+
)
|
|
2217
|
+
]
|
|
2218
|
+
},
|
|
2219
|
+
s.srclang
|
|
2220
|
+
)) }),
|
|
2221
|
+
subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
|
|
2222
|
+
"button",
|
|
2223
|
+
{
|
|
2224
|
+
type: "button",
|
|
2225
|
+
onClick: () => setSettingsTab("subtitles-style"),
|
|
2226
|
+
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",
|
|
2227
|
+
children: [
|
|
2228
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
|
|
2229
|
+
/* @__PURE__ */ jsx(
|
|
2230
|
+
"svg",
|
|
2231
|
+
{
|
|
2232
|
+
className: "size-3 opacity-50",
|
|
2233
|
+
viewBox: "0 0 12 12",
|
|
2234
|
+
fill: "none",
|
|
2235
|
+
children: /* @__PURE__ */ jsx(
|
|
2236
|
+
"path",
|
|
2237
|
+
{
|
|
2238
|
+
d: "M4.5 3l3 3-3 3",
|
|
2239
|
+
stroke: "currentColor",
|
|
2240
|
+
strokeWidth: "1.5",
|
|
2241
|
+
strokeLinecap: "round",
|
|
2242
|
+
strokeLinejoin: "round"
|
|
2243
|
+
}
|
|
2244
|
+
)
|
|
2245
|
+
}
|
|
2246
|
+
)
|
|
2247
|
+
]
|
|
2248
|
+
}
|
|
2249
|
+
)
|
|
2250
|
+
] }),
|
|
2251
|
+
settingsTab === "subtitles-style" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2252
|
+
/* @__PURE__ */ jsxs(
|
|
2253
|
+
"button",
|
|
2254
|
+
{
|
|
2255
|
+
type: "button",
|
|
2256
|
+
onClick: () => setSettingsTab("subtitles"),
|
|
2257
|
+
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",
|
|
2258
|
+
children: [
|
|
2259
|
+
/* @__PURE__ */ jsx(
|
|
2260
|
+
"svg",
|
|
2261
|
+
{
|
|
2262
|
+
className: "size-3.5",
|
|
2263
|
+
viewBox: "0 0 12 12",
|
|
2264
|
+
fill: "none",
|
|
2265
|
+
children: /* @__PURE__ */ jsx(
|
|
2266
|
+
"path",
|
|
2267
|
+
{
|
|
2268
|
+
d: "M7.5 3L4.5 6l3 3",
|
|
2269
|
+
stroke: "currentColor",
|
|
2270
|
+
strokeWidth: "1.5",
|
|
2271
|
+
strokeLinecap: "round",
|
|
2272
|
+
strokeLinejoin: "round"
|
|
2273
|
+
}
|
|
2274
|
+
)
|
|
2275
|
+
}
|
|
2276
|
+
),
|
|
2277
|
+
"Apar\xEAncia"
|
|
2278
|
+
]
|
|
2279
|
+
}
|
|
2280
|
+
),
|
|
2281
|
+
/* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
|
|
2282
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2283
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
|
|
2284
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
|
|
2285
|
+
"button",
|
|
2286
|
+
{
|
|
2287
|
+
type: "button",
|
|
2288
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
|
|
2289
|
+
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"}`,
|
|
2290
|
+
children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
|
|
2291
|
+
},
|
|
2292
|
+
s
|
|
2293
|
+
)) })
|
|
2294
|
+
] }),
|
|
2295
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2296
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Cor" }),
|
|
2297
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [
|
|
2298
|
+
["white", "Branco", "#fff"],
|
|
2299
|
+
["yellow", "Amarelo", "#facc15"],
|
|
2300
|
+
["cyan", "Ciano", "#22d3ee"]
|
|
2301
|
+
].map(([val, label, color]) => /* @__PURE__ */ jsx(
|
|
2302
|
+
"button",
|
|
2303
|
+
{
|
|
2304
|
+
type: "button",
|
|
2305
|
+
onClick: () => setSubtitleStyle((st) => ({
|
|
2306
|
+
...st,
|
|
2307
|
+
color: val
|
|
2308
|
+
})),
|
|
2309
|
+
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"}`,
|
|
2310
|
+
style: { color },
|
|
2311
|
+
children: label
|
|
2312
|
+
},
|
|
2313
|
+
val
|
|
2314
|
+
)) })
|
|
2315
|
+
] }),
|
|
2316
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2317
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Fundo" }),
|
|
2318
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [
|
|
2319
|
+
["none", "Nenhum"],
|
|
2320
|
+
["semi", "Semi"],
|
|
2321
|
+
["solid", "S\xF3lido"]
|
|
2322
|
+
].map(([val, label]) => /* @__PURE__ */ jsx(
|
|
2323
|
+
"button",
|
|
2324
|
+
{
|
|
2325
|
+
type: "button",
|
|
2326
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
|
|
2327
|
+
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"}`,
|
|
2328
|
+
children: label
|
|
2329
|
+
},
|
|
2330
|
+
val
|
|
2331
|
+
)) })
|
|
2332
|
+
] })
|
|
2333
|
+
] })
|
|
2334
|
+
] }),
|
|
2335
|
+
settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2336
|
+
/* @__PURE__ */ jsxs(
|
|
2337
|
+
"button",
|
|
2338
|
+
{
|
|
2339
|
+
type: "button",
|
|
2340
|
+
onClick: () => setSettingsTab("root"),
|
|
2341
|
+
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",
|
|
2342
|
+
children: [
|
|
2343
|
+
/* @__PURE__ */ jsx(
|
|
2344
|
+
"svg",
|
|
2345
|
+
{
|
|
2346
|
+
className: "size-3.5",
|
|
2347
|
+
viewBox: "0 0 12 12",
|
|
2348
|
+
fill: "none",
|
|
2349
|
+
children: /* @__PURE__ */ jsx(
|
|
2350
|
+
"path",
|
|
2351
|
+
{
|
|
2352
|
+
d: "M7.5 3L4.5 6l3 3",
|
|
2353
|
+
stroke: "currentColor",
|
|
2354
|
+
strokeWidth: "1.5",
|
|
2355
|
+
strokeLinecap: "round",
|
|
2356
|
+
strokeLinejoin: "round"
|
|
2357
|
+
}
|
|
2358
|
+
)
|
|
2359
|
+
}
|
|
2360
|
+
),
|
|
2361
|
+
"\xC1udio"
|
|
2362
|
+
]
|
|
2363
|
+
}
|
|
2364
|
+
),
|
|
2365
|
+
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
|
|
2366
|
+
"button",
|
|
2367
|
+
{
|
|
2368
|
+
type: "button",
|
|
2369
|
+
onClick: () => {
|
|
2370
|
+
changeAudio(track.id);
|
|
2371
|
+
setSettingsTab("root");
|
|
2372
|
+
},
|
|
2373
|
+
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2374
|
+
children: [
|
|
2375
|
+
/* @__PURE__ */ jsx(
|
|
2376
|
+
"svg",
|
|
2377
|
+
{
|
|
2378
|
+
className: `size-4 shrink-0${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
|
|
2379
|
+
viewBox: "0 0 16 16",
|
|
2380
|
+
fill: "none",
|
|
2381
|
+
children: /* @__PURE__ */ jsx(
|
|
2382
|
+
"path",
|
|
2383
|
+
{
|
|
2384
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
2385
|
+
stroke: "currentColor",
|
|
2386
|
+
strokeWidth: "1.8",
|
|
2387
|
+
strokeLinecap: "round",
|
|
2388
|
+
strokeLinejoin: "round"
|
|
2389
|
+
}
|
|
2390
|
+
)
|
|
2391
|
+
}
|
|
2392
|
+
),
|
|
2393
|
+
/* @__PURE__ */ jsx(
|
|
2394
|
+
"span",
|
|
2395
|
+
{
|
|
2396
|
+
className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
|
|
2397
|
+
children: track.label
|
|
2398
|
+
}
|
|
2399
|
+
)
|
|
2400
|
+
]
|
|
2401
|
+
},
|
|
2402
|
+
track.id
|
|
2403
|
+
)) })
|
|
2404
|
+
] }),
|
|
2405
|
+
settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2406
|
+
/* @__PURE__ */ jsxs(
|
|
2407
|
+
"button",
|
|
2408
|
+
{
|
|
2409
|
+
type: "button",
|
|
2410
|
+
onClick: () => setSettingsTab("root"),
|
|
2411
|
+
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",
|
|
2412
|
+
children: [
|
|
2413
|
+
/* @__PURE__ */ jsx(
|
|
2414
|
+
"svg",
|
|
2415
|
+
{
|
|
2416
|
+
className: "size-3.5",
|
|
2417
|
+
viewBox: "0 0 12 12",
|
|
2418
|
+
fill: "none",
|
|
2419
|
+
children: /* @__PURE__ */ jsx(
|
|
2420
|
+
"path",
|
|
2421
|
+
{
|
|
2422
|
+
d: "M7.5 3L4.5 6l3 3",
|
|
2423
|
+
stroke: "currentColor",
|
|
2424
|
+
strokeWidth: "1.5",
|
|
2425
|
+
strokeLinecap: "round",
|
|
2426
|
+
strokeLinejoin: "round"
|
|
2427
|
+
}
|
|
2428
|
+
)
|
|
2429
|
+
}
|
|
2430
|
+
),
|
|
2431
|
+
"Velocidade"
|
|
2432
|
+
]
|
|
2433
|
+
}
|
|
2434
|
+
),
|
|
2435
|
+
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
|
|
2436
|
+
"button",
|
|
2437
|
+
{
|
|
2438
|
+
type: "button",
|
|
2439
|
+
onClick: () => {
|
|
2440
|
+
setPlaybackRate(speed);
|
|
2441
|
+
setSettingsOpen(false);
|
|
2442
|
+
setSettingsTab("root");
|
|
2443
|
+
},
|
|
2444
|
+
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2445
|
+
children: [
|
|
2446
|
+
/* @__PURE__ */ jsx(
|
|
2447
|
+
"svg",
|
|
2448
|
+
{
|
|
2449
|
+
className: `size-4 shrink-0${playbackRate === speed ? "text-white" : "text-transparent"}`,
|
|
2450
|
+
viewBox: "0 0 16 16",
|
|
2451
|
+
fill: "none",
|
|
2452
|
+
children: /* @__PURE__ */ jsx(
|
|
2453
|
+
"path",
|
|
2454
|
+
{
|
|
2455
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
2456
|
+
stroke: "currentColor",
|
|
2457
|
+
strokeWidth: "1.8",
|
|
2458
|
+
strokeLinecap: "round",
|
|
2459
|
+
strokeLinejoin: "round"
|
|
2460
|
+
}
|
|
2461
|
+
)
|
|
2462
|
+
}
|
|
2463
|
+
),
|
|
2464
|
+
/* @__PURE__ */ jsx(
|
|
2465
|
+
"span",
|
|
2466
|
+
{
|
|
2467
|
+
className: playbackRate === speed ? "font-semibold text-white" : "text-white/55",
|
|
2468
|
+
children: speed === 1 ? "Normal" : `${speed}\xD7`
|
|
2469
|
+
}
|
|
2470
|
+
)
|
|
2471
|
+
]
|
|
2472
|
+
},
|
|
2473
|
+
speed
|
|
2474
|
+
)) })
|
|
1971
2475
|
] })
|
|
1972
2476
|
]
|
|
1973
|
-
},
|
|
1974
|
-
quality.id
|
|
1975
|
-
)) })
|
|
1976
|
-
] }),
|
|
1977
|
-
settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
|
|
1978
|
-
/* @__PURE__ */ jsxs(
|
|
1979
|
-
"button",
|
|
1980
|
-
{
|
|
1981
|
-
type: "button",
|
|
1982
|
-
onClick: () => setSettingsTab("root"),
|
|
1983
|
-
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",
|
|
1984
|
-
children: [
|
|
1985
|
-
/* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
1986
|
-
"Legendas"
|
|
1987
|
-
]
|
|
1988
2477
|
}
|
|
1989
2478
|
),
|
|
1990
|
-
/* @__PURE__ */ jsx("
|
|
1991
|
-
"button",
|
|
1992
|
-
{
|
|
1993
|
-
type: "button",
|
|
1994
|
-
onClick: () => {
|
|
1995
|
-
const next = s.srclang === "off" ? "off" : s.srclang;
|
|
1996
|
-
setSubtitleMode(next);
|
|
1997
|
-
setSubtitleStyle((st) => ({ ...st, track: next }));
|
|
1998
|
-
},
|
|
1999
|
-
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2000
|
-
children: [
|
|
2001
|
-
/* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2002
|
-
/* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
|
|
2003
|
-
]
|
|
2004
|
-
},
|
|
2005
|
-
s.srclang
|
|
2006
|
-
)) }),
|
|
2007
|
-
subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
|
|
2008
|
-
"button",
|
|
2009
|
-
{
|
|
2010
|
-
type: "button",
|
|
2011
|
-
onClick: () => setSettingsTab("subtitles-style"),
|
|
2012
|
-
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",
|
|
2013
|
-
children: [
|
|
2014
|
-
/* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
|
|
2015
|
-
/* @__PURE__ */ jsx("svg", { className: "size-3 opacity-50", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4.5 3l3 3-3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
2016
|
-
]
|
|
2017
|
-
}
|
|
2018
|
-
)
|
|
2479
|
+
/* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
|
|
2019
2480
|
] }),
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
),
|
|
2033
|
-
/* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
|
|
2034
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
2035
|
-
/* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
|
|
2036
|
-
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
|
|
2037
|
-
"button",
|
|
2481
|
+
/* @__PURE__ */ jsxs(
|
|
2482
|
+
"div",
|
|
2483
|
+
{
|
|
2484
|
+
ref: progressRef,
|
|
2485
|
+
onPointerMove: handleProgressPointerMove,
|
|
2486
|
+
onPointerLeave: handleProgressPointerLeave,
|
|
2487
|
+
onPointerDown: handleProgressPointerDown,
|
|
2488
|
+
onPointerUp: handleProgressPointerUp,
|
|
2489
|
+
className: "group relative mb-3 h-7 cursor-pointer",
|
|
2490
|
+
children: [
|
|
2491
|
+
/* @__PURE__ */ jsxs(
|
|
2492
|
+
"div",
|
|
2038
2493
|
{
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2494
|
+
className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150",
|
|
2495
|
+
style: { height: isDragging ? "6px" : "3px" },
|
|
2496
|
+
children: [
|
|
2497
|
+
/* @__PURE__ */ jsx(
|
|
2498
|
+
"div",
|
|
2499
|
+
{
|
|
2500
|
+
className: "absolute inset-y-0 left-0 rounded-full bg-white/30",
|
|
2501
|
+
style: { width: `${bufferedPercent}%` }
|
|
2502
|
+
}
|
|
2503
|
+
),
|
|
2504
|
+
/* @__PURE__ */ jsx(
|
|
2505
|
+
"div",
|
|
2506
|
+
{
|
|
2507
|
+
className: "absolute inset-y-0 left-0 rounded-full bg-white/90",
|
|
2508
|
+
style: { width: `${progressPercent}%` }
|
|
2509
|
+
}
|
|
2510
|
+
)
|
|
2511
|
+
]
|
|
2512
|
+
}
|
|
2513
|
+
),
|
|
2514
|
+
/* @__PURE__ */ jsx(
|
|
2515
|
+
"div",
|
|
2051
2516
|
{
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
)
|
|
2060
|
-
]
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2517
|
+
className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-md transition-[width,height] duration-100 group-hover:size-4",
|
|
2518
|
+
style: {
|
|
2519
|
+
left: `${progressPercent}%`,
|
|
2520
|
+
width: isDragging ? "16px" : "10px",
|
|
2521
|
+
height: isDragging ? "16px" : "10px"
|
|
2522
|
+
}
|
|
2523
|
+
}
|
|
2524
|
+
)
|
|
2525
|
+
]
|
|
2526
|
+
}
|
|
2527
|
+
),
|
|
2528
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
2529
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 @sm:gap-2", children: [
|
|
2530
|
+
/* @__PURE__ */ jsx(
|
|
2531
|
+
"button",
|
|
2532
|
+
{
|
|
2533
|
+
type: "button",
|
|
2534
|
+
onClick: togglePlay,
|
|
2535
|
+
className: "grid size-8 place-items-center rounded-full text-white transition hover:bg-white/10 @sm:size-9",
|
|
2536
|
+
"aria-label": isPlaying ? "Pause" : "Play",
|
|
2537
|
+
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" })
|
|
2538
|
+
}
|
|
2539
|
+
),
|
|
2540
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
|
|
2541
|
+
formatTime(currentTime),
|
|
2542
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
|
|
2543
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
|
|
2544
|
+
] })
|
|
2545
|
+
] }),
|
|
2546
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
|
|
2547
|
+
/* @__PURE__ */ jsxs("div", { className: "group flex items-center", children: [
|
|
2548
|
+
/* @__PURE__ */ jsx(
|
|
2064
2549
|
"button",
|
|
2065
2550
|
{
|
|
2066
2551
|
type: "button",
|
|
2067
|
-
onClick: () =>
|
|
2068
|
-
className:
|
|
2069
|
-
|
|
2552
|
+
onClick: () => setIsMuted((value) => !value),
|
|
2553
|
+
className: "grid size-8 place-items-center text-white/70 transition hover:text-white @sm:size-9",
|
|
2554
|
+
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2555
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
|
|
2556
|
+
}
|
|
2557
|
+
),
|
|
2558
|
+
/* @__PURE__ */ jsx("div", { className: "w-0 overflow-hidden transition-all duration-200 group-hover:w-16 @md:group-hover:w-20", children: /* @__PURE__ */ jsx(
|
|
2559
|
+
"input",
|
|
2560
|
+
{
|
|
2561
|
+
type: "range",
|
|
2562
|
+
min: "0",
|
|
2563
|
+
max: "1",
|
|
2564
|
+
step: "0.01",
|
|
2565
|
+
value: isMuted ? 0 : volume,
|
|
2566
|
+
onChange: (event) => {
|
|
2567
|
+
const nextVolume = Number(event.target.value);
|
|
2568
|
+
setVolume(nextVolume);
|
|
2569
|
+
setIsMuted(nextVolume === 0);
|
|
2570
|
+
},
|
|
2571
|
+
className: "h-1 w-14 accent-white @md:w-20",
|
|
2572
|
+
"aria-label": "Audio level"
|
|
2573
|
+
}
|
|
2574
|
+
) })
|
|
2575
|
+
] }),
|
|
2576
|
+
/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
|
|
2577
|
+
parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
|
|
2578
|
+
"button",
|
|
2579
|
+
{
|
|
2580
|
+
type: "button",
|
|
2581
|
+
onClick: () => setSubtitleMode(
|
|
2582
|
+
(m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"
|
|
2583
|
+
),
|
|
2584
|
+
className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
|
|
2585
|
+
"aria-label": "Captions",
|
|
2586
|
+
children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
|
|
2587
|
+
}
|
|
2588
|
+
),
|
|
2589
|
+
/* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
|
|
2590
|
+
"button",
|
|
2591
|
+
{
|
|
2592
|
+
type: "button",
|
|
2593
|
+
onClick: () => {
|
|
2594
|
+
setSettingsOpen((v) => !v);
|
|
2595
|
+
setSettingsTab("root");
|
|
2070
2596
|
},
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
] })
|
|
2075
|
-
] }),
|
|
2076
|
-
settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2077
|
-
/* @__PURE__ */ jsxs(
|
|
2078
|
-
"button",
|
|
2079
|
-
{
|
|
2080
|
-
type: "button",
|
|
2081
|
-
onClick: () => setSettingsTab("root"),
|
|
2082
|
-
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",
|
|
2083
|
-
children: [
|
|
2084
|
-
/* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2085
|
-
"\xC1udio"
|
|
2086
|
-
]
|
|
2087
|
-
}
|
|
2088
|
-
),
|
|
2089
|
-
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
|
|
2090
|
-
"button",
|
|
2091
|
-
{
|
|
2092
|
-
type: "button",
|
|
2093
|
-
onClick: () => {
|
|
2094
|
-
changeAudio(track.id);
|
|
2095
|
-
setSettingsTab("root");
|
|
2096
|
-
},
|
|
2097
|
-
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2098
|
-
children: [
|
|
2099
|
-
/* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${selectedAudio === track.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2100
|
-
/* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
|
|
2101
|
-
]
|
|
2102
|
-
},
|
|
2103
|
-
track.id
|
|
2104
|
-
)) })
|
|
2105
|
-
] }),
|
|
2106
|
-
settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
|
|
2107
|
-
/* @__PURE__ */ jsxs(
|
|
2108
|
-
"button",
|
|
2109
|
-
{
|
|
2110
|
-
type: "button",
|
|
2111
|
-
onClick: () => setSettingsTab("root"),
|
|
2112
|
-
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",
|
|
2113
|
-
children: [
|
|
2114
|
-
/* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2115
|
-
"Velocidade"
|
|
2116
|
-
]
|
|
2117
|
-
}
|
|
2118
|
-
),
|
|
2119
|
-
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
|
|
2120
|
-
"button",
|
|
2121
|
-
{
|
|
2122
|
-
type: "button",
|
|
2123
|
-
onClick: () => {
|
|
2124
|
-
setPlaybackRate(speed);
|
|
2125
|
-
setSettingsOpen(false);
|
|
2126
|
-
setSettingsTab("root");
|
|
2127
|
-
},
|
|
2128
|
-
className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
|
|
2129
|
-
children: [
|
|
2130
|
-
/* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${playbackRate === speed ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2131
|
-
/* @__PURE__ */ jsx("span", { className: playbackRate === speed ? "font-semibold text-white" : "text-white/55", children: speed === 1 ? "Normal" : `${speed}\xD7` })
|
|
2132
|
-
]
|
|
2133
|
-
},
|
|
2134
|
-
speed
|
|
2135
|
-
)) })
|
|
2136
|
-
] })
|
|
2137
|
-
] }),
|
|
2138
|
-
/* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
|
|
2139
|
-
] }),
|
|
2140
|
-
/* @__PURE__ */ jsxs(
|
|
2141
|
-
"div",
|
|
2142
|
-
{
|
|
2143
|
-
ref: progressRef,
|
|
2144
|
-
onPointerMove: handleProgressPointerMove,
|
|
2145
|
-
onPointerLeave: handleProgressPointerLeave,
|
|
2146
|
-
onPointerDown: handleProgressPointerDown,
|
|
2147
|
-
onPointerUp: handleProgressPointerUp,
|
|
2148
|
-
className: "group relative mb-3 h-7 cursor-pointer",
|
|
2149
|
-
children: [
|
|
2150
|
-
/* @__PURE__ */ jsxs(
|
|
2151
|
-
"div",
|
|
2152
|
-
{
|
|
2153
|
-
className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150",
|
|
2154
|
-
style: { height: isDragging ? "6px" : "3px" },
|
|
2155
|
-
children: [
|
|
2156
|
-
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/30", style: { width: `${bufferedPercent}%` } }),
|
|
2157
|
-
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/90", style: { width: `${progressPercent}%` } })
|
|
2158
|
-
]
|
|
2159
|
-
}
|
|
2160
|
-
),
|
|
2161
|
-
/* @__PURE__ */ jsx(
|
|
2162
|
-
"div",
|
|
2163
|
-
{
|
|
2164
|
-
className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-md transition-[width,height] duration-100 group-hover:size-4",
|
|
2165
|
-
style: {
|
|
2166
|
-
left: `${progressPercent}%`,
|
|
2167
|
-
width: isDragging ? "16px" : "10px",
|
|
2168
|
-
height: isDragging ? "16px" : "10px"
|
|
2597
|
+
className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${settingsOpen ? "text-white" : "text-white/60"}`,
|
|
2598
|
+
"aria-label": "Settings",
|
|
2599
|
+
children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
|
|
2169
2600
|
}
|
|
2170
|
-
}
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
className: "grid size-8 place-items-center rounded-full bg-white/15 text-white backdrop-blur-sm ring-1 ring-white/15 transition hover:bg-white/25 @sm:size-9",
|
|
2183
|
-
"aria-label": isPlaying ? "Pause" : "Play",
|
|
2184
|
-
children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-5" })
|
|
2185
|
-
}
|
|
2186
|
-
),
|
|
2187
|
-
/* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
|
|
2188
|
-
formatTime(currentTime),
|
|
2189
|
-
/* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
|
|
2190
|
-
/* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
|
|
2601
|
+
) }),
|
|
2602
|
+
/* @__PURE__ */ jsx(
|
|
2603
|
+
"button",
|
|
2604
|
+
{
|
|
2605
|
+
type: "button",
|
|
2606
|
+
onClick: toggleFullscreen,
|
|
2607
|
+
className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
|
|
2608
|
+
"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
2609
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
|
|
2610
|
+
}
|
|
2611
|
+
)
|
|
2612
|
+
] })
|
|
2191
2613
|
] })
|
|
2192
|
-
]
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
/* @__PURE__ */ jsx(
|
|
2196
|
-
"button",
|
|
2197
|
-
{
|
|
2198
|
-
type: "button",
|
|
2199
|
-
onClick: () => setIsMuted((value) => !value),
|
|
2200
|
-
className: "grid size-8 place-items-center text-white/70 transition hover:text-white @sm:size-9",
|
|
2201
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2202
|
-
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
|
|
2203
|
-
}
|
|
2204
|
-
),
|
|
2205
|
-
/* @__PURE__ */ jsx("div", { className: "w-0 overflow-hidden transition-all duration-200 group-hover:w-16 @md:group-hover:w-20", children: /* @__PURE__ */ jsx(
|
|
2206
|
-
"input",
|
|
2207
|
-
{
|
|
2208
|
-
type: "range",
|
|
2209
|
-
min: "0",
|
|
2210
|
-
max: "1",
|
|
2211
|
-
step: "0.01",
|
|
2212
|
-
value: isMuted ? 0 : volume,
|
|
2213
|
-
onChange: (event) => {
|
|
2214
|
-
const nextVolume = Number(event.target.value);
|
|
2215
|
-
setVolume(nextVolume);
|
|
2216
|
-
setIsMuted(nextVolume === 0);
|
|
2217
|
-
},
|
|
2218
|
-
className: "h-1 w-14 accent-white @md:w-20",
|
|
2219
|
-
"aria-label": "Audio level"
|
|
2220
|
-
}
|
|
2221
|
-
) })
|
|
2222
|
-
] }),
|
|
2223
|
-
/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
|
|
2224
|
-
parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
|
|
2225
|
-
"button",
|
|
2226
|
-
{
|
|
2227
|
-
type: "button",
|
|
2228
|
-
onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
|
|
2229
|
-
className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
|
|
2230
|
-
"aria-label": "Captions",
|
|
2231
|
-
children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
|
|
2232
|
-
}
|
|
2233
|
-
),
|
|
2234
|
-
/* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
|
|
2235
|
-
"button",
|
|
2236
|
-
{
|
|
2237
|
-
type: "button",
|
|
2238
|
-
onClick: () => {
|
|
2239
|
-
setSettingsOpen((v) => !v);
|
|
2240
|
-
setSettingsTab("root");
|
|
2241
|
-
},
|
|
2242
|
-
className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${settingsOpen ? "text-white" : "text-white/60"}`,
|
|
2243
|
-
"aria-label": "Settings",
|
|
2244
|
-
children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
|
|
2245
|
-
}
|
|
2246
|
-
) }),
|
|
2247
|
-
/* @__PURE__ */ jsx(
|
|
2248
|
-
"button",
|
|
2249
|
-
{
|
|
2250
|
-
type: "button",
|
|
2251
|
-
onClick: toggleFullscreen,
|
|
2252
|
-
className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
|
|
2253
|
-
"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
2254
|
-
children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
|
|
2255
|
-
}
|
|
2256
|
-
)
|
|
2257
|
-
] })
|
|
2258
|
-
] })
|
|
2259
|
-
] })
|
|
2614
|
+
]
|
|
2615
|
+
}
|
|
2616
|
+
)
|
|
2260
2617
|
]
|
|
2261
2618
|
}
|
|
2262
2619
|
),
|
|
2263
2620
|
preview && (() => {
|
|
2264
2621
|
const srcW = preview.cue.w ?? 160;
|
|
2265
2622
|
const srcH = preview.cue.h ?? 90;
|
|
2266
|
-
const thumbW = Math.max(
|
|
2623
|
+
const thumbW = Math.max(
|
|
2624
|
+
140,
|
|
2625
|
+
Math.round((playerWidth || 640) * 0.13)
|
|
2626
|
+
);
|
|
2267
2627
|
const thumbH = Math.round(thumbW * (srcH / srcW));
|
|
2268
2628
|
const scale = thumbW / srcW;
|
|
2269
2629
|
const isSprite = preview.cue.x != null && preview.cue.y != null;
|
|
@@ -2271,24 +2631,48 @@ function Video({
|
|
|
2271
2631
|
"div",
|
|
2272
2632
|
{
|
|
2273
2633
|
className: "pointer-events-none absolute z-60 -translate-x-1/2 -translate-y-2 overflow-hidden rounded-xl shadow-2xl ring-1 ring-white/15",
|
|
2274
|
-
style: {
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2634
|
+
style: {
|
|
2635
|
+
bottom: controlsVisible ? "80px" : "20px",
|
|
2636
|
+
left: preview.left,
|
|
2637
|
+
transition: "bottom 0.2s"
|
|
2638
|
+
},
|
|
2639
|
+
children: isSprite ? /* @__PURE__ */ jsx(
|
|
2640
|
+
"div",
|
|
2641
|
+
{
|
|
2642
|
+
style: {
|
|
2643
|
+
width: thumbW,
|
|
2644
|
+
height: thumbH,
|
|
2645
|
+
overflow: "hidden"
|
|
2646
|
+
},
|
|
2647
|
+
children: /* @__PURE__ */ jsx(
|
|
2648
|
+
"div",
|
|
2649
|
+
{
|
|
2650
|
+
style: {
|
|
2651
|
+
width: srcW,
|
|
2652
|
+
height: srcH,
|
|
2653
|
+
backgroundImage: `url(${preview.cue.image})`,
|
|
2654
|
+
backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
|
|
2655
|
+
backgroundSize: "auto",
|
|
2656
|
+
backgroundRepeat: "no-repeat",
|
|
2657
|
+
transform: `scale(${scale})`,
|
|
2658
|
+
transformOrigin: "top left"
|
|
2659
|
+
}
|
|
2660
|
+
}
|
|
2661
|
+
)
|
|
2662
|
+
}
|
|
2663
|
+
) : /* @__PURE__ */ jsx(
|
|
2664
|
+
"div",
|
|
2665
|
+
{
|
|
2666
|
+
style: {
|
|
2667
|
+
width: thumbW,
|
|
2668
|
+
height: thumbH,
|
|
2669
|
+
backgroundImage: `url(${preview.cue.image})`,
|
|
2670
|
+
backgroundSize: "cover",
|
|
2671
|
+
backgroundPosition: "center",
|
|
2672
|
+
backgroundRepeat: "no-repeat"
|
|
2673
|
+
}
|
|
2674
|
+
}
|
|
2675
|
+
)
|
|
2292
2676
|
}
|
|
2293
2677
|
);
|
|
2294
2678
|
})(),
|
|
@@ -2362,15 +2746,22 @@ function parseVideoChildren(children) {
|
|
|
2362
2746
|
React.Children.forEach(element.props.children, (frameChild) => {
|
|
2363
2747
|
if (!React.isValidElement(frameChild)) return;
|
|
2364
2748
|
const fn2 = dn(frameChild);
|
|
2365
|
-
if (frameChild.type !== StoryboardFrame && fn2 !== "SiloStoryboardFrame")
|
|
2749
|
+
if (frameChild.type !== StoryboardFrame && fn2 !== "SiloStoryboardFrame")
|
|
2750
|
+
return;
|
|
2366
2751
|
const frameElement = frameChild;
|
|
2367
2752
|
frames.push(frameElement.props);
|
|
2368
2753
|
});
|
|
2369
2754
|
parsed.storyboard = {
|
|
2370
2755
|
...element.props.src !== void 0 && { src: element.props.src },
|
|
2371
|
-
...element.props.fallbackImage !== void 0 && {
|
|
2372
|
-
|
|
2373
|
-
|
|
2756
|
+
...element.props.fallbackImage !== void 0 && {
|
|
2757
|
+
fallbackImage: element.props.fallbackImage
|
|
2758
|
+
},
|
|
2759
|
+
...element.props.width !== void 0 && {
|
|
2760
|
+
width: element.props.width
|
|
2761
|
+
},
|
|
2762
|
+
...element.props.height !== void 0 && {
|
|
2763
|
+
height: element.props.height
|
|
2764
|
+
},
|
|
2374
2765
|
frames
|
|
2375
2766
|
};
|
|
2376
2767
|
}
|