@geekapps/silo-elements-nextjs 0.1.22 → 0.1.24

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.
Files changed (6) hide show
  1. package/dist/VideoPlayer.js +87 -32
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +87 -32
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. 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(
@@ -1915,7 +1921,7 @@ function Video({
1915
1921
  "div",
1916
1922
  {
1917
1923
  className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
1918
- children: /* @__PURE__ */ jsx("span", { className: "grid size-12 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20 @sm:size-16 @lg:size-20", children: /* @__PURE__ */ jsx(Play, { className: "ml-1 size-5 @sm:size-7 @lg:size-9" }) })
1924
+ children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20 @sm:size-14 @lg:size-16", children: /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-6 @lg:size-7" }) })
1919
1925
  }
1920
1926
  ),
1921
1927
  isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
@@ -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 left-0 right-0 z-50 mb-2 mx-0 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl", children: [
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(Fragment, { children: [
1976
- /* @__PURE__ */ jsx(
1977
- SettingsItem,
1978
- {
1979
- active: subtitleMode === "off",
1980
- onClick: () => {
1981
- setSubtitleMode("off");
1982
- setSettingsOpen(false);
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
- children: "Off"
1985
- }
1986
- ),
1987
- parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
1988
- SettingsItem,
1989
- {
1990
- active: subtitleMode === subtitle.srclang,
1991
- onClick: () => {
1992
- setSubtitleMode(subtitle.srclang);
1993
- setSettingsOpen(false);
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
- children: subtitle.label
1996
- },
1997
- subtitle.srclang
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,
@@ -2082,7 +2121,7 @@ function Video({
2082
2121
  onClick: () => seekRelative(-10),
2083
2122
  className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2084
2123
  "aria-label": "Rewind 10 seconds",
2085
- children: /* @__PURE__ */ jsx(Rewind, { className: "size-5 @sm:size-7" })
2124
+ children: /* @__PURE__ */ jsx(Rewind, { className: "size-4 @sm:size-6" })
2086
2125
  }
2087
2126
  ),
2088
2127
  /* @__PURE__ */ jsx(
@@ -2092,7 +2131,7 @@ function Video({
2092
2131
  onClick: togglePlay,
2093
2132
  className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2094
2133
  "aria-label": isPlaying ? "Pause" : "Play",
2095
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-7" }) : /* @__PURE__ */ jsx(Play, { className: "size-5 @sm:size-7" })
2134
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "size-4 @sm:size-6" })
2096
2135
  }
2097
2136
  ),
2098
2137
  /* @__PURE__ */ jsx(
@@ -2102,7 +2141,7 @@ function Video({
2102
2141
  onClick: () => seekRelative(10),
2103
2142
  className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
2104
2143
  "aria-label": "Forward 10 seconds",
2105
- children: /* @__PURE__ */ jsx(FastForward, { className: "size-5 @sm:size-7" })
2144
+ children: /* @__PURE__ */ jsx(FastForward, { className: "size-4 @sm:size-6" })
2106
2145
  }
2107
2146
  ),
2108
2147
  /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-1 text-xs font-semibold text-white/75 @sm:flex @sm:gap-2 @sm:text-sm", children: [
@@ -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
  {
@@ -2174,7 +2223,7 @@ function Video({
2174
2223
  {
2175
2224
  className: "pointer-events-none absolute inset-0 z-50 grid place-items-center",
2176
2225
  style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
2177
- children: /* @__PURE__ */ jsx("span", { className: "grid size-14 place-items-center rounded-full bg-black/40 text-white backdrop-blur-sm ring-1 ring-white/20 @sm:size-18 @lg:size-22", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-6 @sm:size-8 @lg:size-10" }) : /* @__PURE__ */ jsx(Play, { className: "ml-1 size-6 @sm:size-8 @lg:size-10" }) })
2226
+ 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" }) })
2178
2227
  }
2179
2228
  ),
2180
2229
  activeCue && /* @__PURE__ */ jsx(
@@ -2184,8 +2233,14 @@ function Video({
2184
2233
  children: /* @__PURE__ */ jsx(
2185
2234
  "div",
2186
2235
  {
2187
- className: "max-w-3xl rounded-lg bg-black/75 px-4 py-2 text-center text-sm font-medium leading-snug text-white backdrop-blur-sm @sm:text-base @lg:text-lg",
2188
- style: { textShadow: "0 1px 4px rgba(0,0,0,0.9)" },
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
  )