#297

backend/app/controllers/theatre_comments_controller.rb

@@ -6,7 +6,7 @@ class TheatreCommentsController < ApplicationController
     comments = TheatreComment
                .where(theatre_id: params[:theatre_id])
                .where('no > ?', no_gt)
-               .order(:no)
+               .order(no: :desc)
 
     render json: comments.as_json(include: { user: { only: [:id, :name] } })
   end

backend/app/controllers/theatres_controller.rb

@@ -31,7 +31,9 @@ class TheatresController < ApplicationController
       post_started_at = theatre.current_post_started_at
     end
 
-    render json: { host_flg:, post_id:, post_started_at: }
+    render json: {
+        host_flg:, post_id:, post_started_at:,
+        watching_users: theatre.watching_users.as_json(only: [:id, :name]) }
   end
 
   def next_post

backend/spec/requests/theatre_comments_spec.rb

@@ -51,14 +51,14 @@ RSpec.describe 'TheatreComments', type: :request do
       )
     end
 
-    it 'theatre_id で絞り込み、no_gt より大きいものを no 昇順で返す' do
+    it 'theatre_id で絞り込み、no_gt より大きいものを no 降順で返す' do
       get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
 
       expect(response).to have_http_status(:ok)
-      expect(response.parsed_body.map { |row| row['no'] }).to eq([2, 3])
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2])
       expect(response.parsed_body.map { |row| row['content'] }).to eq([
-        'second comment',
+        'third comment',
-        'third comment'
+        'second comment'
       ])
     end
 
@@ -68,8 +68,8 @@ RSpec.describe 'TheatreComments', type: :request do
       expect(response).to have_http_status(:ok)
 
       expect(response.parsed_body.first['user']).to eq({
-        'id' => bob.id,
+        'id' => alice.id,
-        'name' => 'Bob'
+        'name' => 'Alice'
       })
       expect(response.parsed_body.first['user'].keys).to contain_exactly('id', 'name')
     end
@@ -78,7 +78,7 @@ RSpec.describe 'TheatreComments', type: :request do
       get "/theatres/#{theatre.id}/comments", params: { no_gt: -100 }
 
       expect(response).to have_http_status(:ok)
-      expect(response.parsed_body.map { |row| row['no'] }).to eq([1, 2, 3])
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2, 1])
     end
   end
 

backend/spec/requests/theatres_spec.rb

@@ -117,11 +117,18 @@ RSpec.describe 'Theatres API', type: :request do
         expect(theatre.host_user_id).to eq(member.id)
         expect(watch.expires_at).to be_within(1.second).of(30.seconds.from_now)
 
-        expect(json).to eq(
+        expect(json).to include(
           'host_flg' => true,
           'post_id' => nil,
           'post_started_at' => nil
         )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          }
+        )
       end
     end
 
@@ -167,11 +174,22 @@ RSpec.describe 'Theatres API', type: :request do
         expect(response).to have_http_status(:ok)
         expect(theatre.reload.host_user_id).to eq(other_user.id)
 
-        expect(json).to eq(
+        expect(json).to include(
           'host_flg' => false,
           'post_id' => nil,
           'post_started_at' => nil
         )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          },
+          {
+            'id' => other_user.id,
+            'name' => 'other user'
+          }
+        )
       end
     end
 

frontend/src/components/PrefetchLink.tsx

@@ -71,7 +71,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 	  || ev.metaKey
 	  || ev.ctrlKey
 	  || ev.shiftKey
-	  || ev.altKey)
+	  || ev.altKey
+	  || (rest.target && rest.target !== '_self'))
 	return
 
       ev.preventDefault ()

frontend/src/components/TopNav.tsx

@@ -211,6 +211,7 @@ export default (({ user }: Props) => {
 		      <PrefetchLink
 			  key={`l-${ i }`}
 			  to={item.to}
+			  target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
 			  className="h-full flex items-center px-3">
 			{item.name}
 		      </PrefetchLink>)))}
@@ -277,6 +278,9 @@ export default (({ user }: Props) => {
 				      <PrefetchLink
 					  key={`sp-l-${ i }-${ j }`}
 					  to={subItem.to}
+					  target={subItem.to.slice (0, 2) === '//'
+						  ? '_blank'
+						  : undefined}
 					  className="w-full min-h-[36px] flex items-center pl-12">
 					{subItem.name}
 				      </PrefetchLink>)))}

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
+import ErrorScreen from '@/components/ErrorScreen'
 import PostEmbed from '@/components/PostEmbed'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagDetailSidebar from '@/components/TagDetailSidebar'
@@ -23,9 +24,14 @@ import type { NiconicoMetadata,
 type TheatreInfo = {
     hostFlg:        boolean
     postId:         number | null
-    postStartedAt:  string | null }
+    postStartedAt:  string | null
+    watchingUsers:  { id: number; name: string }[] }
 
-const INITIAL_THEATRE_INFO = { hostFlg: false, postId: null, postStartedAt: null } as const
+const INITIAL_THEATRE_INFO =
+    { hostFlg: false,
+      postId: null,
+      postStartedAt: null,
+      watchingUsers: [] as { id: number; name: string }[] } as const
 
 
 export default (() => {
@@ -41,6 +47,7 @@ export default (() => {
   const [content, setContent] = useState ('')
   const [loading, setLoading] = useState (false)
   const [sending, setSending] = useState (false)
+  const [status, setStatus] = useState (200)
   const [theatre, setTheatre] = useState<Theatre | null> (null)
   const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
   const [post, setPost] = useState<Post | null> (null)
@@ -55,7 +62,7 @@ export default (() => {
   }, [videoLength])
 
   useEffect (() => {
-    lastCommentNoRef.current = comments.at (-1)?.no ?? 0
+    lastCommentNoRef.current = comments[0]?.no ?? 0
   }, [comments])
 
   useEffect (() => {
@@ -80,7 +87,7 @@ export default (() => {
       }
       catch (error)
       {
-	console.error (error)
+	setStatus ((error as any)?.response.status ?? 200)
       }
     }) ()
 
@@ -89,12 +96,6 @@ export default (() => {
     }
   }, [id])
 
-  useEffect (() => {
-    commentsRef.current?.scrollTo ({
-	top: commentsRef.current.scrollHeight,
-	behavior: 'smooth' })
-  }, [commentsRef])
-
   useEffect (() => {
     if (!(id))
       return
@@ -117,7 +118,7 @@ export default (() => {
 	if (!(cancelled) && newComments.length > 0)
 	  {
 	    lastCommentNoRef.current = newComments[newComments.length - 1].no
-	    setComments (prev => [...prev, ...newComments])
+	    setComments (prev => [...newComments, ...prev])
 	  }
 
 	const currentInfo = theatreInfoRef.current
@@ -227,6 +228,9 @@ export default (() => {
       embedRef.current?.seek (targetTime)
   }
 
+  if (status >= 400)
+    return <ErrorScreen status={status}/>
+
   return (
       <div className="md:flex md:flex-1">
 	<Helmet>
@@ -239,7 +243,7 @@ export default (() => {
 	</Helmet>
 
 	<div className="hidden md:block">
-	  <TagDetailSidebar post={post ?? null}/>
+	  {post && <TagDetailSidebar post={post}/>}
 	</div>
 
 	<MainArea>
@@ -265,7 +269,7 @@ export default (() => {
 
 	<SidebarComponent>
 	  <form
-	      className="w-full h-5/6"
+	      className="w-auto h-auto border border-black dark:border-white rounded mx-2"
 	      onSubmit={async e => {
 		e.preventDefault ()
 
@@ -277,43 +281,61 @@ export default (() => {
 		  setSending (true)
 		  await apiPost (`/theatres/${ id }/comments`, { content })
 		  setContent ('')
-		  commentsRef.current?.scrollTo ({
+		  commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
-		      top: commentsRef.current.scrollHeight,
-		      behavior: 'smooth' })
 		}
 		finally
 		{
 		  setSending (false)
 		}
 	      }}>
+	    <input
+		className="w-full p-2 border rounded"
+		type="text"
+		placeholder="ここにコメントを入力"
+		value={content}
+		onChange={e => setContent (e.target.value)}
+		disabled={sending}/>
+
 	    <div
 		ref={commentsRef}
-		className="overflow-x-hidden overflow-y-scroll text-wrap
+		className="overflow-x-hidden overflow-y-scroll text-wrap w-full
-			   border border-black dark:border-white w-full h-[80vh]">
+			   h-[32vh] md:h-[64vh] border rounded">
 	      {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 || '名もなきニジラー') : '運営'}
+		      by {comment.user
+			  ? (comment.user.name || `名もなきニジラー（#${ comment.user.id }）`)
+			  : '運営'}
 		    </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>
+
+	  <div className="w-auto h-auto border border-black dark:border-white rounded mx-2 mt-4">
+	    <div className="p-2">
+		現在の同接数：{theatreInfo.watchingUsers.length}
+	    </div>
+
+	    <div className="overflow-x-hidden overflow-y-scroll text-wrap w-full h-32
+			    border rounded">
+	      <ul className="list-inside list-disc">
+		{theatreInfo.watchingUsers.map (user => (
+		    <li key={user.id} className="px-4 py-1 text-sm">
+		      {user.name || `名もなきニジラー（#${ user.id }）`}
+		    </li>))}
+	      </ul>
+	    </div>
+	  </div>
 	</SidebarComponent>
 
 	<div className="md:hidden">
-	  <TagDetailSidebar post={post ?? null}/>
+	  {post && <TagDetailSidebar post={post} sp/>}
 	</div>
       </div>)
 }) satisfies FC