miteruzo/btrc-hub
1
0
Fork 0
Code Issues 69 Pull Requests 1 Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feature/047

Browse Source
This commit is contained in:
みてるぞ
2026-03-26 23:52:57 +09:00
parent fb275b4763 2adff3966a
commit be40b4bcc4
12 changed files with 527 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PrefetchLink.tsx
+2 -1
View File
@@ -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
+10 -4
View File
@@ -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' }] },
{ name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
{ name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
{ 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) }] }]
@@ -209,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>)))}
@@ -275,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
+278 -51
View File
@@ -2,85 +2,225 @@ 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'
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 }
postStartedAt: string | null
watchingUsers: { id: number; name: string }[] }
const INITIAL_THEATRE_INFO =
{ hostFlg: false,
postId: null,
postStartedAt: null,
watchingUsers: [] as { id: number; name: string }[] } 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 [status, setStatus] = useState (200)
const [theatre, setTheatre] = useState<Theatre | null> (null)
const [theatreInfo, setTheatreInfo] =
useState<TheatreInfo> ({ hostFlg: false, postId: null, postStartedAt: null })
const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
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[0]?.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 }`))
}) ()
const interval = setInterval (async () => {
if (theatreInfo.hostFlg
&& theatreInfo.postStartedAt
&& ((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ()
> 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)
return
if (theatreInfo.postId == null)
try
{
void (async () => {
setLoading (true)
await apiPatch<void> (`/theatres/${ id }/next_post`)
setLoading (false)
}) ()
return
const data = await apiGet<Theatre> (`/theatres/${ id }`)
if (!(cancelled))
setTheatre (data)
}
}, [id, loading, theatreInfo.hostFlg, theatreInfo.postId])
catch (error)
{
setStatus ((error as any)?.response.status ?? 200)
}
}) ()
return () => {
cancelled = true
}
}, [id])
useEffect (() => {
if (!(id))
return
let cancelled = false
let running = false
const tick = async () => {
if (running)
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 => [...newComments, ...prev])
}
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_500)
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, theatreInfo.hostFlg, theatreInfo.postId])
useEffect (() => {
setVideoLength (0)
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)
}
}) ()
}, [theatreInfo.postId, theatreInfo.postStartedAt])
return () => {
cancelled = true
}
}, [theatreInfo.postId])
const syncPlayback = (meta: NiconicoMetadata) => {
if (!(theatreInfo.postStartedAt))
return
const targetTime =
((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ())
const targetTime = Math.min (
Math.max (0, Date.now () - (new Date (theatreInfo.postStartedAt)).getTime ()),
videoLength)
const drift = Math.abs (meta.currentTime - targetTime)
@@ -88,8 +228,11 @@ export default (() => {
embedRef.current?.seek (targetTime)
}
if (status >= 400)
return <ErrorScreen status={status}/>
return (
<MainArea>
<div className="md:flex md:flex-1">
<Helmet>
{theatre && (
<title>
@@ -99,16 +242,100 @@ export default (() => {
</title>)}
</Helmet>
{post && (
<PostEmbed
ref={embedRef}
post={post}
onLoadComplete={info => {
embedRef.current?.play ()
setVideoLength (info.lengthInSeconds * 1_000)
}}
onMetadataChange={meta => {
syncPlayback (meta)
}}/>)}
</MainArea>)
<div className="hidden md:block">
{post && <TagDetailSidebar post={post}/>}
</div>
<MainArea>
{post ? (
<>
<PostEmbed
key={post.id}
ref={embedRef}
post={post}
onLoadComplete={info => {
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>
<form
className="w-auto h-auto border border-black dark:border-white rounded mx-2"
onSubmit={async e => {
e.preventDefault ()
if (!(content))
return
try
{
setSending (true)
await apiPost (`/theatres/${ id }/comments`, { content })
setContent ('')
commentsRef.current?.scrollTo ({ top: 0, 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 w-full
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 || `名もなきニジラー（#${ comment.user.id }）`)
: '運営'}
</div>
<div className="w-full text-sm text-right">
{dateString (comment.createdAt)}
</div>
</div>))}
</div>
</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">
{post && <TagDetailSidebar post={post} sp/>}
</div>
</div>)
}) satisfies FC
frontend/src/types.ts
+9 -2
View File
@@ -52,7 +52,7 @@ export type FetchTagsParams = {
export type Menu = MenuItem[]
export type MenuItem = {
name: string
name: ReactNode
to: string
base?: string
subMenu: SubMenuItem[] }
@@ -117,7 +117,7 @@ export type PostTagChange = {
export type SubMenuItem =
| { component: ReactNode
visible: boolean }
| { name: string
| { name: ReactNode
to: string
visible?: boolean }
@@ -141,6 +141,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