-
+ {/*
+ */}
Date: Mon, 10 Mar 2025 21:55:55 +0700
Subject: [PATCH 05/10] feat/playlist: Embed playlist to media player
---
src/components/preview/Media.tsx | 229 ++++++++++++++++++++++---------
1 file changed, 165 insertions(+), 64 deletions(-)
diff --git a/src/components/preview/Media.tsx b/src/components/preview/Media.tsx
index a9a1213..a967a00 100644
--- a/src/components/preview/Media.tsx
+++ b/src/components/preview/Media.tsx
@@ -21,6 +21,7 @@ import "@vidstack/react/player/styles/default/layouts/audio.css";
import "@vidstack/react/player/styles/default/layouts/video.css";
import "@vidstack/react/player/styles/default/theme.css";
import { ChevronLeft, ChevronRight } from "lucide-react";
+import Link from "next/link";
import { useCallback, useRef, useState } from "react";
import { type z } from "zod";
@@ -28,7 +29,8 @@ import { PageLoader } from "~/components/layout";
import Icon from "~/components/ui/icon";
import useLoading from "~/hooks/useLoading";
-import { MediaPlayerIcons } from "~/lib/previewHelper";
+import { MediaPlayerIcons, getPreviewIcon } from "~/lib/previewHelper";
+import { cn, formatDate } from "~/lib/utils";
import { type Schema_File } from "~/types/schema";
@@ -37,8 +39,9 @@ import "~/styles/vidstack.css";
type Props = {
file: z.infer;
type: "video" | "audio";
+ playlist: z.infer[];
};
-export default function PreviewMedia({ file, type }: Props) {
+export default function PreviewMedia({ file, type, playlist }: Props) {
const player = useRef(null);
const [canPlay, setCanPlay] = useState(false);
@@ -85,7 +88,7 @@ export default function PreviewMedia({ file, type }: Props) {
seekBackwardButton: null,
seekForwardButton: null,
playButton: (
-
+
{canPlay ? (
@@ -144,6 +147,12 @@ export default function PreviewMedia({ file, type }: Props) {
+
-
-
-
- {/* Loop */}
-
-
-
-
-
- setIsLoop(true)}
+ <>
+
+
+
+
+ {/* Loop */}
+
+
+
+
+
-
- setIsLoop(false)}
- >
-
-
-
-
+ setIsLoop(true)}
+ >
+
+ setIsLoop(false)}
+ >
+
+
+
+
- {/* Playback Speed */}
-
+ {/* Audio Gain */}
+ [];
+ file: z.infer;
+ placement?: Menu.ItemsProps["placement"];
+}) {
+ return (
+
+
+
+
+ {playlist.map((item) => {
+ const isCurrent = `${item.name}#${item.size}` === `${file.name}#${file.size}`;
+
+ const Wrapper = ({ children, className }: React.PropsWithChildren<{ className?: string }>) =>
+ isCurrent ? (
+
+ {/* Thumbnail */}
+
+ );
+ })}
+
+
+ );
+}
From 4704211edeb1bb062292d8b783dcc0ce44fdd9e6 Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:56:15 +0700
Subject: [PATCH 06/10] fix: Reload preview cause to submit form
---
src/components/internal/ConfiguratorPage.Site.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/internal/ConfiguratorPage.Site.tsx b/src/components/internal/ConfiguratorPage.Site.tsx
index 0bd68eb..57f70b1 100644
--- a/src/components/internal/ConfiguratorPage.Site.tsx
+++ b/src/components/internal/ConfiguratorPage.Site.tsx
@@ -906,6 +906,7 @@ function FooterField({ form, onResetField }: FormProps) {
onClick={() => {
setContent(formatFooterContent(form.watch("site.footer"), form.getValues("site")));
}}
+ type='button'
>
Reload Preview
From 54e8c2a463a9a4856110a58884aeebd73e5ce2c3 Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:56:33 +0700
Subject: [PATCH 07/10] other: Remove test api route
---
src/app/api/test/fileSize/route.ts | 111 -----------------------------
1 file changed, 111 deletions(-)
delete mode 100644 src/app/api/test/fileSize/route.ts
diff --git a/src/app/api/test/fileSize/route.ts b/src/app/api/test/fileSize/route.ts
deleted file mode 100644
index 2f5ad7f..0000000
--- a/src/app/api/test/fileSize/route.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { type NextRequest, NextResponse } from "next/server";
-import stream from "stream";
-import { promisify } from "util";
-
-import { gdrive } from "~/lib/utils.server";
-
-const pipeline = promisify(stream.pipeline);
-const fileId = "1KvMU9sy8fQKKmVKU5xf_u3Y2JZefe0kt";
-
-export async function GET(request: NextRequest) {
- try {
- const start = Date.now();
- console.log("Fetching metadata", Date.now() - start);
- const meta = await gdrive.files.get({
- fileId,
- fields: "size,mimeType,name",
- supportsAllDrives: true,
- });
- const { data: metadata } = meta;
-
- console.log("Fetching file", Date.now() - start);
- // const data = await gdrive.files.get(
- // {
- // fileId: fileId,
- // alt: "media",
- // acknowledgeAbuse: true,
- // },
- // {
- // responseType: "stream",
- // },
- // );
-
- console.log("Setting headers", Date.now() - start);
- const headers = new Headers();
- headers.set("Content-Type", metadata.mimeType ?? "application/octet-stream");
- if (metadata.size) headers.set("Content-Length", metadata.size.toString());
- headers.set("Content-Disposition", `attachment; filename="${metadata.name}"`);
-
- // console.log("Streaming file", Date.now() - start);
- // const contentStream = data.data;
- // const webStream = new ReadableStream({
- // async start(controller) {
- // contentStream.on("data", (chunk) => {
- // controller.enqueue(chunk);
- // });
- // contentStream.on("end", () => {
- // controller.close();
- // });
- // contentStream.on("error", (err) => {
- // console.error(err);
- // controller.error(err);
- // });
- // },
- // cancel() {
- // contentStream.destroy();
- // },
- // });
-
- // console.log("Returning response", Date.now() - start);
- return new Response(
- new ReadableStream({
- async start(controller) {
- try {
- gdrive.files.get(
- {
- fileId: fileId,
- alt: "media",
- acknowledgeAbuse: true,
- supportsAllDrives: true,
- },
- {
- responseType: "stream",
- },
- (err, res) => {
- if (err) throw err;
- res?.data
- .on("data", (chunk) => {
- controller.enqueue(chunk);
- })
- .on("end", () => {
- controller.close();
- })
- .on("error", (err) => {
- console.error(err);
- controller.error(err);
- });
- },
- );
- } catch (error) {
- controller.error(error);
- console.error(error);
- }
- },
- }),
- {
- headers,
- },
- );
- } catch (error) {
- const e = error as Error;
- console.error(e);
- return NextResponse.json(
- {
- error: e.message,
- },
- {
- status: 500,
- },
- );
- }
-}
From 7b3b555ad42e31e9c54a51af321f93dcabafd7a0 Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:57:09 +0700
Subject: [PATCH 08/10] other: Add root & shared drive id check on dev server
---
src/app/api/internal/check/route.ts | 32 +++++++++++++++++++++++++++++
1 file changed, 32 insertions(+)
create mode 100644 src/app/api/internal/check/route.ts
diff --git a/src/app/api/internal/check/route.ts b/src/app/api/internal/check/route.ts
new file mode 100644
index 0000000..1e772c4
--- /dev/null
+++ b/src/app/api/internal/check/route.ts
@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+
+import { encryptionService } from "~/lib/utils.server";
+
+import config from "~/config/gIndex.config";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ if (process.env.NODE_ENV !== "development") {
+ throw new Error("This route is only available in development environment");
+ }
+
+ const rootId = await encryptionService.decrypt(config.apiConfig.rootFolder);
+ const sharedDriveId = config.apiConfig.sharedDrive
+ ? await encryptionService.decrypt(config.apiConfig.sharedDrive)
+ : undefined;
+
+ return NextResponse.json(
+ {
+ rootId,
+ sharedDriveId,
+ },
+ { status: 200 },
+ );
+ } catch (error) {
+ const e = error as Error;
+ console.error(e);
+ return new Response(e.message, { status: 500 });
+ }
+}
From 26334ef66b2192c133bedcf70624d0a4051e9f47 Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Mon, 10 Mar 2025 22:08:28 +0700
Subject: [PATCH 09/10] fix: `showGuideButton` on demo site
---
src/config/gIndex.config.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/config/gIndex.config.ts b/src/config/gIndex.config.ts
index 2a4f994..dab50a8 100644
--- a/src/config/gIndex.config.ts
+++ b/src/config/gIndex.config.ts
@@ -27,7 +27,7 @@ const config: z.input = {
*
* @default false
*/
- showGuideButton: false,
+ showGuideButton: true,
/**
* How long the cache will be stored in the browser
From 644fbd42dfe63cc3bad1880b2284deb13b0815ab Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Mon, 10 Mar 2025 22:09:01 +0700
Subject: [PATCH 10/10] fix: Add `Fragment` to `showGuideButton` conditional
rendering
---
src/components/layout/Navbar.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 7a3681b..f6858f0 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -256,7 +256,7 @@ export default function Navbar() {
className='mx-2 my-auto h-6'
/>
- {!!config.showGuideButton && (
+ {!!config.showGuideButton ? (
+ ) : (
+ <>
)}
+ {children}
+
+ ) : (
+
+ {children}
+
+ );
+
+ return (
+
+ {item.mimeType.includes("video") ? (
+ 
+ ) : (
+
+
+
+ ) : (
+
+
+ )}
+
+
+ {item.name}
+ {formatDate(item.modifiedTime)} +