@geekapps/silo-elements-nextjs 0.3.17 → 0.3.19

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 (7) hide show
  1. package/dist/VideoPlayer.js +169 -92
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +169 -92
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
  7. package/styles.css +1 -1
package/dist/VideoPlayer.js CHANGED
@@ -6,8 +6,59 @@ 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 deviceSupportsVideoCodec(codec) {
33
+ if (!codec || typeof window === "undefined") return true;
34
+ if (/^avc1/i.test(codec)) return true;
35
+ try {
36
+ if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
37
+ return MediaSource.isTypeSupported(`video/mp4; codecs="${codec}"`);
38
+ }
39
+ return true;
40
+ } catch {
41
+ return true;
42
+ }
43
+ }
44
+ function deviceSupportsAudioCodec(codec) {
45
+ if (!codec || typeof window === "undefined") return true;
46
+ if (/^mp4a/i.test(codec)) return true;
47
+ if (/^opus/i.test(codec)) return deviceSupportsOpus();
48
+ try {
49
+ if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
50
+ return MediaSource.isTypeSupported(`audio/mp4; codecs="${codec}"`);
51
+ }
52
+ const a = document.createElement("audio");
53
+ return a.canPlayType(`audio/mp4; codecs="${codec}"`) !== "";
54
+ } catch {
55
+ return true;
56
+ }
57
+ }
58
+ function isHdrLevel(level) {
59
+ const range = level?.videoRange ?? level?.video_range ?? "";
60
+ return range === "PQ" || range === "HLG" || range === "HDR10" || typeof level?.name === "string" && /hdr/i.test(level.name);
61
+ }
11
62
  var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
12
63
  function Source(_props) {
13
64
  return null;
@@ -787,23 +838,32 @@ function Video({
787
838
  hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
788
839
  const levels = data.levels ?? hls.levels ?? [];
789
840
  console.debug("[Silo/hls] MANIFEST_PARSED levels=", levels.length, "audioTracks=", hls.audioTracks?.length ?? 0);
841
+ const hdrSupported = deviceSupportsHdr();
842
+ const opusSupported = deviceSupportsOpus();
790
843
  setQualities([
791
844
  AUTO_QUALITY,
792
- ...levels.map((level, index) => ({
793
- id: `hls-${index}`,
794
- label: level.name ?? (level.height ? `${level.height}p` : `${index + 1}`),
795
- type: "hls",
796
- index
797
- }))
845
+ ...levels.map((level, index) => {
846
+ const hdr = isHdrLevel(level);
847
+ const rawCodecs = (level.attrs?.CODECS ?? "").split(",").map((c) => c.trim());
848
+ const videoCodec = level.videoCodec ?? rawCodecs.find((c) => /^avc1|^hvc1|^hev1|^av01|^vp09/i.test(c)) ?? rawCodecs[0] ?? "";
849
+ const audioCodec = level.audioCodec ?? rawCodecs.find((c) => /^mp4a|^opus|^ec-3|^ac-3/i.test(c)) ?? "";
850
+ const videoOk = deviceSupportsVideoCodec(videoCodec);
851
+ const audioOk = deviceSupportsAudioCodec(audioCodec);
852
+ const supported = (hdr ? hdrSupported : true) && videoOk && audioOk;
853
+ const baseName = level.name ?? (level.height ? `${level.height}p` : `${index + 1}`);
854
+ const label = hdr && hdrSupported ? `${baseName} HDR` : baseName;
855
+ return { id: `hls-${index}`, label, type: "hls", index, supported, hdr };
856
+ })
798
857
  ]);
799
858
  const tracks = hls.audioTracks ?? [];
800
859
  console.debug("[Silo/hls] audio tracks:", tracks.map((t) => ({ name: t.name, lang: t.lang, url: t.url })));
801
860
  if (tracks.length > 1) {
802
861
  setAudioTracks(
803
- tracks.map((t, i) => ({
804
- id: i,
805
- label: t.name ?? t.lang ?? `Track ${i + 1}`
806
- }))
862
+ tracks.map((t, i) => {
863
+ const codec = (t.attrs?.CODECS ?? t.codecSet ?? "").split(",")[0]?.trim() ?? "";
864
+ const supported = deviceSupportsAudioCodec(codec);
865
+ return { id: i, label: t.name ?? t.lang ?? `Track ${i + 1}`, supported };
866
+ })
807
867
  );
808
868
  if (pinnedAudio === -1) setSelectedAudio(hls.audioTrack ?? 0);
809
869
  }
@@ -816,10 +876,11 @@ function Video({
816
876
  console.debug("[Silo/hls] AUDIO_TRACKS_UPDATED", tracks.length);
817
877
  if (tracks.length > 1) {
818
878
  setAudioTracks(
819
- tracks.map((t, i) => ({
820
- id: i,
821
- label: t.name ?? t.lang ?? `Track ${i + 1}`
822
- }))
879
+ tracks.map((t, i) => {
880
+ const codec = (t.attrs?.CODECS ?? t.codecSet ?? "").split(",")[0]?.trim() ?? "";
881
+ const supported = deviceSupportsAudioCodec(codec);
882
+ return { id: i, label: t.name ?? t.lang ?? `Track ${i + 1}`, supported };
883
+ })
823
884
  );
824
885
  }
825
886
  if (pinnedAudio >= 0 && hls.audioTrack !== pinnedAudio) {
@@ -1513,48 +1574,56 @@ function Video({
1513
1574
  ]
1514
1575
  }
1515
1576
  ),
1516
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
1517
- "button",
1518
- {
1519
- type: "button",
1520
- onClick: () => {
1521
- changeQuality(quality.id);
1522
- setSettingsTab("root");
1523
- },
1524
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
1525
- children: [
1526
- /* @__PURE__ */ jsx(
1527
- "svg",
1528
- {
1529
- className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
1530
- viewBox: "0 0 16 16",
1531
- fill: "none",
1532
- children: /* @__PURE__ */ jsx(
1533
- "path",
1577
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => {
1578
+ const unavailable = quality.supported === false;
1579
+ return /* @__PURE__ */ jsxs(
1580
+ "button",
1581
+ {
1582
+ type: "button",
1583
+ onClick: () => {
1584
+ if (unavailable) return;
1585
+ changeQuality(quality.id);
1586
+ setSettingsTab("root");
1587
+ },
1588
+ disabled: unavailable,
1589
+ 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"}`,
1590
+ children: [
1591
+ /* @__PURE__ */ jsx(
1592
+ "svg",
1593
+ {
1594
+ className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
1595
+ viewBox: "0 0 16 16",
1596
+ fill: "none",
1597
+ children: /* @__PURE__ */ jsx(
1598
+ "path",
1599
+ {
1600
+ d: "M3 8l3.5 3.5L13 4.5",
1601
+ stroke: "currentColor",
1602
+ strokeWidth: "1.8",
1603
+ strokeLinecap: "round",
1604
+ strokeLinejoin: "round"
1605
+ }
1606
+ )
1607
+ }
1608
+ ),
1609
+ /* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
1610
+ /* @__PURE__ */ jsxs(
1611
+ "span",
1534
1612
  {
1535
- d: "M3 8l3.5 3.5L13 4.5",
1536
- stroke: "currentColor",
1537
- strokeWidth: "1.8",
1538
- strokeLinecap: "round",
1539
- strokeLinejoin: "round"
1613
+ className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
1614
+ children: [
1615
+ quality.label,
1616
+ quality.id === "auto" ? " (ABR)" : ""
1617
+ ]
1540
1618
  }
1541
- )
1542
- }
1543
- ),
1544
- /* @__PURE__ */ jsxs(
1545
- "span",
1546
- {
1547
- className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
1548
- children: [
1549
- quality.label,
1550
- quality.id === "auto" ? " (ABR)" : ""
1551
- ]
1552
- }
1553
- )
1554
- ]
1555
- },
1556
- quality.id
1557
- )) })
1619
+ ),
1620
+ unavailable && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-white/30", children: "N\xE3o dispon\xEDvel" })
1621
+ ] })
1622
+ ]
1623
+ },
1624
+ quality.id
1625
+ );
1626
+ }) })
1558
1627
  ] }),
1559
1628
  settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
1560
1629
  /* @__PURE__ */ jsxs(
@@ -1776,45 +1845,53 @@ function Video({
1776
1845
  ]
1777
1846
  }
1778
1847
  ),
1779
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
1780
- "button",
1781
- {
1782
- type: "button",
1783
- onClick: () => {
1784
- changeAudio(track.id);
1785
- setSettingsTab("root");
1786
- },
1787
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
1788
- children: [
1789
- /* @__PURE__ */ jsx(
1790
- "svg",
1791
- {
1792
- className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
1793
- viewBox: "0 0 16 16",
1794
- fill: "none",
1795
- children: /* @__PURE__ */ jsx(
1796
- "path",
1848
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => {
1849
+ const unavailable = track.supported === false;
1850
+ return /* @__PURE__ */ jsxs(
1851
+ "button",
1852
+ {
1853
+ type: "button",
1854
+ onClick: () => {
1855
+ if (unavailable) return;
1856
+ changeAudio(track.id);
1857
+ setSettingsTab("root");
1858
+ },
1859
+ disabled: unavailable,
1860
+ 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"}`,
1861
+ children: [
1862
+ /* @__PURE__ */ jsx(
1863
+ "svg",
1864
+ {
1865
+ className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
1866
+ viewBox: "0 0 16 16",
1867
+ fill: "none",
1868
+ children: /* @__PURE__ */ jsx(
1869
+ "path",
1870
+ {
1871
+ d: "M3 8l3.5 3.5L13 4.5",
1872
+ stroke: "currentColor",
1873
+ strokeWidth: "1.8",
1874
+ strokeLinecap: "round",
1875
+ strokeLinejoin: "round"
1876
+ }
1877
+ )
1878
+ }
1879
+ ),
1880
+ /* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
1881
+ /* @__PURE__ */ jsx(
1882
+ "span",
1797
1883
  {
1798
- d: "M3 8l3.5 3.5L13 4.5",
1799
- stroke: "currentColor",
1800
- strokeWidth: "1.8",
1801
- strokeLinecap: "round",
1802
- strokeLinejoin: "round"
1884
+ className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
1885
+ children: track.label
1803
1886
  }
1804
- )
1805
- }
1806
- ),
1807
- /* @__PURE__ */ jsx(
1808
- "span",
1809
- {
1810
- className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
1811
- children: track.label
1812
- }
1813
- )
1814
- ]
1815
- },
1816
- track.id
1817
- )) })
1887
+ ),
1888
+ unavailable && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-white/30", children: "N\xE3o dispon\xEDvel" })
1889
+ ] })
1890
+ ]
1891
+ },
1892
+ track.id
1893
+ );
1894
+ }) })
1818
1895
  ] }),
1819
1896
  settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
1820
1897
  /* @__PURE__ */ jsxs(