@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/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(
@@ -715,7 +721,7 @@ function Video({
715
721
  "div",
716
722
  {
717
723
  className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
718
- 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" }) })
724
+ 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" }) })
719
725
  }
720
726
  ),
721
727
  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" }) }),
@@ -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,
@@ -882,7 +921,7 @@ function Video({
882
921
  onClick: () => seekRelative(-10),
883
922
  className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
884
923
  "aria-label": "Rewind 10 seconds",
885
- children: /* @__PURE__ */ jsx(Rewind, { className: "size-5 @sm:size-7" })
924
+ children: /* @__PURE__ */ jsx(Rewind, { className: "size-4 @sm:size-6" })
886
925
  }
887
926
  ),
888
927
  /* @__PURE__ */ jsx(
@@ -892,7 +931,7 @@ function Video({
892
931
  onClick: togglePlay,
893
932
  className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
894
933
  "aria-label": isPlaying ? "Pause" : "Play",
895
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-7" }) : /* @__PURE__ */ jsx(Play, { className: "size-5 @sm:size-7" })
934
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "size-4 @sm:size-6" })
896
935
  }
897
936
  ),
898
937
  /* @__PURE__ */ jsx(
@@ -902,7 +941,7 @@ function Video({
902
941
  onClick: () => seekRelative(10),
903
942
  className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
904
943
  "aria-label": "Forward 10 seconds",
905
- children: /* @__PURE__ */ jsx(FastForward, { className: "size-5 @sm:size-7" })
944
+ children: /* @__PURE__ */ jsx(FastForward, { className: "size-4 @sm:size-6" })
906
945
  }
907
946
  ),
908
947
  /* @__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: [
@@ -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
  {
@@ -974,7 +1023,7 @@ function Video({
974
1023
  {
975
1024
  className: "pointer-events-none absolute inset-0 z-50 grid place-items-center",
976
1025
  style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
977
- 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" }) })
1026
+ 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" }) })
978
1027
  }
979
1028
  ),
980
1029
  activeCue && /* @__PURE__ */ jsx(
@@ -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
  )