@geekapps/silo-elements-nextjs 0.0.6 → 0.0.7
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.
- package/dist/VideoPlayer.js +9 -50
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +9 -50
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -0
- package/package.json +6 -3
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import { useUpload } from '@geekapps/silo-nextjs';
|
|
|
3
3
|
export { SiloProvider, useFileStatus, useSignedUrl, useSiloClient, useUpload } from '@geekapps/silo-nextjs';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import gsap from 'gsap';
|
|
6
|
+
import { Play, Pause, FastForward, VolumeX, Volume2, AudioLines, Captions, Settings, Minimize, Maximize } from 'lucide-react';
|
|
6
7
|
|
|
7
8
|
// src/ImageUploader.tsx
|
|
8
9
|
|
|
@@ -1255,7 +1256,7 @@ function Video({
|
|
|
1255
1256
|
"div",
|
|
1256
1257
|
{
|
|
1257
1258
|
className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
|
|
1258
|
-
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(
|
|
1259
|
+
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" }) })
|
|
1259
1260
|
}
|
|
1260
1261
|
),
|
|
1261
1262
|
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" }) }),
|
|
@@ -1345,7 +1346,7 @@ function Video({
|
|
|
1345
1346
|
onClick: togglePlay,
|
|
1346
1347
|
className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
|
|
1347
1348
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
1348
|
-
children: isPlaying ? /* @__PURE__ */ jsx(
|
|
1349
|
+
children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-7" }) : /* @__PURE__ */ jsx(Play, { className: "size-7" })
|
|
1349
1350
|
}
|
|
1350
1351
|
),
|
|
1351
1352
|
/* @__PURE__ */ jsx(
|
|
@@ -1355,7 +1356,7 @@ function Video({
|
|
|
1355
1356
|
onClick: () => seekRelative(10),
|
|
1356
1357
|
className: "hidden size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80 sm:grid",
|
|
1357
1358
|
"aria-label": "Forward 10 seconds",
|
|
1358
|
-
children: /* @__PURE__ */ jsx(
|
|
1359
|
+
children: /* @__PURE__ */ jsx(FastForward, { className: "size-7" })
|
|
1359
1360
|
}
|
|
1360
1361
|
),
|
|
1361
1362
|
/* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 text-sm font-semibold text-white/75 sm:flex", children: [
|
|
@@ -1372,7 +1373,7 @@ function Video({
|
|
|
1372
1373
|
onClick: () => setIsMuted((value) => !value),
|
|
1373
1374
|
className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
|
|
1374
1375
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
1375
|
-
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
|
|
1376
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-6" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-6" })
|
|
1376
1377
|
}
|
|
1377
1378
|
),
|
|
1378
1379
|
/* @__PURE__ */ jsx(
|
|
@@ -1401,7 +1402,7 @@ function Video({
|
|
|
1401
1402
|
onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"),
|
|
1402
1403
|
className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
|
|
1403
1404
|
"aria-label": "Audio track",
|
|
1404
|
-
children: /* @__PURE__ */ jsx(
|
|
1405
|
+
children: /* @__PURE__ */ jsx(AudioLines, { className: "size-5" })
|
|
1405
1406
|
}
|
|
1406
1407
|
),
|
|
1407
1408
|
openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
|
|
@@ -1422,7 +1423,7 @@ function Video({
|
|
|
1422
1423
|
onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"),
|
|
1423
1424
|
className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
|
|
1424
1425
|
"aria-label": "Captions",
|
|
1425
|
-
children: /* @__PURE__ */ jsx(
|
|
1426
|
+
children: /* @__PURE__ */ jsx(Captions, { className: "size-5" })
|
|
1426
1427
|
}
|
|
1427
1428
|
),
|
|
1428
1429
|
openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
|
|
@@ -1460,7 +1461,7 @@ function Video({
|
|
|
1460
1461
|
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"}`,
|
|
1461
1462
|
"aria-label": "Quality",
|
|
1462
1463
|
children: [
|
|
1463
|
-
/* @__PURE__ */ jsx(
|
|
1464
|
+
/* @__PURE__ */ jsx(Settings, { className: "size-4" }),
|
|
1464
1465
|
/* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
|
|
1465
1466
|
]
|
|
1466
1467
|
}
|
|
@@ -1485,7 +1486,7 @@ function Video({
|
|
|
1485
1486
|
onClick: toggleFullscreen,
|
|
1486
1487
|
className: "grid size-8 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80",
|
|
1487
1488
|
"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
1488
|
-
children: /* @__PURE__ */ jsx(
|
|
1489
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-7" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-7" })
|
|
1489
1490
|
}
|
|
1490
1491
|
)
|
|
1491
1492
|
] })
|
|
@@ -1642,48 +1643,6 @@ function formatTime(seconds) {
|
|
|
1642
1643
|
}
|
|
1643
1644
|
return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
|
|
1644
1645
|
}
|
|
1645
|
-
function PlayIcon({ className }) {
|
|
1646
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M8 5.14v13.72c0 .76.84 1.22 1.48.8l10.2-6.86a.96.96 0 0 0 0-1.6L9.48 4.34A.96.96 0 0 0 8 5.14Z" }) });
|
|
1647
|
-
}
|
|
1648
|
-
function PauseIcon({ className }) {
|
|
1649
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M7 5.5A1.5 1.5 0 0 1 8.5 4h1A1.5 1.5 0 0 1 11 5.5v13A1.5 1.5 0 0 1 9.5 20h-1A1.5 1.5 0 0 1 7 18.5v-13Zm6 0A1.5 1.5 0 0 1 14.5 4h1A1.5 1.5 0 0 1 17 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-13Z" }) });
|
|
1650
|
-
}
|
|
1651
|
-
function ForwardIcon({ className }) {
|
|
1652
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M5 5.14v13.72c0 .76.84 1.22 1.48.8l8.7-5.86a.96.96 0 0 0 0-1.6L6.48 4.34A.96.96 0 0 0 5 5.14Zm12.5-.64A1.5 1.5 0 0 0 16 6v12a1.5 1.5 0 0 0 3 0V6a1.5 1.5 0 0 0-1.5-1.5Z" }) });
|
|
1653
|
-
}
|
|
1654
|
-
function VolumeIcon({ className }) {
|
|
1655
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M4 9.5A2.5 2.5 0 0 1 6.5 7H9l5-4v18l-5-4H6.5A2.5 2.5 0 0 1 4 14.5v-5Zm12.5-2.15a1 1 0 0 1 1.4.2 7.5 7.5 0 0 1 0 8.9 1 1 0 1 1-1.6-1.2 5.5 5.5 0 0 0 0-6.5 1 1 0 0 1 .2-1.4Zm3-2.25a1 1 0 0 1 1.4.2 11.25 11.25 0 0 1 0 13.4 1 1 0 1 1-1.6-1.2 9.25 9.25 0 0 0 0-11.2 1 1 0 0 1 .2-1.2Z" }) });
|
|
1656
|
-
}
|
|
1657
|
-
function MutedIcon({ className }) {
|
|
1658
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M4 9.5A2.5 2.5 0 0 1 6.5 7H9l5-4v18l-5-4H6.5A2.5 2.5 0 0 1 4 14.5v-5Zm13.7.1a1 1 0 0 1 1.4 0l1.4 1.4 1.4-1.4a1 1 0 1 1 1.4 1.4L21.9 12l1.4 1.4a1 1 0 0 1-1.4 1.4l-1.4-1.4-1.4 1.4a1 1 0 1 1-1.4-1.4L19.1 12l-1.4-1.4a1 1 0 0 1 0-1Z" }) });
|
|
1659
|
-
}
|
|
1660
|
-
function FullscreenIcon({ className }) {
|
|
1661
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", className, children: /* @__PURE__ */ jsx(
|
|
1662
|
-
"path",
|
|
1663
|
-
{
|
|
1664
|
-
d: "M8.5 4H5.75A1.75 1.75 0 0 0 4 5.75V8.5M15.5 4h2.75A1.75 1.75 0 0 1 20 5.75V8.5M20 15.5v2.75A1.75 1.75 0 0 1 18.25 20H15.5M8.5 20H5.75A1.75 1.75 0 0 1 4 18.25V15.5",
|
|
1665
|
-
stroke: "currentColor",
|
|
1666
|
-
strokeWidth: "2",
|
|
1667
|
-
strokeLinecap: "round"
|
|
1668
|
-
}
|
|
1669
|
-
) });
|
|
1670
|
-
}
|
|
1671
|
-
function CaptionsIcon({ className }) {
|
|
1672
|
-
return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
|
|
1673
|
-
/* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
|
|
1674
|
-
/* @__PURE__ */ jsx("path", { d: "M6 12h4M6 15h8M14 12h4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
|
|
1675
|
-
] });
|
|
1676
|
-
}
|
|
1677
|
-
function AudioIcon({ className }) {
|
|
1678
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M12 3a1 1 0 0 0-1.707-.707l-4 4H4a2 2 0 0 0-2 2v3.414a2 2 0 0 0 2 2h2.293l4 4A1 1 0 0 0 12 17V3ZM17.5 8.5a1 1 0 0 1 1.414 0 6 6 0 0 1 0 8.486 1 1 0 1 1-1.414-1.414 4 4 0 0 0 0-5.657 1 1 0 0 1 0-1.415ZM15.086 10.914a1 1 0 0 1 1.414 0 3 3 0 0 1 0 4.243 1 1 0 0 1-1.414-1.414 1 1 0 0 0 0-1.415 1 1 0 0 1 0-1.414Z" }) });
|
|
1679
|
-
}
|
|
1680
|
-
function QualityIcon({ className }) {
|
|
1681
|
-
return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
|
|
1682
|
-
/* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "20", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
|
|
1683
|
-
/* @__PURE__ */ jsx("path", { d: "M8 4h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
|
|
1684
|
-
/* @__PURE__ */ jsx("path", { d: "M9 13.5v-3l1.5 1.5L12 10v3.5M14 10.5h2.5M14 12.5h2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
1685
|
-
] });
|
|
1686
|
-
}
|
|
1687
1646
|
|
|
1688
1647
|
export { DropZone, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
|
|
1689
1648
|
//# sourceMappingURL=index.js.map
|