优化移动端播放

web/src/pages/PlayerPage.tsx

@@ -39,6 +39,8 @@ import { classifyDirectPlayError } from './directPlayError'
 import { apiErrorMessage } from './StrmManagePage'
 import { PlayerTopBar } from './PlayerTopBar'
 import { PlayerVideoStage } from './PlayerVideoStage'
+import { PlayerMobileTheaterInfo } from '../components/PlayerMobileTheaterInfo'
+import { useIsMobileTheater } from '../hooks/useIsMobileTheater'
 import { PlayerDanmakuPanel } from '../components/PlayerDanmakuPanel'
 import { PlayerPlaylistPanel } from '../components/PlayerPlaylistPanel'
 import {
@@ -1655,6 +1657,10 @@ export function PlayerPage() {
     media?.title?.trim() ||
     ''
 
+  // 竖屏手机走剧场布局：视频贴顶按 16:9 自适应，下方是标题/选集/简介。
+  // 桌面端与横屏手机保持原来的全屏居中沉浸式布局。
+  const isMobileTheater = useIsMobileTheater()
+
   return (
     <div className="relative flex h-full w-full flex-1 flex-col overflow-hidden bg-black">
       <PlayerTopBar
@@ -1667,6 +1673,7 @@ export function PlayerPage() {
         onBack={goBack}
       />
       <PlayerVideoStage
+        theater={isMobileTheater}
         media={media}
         loadError={loadError}
         playerError={playerError}
@@ -1730,6 +1737,7 @@ export function PlayerPage() {
         onDismissVr360Guide={dismissVr360Guide}
         playlistPanel={
           <PlayerPlaylistPanel
+            theater={isMobileTheater}
             open={playlistOpen}
             onClose={() => setPlaylistOpen(false)}
             currentMediaId={media?.id ?? ''}
@@ -1741,6 +1749,7 @@ export function PlayerPage() {
         }
         danmakuPanel={
           <PlayerDanmakuPanel
+            theater={isMobileTheater}
             open={danmakuOpen}
             onClose={() => setDanmakuOpen(false)}
             enabled={danmakuEnabled}
@@ -1775,6 +1784,22 @@ export function PlayerPage() {
           />
         }
       />
+      {isMobileTheater ? (
+        <PlayerMobileTheaterInfo
+          media={media?.id === id ? media : null}
+          title={topBarTitle}
+          subtitle={topBarSubtitle}
+          playbackModeLabel={playbackModeLabel}
+          qualityLabel={showQuality ? qualityLabel : undefined}
+          episodes={playlistEpisodes}
+          currentMediaId={media?.id ?? ''}
+          currentEpisodeIndex={currentEpisodeIndex}
+          currentVersions={currentVersions}
+          onSelectEpisode={playEpisode}
+          onSelectVersion={switchVersion}
+          onOpenPlaylist={togglePlaylistOpen}
+        />
+      ) : null}
     </div>
   )
 }

web/src/pages/PlayerVideoStage.tsx

@@ -156,6 +156,11 @@ function buildSubtitleRenderGroups(
 
 type PlayerVideoStageProps = {
   media: Media | null
+  /**
+   * 竖屏剧场模式：舞台不再全屏居中，而是贴顶按 16:9 自适应高度；
+   * 弹层改为底部动作面板，避免右侧抽屉与悬浮小弹层在窄屏下被裁剪。
+   */
+  theater?: boolean
   /** 媒体元数据加载失败提示（非空时替代「加载中」展示）。 */
   loadError?: string
   playerError: string
@@ -234,6 +239,7 @@ type PlayerVideoStageProps = {
 
 export function PlayerVideoStage({
   media,
+  theater = false,
   loadError,
   playerError,
   subs,
@@ -725,12 +731,22 @@ export function PlayerVideoStage({
   const assTrack = subtitleIndex >= 0 ? subs[subtitleIndex] : undefined
   // VR 模式下画面由 WebGL 画布输出，舞台窗口本身就是「镜头」，
   // 不再按视频宽高比留黑边。
+  //
+  // 竖屏剧场模式（theater）：舞台不再全屏居中，视频贴顶按容器宽度
+  // 16:9 自适应高度，下方留给标题/选集/简介内容区。stage 本体的
+  // 高度只包住视频区，控制栏与弹层都相对这块区域定位。
   const wrapperStyle = vr360
     ? {
         width: '100%',
         height: '100%',
       }
-    : videoRatio
+    : theater
+      ? {
+          aspectRatio: '16 / 9',
+          width: '100%',
+          maxHeight: '100%',
+        }
+      : videoRatio
       ? {
           aspectRatio: `${videoRatio}`,
           width: isWiderThanStage ? '100%' : 'auto',
@@ -747,7 +763,11 @@ export function PlayerVideoStage({
     <div
       ref={stageRef}
       data-player-stage
-      className="relative flex h-full w-full flex-1 items-center justify-center overflow-hidden bg-black"
+      className={
+        theater
+          ? 'relative flex w-full shrink-0 items-start justify-center overflow-hidden bg-black'
+          : 'relative flex h-full w-full flex-1 items-center justify-center overflow-hidden bg-black'
+      }
       onPointerDown={handleStagePointerDown}
       onPointerMove={handleStagePointerMove}
       onMouseLeave={() => setLockHovered(false)}
@@ -851,6 +871,7 @@ export function PlayerVideoStage({
             ) : null}
           </div>
           <PlayerControls
+            theater={theater}
             videoRef={videoRef}
             volume={playerVolume}
             onVolumeChange={onPlayerVolumeChange}