@geekapps/silo-elements-nextjs 0.2.69 → 0.2.70
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 +52 -17
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +52 -17
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
package/dist/index.js
CHANGED
|
@@ -1307,6 +1307,7 @@ function Video({
|
|
|
1307
1307
|
const [hasPlayed, setHasPlayed] = useState(false);
|
|
1308
1308
|
const [ageRatingOverlay, setAgeRatingOverlay] = useState(false);
|
|
1309
1309
|
const ageRatingTimerRef = useRef(null);
|
|
1310
|
+
const ageRatingPauseTimerRef = useRef(null);
|
|
1310
1311
|
const [clickIcon, setClickIcon] = useState(null);
|
|
1311
1312
|
const clickIconTimerRef = useRef(null);
|
|
1312
1313
|
const [isLoading, setIsLoading] = useState(true);
|
|
@@ -1430,14 +1431,22 @@ function Video({
|
|
|
1430
1431
|
setDuration(Number.isFinite(video.duration) ? video.duration : 0);
|
|
1431
1432
|
applySubtitleMode(subtitleMode);
|
|
1432
1433
|
};
|
|
1434
|
+
const showAgeRating = () => {
|
|
1435
|
+
if (!parsed.ageRating?.data) return;
|
|
1436
|
+
if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
|
|
1437
|
+
ageRatingTimerRef.current = window.setTimeout(() => {
|
|
1438
|
+
setAgeRatingOverlay(true);
|
|
1439
|
+
ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 8e3);
|
|
1440
|
+
}, 600);
|
|
1441
|
+
};
|
|
1433
1442
|
const onPlay = () => {
|
|
1434
1443
|
setIsPlaying(true);
|
|
1444
|
+
if (ageRatingPauseTimerRef.current) {
|
|
1445
|
+
window.clearTimeout(ageRatingPauseTimerRef.current);
|
|
1446
|
+
ageRatingPauseTimerRef.current = null;
|
|
1447
|
+
}
|
|
1435
1448
|
setHasPlayed((prev) => {
|
|
1436
|
-
if (!prev
|
|
1437
|
-
setAgeRatingOverlay(true);
|
|
1438
|
-
if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
|
|
1439
|
-
ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 4e3);
|
|
1440
|
-
}
|
|
1449
|
+
if (!prev) showAgeRating();
|
|
1441
1450
|
return true;
|
|
1442
1451
|
});
|
|
1443
1452
|
showControlsTemporarily();
|
|
@@ -1445,6 +1454,13 @@ function Video({
|
|
|
1445
1454
|
const onPause = () => {
|
|
1446
1455
|
setIsPlaying(false);
|
|
1447
1456
|
setControlsVisible(true);
|
|
1457
|
+
if (parsed.ageRating?.data) {
|
|
1458
|
+
if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
|
|
1459
|
+
ageRatingPauseTimerRef.current = window.setTimeout(() => {
|
|
1460
|
+
showAgeRating();
|
|
1461
|
+
ageRatingPauseTimerRef.current = null;
|
|
1462
|
+
}, 5 * 60 * 1e3);
|
|
1463
|
+
}
|
|
1448
1464
|
};
|
|
1449
1465
|
const onWaiting = () => setIsLoading(true);
|
|
1450
1466
|
const onCanPlay = () => setIsLoading(false);
|
|
@@ -1468,6 +1484,8 @@ function Video({
|
|
|
1468
1484
|
video.removeEventListener("waiting", onWaiting);
|
|
1469
1485
|
video.removeEventListener("canplay", onCanPlay);
|
|
1470
1486
|
video.removeEventListener("ended", onEnded);
|
|
1487
|
+
if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
|
|
1488
|
+
if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
|
|
1471
1489
|
};
|
|
1472
1490
|
}, [applySubtitleMode, subtitleMode, showControlsTemporarily]);
|
|
1473
1491
|
useEffect(() => {
|
|
@@ -2125,7 +2143,11 @@ function Video({
|
|
|
2125
2143
|
ref: containerRef,
|
|
2126
2144
|
className: `@container mx-auto w-full max-w-6xl${className ?? ""}`,
|
|
2127
2145
|
children: [
|
|
2128
|
-
/* @__PURE__ */ jsx("style", { children:
|
|
2146
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
2147
|
+
@keyframes silo-ar-bg{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
|
|
2148
|
+
@keyframes silo-ar-icon{0%,8%{opacity:0;transform:scale(0.82)}18%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
|
|
2149
|
+
@keyframes silo-ar-text{0%,18%{opacity:0;transform:translateX(-6px)}30%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
|
|
2150
|
+
` }),
|
|
2129
2151
|
/* @__PURE__ */ jsxs(
|
|
2130
2152
|
"div",
|
|
2131
2153
|
{
|
|
@@ -2200,16 +2222,20 @@ function Video({
|
|
|
2200
2222
|
const code = ar.data[regionKey];
|
|
2201
2223
|
const lookupKey = `${regionKey}:${code}`;
|
|
2202
2224
|
const info = ar.lookup?.[lookupKey];
|
|
2225
|
+
const dur = "8s";
|
|
2203
2226
|
return /* @__PURE__ */ jsx(
|
|
2204
2227
|
"div",
|
|
2205
2228
|
{
|
|
2206
|
-
className: "pointer-events-none absolute inset-0 z-40 flex items-
|
|
2207
|
-
style: {
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2229
|
+
className: "pointer-events-none absolute inset-0 z-40 flex items-end justify-start",
|
|
2230
|
+
style: {
|
|
2231
|
+
background: "linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 38%, transparent 62%)",
|
|
2232
|
+
animation: `silo-ar-bg ${dur} forwards`
|
|
2233
|
+
},
|
|
2234
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5 px-6 py-6 @sm:px-8 @sm:py-8", children: [
|
|
2235
|
+
/* @__PURE__ */ jsx("div", { style: { animation: `silo-ar-icon ${dur} forwards` }, children: info?.imageUrl ? /* @__PURE__ */ jsx("img", { src: info.imageUrl, alt: code, className: "h-14 w-auto object-contain @sm:h-16 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]" }) : /* @__PURE__ */ jsx("span", { className: "flex h-14 min-w-14 items-center justify-center rounded-md border-2 border-white/40 px-2 text-lg font-bold text-white @sm:h-16 @sm:min-w-16 @sm:text-xl drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]", children: code }) }),
|
|
2236
|
+
(info?.title || info?.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", style: { animation: `silo-ar-text ${dur} forwards` }, children: [
|
|
2237
|
+
info.title && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white @sm:text-base drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)]", children: info.title }),
|
|
2238
|
+
info.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-white/70 leading-snug max-w-56 @sm:text-sm @sm:max-w-72 drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)]", children: info.description })
|
|
2213
2239
|
] })
|
|
2214
2240
|
] })
|
|
2215
2241
|
}
|
|
@@ -2877,12 +2903,21 @@ function Video({
|
|
|
2877
2903
|
)
|
|
2878
2904
|
}
|
|
2879
2905
|
),
|
|
2880
|
-
/* @__PURE__ */
|
|
2881
|
-
"
|
|
2906
|
+
/* @__PURE__ */ jsxs(
|
|
2907
|
+
"div",
|
|
2882
2908
|
{
|
|
2883
|
-
className: "rounded-md px-2 py-0.5 text-[11px] font-semibold
|
|
2909
|
+
className: "flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px] font-semibold text-white/90",
|
|
2884
2910
|
style: { background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)" },
|
|
2885
|
-
children:
|
|
2911
|
+
children: [
|
|
2912
|
+
/* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTime(preview.time) }),
|
|
2913
|
+
(() => {
|
|
2914
|
+
const ch = [...chapters].reverse().find((c) => c.startTime <= preview.time);
|
|
2915
|
+
return ch ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2916
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\xB7" }),
|
|
2917
|
+
/* @__PURE__ */ jsx("span", { className: "max-w-36 truncate", children: ch.title })
|
|
2918
|
+
] }) : null;
|
|
2919
|
+
})()
|
|
2920
|
+
]
|
|
2886
2921
|
}
|
|
2887
2922
|
)
|
|
2888
2923
|
]
|