@geekapps/silo-elements-nextjs 0.2.68 → 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/FileUploader.d.ts +1 -1
- package/dist/FileUploader.js +14 -3
- package/dist/FileUploader.js.map +1 -1
- package/dist/MediaUploader.js +14 -3
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoPlayer.js +52 -17
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +66 -20
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types.d.ts +2 -0
- package/package.json +1 -1
- package/styles.css +1 -1
package/dist/VideoPlayer.js
CHANGED
|
@@ -180,6 +180,7 @@ function Video({
|
|
|
180
180
|
const [hasPlayed, setHasPlayed] = useState(false);
|
|
181
181
|
const [ageRatingOverlay, setAgeRatingOverlay] = useState(false);
|
|
182
182
|
const ageRatingTimerRef = useRef(null);
|
|
183
|
+
const ageRatingPauseTimerRef = useRef(null);
|
|
183
184
|
const [clickIcon, setClickIcon] = useState(null);
|
|
184
185
|
const clickIconTimerRef = useRef(null);
|
|
185
186
|
const [isLoading, setIsLoading] = useState(true);
|
|
@@ -303,14 +304,22 @@ function Video({
|
|
|
303
304
|
setDuration(Number.isFinite(video.duration) ? video.duration : 0);
|
|
304
305
|
applySubtitleMode(subtitleMode);
|
|
305
306
|
};
|
|
307
|
+
const showAgeRating = () => {
|
|
308
|
+
if (!parsed.ageRating?.data) return;
|
|
309
|
+
if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
|
|
310
|
+
ageRatingTimerRef.current = window.setTimeout(() => {
|
|
311
|
+
setAgeRatingOverlay(true);
|
|
312
|
+
ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 8e3);
|
|
313
|
+
}, 600);
|
|
314
|
+
};
|
|
306
315
|
const onPlay = () => {
|
|
307
316
|
setIsPlaying(true);
|
|
317
|
+
if (ageRatingPauseTimerRef.current) {
|
|
318
|
+
window.clearTimeout(ageRatingPauseTimerRef.current);
|
|
319
|
+
ageRatingPauseTimerRef.current = null;
|
|
320
|
+
}
|
|
308
321
|
setHasPlayed((prev) => {
|
|
309
|
-
if (!prev
|
|
310
|
-
setAgeRatingOverlay(true);
|
|
311
|
-
if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
|
|
312
|
-
ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 4e3);
|
|
313
|
-
}
|
|
322
|
+
if (!prev) showAgeRating();
|
|
314
323
|
return true;
|
|
315
324
|
});
|
|
316
325
|
showControlsTemporarily();
|
|
@@ -318,6 +327,13 @@ function Video({
|
|
|
318
327
|
const onPause = () => {
|
|
319
328
|
setIsPlaying(false);
|
|
320
329
|
setControlsVisible(true);
|
|
330
|
+
if (parsed.ageRating?.data) {
|
|
331
|
+
if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
|
|
332
|
+
ageRatingPauseTimerRef.current = window.setTimeout(() => {
|
|
333
|
+
showAgeRating();
|
|
334
|
+
ageRatingPauseTimerRef.current = null;
|
|
335
|
+
}, 5 * 60 * 1e3);
|
|
336
|
+
}
|
|
321
337
|
};
|
|
322
338
|
const onWaiting = () => setIsLoading(true);
|
|
323
339
|
const onCanPlay = () => setIsLoading(false);
|
|
@@ -341,6 +357,8 @@ function Video({
|
|
|
341
357
|
video.removeEventListener("waiting", onWaiting);
|
|
342
358
|
video.removeEventListener("canplay", onCanPlay);
|
|
343
359
|
video.removeEventListener("ended", onEnded);
|
|
360
|
+
if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
|
|
361
|
+
if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
|
|
344
362
|
};
|
|
345
363
|
}, [applySubtitleMode, subtitleMode, showControlsTemporarily]);
|
|
346
364
|
useEffect(() => {
|
|
@@ -998,7 +1016,11 @@ function Video({
|
|
|
998
1016
|
ref: containerRef,
|
|
999
1017
|
className: `@container mx-auto w-full max-w-6xl${className ?? ""}`,
|
|
1000
1018
|
children: [
|
|
1001
|
-
/* @__PURE__ */ jsx("style", { children:
|
|
1019
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
1020
|
+
@keyframes silo-ar-bg{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
|
|
1021
|
+
@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)}}
|
|
1022
|
+
@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)}}
|
|
1023
|
+
` }),
|
|
1002
1024
|
/* @__PURE__ */ jsxs(
|
|
1003
1025
|
"div",
|
|
1004
1026
|
{
|
|
@@ -1073,16 +1095,20 @@ function Video({
|
|
|
1073
1095
|
const code = ar.data[regionKey];
|
|
1074
1096
|
const lookupKey = `${regionKey}:${code}`;
|
|
1075
1097
|
const info = ar.lookup?.[lookupKey];
|
|
1098
|
+
const dur = "8s";
|
|
1076
1099
|
return /* @__PURE__ */ jsx(
|
|
1077
1100
|
"div",
|
|
1078
1101
|
{
|
|
1079
|
-
className: "pointer-events-none absolute inset-0 z-40 flex items-
|
|
1080
|
-
style: {
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1102
|
+
className: "pointer-events-none absolute inset-0 z-40 flex items-end justify-start",
|
|
1103
|
+
style: {
|
|
1104
|
+
background: "linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 38%, transparent 62%)",
|
|
1105
|
+
animation: `silo-ar-bg ${dur} forwards`
|
|
1106
|
+
},
|
|
1107
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5 px-6 py-6 @sm:px-8 @sm:py-8", children: [
|
|
1108
|
+
/* @__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 }) }),
|
|
1109
|
+
(info?.title || info?.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", style: { animation: `silo-ar-text ${dur} forwards` }, children: [
|
|
1110
|
+
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 }),
|
|
1111
|
+
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 })
|
|
1086
1112
|
] })
|
|
1087
1113
|
] })
|
|
1088
1114
|
}
|
|
@@ -1750,12 +1776,21 @@ function Video({
|
|
|
1750
1776
|
)
|
|
1751
1777
|
}
|
|
1752
1778
|
),
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
"
|
|
1779
|
+
/* @__PURE__ */ jsxs(
|
|
1780
|
+
"div",
|
|
1755
1781
|
{
|
|
1756
|
-
className: "rounded-md px-2 py-0.5 text-[11px] font-semibold
|
|
1782
|
+
className: "flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px] font-semibold text-white/90",
|
|
1757
1783
|
style: { background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)" },
|
|
1758
|
-
children:
|
|
1784
|
+
children: [
|
|
1785
|
+
/* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTime(preview.time) }),
|
|
1786
|
+
(() => {
|
|
1787
|
+
const ch = [...chapters].reverse().find((c) => c.startTime <= preview.time);
|
|
1788
|
+
return ch ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1789
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\xB7" }),
|
|
1790
|
+
/* @__PURE__ */ jsx("span", { className: "max-w-36 truncate", children: ch.title })
|
|
1791
|
+
] }) : null;
|
|
1792
|
+
})()
|
|
1793
|
+
]
|
|
1759
1794
|
}
|
|
1760
1795
|
)
|
|
1761
1796
|
]
|