@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.
- package/dist/VideoPlayer.js +63 -53
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +63 -53
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1287,6 +1287,7 @@ function Video({
|
|
|
1287
1287
|
const [isMuted, setIsMuted] = useState(false);
|
|
1288
1288
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
1289
1289
|
const [playerHeight, setPlayerHeight] = useState(0);
|
|
1290
|
+
const [playerWidth, setPlayerWidth] = useState(0);
|
|
1290
1291
|
const [error, setError] = useState(null);
|
|
1291
1292
|
const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
|
|
1292
1293
|
const progressPercent = duration ? currentTime / duration * 100 : 0;
|
|
@@ -1472,7 +1473,10 @@ function Video({
|
|
|
1472
1473
|
if (!player) return;
|
|
1473
1474
|
const ro = new ResizeObserver((entries) => {
|
|
1474
1475
|
const entry = entries[0];
|
|
1475
|
-
if (entry)
|
|
1476
|
+
if (entry) {
|
|
1477
|
+
setPlayerHeight(entry.contentRect.height);
|
|
1478
|
+
setPlayerWidth(entry.contentRect.width);
|
|
1479
|
+
}
|
|
1476
1480
|
});
|
|
1477
1481
|
ro.observe(player);
|
|
1478
1482
|
return () => ro.disconnect();
|
|
@@ -2104,7 +2108,7 @@ function Video({
|
|
|
2104
2108
|
] }),
|
|
2105
2109
|
/* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
|
|
2106
2110
|
] }),
|
|
2107
|
-
/* @__PURE__ */
|
|
2111
|
+
/* @__PURE__ */ jsx(
|
|
2108
2112
|
"div",
|
|
2109
2113
|
{
|
|
2110
2114
|
ref: progressRef,
|
|
@@ -2112,56 +2116,22 @@ function Video({
|
|
|
2112
2116
|
onPointerLeave: handleProgressPointerLeave,
|
|
2113
2117
|
onPointerDown: handleProgressPointerDown,
|
|
2114
2118
|
className: "group relative mb-2 h-5 cursor-pointer",
|
|
2115
|
-
children: [
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
{
|
|
2132
|
-
className: "overflow-hidden rounded-lg bg-neutral-900",
|
|
2133
|
-
style: {
|
|
2134
|
-
width: thumbW,
|
|
2135
|
-
height: thumbH,
|
|
2136
|
-
backgroundImage: `url(${preview.cue.image})`,
|
|
2137
|
-
backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x * scale}px -${preview.cue.y * scale}px` : "center",
|
|
2138
|
-
backgroundSize: preview.cue.x != null ? `auto ${thumbH}px` : "cover",
|
|
2139
|
-
backgroundRepeat: "no-repeat"
|
|
2140
|
-
}
|
|
2141
|
-
}
|
|
2142
|
-
),
|
|
2143
|
-
/* @__PURE__ */ jsx("div", { className: "pt-1.5 text-center text-xs font-semibold text-white/80", children: formatTime(preview.time) })
|
|
2144
|
-
]
|
|
2145
|
-
}
|
|
2146
|
-
);
|
|
2147
|
-
})(),
|
|
2148
|
-
/* @__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: [
|
|
2149
|
-
/* @__PURE__ */ jsx(
|
|
2150
|
-
"div",
|
|
2151
|
-
{
|
|
2152
|
-
className: "absolute inset-y-0 left-0 bg-white/30",
|
|
2153
|
-
style: { width: `${bufferedPercent}%` }
|
|
2154
|
-
}
|
|
2155
|
-
),
|
|
2156
|
-
/* @__PURE__ */ jsx(
|
|
2157
|
-
"div",
|
|
2158
|
-
{
|
|
2159
|
-
className: "absolute inset-y-0 left-0 bg-white/85",
|
|
2160
|
-
style: { width: `${progressPercent}%` }
|
|
2161
|
-
}
|
|
2162
|
-
)
|
|
2163
|
-
] })
|
|
2164
|
-
]
|
|
2119
|
+
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: [
|
|
2120
|
+
/* @__PURE__ */ jsx(
|
|
2121
|
+
"div",
|
|
2122
|
+
{
|
|
2123
|
+
className: "absolute inset-y-0 left-0 bg-white/30",
|
|
2124
|
+
style: { width: `${bufferedPercent}%` }
|
|
2125
|
+
}
|
|
2126
|
+
),
|
|
2127
|
+
/* @__PURE__ */ jsx(
|
|
2128
|
+
"div",
|
|
2129
|
+
{
|
|
2130
|
+
className: "absolute inset-y-0 left-0 bg-white/85",
|
|
2131
|
+
style: { width: `${progressPercent}%` }
|
|
2132
|
+
}
|
|
2133
|
+
)
|
|
2134
|
+
] })
|
|
2165
2135
|
}
|
|
2166
2136
|
),
|
|
2167
2137
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
@@ -2263,10 +2233,50 @@ function Video({
|
|
|
2263
2233
|
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" }) })
|
|
2264
2234
|
}
|
|
2265
2235
|
),
|
|
2236
|
+
preview && (() => {
|
|
2237
|
+
const srcW = preview.cue.w ?? 160;
|
|
2238
|
+
const srcH = preview.cue.h ?? 90;
|
|
2239
|
+
const thumbW = Math.max(120, Math.round((playerWidth || 640) * 0.1));
|
|
2240
|
+
const thumbH = Math.round(thumbW * (srcH / srcW));
|
|
2241
|
+
const scale = thumbW / srcW;
|
|
2242
|
+
const isSprite = preview.cue.x != null && preview.cue.y != null;
|
|
2243
|
+
return /* @__PURE__ */ jsxs(
|
|
2244
|
+
"div",
|
|
2245
|
+
{
|
|
2246
|
+
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",
|
|
2247
|
+
style: { bottom: controlsVisible ? "72px" : "16px", left: preview.left, transition: "bottom 0.2s" },
|
|
2248
|
+
children: [
|
|
2249
|
+
/* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", style: { width: thumbW, height: thumbH }, children: isSprite ? (
|
|
2250
|
+
// Inner div at native tile size, positioned to show the right sprite cell,
|
|
2251
|
+
// then scaled up to fill thumbW×thumbH. transformOrigin top-left ensures
|
|
2252
|
+
// the clip window aligns correctly.
|
|
2253
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
2254
|
+
width: srcW,
|
|
2255
|
+
height: srcH,
|
|
2256
|
+
backgroundImage: `url(${preview.cue.image})`,
|
|
2257
|
+
backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
|
|
2258
|
+
backgroundSize: "auto",
|
|
2259
|
+
backgroundRepeat: "no-repeat",
|
|
2260
|
+
transform: `scale(${scale})`,
|
|
2261
|
+
transformOrigin: "top left"
|
|
2262
|
+
} })
|
|
2263
|
+
) : /* @__PURE__ */ jsx("div", { style: {
|
|
2264
|
+
width: thumbW,
|
|
2265
|
+
height: thumbH,
|
|
2266
|
+
backgroundImage: `url(${preview.cue.image})`,
|
|
2267
|
+
backgroundSize: "cover",
|
|
2268
|
+
backgroundPosition: "center",
|
|
2269
|
+
backgroundRepeat: "no-repeat"
|
|
2270
|
+
} }) }),
|
|
2271
|
+
/* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/75", children: formatTime(preview.time) })
|
|
2272
|
+
]
|
|
2273
|
+
}
|
|
2274
|
+
);
|
|
2275
|
+
})(),
|
|
2266
2276
|
activeCue && /* @__PURE__ */ jsx(
|
|
2267
2277
|
"div",
|
|
2268
2278
|
{
|
|
2269
|
-
className: `pointer-events-none absolute inset-x-0 z-
|
|
2279
|
+
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"}`,
|
|
2270
2280
|
children: /* @__PURE__ */ jsx(
|
|
2271
2281
|
"div",
|
|
2272
2282
|
{
|