@geekapps/silo-elements-nextjs 0.0.5 → 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 +10 -60
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/index.js +10 -60
- 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
|
|
|
@@ -779,15 +780,6 @@ function Video({
|
|
|
779
780
|
}
|
|
780
781
|
);
|
|
781
782
|
}, []);
|
|
782
|
-
useEffect(() => {
|
|
783
|
-
if (!chromeRef.current) return;
|
|
784
|
-
gsap.to(chromeRef.current, {
|
|
785
|
-
opacity: controlsVisible ? 1 : 0,
|
|
786
|
-
y: controlsVisible ? 0 : 10,
|
|
787
|
-
duration: 0.22,
|
|
788
|
-
ease: "power2.out"
|
|
789
|
-
});
|
|
790
|
-
}, [controlsVisible]);
|
|
791
783
|
useEffect(() => {
|
|
792
784
|
if (sourceIndex >= parsed.sources.length) {
|
|
793
785
|
setSourceIndex(initialSourceIndex);
|
|
@@ -1264,7 +1256,7 @@ function Video({
|
|
|
1264
1256
|
"div",
|
|
1265
1257
|
{
|
|
1266
1258
|
className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
|
|
1267
|
-
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" }) })
|
|
1268
1260
|
}
|
|
1269
1261
|
),
|
|
1270
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" }) }),
|
|
@@ -1274,7 +1266,7 @@ function Video({
|
|
|
1274
1266
|
{
|
|
1275
1267
|
ref: chromeRef,
|
|
1276
1268
|
onClick: togglePlay,
|
|
1277
|
-
className: `absolute inset-0 z-30 flex flex-col justify-between bg-
|
|
1269
|
+
className: `absolute inset-0 z-30 flex flex-col justify-between bg-linear-to-b from-black/55 via-black/10 to-black/75 transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
|
|
1278
1270
|
children: [
|
|
1279
1271
|
/* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "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: [
|
|
1280
1272
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -1354,7 +1346,7 @@ function Video({
|
|
|
1354
1346
|
onClick: togglePlay,
|
|
1355
1347
|
className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
|
|
1356
1348
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
1357
|
-
children: isPlaying ? /* @__PURE__ */ jsx(
|
|
1349
|
+
children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-7" }) : /* @__PURE__ */ jsx(Play, { className: "size-7" })
|
|
1358
1350
|
}
|
|
1359
1351
|
),
|
|
1360
1352
|
/* @__PURE__ */ jsx(
|
|
@@ -1364,7 +1356,7 @@ function Video({
|
|
|
1364
1356
|
onClick: () => seekRelative(10),
|
|
1365
1357
|
className: "hidden size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80 sm:grid",
|
|
1366
1358
|
"aria-label": "Forward 10 seconds",
|
|
1367
|
-
children: /* @__PURE__ */ jsx(
|
|
1359
|
+
children: /* @__PURE__ */ jsx(FastForward, { className: "size-7" })
|
|
1368
1360
|
}
|
|
1369
1361
|
),
|
|
1370
1362
|
/* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 text-sm font-semibold text-white/75 sm:flex", children: [
|
|
@@ -1381,7 +1373,7 @@ function Video({
|
|
|
1381
1373
|
onClick: () => setIsMuted((value) => !value),
|
|
1382
1374
|
className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
|
|
1383
1375
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
1384
|
-
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
|
|
1376
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-6" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-6" })
|
|
1385
1377
|
}
|
|
1386
1378
|
),
|
|
1387
1379
|
/* @__PURE__ */ jsx(
|
|
@@ -1410,7 +1402,7 @@ function Video({
|
|
|
1410
1402
|
onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"),
|
|
1411
1403
|
className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
|
|
1412
1404
|
"aria-label": "Audio track",
|
|
1413
|
-
children: /* @__PURE__ */ jsx(
|
|
1405
|
+
children: /* @__PURE__ */ jsx(AudioLines, { className: "size-5" })
|
|
1414
1406
|
}
|
|
1415
1407
|
),
|
|
1416
1408
|
openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
|
|
@@ -1431,7 +1423,7 @@ function Video({
|
|
|
1431
1423
|
onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"),
|
|
1432
1424
|
className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
|
|
1433
1425
|
"aria-label": "Captions",
|
|
1434
|
-
children: /* @__PURE__ */ jsx(
|
|
1426
|
+
children: /* @__PURE__ */ jsx(Captions, { className: "size-5" })
|
|
1435
1427
|
}
|
|
1436
1428
|
),
|
|
1437
1429
|
openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
|
|
@@ -1469,7 +1461,7 @@ function Video({
|
|
|
1469
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"}`,
|
|
1470
1462
|
"aria-label": "Quality",
|
|
1471
1463
|
children: [
|
|
1472
|
-
/* @__PURE__ */ jsx(
|
|
1464
|
+
/* @__PURE__ */ jsx(Settings, { className: "size-4" }),
|
|
1473
1465
|
/* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
|
|
1474
1466
|
]
|
|
1475
1467
|
}
|
|
@@ -1494,7 +1486,7 @@ function Video({
|
|
|
1494
1486
|
onClick: toggleFullscreen,
|
|
1495
1487
|
className: "grid size-8 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80",
|
|
1496
1488
|
"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
1497
|
-
children: /* @__PURE__ */ jsx(
|
|
1489
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "size-7" }) : /* @__PURE__ */ jsx(Maximize, { className: "size-7" })
|
|
1498
1490
|
}
|
|
1499
1491
|
)
|
|
1500
1492
|
] })
|
|
@@ -1651,48 +1643,6 @@ function formatTime(seconds) {
|
|
|
1651
1643
|
}
|
|
1652
1644
|
return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
|
|
1653
1645
|
}
|
|
1654
|
-
function PlayIcon({ className }) {
|
|
1655
|
-
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" }) });
|
|
1656
|
-
}
|
|
1657
|
-
function PauseIcon({ className }) {
|
|
1658
|
-
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" }) });
|
|
1659
|
-
}
|
|
1660
|
-
function ForwardIcon({ className }) {
|
|
1661
|
-
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" }) });
|
|
1662
|
-
}
|
|
1663
|
-
function VolumeIcon({ className }) {
|
|
1664
|
-
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" }) });
|
|
1665
|
-
}
|
|
1666
|
-
function MutedIcon({ className }) {
|
|
1667
|
-
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" }) });
|
|
1668
|
-
}
|
|
1669
|
-
function FullscreenIcon({ className }) {
|
|
1670
|
-
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", className, children: /* @__PURE__ */ jsx(
|
|
1671
|
-
"path",
|
|
1672
|
-
{
|
|
1673
|
-
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",
|
|
1674
|
-
stroke: "currentColor",
|
|
1675
|
-
strokeWidth: "2",
|
|
1676
|
-
strokeLinecap: "round"
|
|
1677
|
-
}
|
|
1678
|
-
) });
|
|
1679
|
-
}
|
|
1680
|
-
function CaptionsIcon({ className }) {
|
|
1681
|
-
return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
|
|
1682
|
-
/* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
|
|
1683
|
-
/* @__PURE__ */ jsx("path", { d: "M6 12h4M6 15h8M14 12h4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
|
|
1684
|
-
] });
|
|
1685
|
-
}
|
|
1686
|
-
function AudioIcon({ className }) {
|
|
1687
|
-
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" }) });
|
|
1688
|
-
}
|
|
1689
|
-
function QualityIcon({ className }) {
|
|
1690
|
-
return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
|
|
1691
|
-
/* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "20", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
|
|
1692
|
-
/* @__PURE__ */ jsx("path", { d: "M8 4h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
|
|
1693
|
-
/* @__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" })
|
|
1694
|
-
] });
|
|
1695
|
-
}
|
|
1696
1646
|
|
|
1697
1647
|
export { DropZone, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
|
|
1698
1648
|
//# sourceMappingURL=index.js.map
|