@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/index.js CHANGED
@@ -1536,8 +1536,59 @@ function MediaUploader({
1536
1536
  var AUTO_QUALITY = {
1537
1537
  id: "auto",
1538
1538
  label: "Auto",
1539
- type: "auto"
1539
+ type: "auto",
1540
+ supported: true
1540
1541
  };
1542
+ function deviceSupportsHdr() {
1543
+ if (typeof window === "undefined") return false;
1544
+ try {
1545
+ return window.matchMedia("(dynamic-range: high)").matches;
1546
+ } catch {
1547
+ return false;
1548
+ }
1549
+ }
1550
+ function deviceSupportsOpus() {
1551
+ if (typeof window === "undefined") return false;
1552
+ try {
1553
+ if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
1554
+ if (MediaSource.isTypeSupported('audio/mp4; codecs="opus"')) return true;
1555
+ }
1556
+ const a = document.createElement("audio");
1557
+ return a.canPlayType('audio/ogg; codecs="opus"') !== "" || a.canPlayType('video/mp4; codecs="opus"') !== "";
1558
+ } catch {
1559
+ return false;
1560
+ }
1561
+ }
1562
+ function deviceSupportsVideoCodec(codec) {
1563
+ if (!codec || typeof window === "undefined") return true;
1564
+ if (/^avc1/i.test(codec)) return true;
1565
+ try {
1566
+ if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
1567
+ return MediaSource.isTypeSupported(`video/mp4; codecs="${codec}"`);
1568
+ }
1569
+ return true;
1570
+ } catch {
1571
+ return true;
1572
+ }
1573
+ }
1574
+ function deviceSupportsAudioCodec(codec) {
1575
+ if (!codec || typeof window === "undefined") return true;
1576
+ if (/^mp4a/i.test(codec)) return true;
1577
+ if (/^opus/i.test(codec)) return deviceSupportsOpus();
1578
+ try {
1579
+ if (typeof MediaSource !== "undefined" && MediaSource.isTypeSupported) {
1580
+ return MediaSource.isTypeSupported(`audio/mp4; codecs="${codec}"`);
1581
+ }
1582
+ const a = document.createElement("audio");
1583
+ return a.canPlayType(`audio/mp4; codecs="${codec}"`) !== "";
1584
+ } catch {
1585
+ return true;
1586
+ }
1587
+ }
1588
+ function isHdrLevel(level) {
1589
+ const range = level?.videoRange ?? level?.video_range ?? "";
1590
+ return range === "PQ" || range === "HLG" || range === "HDR10" || typeof level?.name === "string" && /hdr/i.test(level.name);
1591
+ }
1541
1592
  var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
1542
1593
  function Source(_props) {
1543
1594
  return null;
@@ -2317,23 +2368,32 @@ function Video({
2317
2368
  hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
2318
2369
  const levels = data.levels ?? hls.levels ?? [];
2319
2370
  console.debug("[Silo/hls] MANIFEST_PARSED levels=", levels.length, "audioTracks=", hls.audioTracks?.length ?? 0);
2371
+ const hdrSupported = deviceSupportsHdr();
2372
+ const opusSupported = deviceSupportsOpus();
2320
2373
  setQualities([
2321
2374
  AUTO_QUALITY,
2322
- ...levels.map((level, index) => ({
2323
- id: `hls-${index}`,
2324
- label: level.name ?? (level.height ? `${level.height}p` : `${index + 1}`),
2325
- type: "hls",
2326
- index
2327
- }))
2375
+ ...levels.map((level, index) => {
2376
+ const hdr = isHdrLevel(level);
2377
+ const rawCodecs = (level.attrs?.CODECS ?? "").split(",").map((c) => c.trim());
2378
+ const videoCodec = level.videoCodec ?? rawCodecs.find((c) => /^avc1|^hvc1|^hev1|^av01|^vp09/i.test(c)) ?? rawCodecs[0] ?? "";
2379
+ const audioCodec = level.audioCodec ?? rawCodecs.find((c) => /^mp4a|^opus|^ec-3|^ac-3/i.test(c)) ?? "";
2380
+ const videoOk = deviceSupportsVideoCodec(videoCodec);
2381
+ const audioOk = deviceSupportsAudioCodec(audioCodec);
2382
+ const supported = (hdr ? hdrSupported : true) && videoOk && audioOk;
2383
+ const baseName = level.name ?? (level.height ? `${level.height}p` : `${index + 1}`);
2384
+ const label = hdr && hdrSupported ? `${baseName} HDR` : baseName;
2385
+ return { id: `hls-${index}`, label, type: "hls", index, supported, hdr };
2386
+ })
2328
2387
  ]);
2329
2388
  const tracks = hls.audioTracks ?? [];
2330
2389
  console.debug("[Silo/hls] audio tracks:", tracks.map((t) => ({ name: t.name, lang: t.lang, url: t.url })));
2331
2390
  if (tracks.length > 1) {
2332
2391
  setAudioTracks(
2333
- tracks.map((t, i) => ({
2334
- id: i,
2335
- label: t.name ?? t.lang ?? `Track ${i + 1}`
2336
- }))
2392
+ tracks.map((t, i) => {
2393
+ const codec = (t.attrs?.CODECS ?? t.codecSet ?? "").split(",")[0]?.trim() ?? "";
2394
+ const supported = deviceSupportsAudioCodec(codec);
2395
+ return { id: i, label: t.name ?? t.lang ?? `Track ${i + 1}`, supported };
2396
+ })
2337
2397
  );
2338
2398
  if (pinnedAudio === -1) setSelectedAudio(hls.audioTrack ?? 0);
2339
2399
  }
@@ -2346,10 +2406,11 @@ function Video({
2346
2406
  console.debug("[Silo/hls] AUDIO_TRACKS_UPDATED", tracks.length);
2347
2407
  if (tracks.length > 1) {
2348
2408
  setAudioTracks(
2349
- tracks.map((t, i) => ({
2350
- id: i,
2351
- label: t.name ?? t.lang ?? `Track ${i + 1}`
2352
- }))
2409
+ tracks.map((t, i) => {
2410
+ const codec = (t.attrs?.CODECS ?? t.codecSet ?? "").split(",")[0]?.trim() ?? "";
2411
+ const supported = deviceSupportsAudioCodec(codec);
2412
+ return { id: i, label: t.name ?? t.lang ?? `Track ${i + 1}`, supported };
2413
+ })
2353
2414
  );
2354
2415
  }
2355
2416
  if (pinnedAudio >= 0 && hls.audioTrack !== pinnedAudio) {
@@ -3043,48 +3104,56 @@ function Video({
3043
3104
  ]
3044
3105
  }
3045
3106
  ),
3046
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
3047
- "button",
3048
- {
3049
- type: "button",
3050
- onClick: () => {
3051
- changeQuality(quality.id);
3052
- setSettingsTab("root");
3053
- },
3054
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
3055
- children: [
3056
- /* @__PURE__ */ jsx(
3057
- "svg",
3058
- {
3059
- className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
3060
- viewBox: "0 0 16 16",
3061
- fill: "none",
3062
- children: /* @__PURE__ */ jsx(
3063
- "path",
3107
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => {
3108
+ const unavailable = quality.supported === false;
3109
+ return /* @__PURE__ */ jsxs(
3110
+ "button",
3111
+ {
3112
+ type: "button",
3113
+ onClick: () => {
3114
+ if (unavailable) return;
3115
+ changeQuality(quality.id);
3116
+ setSettingsTab("root");
3117
+ },
3118
+ disabled: unavailable,
3119
+ 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"}`,
3120
+ children: [
3121
+ /* @__PURE__ */ jsx(
3122
+ "svg",
3123
+ {
3124
+ className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
3125
+ viewBox: "0 0 16 16",
3126
+ fill: "none",
3127
+ children: /* @__PURE__ */ jsx(
3128
+ "path",
3129
+ {
3130
+ d: "M3 8l3.5 3.5L13 4.5",
3131
+ stroke: "currentColor",
3132
+ strokeWidth: "1.8",
3133
+ strokeLinecap: "round",
3134
+ strokeLinejoin: "round"
3135
+ }
3136
+ )
3137
+ }
3138
+ ),
3139
+ /* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
3140
+ /* @__PURE__ */ jsxs(
3141
+ "span",
3064
3142
  {
3065
- d: "M3 8l3.5 3.5L13 4.5",
3066
- stroke: "currentColor",
3067
- strokeWidth: "1.8",
3068
- strokeLinecap: "round",
3069
- strokeLinejoin: "round"
3143
+ className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
3144
+ children: [
3145
+ quality.label,
3146
+ quality.id === "auto" ? " (ABR)" : ""
3147
+ ]
3070
3148
  }
3071
- )
3072
- }
3073
- ),
3074
- /* @__PURE__ */ jsxs(
3075
- "span",
3076
- {
3077
- className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55",
3078
- children: [
3079
- quality.label,
3080
- quality.id === "auto" ? " (ABR)" : ""
3081
- ]
3082
- }
3083
- )
3084
- ]
3085
- },
3086
- quality.id
3087
- )) })
3149
+ ),
3150
+ unavailable && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-white/30", children: "N\xE3o dispon\xEDvel" })
3151
+ ] })
3152
+ ]
3153
+ },
3154
+ quality.id
3155
+ );
3156
+ }) })
3088
3157
  ] }),
3089
3158
  settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
3090
3159
  /* @__PURE__ */ jsxs(
@@ -3306,45 +3375,53 @@ function Video({
3306
3375
  ]
3307
3376
  }
3308
3377
  ),
3309
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
3310
- "button",
3311
- {
3312
- type: "button",
3313
- onClick: () => {
3314
- changeAudio(track.id);
3315
- setSettingsTab("root");
3316
- },
3317
- className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
3318
- children: [
3319
- /* @__PURE__ */ jsx(
3320
- "svg",
3321
- {
3322
- className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
3323
- viewBox: "0 0 16 16",
3324
- fill: "none",
3325
- children: /* @__PURE__ */ jsx(
3326
- "path",
3378
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => {
3379
+ const unavailable = track.supported === false;
3380
+ return /* @__PURE__ */ jsxs(
3381
+ "button",
3382
+ {
3383
+ type: "button",
3384
+ onClick: () => {
3385
+ if (unavailable) return;
3386
+ changeAudio(track.id);
3387
+ setSettingsTab("root");
3388
+ },
3389
+ disabled: unavailable,
3390
+ 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"}`,
3391
+ children: [
3392
+ /* @__PURE__ */ jsx(
3393
+ "svg",
3394
+ {
3395
+ className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
3396
+ viewBox: "0 0 16 16",
3397
+ fill: "none",
3398
+ children: /* @__PURE__ */ jsx(
3399
+ "path",
3400
+ {
3401
+ d: "M3 8l3.5 3.5L13 4.5",
3402
+ stroke: "currentColor",
3403
+ strokeWidth: "1.8",
3404
+ strokeLinecap: "round",
3405
+ strokeLinejoin: "round"
3406
+ }
3407
+ )
3408
+ }
3409
+ ),
3410
+ /* @__PURE__ */ jsxs("span", { className: "flex-1 text-left", children: [
3411
+ /* @__PURE__ */ jsx(
3412
+ "span",
3327
3413
  {
3328
- d: "M3 8l3.5 3.5L13 4.5",
3329
- stroke: "currentColor",
3330
- strokeWidth: "1.8",
3331
- strokeLinecap: "round",
3332
- strokeLinejoin: "round"
3414
+ className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
3415
+ children: track.label
3333
3416
  }
3334
- )
3335
- }
3336
- ),
3337
- /* @__PURE__ */ jsx(
3338
- "span",
3339
- {
3340
- className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55",
3341
- children: track.label
3342
- }
3343
- )
3344
- ]
3345
- },
3346
- track.id
3347
- )) })
3417
+ ),
3418
+ unavailable && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] text-white/30", children: "N\xE3o dispon\xEDvel" })
3419
+ ] })
3420
+ ]
3421
+ },
3422
+ track.id
3423
+ );
3424
+ }) })
3348
3425
  ] }),
3349
3426
  settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
3350
3427
  /* @__PURE__ */ jsxs(