vidarchive

vidarchive/web/templates/library_detail.html
library_detail.html
⎇
Raw
1{{define "library_detail"}}
2<div class="detail-view">
3 <div class="detail-header">
4 <h2>{{.Data.Item.Name}}</h2>
5 <div class="detail-actions">
6 <details class="overlay">
7 <summary role="button" class="small secondary">Edit</summary>
8 <div class="overlay-panel">
9 <form method="post" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}/rename">
10 <label for="item-name">Name</label>
11 <input type="text" id="item-name" name="name" value="{{.Data.Item.Name}}" required autocomplete="off">
12 <div class="form-actions">
13 <button type="submit">Save</button>
14 </div>
15 </form>
16 </div>
17 </details>
18 <details class="overlay">
19 <summary role="button" class="small danger">Delete</summary>
20 <div class="overlay-panel">
21 <p>Are you sure you want to delete this item?</p>
22 <form method="post" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}/delete" class="form-actions">
23 <button type="submit" class="danger">Yes, Delete</button>
24 </form>
25 </div>
26 </details>
27 </div>
28 </div>
29
30 {{if gt (len .Data.Item.MediaFiles) 1}}
31 <form method="get" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}" class="file-selector">
32 <label for="file">Playing</label>
33 <select id="file" name="file">
34 {{range .Data.Item.MediaFiles}}
35 <option value="{{.Filename}}" {{if eq .Filename $.Data.SelectedFilename}}selected{{end}}>{{.Filename}}</option>
36 {{end}}
37 </select>
38 <button type="submit" class="secondary">Switch</button>
39 </form>
40 {{end}}
41
42 {{range .Data.Item.MediaFiles}}
43 {{if eq .Filename $.Data.SelectedFilename}}
44 <div class="player-container">
45 {{if .IsAudio}}
46 <audio controls>
47 <source src="/media/item/{{urlEncodePath $.Data.Item.RelPath}}?file={{.Filename}}" type="{{mimeType .Filepath}}">
48 Your browser does not support the audio element.
49 </audio>
50 {{else}}
51 <video controls preload="metadata">
52 <source src="/media/item/{{urlEncodePath $.Data.Item.RelPath}}?file={{.Filename}}" type="{{mimeType .Filepath}}">
53 {{range $.Data.Subtitles}}
54 <track kind="subtitles" src="{{.Src}}" srclang="{{.Lang}}" label="{{.Label}}">
55 {{end}}
56 Your browser does not support the video element.
57 </video>
58 {{end}}
59 </div>
60 {{end}}
61 {{end}}
62
63 <div class="detail-meta">
64 <dl>
65 {{if .Data.Item.SourceURL}}
66 <dt>Source URL</dt>
67 <dd><a href="{{.Data.Item.SourceURL}}" target="_blank">{{.Data.Item.SourceURL}}</a></dd>
68 {{end}}
69
70 {{if .Data.Item.Description}}
71 {{$longDesc := isLongText .Data.Item.Description}}
72 <dt>Description</dt>
73 <dd class="description{{if $longDesc}} collapsible{{end}}">
74 {{if $longDesc}}<input type="checkbox" id="desc-toggle" class="desc-toggle">{{end}}
75 <div class="desc-text">{{.Data.Item.Description}}</div>
76 {{if $longDesc}}<label for="desc-toggle" class="desc-toggle-label"></label>{{end}}
77 </dd>
78 {{end}}
79 </dl>
80
81 <details>
82 <summary role="button" class="small secondary">More Details</summary>
83 <dl>
84 {{if .Data.SelectedFilename}}
85 <dt>File</dt>
86 <dd>{{.Data.SelectedFilename}}</dd>
87 {{end}}
88
89 {{if .Data.Item.YtdlpFlags}}
90 <dt>yt-dlp flags</dt>
91 <dd><code>{{.Data.Item.YtdlpFlags}}</code></dd>
92 {{end}}
93
94 {{if .Data.Metadata}}
95 {{if .Data.Metadata.Container}}
96 <dt>Container</dt>
97 <dd>{{.Data.Metadata.Container}}</dd>
98 {{end}}
99
100 {{if .Data.Metadata.Resolution}}
101 <dt>Resolution</dt>
102 <dd>{{.Data.Metadata.Resolution}}</dd>
103 {{end}}
104
105 {{range .Data.Metadata.VideoStreams}}
106 <dt>Video</dt>
107 <dd>
108 {{.Codec}}
109 {{if .Profile}}({{.Profile}}){{end}}
110 {{if .Width}}[{{.Width}}x{{.Height}}]{{end}}
111 {{if .FPS}}@ {{.FPS}} fps{{end}}
112 {{if .PixelFormat}}, {{.PixelFormat}}{{end}}
113 {{if .Bitrate}}, {{.Bitrate}} kbps{{end}}
114 </dd>
115 {{end}}
116
117 {{range .Data.Metadata.AudioStreams}}
118 <dt>Audio</dt>
119 <dd>
120 {{.Codec}}
121 {{if .Language}}[{{.Language}}]{{end}}
122 {{if .SampleRate}}, {{.SampleRate}} Hz{{end}}
123 {{if .ChannelLayout}}, {{.ChannelLayout}}{{else if .Channels}}, {{.Channels}} channels{{end}}
124 {{if .SampleFormat}}, {{.SampleFormat}}{{end}}
125 {{if .Bitrate}}, {{.Bitrate}} kbps{{end}}
126 </dd>
127 {{end}}
128
129 {{range .Data.Metadata.SubtitleStreams}}
130 <dt>Subtitle</dt>
131 <dd>
132 {{.Codec}}
133 {{if .Language}}[{{.Language}}]{{end}}
134 {{if .Title}}- {{.Title}}{{end}}
135 </dd>
136 {{end}}
137
138 {{if .Data.Metadata.FileSize}}
139 <dt>File Size</dt>
140 <dd>{{formatFileSize .Data.Metadata.FileSize}}</dd>
141 {{end}}
142 {{end}}
143 </dl>
144 </details>
145 </div>
146
147 {{if .Data.Heatmap}}
148 <details class="engagement-section">
149 <summary role="button" class="small secondary">Playback heatmap</summary>
150 <figure class="heatmap-figure">
151 <div class="heatmap" role="list" aria-label="Playback activity heatmap">
152 {{range .Data.Heatmap}}
153 <div class="heatmap-bar" role="listitem" style="width: {{printf "%.4f" .Width}}%; height: {{printf "%.2f" .Height}}%;" aria-label="{{heatmapRange .}}" title="{{heatmapRange .}}"></div>
154 {{end}}
155 </div>
156 <figcaption><span>Start</span><span>End</span></figcaption>
157 </figure>
158 </details>
159 {{end}}
160
161 {{if gt .Data.CommentTotal 0}}
162 <details class="engagement-section comments-preview">
163 <summary role="button" class="small secondary">Comments <span class="badge">{{.Data.CommentTotal}}</span></summary>
164 <div class="comments-actions">
165 <a href="/library/comments/{{urlEncodePath .Data.Item.RelPath}}">View all comments</a>
166 </div>
167 <div class="comment-list">
168 {{range .Data.Comments}}
169 {{template "comment_card" .}}
170 {{end}}
171 </div>
172 </details>
173 {{end}}
174</div>
175{{end}}
176