@geekapps/silo-elements-nextjs 0.3.17 → 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 +154 -92
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +154 -92
- 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;
|
|
@@ -787,23 +826,28 @@ function Video({
|
|
|
787
826
|
hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
|
|
788
827
|
const levels = data.levels ?? hls.levels ?? [];
|
|
789
828
|
console.debug("[Silo/hls] MANIFEST_PARSED levels=", levels.length, "audioTracks=", hls.audioTracks?.length ?? 0);
|
|
829
|
+
const hdrSupported = deviceSupportsHdr();
|
|
830
|
+
const opusSupported = deviceSupportsOpus();
|
|
790
831
|
setQualities([
|
|
791
832
|
AUTO_QUALITY,
|
|
792
|
-
...levels.map((level, index) =>
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
index
|
|
797
|
-
|
|
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
|
+
})
|
|
798
841
|
]);
|
|
799
842
|
const tracks = hls.audioTracks ?? [];
|
|
800
843
|
console.debug("[Silo/hls] audio tracks:", tracks.map((t) => ({ name: t.name, lang: t.lang, url: t.url })));
|
|
801
844
|
if (tracks.length > 1) {
|
|
802
845
|
setAudioTracks(
|
|
803
|
-
tracks.map((t, i) =>
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
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
|
+
})
|
|
807
851
|
);
|
|
808
852
|
if (pinnedAudio === -1) setSelectedAudio(hls.audioTrack ?? 0);
|
|
809
853
|
}
|
|
@@ -814,12 +858,14 @@ function Video({
|
|
|
814
858
|
hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
|
|
815
859
|
const tracks = data.audioTracks ?? [];
|
|
816
860
|
console.debug("[Silo/hls] AUDIO_TRACKS_UPDATED", tracks.length);
|
|
861
|
+
const opusSupported = deviceSupportsOpus();
|
|
817
862
|
if (tracks.length > 1) {
|
|
818
863
|
setAudioTracks(
|
|
819
|
-
tracks.map((t, i) =>
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
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
|
+
})
|
|
823
869
|
);
|
|
824
870
|
}
|
|
825
871
|
if (pinnedAudio >= 0 && hls.audioTrack !== pinnedAudio) {
|
|
@@ -1513,48 +1559,56 @@ function Video({
|
|
|
1513
1559
|
]
|
|
1514
1560
|
}
|
|
1515
1561
|
),
|
|
1516
|
-
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) =>
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
"
|
|
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",
|
|
1534
1597
|
{
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1598
|
+
className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
|
|
1599
|
+
children: [
|
|
1600
|
+
quality.label,
|
|
1601
|
+
quality.id === "auto" ? " (ABR)" : ""
|
|
1602
|
+
]
|
|
1540
1603
|
}
|
|
1541
|
-
)
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
quality.label,
|
|
1550
|
-
quality.id === "auto" ? " (ABR)" : ""
|
|
1551
|
-
]
|
|
1552
|
-
}
|
|
1553
|
-
)
|
|
1554
|
-
]
|
|
1555
|
-
},
|
|
1556
|
-
quality.id
|
|
1557
|
-
)) })
|
|
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
|
+
}) })
|
|
1558
1612
|
] }),
|
|
1559
1613
|
settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
|
|
1560
1614
|
/* @__PURE__ */ jsxs(
|
|
@@ -1776,45 +1830,53 @@ function Video({
|
|
|
1776
1830
|
]
|
|
1777
1831
|
}
|
|
1778
1832
|
),
|
|
1779
|
-
/* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) =>
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
"
|
|
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",
|
|
1797
1868
|
{
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
strokeWidth: "1.8",
|
|
1801
|
-
strokeLinecap: "round",
|
|
1802
|
-
strokeLinejoin: "round"
|
|
1869
|
+
className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
|
|
1870
|
+
children: track.label
|
|
1803
1871
|
}
|
|
1804
|
-
)
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
}
|
|
1813
|
-
)
|
|
1814
|
-
]
|
|
1815
|
-
},
|
|
1816
|
-
track.id
|
|
1817
|
-
)) })
|
|
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
|
+
}) })
|
|
1818
1880
|
] }),
|
|
1819
1881
|
settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
|
|
1820
1882
|
/* @__PURE__ */ jsxs(
|