okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #31 from GGrandma/main

Browse source 
add recentlyadded view & update sorting function
This commit is contained in:
cryptofyre 2021-12-20 17:40:52 -06:00 • committed by GitHub
commit 20c5cc630a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 110 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/renderer/index.js
View file

@ -177,8 +177,8 @@ const app = new Vue({
"releaseDate": "Release Date" "releaseDate": "Release Date"
}, },
viewAs: 'covers', viewAs: 'covers',
sorting: "name", sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
sortOrder: "asc", sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
listing: [], listing: [],
meta: {total: 0, progress: 0}, meta: {total: 0, progress: 0},
search: "", search: "",
@ -778,54 +778,37 @@ const app = new Vue({
let self = this let self = this
function sortSongs() { function sortSongs() {
if (self.library.songs.sortOrder == "asc") { // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending or ascending order based on alphabetical order and numeric order
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case self.library.songs.displayListing.sort((a, b) => {
self.library.songs.displayListing.sort((a, b) => { let aa = null;
let aa = null; let bb = null;
let bb = null; if (self.library.songs.sorting == "genre") {
if (self.library.songs.sorting == "genre") { aa = a.attributes.genreNames[0]
aa = a.attributes.genreNames[0] bb = b.attributes.genreNames[0]
bb = b.attributes.genreNames[0] }
} aa = a.attributes[self.library.songs.sorting]
aa = a.attributes[self.library.songs.sorting] bb = b.attributes[self.library.songs.sorting]
bb = b.attributes[self.library.songs.sorting] if (aa == null) {
if (aa == null) { aa = ""
aa = "" }
} if (bb == null) {
if (bb == null) { bb = ""
bb = "" }
} if (self.library.songs.sortOrder == "asc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) { if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return aa - bb return aa - bb
} else { } else {
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase()) return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
} }
}) } else if (self.library.songs.sortOrder == "desc") {
}
if (self.library.songs.sortOrder == "desc") {
// sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order
// check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.songs.displayListing.sort((a, b) => {
if (self.library.songs.sorting == "genre") {
aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0]
}
let aa = a.attributes[self.library.songs.sorting]
let bb = b.attributes[self.library.songs.sorting]
if (aa == null) {
aa = ""
}
if (bb == null) {
bb = ""
}
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) { if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return bb - aa return bb - aa
} else { } else {
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase()) return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
} }
}) }
} })
} }
if (this.library.songs.search == "") { if (this.library.songs.search == "") {
@ -858,58 +841,45 @@ const app = new Vue({
} }
}, },
// make a copy of searchLibrarySongs except use Albums instead of Songs // make a copy of searchLibrarySongs except use Albums instead of Songs
searchLibraryAlbums() { searchLibraryAlbums(index) {
let self = this let self = this
function sortAlbums() { function sortAlbums() {
if (self.library.albums.sortOrder == "asc") { // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting[index]] in descending or ascending order based on alphabetical order and numeric order
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in ascending order based on alphabetical order and numeric order // check if album.attributes[self.library.albums.sorting[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
// check if album.attributes[self.library.albums.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case let aa = null;
self.library.albums.displayListing.sort((a, b) => { let bb = null;
let aa = null; self.library.albums.displayListing.sort((a, b) => {
let bb = null; if (self.library.albums.sorting[index] == "genre") {
if (self.library.albums.sorting == "genre") { aa = a.attributes.genreNames[0]
aa = a.attributes.genreNames[0] bb = b.attributes.genreNames[0]
bb = b.attributes.genreNames[0] }
} if (self.library.albums.sorting[index] == "dateAdded") {
aa = a.attributes[self.library.albums.sorting] aa = new Date(a.attributes.dateAdded).getTime()
bb = b.attributes[self.library.albums.sorting] bb = new Date(b.attributes.dateAdded).getTime()
if (aa == null) { }
aa = "" aa = a.attributes[self.library.albums.sorting[index]]
} bb = b.attributes[self.library.albums.sorting[index]]
if (bb == null) { if (aa == null) {
bb = "" aa = ""
} }
if (bb == null) {
bb = ""
}
if (self.library.albums.sortOrder[index] == "asc") {
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) { if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return aa - bb return aa - bb
} else { } else {
return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase()) return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
} }
}) } else if (self.library.albums.sortOrder[index] == "desc") {
}
if (self.library.albums.sortOrder == "desc") {
// sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in descending order based on alphabetical order and numeric order
// check if album.attributes[self.library.albums.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
self.library.albums.displayListing.sort((a, b) => {
if (self.library.albums.sorting == "genre") {
aa = a.attributes.genreNames[0]
bb = b.attributes.genreNames[0]
}
let aa = a.attributes[self.library.albums.sorting]
let bb = b.attributes[self.library.albums.sorting]
if (aa == null) {
aa = ""
}
if (bb == null) {
bb = ""
}
if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) { if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
return bb - aa return bb - aa
} else { } else {
return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase()) return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
} }
}) }
} })
} }
if (this.library.albums.search == "") { if (this.library.albums.search == "") {
@ -1053,7 +1023,7 @@ const app = new Vue({
downloadChunk() downloadChunk()
}, },
// copy the getLibrarySongsFull function except change Songs to Albums // copy the getLibrarySongsFull function except change Songs to Albums
async getLibraryAlbumsFull(force = false) { async getLibraryAlbumsFull(force = false, index) {
let self = this let self = this
let library = [] let library = []
let downloaded = null; let downloaded = null;
@ -1062,7 +1032,7 @@ const app = new Vue({
} }
if (localStorage.getItem("libraryAlbums") != null) { if (localStorage.getItem("libraryAlbums") != null) {
this.library.albums.listing = JSON.parse(localStorage.getItem("libraryAlbums")) this.library.albums.listing = JSON.parse(localStorage.getItem("libraryAlbums"))
this.searchLibraryAlbums() this.searchLibraryAlbums(index)
} }
if (this.songstest) { if (this.songstest) {
return return
@ -1101,7 +1071,7 @@ const app = new Vue({
self.library.albums.downloadState = 2 self.library.albums.downloadState = 2
self.library.downloadNotification.show = false self.library.downloadNotification.show = false
localStorage.setItem("libraryAlbums", JSON.stringify(library)) localStorage.setItem("libraryAlbums", JSON.stringify(library))
self.searchLibraryAlbums() self.searchLibraryAlbums(index)
} }
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") { if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
console.log(`downloading next chunk - ${library.length console.log(`downloading next chunk - ${library.length
@ -1112,7 +1082,7 @@ const app = new Vue({
self.library.albums.downloadState = 2 self.library.albums.downloadState = 2
self.library.downloadNotification.show = false self.library.downloadNotification.show = false
localStorage.setItem("libraryAlbums", JSON.stringify(library)) localStorage.setItem("libraryAlbums", JSON.stringify(library))
self.searchLibraryAlbums() self.searchLibraryAlbums(index)
console.log(library) console.log(library)
} }
} }

6
src/renderer/views/main.ejs
View file

@ -366,12 +366,16 @@
<cider-search :search="search"></cider-search> <cider-search :search="search"></cider-search>
</template> </template>
</transition> </transition>
<!-- Library - Recently Added -->
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
<%- include('pages/library-recentlyadded') %>');
</transition>
<!-- Library - Songs --> <!-- Library - Songs -->
<transition name="wpfade" v-on:enter="getLibrarySongsFull()"> <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
<%- include('pages/library-songs') %> <%- include('pages/library-songs') %>
</transition> </transition>
<!-- Library - Albums --> <!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull()"> <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
<%- include('pages/library-albums') %>'); <%- include('pages/library-albums') %>');
%> %>
</transition> </transition>

6
src/renderer/views/pages/library-albums.ejs
View file

@ -5,7 +5,7 @@
<h1 class="header-text">Albums</h1> <h1 class="header-text">Albums</h1>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button> <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -23,14 +23,14 @@
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<select class="md-select" v-model="library.albums.sorting" @change="searchLibraryAlbums()"> <select class="md-select" v-model="library.albums.sorting[1]" @change="searchLibraryAlbums(1)">
<optgroup label="Sort By"> <optgroup label="Sort By">
<option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option> <option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
</optgroup> </optgroup>
</select> </select>
</div> </div>
<div class="col"> <div class="col">
<select class="md-select" v-model="library.albums.sortOrder" @change="searchLibraryAlbums()"> <select class="md-select" v-model="library.albums.sortOrder[1]" @change="searchLibraryAlbums(1)">
<optgroup label="Sort Order"> <optgroup label="Sort Order">
<option value="asc">Ascending</option> <option value="asc">Ascending</option>
<option value="desc">Descending</option> <option value="desc">Descending</option>

49
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -0,0 +1,49 @@
<template v-if="page == 'library-recentlyadded'">
<div class="content-inner">
<div class="row">
<div class="col" style="padding:0px;">
<h1 class="header-text">Recently Added</h1>
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
<div class="col" style="padding:0px;">
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
placeholder="Search..."
@input="searchLibraryAlbums"
v-model="library.albums.search" class="search-input">
</div>
</div>
<div class="col-auto flex-center">
<div class="row">
<div class="col">
<select class="md-select" v-model="library.albums.sortOrder[0]" @change="searchLibraryAlbums(0)">
<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="library.albums.viewAs">
<optgroup label="View As">
<option value="covers">Cover Art</option>
<option value="list">List</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square-large>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
</div>
</template>