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 <details class="delete-overlay">
6 <summary role="button" class="small danger">Delete</summary>
7 <div class="overlay-panel">
8 <p>Are you sure you want to delete this item?</p>
9 <form method="post" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}/delete" class="form-actions">
10 <button type="submit" class="danger">Yes, Delete</button>
11 </form>
12 </div>
13 </details>
14 </div>
15
16 {{if gt (len .Data.Item.MediaFiles) 1}}
17 <form method="get" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}" class="file-selector">
18 <label for="file">Playing</label>
19 <select id="file" name="file">
20 {{range .Data.Item.MediaFiles}}
21 <option value="{{.Filename}}" {{if eq .Filename $.Data.SelectedFilename}}selected{{end}}>{{.Filename}}</option>
22 {{end}}
23 </select>
24 <button type="submit" class="secondary">Switch</button>
25 </form>
26 {{end}}
27
28 {{range .Data.Item.MediaFiles}}
29 {{if eq .Filename $.Data.SelectedFilename}}
30 <div class="player-container">
31 {{if .IsAudio}}
32 <audio controls>
33 <source src="/media/item/{{urlEncodePath $.Data.Item.RelPath}}?file={{.Filename}}" type="{{mimeType .Filepath}}">
34 Your browser does not support the audio element.
35 </audio>
36 {{else}}
37 <video controls preload="metadata">
38 <source src="/media/item/{{urlEncodePath $.Data.Item.RelPath}}?file={{.Filename}}" type="{{mimeType .Filepath}}">
39 {{range $.Data.Subtitles}}
40 <track kind="subtitles" src="{{.Src}}" srclang="{{.Lang}}" label="{{.Label}}">
41 {{end}}
42 Your browser does not support the video element.
43 </video>
44 {{end}}
45 </div>
46 {{end}}
47 {{end}}
48
49 <div class="detail-meta">
50 <dl>
51 {{if .Data.Item.SourceURL}}
52 <dt>Source URL</dt>
53 <dd><a href="{{.Data.Item.SourceURL}}" target="_blank">{{.Data.Item.SourceURL}}</a></dd>
54 {{end}}
55
56 {{if .Data.Item.Description}}
57 {{$longDesc := isLongText .Data.Item.Description}}
58 <dt>Description</dt>
59 <dd class="description{{if $longDesc}} collapsible{{end}}">
60 {{if $longDesc}}<input type="checkbox" id="desc-toggle" class="desc-toggle">{{end}}
61 <div class="desc-text">{{.Data.Item.Description}}</div>
62 {{if $longDesc}}<label for="desc-toggle" class="desc-toggle-label"></label>{{end}}
63 </dd>
64 {{end}}
65 </dl>
66
67 <details>
68 <summary role="button" class="small secondary">More Details</summary>
69 <dl>
70 {{if .Data.SelectedFilename}}
71 <dt>File</dt>
72 <dd>{{.Data.SelectedFilename}}</dd>
73 {{end}}
74
75 {{if .Data.Item.YtdlpFlags}}
76 <dt>yt-dlp flags</dt>
77 <dd><code>{{.Data.Item.YtdlpFlags}}</code></dd>
78 {{end}}
79
80 {{if .Data.Metadata}}
81 {{if .Data.Metadata.Container}}
82 <dt>Container</dt>
83 <dd>{{.Data.Metadata.Container}}</dd>
84 {{end}}
85
86 {{if .Data.Metadata.Resolution}}
87 <dt>Resolution</dt>
88 <dd>{{.Data.Metadata.Resolution}}</dd>
89 {{end}}
90
91 {{range .Data.Metadata.VideoStreams}}
92 <dt>Video</dt>
93 <dd>
94 {{.Codec}}
95 {{if .Profile}}({{.Profile}}){{end}}
96 {{if .Width}}[{{.Width}}x{{.Height}}]{{end}}
97 {{if .FPS}}@ {{.FPS}} fps{{end}}
98 {{if .PixelFormat}}, {{.PixelFormat}}{{end}}
99 {{if .Bitrate}}, {{.Bitrate}} kbps{{end}}
100 </dd>
101 {{end}}
102
103 {{range .Data.Metadata.AudioStreams}}
104 <dt>Audio</dt>
105 <dd>
106 {{.Codec}}
107 {{if .Language}}[{{.Language}}]{{end}}
108 {{if .SampleRate}}, {{.SampleRate}} Hz{{end}}
109 {{if .ChannelLayout}}, {{.ChannelLayout}}{{else if .Channels}}, {{.Channels}} channels{{end}}
110 {{if .SampleFormat}}, {{.SampleFormat}}{{end}}
111 {{if .Bitrate}}, {{.Bitrate}} kbps{{end}}
112 </dd>
113 {{end}}
114
115 {{range .Data.Metadata.SubtitleStreams}}
116 <dt>Subtitle</dt>
117 <dd>
118 {{.Codec}}
119 {{if .Language}}[{{.Language}}]{{end}}
120 {{if .Title}}- {{.Title}}{{end}}
121 </dd>
122 {{end}}
123
124 {{if .Data.Metadata.FileSize}}
125 <dt>File Size</dt>
126 <dd>{{formatFileSize .Data.Metadata.FileSize}}</dd>
127 {{end}}
128 {{end}}
129 </dl>
130 </details>
131 </div>
132</div>
133{{end}}
134