Merge pull request #102 from cniajp/feature/dk-monitor-page

Author: dero1to

src/app/page.tsx

@@ -19,7 +19,7 @@ export default function Home() {
           className="w-full h-auto"
         />
       </div>
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-3 lg:text-left">
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-2 xl:grid-cols-4 lg:text-left">
         <div className="text-center my-auto">{dkEventAbbr}</div>
         <Link
           href="/break-dk/menu/1"
@@ -51,6 +51,21 @@ export default function Home() {
           </p>
         </Link>
 
+        <Link
+          href="/break-dk/monitor"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Monitor{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            モニター用のページはこちら.
+          </p>
+        </Link>
+
         <div className="text-center my-auto">{eventAbbr}</div>
         <Link
           href="/break/menu/1"

src/pages/break-dk/monitor/index.tsx

@@ -53,6 +53,21 @@ export default function MonitorPage() {
     }
   }, [talks])
 
+  // trackのvideoId（m3u8 URL）をコピーする関数
+  const copyStreamingUrl = async (track: Track) => {
+    if (track.videoId) {
+      try {
+        await navigator.clipboard.writeText(track.videoId)
+        alert(`配信URL をコピーしました:\n${track.videoId}`)
+      } catch (err) {
+        console.error('URLのコピーに失敗しました:', err)
+        alert('URLのコピーに失敗しました')
+      }
+    } else {
+      alert('配信URLが見つかりません')
+    }
+  }
+
   // 現在時刻をサーバー時刻基準で1秒ごとに更新
   useEffect(() => {
     startTimeSync()
@@ -159,7 +174,13 @@ export default function MonitorPage() {
               } bg-black/40 backdrop-blur-sm`}
             >
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-2xl font-bold">Track {track.name}</h2>
+                <h2
+                  className="text-2xl font-bold hover:text-blue-400 cursor-pointer transition-colors"
+                  onClick={() => copyStreamingUrl(track)}
+                  title="クリックして配信URLをコピー"
+                >
+                  Track {track.name}
+                </h2>
                 <div
                   className={`px-3 py-1 rounded-full text-sm font-semibold ${
                     isOnAir