241029 UI ux

database/package.json

@@ -10,6 +10,6 @@
   },
   "dependencies": {
     "drizzle-orm": "0.35.3",
-    "mysql2": "3.11.0"
+    "mysql2": "3.11.3"
   }
 }

next/next.config.mjs

@@ -12,6 +12,7 @@ const nextConfig = {
   //  ...config,
   //  optimization: { minimize: false },
   //}),
+  serverExternalPackages: ['mysql2'],
 };
 
 export default nextConfig;

next/package.json

@@ -15,7 +15,7 @@
     "drizzle-orm": "0.35.3",
     "mediasoup": "^3.14.15",
     "mediasoup-client": "^3.7.17",
-    "mysql2": "3.11.0",
+    "mysql2": "3.11.3",
     "next": "^15.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

next/src/app/broadcast/[broadcastId]/page.tsx

@@ -1,9 +1,27 @@
+import clsx from 'clsx';
 
 import { notFound } from 'next/navigation';
-import { getBroadcastIdStatus } from '@/lib/broadcastIds';
 
+import { getBroadcastIdStatus } from '@/lib/broadcastIds';
 import StreamIdChecker from '@/components/StreamIdChecker';
 
+import Panel from '@/components/Panel';
+import BroadcastIdPanel from '@/components/BroadcastIdPanel';
+import ObsBroadcastUrlPanel from '@/components/ObsBroadcastUrlPanel';
+import StreamIdPanel from '@/components/StreamIdPanel';
+
+/**
+ * IDを発行した配信者用のページ
+ * 
+ * ID、有効無効、配信中なら視聴用URLを表示します
+ * 
+ * 有効/無効はサーバサイドで取得・表示します
+ * リアルタイム性が有りませんが、管理者と連絡して有効化しますから
+ * 再読み込みしないと表示内容が変化しない方法で良いと考えました
+ *
+ * 視聴用URLは配信状況に応じてリアルタイムに変化しますので、
+ * クライアントサイドでポーリングする方法をとります
+ */
 const BroadcasterPage: React.FC<{
   params: Promise<{ broadcastId: string }>
 }> = async ({ params }) => {
@@ -16,23 +34,21 @@ const BroadcasterPage: React.FC<{
   }
 
   const { isAvailable } = broadcastIdStatus;
+  const obsBroadcastUrl = `${process.env.HOST_URL}/api/whip/${broadcastId}`;
 
   return (
-    <div>
-      <div>あなたの配信用ページ</div>
-      <div>あなたの配信用ID : {broadcastId}</div>
-      <div>
-        配信用IDの有効/無効 : 
-        {isAvailable ? '有効' : '無効'}
-      </div>
-
-      <div>
-        <div>
-          OBS配信URL : 
-          {`${process.env.HOST_URL}/api/whip/${broadcastId}`}
-        </div>
-        <StreamIdChecker broadcastId={broadcastId} />
-      </div>
+    <div className={clsx(
+      'flex flex-col gap-2',
+      'lg:px-52 md:px-12',
+    )}>
+      <BroadcastIdPanel 
+        broadcastId={broadcastId}
+        isAvailable={isAvailable}
+      />
+      <ObsBroadcastUrlPanel
+        obsBroadcastUrl={obsBroadcastUrl}
+      />
+      <StreamIdPanel broadcastId={broadcastId} />
     </div>
   );
 };

next/src/app/broadcast/page.tsx

@@ -1,27 +1,26 @@
 
 import clsx from 'clsx';
-import GetIdButton from '@/components/GetIdButton';
+
+import Panel from '@/components/Panel';
 import GetNewIdButton from '@/components/GetNewIdButton';
 
-/**
- * Broadcast setting page
- *
- * Videmus has several routers in its webrtc server.
- * To broadcast, users should reserve a router and get its id
- * from webrtc server.
- * 
- * On successful id acquisition:
- *   router id is returned in its searchParams.
- *   shown in page to broadcast & stream.
- * Failure patterns:
- *   1. all routers are used
- *   2. wrong search parameters are given manually
- *
- */
 const BroadcastPage: React.FC = () => (
-  <div>
-    <div>配信ID生成用ページ</div>
-    <GetNewIdButton />
+  <div className={clsx(
+    'flex flex-col gap-2 items-center',
+    'lg:px-52 md:px-12',
+  )}>
+    <Panel 
+      className='w-full' 
+      title='最初の配信準備'
+    >
+      <div>
+        配信IDはあなた専用です、管理者以外には教えないで下さい
+      </div>
+      <div>
+        その代わり、同じIDで何度でも配信できます！
+      </div>
+      <GetNewIdButton />
+    </Panel>
   </div>
 );
 

next/src/app/globals.css

@@ -2,26 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

next/src/app/layout.tsx

@@ -1,35 +1,36 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next';
+import './globals.css';
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+import clsx from 'clsx';
+import Header from '@/components/Header';
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Videmus Broadcast',
+  description: '小規模・低遅延動画配信サーバ',
 };
 
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang='jp'>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={clsx(
+          'bg-background antialiased w-full min-h-screen',
+          'text-foreground',
+        )}
       >
-        {children}
+        <Header />
+        <div className={clsx(
+          'p-2',
+        )}>
+          {children}
+        </div>
       </body>
     </html>
   );
 }
+

next/src/app/page.tsx

@@ -1,101 +1,41 @@
-import Image from "next/image";
+import clsx from 'clsx';
+
+import Link from 'next/link';
+
+import Panel from '@/components/Panel';
+import Button from '@/components/Button';
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className={clsx(
+      'flex flex-col gap-2',
+      'lg:px-52 md:px-12',
+    )}>
+      <Panel title='Videmusについて'>
+        <div>
+          小規模・低遅延の動画配信Webアプリケーションです
+        </div>
+        <div>
+          OBSのWHIPサービスから動画配信を行えます
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </Panel>
+      <div className={clsx(
+        'flex flex-col',
+        'md:grid md:grid-cols-2 gap-2'
+      )}>
+        <Panel title='配信する'>
+          <Link href='/broadcast'>
+            <Button>
+              新規配信ページへ
+            </Button>
+          </Link>
+        </Panel>
+        <Panel title='視聴する'>
+          <div>
+            配信者から視聴用URLを教えてもらってアクセスしましょう
+          </div>
+        </Panel>
+      </div>
     </div>
   );
 }

next/src/app/stream/[streamId]/page.tsx

@@ -11,7 +11,6 @@ const StreamPage: React.FC<{
 
   return (
     <div>
-      <div>ストリーミング用ページ</div>
       <WebRtcVideo streamId={streamId} />
     </div>
   );