Merge pull request #148 from kounoike:improvement/frontend-navigation

フロントエンドのナビゲーション改善

.devcontainer/docker-compose.yml

@@ -13,11 +13,10 @@ services:
       - ../..:/workspaces:cached
       - /etc/timezone:/etc/timezone:ro
       - /etc/localtime:/etc/localtime:ro
-      - /qnap/video/recorded_develop:/recorded:rw
-      - /qnap/video/encoded_develop:/encoded:rw
-      - /qnap/video/transcribed_develop:/transcribed:rw
-      - index-volume:/document_index:rw
-      - model-volume:/models:rw
+      - /qnap/video/develop/recorded:/recorded:rw
+      - /qnap/video/develop/encoded:/encoded:rw
+      - /qnap/video/develop/transcribed:/transcribed:rw
+      - /qnap/video/develop/index:/index:rw
     # network_mode: service:tuner
     command: sleep infinity
     environment:
@@ -57,8 +56,7 @@ services:
       - /etc/localtime:/etc/localtime:ro
       - ./mirakc/epg:/var/lib/mirakc/epg:rw
       - ./mirakc/config/config.yml:/etc/mirakc/config.yml:ro
-      - /qnap/video/recorded_develop:/recorded:rw
-      - /qnap/video/encoded_develop:/encoded:rw
+      - /qnap/video/develop/recorded:/recorded:rw
       - /var/run/pcscd:/var/run/pcscd:rw
     devices:
       # - /dev/px4video0
@@ -87,5 +85,3 @@ services:
 volumes:
   mysql-db:
   redis-db:
-  index-volume:
-  model-volume:

frontend/next.config.js

@@ -6,9 +6,16 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  output: "export",
-  distDir: "dist",
   trailingSlash: true,
+  redirects: async () => {
+    return [
+      {
+        source: "/",
+        destination: "/program/search",
+        permanent: false,
+      },
+    ]
+  },
 }
 
 module.exports = nextConfig

frontend/src/app/page.tsx → frontend/src/app/program/search/page.tsx

@@ -10,7 +10,7 @@ import {
   Toolbar,
   Typography,
   Link,
-  Box,
+  MenuItem,
 } from "@mui/material"
 import { useAsync, useDebounce } from "react-use"
 import Fuse from "fuse.js"
@@ -51,7 +51,7 @@ export default function Home() {
     const [document, index] = await Promise.all([documentPromise, indexPromise])
 
     const fuse = new Fuse(document, fuseOptions, index)
-    return fuse
+    return { document, index, fuse }
   })
 
   const [query, setQuery] = useState<string>("")
@@ -80,7 +80,7 @@ export default function Home() {
       setResults(undefined)
       return
     }
-    setResults(asyncState.value.search(debouncedQuery.normalize("NFKC")))
+    setResults(asyncState.value.fuse.search(debouncedQuery.normalize("NFKC")))
   }, [debouncedQuery, asyncState.value])
 
   const renderRow = ({ index, style }: ListChildComponentProps) => {
@@ -112,17 +112,24 @@ export default function Home() {
             className={styles.logo}
             width={1280}
             height={313}
-
           />
         </main>
       ) : (
         <>
           <AppBar position="sticky" className={styles.appbar}>
             <Toolbar>
-              <Typography variant="h6" className={styles.title}>
-                視聴ちゃん 番組検索
+              <Typography
+                variant="h6"
+                className={styles.title}
+                sx={{ flexGrow: 1 }}
+              >
+                視聴ちゃん 番組検索 {asyncState.value?.document.length}件
               </Typography>
-              <div className={styles.grow} />
+              <MenuItem
+                onClick={() => (window.location.href = "/recorded/search")}
+              >
+                <Typography>→録画検索</Typography>
+              </MenuItem>
               <IconButton>
                 <Image
                   alt="視聴ちゃんアイコン"

frontend/src/app/recorded/search/page.tsx

@@ -10,6 +10,7 @@ import {
   Typography,
   Link,
   ListItemIcon,
+  MenuItem,
 } from "@mui/material"
 import { useAsync } from "react-use"
 import Fuse from "fuse.js"
@@ -194,10 +195,18 @@ export default function SearchPage() {
         <>
           <AppBar position="sticky" className={styles.appbar}>
             <Toolbar>
-              <Typography variant="h6" className={styles.title}>
-                視聴ちゃん 録画検索
+              <Typography
+                variant="h6"
+                className={styles.title}
+                sx={{ flexGrow: 1 }}
+              >
+                視聴ちゃん 録画検索 {asyncState.value?.document.length}件
               </Typography>
-              <div className={styles.grow} />
+              <MenuItem
+                onClick={() => (window.location.href = "/program/search")}
+              >
+                <Typography>→番組検索</Typography>
+              </MenuItem>
               <IconButton>
                 <Image
                   alt="視聴ちゃんアイコン"

indexer/src/app.ts

@@ -135,14 +135,8 @@ async function initializeProgramDocument(connection: mysql.Connection) {
   }
 
   const index = Fuse.createIndex(options.keys ?? [], document)
-  fs.writeFileSync(
-    "/document_index/program_document.json",
-    JSON.stringify(document)
-  )
-  fs.writeFileSync(
-    "/document_index/program_index.json",
-    JSON.stringify(index.toJSON())
-  )
+  fs.writeFileSync("/index/program_document.json", JSON.stringify(document))
+  fs.writeFileSync("/index/program_index.json", JSON.stringify(index.toJSON()))
 
   const [ret, _] = await connection.execute<OkPacket>(
     `
@@ -267,14 +261,8 @@ async function initializeRecordedFiles(connection: mysql.Connection) {
   }
 
   const index = Fuse.createIndex(options.keys ?? [], document)
-  fs.writeFileSync(
-    "/document_index/recorded_document.json",
-    JSON.stringify(document)
-  )
-  fs.writeFileSync(
-    "/document_index/recorded_index.json",
-    JSON.stringify(index.toJSON())
-  )
+  fs.writeFileSync("/index/recorded_document.json", JSON.stringify(document))
+  fs.writeFileSync("/index/recorded_index.json", JSON.stringify(index.toJSON()))
 
   const [ret, _] = await connection.execute<OkPacket>(
     `