From ca840c80f5dc0f56868787247941834ea25ac696 Mon Sep 17 00:00:00 2001
From: hectorqin <hectorqin@163.com>
Date: Fri, 2 Oct 2026 22:06:33 +0800
Subject: [PATCH] fix(media): align detail loading header

---
 web/src/media/screen.tsx | 2 +-
 web/src/media/v2.css     | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/media/screen.tsx b/web/src/media/screen.tsx
index 476fc05..e13c5ad 100644
--- a/web/src/media/screen.tsx
+++ b/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-hidden="true"/></button><h1>{this.managerTab==='tasks'?'扫描与刮削':'媒体库管理'}</h1></div>:this.creatingLibrary?<div className="media-page-heading"><button className="media-back-button" aria-label="← 返回内容" onClick={()=>{this.creatingLibrary=false;void this.run(()=>this.load());}}><ChevronLeft size={20} aria-hidden="true"/></button><h1>新建{labels[this.channel]}媒体库</h1></div>:this.foldersOpen?<div className="media-page-heading"><button className="media-back-button" aria-label="返回分类" onClick={()=>{if(this.routing?.back){this.routing.back();return;}this.foldersOpen=false;void this.run(()=>this.load());}}><ChevronLeft size={20} aria-hidden="true"/></button><h1>文件夹浏览</h1></div>:this.itemId&&!this.detail&&fullError?<div className="media-page-heading"><button className="media-back-button" aria-label="返回频道" onClick={()=>this.navigate(this.channel)}><ChevronLeft size={20} aria-hidden="true"/></button><h1>{this.errorCause instanceof ApiError&&this.errorCause.kind==='forbidden'?'无访问权限':'内容不可用'}</h1></div>:this.detail?<div className="media-page-heading"><button className="media-back-button" aria-label="← 返回" onClick={()=>this.backFromDetail(this.detail!)}><ChevronLeft size={20} aria-hidden="true"/></button><h2>{this.detail.editions.length>0&&this.detail.editions.every(e=>e.parts.length>0&&e.parts.every(p=>!p.available))?'文件暂不可用':mediaDetailLabel(this.detail.kind)}</h2></div>:this.searchOpen?<div className="media-page-heading"><button className="media-back-button" aria-label="返回搜索来源" onClick={()=>this.closeSearch()}><ChevronLeft size={20} aria-hidden="true"/></button><h1>搜索</h1></div>:<strong>{labels[this.channel]}</strong>}<div className="media-heading-actions" hidden={!!(this.personal||(this.managing&&this.managerTab!=='libraries'))}>{browsing&&!this.searchOpen&&<button className="media-icon-button" aria-label="搜索影音" title="搜索" onClick={()=>{if(this.routing?.navigateRoute){this.openRoute('search');return;}this.searchOpen=true;this.error='';this.errorCause=undefined;this.draw();this.element.querySelector<HTMLInputElement>('.media-search input')?.focus();}}><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg></button>}{this.searchOpen?null:this.detail?this.detailMenu():this.managing&&this.managerTab==='libraries'?<details className="media-actions media-manager-actions"><summary aria-label="媒体库管理操作"><Ellipsis size={20} aria-hidden="true"/></summary><nav aria-label="媒体库管理操作"><button onClick={()=>{if(this.routing?.navigateRoute){this.openRoute('library-new');return;}this.createReturnToManager=true;this.managing=false;this.creatingLibrary=true;this.draw();}}>新建媒体库</button><button onClick={()=>this.openManagerTasks()}>扫描与刮削</button></nav></details>:browsing?<details className="media-actions"><summary aria-label="更多影音操作"><Ellipsis size={20} aria-hidden="true"/></summary><nav aria-label="影音操作"><button onClick={()=>this.goPage('settings')}>影音设置</button>{(['favorites','history','queue'] as const).map(view=><button key={view} disabled={this.busy} onClick={()=>this.goPage(view)}>{{favorites:'收藏',history:'历史',queue:'队列'}[view]}</button>)}{this.admin&&<button onClick={()=>this.goPage('settings/libraries')}>媒体库管理</button>}</nav></details>:null}</div></header>{this.error&&<MediaScreenError fullPage={fullError} error={this.errorCause} message={this.error} busy={this.busy} onRetry={()=>this.retryScreen()} backLabel={this.folderReturn()?.itemId===this.itemId?'返回文件列表':'返回'+labels[this.channel]} onBack={this.itemId&&!this.detail?()=>{if(!this.backToFolder())this.navigate(this.channel);}:undefined}/>}{pageLoading?<MediaLoading layout={this.itemId?'detail':'grid'} square={this.channel==='music'} label={this.itemId?'正在读取作品资料…':'正在读取媒体库…'}/>:this.busy&&!this.catalogLoading&&!this.personalLoading&&<FloatingNotice message="正在处理…" busy/>}{this.personal?this.personalView():this.managing?this.manager():this.detail?this.detailView(this.detail):this.itemId||!this.librariesLoaded||fullError?null:<>{this.searchOpen?<MediaSearch key={this.location?routeHash(this.location):undefined} initialLocation={this.location?this.location.params??{}:undefined} onLocationChange={params=>this.syncLocation('search',params,'',true)} api={this.api} channel={this.channel} navigate={this.navigate}/>:this.browseView()}</>}
+  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-hidden="true"/></button><h1>{this.managerTab==='tasks'?'扫描与刮削':'媒体库管理'}</h1></div>:this.creatingLibrary?<div className="media-page-heading"><button className="media-back-button" aria-label="← 返回内容" onClick={()=>{this.creatingLibrary=false;void this.run(()=>this.load());}}><ChevronLeft size={20} aria-hidden="true"/></button><h1>新建{labels[this.channel]}媒体库</h1></div>:this.foldersOpen?<div className="media-page-heading"><button className="media-back-button" aria-label="返回分类" onClick={()=>{if(this.routing?.back){this.routing.back();return;}this.foldersOpen=false;void this.run(()=>this.load());}}><ChevronLeft size={20} aria-hidden="true"/></button><h1>文件夹浏览</h1></div>:this.itemId&&!this.detail&&fullError?<div className="media-page-heading"><button className="media-back-button" aria-label="返回频道" onClick={()=>this.navigate(this.channel)}><ChevronLeft size={20} aria-hidden="true"/></button><h1>{this.errorCause instanceof ApiError&&this.errorCause.kind==='forbidden'?'无访问权限':'内容不可用'}</h1></div>:this.itemId&&!this.detail?<div className="media-page-heading"><button className="media-back-button" aria-label="返回频道" onClick={()=>this.navigate(this.channel)}><ChevronLeft size={20} aria-hidden="true"/></button><h2>{mediaDetailLabel(this.kind)}</h2></div>:this.detail?<div className="media-page-heading"><button className="media-back-button" aria-label="← 返回" onClick={()=>this.backFromDetail(this.detail!)}><ChevronLeft size={20} aria-hidden="true"/></button><h2>{this.detail.editions.length>0&&this.detail.editions.every(e=>e.parts.length>0&&e.parts.every(p=>!p.available))?'文件暂不可用':mediaDetailLabel(this.detail.kind)}</h2></div>:this.searchOpen?<div className="media-page-heading"><button className="media-back-button" aria-label="返回搜索来源" onClick={()=>this.closeSearch()}><ChevronLeft size={20} aria-hidden="true"/></button><h1>搜索</h1></div>:<strong>{labels[this.channel]}</strong>}<div className="media-heading-actions" hidden={!!(this.personal||(this.managing&&this.managerTab!=='libraries'))}>{browsing&&!this.searchOpen&&<button className="media-icon-button" aria-label="搜索影音" title="搜索" onClick={()=>{if(this.routing?.navigateRoute){this.openRoute('search');return;}this.searchOpen=true;this.error='';this.errorCause=undefined;this.draw();this.element.querySelector<HTMLInputElement>('.media-search input')?.focus();}}><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg></button>}{this.searchOpen?null:this.detail?this.detailMenu():this.managing&&this.managerTab==='libraries'?<details className="media-actions media-manager-actions"><summary aria-label="媒体库管理操作"><Ellipsis size={20} aria-hidden="true"/></summary><nav aria-label="媒体库管理操作"><button onClick={()=>{if(this.routing?.navigateRoute){this.openRoute('library-new');return;}this.createReturnToManager=true;this.managing=false;this.creatingLibrary=true;this.draw();}}>新建媒体库</button><button onClick={()=>this.openManagerTasks()}>扫描与刮削</button></nav></details>:browsing?<details className="media-actions"><summary aria-label="更多影音操作"><Ellipsis size={20} aria-hidden="true"/></summary><nav aria-label="影音操作"><button onClick={()=>this.goPage('settings')}>影音设置</button>{(['favorites','history','queue'] as const).map(view=><button key={view} disabled={this.busy} onClick={()=>this.goPage(view)}>{{favorites:'收藏',history:'历史',queue:'队列'}[view]}</button>)}{this.admin&&<button onClick={()=>this.goPage('settings/libraries')}>媒体库管理</button>}</nav></details>:null}</div></header>{this.error&&<MediaScreenError fullPage={fullError} error={this.errorCause} message={this.error} busy={this.busy} onRetry={()=>this.retryScreen()} backLabel={this.folderReturn()?.itemId===this.itemId?'返回文件列表':'返回'+labels[this.channel]} onBack={this.itemId&&!this.detail?()=>{if(!this.backToFolder())this.navigate(this.channel);}:undefined}/>}{pageLoading?<MediaLoading layout={this.itemId?'detail':'grid'} square={this.channel==='music'} label={this.itemId?'正在读取作品资料…':'正在读取媒体库…'}/>:this.busy&&!this.catalogLoading&&!this.personalLoading&&<FloatingNotice message="正在处理…" busy/>}{this.personal?this.personalView():this.managing?this.manager():this.detail?this.detailView(this.detail):this.itemId||!this.librariesLoaded||fullError?null:<>{this.searchOpen?<MediaSearch key={this.location?routeHash(this.location):undefined} initialLocation={this.location?this.location.params??{}:undefined} onLocationChange={params=>this.syncLocation('search',params,'',true)} api={this.api} channel={this.channel} navigate={this.navigate}/>:this.browseView()}</>}
     </>,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);}
diff --git a/web/src/media/v2.css b/web/src/media/v2.css
index b5b0d92..6a07dd5 100644
--- a/web/src/media/v2.css
+++ b/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}