#297

backend/app/controllers/theatre_comments_controller.rb

@@ -0,0 +1,32 @@
+class TheatreCommentsController < ApplicationController
+  def index
+    no_gt = params[:no_gt].to_i
+    no_gt = 0 if no_gt.negative?
+
+    comments = TheatreComment
+               .where(theatre_id: params[:theatre_id])
+               .where('no > ?', no_gt)
+               .order(:no)
+
+    render json: comments.as_json(include: { user: { only: [:id, :name] } })
+  end
+
+  def create
+    return head :unauthorized unless current_user
+
+    content = params[:content]
+    return head :unprocessable_entity if content.blank?
+
+    theatre = Theatre.find_by(id: params[:theatre_id])
+    return head :not_found unless theatre
+
+    comment = nil
+    theatre.with_lock do
+      no = theatre.next_comment_no
+      comment = TheatreComment.create!(theatre:, no:, user: current_user, content:)
+      theatre.update!(next_comment_no: no + 1)
+    end
+
+    render json: comment, status: :created
+  end
+end

backend/app/models/theatre_comment.rb

@@ -1,8 +1,8 @@
 class TheatreComment < ApplicationRecord
-  include MyDiscard
+  include Discard::Model
 
   self.primary_key = :theatre_id, :no
 
   belongs_to :theatre
+  belongs_to :user
 end
-

backend/config/routes.rb

@@ -78,5 +78,7 @@ Rails.application.routes.draw do
       put :watching
       patch :next_post
     end
+
+    resources :comments, controller: :theatre_comments, only: [:index, :create]
   end
 end

frontend/src/components/TopNav.tsx

@@ -79,9 +79,11 @@ export default (({ user }: Props) => {
 	  { name: '上位タグ', to: '/tags/implications', visible: false },
 	  { name: 'ニコニコ連携', to: '/tags/nico' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
-      // TODO: 本実装時に消す．
+      { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
-      // { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
+          { name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
-      //     { name: '一覧', to: '/theatres' }] },
+          { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
+	  { name: <>ニジカ放送局第&thinsp;1&thinsp;チャンネル</>,
+	    to: '//www.youtube.com/watch?v=DCU3hL4Uu6A' }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },
@@ -92,7 +94,7 @@ export default (({ user }: Props) => {
 	    visible: wikiPageFlg },
 	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
 	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
-      { name: 'ユーザ', to: '/users', subMenu: [
+      { name: 'ユーザ', to: '/users/settings', subMenu: [
 	  { name: '一覧', to: '/users', visible: false },
 	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
 	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -3,84 +3,221 @@ import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
 import PostEmbed from '@/components/PostEmbed'
+import PrefetchLink from '@/components/PrefetchLink'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
 import MainArea from '@/components/layout/MainArea'
+import SidebarComponent from '@/components/layout/SidebarComponent'
 import { SITE_TITLE } from '@/config'
-import { apiGet, apiPatch, apiPut } from '@/lib/api'
+import { apiGet, apiPatch, apiPost, apiPut } from '@/lib/api'
 import { fetchPost } from '@/lib/posts'
+import { dateString } from '@/lib/utils'
 
 import type { FC } from 'react'
 
-import type { NiconicoMetadata, NiconicoViewerHandle, Post, Theatre } from '@/types'
+import type { NiconicoMetadata,
+	      NiconicoViewerHandle,
+	      Post,
+	      Theatre,
+	      TheatreComment } from '@/types'
 
 type TheatreInfo = {
     hostFlg:        boolean
     postId:         number | null
     postStartedAt:  string | null }
 
+const INITIAL_THEATRE_INFO = { hostFlg: false, postId: null, postStartedAt: null } as const
+
 
 export default (() => {
   const { id } = useParams ()
 
+  const commentsRef = useRef<HTMLDivElement> (null)
   const embedRef = useRef<NiconicoViewerHandle> (null)
+  const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
+  const videoLengthRef = useRef (0)
+  const lastCommentNoRef = useRef (0)
 
+  const [comments, setComments] = useState<TheatreComment[]> ([])
+  const [content, setContent] = useState ('')
   const [loading, setLoading] = useState (false)
+  const [sending, setSending] = useState (false)
   const [theatre, setTheatre] = useState<Theatre | null> (null)
-  const [theatreInfo, setTheatreInfo] =
+  const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
-      useState<TheatreInfo> ({ hostFlg: false, postId: null, postStartedAt: null })
   const [post, setPost] = useState<Post | null> (null)
-  const [videoLength, setVideoLength] = useState (9_999_999_999)
+  const [videoLength, setVideoLength] = useState (0)
+
+  useEffect (() => {
+    theatreInfoRef.current = theatreInfo
+  }, [theatreInfo])
+
+  useEffect (() => {
+    videoLengthRef.current = videoLength
+  }, [videoLength])
+
+  useEffect (() => {
+    lastCommentNoRef.current = comments.at (-1)?.no ?? 0
+  }, [comments])
 
   useEffect (() => {
     if (!(id))
       return
 
+    let cancelled = false
+
+    setComments ([])
+    setTheatre (null)
+    setPost (null)
+    setTheatreInfo (INITIAL_THEATRE_INFO)
+    setVideoLength (0)
+    lastCommentNoRef.current = 0
+
     void (async () => {
-      setTheatre (await apiGet<Theatre> (`/theatres/${ id }`))
+      try
+      {
+	const data = await apiGet<Theatre> (`/theatres/${ id }`)
+	if (!(cancelled))
+	  setTheatre (data)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
     }) ()
 
-    const interval = setInterval (async () => {
+    return () => {
-      if (theatreInfo.hostFlg
+      cancelled = true
-	  && theatreInfo.postStartedAt
+    }
-	  && ((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ()
+  }, [id])
-	      > videoLength))
-	setTheatreInfo ({ hostFlg: true, postId: null, postStartedAt: null })
-      else
-	setTheatreInfo (await apiPut<TheatreInfo> (`/theatres/${ id }/watching`))
-    }, 1_000)
-
-    return () => clearInterval (interval)
-  }, [id, theatreInfo.hostFlg, theatreInfo.postStartedAt, videoLength])
 
   useEffect (() => {
-    if (!(theatreInfo.hostFlg) || loading)
+    commentsRef.current?.scrollTo ({
+	top: commentsRef.current.scrollHeight,
+	behavior: 'smooth' })
+  }, [commentsRef])
+
+  useEffect (() => {
+    if (!(id))
       return
 
-    if (theatreInfo.postId == null)
+    let cancelled = false
-      {
+    let running = false
-	void (async () => {
+
-	  setLoading (true)
+    const tick = async () => {
-	  await apiPatch<void> (`/theatres/${ id }/next_post`)
+      if (running)
-	  setLoading (false)
-	}) ()
 	return
+
+      running = true
+
+      try
+      {
+	const newComments = await apiGet<TheatreComment[]> (
+	    `/theatres/${ id }/comments`,
+	    { params: { no_gt: lastCommentNoRef.current } })
+
+	if (!(cancelled) && newComments.length > 0)
+	  {
+	    lastCommentNoRef.current = newComments[newComments.length - 1].no
+	    setComments (prev => [...prev, ...newComments])
+	  }
+
+	const currentInfo = theatreInfoRef.current
+	const ended =
+	    currentInfo.hostFlg
+	    && currentInfo.postStartedAt
+	    && ((Date.now () - (new Date (currentInfo.postStartedAt)).getTime ())
+	        > videoLengthRef.current + 3_000)
+
+	if (ended)
+	  {
+	    if (!(cancelled))
+	      setTheatreInfo (prev => ({ ...prev, postId: null, postStartedAt: null }))
+
+	    return
+	  }
+
+	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
+	if (!(cancelled))
+	  setTheatreInfo (nextInfo)
       }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	running = false
+      }
+    }
+
+    tick ()
+    const interval = setInterval (() => tick (), 1_000)
+
+    return () => {
+      cancelled = true
+      clearInterval (interval)
+    }
+  }, [id])
+
+  useEffect (() => {
+    if (!(id) || !(theatreInfo.hostFlg) || loading || theatreInfo.postId != null)
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      setLoading (true)
+
+      try
+      {
+	await apiPatch<void> (`/theatres/${ id }/next_post`)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	if (!(cancelled))
+	  setLoading (false)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
   }, [id, loading, theatreInfo.hostFlg, theatreInfo.postId])
 
   useEffect (() => {
     if (theatreInfo.postId == null)
       return
 
+    let cancelled = false
+
     void (async () => {
-      setPost (await fetchPost (String (theatreInfo.postId)))
+      try
+      {
+	const nextPost = await fetchPost (String (theatreInfo.postId))
+	if (!(cancelled))
+	  setPost (nextPost)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
     }) ()
+
+    return () => {
+      cancelled = true
+    }
   }, [theatreInfo.postId, theatreInfo.postStartedAt])
 
   const syncPlayback = (meta: NiconicoMetadata) => {
     if (!(theatreInfo.postStartedAt))
       return
 
-    const targetTime =
+    const targetTime = Math.min (
-	((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ())
+	Math.max (0, Date.now () - (new Date (theatreInfo.postStartedAt)).getTime ()),
+	videoLength)
 
     const drift = Math.abs (meta.currentTime - targetTime)
 
@@ -89,7 +226,7 @@ export default (() => {
   }
 
   return (
-      <MainArea>
+      <div className="md:flex md:flex-1">
 	<Helmet>
 	  {theatre && (
 	      <title>
@@ -99,16 +236,82 @@ export default (() => {
 	      </title>)}
 	</Helmet>
 
-	{post && (
+	<div className="hidden md:block">
-	    <PostEmbed
+	  <TagDetailSidebar post={post ?? null}/>
-		ref={embedRef}
+	</div>
-		post={post}
+
-		onLoadComplete={info => {
+	<MainArea>
-		  embedRef.current?.play ()
+	  {post ? (
-		  setVideoLength (info.lengthInSeconds * 1_000)
+	      <>
-		}}
+		<PostEmbed
-		onMetadataChange={meta => {
+		    ref={embedRef}
-		  syncPlayback (meta)
+		    post={post}
-		}}/>)}
+		    onLoadComplete={info => {
-      </MainArea>)
+		      embedRef.current?.play ()
+		      setVideoLength (info.lengthInSeconds * 1_000)
+		    }}
+		    onMetadataChange={syncPlayback}/>
+		<div className="m-2">
+		  <>再生中：</>
+		  <PrefetchLink to={`/posts/${ post.id }`} className="font-bold">
+		    {post.title || post.url}
+		  </PrefetchLink>
+		</div>
+	      </>) : 'Loading...'}
+	</MainArea>
+
+	<SidebarComponent>
+	  {comments.length > 0 && (
+	      <form
+		  className="w-full h-5/6"
+		  onSubmit={async e => {
+		    e.preventDefault ()
+
+		    if (!(content))
+		      return
+
+		    try
+		    {
+		      setSending (true)
+		      await apiPost (`/theatres/${ id }/comments`, { content })
+		      setContent ('')
+		      commentsRef.current?.scrollTo ({
+			  top: commentsRef.current.scrollHeight,
+			  behavior: 'smooth' })
+		    }
+		    finally
+		    {
+		      setSending (false)
+		    }
+		  }}>
+		<div
+		    ref={commentsRef}
+		    className="overflow-x-hidden overflow-y-scroll text-wrap
+			       border border-black dark:border-white w-full h-3/4">
+		  {comments.map (comment => (
+		      <div key={comment.no} className="p-2">
+			<div className="w-full">
+			  {comment.content}
+			</div>
+			<div className="w-full text-sm text-right">
+			  by {comment.user ? (comment.user.name || '名もなきニジラー') : '運営'}
+			</div>
+			<div className="w-full text-sm text-right">
+			  {dateString (comment.createdAt)}
+			</div>
+		      </div>))}
+		</div>
+		<input
+		    className="w-full p-2 border border-black dark:border-white"
+		    type="text"
+		    value={content}
+		    onChange={e => setContent (e.target.value)}
+		    disabled={sending}/>
+	      </form>)}
+	</SidebarComponent>
+
+	<div className="md:hidden">
+	  <TagDetailSidebar post={post ?? null}/>
+	</div>
+      </div>)
 }) satisfies FC

frontend/src/types.ts

@@ -29,7 +29,7 @@ export type FetchPostsParams = {
 export type Menu = MenuItem[]
 
 export type MenuItem = {
-    name:     string
+    name:     ReactNode
     to:       string
     base?:    string
     subMenu:  SubMenuItem[] }
@@ -93,7 +93,7 @@ export type PostTagChange = {
 export type SubMenuItem =
     | { component:  ReactNode
 	visible:    boolean }
-    | { name:     string
+    | { name:     ReactNode
 	to:       string
 	visible?: boolean }
 
@@ -115,6 +115,13 @@ export type Theatre = {
     createdAt:            string
     updatedAt:            string }
 
+export type TheatreComment = {
+    theatreId:  number,
+    no:         number,
+    user:       { id: number, name: string } | null
+    content:    string
+    createdAt:  string }
+
 export type User = {
     id:               number
     name:             string | null