@geekapps/silo-elements-nextjs 0.2.28 → 0.2.30
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.d.ts +3 -1
- package/dist/VideoPlayer.js +66 -55
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +66 -55
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1235,7 +1235,8 @@ function Video({
|
|
|
1235
1235
|
className,
|
|
1236
1236
|
autoHideControls = true,
|
|
1237
1237
|
defaultVolume = 0.72,
|
|
1238
|
-
maxHeight
|
|
1238
|
+
maxHeight,
|
|
1239
|
+
fixedHeight
|
|
1239
1240
|
}) {
|
|
1240
1241
|
const parsed = useMemo(() => parseVideoChildren(children), [children]);
|
|
1241
1242
|
const initialSourceIndex = useMemo(() => {
|
|
@@ -1287,6 +1288,7 @@ function Video({
|
|
|
1287
1288
|
const [isMuted, setIsMuted] = useState(false);
|
|
1288
1289
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
1289
1290
|
const [playerHeight, setPlayerHeight] = useState(0);
|
|
1291
|
+
const [playerWidth, setPlayerWidth] = useState(0);
|
|
1290
1292
|
const [error, setError] = useState(null);
|
|
1291
1293
|
const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
|
|
1292
1294
|
const progressPercent = duration ? currentTime / duration * 100 : 0;
|
|
@@ -1472,7 +1474,10 @@ function Video({
|
|
|
1472
1474
|
if (!player) return;
|
|
1473
1475
|
const ro = new ResizeObserver((entries) => {
|
|
1474
1476
|
const entry = entries[0];
|
|
1475
|
-
if (entry)
|
|
1477
|
+
if (entry) {
|
|
1478
|
+
setPlayerHeight(entry.contentRect.height);
|
|
1479
|
+
setPlayerWidth(entry.contentRect.width);
|
|
1480
|
+
}
|
|
1476
1481
|
});
|
|
1477
1482
|
ro.observe(player);
|
|
1478
1483
|
return () => ro.disconnect();
|
|
@@ -1887,7 +1892,7 @@ function Video({
|
|
|
1887
1892
|
}
|
|
1888
1893
|
},
|
|
1889
1894
|
className: "relative w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
|
|
1890
|
-
style: maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight, aspectRatio: "16/9" } : { aspectRatio: "16/9" },
|
|
1895
|
+
style: fixedHeight ? { height: typeof fixedHeight === "number" ? `${fixedHeight}px` : fixedHeight } : maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight, aspectRatio: "16/9" } : { aspectRatio: "16/9" },
|
|
1891
1896
|
children: [
|
|
1892
1897
|
/* @__PURE__ */ jsxs(
|
|
1893
1898
|
"video",
|
|
@@ -2104,7 +2109,7 @@ function Video({
|
|
|
2104
2109
|
] }),
|
|
2105
2110
|
/* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
|
|
2106
2111
|
] }),
|
|
2107
|
-
/* @__PURE__ */
|
|
2112
|
+
/* @__PURE__ */ jsx(
|
|
2108
2113
|
"div",
|
|
2109
2114
|
{
|
|
2110
2115
|
ref: progressRef,
|
|
@@ -2112,56 +2117,22 @@ function Video({
|
|
|
2112
2117
|
onPointerLeave: handleProgressPointerLeave,
|
|
2113
2118
|
onPointerDown: handleProgressPointerDown,
|
|
2114
2119
|
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
|
-
]
|
|
2120
|
+
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: [
|
|
2121
|
+
/* @__PURE__ */ jsx(
|
|
2122
|
+
"div",
|
|
2123
|
+
{
|
|
2124
|
+
className: "absolute inset-y-0 left-0 bg-white/30",
|
|
2125
|
+
style: { width: `${bufferedPercent}%` }
|
|
2126
|
+
}
|
|
2127
|
+
),
|
|
2128
|
+
/* @__PURE__ */ jsx(
|
|
2129
|
+
"div",
|
|
2130
|
+
{
|
|
2131
|
+
className: "absolute inset-y-0 left-0 bg-white/85",
|
|
2132
|
+
style: { width: `${progressPercent}%` }
|
|
2133
|
+
}
|
|
2134
|
+
)
|
|
2135
|
+
] })
|
|
2165
2136
|
}
|
|
2166
2137
|
),
|
|
2167
2138
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
@@ -2263,10 +2234,50 @@ function Video({
|
|
|
2263
2234
|
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
2235
|
}
|
|
2265
2236
|
),
|
|
2237
|
+
preview && (() => {
|
|
2238
|
+
const srcW = preview.cue.w ?? 160;
|
|
2239
|
+
const srcH = preview.cue.h ?? 90;
|
|
2240
|
+
const thumbW = Math.max(120, Math.round((playerWidth || 640) * 0.1));
|
|
2241
|
+
const thumbH = Math.round(thumbW * (srcH / srcW));
|
|
2242
|
+
const scale = thumbW / srcW;
|
|
2243
|
+
const isSprite = preview.cue.x != null && preview.cue.y != null;
|
|
2244
|
+
return /* @__PURE__ */ jsxs(
|
|
2245
|
+
"div",
|
|
2246
|
+
{
|
|
2247
|
+
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",
|
|
2248
|
+
style: { bottom: controlsVisible ? "72px" : "16px", left: preview.left, transition: "bottom 0.2s" },
|
|
2249
|
+
children: [
|
|
2250
|
+
/* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", style: { width: thumbW, height: thumbH }, children: isSprite ? (
|
|
2251
|
+
// Inner div at native tile size, positioned to show the right sprite cell,
|
|
2252
|
+
// then scaled up to fill thumbW×thumbH. transformOrigin top-left ensures
|
|
2253
|
+
// the clip window aligns correctly.
|
|
2254
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
2255
|
+
width: srcW,
|
|
2256
|
+
height: srcH,
|
|
2257
|
+
backgroundImage: `url(${preview.cue.image})`,
|
|
2258
|
+
backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
|
|
2259
|
+
backgroundSize: "auto",
|
|
2260
|
+
backgroundRepeat: "no-repeat",
|
|
2261
|
+
transform: `scale(${scale})`,
|
|
2262
|
+
transformOrigin: "top left"
|
|
2263
|
+
} })
|
|
2264
|
+
) : /* @__PURE__ */ jsx("div", { style: {
|
|
2265
|
+
width: thumbW,
|
|
2266
|
+
height: thumbH,
|
|
2267
|
+
backgroundImage: `url(${preview.cue.image})`,
|
|
2268
|
+
backgroundSize: "cover",
|
|
2269
|
+
backgroundPosition: "center",
|
|
2270
|
+
backgroundRepeat: "no-repeat"
|
|
2271
|
+
} }) }),
|
|
2272
|
+
/* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/75", children: formatTime(preview.time) })
|
|
2273
|
+
]
|
|
2274
|
+
}
|
|
2275
|
+
);
|
|
2276
|
+
})(),
|
|
2266
2277
|
activeCue && /* @__PURE__ */ jsx(
|
|
2267
2278
|
"div",
|
|
2268
2279
|
{
|
|
2269
|
-
className: `pointer-events-none absolute inset-x-0 z-
|
|
2280
|
+
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
2281
|
children: /* @__PURE__ */ jsx(
|
|
2271
2282
|
"div",
|
|
2272
2283
|
{
|