ライブラリを番組一覧・番組ページ・再生の3段にする（ステップ12）

internal/web/templates/layout.html

@@ -26,6 +26,8 @@
       {{template "subscriptions_page" .Subscriptions}}
     {{else if .Library}}
       {{template "library_page" .Library}}
+    {{else if .Series}}
+      {{template "series_page" .Series}}
     {{else if .Video}}
       {{template "video_page" .Video}}
     {{else}}

internal/web/templates/library.html

@@ -1,18 +1,21 @@
 {{define "library_page"}}
 <h1>ライブラリ</h1>
-{{if .Items}}
+{{if .Series}}
+  <p>{{.SeriesCount}}番組・{{.EpisodeCount}}本・{{.TotalSizeText}}</p>
   <div class="episode-grid">
-    {{range .Items}}
+    {{range .Series}}
       <article class="episode-card">
-        <a href="/library/{{.ID}}">
-          <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
+        <a href="/library/series/{{.SeriesID}}">
+          <div class="library-card-image">
+            <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
+            <span class="episode-count-badge">{{.EpisodeCount}}本</span>
+          </div>
           <div class="episode-copy">
-            <h2>{{.SeriesTitle}}</h2>
-            <p>{{.Title}}</p>
+            <h2>{{.SeriesTitle}} {{if .Subscribed}}<span class="subscription-badge">登録中</span>{{end}}</h2>
             <p>放送局: {{.BroadcasterName}}</p>
-            <p>長さ: {{.DurationText}}</p>
-            <p>サイズ: {{.FileSizeText}}</p>
-            <p>完了日時: {{.FinishedAtText}}</p>
+            <p>最新: {{.LatestTitle}}</p>
+            <p>最終完了: {{.LatestFinishedText}}</p>
+            <p>合計サイズ: {{.TotalSizeText}}</p>
           </div>
         </a>
       </article>
@@ -23,11 +26,38 @@
 {{end}}
 {{end}}
 
+{{define "series_page"}}
+<nav class="breadcrumbs" aria-label="パンくず"><a href="/library">ライブラリ</a><span aria-hidden="true">›</span><span>{{.SeriesTitle}}</span></nav>
+<h1>{{.SeriesTitle}} {{if .Subscribed}}<span class="subscription-badge">登録中</span>{{end}}</h1>
+<p>{{.BroadcasterName}}・{{.EpisodeCount}}本・{{.TotalSizeText}}</p>
+<p class="library-sort">並び順:
+  {{if eq .Sort "latest"}}<strong>完了が新しい順</strong>{{else}}<a href="/library/series/{{.SeriesID}}">完了が新しい順</a>{{end}}
+  ／
+  {{if eq .Sort "natural"}}<strong>話の順</strong>{{else}}<a href="/library/series/{{.SeriesID}}?sort=natural">話の順</a>{{end}}
+</p>
+<div class="library-episode-list">
+  {{range .Items}}
+    <a class="library-episode-row" href="/library/{{.ID}}">
+      <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
+      <span class="library-episode-title">{{.Title}}</span>
+      <span>{{.FinishedAtText}}</span>
+      <span>{{.DurationText}}</span>
+      <span>{{.FileSizeText}}</span>
+    </a>
+  {{end}}
+</div>
+{{end}}
+
 {{define "video_page"}}
+<nav class="breadcrumbs" aria-label="パンくず"><a href="/library">ライブラリ</a><span aria-hidden="true">›</span><a href="{{.SeriesURL}}">{{.SeriesTitle}}</a><span aria-hidden="true">›</span><span>{{.Title}}</span></nav>
 <h1>{{.SeriesTitle}}</h1>
 <h2>{{.Title}}</h2>
 <video controls preload="metadata" src="{{.VideoURL}}"></video>
 <p>放送局: {{.BroadcasterName}}／長さ: {{.DurationText}}／サイズ: {{.FileSizeText}}／完了日時: {{.FinishedAtText}}</p>
+<nav class="episode-navigation" aria-label="前後の回">
+  {{if .Previous}}<a href="/library/{{.Previous.ID}}">← 前の回: {{.Previous.Title}}</a>{{else}}<span aria-disabled="true">前の回はありません</span>{{end}}
+  {{if .Next}}<a href="/library/{{.Next.ID}}">次の回: {{.Next.Title}} →</a>{{else}}<span aria-disabled="true">次の回はありません</span>{{end}}
+</nav>
 <form action="/library/{{.ID}}/delete" method="post" hx-confirm="動画ファイルと記録を削除しますか？">
   <button type="submit">削除</button>
 </form>