@geekapps/silo-elements-nextjs 0.2.41 → 0.2.43

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 +22 -17
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +22 -17
  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
@@ -97,7 +97,6 @@ function Video({
97
97
  const [isFullscreen, setIsFullscreen] = useState(false);
98
98
  const [playerHeight, setPlayerHeight] = useState(0);
99
99
  const [playerWidth, setPlayerWidth] = useState(0);
100
- const [error, setError] = useState(null);
101
100
  const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
102
101
  const progressPercent = duration ? currentTime / duration * 100 : 0;
103
102
  const bufferedPercent = duration ? bufferedTime / duration * 100 : 0;
@@ -368,7 +367,6 @@ function Video({
368
367
  return;
369
368
  }
370
369
  destroyMediaEngines();
371
- setError(null);
372
370
  setIsLoading(true);
373
371
  setCurrentTime(0);
374
372
  setBufferedTime(0);
@@ -413,13 +411,13 @@ function Video({
413
411
  setIsLoading(false);
414
412
  });
415
413
  dash.on(dashjs.MediaPlayer.events.ERROR, () => {
416
- setError("N\xE3o foi poss\xEDvel reproduzir o stream MPEG-DASH.");
414
+ console.error("[Silo] MPEG-DASH playback failed");
417
415
  setIsLoading(false);
418
416
  });
419
417
  dash.initialize(video, activeSource.src, false);
420
418
  } catch {
421
419
  if (!cancelled) {
422
- setError("N\xE3o foi poss\xEDvel carregar o player MPEG-DASH.");
420
+ console.error("[Silo] MPEG-DASH player load failed");
423
421
  setIsLoading(false);
424
422
  }
425
423
  }
@@ -485,7 +483,7 @@ function Video({
485
483
  hls.recoverMediaError();
486
484
  return;
487
485
  }
488
- setError("N\xE3o foi poss\xEDvel reproduzir o stream HLS.");
486
+ console.error("[Silo] HLS playback failed");
489
487
  setIsLoading(false);
490
488
  });
491
489
  return;
@@ -496,11 +494,11 @@ function Video({
496
494
  setIsLoading(false);
497
495
  return;
498
496
  }
499
- setError("Este navegador n\xE3o suporta HLS.");
497
+ console.error("[Silo] HLS not supported in this browser");
500
498
  setIsLoading(false);
501
499
  } catch {
502
500
  if (!cancelled) {
503
- setError("N\xE3o foi poss\xEDvel carregar o player HLS.");
501
+ console.error("[Silo] HLS player load failed");
504
502
  setIsLoading(false);
505
503
  }
506
504
  }
@@ -522,9 +520,18 @@ function Video({
522
520
  const togglePlay = useCallback(async () => {
523
521
  const video = videoRef.current;
524
522
  if (!video) return;
523
+ const wasPaused = video.paused;
525
524
  try {
526
- const wasPaused = video.paused;
527
525
  if (wasPaused) {
526
+ if (video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
527
+ await new Promise((resolve) => {
528
+ const onReady = () => {
529
+ video.removeEventListener("canplay", onReady);
530
+ resolve();
531
+ };
532
+ video.addEventListener("canplay", onReady);
533
+ });
534
+ }
528
535
  await video.play();
529
536
  } else {
530
537
  video.pause();
@@ -537,7 +544,6 @@ function Video({
537
544
  600
538
545
  );
539
546
  } catch {
540
- setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
541
547
  }
542
548
  }, []);
543
549
  const seekRelative = useCallback((seconds) => {
@@ -591,7 +597,7 @@ function Video({
591
597
  }
592
598
  throw new Error("Fullscreen unavailable");
593
599
  } catch {
594
- setError("N\xE3o foi poss\xEDvel alterar o modo fullscreen.");
600
+ console.error("[Silo] Fullscreen toggle failed");
595
601
  }
596
602
  }, []);
597
603
  const changeAudio = useCallback((trackId) => {
@@ -816,17 +822,16 @@ function Video({
816
822
  opacity: clickIcon ? 1 : 0,
817
823
  transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out"
818
824
  },
819
- 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(
825
+ 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-7 @sm:size-9 @lg:size-11", fill: "white" }) : /* @__PURE__ */ jsx(
820
826
  Play,
821
827
  {
822
- className: "ml-0.5 size-5 @sm:size-7 @lg:size-8",
828
+ className: "ml-0.5 size-7 @sm:size-9 @lg:size-11",
823
829
  fill: "white"
824
830
  }
825
831
  ) })
826
832
  }
827
833
  ),
828
834
  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" }) }),
829
- error && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-8 top-1/2 z-40 -translate-y-1/2 rounded-2xl border border-white/10 bg-black/75 p-5 text-center text-sm text-white shadow-2xl backdrop-blur-xl", children: error }),
830
835
  /* @__PURE__ */ jsxs(
831
836
  "div",
832
837
  {
@@ -985,7 +990,7 @@ function Video({
985
990
  /* @__PURE__ */ jsx(
986
991
  "svg",
987
992
  {
988
- className: `size-4 shrink-0${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
993
+ className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`,
989
994
  viewBox: "0 0 16 16",
990
995
  fill: "none",
991
996
  children: /* @__PURE__ */ jsx(
@@ -1065,7 +1070,7 @@ function Video({
1065
1070
  /* @__PURE__ */ jsx(
1066
1071
  "svg",
1067
1072
  {
1068
- className: `size-4 shrink-0${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`,
1073
+ className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`,
1069
1074
  viewBox: "0 0 16 16",
1070
1075
  fill: "none",
1071
1076
  children: /* @__PURE__ */ jsx(
@@ -1248,7 +1253,7 @@ function Video({
1248
1253
  /* @__PURE__ */ jsx(
1249
1254
  "svg",
1250
1255
  {
1251
- className: `size-4 shrink-0${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
1256
+ className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`,
1252
1257
  viewBox: "0 0 16 16",
1253
1258
  fill: "none",
1254
1259
  children: /* @__PURE__ */ jsx(
@@ -1319,7 +1324,7 @@ function Video({
1319
1324
  /* @__PURE__ */ jsx(
1320
1325
  "svg",
1321
1326
  {
1322
- className: `size-4 shrink-0${playbackRate === speed ? "text-white" : "text-transparent"}`,
1327
+ className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`,
1323
1328
  viewBox: "0 0 16 16",
1324
1329
  fill: "none",
1325
1330
  children: /* @__PURE__ */ jsx(