#297

#61

#61

Merge remote-tracking branch 'origin/main' into feature/061

#61

#61

#61

#61

#61

#61

#61

#61

#61

#61

日づけ不詳の表示修正

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #298

backend/app/controllers/theatre_comments_controller.rb

@@ -0,0 +1,32 @@
+class TheatreCommentsController < ApplicationController
+  def index
+    no_gt = params[:no_gt].to_i
+    no_gt = 0 if no_gt.negative?
+
+    comments = TheatreComment
+               .where(theatre_id: params[:theatre_id])
+               .where('no > ?', no_gt)
+               .order(no: :desc)
+
+    render json: comments.as_json(include: { user: { only: [:id, :name] } })
+  end
+
+  def create
+    return head :unauthorized unless current_user
+
+    content = params[:content]
+    return head :unprocessable_entity if content.blank?
+
+    theatre = Theatre.find_by(id: params[:theatre_id])
+    return head :not_found unless theatre
+
+    comment = nil
+    theatre.with_lock do
+      no = theatre.next_comment_no
+      comment = TheatreComment.create!(theatre:, no:, user: current_user, content:)
+      theatre.update!(next_comment_no: no + 1)
+    end
+
+    render json: comment, status: :created
+  end
+end

backend/app/controllers/theatres_controller.rb

@@ -0,0 +1,54 @@
+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:,
+        watching_users: theatre.watching_users.as_json(only: [:id, :name]) }
+  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

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

backend/app/models/theatre_comment.rb

@@ -0,0 +1,8 @@
+class TheatreComment < ApplicationRecord
+  include Discard::Model
+
+  self.primary_key = :theatre_id, :no
+
+  belongs_to :theatre
+  belongs_to :user
+end

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

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

backend/config/routes.rb

@@ -72,4 +72,13 @@ Rails.application.routes.draw do
       end
     end
   end
+
+  resources :theatres, only: [:show] do
+    member do
+      put :watching
+      patch :next_post
+    end
+
+    resources :comments, controller: :theatre_comments, only: [:index, :create]
+  end
 end

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

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

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

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"

backend/spec/factories/theatre_comments.rb

@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :theatre_comment do
+    association :theatre
+    association :user
+    sequence (:no) { |n| n }
+    content { 'test comment' }
+  end
+end

backend/spec/factories/theatres.rb

@@ -0,0 +1,11 @@
+FactoryBot.define do
+  factory :theatre do
+    name { 'Test Theatre' }
+    kind { 1 }
+    opens_at { Time.current }
+    closes_at { 1.day.from_now }
+    next_comment_no { 1 }
+
+    association :created_by_user, factory: :user
+  end
+end

backend/spec/requests/theatre_comments_spec.rb

@@ -0,0 +1,150 @@
+require 'rails_helper'
+
+RSpec.describe 'TheatreComments', type: :request do
+  def sign_in_as(user)
+    allow_any_instance_of(ApplicationController).to receive(:current_user).and_return(user)
+  end
+
+  describe 'GET /theatres/:theatre_id/comments' do
+    let(:theatre) { create(:theatre) }
+    let(:other_theatre) { create(:theatre) }
+    let(:alice) { create(:user, name: 'Alice') }
+    let(:bob) { create(:user, name: 'Bob') }
+
+    let!(:comment_3) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 3,
+        user: alice,
+        content: 'third comment'
+      )
+    end
+
+    let!(:comment_1) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 1,
+        user: alice,
+        content: 'first comment'
+      )
+    end
+
+    let!(:comment_2) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 2,
+        user: bob,
+        content: 'second comment'
+      )
+    end
+
+    let!(:other_comment) do
+      create(
+        :theatre_comment,
+        theatre: other_theatre,
+        no: 1,
+        user: bob,
+        content: 'other theatre comment'
+      )
+    end
+
+    it 'theatre_id で絞り込み、no_gt より大きいものを no 降順で返す' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2])
+      expect(response.parsed_body.map { |row| row['content'] }).to eq([
+        'third comment',
+        'second comment'
+      ])
+    end
+
+    it 'user は id と name だけを含む' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
+
+      expect(response).to have_http_status(:ok)
+
+      expect(response.parsed_body.first['user']).to eq({
+        'id' => alice.id,
+        'name' => 'Alice'
+      })
+      expect(response.parsed_body.first['user'].keys).to contain_exactly('id', 'name')
+    end
+
+    it 'no_gt が負数なら 0 として扱う' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: -100 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2, 1])
+    end
+  end
+
+  describe 'POST /theatres/:theatre_id/comments' do
+    let(:user) { create(:user, name: 'Alice') }
+    let(:theatre) { create(:theatre, next_comment_no: 2) }
+
+    before do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 1,
+        user: user,
+        content: 'existing comment'
+      )
+    end
+
+    it '未ログインなら 401 を返す' do
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: 'hello' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'content が blank なら 422 を返す' do
+      sign_in_as(user)
+
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: '   ' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:unprocessable_entity)
+    end
+
+    it 'theatre が存在しなければ 404 を返す' do
+      sign_in_as(user)
+
+      expect {
+        post '/theatres/999999/comments', params: { content: 'hello' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:not_found)
+    end
+
+    it 'コメントを作成し、user を紐づけ、next_comment_no を進める' do
+      sign_in_as(user)
+
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: 'new comment' }
+      }.to change(TheatreComment, :count).by(1)
+
+      expect(response).to have_http_status(:created)
+
+      comment = TheatreComment.find_by!(theatre: theatre, no: 2)
+
+      expect(comment.user).to eq(user)
+      expect(comment.content).to eq('new comment')
+      expect(theatre.reload.next_comment_no).to eq(3)
+
+      expect(response.parsed_body.slice('theatre_id', 'no', 'user_id', 'content')).to eq({
+        'theatre_id' => theatre.id,
+        'no' => 2,
+        'user_id' => user.id,
+        'content' => 'new comment'
+      })
+    end
+  end
+end

backend/spec/requests/theatres_spec.rb

@@ -0,0 +1,307 @@
+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 include(
+          'host_flg' => true,
+          'post_id' => nil,
+          'post_started_at' => nil
+        )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          }
+        )
+      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 include(
+          'host_flg' => false,
+          'post_id' => nil,
+          'post_started_at' => nil
+        )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          },
+          {
+            'id' => other_user.id,
+            'name' => 'other user'
+          }
+        )
+      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

@@ -20,6 +20,7 @@ import PostSearchPage from '@/pages/posts/PostSearchPage'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import SettingPage from '@/pages/users/SettingPage'
 import TagListPage from '@/pages/tags/TagListPage'
+import TheatreDetailPage from '@/pages/theatres/TheatreDetailPage'
 import WikiDetailPage from '@/pages/wiki/WikiDetailPage'
 import WikiDiffPage from '@/pages/wiki/WikiDiffPage'
 import WikiEditPage from '@/pages/wiki/WikiEditPage'
@@ -49,6 +50,7 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
 	    <Route path="/tags" element={<TagListPage/>}/>
 	    <Route path="/tags/nico" element={<NicoTagListPage 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,59 +1,185 @@
-import { useRef, useLayoutEffect, useEffect, useState } from 'react'
-type Props = { id:      string,
-	       width:   number,
-	       height:  number,
-	       style?:  CSSProperties }
+import { forwardRef,
+         useCallback,
+         useEffect,
+         useImperativeHandle,
+         useLayoutEffect,
+         useMemo,
+         useRef,
+         useState } from 'react'
 
-import type { CSSProperties, FC } 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 ((props: Props) => {
-  const { id, width, height, style = { } } = props
+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 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,
+  const styleFullScreen: CSSProperties =
+      fullScreen
+      ? { top: 0,
           left: landscape ? 0 : '100%',
           position: 'fixed',
           width: screenWidth,
           height: screenHeight,
-      zIndex: 2147483647,
+          zIndex: 2_147_483_647,
           maxWidth: 'none',
           transformOrigin: '0% 0%',
           transform: landscape ? 'none' : 'rotate(90deg)',
           WebkitTransformOrigin: '0% 0%',
-      WebkitTransform: landscape ? 'none' : 'rotate(90deg)' } : {};
+          WebkitTransform: landscape ? 'none' : 'rotate(90deg)' }
+      : { }
 
-  const margedStyle = {
-      border:   'none',
-      maxWidth: '100%',
-      ...style,
-      ...styleFullScreen }
+  const margedStyle: CSSProperties =
+      { border: 'none', maxWidth: '100%', ...style, ...styleFullScreen }
 
-  useEffect (() => {
-    const onMessage = (event: MessageEvent<any>) => {
-      if (!(iframeRef.current)
-	  || (event.source !== iframeRef.current.contentWindow))
+  const postToPlayer = useCallback ((message: NiconicoCommand) => {
+    const win = iframeRef.current?.contentWindow
+    if (!(win))
       return
 
-      if (event.data.eventName === 'enterProgrammaticFullScreen')
+    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<NiconicoPlayerMessage>) => {
+      if (!(iframeRef.current)
+          || (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)
-      else if (event.data.eventName === 'exitProgrammaticFullScreen')
+	  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 (() => {
     if (!(fullScreen))
@@ -61,18 +187,18 @@ export default ((props: Props) => {
 
     const initialScrollX = scrollX
     const initialScrollY = scrollY
-    let timer: NodeJS.Timeout
+    let timer: ReturnType<typeof setTimeout>
     let ended = false
 
     const pollingResize = () => {
       if (ended)
         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)
@@ -97,15 +223,17 @@ export default ((props: Props) => {
   useEffect (() => {
     if (!(fullScreen))
       return
+
     scrollTo (0, 0)
   }, [screenWidth, screenHeight, fullScreen])
 
   return (
-      <iframe ref={iframeRef}
+      <iframe
+	  ref={iframeRef}
 	  src={src}
 	  width={width}
 	  height={height}
 	  style={margedStyle}
 	  allowFullScreen
 	  allow="autoplay"/>)
-}) satisfies FC<Props>
+})

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/PrefetchLink.tsx

@@ -71,7 +71,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 	  || ev.metaKey
 	  || ev.ctrlKey
 	  || ev.shiftKey
-	  || ev.altKey)
+	  || ev.altKey
+	  || (rest.target && rest.target !== '_self'))
 	return
 
       ev.preventDefault ()

frontend/src/components/TagDetailSidebar.tsx

@@ -6,6 +6,7 @@ import { DndContext,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
 import { restrictToWindowEdges } from '@dnd-kit/modifiers'
+import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
@@ -19,6 +20,7 @@ import SidebarComponent from '@/components/layout/SidebarComponent'
 import { toast } from '@/components/ui/use-toast'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost } from '@/lib/api'
+import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
 import type { DragEndEvent } from '@dnd-kit/core'
@@ -152,6 +154,8 @@ type Props = { post: Post; sp?: boolean }
 export default (({ post, sp }: Props) => {
   sp = Boolean (sp)
 
+  const qc = useQueryClient ()
+
   const baseTags = useMemo<TagByCategory> (() => {
     const tagsTmp = { } as TagByCategory
 
@@ -181,6 +185,8 @@ export default (({ post, sp }: Props) => {
 
   const reloadTags = async (): Promise<void> => {
     setTags (buildTagByCategory (await apiGet<Post> (`/posts/${ post.id }`)))
+    qc.invalidateQueries ({ queryKey: postsKeys.root })
+    qc.invalidateQueries ({ queryKey: tagsKeys.root })
   }
 
   const onDragEnd = async (e: DragEndEvent) => {

frontend/src/components/TagSidebar.tsx

@@ -104,14 +104,10 @@ export default (({ posts, onClick }: Props) => {
 	  {tagsVsbl && (
 	      <motion.div
 		  key="sptags"
-		  className="md:hidden mt-4"
-		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
-					  height:   0 },
-			      visible:  { clipPath: 'inset(0 0 0% 0)',
-					  height:   'auto'} }}
-		  initial="hidden"
-		  animate="visible"
-		  exit="hidden"
+		  className="md:hidden overflow-hidden"
+		  initial={{ height: 0 }}
+		  animate={{ height: 'auto' }}
+		  exit={{ height: 0 }}
 		  transition={{ duration: .2, ease: 'easeOut' }}>
 		{posts.length > 0 && TagBlock}
 	      </motion.div>)}

frontend/src/components/TopNav.tsx

@@ -79,6 +79,11 @@ 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: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
+          { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
+	  { name: <>ニジカ放送局第&thinsp;1&thinsp;チャンネル</>,
+	    to: '//www.youtube.com/watch?v=DCU3hL4Uu6A' }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },
@@ -89,7 +94,7 @@ export default (({ user }: Props) => {
 	    visible: wikiPageFlg },
 	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
 	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
-      { name: 'ユーザ', to: '/users', subMenu: [
+      { name: 'ユーザ', to: '/users/settings', subMenu: [
 	  { name: '一覧', to: '/users', visible: false },
 	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
 	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]
@@ -206,6 +211,7 @@ export default (({ user }: Props) => {
 		      <PrefetchLink
 			  key={`l-${ i }`}
 			  to={item.to}
+			  target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
 			  className="h-full flex items-center px-3">
 			{item.name}
 		      </PrefetchLink>)))}
@@ -272,6 +278,9 @@ export default (({ user }: Props) => {
 				      <PrefetchLink
 					  key={`sp-l-${ i }-${ j }`}
 					  to={subItem.to}
+					  target={subItem.to.slice (0, 2) === '//'
+						  ? '_blank'
+						  : undefined}
 					  className="w-full min-h-[36px] flex items-center pl-12">
 					{subItem.name}
 				      </PrefetchLink>)))}

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
@@ -21,7 +21,7 @@ import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
 import type { FC } from 'react'
 
-import type { User } from '@/types'
+import type { NiconicoViewerHandle, User } from '@/types'
 
 type Props = { user: User | null }
 
@@ -38,6 +38,8 @@ export default (({ user }: Props) => {
 
   const qc = useQueryClient ()
 
+  const embedRef = useRef<NiconicoViewerHandle> (null)
+
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
@@ -120,7 +122,10 @@ export default (({ user }: Props) => {
 			   className="object-cover w-full h-full"/>
 		    </motion.div>)}
 
-		<PostEmbed post={post}/>
+		<PostEmbed
+		    ref={embedRef}
+		    post={post}
+		    onLoadComplete={() => embedRef.current?.play ()}/>
 		<Button onClick={() => changeViewedFlg.mutate ()}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -0,0 +1,341 @@
+import { useEffect, useRef, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useParams } from 'react-router-dom'
+
+import ErrorScreen from '@/components/ErrorScreen'
+import PostEmbed from '@/components/PostEmbed'
+import PrefetchLink from '@/components/PrefetchLink'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
+import MainArea from '@/components/layout/MainArea'
+import SidebarComponent from '@/components/layout/SidebarComponent'
+import { SITE_TITLE } from '@/config'
+import { apiGet, apiPatch, apiPost, apiPut } from '@/lib/api'
+import { fetchPost } from '@/lib/posts'
+import { dateString } from '@/lib/utils'
+
+import type { FC } from 'react'
+
+import type { NiconicoMetadata,
+	      NiconicoViewerHandle,
+	      Post,
+	      Theatre,
+	      TheatreComment } from '@/types'
+
+type TheatreInfo = {
+    hostFlg:        boolean
+    postId:         number | null
+    postStartedAt:  string | null
+    watchingUsers:  { id: number; name: string }[] }
+
+const INITIAL_THEATRE_INFO =
+    { hostFlg: false,
+      postId: null,
+      postStartedAt: null,
+      watchingUsers: [] as { id: number; name: string }[] } as const
+
+
+export default (() => {
+  const { id } = useParams ()
+
+  const commentsRef = useRef<HTMLDivElement> (null)
+  const embedRef = useRef<NiconicoViewerHandle> (null)
+  const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
+  const videoLengthRef = useRef (0)
+  const lastCommentNoRef = useRef (0)
+
+  const [comments, setComments] = useState<TheatreComment[]> ([])
+  const [content, setContent] = useState ('')
+  const [loading, setLoading] = useState (false)
+  const [sending, setSending] = useState (false)
+  const [status, setStatus] = useState (200)
+  const [theatre, setTheatre] = useState<Theatre | null> (null)
+  const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
+  const [post, setPost] = useState<Post | null> (null)
+  const [videoLength, setVideoLength] = useState (0)
+
+  useEffect (() => {
+    theatreInfoRef.current = theatreInfo
+  }, [theatreInfo])
+
+  useEffect (() => {
+    videoLengthRef.current = videoLength
+  }, [videoLength])
+
+  useEffect (() => {
+    lastCommentNoRef.current = comments[0]?.no ?? 0
+  }, [comments])
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    let cancelled = false
+
+    setComments ([])
+    setTheatre (null)
+    setPost (null)
+    setTheatreInfo (INITIAL_THEATRE_INFO)
+    setVideoLength (0)
+    lastCommentNoRef.current = 0
+
+    void (async () => {
+      try
+      {
+	const data = await apiGet<Theatre> (`/theatres/${ id }`)
+	if (!(cancelled))
+	  setTheatre (data)
+      }
+      catch (error)
+      {
+	setStatus ((error as any)?.response.status ?? 200)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    let cancelled = false
+    let running = false
+
+    const tick = async () => {
+      if (running)
+	return
+
+      running = true
+
+      try
+      {
+	const newComments = await apiGet<TheatreComment[]> (
+	    `/theatres/${ id }/comments`,
+	    { params: { no_gt: lastCommentNoRef.current } })
+
+	if (!(cancelled) && newComments.length > 0)
+	  {
+	    lastCommentNoRef.current = newComments[newComments.length - 1].no
+	    setComments (prev => [...newComments, ...prev])
+	  }
+
+	const currentInfo = theatreInfoRef.current
+	const ended =
+	    currentInfo.hostFlg
+	    && currentInfo.postStartedAt
+	    && ((Date.now () - (new Date (currentInfo.postStartedAt)).getTime ())
+	        > videoLengthRef.current + 3_000)
+
+	if (ended)
+	  {
+	    if (!(cancelled))
+	      setTheatreInfo (prev => ({ ...prev, postId: null, postStartedAt: null }))
+
+	    return
+	  }
+
+	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
+	if (!(cancelled))
+	  setTheatreInfo (nextInfo)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	running = false
+      }
+    }
+
+    tick ()
+    const interval = setInterval (() => tick (), 1_500)
+
+    return () => {
+      cancelled = true
+      clearInterval (interval)
+    }
+  }, [id])
+
+  useEffect (() => {
+    if (!(id) || !(theatreInfo.hostFlg) || loading || theatreInfo.postId != null)
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      setLoading (true)
+
+      try
+      {
+	await apiPatch<void> (`/theatres/${ id }/next_post`)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	if (!(cancelled))
+	  setLoading (false)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id, theatreInfo.hostFlg, theatreInfo.postId])
+
+  useEffect (() => {
+    setVideoLength (0)
+
+    if (theatreInfo.postId == null)
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      try
+      {
+	const nextPost = await fetchPost (String (theatreInfo.postId))
+	if (!(cancelled))
+	  setPost (nextPost)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [theatreInfo.postId])
+
+  const syncPlayback = (meta: NiconicoMetadata) => {
+    if (!(theatreInfo.postStartedAt))
+      return
+
+    const targetTime = Math.min (
+	Math.max (0, Date.now () - (new Date (theatreInfo.postStartedAt)).getTime ()),
+	videoLength)
+
+    const drift = Math.abs (meta.currentTime - targetTime)
+
+    if (drift > 5_000)
+      embedRef.current?.seek (targetTime)
+  }
+
+  if (status >= 400)
+    return <ErrorScreen status={status}/>
+
+  return (
+      <div className="md:flex md:flex-1">
+	<Helmet>
+	  {theatre && (
+	      <title>
+		{'上映会場'
+		 + (theatre.name ? `『${ theatre.name }』` : ` #${ theatre.id }`)
+		 + ` | ${ SITE_TITLE }`}
+	      </title>)}
+	</Helmet>
+
+	<div className="hidden md:block">
+	  {post && <TagDetailSidebar post={post}/>}
+	</div>
+
+	<MainArea>
+	  {post ? (
+	      <>
+		<PostEmbed
+		    key={post.id}
+		    ref={embedRef}
+		    post={post}
+		    onLoadComplete={info => {
+		      embedRef.current?.play ()
+		      setVideoLength (info.lengthInSeconds * 1_000)
+		    }}
+		    onMetadataChange={syncPlayback}/>
+		<div className="m-2">
+		  <>再生中：</>
+		  <PrefetchLink to={`/posts/${ post.id }`} className="font-bold">
+		    {post.title || post.url}
+		  </PrefetchLink>
+		</div>
+	      </>) : 'Loading...'}
+	</MainArea>
+
+	<SidebarComponent>
+	  <form
+	      className="w-auto h-auto border border-black dark:border-white rounded mx-2"
+	      onSubmit={async e => {
+		e.preventDefault ()
+
+		if (!(content))
+		  return
+
+		try
+		{
+		  setSending (true)
+		  await apiPost (`/theatres/${ id }/comments`, { content })
+		  setContent ('')
+		  commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
+		}
+		finally
+		{
+		  setSending (false)
+		}
+	      }}>
+	    <input
+		className="w-full p-2 border rounded"
+		type="text"
+		placeholder="ここにコメントを入力"
+		value={content}
+		onChange={e => setContent (e.target.value)}
+		disabled={sending}/>
+
+	    <div
+		ref={commentsRef}
+		className="overflow-x-hidden overflow-y-scroll text-wrap w-full
+			   h-[32vh] md:h-[64vh] border rounded">
+	      {comments.map (comment => (
+		  <div key={comment.no} className="p-2">
+		    <div className="w-full">
+		      {comment.content}
+		    </div>
+		    <div className="w-full text-sm text-right">
+		      by {comment.user
+			  ? (comment.user.name || `名もなきニジラー（#${ comment.user.id }）`)
+			  : '運営'}
+		    </div>
+		    <div className="w-full text-sm text-right">
+		      {dateString (comment.createdAt)}
+		    </div>
+		  </div>))}
+	    </div>
+	  </form>
+
+	  <div className="w-auto h-auto border border-black dark:border-white rounded mx-2 mt-4">
+	    <div className="p-2">
+		現在の同接数：{theatreInfo.watchingUsers.length}
+	    </div>
+
+	    <div className="overflow-x-hidden overflow-y-scroll text-wrap w-full h-32
+			    border rounded">
+	      <ul className="list-inside list-disc">
+		{theatreInfo.watchingUsers.map (user => (
+		    <li key={user.id} className="px-4 py-1 text-sm">
+		      {user.name || `名もなきニジラー（#${ user.id }）`}
+		    </li>))}
+	      </ul>
+	    </div>
+	  </div>
+	</SidebarComponent>
+
+	<div className="md:hidden">
+	  {post && <TagDetailSidebar post={post} sp/>}
+	</div>
+      </div>)
+}) satisfies FC

frontend/src/types.ts

@@ -52,7 +52,7 @@ export type FetchTagsParams = {
 export type Menu = MenuItem[]
 
 export type MenuItem = {
-    name:     string
+    name:     ReactNode
     to:       string
     base?:    string
     subMenu:  SubMenuItem[] }
@@ -61,6 +61,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
@@ -86,7 +117,7 @@ export type PostTagChange = {
 export type SubMenuItem =
     | { component:  ReactNode
 	visible:    boolean }
-    | { name:     string
+    | { name:     ReactNode
 	to:       string
 	visible?: boolean }
 
@@ -101,6 +132,22 @@ 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 TheatreComment = {
+    theatreId:  number,
+    no:         number,
+    user:       { id: number, name: string } | null
+    content:    string
+    createdAt:  string }
+
 export type User = {
     id:               number
     name:             string | null

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 } },