library.html
| 1 | {{define "library"}} |
| 2 | <div class="page-header"> |
| 3 | <h2>Library</h2> |
| 4 | <div class="actions"> |
| 5 | <form method="get" action="/library" class="inline filter-form"> |
| 6 | <input type="hidden" name="path" value="{{.Data.Path}}"> |
| 7 | <input type="text" name="filter" placeholder="Search..." value="{{.Data.Filter}}"> |
| 8 | <select name="sort"> |
| 9 | <option value="date" {{if eq .Data.SortBy "date"}}selected{{end}}>Date</option> |
| 10 | <option value="title" {{if eq .Data.SortBy "title"}}selected{{end}}>Title</option> |
| 11 | <option value="duration" {{if eq .Data.SortBy "duration"}}selected{{end}}>Duration</option> |
| 12 | </select> |
| 13 | <button type="submit">Filter</button> |
| 14 | </form> |
| 15 | </div> |
| 16 | </div> |
| 17 | |
| 18 | {{if .Data.Path}} |
| 19 | <nav class="breadcrumbs"> |
| 20 | <a href="/library">Home</a> |
| 21 | {{$parts := splitPath .Data.Path}} |
| 22 | {{$last := sub (len $parts) 1}} |
| 23 | {{$currentPath := ""}} |
| 24 | {{range $i, $part := $parts}} |
| 25 | {{$currentPath = printf "%s/%s" $currentPath $part}} |
| 26 | <span>/</span> |
| 27 | {{if eq $i $last}} |
| 28 | <a href="/library?path={{$currentPath}}" aria-current="page" class="current">{{$part}}</a> |
| 29 | {{else}} |
| 30 | <a href="/library?path={{$currentPath}}">{{$part}}</a> |
| 31 | {{end}} |
| 32 | {{end}} |
| 33 | </nav> |
| 34 | {{end}} |
| 35 | |
| 36 | {{$parentPath := .Data.Path}} |
| 37 | <div class="library-grid"> |
| 38 | {{range .Data.Folders}} |
| 39 | <a href="/library?path={{printf "%s/%s" $parentPath .}}" class="folder-item"> |
| 40 | <div class="folder-icon">📁</div> |
| 41 | <div class="folder-name">{{baseName .}}</div> |
| 42 | </a> |
| 43 | {{end}} |
| 44 | |
| 45 | {{range .Data.Items}} |
| 46 | {{$item := .}} |
| 47 | {{$count := len .MediaFiles}} |
| 48 | <a href="/library/item/{{urlEncodePath .RelPath}}" class="media-item {{if gt $count 0}}{{if (index .MediaFiles 0).IsAudio}}audio{{else}}video{{end}}{{end}}"> |
| 49 | <div class="media-thumbnail {{if le $count 1}}count-1{{else if eq $count 2}}count-2{{else if eq $count 3}}count-3{{else}}count-many{{end}}"> |
| 50 | {{if le $count 1}} |
| 51 | {{if gt $count 0}} |
| 52 | {{$mf := index .MediaFiles 0}} |
| 53 | <div class="thumb-tile"> |
| 54 | <img src="/media/item/{{urlEncodePath .RelPath}}/thumbnail?file={{$mf.Filename}}" alt="" loading="lazy"> |
| 55 | {{if gt $mf.Duration 0}}<span class="media-duration">{{formatDuration $mf.Duration}}</span>{{end}} |
| 56 | </div> |
| 57 | {{else}} |
| 58 | <div class="thumb-tile"> |
| 59 | <img src="/static/icons/video-icon.svg" alt="" loading="lazy"> |
| 60 | </div> |
| 61 | {{end}} |
| 62 | {{else}} |
| 63 | {{range $i, $mf := .MediaFiles}} |
| 64 | {{if lt $i 4}} |
| 65 | <div class="thumb-tile"> |
| 66 | <img src="/media/item/{{urlEncodePath $item.RelPath}}/thumbnail?file={{$mf.Filename}}" alt="" loading="lazy"> |
| 67 | {{if gt $mf.Duration 0}}<span class="media-duration">{{formatDuration $mf.Duration}}</span>{{end}} |
| 68 | </div> |
| 69 | {{end}} |
| 70 | {{end}} |
| 71 | {{if gt $count 4}} |
| 72 | <span class="thumb-more">+{{sub $count 4}}</span> |
| 73 | {{end}} |
| 74 | <span class="thumb-count">{{$count}} files</span> |
| 75 | {{end}} |
| 76 | </div> |
| 77 | <div class="media-info"> |
| 78 | <div class="media-title">{{.Name}}</div> |
| 79 | </div> |
| 80 | </a> |
| 81 | {{end}} |
| 82 | </div> |
| 83 | |
| 84 | {{if and (eq (len .Data.Folders) 0) (eq (len .Data.Items) 0)}} |
| 85 | <div class="empty-state"> |
| 86 | <p>No media found. <a href="/download">Start a download</a> or add existing files.</p> |
| 87 | </div> |
| 88 | {{end}} |
| 89 | {{end}} |
| 90 |