#295

frontend/src/App.tsx

@@ -19,6 +19,7 @@ import PostNewPage from '@/pages/posts/PostNewPage'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import SettingPage from '@/pages/users/SettingPage'
+import TheatreDetailPage from '@/pages/theatres/TheatreDetailPage'
 import WikiDetailPage from '@/pages/wiki/WikiDetailPage'
 import WikiDiffPage from '@/pages/wiki/WikiDiffPage'
 import WikiEditPage from '@/pages/wiki/WikiEditPage'
@@ -47,6 +48,7 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 	    <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
 	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
 	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
+	    <Route path="/theatres/:id" element={<TheatreDetailPage user={user}/>}/>
 	    <Route path="/wiki" element={<WikiSearchPage/>}/>
 	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
 	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>

frontend/src/components/TopNav.tsx

@@ -79,6 +79,8 @@ export default (({ user }: Props) => {
 	  { name: '上位タグ', to: '/tags/implications', visible: false },
 	  { name: 'ニコニコ連携', to: '/tags/nico' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
+      { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
+	  { name: '一覧', to: '/theatres' }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -1,8 +1,85 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useParams } from 'react-router-dom'
+
+import PostEmbed from '@/components/PostEmbed'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { apiGet, apiPatch, apiPut } from '@/lib/api'
+import { fetchPost } from '@/lib/posts'
+
 import type { FC } from 'react'
 
+import type { Theatre } from '@/types'
+
+type TheatreInfo = {
+    hostFlg:        boolean
+    postId:         number | null
+    postStartedAt:  string | null }
+
+type Props = { user: User }
+
+
+export default (({ user }: Props) => {
+  const { id } = useParams ()
+
+  const [loading, setLoading] = useState (false)
+  const [hostFlg, setHostFlg] = useState (false)
+  const [theatre, setTheatre] = useState<Theatre | null> (null)
+  const [theatreInfo, setTheatreInfo] =
+      useState<TheatreInfo> ({ hostFlg: false, postId: null, postStartedAt: null })
+  const [post, setPost] = useState<Post | null> (null)
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    void (async () => {
+      setTheatre (await apiGet<Theatre> (`/theatres/${ id }`))
+    }) ()
+
+    const interval = setInterval (async () => {
+      setTheatreInfo (await apiPut<TheatreInfo> (`/theatres/${ id }/watching`))
+    }, 1_000)
+
+    return () => clearInterval (interval)
+  }, [id])
+
+  useEffect (() => {
+    if (!(theatreInfo.hostFlg) || loading)
+      return
+
+    if (theatreInfo.postId == null)
+      {
+	void (async () => {
+	  setLoading (true)
+	  await apiPatch<void> (`/theatres/${ id }/next_post`)
+	  setLoading (false)
+	}) ()
+	return
+      }
+  }, [theatreInfo])
+
+  useEffect (() => {
+    if (theatreInfo.postId == null)
+      return
+
+    void (async () => {
+      setPost (await fetchPost (theatreInfo.postId))
+    }) ()
+  }, [theatreInfo.postId, theatreInfo.postStartedAt])
 
-export default (() => {
   return (
       <MainArea>
+	<Helmet>
+	  {theatre && (
+	      <title>
+		{'上映会場'
+		 + (theatre.name ? `『${ theatre.name }』` : ` #${ theatre.id }`)
+		 + ` | ${ SITE_TITLE }`}
+	      </title>)}
+	</Helmet>
+
+	{post && <PostEmbed post={post}/>}
       </MainArea>)
-}) satisfies FC
+}) satisfies FC<Props>

frontend/src/types.ts

@@ -75,6 +75,15 @@ export type Tag = {
     children?:      Tag[]
     matchedAlias?:  string | null }
 
+export type Theatre = {
+    id:                   number
+    name:                 string | null
+    opensAt:              string
+    closesAt:             string | null
+    createdByUser:        { id: number; name: string }
+    createdAt:            string
+    updatedAt:            string }
+
 export type User = {
     id:               number
     name:             string | null