#295

backend/spec/requests/theatres_spec.rb

@@ -0,0 +1,289 @@
+require 'rails_helper'
+require 'active_support/testing/time_helpers'
+
+
+RSpec.describe 'Theatres API', type: :request do
+  include ActiveSupport::Testing::TimeHelpers
+
+  around do |example|
+    travel_to(Time.zone.parse('2026-03-18 21:00:00')) do
+      example.run
+    end
+  end
+
+  let(:member) { create(:user, :member, name: 'member user') }
+  let(:other_user) { create(:user, :member, name: 'other user') }
+
+  let!(:youtube_post) do
+    Post.create!(
+      title: 'youtube post',
+      url: 'https://www.youtube.com/watch?v=spec123'
+    )
+  end
+
+  let!(:other_post) do
+    Post.create!(
+      title: 'other post',
+      url: 'https://example.com/posts/1'
+    )
+  end
+
+  let!(:theatre) do
+    Theatre.create!(
+      name: 'spec theatre',
+      opens_at: Time.zone.parse('2026-03-18 20:00:00'),
+      kind: 0,
+      created_by_user: member
+    )
+  end
+
+  describe 'GET /theatres/:id' do
+    subject(:do_request) do
+      get "/theatres/#{theatre_id}"
+    end
+
+    context 'when theatre exists' do
+      let(:theatre_id) { theatre.id }
+
+      it 'returns theatre json' do
+        do_request
+
+        expect(response).to have_http_status(:ok)
+        expect(json).to include(
+          'id' => theatre.id,
+          'name' => 'spec theatre'
+        )
+        expect(json).to have_key('opens_at')
+        expect(json).to have_key('closes_at')
+        expect(json).to have_key('created_at')
+        expect(json).to have_key('updated_at')
+
+        expect(json['created_by_user']).to include(
+          'id' => member.id,
+          'name' => 'member user'
+        )
+      end
+    end
+
+    context 'when theatre does not exist' do
+      let(:theatre_id) { 999_999_999 }
+
+      it 'returns 404' do
+        do_request
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+  end
+
+  describe 'PUT /theatres/:id/watching' do
+    subject(:do_request) do
+      put "/theatres/#{theatre_id}/watching"
+    end
+
+    let(:theatre_id) { theatre.id }
+
+    context 'when not logged in' do
+      it 'returns 401' do
+        sign_out
+        do_request
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when theatre does not exist' do
+      let(:theatre_id) { 999_999_999 }
+
+      it 'returns 404' do
+        sign_in_as(member)
+        do_request
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    context 'when theatre has no host yet' do
+      before do
+        sign_in_as(member)
+      end
+
+      it 'creates watching row, assigns current user as host, and returns current theatre info' do
+        expect { do_request }
+          .to change { TheatreWatchingUser.count }.by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        theatre.reload
+        watch = TheatreWatchingUser.find_by!(theatre: theatre, user: member)
+
+        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(
+          'host_flg' => true,
+          'post_id' => nil,
+          'post_started_at' => nil
+        )
+      end
+    end
+
+    context 'when current user is already watching' do
+      let!(:watching_row) do
+        TheatreWatchingUser.create!(
+          theatre: theatre,
+          user: member,
+          expires_at: 5.seconds.from_now
+        )
+      end
+
+      before do
+        sign_in_as(member)
+      end
+
+      it 'refreshes expires_at without creating another row' do
+        expect { do_request }
+          .not_to change { TheatreWatchingUser.count }
+
+        expect(response).to have_http_status(:ok)
+
+        expect(watching_row.reload.expires_at)
+          .to be_within(1.second).of(30.seconds.from_now)
+      end
+    end
+
+    context 'when another active host exists' do
+      before do
+        TheatreWatchingUser.create!(
+          theatre: theatre,
+          user: other_user,
+          expires_at: 10.minutes.from_now
+        )
+        theatre.update!(host_user: other_user)
+        sign_in_as(member)
+      end
+
+      it 'does not steal host and returns host_flg false' do
+        expect { do_request }
+          .to change { TheatreWatchingUser.count }.by(1)
+
+        expect(response).to have_http_status(:ok)
+        expect(theatre.reload.host_user_id).to eq(other_user.id)
+
+        expect(json).to eq(
+          'host_flg' => false,
+          'post_id' => nil,
+          'post_started_at' => nil
+        )
+      end
+    end
+
+    context 'when host is set but no longer actively watching' do
+      let(:started_at) { 2.minutes.ago }
+
+      before do
+        TheatreWatchingUser.create!(
+          theatre: theatre,
+          user: other_user,
+          expires_at: 1.second.ago
+        )
+        theatre.update!(
+          host_user: other_user,
+          current_post: youtube_post,
+          current_post_started_at: started_at
+        )
+        sign_in_as(member)
+      end
+
+      it 'reassigns host to current user and returns current post info' do
+        expect { do_request }
+          .to change { TheatreWatchingUser.count }.by(1)
+
+        expect(response).to have_http_status(:ok)
+
+        theatre.reload
+        expect(theatre.host_user_id).to eq(member.id)
+
+        expect(json['host_flg']).to eq(true)
+        expect(json['post_id']).to eq(youtube_post.id)
+        expect(Time.zone.parse(json['post_started_at']))
+          .to be_within(1.second).of(started_at)
+      end
+    end
+  end
+
+  describe 'PATCH /theatres/:id/next_post' do
+    subject(:do_request) do
+      patch "/theatres/#{theatre_id}/next_post"
+    end
+
+    let(:theatre_id) { theatre.id }
+
+    context 'when not logged in' do
+      it 'returns 401' do
+        sign_out
+        do_request
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when theatre does not exist' do
+      let(:theatre_id) { 999_999_999 }
+
+      it 'returns 404' do
+        sign_in_as(member)
+        do_request
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    context 'when logged in but not host' do
+      before do
+        theatre.update!(host_user: other_user)
+        sign_in_as(member)
+      end
+
+      it 'returns 403' do
+        do_request
+        expect(response).to have_http_status(:forbidden)
+      end
+    end
+
+    context 'when current user is host' do
+      before do
+        theatre.update!(host_user: member)
+        sign_in_as(member)
+      end
+
+      it 'sets current_post to an eligible post and updates current_post_started_at' do
+        expect { do_request }
+          .to change { theatre.reload.current_post_id }
+          .from(nil).to(youtube_post.id)
+
+        expect(response).to have_http_status(:no_content)
+        expect(theatre.reload.current_post_started_at)
+          .to be_within(1.second).of(Time.current)
+      end
+    end
+
+    context 'when current user is host and no eligible post exists' do
+      before do
+        youtube_post.destroy!
+        theatre.update!(
+          host_user: member,
+          current_post: other_post,
+          current_post_started_at: 1.hour.ago
+        )
+        sign_in_as(member)
+      end
+
+      it 'still returns 204 and clears current_post' do
+        do_request
+
+        expect(response).to have_http_status(:no_content)
+
+        theatre.reload
+        expect(theatre.current_post_id).to be_nil
+        expect(theatre.current_post_started_at)
+          .to be_within(1.second).of(Time.current)
+      end
+    end
+  end
+end

frontend/src/App.tsx

@@ -48,7 +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="/theatres/:id" element={<TheatreDetailPage/>}/>
 	    <Route path="/wiki" element={<WikiSearchPage/>}/>
 	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
 	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>

frontend/src/components/NicoViewer.tsx

@@ -1,78 +1,204 @@
-import { useRef, useLayoutEffect, useEffect, useState } from 'react'
-type Props = { id:      string,
-	       width:   number,
-	       height:  number,
-	       style?:  CSSProperties }
-
-import type { CSSProperties, FC } from 'react'
-
-
-export default ((props: Props) => {
-  const { id, width, height, style = { } } = props
+import { forwardRef,
+         useCallback,
+         useEffect,
+         useImperativeHandle,
+         useLayoutEffect,
+         useMemo,
+         useRef,
+         useState } from 'react'
+
+import type { CSSProperties, ForwardedRef } from 'react'
+
+import type { NiconicoMetadata, NiconicoVideoInfo, NiconicoViewerHandle } from '@/types'
+
+type NiconicoPlayerMessage =
+    | { eventName: 'enterProgrammaticFullScreen' }
+    | { eventName: 'exitProgrammaticFullScreen' }
+    | { eventName: 'loadComplete'; playerId?: string; data: { videoInfo: NiconicoVideoInfo } }
+    | { eventName: 'playerMetadataChange'; playerId?: string; data: NiconicoMetadata }
+    | { eventName: 'playerStatusChange' | 'statusChange'; playerId?: string; data?: unknown }
+    | { eventName: 'error'; playerId?: string; data?: unknown; code?: string; message?: string }
+
+type NiconicoCommand =
+    | { eventName: 'play'; sourceConnectorType: 1; playerId: string }
+    | { eventName: 'pause'; sourceConnectorType: 1; playerId: string }
+    | { eventName: 'seek'; sourceConnectorType: 1; playerId: string; data: { time: number } }
+    | { eventName: 'mute'; sourceConnectorType: 1; playerId: string; data: { mute: boolean } }
+    | { eventName: 'volumeChange'; sourceConnectorType: 1; playerId: string;
+	data: { volume: number } }
+    | { eventName: 'commentVisibilityChange'; sourceConnectorType: 1; playerId: string;
+	data: { commentVisibility: boolean } }
+
+const EMBED_ORIGIN = 'https://embed.nicovideo.jp'
+
+type Props = {
+    id:                 string
+    width:              number
+    height:             number
+    style?:             CSSProperties
+    onLoadComplete?:    (info: NiconicoVideoInfo) => void
+    onMetadataChange?:  (meta: NiconicoMetadata) => void }
+
+
+export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle>) => {
+  const { id, width, height, style = { }, onLoadComplete, onMetadataChange } = props
 
   const iframeRef = useRef<HTMLIFrameElement> (null)
+  const playerId = useMemo (() => `nico-${ id }-${ Math.random ().toString (36).slice (2) }`, [id])
 
   const [screenWidth, setScreenWidth] = useState<CSSProperties['width']> ()
   const [screenHeight, setScreenHeight] = useState<CSSProperties['height']> ()
   const [landscape, setLandscape] = useState<boolean> (false)
   const [fullScreen, setFullScreen] = useState<boolean> (false)
 
-  const src = `https://embed.nicovideo.jp/watch/${id}?persistence=1&oldScript=1&referer=&from=0&allowProgrammaticFullScreen=1`;
-
-  const styleFullScreen: CSSProperties = fullScreen ? {
-      top:  0,
-      left: landscape ? 0 : '100%',
-      position: 'fixed',
-      width: screenWidth,
-      height: screenHeight,
-      zIndex: 2147483647,
-      maxWidth: 'none',
-      transformOrigin: '0% 0%',
-      transform: landscape ? 'none' : 'rotate(90deg)',
-      WebkitTransformOrigin: '0% 0%',
-      WebkitTransform: landscape ? 'none' : 'rotate(90deg)' } : {};
-
-  const margedStyle = {
-      border:   'none',
-      maxWidth: '100%',
-      ...style,
-      ...styleFullScreen }
+  const src =
+      `${ EMBED_ORIGIN }/watch/${ id }`
+      + '?jsapi=1'
+      + `&playerId=${ encodeURIComponent (playerId) }`
+      + '&persistence=1'
+      + '&oldScript=1'
+      + '&referer='
+      + '&from=0'
+      + '&allowProgrammaticFullScreen=1'
+
+  const styleFullScreen: CSSProperties =
+      fullScreen
+      ? { top: 0,
+          left: landscape ? 0 : '100%',
+          position: 'fixed',
+          width: screenWidth,
+          height: screenHeight,
+          zIndex: 2_147_483_647,
+          maxWidth: 'none',
+          transformOrigin: '0% 0%',
+          transform: landscape ? 'none' : 'rotate(90deg)',
+          WebkitTransformOrigin: '0% 0%',
+          WebkitTransform: landscape ? 'none' : 'rotate(90deg)' }
+      : { }
+
+  const margedStyle: CSSProperties =
+      { border: 'none', maxWidth: '100%', ...style, ...styleFullScreen }
+
+  const postToPlayer = useCallback ((message: NiconicoCommand) => {
+    const win = iframeRef.current?.contentWindow
+    if (!(win))
+      return
+
+    win.postMessage (message, EMBED_ORIGIN)
+  }, [])
+
+  const play = useCallback (() => {
+    postToPlayer ({ eventName: 'play', sourceConnectorType: 1, playerId })
+  }, [playerId, postToPlayer])
+
+  const pause = useCallback (() => {
+    postToPlayer ({ eventName: 'pause', sourceConnectorType: 1, playerId })
+  }, [playerId, postToPlayer])
+
+  const seek = useCallback ((time: number) => {
+    postToPlayer ({ eventName: 'seek', sourceConnectorType: 1, playerId, data: { time } })
+  }, [playerId, postToPlayer])
+
+  const mute = useCallback (() => {
+    postToPlayer ({ eventName: 'mute', sourceConnectorType: 1, playerId, data: { mute: true } })
+  }, [playerId, postToPlayer])
+
+  const unmute = useCallback (() => {
+    postToPlayer ({ eventName: 'mute', sourceConnectorType: 1, playerId, data: { mute: false } })
+  }, [playerId, postToPlayer])
+
+  const setVolume = useCallback ((volume: number) => {
+    postToPlayer (
+	{ eventName: 'volumeChange', sourceConnectorType: 1, playerId, data: { volume } })
+  }, [playerId, postToPlayer])
+
+  const showComments = useCallback (() => {
+    postToPlayer (
+	{ eventName: 'commentVisibilityChange', sourceConnectorType: 1, playerId,
+	  data: { commentVisibility: true } })
+  }, [playerId, postToPlayer])
+
+  const hideComments = useCallback (() => {
+    postToPlayer (
+	{ eventName: 'commentVisibilityChange', sourceConnectorType: 1, playerId,
+	  data: { commentVisibility: false } })
+  }, [playerId, postToPlayer])
+
+  useImperativeHandle (
+      ref,
+      () => ({ play, pause, seek, mute, unmute, setVolume, showComments, hideComments }),
+      [play, pause, seek, mute, unmute, setVolume, showComments, hideComments])
 
   useEffect (() => {
-    const onMessage = (event: MessageEvent<any>) => {
+    const onMessage = (event: MessageEvent<NiconicoPlayerMessage>) => {
       if (!(iframeRef.current)
-	  || (event.source !== iframeRef.current.contentWindow))
-	return
-
-      if (event.data.eventName === 'enterProgrammaticFullScreen')
-	setFullScreen (true)
-      else if (event.data.eventName === 'exitProgrammaticFullScreen')
-	setFullScreen (false)
+          || (event.source !== iframeRef.current.contentWindow)
+          || (event.origin !== EMBED_ORIGIN))
+        return
+
+      const data = event.data
+
+      if (!(data)
+	  || typeof data !== 'object'
+	  || !('eventName' in data))
+        return
+
+      if (('playerId' in data)
+	  && data.playerId
+	  && data.playerId !== playerId)
+        return
+
+      if (data.eventName === 'enterProgrammaticFullScreen')
+	{
+	  setFullScreen (true)
+	  return
+	}
+
+      if (data.eventName === 'exitProgrammaticFullScreen')
+	{
+	  setFullScreen (false)
+	  return
+	}
+
+      if (data.eventName === 'loadComplete')
+	{
+	  onLoadComplete?.(data.data.videoInfo)
+	  return
+	}
+
+      if (data.eventName === 'playerMetadataChange')
+	{
+	  onMetadataChange?.(data.data)
+	  return
+	}
+
+      if (data.eventName === 'error')
+        console.error ('niconico player error:', data)
     }
 
     addEventListener ('message', onMessage)
 
     return () => removeEventListener ('message', onMessage)
-  }, [])
+  }, [onLoadComplete, onMetadataChange, playerId])
 
-  useLayoutEffect(() => {
+  useLayoutEffect (() => {
     if (!(fullScreen))
       return
 
     const initialScrollX = scrollX
     const initialScrollY = scrollY
-    let timer: NodeJS.Timeout
+    let timer: ReturnType<typeof setTimeout>
     let ended = false
 
     const pollingResize = () => {
       if (ended)
-	return
+        return
 
-      const landscape = innerWidth >= innerHeight
-      const windowWidth = `${landscape ? innerWidth : innerHeight}px`
-      const windowHeight = `${landscape ? innerHeight : innerWidth}px`
+      const isLandscape = innerWidth >= innerHeight
+      const windowWidth = `${ isLandscape ? innerWidth : innerHeight }px`
+      const windowHeight = `${ isLandscape ? innerHeight : innerWidth }px`
 
-      setLandscape (landscape)
+      setLandscape (isLandscape)
       setScreenWidth (windowWidth)
       setScreenHeight (windowHeight)
       timer = setTimeout (startPollingResize, 200)
@@ -80,9 +206,9 @@ export default ((props: Props) => {
 
     const startPollingResize = () => {
       if (requestAnimationFrame)
-	requestAnimationFrame (pollingResize)
+        requestAnimationFrame (pollingResize)
       else
-	pollingResize ()
+        pollingResize ()
     }
 
     startPollingResize ()
@@ -97,15 +223,17 @@ export default ((props: Props) => {
   useEffect (() => {
     if (!(fullScreen))
       return
+
     scrollTo (0, 0)
   }, [screenWidth, screenHeight, fullScreen])
 
   return (
-      <iframe ref={iframeRef}
-	      src={src}
-	      width={width}
-	      height={height}
-	      style={margedStyle}
-	      allowFullScreen
-	      allow="autoplay"/>)
-}) satisfies FC<Props>
+      <iframe
+	  ref={iframeRef}
+	  src={src}
+	  width={width}
+	  height={height}
+	  style={margedStyle}
+	  allowFullScreen
+	  allow="autoplay"/>)
+})

frontend/src/components/PostEmbed.tsx

@@ -4,14 +4,18 @@ import YoutubeEmbed from 'react-youtube'
 import NicoViewer from '@/components/NicoViewer'
 import TwitterEmbed from '@/components/TwitterEmbed'
 
-import type { FC } from 'react'
+import type { FC, RefObject } from 'react'
 
-import type { Post } from '@/types'
+import type { NiconicoMetadata, NiconicoVideoInfo, NiconicoViewerHandle, Post } from '@/types'
 
-type Props = { post: Post }
+type Props = {
+    ref?:               RefObject<NiconicoViewerHandle | null>
+    post:               Post
+    onLoadComplete?:    (info: NiconicoVideoInfo) => void
+    onMetadataChange?:  (meta: NiconicoMetadata) => void }
 
 
-export default (({ post }: Props) => {
+export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
   const url = new URL (post.url)
 
   switch (url.hostname.split ('.').slice (-2).join ('.'))
@@ -24,7 +28,14 @@ export default (({ post }: Props) => {
 
       const [videoId] = mVideoId
 
-      return <NicoViewer id={videoId} width={640} height={360}/>
+      return (
+	  <NicoViewer
+	      ref={ref}
+	      id={videoId}
+	      width={640}
+	      height={360}
+	      onLoadComplete={onLoadComplete}
+	      onMetadataChange={onMetadataChange}/>)
     }
 
   case 'twitter.com':

frontend/src/components/TopNav.tsx

@@ -79,8 +79,9 @@ 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' }] },
+      // TODO: 本実装時に消す．
+      // { 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,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
@@ -10,25 +10,25 @@ import { fetchPost } from '@/lib/posts'
 
 import type { FC } from 'react'
 
-import type { Theatre } from '@/types'
+import type { NiconicoMetadata, NiconicoViewerHandle, Post, Theatre } from '@/types'
 
 type TheatreInfo = {
     hostFlg:        boolean
     postId:         number | null
     postStartedAt:  string | null }
 
-type Props = { user: User }
 
-
-export default (({ user }: Props) => {
+export default (() => {
   const { id } = useParams ()
 
+  const embedRef = useRef<NiconicoViewerHandle> (null)
+
   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)
+  const [videoLength, setVideoLength] = useState (9_999_999_999)
 
   useEffect (() => {
     if (!(id))
@@ -39,11 +39,17 @@ export default (({ user }: Props) => {
     }) ()
 
     const interval = setInterval (async () => {
-      setTheatreInfo (await apiPut<TheatreInfo> (`/theatres/${ id }/watching`))
+      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])
+  }, [id, theatreInfo.hostFlg, theatreInfo.postStartedAt, videoLength])
 
   useEffect (() => {
     if (!(theatreInfo.hostFlg) || loading)
@@ -58,17 +64,30 @@ export default (({ user }: Props) => {
 	}) ()
 	return
       }
-  }, [theatreInfo])
+  }, [id, loading, theatreInfo.hostFlg, theatreInfo.postId])
 
   useEffect (() => {
     if (theatreInfo.postId == null)
       return
 
     void (async () => {
-      setPost (await fetchPost (theatreInfo.postId))
+      setPost (await fetchPost (String (theatreInfo.postId)))
     }) ()
   }, [theatreInfo.postId, theatreInfo.postStartedAt])
 
+  const syncPlayback = (meta: NiconicoMetadata) => {
+    if (!(theatreInfo.postStartedAt))
+      return
+
+    const targetTime =
+	((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ()) / 1000
+
+    const drift = Math.abs (meta.currentTime - targetTime)
+
+    if (drift > 5)
+      embedRef.current?.seek (targetTime)
+  }
+
   return (
       <MainArea>
 	<Helmet>
@@ -80,6 +99,16 @@ export default (({ user }: Props) => {
 	      </title>)}
 	</Helmet>
 
-	{post && <PostEmbed post={post}/>}
+	{post && (
+	    <PostEmbed
+		ref={embedRef}
+		post={post}
+		onLoadComplete={info => {
+		  embedRef.current?.play ()
+		  setVideoLength (info.lengthInSeconds * 1_000)
+		}}
+		onMetadataChange={meta => {
+		  syncPlayback (meta)
+		}}/>)}
       </MainArea>)
-}) satisfies FC<Props>
+}) satisfies FC

frontend/src/types.ts

@@ -38,6 +38,37 @@ export type NicoTag = Tag & {
     category:   'nico'
     linkedTags: Tag[] }
 
+export type NiconicoMetadata = {
+    currentTime:            number
+    duration:               number
+    isVideoMetaDataLoaded:  boolean
+    maximumBuffered:        number
+    muted:                  boolean
+    showComment:            boolean
+    volume:                 number }
+
+export type NiconicoVideoInfo = {
+    title:            string
+    videoId:          string
+    lengthInSeconds:  number
+    thumbnailUrl:     string
+    description:      string
+    viewCount:        number
+    commentCount:     number
+    mylistCount:      number
+    postedAt:         string
+    watchId:          number }
+
+export type NiconicoViewerHandle = {
+    play:         () => void
+    pause:        () => void
+    seek:         (time: number) => void
+    mute:         () => void
+    unmute:       () => void
+    setVolume:    (volume: number) => void
+    showComments: () => void
+    hideComments: () => void }
+
 export type Post = {
     id:                     number
     url:                    string

frontend/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig ({
     server:   { host:         true,
 		port:         5173,
 		strictPort:   true,
-		allowedHosts: ['hub.nizika.monster', 'localhost'],
+		allowedHosts: ['hub.nizika.monster', 'localhost', 'nico-dev.test'],
 		proxy:        { '/api': { target:       'http://localhost:3002',
 					  changeOrigin: true,
 					  secure:       false } },