@geekapps/silo-elements-nextjs 0.2.27 → 0.2.28

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 +164 -99
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +164 -99
  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, Settings, Captions, Volume2, Pause, VolumeX, Minimize, Maximize } from 'lucide-react';
3
+ import { Play, Pause, 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 = {
@@ -742,7 +742,7 @@ function Video({
742
742
  {
743
743
  ref: chromeRef,
744
744
  onClick: togglePlay,
745
- className: `absolute inset-0 z-30 flex flex-col justify-between transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
745
+ className: `absolute inset-0 z-30 flex flex-col transition-opacity duration-200 ${isFullscreen ? "justify-between" : "justify-end"} ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
746
746
  children: [
747
747
  isFullscreen && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
748
748
  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
@@ -753,20 +753,52 @@ function Video({
753
753
  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
754
754
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
755
755
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
756
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 mb-3 flex flex-col gap-2.5", style: { animation: "spFadeIn 0.15s ease" }, children: [
757
- /* @__PURE__ */ jsxs("div", { className: "w-52 overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8", children: [
758
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
759
- /* @__PURE__ */ jsx(Settings, { className: "size-4 text-white/60" }),
760
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Video Quality" })
761
- ] }),
756
+ /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 mb-2 w-56 overflow-hidden rounded-2xl bg-[#1c1c1e]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/10", style: { animation: "spFadeIn 0.15s ease" }, children: [
757
+ settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
758
+ { id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
759
+ ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
760
+ ...audioTracks.length > 1 ? [{ id: "audio", label: "\xC1udio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
761
+ { id: "playback", label: "Velocidade", value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7` }
762
+ ].map((item) => /* @__PURE__ */ jsxs(
763
+ "button",
764
+ {
765
+ type: "button",
766
+ onClick: () => setSettingsTab(item.id),
767
+ className: "flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition hover:bg-white/8 first:pt-3.5 last:pb-3.5",
768
+ children: [
769
+ /* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
770
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
771
+ item.value,
772
+ /* @__PURE__ */ jsx("svg", { className: "size-3 opacity-50", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4.5 3l3 3-3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
773
+ ] })
774
+ ]
775
+ },
776
+ item.id
777
+ )) }),
778
+ settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
779
+ /* @__PURE__ */ jsxs(
780
+ "button",
781
+ {
782
+ type: "button",
783
+ onClick: () => setSettingsTab("root"),
784
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
785
+ children: [
786
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
787
+ "Qualidade"
788
+ ]
789
+ }
790
+ ),
762
791
  /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
763
792
  "button",
764
793
  {
765
794
  type: "button",
766
- onClick: () => changeQuality(quality.id),
767
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
795
+ onClick: () => {
796
+ changeQuality(quality.id);
797
+ setSettingsTab("root");
798
+ },
799
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
768
800
  children: [
769
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
801
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
770
802
  /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
771
803
  quality.label,
772
804
  quality.id === "auto" ? " (ABR)" : ""
@@ -776,73 +808,98 @@ function Video({
776
808
  quality.id
777
809
  )) })
778
810
  ] }),
779
- (parsed.subtitles.length > 0 || audioTracks.length > 1) && /* @__PURE__ */ jsx("div", { className: `overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8 ${parsed.subtitles.length > 0 && audioTracks.length > 1 ? "w-80" : "w-52"}`, children: /* @__PURE__ */ jsxs("div", { className: `grid ${parsed.subtitles.length > 0 && audioTracks.length > 1 ? "grid-cols-2 divide-x divide-white/8" : "grid-cols-1"}`, children: [
780
- parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
781
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
782
- /* @__PURE__ */ jsx(Captions, { className: "size-4 text-white/60" }),
783
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Subtitles" })
784
- ] }),
785
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
786
- "button",
787
- {
788
- type: "button",
789
- onClick: () => {
790
- const next = s.srclang === "off" ? "off" : s.srclang;
791
- setSubtitleMode(next);
792
- setSubtitleStyle((st) => ({ ...st, track: next }));
793
- },
794
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
795
- children: [
796
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
797
- /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
798
- ]
811
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
812
+ /* @__PURE__ */ jsxs(
813
+ "button",
814
+ {
815
+ type: "button",
816
+ onClick: () => setSettingsTab("root"),
817
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
818
+ children: [
819
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
820
+ "Legendas"
821
+ ]
822
+ }
823
+ ),
824
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Desligado" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
825
+ "button",
826
+ {
827
+ type: "button",
828
+ onClick: () => {
829
+ const next = s.srclang === "off" ? "off" : s.srclang;
830
+ setSubtitleMode(next);
831
+ setSubtitleStyle((st) => ({ ...st, track: next }));
832
+ setSettingsTab("root");
799
833
  },
800
- s.srclang
801
- )) })
802
- ] }),
803
- audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
804
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
805
- /* @__PURE__ */ jsx(Volume2, { className: "size-4 text-white/60" }),
806
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Audio" })
807
- ] }),
808
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
809
- "button",
810
- {
811
- type: "button",
812
- onClick: () => changeAudio(track.id),
813
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
814
- children: [
815
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
816
- /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
817
- ]
834
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
835
+ children: [
836
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
837
+ /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
838
+ ]
839
+ },
840
+ s.srclang
841
+ )) })
842
+ ] }),
843
+ settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
844
+ /* @__PURE__ */ jsxs(
845
+ "button",
846
+ {
847
+ type: "button",
848
+ onClick: () => setSettingsTab("root"),
849
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
850
+ children: [
851
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
852
+ "\xC1udio"
853
+ ]
854
+ }
855
+ ),
856
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
857
+ "button",
858
+ {
859
+ type: "button",
860
+ onClick: () => {
861
+ changeAudio(track.id);
862
+ setSettingsTab("root");
818
863
  },
819
- track.id
820
- )) })
821
- ] })
822
- ] }) }),
823
- /* @__PURE__ */ jsxs("div", { className: "w-64 overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8", children: [
824
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
825
- /* @__PURE__ */ jsxs("svg", { className: "size-4 text-white/60", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
826
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
827
- /* @__PURE__ */ jsx("path", { d: "M12 12l-2-4M12 12l3.5-1.5", strokeLinecap: "round" })
828
- ] }),
829
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Playback Speed" })
830
- ] }),
831
- /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 pt-3", children: [
832
- /* @__PURE__ */ jsx(
833
- "input",
834
- {
835
- type: "range",
836
- min: 0,
837
- max: PLAYBACK_SPEEDS.length - 1,
838
- step: 1,
839
- value: PLAYBACK_SPEEDS.indexOf(playbackRate) === -1 ? PLAYBACK_SPEEDS.indexOf(1) : PLAYBACK_SPEEDS.indexOf(playbackRate),
840
- onChange: (e) => setPlaybackRate(PLAYBACK_SPEEDS[Number(e.target.value)] ?? 1),
841
- className: "w-full accent-white"
842
- }
843
- ),
844
- /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex justify-between", children: PLAYBACK_SPEEDS.map((s) => /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium ${playbackRate === s ? "text-white font-bold" : "text-white/40"}`, children: s === 1 ? "1x" : `${s}x` }, s)) })
845
- ] })
864
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
865
+ children: [
866
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
867
+ /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
868
+ ]
869
+ },
870
+ track.id
871
+ )) })
872
+ ] }),
873
+ settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
874
+ /* @__PURE__ */ jsxs(
875
+ "button",
876
+ {
877
+ type: "button",
878
+ onClick: () => setSettingsTab("root"),
879
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
880
+ children: [
881
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
882
+ "Velocidade"
883
+ ]
884
+ }
885
+ ),
886
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
887
+ "button",
888
+ {
889
+ type: "button",
890
+ onClick: () => {
891
+ setPlaybackRate(speed);
892
+ setSettingsOpen(false);
893
+ setSettingsTab("root");
894
+ },
895
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
896
+ children: [
897
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
898
+ /* @__PURE__ */ jsx("span", { className: playbackRate === speed ? "font-semibold text-white" : "text-white/55", children: speed === 1 ? "Normal" : `${speed}\xD7` })
899
+ ]
900
+ },
901
+ speed
902
+ )) })
846
903
  ] })
847
904
  ] }),
848
905
  /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
@@ -856,30 +913,38 @@ function Video({
856
913
  onPointerDown: handleProgressPointerDown,
857
914
  className: "group relative mb-2 h-5 cursor-pointer",
858
915
  children: [
859
- preview && /* @__PURE__ */ jsxs(
860
- "div",
861
- {
862
- className: "pointer-events-none absolute bottom-8 z-50 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur",
863
- style: { left: preview.left },
864
- children: [
865
- /* @__PURE__ */ jsx(
866
- "div",
867
- {
868
- className: "overflow-hidden rounded-md bg-neutral-900",
869
- style: {
870
- width: preview.cue.w ?? 160,
871
- height: preview.cue.h ?? 90,
872
- backgroundImage: `url(${preview.cue.image})`,
873
- backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x}px -${preview.cue.y}px` : "center",
874
- backgroundSize: preview.cue.x != null ? "auto" : "cover",
875
- backgroundRepeat: "no-repeat"
916
+ preview && (() => {
917
+ const srcW = preview.cue.w ?? 160;
918
+ const srcH = preview.cue.h ?? 90;
919
+ const aspect = srcW / srcH;
920
+ const thumbH = Math.max(120, Math.min(playerHeight * 0.25, 300));
921
+ const thumbW = Math.round(thumbH * aspect);
922
+ const scale = thumbH / srcH;
923
+ return /* @__PURE__ */ jsxs(
924
+ "div",
925
+ {
926
+ className: "pointer-events-none absolute bottom-10 z-60 -translate-x-1/2 rounded-xl bg-black/80 p-1.5 shadow-2xl ring-1 ring-white/15 backdrop-blur",
927
+ style: { left: preview.left },
928
+ children: [
929
+ /* @__PURE__ */ jsx(
930
+ "div",
931
+ {
932
+ className: "overflow-hidden rounded-lg bg-neutral-900",
933
+ style: {
934
+ width: thumbW,
935
+ height: thumbH,
936
+ backgroundImage: `url(${preview.cue.image})`,
937
+ backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x * scale}px -${preview.cue.y * scale}px` : "center",
938
+ backgroundSize: preview.cue.x != null ? `auto ${thumbH}px` : "cover",
939
+ backgroundRepeat: "no-repeat"
940
+ }
876
941
  }
877
- }
878
- ),
879
- /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })
880
- ]
881
- }
882
- ),
942
+ ),
943
+ /* @__PURE__ */ jsx("div", { className: "pt-1.5 text-center text-xs font-semibold text-white/80", children: formatTime(preview.time) })
944
+ ]
945
+ }
946
+ );
947
+ })(),
883
948
  /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150 group-hover:h-1", style: { height: "2px" }, children: [
884
949
  /* @__PURE__ */ jsx(
885
950
  "div",