add pagination for library songs
This commit is contained in:
Kendall Garner
parent
b6c4cb33af
commit
a2d64b55c1
6 changed files with 186 additions and 16 deletions
1
src/renderer/assets/angles-left.svg
Normal file
1
src/renderer/assets/angles-left.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M77.25 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C175.6 444.9 183.8 448 192 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L77.25 256zM269.3 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C367.6 444.9 375.8 448 384 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L269.3 256z"/></svg>
|
||||
|
After Width: | Height: | Size: 685 B |
1
src/renderer/assets/angles-right.svg
Normal file
1
src/renderer/assets/angles-right.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 706 B |
1
src/renderer/assets/chevron-right.svg
Normal file
1
src/renderer/assets/chevron-right.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>
|
||||
|
After Width: | Height: | Size: 478 B |
|
|
@ -162,6 +162,32 @@
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
align-self: center;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.page-btn img {
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.md-ico-first {
|
||||
content: url('./assets/angles-left.svg');
|
||||
}
|
||||
|
||||
.md-ico-prev {
|
||||
content: url('./assets/chevron-left.svg');
|
||||
}
|
||||
|
||||
.md-ico-next {
|
||||
content: url('./assets/chevron-right.svg');
|
||||
}
|
||||
|
||||
.md-ico-last {
|
||||
content: url('./assets/angles-right.svg');
|
||||
}
|
||||
|
||||
.reload-btn {
|
||||
background: rgb(86 86 86 / 52%);
|
||||
border-radius: 100%;
|
||||
|
|
|
|||
|
|
@ -10652,6 +10652,26 @@ fieldset:disabled .btn {
|
|||
margin-bottom: -1.5px;
|
||||
align-self: center;
|
||||
}
|
||||
.page-btn {
|
||||
align-self: center;
|
||||
height: 32px;
|
||||
}
|
||||
.page-btn img {
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
.md-ico-first {
|
||||
content: url('./assets/angles-left.svg');
|
||||
}
|
||||
.md-ico-prev {
|
||||
content: url('./assets/chevron-left.svg');
|
||||
}
|
||||
.md-ico-next {
|
||||
content: url('./assets/chevron-right.svg');
|
||||
}
|
||||
.md-ico-last {
|
||||
content: url('./assets/angles-right.svg');
|
||||
}
|
||||
.reload-btn {
|
||||
background: rgba(86, 86, 86, 0.52);
|
||||
border-radius: 100%;
|
||||
|
|
@ -16420,7 +16440,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
--chromeHeight1: 60px;
|
||||
--chromeHeight1: 70px;
|
||||
}
|
||||
.fullscreen-view .app-content-container {
|
||||
width: 100%;
|
||||
|
|
@ -16446,8 +16466,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
left: 0;
|
||||
right: 0;
|
||||
height: var(--chromeHeight1);
|
||||
background: var(--color1);
|
||||
backdrop-filter: var(--glassFilter);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -16458,8 +16476,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
border: 1px solid #323232;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
height: 42px;
|
||||
height: 55px;
|
||||
width: 90%;
|
||||
backdrop-filter: var(--glassFilter);
|
||||
}
|
||||
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item {
|
||||
background-color: #1e1e1e00;
|
||||
|
|
@ -16472,6 +16491,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin: 0px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item:before {
|
||||
--dist: 1px;
|
||||
|
|
@ -16812,10 +16833,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
font-size: 1.1em;
|
||||
font-weight: 380;
|
||||
}
|
||||
.fullscreen-view .cd-mediaitem-list-item .duration {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.fullscreen-view .cd-mediaitem-list-item .artwork {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.fullscreen-view .cd-btn-seeall {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.fullscreen-view h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
.fullscreen-view h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.fullscreen-view .home-page .well.artistfeed-well {
|
||||
height: 512px;
|
||||
}
|
||||
.fullscreen-view .header-text {
|
||||
font-size: 3em;
|
||||
height: 3em;
|
||||
|
|
@ -16853,6 +16889,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
gap: 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.fullscreen-view .playlist-page .playlist-display .playlistInfo .playlist-hero {
|
||||
transform: unset;
|
||||
}
|
||||
.fullscreen-view .artist-page .artist-header {
|
||||
min-height: 60vh;
|
||||
}
|
||||
.fullscreen-view .artist-page .artist-image {
|
||||
width: 20vh;
|
||||
height: 20vh;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.fullscreen-view .artist-page.animated .artist-header {
|
||||
min-height: 80vh;
|
||||
}
|
||||
.fullscreen-view .playlist-page .playlist-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
<script type="text/x-template" id="cider-library-songs">
|
||||
<div class="content-inner library-page">
|
||||
<div class="library-header">
|
||||
|
|
@ -58,15 +56,52 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 16px">
|
||||
<button
|
||||
class="col md-btn page-btn"
|
||||
:disabled="currentPage === 1"
|
||||
@click="goToPage(1)"
|
||||
>
|
||||
<img class="md-ico-first"/>
|
||||
</button>
|
||||
<button
|
||||
class="col md-btn page-btn prev"
|
||||
:disabled="currentPage === 1"
|
||||
@click="goToPrevious()"
|
||||
>
|
||||
<img class="md-ico-prev"/>
|
||||
</button>
|
||||
<button
|
||||
:class="`col md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
|
||||
@click="goToPage(page)"
|
||||
v-for="page in pagesToShow">
|
||||
{{ page }}
|
||||
</button>
|
||||
<button
|
||||
class="col md-btn page-btn next"
|
||||
:disabled="currentPage === numPages"
|
||||
@click="goToNext()"
|
||||
>
|
||||
<img class="md-ico-next"/>
|
||||
</button>
|
||||
<button
|
||||
class="col md-btn page-btn last"
|
||||
:disabled="currentPage === numPages"
|
||||
@click="goToEnd()"
|
||||
>
|
||||
<img class="md-ico-last"/>
|
||||
</button>
|
||||
</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>
|
||||
<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 currentSlice"></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>
|
||||
<mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in currentSlice"></mediaitem-list-item>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
@ -75,21 +110,77 @@
|
|||
template: '#cider-library-songs',
|
||||
data: function () {
|
||||
return {
|
||||
// currentPage is oneIndexed
|
||||
currentPage: 1,
|
||||
library: this.$root.library,
|
||||
mediaItemSize: "compact",
|
||||
pageSize: 250,
|
||||
prefs: this.$root.cfg.libraryPrefs.songs,
|
||||
app : this.$root
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.getLibrarySongsFull()
|
||||
},
|
||||
computed: {
|
||||
currentSlice: function () {
|
||||
const startingPage = Math.min(this.numPages, this.currentPage);
|
||||
|
||||
return this.library.songs.displayListing.slice(
|
||||
(startingPage - 1) * this.pageSize,
|
||||
startingPage * this.pageSize
|
||||
);
|
||||
},
|
||||
numPages: function () {
|
||||
return Math.ceil(this.library.songs.displayListing.length / this.pageSize) || 1;
|
||||
|
||||
},
|
||||
pagesToShow: function () {
|
||||
let start = this.currentPage - 2;
|
||||
let end = this.currentPage + 2;
|
||||
|
||||
if (start < 1) {
|
||||
end += (1 - start);
|
||||
start = 1;
|
||||
}
|
||||
|
||||
const endDifference = end - this.numPages;
|
||||
|
||||
if (endDifference > 0) {
|
||||
end = this.numPages;
|
||||
start = Math.max(1, start - endDifference);
|
||||
}
|
||||
|
||||
const array = [];
|
||||
for (let idx = start; idx <= end; idx++) {
|
||||
array.push(idx);
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sayHello: function () {
|
||||
alert('Hello world!');
|
||||
isCurrentPage: function (idx) {
|
||||
return idx === this.currentPage ||
|
||||
idx === this.numPages && this.currentPage > this.numPages;
|
||||
},
|
||||
goToPage: function (page) {
|
||||
this.currentPage = page;
|
||||
},
|
||||
goToPrevious: function () {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage -= 1;
|
||||
}
|
||||
},
|
||||
goToNext: function () {
|
||||
if (this.currentPage < this.numPages) {
|
||||
this.currentPage += 1;
|
||||
}
|
||||
},
|
||||
goToEnd: function () {
|
||||
this.currentPage = this.numPages;
|
||||
},
|
||||
play: function () {
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue