diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index c634ad7b..ea11b454 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -75,6 +75,7 @@ export class BrowserWindow { "components/plugin-menu", "components/audio-controls", "components/qrcode-modal", + "components/moreinfo-modal", "components/equalizer", "components/add-to-playlist", "components/queue", diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less index 211e8cd9..acc2e2c6 100644 --- a/src/renderer/less/helpers.less +++ b/src/renderer/less/helpers.less @@ -411,3 +411,35 @@ margin: auto; } } + + +.moreinfo-modal { + .modal-window{ + height: 70%; + max-height: 100%; + width: 45%; + max-width: 100%; + overflow: hidden; + line-height: 1.25; + } + .modal-content{ + padding: 1em; + font-size: 0.8rem; + br { + display: block; /* makes it have a width */ + content: ""; /* clears default height */ + margin: 2em; + margin-bottom: -0.6rem; + } + } + .modal-header{ + flex-direction: column; + .modal-title{ + text-align: unset !important; + width: 100%; + &:not(.modal-subtitle){ + font-size: 25px; + } + } + } +} diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index 572c7c29..6f0493cd 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -204,7 +204,8 @@ const app = new Vue({ pluginMenu: false, audioControls: false, showPlaylist: false, - castMenu: false + castMenu: false, + moreInfo: false, }, socialBadges: { badgeMap: {}, @@ -227,6 +228,7 @@ const app = new Vue({ page: "hello-world", pages: [], }, + moreinfodata: [], }, watch: { cfg: { diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs index f6766b21..2cbf16af 100644 --- a/src/renderer/views/app/panels.ejs +++ b/src/renderer/views/app/panels.ejs @@ -34,6 +34,9 @@ + + +
diff --git a/src/renderer/views/components/moreinfo-modal.ejs b/src/renderer/views/components/moreinfo-modal.ejs new file mode 100644 index 00000000..dea844e9 --- /dev/null +++ b/src/renderer/views/components/moreinfo-modal.ejs @@ -0,0 +1,42 @@ + + + \ No newline at end of file diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs index 24268664..7c8e13a6 100644 --- a/src/renderer/views/pages/cider-playlist.ejs +++ b/src/renderer/views/pages/cider-playlist.ejs @@ -52,13 +52,13 @@
+ v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()">
- + -->
@@ -254,6 +254,16 @@ } }, methods: { + openInfoModal(){ + app.moreinfodata = []; + app.moreinfodata = { + title : this.data?.attributes ? (this.data?.attributes?.name ?? + (this.data?.attributes?.title ?? '') ?? '') : '', + subtitle: this.data?.attributes?.artistName ?? '', + content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : '')) + } + app.modals.moreInfo = true; + }, generateNestedPlaylist(){ this.nestedPlaylist = []; if (this.data?.type?.includes("album")){ diff --git a/src/renderer/views/pages/playlist-inline.ejs b/src/renderer/views/pages/playlist-inline.ejs index c634ec07..5d2104e6 100644 --- a/src/renderer/views/pages/playlist-inline.ejs +++ b/src/renderer/views/pages/playlist-inline.ejs @@ -60,13 +60,13 @@
+ v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()">
-
+ @@ -278,6 +278,16 @@ } }, methods: { + openInfoModal(){ + app.moreinfodata = []; + app.moreinfodata = { + title : this.data?.attributes ? (this.data?.attributes?.name ?? + (this.data?.attributes?.title ?? '') ?? '') : '', + subtitle: this.data?.attributes?.artistName ?? '', + content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : '')) + } + app.modals.moreInfo = true; + }, generateNestedPlaylist(){ this.nestedPlaylist = []; if (this.data?.type?.includes("album")){