@geekapps/silo-elements-nextjs 0.3.16 → 0.3.18
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 +165 -98
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +165 -98
- 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/VideoPlayer.js
CHANGED
|
@@ -6,8 +6,47 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
|
6
6
|
var AUTO_QUALITY = {
|
|
7
7
|
id: "auto",
|
|
8
8
|
label: "Auto",
|
|
9
|
-
type: "auto"
|
|
9
|
+
type: "auto",
|
|
10
|
+
supported: true
|
|
10
11
|
};
|
|
12
|
+
function deviceSupportsHdr() {
|
|
13
|
+
if (typeof window === "undefined") return false;
|
|
14
|
+
try {
|
|
15
|
+
return window.matchMedia("(dynamic-range: high)").matches;
|
|
16
|
+
} catch {
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
function deviceSupportsOpus() {
|
|
21
|
+
if (typeof window === "undefined") return false;
|
|
22
|
+
try {
|
|
23
|
+
if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
|
|
24
|
+
if (MediaSource.isTypeSupported('audio/mp4; codecs="opus"')) return true;
|
|
25
|
+
}
|
|
26
|
+
const a = document.createElement("audio");
|
|
27
|
+
return a.canPlayType('audio/ogg; codecs="opus"') !== "" || a.canPlayType('video/mp4; codecs="opus"') !== "";
|
|
28
|
+
} catch {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
function deviceSupportsCodec(codecStr) {
|
|
33
|
+
if (typeof window === "undefined") return true;
|
|
34
|
+
try {
|
|
35
|
+
if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
|
|
36
|
+
return MediaSource.isTypeSupported(`video/mp4; codecs="${codecStr}"`);
|
|
37
|
+
}
|
|
38
|
+
return true;
|
|
39
|
+
} catch {
|
|
40
|
+
return true;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
function isHdrLevel(level) {
|
|
44
|
+
const range = level?.videoRange ?? level?.video_range ?? "";
|
|
45
|
+
return range === "PQ" || range === "HLG" || range === "HDR10" || typeof level?.name === "string" && /hdr/i.test(level.name);
|
|
46
|
+
}
|
|
47
|
+
function isHdrAudioCodec(codecStr) {
|
|
48
|
+
return /opus/i.test(codecStr);
|
|
49
|
+
}
|
|
11
50
|
var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
|
|
12
51
|
function Source(_props) {
|
|
13
52
|
return null;
|
|
@@ -762,12 +801,14 @@ function Video({
|
|
|
762
801
|
if (Hls.isSupported()) {
|
|
763
802
|
const hls = new Hls({
|
|
764
803
|
enableWorker: true,
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
804
|
+
// Buffer ~20s ahead (≈1/6 of a 2min video). maxMaxBufferLength caps the
|
|
805
|
+
// absolute ceiling so HLS.js doesn't buffer the entire file on fast connections.
|
|
806
|
+
maxBufferLength: 20,
|
|
807
|
+
maxMaxBufferLength: 30,
|
|
808
|
+
maxBufferSize: 40 * 1e3 * 1e3,
|
|
809
|
+
// Keep only 10s of back-buffer for seeking — avoids holding GB of 4K data
|
|
810
|
+
backBufferLength: 10,
|
|
769
811
|
maxBufferHole: 0.5,
|
|
770
|
-
// Be patient with large 4K/HDR fragments before declaring a stall
|
|
771
812
|
highBufferWatchdogPeriod: 5,
|
|
772
813
|
nudgeOffset: 0.2,
|
|
773
814
|
nudgeMaxRetry: 3,
|
|
@@ -785,23 +826,28 @@ function Video({
|
|
|
785
826
|
hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
|
|
786
827
|
const levels = data.levels ?? hls.levels ?? [];
|
|
787
828
|
console.debug("[Silo/hls] MANIFEST_PARSED levels=", levels.length, "audioTracks=", hls.audioTracks?.length ?? 0);
|
|
829
|
+
const hdrSupported = deviceSupportsHdr();
|
|
830
|
+
const opusSupported = deviceSupportsOpus();
|
|
788
831
|
setQualities([
|
|
789
832
|
AUTO_QUALITY,
|
|
790
|
-
...levels.map((level, index) =>
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
index
|
|
795
|
-
|
|
833
|
+
...levels.map((level, index) => {
|
|
834
|
+
const hdr = isHdrLevel(level);
|
|
835
|
+
const codecStr = level.videoCodec ?? level.attrs?.CODECS ?? "";
|
|
836
|
+
const supported = hdr ? hdrSupported : deviceSupportsCodec(codecStr);
|
|
837
|
+
const baseName = level.name ?? (level.height ? `${level.height}p` : `${index + 1}`);
|
|
838
|
+
const label = hdr ? `${baseName} HDR` : baseName;
|
|
839
|
+
return { id: `hls-${index}`, label, type: "hls", index, supported, hdr };
|
|
840
|
+
})
|
|
796
841
|
]);
|
|
797
842
|
const tracks = hls.audioTracks ?? [];
|
|
798
843
|
console.debug("[Silo/hls] audio tracks:", tracks.map((t) => ({ name: t.name, lang: t.lang, url: t.url })));
|
|
799
844
|
if (tracks.length > 1) {
|
|
800
845
|
setAudioTracks(
|
|
801
|
-
tracks.map((t, i) =>
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
846
|
+
tracks.map((t, i) => {
|
|
847
|
+
const codec = t.attrs?.CODECS ?? t.codecSet ?? "";
|
|
848
|
+
const supported = isHdrAudioCodec(codec) ? opusSupported : true;
|
|
849
|
+
return { id: i, label: t.name ?? t.lang ?? `Track ${i + 1}`, supported };
|
|
850
|
+
})
|
|
805
851
|
);
|
|
806
852
|
if (pinnedAudio === -1) setSelectedAudio(hls.audioTrack ?? 0);
|
|
807
853
|
}
|
|
@@ -812,12 +858,14 @@ function Video({
|
|
|
812
858
|
hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
|
|
813
859
|
const tracks = data.audioTracks ?? [];
|
|
814
860
|
console.debug("[Silo/hls] AUDIO_TRACKS_UPDATED", tracks.length);
|
|
861
|
+
const opusSupported = deviceSupportsOpus();
|
|
815
862
|
if (tracks.length > 1) {
|
|
816
863
|
setAudioTracks(
|
|
817
|
-
tracks.map((t, i) =>
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
864
|
+
tracks.map((t, i) => {
|
|
865
|
+
const codec = t.attrs?.CODECS ?? t.codecSet ?? "";
|
|
866
|
+
const supported = isHdrAudioCodec(codec) ? opusSupported : true;
|
|
867
|
+
return { id: i, label: t.name ?? t.lang ?? `Track ${i + 1}`, supported };
|
|
868
|
+
})
|
|
821
869
|
);
|
|
822
870
|
}
|
|
823
871
|
if (pinnedAudio >= 0 && hls.audioTrack !== pinnedAudio) {
|
|
@@ -826,6 +874,9 @@ function Video({
|
|
|
826
874
|
});
|
|
827
875
|
hls.on(Hls.Events.LEVEL_SWITCHED, (_, data) => {
|
|
828
876
|
console.debug("[Silo/hls] LEVEL_SWITCHED", data.level);
|
|
877
|
+
if (pinnedLevel >= 0 && data.level === pinnedLevel) {
|
|
878
|
+
hls.currentLevel = pinnedLevel;
|
|
879
|
+
}
|
|
829
880
|
if (pinnedAudio >= 0 && hls.audioTrack !== pinnedAudio) {
|
|
830
881
|
hls.audioTrack = pinnedAudio;
|
|
831
882
|
}
|
|
@@ -1056,7 +1107,7 @@ function Video({
|
|
|
1056
1107
|
}
|
|
1057
1108
|
if (option.type === "hls" && hlsRef.current && option.index != null) {
|
|
1058
1109
|
hlsRef.current.__pinLevel?.(option.index);
|
|
1059
|
-
hlsRef.current.
|
|
1110
|
+
hlsRef.current.nextLevel = option.index;
|
|
1060
1111
|
return;
|
|
1061
1112
|
}
|
|
1062
1113
|
if (option.type === "dash" && dashRef.current && option.index != null) {
|
|
@@ -1508,48 +1559,56 @@ function Video({
|
|
|
1508
1559
|
]
|
|
1509
1560
|
}
|
|
1510
1561
|
),
|
|
1511
|
-
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) =>
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
"
|
|
1562
|
+
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => {
|
|
1563
|
+
const unavailable = quality.supported === false;
|
|
1564
|
+
return /* @__PURE__ */ jsxs(
|
|
1565
|
+
"button",
|
|
1566
|
+
{
|
|
1567
|
+
type: "button",
|
|
1568
|
+
onClick: () => {
|
|
1569
|
+
if (unavailable) return;
|
|
1570
|
+
changeQuality(quality.id);
|
|
1571
|
+
setSettingsTab("root");
|
|
1572
|
+
},
|
|
1573
|
+
disabled: unavailable,
|
|
1574
|
+
className: `flex w-full items-center gap-3 px-4 py-2.5 text-sm transition ${unavailable ? "cursor-not-allowed opacity-40" : "hover:bg-white/8"}`,
|
|
1575
|
+
children: [
|
|
1576
|
+
/* @__PURE__ */ jsx(
|
|
1577
|
+
"svg",
|
|
1578
|
+
{
|
|
1579
|
+
className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
|
|
1580
|
+
viewBox: "0 0 16 16",
|
|
1581
|
+
fill: "none",
|
|
1582
|
+
children: /* @__PURE__ */ jsx(
|
|
1583
|
+
"path",
|
|
1584
|
+
{
|
|
1585
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
1586
|
+
stroke: "currentColor",
|
|
1587
|
+
strokeWidth: "1.8",
|
|
1588
|
+
strokeLinecap: "round",
|
|
1589
|
+
strokeLinejoin: "round"
|
|
1590
|
+
}
|
|
1591
|
+
)
|
|
1592
|
+
}
|
|
1593
|
+
),
|
|
1594
|
+
/* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
|
|
1595
|
+
/* @__PURE__ */ jsxs(
|
|
1596
|
+
"span",
|
|
1529
1597
|
{
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1598
|
+
className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
|
|
1599
|
+
children: [
|
|
1600
|
+
quality.label,
|
|
1601
|
+
quality.id === "auto" ? " (ABR)" : ""
|
|
1602
|
+
]
|
|
1535
1603
|
}
|
|
1536
|
-
)
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
quality.label,
|
|
1545
|
-
quality.id === "auto" ? " (ABR)" : ""
|
|
1546
|
-
]
|
|
1547
|
-
}
|
|
1548
|
-
)
|
|
1549
|
-
]
|
|
1550
|
-
},
|
|
1551
|
-
quality.id
|
|
1552
|
-
)) })
|
|
1604
|
+
),
|
|
1605
|
+
unavailable && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-white/30", children: "N\xE3o dispon\xEDvel" })
|
|
1606
|
+
] })
|
|
1607
|
+
]
|
|
1608
|
+
},
|
|
1609
|
+
quality.id
|
|
1610
|
+
);
|
|
1611
|
+
}) })
|
|
1553
1612
|
] }),
|
|
1554
1613
|
settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
|
|
1555
1614
|
/* @__PURE__ */ jsxs(
|
|
@@ -1771,45 +1830,53 @@ function Video({
|
|
|
1771
1830
|
]
|
|
1772
1831
|
}
|
|
1773
1832
|
),
|
|
1774
|
-
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) =>
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
"
|
|
1833
|
+
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => {
|
|
1834
|
+
const unavailable = track.supported === false;
|
|
1835
|
+
return /* @__PURE__ */ jsxs(
|
|
1836
|
+
"button",
|
|
1837
|
+
{
|
|
1838
|
+
type: "button",
|
|
1839
|
+
onClick: () => {
|
|
1840
|
+
if (unavailable) return;
|
|
1841
|
+
changeAudio(track.id);
|
|
1842
|
+
setSettingsTab("root");
|
|
1843
|
+
},
|
|
1844
|
+
disabled: unavailable,
|
|
1845
|
+
className: `flex w-full items-center gap-3 px-4 py-2.5 text-sm transition ${unavailable ? "cursor-not-allowed opacity-40" : "hover:bg-white/8"}`,
|
|
1846
|
+
children: [
|
|
1847
|
+
/* @__PURE__ */ jsx(
|
|
1848
|
+
"svg",
|
|
1849
|
+
{
|
|
1850
|
+
className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
|
|
1851
|
+
viewBox: "0 0 16 16",
|
|
1852
|
+
fill: "none",
|
|
1853
|
+
children: /* @__PURE__ */ jsx(
|
|
1854
|
+
"path",
|
|
1855
|
+
{
|
|
1856
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
1857
|
+
stroke: "currentColor",
|
|
1858
|
+
strokeWidth: "1.8",
|
|
1859
|
+
strokeLinecap: "round",
|
|
1860
|
+
strokeLinejoin: "round"
|
|
1861
|
+
}
|
|
1862
|
+
)
|
|
1863
|
+
}
|
|
1864
|
+
),
|
|
1865
|
+
/* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
|
|
1866
|
+
/* @__PURE__ */ jsx(
|
|
1867
|
+
"span",
|
|
1792
1868
|
{
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
strokeWidth: "1.8",
|
|
1796
|
-
strokeLinecap: "round",
|
|
1797
|
-
strokeLinejoin: "round"
|
|
1869
|
+
className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
|
|
1870
|
+
children: track.label
|
|
1798
1871
|
}
|
|
1799
|
-
)
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
}
|
|
1808
|
-
)
|
|
1809
|
-
]
|
|
1810
|
-
},
|
|
1811
|
-
track.id
|
|
1812
|
-
)) })
|
|
1872
|
+
),
|
|
1873
|
+
unavailable && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-white/30", children: "N\xE3o dispon\xEDvel" })
|
|
1874
|
+
] })
|
|
1875
|
+
]
|
|
1876
|
+
},
|
|
1877
|
+
track.id
|
|
1878
|
+
);
|
|
1879
|
+
}) })
|
|
1813
1880
|
] }),
|
|
1814
1881
|
settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
|
|
1815
1882
|
/* @__PURE__ */ jsxs(
|