@geekapps/silo-elements-nextjs 0.1.8 → 0.1.9

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 +24 -24
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +24 -24
  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
@@ -1808,7 +1808,7 @@ function Video({
1808
1808
  }
1809
1809
  )
1810
1810
  ] }),
1811
- /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-4 pb-4 text-white @sm:px-7 @sm:pb-7 @lg:px-9 @lg:pb-8", children: [
1811
+ /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", children: [
1812
1812
  /* @__PURE__ */ jsxs(
1813
1813
  "div",
1814
1814
  {
@@ -1816,7 +1816,7 @@ function Video({
1816
1816
  onPointerMove: handleProgressPointerMove,
1817
1817
  onPointerLeave: handleProgressPointerLeave,
1818
1818
  onPointerDown: handleProgressPointerDown,
1819
- className: "relative mb-6 h-5 cursor-pointer",
1819
+ className: "relative mb-3 h-5 cursor-pointer @sm:mb-4 @lg:mb-6",
1820
1820
  children: [
1821
1821
  preview && /* @__PURE__ */ jsxs(
1822
1822
  "div",
@@ -1842,7 +1842,7 @@ function Video({
1842
1842
  ]
1843
1843
  }
1844
1844
  ),
1845
- /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 h-[5px] -translate-y-1/2 overflow-hidden rounded-full bg-white/22", children: [
1845
+ /* @__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: [
1846
1846
  /* @__PURE__ */ jsx(
1847
1847
  "div",
1848
1848
  {
@@ -1861,16 +1861,16 @@ function Video({
1861
1861
  ]
1862
1862
  }
1863
1863
  ),
1864
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-5", children: [
1865
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
1864
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 @sm:gap-4 @lg:gap-5", children: [
1865
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 @sm:gap-4 @lg:gap-5", children: [
1866
1866
  /* @__PURE__ */ jsx(
1867
1867
  "button",
1868
1868
  {
1869
1869
  type: "button",
1870
1870
  onClick: togglePlay,
1871
- className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
1871
+ className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
1872
1872
  "aria-label": isPlaying ? "Pause" : "Play",
1873
- children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-7" }) : /* @__PURE__ */ jsx(Play, { className: "size-7" })
1873
+ children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-7" }) : /* @__PURE__ */ jsx(Play, { className: "size-5 @sm:size-7" })
1874
1874
  }
1875
1875
  ),
1876
1876
  /* @__PURE__ */ jsx(
@@ -1878,26 +1878,26 @@ function Video({
1878
1878
  {
1879
1879
  type: "button",
1880
1880
  onClick: () => seekRelative(10),
1881
- className: "hidden size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80 sm:grid",
1881
+ className: "hidden size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:grid @sm:size-8",
1882
1882
  "aria-label": "Forward 10 seconds",
1883
- children: /* @__PURE__ */ jsx(FastForward, { className: "size-7" })
1883
+ children: /* @__PURE__ */ jsx(FastForward, { className: "size-5 @sm:size-7" })
1884
1884
  }
1885
1885
  ),
1886
- /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 text-sm font-semibold text-white/75 sm:flex", children: [
1886
+ /* @__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: [
1887
1887
  /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
1888
1888
  /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
1889
1889
  /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
1890
1890
  ] })
1891
1891
  ] }),
1892
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
1892
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
1893
1893
  /* @__PURE__ */ jsx(
1894
1894
  "button",
1895
1895
  {
1896
1896
  type: "button",
1897
1897
  onClick: () => setIsMuted((value) => !value),
1898
- className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
1898
+ className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
1899
1899
  "aria-label": isMuted ? "Unmute" : "Mute",
1900
- children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-6" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-6" })
1900
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-6" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-6" })
1901
1901
  }
1902
1902
  ),
1903
1903
  /* @__PURE__ */ jsx(
@@ -1913,20 +1913,20 @@ function Video({
1913
1913
  setVolume(nextVolume);
1914
1914
  setIsMuted(nextVolume === 0);
1915
1915
  },
1916
- className: "hidden h-1 w-20 accent-white md:block",
1916
+ className: "hidden h-1 w-14 accent-white @md:block @md:w-20",
1917
1917
  "aria-label": "Audio level"
1918
1918
  }
1919
1919
  ),
1920
- /* @__PURE__ */ jsx("div", { className: "mx-1 hidden h-4 w-px bg-white/20 md:block" }),
1920
+ /* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
1921
1921
  audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
1922
1922
  /* @__PURE__ */ jsx(
1923
1923
  "button",
1924
1924
  {
1925
1925
  type: "button",
1926
1926
  onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"),
1927
- className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
1927
+ className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
1928
1928
  "aria-label": "Audio track",
1929
- children: /* @__PURE__ */ jsx(AudioLines, { className: "size-5" })
1929
+ children: /* @__PURE__ */ jsx(AudioLines, { className: "size-4 @sm:size-5" })
1930
1930
  }
1931
1931
  ),
1932
1932
  openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
@@ -1945,9 +1945,9 @@ function Video({
1945
1945
  {
1946
1946
  type: "button",
1947
1947
  onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"),
1948
- className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
1948
+ className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
1949
1949
  "aria-label": "Captions",
1950
- children: /* @__PURE__ */ jsx(Captions, { className: "size-5" })
1950
+ children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
1951
1951
  }
1952
1952
  ),
1953
1953
  openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
@@ -1982,11 +1982,11 @@ function Video({
1982
1982
  {
1983
1983
  type: "button",
1984
1984
  onClick: () => setOpenMenu(openMenu === "quality" ? null : "quality"),
1985
- className: `flex h-8 items-center gap-1 rounded px-2 text-xs font-semibold transition hover:text-white/80 ${openMenu === "quality" ? "text-white" : "text-white/60"}`,
1985
+ 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 ${openMenu === "quality" ? "text-white" : "text-white/60"}`,
1986
1986
  "aria-label": "Quality",
1987
1987
  children: [
1988
- /* @__PURE__ */ jsx(Settings, { className: "size-4" }),
1989
- /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
1988
+ /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
1989
+ /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
1990
1990
  ]
1991
1991
  }
1992
1992
  ),
@@ -2008,9 +2008,9 @@ function Video({
2008
2008
  {
2009
2009
  type: "button",
2010
2010
  onClick: toggleFullscreen,
2011
- className: "grid size-8 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80",
2011
+ className: "grid size-6 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80 @sm:size-8",
2012
2012
  "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
2013
- children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-7" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-7" })
2013
+ children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-5 @sm:size-7" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-5 @sm:size-7" })
2014
2014
  }
2015
2015
  )
2016
2016
  ] })