From c492c3e944f1f5afdd1d7c8d220ea2208d008348 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Wed, 18 Mar 2026 22:44:11 +0900 Subject: [PATCH] #295 --- backend/spec/requests/theatres_spec.rb | 289 ++++++++++++++++++ frontend/src/App.tsx | 2 +- frontend/src/components/NicoViewer.tsx | 242 +++++++++++---- frontend/src/components/PostEmbed.tsx | 21 +- frontend/src/components/TopNav.tsx | 5 +- .../src/pages/theatres/TheatreDetailPage.tsx | 53 +++- frontend/src/types.ts | 31 ++ frontend/vite.config.ts | 2 +- 8 files changed, 567 insertions(+), 78 deletions(-) create mode 100644 backend/spec/requests/theatres_spec.rb diff --git a/backend/spec/requests/theatres_spec.rb b/backend/spec/requests/theatres_spec.rb new file mode 100644 index 0000000..bee54f3 --- /dev/null +++ b/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 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3b437cb..dbc257f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -48,7 +48,7 @@ const RouteTransitionWrapper = ({ user, setUser }: { }/> }/> }/> - }/> + }/> }/> }/> }/> diff --git a/frontend/src/components/NicoViewer.tsx b/frontend/src/components/NicoViewer.tsx index a71acb5..a1d0390 100644 --- a/frontend/src/components/NicoViewer.tsx +++ b/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) => { + const { id, width, height, style = { }, onLoadComplete, onMetadataChange } = props const iframeRef = useRef (null) + const playerId = useMemo (() => `nico-${ id }-${ Math.random ().toString (36).slice (2) }`, [id]) const [screenWidth, setScreenWidth] = useState () const [screenHeight, setScreenHeight] = useState () const [landscape, setLandscape] = useState (false) const [fullScreen, setFullScreen] = useState (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) => { + const onMessage = (event: MessageEvent) => { 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 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 ( -