From 72d24c8c8081173ad6c3942bc9b4bcb2a8f9d030 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Mon, 16 Mar 2026 12:33:14 +0900 Subject: [PATCH 1/7] #295 --- .../migrate/20260316082500_create_theatres.rb | 15 ++++++++ .../20260316083500_create_theatre_comments.rb | 12 ++++++ backend/db/schema.rb | 37 ++++++++++++++++++- 3 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 backend/db/migrate/20260316082500_create_theatres.rb create mode 100644 backend/db/migrate/20260316083500_create_theatre_comments.rb diff --git a/backend/db/migrate/20260316082500_create_theatres.rb b/backend/db/migrate/20260316082500_create_theatres.rb new file mode 100644 index 0000000..828623a --- /dev/null +++ b/backend/db/migrate/20260316082500_create_theatres.rb @@ -0,0 +1,15 @@ +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.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 :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/schema.rb b/backend/db/schema.rb index b6eb1f3..05b9aa0 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_16_083500) 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,37 @@ 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 "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.bigint "current_post_id" + t.datetime "current_post_started_at" + t.integer "next_comment_no", default: 1, null: false + 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 ["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 +293,10 @@ 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 "theatres", "posts", column: "current_post_id" + add_foreign_key "theatres", "users", column: "created_by_user_id" add_foreign_key "user_ips", "ip_addresses" add_foreign_key "user_ips", "users" add_foreign_key "user_post_views", "posts" -- 2.34.1 From bbee8887331d32edf121b3a61e91cfc2632bd6d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=A6=E3=82=8B=E3=81=9E?= Date: Tue, 17 Mar 2026 12:24:41 +0900 Subject: [PATCH 2/7] #295 --- frontend/src/pages/theatres/TheatreDetailPage.tsx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 frontend/src/pages/theatres/TheatreDetailPage.tsx diff --git a/frontend/src/pages/theatres/TheatreDetailPage.tsx b/frontend/src/pages/theatres/TheatreDetailPage.tsx new file mode 100644 index 0000000..7559cde --- /dev/null +++ b/frontend/src/pages/theatres/TheatreDetailPage.tsx @@ -0,0 +1,6 @@ +import type { FC } from 'react' + + +export default (() => { + return <> +}) satisfies FC -- 2.34.1 From 72f5c7b9beedadd313a983850695378a1c7dd78c Mon Sep 17 00:00:00 2001 From: miteruzo Date: Tue, 17 Mar 2026 03:30:09 +0000 Subject: [PATCH 3/7] #295 --- frontend/src/pages/theatres/TheatreDetailPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/theatres/TheatreDetailPage.tsx b/frontend/src/pages/theatres/TheatreDetailPage.tsx index 7559cde..0cd10d2 100644 --- a/frontend/src/pages/theatres/TheatreDetailPage.tsx +++ b/frontend/src/pages/theatres/TheatreDetailPage.tsx @@ -2,5 +2,7 @@ import type { FC } from 'react' export default (() => { - return <> + return ( + + ) }) satisfies FC -- 2.34.1 From 3e34f1ff9a396836e54c06e976c69cb401ce3eb5 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Wed, 18 Mar 2026 01:04:50 +0900 Subject: [PATCH 4/7] #295 --- .../app/controllers/theatres_controller.rb | 52 ++++++++++++ backend/app/models/theatre.rb | 13 +++ backend/app/models/theatre_comment.rb | 8 ++ backend/app/models/theatre_watching_user.rb | 13 +++ backend/app/representations/theatre_repr.rb | 17 ++++ backend/config/routes.rb | 7 ++ .../migrate/20260316082500_create_theatres.rb | 2 + ...317015000_create_theatre_watching_users.rb | 12 +++ backend/db/schema.rb | 21 ++++- frontend/src/App.tsx | 2 + frontend/src/components/TopNav.tsx | 2 + .../src/pages/theatres/TheatreDetailPage.tsx | 81 ++++++++++++++++++- frontend/src/types.ts | 9 +++ 13 files changed, 236 insertions(+), 3 deletions(-) create mode 100644 backend/app/controllers/theatres_controller.rb create mode 100644 backend/app/models/theatre.rb create mode 100644 backend/app/models/theatre_comment.rb create mode 100644 backend/app/models/theatre_watching_user.rb create mode 100644 backend/app/representations/theatre_repr.rb create mode 100644 backend/db/migrate/20260317015000_create_theatre_watching_users.rb 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 index 828623a..1640bb7 100644 --- a/backend/db/migrate/20260316082500_create_theatres.rb +++ b/backend/db/migrate/20260316082500_create_theatres.rb @@ -4,9 +4,11 @@ class CreateTheatres < ActiveRecord::Migration[8.0] 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 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 05b9aa0..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_16_083500) 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 @@ -180,13 +180,27 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_16_083500) do 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 @@ -195,6 +209,8 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_16_083500) do 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 @@ -295,8 +311,11 @@ ActiveRecord::Schema[8.0].define(version: 2026_03_16_083500) do 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/frontend/src/App.tsx b/frontend/src/App.tsx index f7c9545..3b437cb 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/TopNav.tsx b/frontend/src/components/TopNav.tsx index 06c30cf..b6a624b 100644 --- a/frontend/src/components/TopNav.tsx +++ b/frontend/src/components/TopNav.tsx @@ -79,6 +79,8 @@ 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' }] }, { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [ { name: '検索', to: '/wiki' }, { name: '新規', to: '/wiki/new' }, diff --git a/frontend/src/pages/theatres/TheatreDetailPage.tsx b/frontend/src/pages/theatres/TheatreDetailPage.tsx index 0cd10d2..2657daa 100644 --- a/frontend/src/pages/theatres/TheatreDetailPage.tsx +++ b/frontend/src/pages/theatres/TheatreDetailPage.tsx @@ -1,8 +1,85 @@ +import { useEffect, useState } from 'react' +import { Helmet } from 'react-helmet-async' +import { useParams } from 'react-router-dom' + +import PostEmbed from '@/components/PostEmbed' +import MainArea from '@/components/layout/MainArea' +import { SITE_TITLE } from '@/config' +import { apiGet, apiPatch, apiPut } from '@/lib/api' +import { fetchPost } from '@/lib/posts' + import type { FC } from 'react' +import type { Theatre } from '@/types' + +type TheatreInfo = { + hostFlg: boolean + postId: number | null + postStartedAt: string | null } + +type Props = { user: User } + + +export default (({ user }: Props) => { + const { id } = useParams () + + const [loading, setLoading] = useState (false) + const [hostFlg, setHostFlg] = useState (false) + const [theatre, setTheatre] = useState (null) + const [theatreInfo, setTheatreInfo] = + useState ({ hostFlg: false, postId: null, postStartedAt: null }) + const [post, setPost] = useState (null) + + useEffect (() => { + if (!(id)) + return + + void (async () => { + setTheatre (await apiGet (`/theatres/${ id }`)) + }) () + + const interval = setInterval (async () => { + setTheatreInfo (await apiPut (`/theatres/${ id }/watching`)) + }, 1_000) + + return () => clearInterval (interval) + }, [id]) + + useEffect (() => { + if (!(theatreInfo.hostFlg) || loading) + return + + if (theatreInfo.postId == null) + { + void (async () => { + setLoading (true) + await apiPatch (`/theatres/${ id }/next_post`) + setLoading (false) + }) () + return + } + }, [theatreInfo]) + + useEffect (() => { + if (theatreInfo.postId == null) + return + + void (async () => { + setPost (await fetchPost (theatreInfo.postId)) + }) () + }, [theatreInfo.postId, theatreInfo.postStartedAt]) -export default (() => { return ( + + {theatre && ( + + {'上映会場' + + (theatre.name ? `『${ theatre.name }』` : ` #${ theatre.id }`) + + ` | ${ SITE_TITLE }`} + )} + + + {post && } ) -}) satisfies FC +}) satisfies FC diff --git a/frontend/src/types.ts b/frontend/src/types.ts index f40f533..f19020c 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -75,6 +75,15 @@ export type Tag = { children?: Tag[] matchedAlias?: string | null } +export type Theatre = { + id: number + name: string | null + opensAt: string + closesAt: string | null + createdByUser: { id: number; name: string } + createdAt: string + updatedAt: string } + export type User = { id: number name: string | null -- 2.34.1 From c492c3e944f1f5afdd1d7c8d220ea2208d008348 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Wed, 18 Mar 2026 22:44:11 +0900 Subject: [PATCH 5/7] #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 ( -