@geekapps/silo-elements-nextjs 0.2.28 → 0.2.29

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 (6) hide show
  1. package/dist/VideoPlayer.js +63 -53
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +63 -53
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/VideoPlayer.js CHANGED
@@ -87,6 +87,7 @@ function Video({
87
87
  const [isMuted, setIsMuted] = useState(false);
88
88
  const [isFullscreen, setIsFullscreen] = useState(false);
89
89
  const [playerHeight, setPlayerHeight] = useState(0);
90
+ const [playerWidth, setPlayerWidth] = useState(0);
90
91
  const [error, setError] = useState(null);
91
92
  const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
92
93
  const progressPercent = duration ? currentTime / duration * 100 : 0;
@@ -272,7 +273,10 @@ function Video({
272
273
  if (!player) return;
273
274
  const ro = new ResizeObserver((entries) => {
274
275
  const entry = entries[0];
275
- if (entry) setPlayerHeight(entry.contentRect.height);
276
+ if (entry) {
277
+ setPlayerHeight(entry.contentRect.height);
278
+ setPlayerWidth(entry.contentRect.width);
279
+ }
276
280
  });
277
281
  ro.observe(player);
278
282
  return () => ro.disconnect();
@@ -904,7 +908,7 @@ function Video({
904
908
  ] }),
905
909
  /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
906
910
  ] }),
907
- /* @__PURE__ */ jsxs(
911
+ /* @__PURE__ */ jsx(
908
912
  "div",
909
913
  {
910
914
  ref: progressRef,
@@ -912,56 +916,22 @@ function Video({
912
916
  onPointerLeave: handleProgressPointerLeave,
913
917
  onPointerDown: handleProgressPointerDown,
914
918
  className: "group relative mb-2 h-5 cursor-pointer",
915
- children: [
916
- preview && (() => {
917
- const srcW = preview.cue.w ?? 160;
918
- const srcH = preview.cue.h ?? 90;
919
- const aspect = srcW / srcH;
920
- const thumbH = Math.max(120, Math.min(playerHeight * 0.25, 300));
921
- const thumbW = Math.round(thumbH * aspect);
922
- const scale = thumbH / srcH;
923
- return /* @__PURE__ */ jsxs(
924
- "div",
925
- {
926
- className: "pointer-events-none absolute bottom-10 z-60 -translate-x-1/2 rounded-xl bg-black/80 p-1.5 shadow-2xl ring-1 ring-white/15 backdrop-blur",
927
- style: { left: preview.left },
928
- children: [
929
- /* @__PURE__ */ jsx(
930
- "div",
931
- {
932
- className: "overflow-hidden rounded-lg bg-neutral-900",
933
- style: {
934
- width: thumbW,
935
- height: thumbH,
936
- backgroundImage: `url(${preview.cue.image})`,
937
- backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x * scale}px -${preview.cue.y * scale}px` : "center",
938
- backgroundSize: preview.cue.x != null ? `auto ${thumbH}px` : "cover",
939
- backgroundRepeat: "no-repeat"
940
- }
941
- }
942
- ),
943
- /* @__PURE__ */ jsx("div", { className: "pt-1.5 text-center text-xs font-semibold text-white/80", children: formatTime(preview.time) })
944
- ]
945
- }
946
- );
947
- })(),
948
- /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150 group-hover:h-1", style: { height: "2px" }, children: [
949
- /* @__PURE__ */ jsx(
950
- "div",
951
- {
952
- className: "absolute inset-y-0 left-0 bg-white/30",
953
- style: { width: `${bufferedPercent}%` }
954
- }
955
- ),
956
- /* @__PURE__ */ jsx(
957
- "div",
958
- {
959
- className: "absolute inset-y-0 left-0 bg-white/85",
960
- style: { width: `${progressPercent}%` }
961
- }
962
- )
963
- ] })
964
- ]
919
+ children: /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150 group-hover:h-1", style: { height: "2px" }, children: [
920
+ /* @__PURE__ */ jsx(
921
+ "div",
922
+ {
923
+ className: "absolute inset-y-0 left-0 bg-white/30",
924
+ style: { width: `${bufferedPercent}%` }
925
+ }
926
+ ),
927
+ /* @__PURE__ */ jsx(
928
+ "div",
929
+ {
930
+ className: "absolute inset-y-0 left-0 bg-white/85",
931
+ style: { width: `${progressPercent}%` }
932
+ }
933
+ )
934
+ ] })
965
935
  }
966
936
  ),
967
937
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
@@ -1063,10 +1033,50 @@ function Video({
1063
1033
  children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-full bg-black/40 text-white backdrop-blur-sm ring-1 ring-white/20 @sm:size-14 @lg:size-16", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6 @lg:size-7" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-6 @lg:size-7" }) })
1064
1034
  }
1065
1035
  ),
1036
+ preview && (() => {
1037
+ const srcW = preview.cue.w ?? 160;
1038
+ const srcH = preview.cue.h ?? 90;
1039
+ const thumbW = Math.max(120, Math.round((playerWidth || 640) * 0.1));
1040
+ const thumbH = Math.round(thumbW * (srcH / srcW));
1041
+ const scale = thumbW / srcW;
1042
+ const isSprite = preview.cue.x != null && preview.cue.y != null;
1043
+ return /* @__PURE__ */ jsxs(
1044
+ "div",
1045
+ {
1046
+ className: "pointer-events-none absolute z-50 -translate-x-1/2 rounded-xl bg-black/75 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur-sm",
1047
+ style: { bottom: controlsVisible ? "72px" : "16px", left: preview.left, transition: "bottom 0.2s" },
1048
+ children: [
1049
+ /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", style: { width: thumbW, height: thumbH }, children: isSprite ? (
1050
+ // Inner div at native tile size, positioned to show the right sprite cell,
1051
+ // then scaled up to fill thumbW×thumbH. transformOrigin top-left ensures
1052
+ // the clip window aligns correctly.
1053
+ /* @__PURE__ */ jsx("div", { style: {
1054
+ width: srcW,
1055
+ height: srcH,
1056
+ backgroundImage: `url(${preview.cue.image})`,
1057
+ backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
1058
+ backgroundSize: "auto",
1059
+ backgroundRepeat: "no-repeat",
1060
+ transform: `scale(${scale})`,
1061
+ transformOrigin: "top left"
1062
+ } })
1063
+ ) : /* @__PURE__ */ jsx("div", { style: {
1064
+ width: thumbW,
1065
+ height: thumbH,
1066
+ backgroundImage: `url(${preview.cue.image})`,
1067
+ backgroundSize: "cover",
1068
+ backgroundPosition: "center",
1069
+ backgroundRepeat: "no-repeat"
1070
+ } }) }),
1071
+ /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/75", children: formatTime(preview.time) })
1072
+ ]
1073
+ }
1074
+ );
1075
+ })(),
1066
1076
  activeCue && /* @__PURE__ */ jsx(
1067
1077
  "div",
1068
1078
  {
1069
- className: `pointer-events-none absolute inset-x-0 z-35 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
1079
+ className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
1070
1080
  children: /* @__PURE__ */ jsx(
1071
1081
  "div",
1072
1082
  {