@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.
Files changed (6) hide show
  1. package/dist/VideoPlayer.js +82 -27
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +82 -27
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/VideoPlayer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
2
2
  import gsap from 'gsap';
3
- import { Play, Rewind, Pause, FastForward, VolumeX, Volume2, Settings, Minimize, Maximize } from 'lucide-react';
3
+ import { Play, Rewind, Pause, FastForward, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
5
 
6
6
  var AUTO_QUALITY = {
@@ -62,6 +62,12 @@ function Video({
62
62
  const [settingsOpen, setSettingsOpen] = useState(false);
63
63
  const [settingsTab, setSettingsTab] = useState("quality");
64
64
  const [playbackRate, setPlaybackRate] = useState(1);
65
+ const [subtitleStyle, setSubtitleStyle] = useState({
66
+ track: initialSubtitleMode,
67
+ size: "medium",
68
+ color: "white",
69
+ bg: "semi"
70
+ });
65
71
  const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
66
72
  const [activeCue, setActiveCue] = useState(null);
67
73
  const [storyboardCues, setStoryboardCues] = useState(
@@ -748,8 +754,8 @@ function Video({
748
754
  /* @__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: [
749
755
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
750
756
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
751
- /* @__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: [
752
- /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/10", children: ["quality", "subtitles", ...audioTracks.length > 1 ? ["audio"] : [], "playback"].map((tab) => /* @__PURE__ */ jsx(
757
+ /* @__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: [
758
+ /* @__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(
753
759
  "button",
754
760
  {
755
761
  type: "button",
@@ -772,30 +778,63 @@ function Video({
772
778
  },
773
779
  quality.id
774
780
  )) }),
775
- settingsTab === "subtitles" && /* @__PURE__ */ jsxs(Fragment, { children: [
776
- /* @__PURE__ */ jsx(
777
- SettingsItem,
778
- {
779
- active: subtitleMode === "off",
780
- onClick: () => {
781
- setSubtitleMode("off");
782
- setSettingsOpen(false);
781
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
782
+ /* @__PURE__ */ jsxs("div", { children: [
783
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Track" }),
784
+ /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
785
+ "button",
786
+ {
787
+ type: "button",
788
+ onClick: () => {
789
+ const next = s.srclang === "off" ? "off" : s.srclang;
790
+ setSubtitleMode(next);
791
+ setSubtitleStyle((st) => ({ ...st, track: next }));
792
+ },
793
+ 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"}`,
794
+ children: s.label
783
795
  },
784
- children: "Off"
785
- }
786
- ),
787
- parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
788
- SettingsItem,
789
- {
790
- active: subtitleMode === subtitle.srclang,
791
- onClick: () => {
792
- setSubtitleMode(subtitle.srclang);
793
- setSettingsOpen(false);
796
+ s.srclang
797
+ )) })
798
+ ] }),
799
+ /* @__PURE__ */ jsxs("div", { children: [
800
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Size" }),
801
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsx(
802
+ "button",
803
+ {
804
+ type: "button",
805
+ onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
806
+ 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"}`,
807
+ children: s
794
808
  },
795
- children: subtitle.label
796
- },
797
- subtitle.srclang
798
- ))
809
+ s
810
+ )) })
811
+ ] }),
812
+ /* @__PURE__ */ jsxs("div", { children: [
813
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Color" }),
814
+ /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
815
+ "button",
816
+ {
817
+ type: "button",
818
+ onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
819
+ className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
820
+ style: { backgroundColor: hex }
821
+ },
822
+ c
823
+ )) })
824
+ ] }),
825
+ /* @__PURE__ */ jsxs("div", { children: [
826
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Background" }),
827
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
828
+ "button",
829
+ {
830
+ type: "button",
831
+ onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
832
+ 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"}`,
833
+ children: label
834
+ },
835
+ v
836
+ )) })
837
+ ] })
799
838
  ] }),
800
839
  settingsTab === "audio" && audioTracks.length > 1 && /* @__PURE__ */ jsx(Fragment, { children: audioTracks.map((track) => /* @__PURE__ */ jsx(
801
840
  SettingsItem,
@@ -940,6 +979,16 @@ function Video({
940
979
  }
941
980
  ),
942
981
  /* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
982
+ parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
983
+ "button",
984
+ {
985
+ type: "button",
986
+ onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
987
+ className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
988
+ "aria-label": "Captions",
989
+ children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
990
+ }
991
+ ),
943
992
  /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
944
993
  "button",
945
994
  {
@@ -984,8 +1033,14 @@ function Video({
984
1033
  children: /* @__PURE__ */ jsx(
985
1034
  "div",
986
1035
  {
987
- 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",
988
- style: { textShadow: "0 1px 4px rgba(0,0,0,0.9)" },
1036
+ className: "max-w-3xl rounded-lg px-4 py-2 text-center font-medium leading-snug",
1037
+ style: {
1038
+ fontSize: subtitleStyle.size === "small" ? "0.8rem" : subtitleStyle.size === "large" ? "1.25rem" : "1rem",
1039
+ color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
1040
+ backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.7)",
1041
+ backdropFilter: subtitleStyle.bg === "semi" ? "blur(4px)" : void 0,
1042
+ 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)"
1043
+ },
989
1044
  children: activeCue
990
1045
  }
991
1046
  )