80 lines
No EOL
3.9 KiB
Text
80 lines
No EOL
3.9 KiB
Text
|
|
|
|
<script type="text/x-template" id="cider-library-songs">
|
|
<div class="content-inner library-page">
|
|
<div class="library-header">
|
|
<div class="row">
|
|
<div class="col" style="padding:0;">
|
|
<div class="search-input-container" style="width:100%;margin: 16px 0;">
|
|
<div class="search-input--icon"></div>
|
|
<input type="search"
|
|
style="width:100%;"
|
|
spellcheck="false"
|
|
placeholder="Search..."
|
|
@input="$root.searchLibrarySongs"
|
|
v-model="library.songs.search" class="search-input">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto flex-center">
|
|
<div class="row">
|
|
<div class="col">
|
|
<select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
|
|
<optgroup label="Sort By">
|
|
<option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()">
|
|
<optgroup label="Sort Order">
|
|
<option value="asc">Ascending</option>
|
|
<option value="desc">Descending</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<select class="md-select" v-model="prefs.size" @change="$root.searchLibrarySongs()">
|
|
<optgroup label="Size">
|
|
<option value="normal">Normal</option>
|
|
<option value="compact">Compact</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto flex-center">
|
|
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
|
|
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
|
|
<div class="spinner"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
|
|
<div class="well" :key="1" v-if="prefs.size == 'compact'">
|
|
<mediaitem-list-item class-list="compact" :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
|
|
</div>
|
|
<div class="well" :key="2" v-else>
|
|
<mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('cider-library-songs', {
|
|
template: '#cider-library-songs',
|
|
data: function () {
|
|
return {
|
|
library: this.$root.library,
|
|
mediaItemSize: "compact",
|
|
prefs: this.$root.cfg.libraryPrefs.songs
|
|
}
|
|
},
|
|
methods: {
|
|
sayHello: function () {
|
|
alert('Hello world!');
|
|
}
|
|
}
|
|
});
|
|
</script> |