Files
cantata/web/webapp/partials/library.html
Craig Drummond 605af484f7 Initial import of *VERY* incomplete, and not fully functional Cantata
webapp. Mainly used to test SQLite backend for storing MPD db.
2015-06-01 22:57:49 +01:00

93 lines
5.0 KiB
HTML

<div ng-class="(level==='artists' && undefined!==genre) || (level==='albums' && undefined!==artist) || (level==='tracks' && undefined!==album) ? 'subpage' : 'page'">
<div ng-if="level==='genres'">
<div ng-repeat="genre in data.genres track by genre.name" class="libraryitem" ng-click="showArtists(genre)">
<div class="itembuttons">
<i class="fa fa-plus fa-fw itembutton" ng-click="command('add', genre, $event)"/>
<i class="fa fa-play fa-fw itembutton" ng-click="command('play', genre, $event)"/>
</div>
<div>
<div class="ellide noselect" on-long-press="showMenu(genre)">{{ genre | displayGenre }}</div>
<div class="subtext ellide noselect" on-long-press="showMenu(genre)">{{ genre | displayGenreDetail }}</div>
</div>
<hr class="divider"/>
</div>
</div>
<div ng-if="level==='artists'">
<div ng-if="undefined!==genre" ng-click="back()" class="titlebar">
<div class="titlechevron titleitem">
<i class="fa fa-chevron-left fa-fw"/>
</div>
<div class="titleitem">
<div> {{genre | displayGenre}}</div>
<div class="subtext ellide"> {{genre | displayGenreDetail}}</div>
</div>
<hr class="divider"/>
</div>
<div ng-repeat="artist in data.artists track by artist.id" class="libraryitem" ng-click="showAlbums(artist)">
<div class="itembuttons">
<i class="fa fa-plus fa-fw itembutton" ng-click="command('add', artist, $event)"/>
<i class="fa fa-play fa-fw itembutton" ng-click="command('play', artist, $event)"/>
</div>
<div>
<div class="ellide noselect" on-long-press="showMenu(artist)">{{ artist.id }}</div>
<div class="subtext ellide noselect" on-long-press="showMenu(artist)">{{ artist | displayArtistDetail }}</div>
</div>
<hr class="divider"/>
</div>
</div>
<div ng-if="level==='albums'">
<div ng-if="undefined!==artist" ng-click="back()" class="titlebar">
<div class="titlechevron titleitem">
<i class="fa fa-chevron-left fa-fw"/>
</div>
<div class="titleitem">
<div> {{artist.id}}</div>
<div class="subtext ellide"> {{ artist | displayArtistDetail }}</div>
</div>
<hr class="divider"/>
</div>
<div ng-repeat="album in data.albums" class="libraryitem" ng-click="showTracks(album)">
<div class="itembuttons">
<i class="fa fa-plus fa-fw itembutton" ng-click="command('add', album, $event)"/>
<i class="fa fa-play fa-fw itembutton" ng-click="command('play', album, $event)"/>
</div>
<img lazy-src="/api/v1/covers?artistId={{artist.id}}&albumId={{album.id}}"
onerror="if (this.src != 'misc/album.png') this.src = 'misc/album.png';"/>
<div>
<div class="ellide noselect" on-long-press="showMenu(album)">{{ album | displayAlbum }}</div>
<div class="subtext ellide noselect" on-long-press="showMenu(album)">{{ album | displayAlbumDetail: artist }}</div>
</div>
<hr class="divider"/>
</div>
</div>
<div ng-if="level==='tracks'">
<div ng-if="undefined!==album" ng-click="back()" class="titlebar">
<div class="titlechevron titleitem">
<i class="fa fa-chevron-left fa-fw"/>
</div>
<img src="/api/v1/covers?artistId={{artist.id}}&albumId={{album.id}}"
onerror="if (this.src != 'misc/album.png') this.src = 'misc/album.png';"/>
<div class="headerbuttons">
<i class="fa fa-plus fa-fw itembutton" ng-click="command('add', album, $event)"/>
<i class="fa fa-play fa-fw itembutton" ng-click="command('play', album, $event)"/>
</div>
<div class="titleitem">
<div class="ellide"> {{album | displayAlbum}}</div>
<div class="ellide subtext"> {{ album | displayAlbumDetail: artist }}</div>
</div>
<hr class="divider"/>
</div>
<div ng-repeat="track in data.tracks" class="libraryitem">
<div class="itembuttons">
<i class="fa fa-plus fa-fw itembutton" ng-click="command('add', track, $event)"/>
<i class="fa fa-play fa-fw itembutton" ng-click="command('play', track, $event)"/>
</div>
<div>
<div class="ellide noselect" on-long-press="showMenu(track)">{{ track | displayTrack }}</div>
<div class="subtext ellide noselect" on-long-press="showMenu(track)">{{ track | displayTrackDetail }}</div>
</div>
<hr class="divider"/>
</div>
</div>
<div>