@geekapps/silo-elements-nextjs 0.1.22 → 0.1.23
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 +82 -27
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +82 -27
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from
|
|
|
3
3
|
export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import gsap from 'gsap';
|
|
6
|
-
import { Play, Rewind, Pause, FastForward, VolumeX, Volume2, Settings, Minimize, Maximize } from 'lucide-react';
|
|
6
|
+
import { Play, Rewind, Pause, FastForward, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
|
|
7
7
|
|
|
8
8
|
// src/ImageUploader.tsx
|
|
9
9
|
|
|
@@ -1262,6 +1262,12 @@ function Video({
|
|
|
1262
1262
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
1263
1263
|
const [settingsTab, setSettingsTab] = useState("quality");
|
|
1264
1264
|
const [playbackRate, setPlaybackRate] = useState(1);
|
|
1265
|
+
const [subtitleStyle, setSubtitleStyle] = useState({
|
|
1266
|
+
track: initialSubtitleMode,
|
|
1267
|
+
size: "medium",
|
|
1268
|
+
color: "white",
|
|
1269
|
+
bg: "semi"
|
|
1270
|
+
});
|
|
1265
1271
|
const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
|
|
1266
1272
|
const [activeCue, setActiveCue] = useState(null);
|
|
1267
1273
|
const [storyboardCues, setStoryboardCues] = useState(
|
|
@@ -1948,8 +1954,8 @@ function Video({
|
|
|
1948
1954
|
/* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", children: [
|
|
1949
1955
|
settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1950
1956
|
/* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
|
|
1951
|
-
/* @__PURE__ */ jsxs("div", { className: "absolute bottom-full
|
|
1952
|
-
/* @__PURE__ */ jsx("div", { className: "flex border-b border-white/10", children: ["quality", "subtitles", ...audioTracks.length > 1 ? ["audio"] : [], "playback"].map((tab) => /* @__PURE__ */ jsx(
|
|
1957
|
+
/* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-3 z-50 mb-2 w-52 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl @sm:right-5 @lg:right-9", children: [
|
|
1958
|
+
/* @__PURE__ */ jsx("div", { className: "flex border-b border-white/10", children: ["quality", ...parsed.subtitles.length > 0 ? ["subtitles"] : [], ...audioTracks.length > 1 ? ["audio"] : [], "playback"].map((tab) => /* @__PURE__ */ jsx(
|
|
1953
1959
|
"button",
|
|
1954
1960
|
{
|
|
1955
1961
|
type: "button",
|
|
@@ -1972,30 +1978,63 @@ function Video({
|
|
|
1972
1978
|
},
|
|
1973
1979
|
quality.id
|
|
1974
1980
|
)) }),
|
|
1975
|
-
settingsTab === "subtitles" && /* @__PURE__ */ jsxs(
|
|
1976
|
-
/* @__PURE__ */
|
|
1977
|
-
|
|
1978
|
-
{
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1981
|
+
settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
|
|
1982
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1983
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Track" }),
|
|
1984
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
|
|
1985
|
+
"button",
|
|
1986
|
+
{
|
|
1987
|
+
type: "button",
|
|
1988
|
+
onClick: () => {
|
|
1989
|
+
const next = s.srclang === "off" ? "off" : s.srclang;
|
|
1990
|
+
setSubtitleMode(next);
|
|
1991
|
+
setSubtitleStyle((st) => ({ ...st, track: next }));
|
|
1992
|
+
},
|
|
1993
|
+
className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.track === s.srclang ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
|
|
1994
|
+
children: s.label
|
|
1983
1995
|
},
|
|
1984
|
-
|
|
1985
|
-
}
|
|
1986
|
-
),
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
{
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1996
|
+
s.srclang
|
|
1997
|
+
)) })
|
|
1998
|
+
] }),
|
|
1999
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2000
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Size" }),
|
|
2001
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsx(
|
|
2002
|
+
"button",
|
|
2003
|
+
{
|
|
2004
|
+
type: "button",
|
|
2005
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
|
|
2006
|
+
className: `rounded-md px-2 py-1 text-xs font-medium capitalize transition ${subtitleStyle.size === s ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
|
|
2007
|
+
children: s
|
|
1994
2008
|
},
|
|
1995
|
-
|
|
1996
|
-
}
|
|
1997
|
-
|
|
1998
|
-
|
|
2009
|
+
s
|
|
2010
|
+
)) })
|
|
2011
|
+
] }),
|
|
2012
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2013
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Color" }),
|
|
2014
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
|
|
2015
|
+
"button",
|
|
2016
|
+
{
|
|
2017
|
+
type: "button",
|
|
2018
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
|
|
2019
|
+
className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
|
|
2020
|
+
style: { backgroundColor: hex }
|
|
2021
|
+
},
|
|
2022
|
+
c
|
|
2023
|
+
)) })
|
|
2024
|
+
] }),
|
|
2025
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2026
|
+
/* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Background" }),
|
|
2027
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
|
|
2028
|
+
"button",
|
|
2029
|
+
{
|
|
2030
|
+
type: "button",
|
|
2031
|
+
onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
|
|
2032
|
+
className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.bg === v ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
|
|
2033
|
+
children: label
|
|
2034
|
+
},
|
|
2035
|
+
v
|
|
2036
|
+
)) })
|
|
2037
|
+
] })
|
|
1999
2038
|
] }),
|
|
2000
2039
|
settingsTab === "audio" && audioTracks.length > 1 && /* @__PURE__ */ jsx(Fragment, { children: audioTracks.map((track) => /* @__PURE__ */ jsx(
|
|
2001
2040
|
SettingsItem,
|
|
@@ -2140,6 +2179,16 @@ function Video({
|
|
|
2140
2179
|
}
|
|
2141
2180
|
),
|
|
2142
2181
|
/* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
|
|
2182
|
+
parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
|
|
2183
|
+
"button",
|
|
2184
|
+
{
|
|
2185
|
+
type: "button",
|
|
2186
|
+
onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
|
|
2187
|
+
className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
|
|
2188
|
+
"aria-label": "Captions",
|
|
2189
|
+
children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
|
|
2190
|
+
}
|
|
2191
|
+
),
|
|
2143
2192
|
/* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
|
|
2144
2193
|
"button",
|
|
2145
2194
|
{
|
|
@@ -2184,8 +2233,14 @@ function Video({
|
|
|
2184
2233
|
children: /* @__PURE__ */ jsx(
|
|
2185
2234
|
"div",
|
|
2186
2235
|
{
|
|
2187
|
-
className: "max-w-3xl rounded-lg
|
|
2188
|
-
style: {
|
|
2236
|
+
className: "max-w-3xl rounded-lg px-4 py-2 text-center font-medium leading-snug",
|
|
2237
|
+
style: {
|
|
2238
|
+
fontSize: subtitleStyle.size === "small" ? "0.8rem" : subtitleStyle.size === "large" ? "1.25rem" : "1rem",
|
|
2239
|
+
color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
|
|
2240
|
+
backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.7)",
|
|
2241
|
+
backdropFilter: subtitleStyle.bg === "semi" ? "blur(4px)" : void 0,
|
|
2242
|
+
textShadow: subtitleStyle.bg === "none" ? "0 1px 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.8)" : "0 1px 3px rgba(0,0,0,0.6)"
|
|
2243
|
+
},
|
|
2189
2244
|
children: activeCue
|
|
2190
2245
|
}
|
|
2191
2246
|
)
|