fix(media): align detail loading header

web/src/media/screen.tsx

@@ -549,7 +549,7 @@ export class MediaScreen {
     </>}
   </>;}
   private closeSearch(){if(this.routing?.back){this.routing.back();return;}clearSearchReturn(this.api);this.searchOpen=false;this.query='';this.offset=0;void this.run(()=>this.load());}
-  private draw=()=>{if(this.disposed)return;if(this.player.videoControlsHost)render(this.playbackView&&this.player.active&&this.player.isWebVideo?<VideoControls player={this.player} api={this.api} onBack={this.closePlayback}/>:null,this.player.videoControlsHost);this.updateAudioLayout();this.element.classList.toggle('media-density-comfortable',this.preferences.density==='comfortable');if(this.playbackView&&!this.player.active&&!this.routing?.navigateRoute){this.closePlayback();return;}this.element.classList.toggle('media-secondary-page',!!(this.page&&!categoryKinds[this.page]||this.personal||this.managing||this.foldersOpen||this.itemId||this.searchOpen));this.element.classList.toggle('media-manager-workspace',this.managing&&!this.settingsOpen&&!this.permissionLibrary&&!this.renaming&&!this.creatingLibrary&&!this.playbackView);this.element.classList.toggle('media-utility-workspace',!!(this.settingsOpen||this.permissionLibrary||this.renaming||this.creatingLibrary)&&!this.playbackView);this.element.classList.toggle('media-metadata-workspace',!!this.metadataView&&!this.playbackView);this.element.classList.toggle('media-chapters-page',this.chaptersOpen&&!this.playbackView);this.element.classList.toggle('media-playback-page',this.playbackView);this.element.classList.toggle('media-video-page',this.playbackView&&this.player.isWebVideo);if(this.playbackView){render(<>{this.metadataPage(true)}{this.utilityPage(true)}{this.player.isWebVideo&&<header className="media-heading"><button className="media-back-button" aria-label={this.playbackPanel==='main'?'← 返回浏览':'← 返回播放'} title={this.playbackPanel==='main'?'返回浏览':'返回播放'} onClick={this.backFromPlayback}><ChevronLeft size={20} aria-hidden="true"/></button><strong>视频播放</strong></header>}{this.playbackRestoring?<MediaLoading label="正在恢复播放…" layout="detail"/>:this.playbackRestoreError?<MediaScreenError fullPage error={this.playbackRestoreError} message={this.playbackRestoreError instanceof Error?this.playbackRestoreError.message:'无法恢复播放'} busy={false} onRetry={()=>{if(this.location)void this.showRoute(this.location);}} onBack={this.closePlayback} backLabel="返回浏览"/>:this.player.active&&this.player.isWebVideo?null:this.player.active?<PlaybackControls player={this.player} api={this.api} onBack={this.backFromPlayback} onFavoriteChange={this.onPlaybackFavorite} panel={this.playbackPanel} onPanelChange={panel=>{if(this.routing?.navigateRoute){this.openRoute(panel==='main'?'player':`player/${panel}`,{},this.itemId);return;}this.playbackPanel=panel;this.draw();this.element.scrollTop=0;}}/>:<div className="media-empty"><p>当前没有播放内容。</p><button onClick={this.closePlayback}>选择作品</button></div>}</>,this.element);return;}if(this.chaptersOpen&&this.detail){render(this.chaptersView(this.detail),this.element);return;}if(this.metadataView&&this.detail&&this.admin){render(<>{this.metadataPage()}</>,this.element);return;}if(this.settingsOpen||this.permissionLibrary||this.renaming||this.creatingLibrary){render(<>{this.utilityPage()}</>,this.element);return;}const pageLoading=this.busy&&!this.personal&&!this.managing&&(!this.librariesLoaded||!!this.itemId&&!this.detail);const fullError=!!this.error&&(this.personal?this.personalFailed:!this.managing&&(!this.librariesLoaded||!!this.itemId&&!this.detail||this.catalogFailed));const browsing=!this.itemId&&!this.settingsOpen&&!this.personal&&!this.permissionLibrary&&!this.managing&&!this.detail&&!this.creatingLibrary&&!this.foldersOpen;render(<><header className="media-heading">{browsing&&!this.searchOpen&&<span className="media-mobile-title"><ChannelSwitcher current={this.channel} label={labels[this.channel]}/></span>}{browsing&&!this.searchOpen?<nav hidden={(!this.libraries.length&&this.librariesLoaded)||fullError} className="media-tabs" aria-label={labels[this.channel]+'分类'}>{kinds[this.channel].map(([kind,label])=><button key={kind} aria-current={kind===this.kind?'page':undefined} disabled={this.busy} onClick={()=>{if(this.routing?.navigateRoute){this.openRoute(Object.entries(categoryKinds).find(([,value])=>value===kind)?.[0] as MediaPage|undefined,{library:this.libraryId});return;}this.kind=kind;this.foldersOpen=false;this.offset=0;void this.run(()=>this.load());}}>{label}</button>)}</nav>:this.personal?<div className="media-page-heading"><button className="media-back-button" title={this.fromSettings?'返回影音设置':'返回'+labels[this.channel]} aria-label="← 返回" onClick={()=>this.leavePersonal()}><ChevronLeft size={20} aria-hidden="true"/></button><h1>{this.personal==='favorites'?'我的收藏':this.personal==='history'?'播放历史':'待播队列'}</h1>{this.personal!=='favorites'&&<span className="media-page-context">{labels[this.channel]}</span>}</div>:this.managing?<div className="media-page-heading"><button className="media-back-button" aria-label="返回影音设置" onClick={this.backPage}><ChevronLeft size={20} aria-hiLine truncated
+  private draw=()=>{if(this.disposed)return;if(this.player.videoControlsHost)render(this.playbackView&&this.player.active&&this.player.isWebVideo?<VideoControls player={this.player} api={this.api} onBack={this.closePlayback}/>:null,this.player.videoControlsHost);this.updateAudioLayout();this.element.classList.toggle('media-density-comfortable',this.preferences.density==='comfortable');if(this.playbackView&&!this.player.active&&!this.routing?.navigateRoute){this.closePlayback();return;}this.element.classList.toggle('media-secondary-page',!!(this.page&&!categoryKinds[this.page]||this.personal||this.managing||this.foldersOpen||this.itemId||this.searchOpen));this.element.classList.toggle('media-manager-workspace',this.managing&&!this.settingsOpen&&!this.permissionLibrary&&!this.renaming&&!this.creatingLibrary&&!this.playbackView);this.element.classList.toggle('media-utility-workspace',!!(this.settingsOpen||this.permissionLibrary||this.renaming||this.creatingLibrary)&&!this.playbackView);this.element.classList.toggle('media-metadata-workspace',!!this.metadataView&&!this.playbackView);this.element.classList.toggle('media-chapters-page',this.chaptersOpen&&!this.playbackView);this.element.classList.toggle('media-playback-page',this.playbackView);this.element.classList.toggle('media-video-page',this.playbackView&&this.player.isWebVideo);if(this.playbackView){render(<>{this.metadataPage(true)}{this.utilityPage(true)}{this.player.isWebVideo&&<header className="media-heading"><button className="media-back-button" aria-label={this.playbackPanel==='main'?'← 返回浏览':'← 返回播放'} title={this.playbackPanel==='main'?'返回浏览':'返回播放'} onClick={this.backFromPlayback}><ChevronLeft size={20} aria-hidden="true"/></button><strong>视频播放</strong></header>}{this.playbackRestoring?<MediaLoading label="正在恢复播放…" layout="detail"/>:this.playbackRestoreError?<MediaScreenError fullPage error={this.playbackRestoreError} message={this.playbackRestoreError instanceof Error?this.playbackRestoreError.message:'无法恢复播放'} busy={false} onRetry={()=>{if(this.location)void this.showRoute(this.location);}} onBack={this.closePlayback} backLabel="返回浏览"/>:this.player.active&&this.player.isWebVideo?null:this.player.active?<PlaybackControls player={this.player} api={this.api} onBack={this.backFromPlayback} onFavoriteChange={this.onPlaybackFavorite} panel={this.playbackPanel} onPanelChange={panel=>{if(this.routing?.navigateRoute){this.openRoute(panel==='main'?'player':`player/${panel}`,{},this.itemId);return;}this.playbackPanel=panel;this.draw();this.element.scrollTop=0;}}/>:<div className="media-empty"><p>当前没有播放内容。</p><button onClick={this.closePlayback}>选择作品</button></div>}</>,this.element);return;}if(this.chaptersOpen&&this.detail){render(this.chaptersView(this.detail),this.element);return;}if(this.metadataView&&this.detail&&this.admin){render(<>{this.metadataPage()}</>,this.element);return;}if(this.settingsOpen||this.permissionLibrary||this.renaming||this.creatingLibrary){render(<>{this.utilityPage()}</>,this.element);return;}const pageLoading=this.busy&&!this.personal&&!this.managing&&(!this.librariesLoaded||!!this.itemId&&!this.detail);const fullError=!!this.error&&(this.personal?this.personalFailed:!this.managing&&(!this.librariesLoaded||!!this.itemId&&!this.detail||this.catalogFailed));const browsing=!this.itemId&&!this.settingsOpen&&!this.personal&&!this.permissionLibrary&&!this.managing&&!this.detail&&!this.creatingLibrary&&!this.foldersOpen;render(<><header className="media-heading">{browsing&&!this.searchOpen&&<span className="media-mobile-title"><ChannelSwitcher current={this.channel} label={labels[this.channel]}/></span>}{browsing&&!this.searchOpen?<nav hidden={(!this.libraries.length&&this.librariesLoaded)||fullError} className="media-tabs" aria-label={labels[this.channel]+'分类'}>{kinds[this.channel].map(([kind,label])=><button key={kind} aria-current={kind===this.kind?'page':undefined} disabled={this.busy} onClick={()=>{if(this.routing?.navigateRoute){this.openRoute(Object.entries(categoryKinds).find(([,value])=>value===kind)?.[0] as MediaPage|undefined,{library:this.libraryId});return;}this.kind=kind;this.foldersOpen=false;this.offset=0;void this.run(()=>this.load());}}>{label}</button>)}</nav>:this.personal?<div className="media-page-heading"><button className="media-back-button" title={this.fromSettings?'返回影音设置':'返回'+labels[this.channel]} aria-label="← 返回" onClick={()=>this.leavePersonal()}><ChevronLeft size={20} aria-hidden="true"/></button><h1>{this.personal==='favorites'?'我的收藏':this.personal==='history'?'播放历史':'待播队列'}</h1>{this.personal!=='favorites'&&<span className="media-page-context">{labels[this.channel]}</span>}</div>:this.managing?<div className="media-page-heading"><button className="media-back-button" aria-label="返回影音设置" onClick={this.backPage}><ChevronLeft size={20} aria-hiLine truncated
     </>,this.element);
   };
   dispose(){this.disposed=true;this.playbackRestore?.abort();this.theme.dispose();cancelAnimationFrame(this.layoutFrame);this.playerSize?.disconnect();window.removeEventListener('resize',this.updateAudioLayout);document.removeEventListener('keydown',this.dismissMenus,true);document.removeEventListener('click',this.dismissMenus,true);document.removeEventListener('keydown',this.onKeyDown);this.abort.abort();if(this.poll)clearTimeout(this.poll);this.player.removeEventListener('change',this.onPlayerChanged);this.player.removeEventListener('open-controls',this.openPlayback);this.player.setControlsExpanded(false);if(this.player.videoControlsHost)render(null,this.player.videoControlsHost);render(null,this.element);}

web/src/media/v2.css

@@ -562,6 +562,9 @@ body[data-media-theme] {--surface-muted:var(--media-theme-surface)}
 .media-screen .media-continue:hover,.media-screen .media-continue:focus-visible{border-color:var(--media-accent);box-shadow:0 3px 12px rgba(31,42,34,.08);outline:none}
 .media-screen .media-continue-play{display:grid!important;place-items:center;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;border:1px solid color-mix(in srgb,var(--media-accent) 35%,var(--border))!important;border-radius:50%!important;background:transparent!important;color:var(--media-accent)!important}
 .media-screen .media-continue-play:hover{background:var(--media-selection)!important}
+.media-screen:has(>.media-read-loading-detail)>.media-heading{height:56px;min-height:56px;align-items:center}
+.media-screen:has(>.media-read-loading-detail)>.media-heading .media-page-heading{display:flex;align-items:center;gap:4px}
+.media-screen:has(>.media-read-loading-detail)>.media-heading .media-page-heading h2{margin:0;font-size:16px;line-height:1.4}
 .media-screen .media-folders{position:relative}
 .media-screen .media-folders>.media-folder-actions{position:absolute;top:-52px;right:0;margin:0;z-index:4}
 .media-screen .media-folders>.media-folder-actions>summary{min-height:40px;padding:8px 12px}