diff --git a/backend/app/controllers/theatres_controller.rb b/backend/app/controllers/theatres_controller.rb new file mode 100644 index 0000000..67228d7 --- /dev/null +++ b/backend/app/controllers/theatres_controller.rb @@ -0,0 +1,52 @@ +class TheatresController < ApplicationController + def show + theatre = Theatre.find_by(id: params[:id]) + return head :not_found unless theatre + + render json: TheatreRepr.base(theatre) + end + + def watching + return head :unauthorized unless current_user + + theatre = Theatre.find_by(id: params[:id]) + return head :not_found unless theatre + + host_flg = false + post_id = nil + post_started_at = nil + + theatre.with_lock do + TheatreWatchingUser.find_or_initialize_by(theatre:, user: current_user).tap { + _1.expires_at = 30.seconds.from_now + }.save! + + if (!(theatre.host_user_id?) || + !(theatre.watching_users.exists?(id: theatre.host_user_id))) + theatre.update!(host_user_id: current_user.id) + end + + host_flg = theatre.host_user_id == current_user.id + post_id = theatre.current_post_id + post_started_at = theatre.current_post_started_at + end + + render json: { host_flg:, post_id:, post_started_at: } + end + + def next_post + return head :unauthorized unless current_user + + theatre = Theatre.find_by(id: params[:id]) + return head :not_found unless theatre + return head :forbidden if theatre.host_user != current_user + + post = Post.where("url LIKE '%nicovideo.jp%'") + .or(Post.where("url LIKE '%youtube.com%'")) + .order('RAND()') + .first + theatre.update!(current_post: post, current_post_started_at: Time.current) + + head :no_content + end +end diff --git a/backend/app/models/theatre.rb b/backend/app/models/theatre.rb new file mode 100644 index 0000000..1da8555 --- /dev/null +++ b/backend/app/models/theatre.rb @@ -0,0 +1,13 @@ +class Theatre < ApplicationRecord + include MyDiscard + + has_many :comments, class_name: 'TheatreComment' + has_many :theatre_watching_users, dependent: :delete_all + has_many :active_theatre_watching_users, -> { active }, + class_name: 'TheatreWatchingUser', inverse_of: :theatre + has_many :watching_users, through: :active_theatre_watching_users, source: :user + + belongs_to :host_user, class_name: 'User', optional: true + belongs_to :current_post, class_name: 'Post', optional: true + belongs_to :created_by_user, class_name: 'User' +end diff --git a/backend/app/models/theatre_comment.rb b/backend/app/models/theatre_comment.rb new file mode 100644 index 0000000..73883e0 --- /dev/null +++ b/backend/app/models/theatre_comment.rb @@ -0,0 +1,8 @@ +class TheatreComment < ApplicationRecord + include MyDiscard + + self.primary_key = :theatre_id, :no + + belongs_to :theatre +end + diff --git a/backend/app/models/theatre_watching_user.rb b/backend/app/models/theatre_watching_user.rb new file mode 100644 index 0000000..c39ddd3 --- /dev/null +++ b/backend/app/models/theatre_watching_user.rb @@ -0,0 +1,13 @@ +class TheatreWatchingUser < ApplicationRecord + self.primary_key = :theatre_id, :user_id + + belongs_to :theatre + belongs_to :user + + scope :active, -> { where('expires_at >= ?', Time.current) } + scope :expired, -> { where('expires_at < ?', Time.current) } + + def active? = expires_at >= Time.current + + def refresh! = update!(expires_at: 30.seconds.from_now) +end diff --git a/backend/app/representations/theatre_repr.rb b/backend/app/representations/theatre_repr.rb new file mode 100644 index 0000000..23e0d8f --- /dev/null +++ b/backend/app/representations/theatre_repr.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + + +module TheatreRepr + BASE = { only: [:id, :name, :opens_at, :closes_at, :created_at, :updated_at], + include: { created_by_user: { only: [:id, :name] } } }.freeze + + module_function + + def base theatre + theatre.as_json(BASE) + end + + def many theatre + theatre.map { |t| base(t) } + end +end diff --git a/backend/config/routes.rb b/backend/config/routes.rb index ed7b4ac..57eb470 100644 --- a/backend/config/routes.rb +++ b/backend/config/routes.rb @@ -72,4 +72,11 @@ Rails.application.routes.draw do end end end + + resources :theatres, only: [:show] do + member do + put :watching + patch :next_post + end + end end diff --git a/backend/db/migrate/20260316082500_create_theatres.rb b/backend/db/migrate/20260316082500_create_theatres.rb new file mode 100644 index 0000000..1640bb7 --- /dev/null +++ b/backend/db/migrate/20260316082500_create_theatres.rb @@ -0,0 +1,17 @@ +class CreateTheatres < ActiveRecord::Migration[8.0] + def change + create_table :theatres do |t| + t.string :name + t.datetime :opens_at, null: false, index: true + t.datetime :closes_at, index: true + t.integer :kind, null: false, index: true + t.references :current_post, foreign_key: { to_table: :posts }, index: true + t.datetime :current_post_started_at + t.integer :next_comment_no, null: false, default: 1 + t.references :host_user, foreign_key: { to_table: :users } + t.references :created_by_user, null: false, foreign_key: { to_table: :users }, index: true + t.timestamps + t.datetime :discarded_at, index: true + end + end +end diff --git a/backend/db/migrate/20260316083500_create_theatre_comments.rb b/backend/db/migrate/20260316083500_create_theatre_comments.rb new file mode 100644 index 0000000..070156b --- /dev/null +++ b/backend/db/migrate/20260316083500_create_theatre_comments.rb @@ -0,0 +1,12 @@ +class CreateTheatreComments < ActiveRecord::Migration[8.0] + def change + create_table :theatre_comments, primary_key: [:theatre_id, :no] do |t| + t.references :theatre, null: false, foreign_key: { to_table: :theatres } + t.integer :no, null: false + t.references :user, foreign_key: { to_table: :users } + t.text :content, null: false + t.timestamps + t.datetime :discarded_at, index: true + end + end +end diff --git a/backend/db/migrate/20260317015000_create_theatre_watching_users.rb b/backend/db/migrate/20260317015000_create_theatre_watching_users.rb new file mode 100644 index 0000000..a2959bf --- /dev/null +++ b/backend/db/migrate/20260317015000_create_theatre_watching_users.rb @@ -0,0 +1,12 @@ +class CreateTheatreWatchingUsers < ActiveRecord::Migration[8.0] + def change + create_table :theatre_watching_users, primary_key: [:theatre_id, :user_id] do |t| + t.references :theatre, null: false, foreign_key: { to_table: :theatres } + t.references :user, null: false, foreign_key: { to_table: :users }, index: true + t.datetime :expires_at, null: false, index: true + t.timestamps + + t.index [:theatre_id, :expires_at] + end + end +end diff --git a/backend/db/schema.rb b/backend/db/schema.rb index b6eb1f3..6a2096b 100644 --- a/backend/db/schema.rb +++ b/backend/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema[8.0].define(version: 2026_03_11_232300) do +ActiveRecord::Schema[8.0].define(version: 2026_03_17_015000) do create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t| t.string "name", null: false t.string "record_type", null: false @@ -167,6 +167,53 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_11_232300) do t.index ["tag_name_id"], name: "index_tags_on_tag_name_id", unique: true end + create_table "theatre_comments", primary_key: ["theatre_id", "no"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t| + t.bigint "theatre_id", null: false + t.integer "no", null: false + t.bigint "user_id" + t.text "content", null: false + t.datetime "created_at", null: false + t.datetime "updated_at", null: false + t.datetime "discarded_at" + t.index ["discarded_at"], name: "index_theatre_comments_on_discarded_at" + t.index ["theatre_id"], name: "index_theatre_comments_on_theatre_id" + t.index ["user_id"], name: "index_theatre_comments_on_user_id" + end + + create_table "theatre_watching_users", primary_key: ["theatre_id", "user_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t| + t.bigint "theatre_id", null: false + t.bigint "user_id", null: false + t.datetime "expires_at", null: false + t.datetime "created_at", null: false + t.datetime "updated_at", null: false + t.index ["expires_at"], name: "index_theatre_watching_users_on_expires_at" + t.index ["theatre_id", "expires_at"], name: "index_theatre_watching_users_on_theatre_id_and_expires_at" + t.index ["theatre_id"], name: "index_theatre_watching_users_on_theatre_id" + t.index ["user_id"], name: "index_theatre_watching_users_on_user_id" + end + + create_table "theatres", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t| + t.string "name" + t.datetime "opens_at", null: false + t.datetime "closes_at" + t.integer "kind", null: false + t.bigint "current_post_id" + t.datetime "current_post_started_at" + t.integer "next_comment_no", default: 1, null: false + t.bigint "host_user_id" + t.bigint "created_by_user_id", null: false + t.datetime "created_at", null: false + t.datetime "updated_at", null: false + t.datetime "discarded_at" + t.index ["closes_at"], name: "index_theatres_on_closes_at" + t.index ["created_by_user_id"], name: "index_theatres_on_created_by_user_id" + t.index ["current_post_id"], name: "index_theatres_on_current_post_id" + t.index ["discarded_at"], name: "index_theatres_on_discarded_at" + t.index ["host_user_id"], name: "index_theatres_on_host_user_id" + t.index ["kind"], name: "index_theatres_on_kind" + t.index ["opens_at"], name: "index_theatres_on_opens_at" + end + create_table "user_ips", primary_key: ["user_id", "ip_address_id"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t| t.bigint "user_id", null: false t.bigint "ip_address_id", null: false @@ -262,6 +309,13 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_11_232300) do add_foreign_key "tag_similarities", "tags" add_foreign_key "tag_similarities", "tags", column: "target_tag_id" add_foreign_key "tags", "tag_names" + add_foreign_key "theatre_comments", "theatres" + add_foreign_key "theatre_comments", "users" + add_foreign_key "theatre_watching_users", "theatres" + add_foreign_key "theatre_watching_users", "users" + add_foreign_key "theatres", "posts", column: "current_post_id" + add_foreign_key "theatres", "users", column: "created_by_user_id" + add_foreign_key "theatres", "users", column: "host_user_id" add_foreign_key "user_ips", "ip_addresses" add_foreign_key "user_ips", "users" add_foreign_key "user_post_views", "posts" 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 f7c9545..dbc257f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -19,6 +19,7 @@ import PostNewPage from '@/pages/posts/PostNewPage' import PostSearchPage from '@/pages/posts/PostSearchPage' import ServiceUnavailable from '@/pages/ServiceUnavailable' import SettingPage from '@/pages/users/SettingPage' +import TheatreDetailPage from '@/pages/theatres/TheatreDetailPage' import WikiDetailPage from '@/pages/wiki/WikiDetailPage' import WikiDiffPage from '@/pages/wiki/WikiDiffPage' import WikiEditPage from '@/pages/wiki/WikiEditPage' @@ -47,6 +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 ( -