上映会にコメント機能追加（#297） (#299)
#297 #297 #297 #297 #297 Merge remote-tracking branch 'origin/main' into feature/297 #297 #297 #297 #297 #297 #297 #297 #297 #297 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #299
This commit was merged in pull request #299.
This commit is contained in:
@@ -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 ()
|
||||
|
||||
@@ -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: <>第 1 会場</>, to: '/theatres/1' },
|
||||
{ name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
|
||||
{ name: <>ニジカ放送局第 1 チャンネル</>,
|
||||
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>)))}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user