@geekapps/silo-elements-nextjs 0.2.26 → 0.2.27

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 +146 -205
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +146 -205
  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, Captions, Settings, Minimize, Maximize } from 'lucide-react';
3
+ import { Play, Settings, Captions, Volume2, Pause, VolumeX, Minimize, Maximize } from 'lucide-react';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
5
 
6
6
  var AUTO_QUALITY = {
@@ -744,164 +744,108 @@ function Video({
744
744
  onClick: togglePlay,
745
745
  className: `absolute inset-0 z-30 flex flex-col justify-between transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
746
746
  children: [
747
- /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
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" }),
749
- /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "relative z-10 flex items-start justify-between gap-4 px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: [
750
- /* @__PURE__ */ jsxs("div", { children: [
751
- title && isFullscreen && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
752
- description && isFullscreen && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
753
- ] }),
754
- parsed.sources.length > 1 && /* @__PURE__ */ jsx(
755
- "select",
756
- {
757
- value: String(sourceIndex),
758
- onChange: (e) => setSourceIndex(Number(e.target.value)),
759
- "aria-label": "Video source",
760
- className: "h-8 rounded-full border border-white/15 bg-white/10 px-3 text-xs font-semibold text-white outline-none backdrop-blur-md transition hover:bg-white/15",
761
- children: parsed.sources.map((source, index) => /* @__PURE__ */ jsx("option", { value: String(index), className: "text-black", children: source.label ?? source.type ?? `Source ${index + 1}` }, `${source.src}-${index}`))
762
- }
763
- )
764
- ] }),
765
- /* @__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
+ isFullscreen && /* @__PURE__ */ jsx("header", { onClick: (e) => e.stopPropagation(), className: "relative z-10 flex items-start px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: /* @__PURE__ */ jsxs("div", { children: [
750
+ title && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
751
+ description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
752
+ ] }) }),
753
+ /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
766
754
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
767
755
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
768
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-3 z-50 mb-2 w-56 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl @sm:right-5 @lg:right-9", children: [
769
- /* @__PURE__ */ jsxs(
770
- "div",
771
- {
772
- style: {
773
- display: settingsTab === "root" ? "block" : "none",
774
- animation: settingsTab === "root" ? "settingsSlideIn 0.18s ease" : void 0
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
+ ] }),
762
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
763
+ "button",
764
+ {
765
+ 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",
768
+ 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" }) }) }),
770
+ /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
771
+ quality.label,
772
+ quality.id === "auto" ? " (ABR)" : ""
773
+ ] })
774
+ ]
775
775
  },
776
- children: [
777
- /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Settings" }),
778
- [
779
- { id: "quality", label: "Quality", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
780
- ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Subtitles / CC", value: subtitleStyle.track === "off" ? "Off" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
781
- ...audioTracks.length > 1 ? [{ id: "audio", label: "Audio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
782
- { id: "playback", label: "Speed", value: playbackRate === 1 ? "Normal" : `${playbackRate}x` }
783
- ].map((item) => /* @__PURE__ */ jsxs(
784
- "button",
785
- {
786
- type: "button",
787
- onClick: () => setSettingsTab(item.id),
788
- className: "flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-white/80 transition hover:bg-white/10 hover:text-white",
789
- children: [
790
- /* @__PURE__ */ jsx("span", { children: item.label }),
791
- /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-white/40", children: [
792
- item.value,
793
- /* @__PURE__ */ jsx("svg", { className: "size-3.5 opacity-50", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
794
- ] })
795
- ]
776
+ quality.id
777
+ )) })
778
+ ] }),
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 }));
796
793
  },
797
- item.id
798
- ))
799
- ]
800
- },
801
- "root"
802
- ),
803
- ["quality", "subtitles", "audio", "playback"].map((tab) => /* @__PURE__ */ jsxs(
804
- "div",
805
- {
806
- style: {
807
- display: settingsTab === tab ? "block" : "none",
808
- animation: settingsTab === tab ? "settingsSlideIn 0.18s ease" : void 0
809
- },
810
- children: [
811
- /* @__PURE__ */ jsxs(
812
- "button",
813
- {
814
- type: "button",
815
- onClick: () => setSettingsTab("root"),
816
- className: "flex w-full items-center gap-2 border-b border-white/10 px-3 py-2.5 text-xs font-semibold text-white/60 transition hover:text-white",
817
- children: [
818
- /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
819
- tab === "quality" ? "Quality" : tab === "subtitles" ? "Subtitles / CC" : tab === "audio" ? "Audio" : "Speed"
820
- ]
821
- }
822
- ),
823
- /* @__PURE__ */ jsxs("div", { className: "max-h-52 overflow-y-auto py-1", children: [
824
- tab === "quality" && [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(SettingsItem, { active: selectedQuality === quality.id, onClick: () => {
825
- changeQuality(quality.id);
826
- setSettingsTab("root");
827
- }, children: [
828
- quality.label,
829
- quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
830
- ] }, quality.id)),
831
- tab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
832
- /* @__PURE__ */ jsxs("div", { children: [
833
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Track" }),
834
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
835
- "button",
836
- {
837
- type: "button",
838
- onClick: () => {
839
- const next = s.srclang === "off" ? "off" : s.srclang;
840
- setSubtitleMode(next);
841
- setSubtitleStyle((st) => ({ ...st, track: next }));
842
- },
843
- 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"}`,
844
- children: s.label
845
- },
846
- s.srclang
847
- )) })
848
- ] }),
849
- /* @__PURE__ */ jsxs("div", { children: [
850
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Size" }),
851
- /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
852
- "button",
853
- {
854
- type: "button",
855
- onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
856
- 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"}`,
857
- children: s === "xlarge" ? "XL" : s.charAt(0).toUpperCase() + s.slice(1)
858
- },
859
- s
860
- )) })
861
- ] }),
862
- /* @__PURE__ */ jsxs("div", { children: [
863
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Color" }),
864
- /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
865
- "button",
866
- {
867
- type: "button",
868
- onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
869
- className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
870
- style: { backgroundColor: hex }
871
- },
872
- c
873
- )) })
874
- ] }),
875
- /* @__PURE__ */ jsxs("div", { children: [
876
- /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Background" }),
877
- /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
878
- "button",
879
- {
880
- type: "button",
881
- onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
882
- 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"}`,
883
- children: label
884
- },
885
- v
886
- )) })
887
- ] })
888
- ] }),
889
- tab === "audio" && audioTracks.map((track) => /* @__PURE__ */ jsx(SettingsItem, { active: selectedAudio === track.id, onClick: () => {
890
- changeAudio(track.id);
891
- setSettingsTab("root");
892
- }, children: track.label }, track.id)),
893
- tab === "playback" && PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsx(SettingsItem, { active: playbackRate === speed, onClick: () => {
894
- setPlaybackRate(speed);
895
- setSettingsOpen(false);
896
- setSettingsTab("root");
897
- }, children: speed === 1 ? "Normal" : `${speed}x` }, speed))
898
- ] })
899
- ]
900
- },
901
- tab
902
- ))
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
+ ]
799
+ },
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
+ ]
818
+ },
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
+ ] })
846
+ ] })
903
847
  ] }),
904
- /* @__PURE__ */ jsx("style", { children: `@keyframes settingsSlideIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}` })
848
+ /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
905
849
  ] }),
906
850
  /* @__PURE__ */ jsxs(
907
851
  "div",
@@ -910,12 +854,12 @@ function Video({
910
854
  onPointerMove: handleProgressPointerMove,
911
855
  onPointerLeave: handleProgressPointerLeave,
912
856
  onPointerDown: handleProgressPointerDown,
913
- className: "relative mb-3 h-5 cursor-pointer @sm:mb-4 @lg:mb-6",
857
+ className: "group relative mb-2 h-5 cursor-pointer",
914
858
  children: [
915
859
  preview && /* @__PURE__ */ jsxs(
916
860
  "div",
917
861
  {
918
- className: "pointer-events-none absolute bottom-8 z-20 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur",
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",
919
863
  style: { left: preview.left },
920
864
  children: [
921
865
  /* @__PURE__ */ jsx(
@@ -936,7 +880,7 @@ function Video({
936
880
  ]
937
881
  }
938
882
  ),
939
- /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 @sm:h-1.25", children: [
883
+ /* @__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: [
940
884
  /* @__PURE__ */ jsx(
941
885
  "div",
942
886
  {
@@ -955,42 +899,27 @@ function Video({
955
899
  ]
956
900
  }
957
901
  ),
958
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 @sm:gap-4 @lg:gap-5", children: [
959
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 @sm:gap-4 @lg:gap-5", children: [
960
- /* @__PURE__ */ jsx(
961
- "button",
962
- {
963
- type: "button",
964
- onClick: () => seekRelative(-10),
965
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
966
- "aria-label": "Rewind 10 seconds",
967
- children: /* @__PURE__ */ jsx(Rewind, { className: "size-4 @sm:size-6" })
968
- }
969
- ),
902
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
903
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 @sm:gap-2", children: [
904
+ /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "back", onClick: () => seekRelative(-15) }),
970
905
  /* @__PURE__ */ jsx(
971
906
  "button",
972
907
  {
973
908
  type: "button",
974
909
  onClick: togglePlay,
975
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
910
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
976
911
  "aria-label": isPlaying ? "Pause" : "Play",
977
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "size-4 @sm:size-6" })
912
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-6" })
978
913
  }
979
914
  ),
980
- /* @__PURE__ */ jsx(
981
- "button",
982
- {
983
- type: "button",
984
- onClick: () => seekRelative(10),
985
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
986
- "aria-label": "Forward 10 seconds",
987
- children: /* @__PURE__ */ jsx(FastForward, { className: "size-4 @sm:size-6" })
988
- }
989
- ),
990
- /* @__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: [
915
+ /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "forward", onClick: () => seekRelative(15) }),
916
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs font-semibold text-white/75 @sm:text-sm", children: [
991
917
  /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
992
918
  /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
993
- /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
919
+ /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
920
+ "-",
921
+ formatTime(Math.max(0, duration - currentTime))
922
+ ] })
994
923
  ] })
995
924
  ] }),
996
925
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
@@ -999,9 +928,9 @@ function Video({
999
928
  {
1000
929
  type: "button",
1001
930
  onClick: () => setIsMuted((value) => !value),
1002
- className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
931
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
1003
932
  "aria-label": isMuted ? "Unmute" : "Mute",
1004
- children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-6" })
933
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
1005
934
  }
1006
935
  ),
1007
936
  /* @__PURE__ */ jsx(
@@ -1027,12 +956,12 @@ function Video({
1027
956
  {
1028
957
  type: "button",
1029
958
  onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
1030
- className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
959
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
1031
960
  "aria-label": "Captions",
1032
961
  children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
1033
962
  }
1034
963
  ),
1035
- /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
964
+ /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
1036
965
  "button",
1037
966
  {
1038
967
  type: "button",
@@ -1040,12 +969,9 @@ function Video({
1040
969
  setSettingsOpen((v) => !v);
1041
970
  setSettingsTab("root");
1042
971
  },
1043
- className: `flex h-6 items-center gap-1 rounded px-1.5 text-xs font-semibold transition hover:text-white/80 @sm:h-8 @sm:px-2 ${settingsOpen ? "text-white" : "text-white/60"}`,
972
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
1044
973
  "aria-label": "Settings",
1045
- children: [
1046
- /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
1047
- /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
1048
- ]
974
+ children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
1049
975
  }
1050
976
  ) }),
1051
977
  /* @__PURE__ */ jsx(
@@ -1053,9 +979,9 @@ function Video({
1053
979
  {
1054
980
  type: "button",
1055
981
  onClick: toggleFullscreen,
1056
- className: "grid size-6 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80 @sm:size-8",
982
+ className: "grid size-8 place-items-center text-white/60 transition hover:scale-110 hover:text-white/80 @sm:size-10",
1057
983
  "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
1058
- children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-5 @sm:size-7" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-5 @sm:size-7" })
984
+ children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-4 @sm:size-5" })
1059
985
  }
1060
986
  )
1061
987
  ] })
@@ -1075,7 +1001,7 @@ function Video({
1075
1001
  activeCue && /* @__PURE__ */ jsx(
1076
1002
  "div",
1077
1003
  {
1078
- className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
1004
+ className: `pointer-events-none absolute inset-x-0 z-35 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
1079
1005
  children: /* @__PURE__ */ jsx(
1080
1006
  "div",
1081
1007
  {
@@ -1105,21 +1031,36 @@ function Video({
1105
1031
  );
1106
1032
  }
1107
1033
  var VideoPlayer = Video;
1108
- function SettingsItem({
1109
- children,
1110
- active,
1111
- onClick
1112
- }) {
1113
- return /* @__PURE__ */ jsxs(
1034
+ function SeekButton({ seconds, direction, onClick }) {
1035
+ return /* @__PURE__ */ jsx(
1114
1036
  "button",
1115
1037
  {
1116
1038
  type: "button",
1117
1039
  onClick,
1118
- className: `flex w-full items-center gap-2 px-4 py-2.5 text-left text-base font-medium transition hover:bg-white/10 ${active ? "text-white" : "text-white/55"}`,
1119
- children: [
1120
- /* @__PURE__ */ jsx("span", { className: `size-1.5 rounded-full ${active ? "bg-white" : "bg-transparent"}` }),
1121
- children
1122
- ]
1040
+ className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
1041
+ "aria-label": `${direction === "back" ? "Rewind" : "Forward"} ${seconds} seconds`,
1042
+ children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", fill: "none", className: "size-7 @sm:size-8", children: [
1043
+ /* @__PURE__ */ jsx(
1044
+ "path",
1045
+ {
1046
+ d: direction === "back" ? "M18 6C11.373 6 6 11.373 6 18s5.373 12 12 12 12-5.373 12-12" : "M18 6C24.627 6 30 11.373 30 18S24.627 30 18 30 6 24.627 6 18",
1047
+ stroke: "currentColor",
1048
+ strokeWidth: "2",
1049
+ strokeLinecap: "round"
1050
+ }
1051
+ ),
1052
+ /* @__PURE__ */ jsx(
1053
+ "path",
1054
+ {
1055
+ d: direction === "back" ? "M18 6l-4 4 4 4" : "M18 6l4 4-4 4",
1056
+ stroke: "currentColor",
1057
+ strokeWidth: "2",
1058
+ strokeLinecap: "round",
1059
+ strokeLinejoin: "round"
1060
+ }
1061
+ ),
1062
+ /* @__PURE__ */ jsx("text", { x: "18", y: "22", textAnchor: "middle", fill: "currentColor", fontSize: "9", fontWeight: "600", fontFamily: "system-ui", children: seconds })
1063
+ ] })
1123
1064
  }
1124
1065
  );
1125
1066
  }