diff --git a/src/renderer/assets/angles-left.svg b/src/renderer/assets/angles-left.svg new file mode 100644 index 00000000..cc38eb23 --- /dev/null +++ b/src/renderer/assets/angles-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/angles-right.svg b/src/renderer/assets/angles-right.svg new file mode 100644 index 00000000..7bc040ed --- /dev/null +++ b/src/renderer/assets/angles-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/chevron-right.svg b/src/renderer/assets/chevron-right.svg new file mode 100644 index 00000000..538cc611 --- /dev/null +++ b/src/renderer/assets/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less index 9341a783..771bd0e4 100644 --- a/src/renderer/less/elements.less +++ b/src/renderer/less/elements.less @@ -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%; diff --git a/src/renderer/style.css b/src/renderer/style.css index 782a157e..89918199 100644 --- a/src/renderer/style.css +++ b/src/renderer/style.css @@ -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; } diff --git a/src/renderer/views/pages/library-songs.ejs b/src/renderer/views/pages/library-songs.ejs index a96e1597..54a6b5a1 100644 --- a/src/renderer/views/pages/library-songs.ejs +++ b/src/renderer/views/pages/library-songs.ejs @@ -1,5 +1,3 @@ - - @@ -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)); @@ -101,11 +192,11 @@ let query = this.app.library.songs.displayListing.map(item => new MusicKit.MediaItem(item)); if (!app.mk.queue.isEmpty) - app.mk.queue.splice(0, app.mk.queue._itemIDs.length); + app.mk.queue.splice(0, app.mk.queue._itemIDs.length); app.mk.stop().then(() => { - if (app.mk.shuffleMode == 1) { - shuffleArray(query) - } + if (app.mk.shuffleMode == 1) { + shuffleArray(query) + } app.mk.queue.append(query) app.mk.changeToMediaAtIndex(0) });