better more info modal

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",

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;
+      }
+    }
+  }
+}

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: {

src/renderer/views/app/panels.ejs

@@ -34,6 +34,9 @@
 <transition name="modal">
     <qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
 </transition>
+<transition name="modal">
+    <moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-modal>
+</transition>
 <div id="apple-music-video-container">
     <div id="apple-music-video-player-controls">
         <div id="player-exit" title="Close" @click="exitMV()">

src/renderer/views/components/moreinfo-modal.ejs

@@ -0,0 +1,42 @@
+<script type="text/x-template" id="moreinfo-modal">
+    <div class="modal-fullscreen spatialproperties-panel moreinfo-modal" @click.self="if(timedelay) close()">
+        <div class="modal-window" >
+            <div class="modal-header">
+                <div class="modal-title">{{data.title}}</div>
+                <div class="modal-subtitle modal-title">{{data.subtitle ?? ""}}</div>
+                <button class="close-btn" @click="close()"></button>
+            </div>
+            <div class="modal-content">
+                <div class="content" v-html="data.content">
+                </div>
+            </div>    
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('moreinfo-modal', {
+        template: '#moreinfo-modal',
+        data: function () {
+            return {
+                app: this.$root,
+                timedelay: false,
+            }
+        },
+        props: ["data"],
+        mounted() {
+            let self = this;
+            this.$nextTick(()=>{
+                setTimeout(function(){
+                    self.timedelay = true
+                }, 1000);
+            })
+          
+        },
+        methods: {
+            close() {
+                app.modals.moreInfo = false;
+            },
+        }
+    });
+</script>

src/renderer/views/pages/cider-playlist.ejs

@@ -52,13 +52,13 @@
                                     </template>
                                     <div class="playlist-desc" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
                                         <div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null" class="content"
-                                                v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"></div>
+                                                v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()"></div>
                                         <div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" class="content"
                                                 v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
-                                        <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
+                                        <!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
                                                 @click="editorialNotesExpanded = !editorialNotesExpanded">
                                             {{app.getLz('term.showMore')}}
-                                        </button>
+                                        </button> -->
                                     </div>
                                 </div>
                             </template>
@@ -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")){

src/renderer/views/pages/playlist-inline.ejs

@@ -60,13 +60,13 @@
                                         </template>
                                         <div class="playlist-desc" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
                                             <div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null" class="content"
-                                                    v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"></div>
+                                                    v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()"></div>
                                             <div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" class="content"
                                                     v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard" ></div>
-                                            <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
+                                            <!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
-                                                    @click="editorialNotesExpanded = !editorialNotesExpanded">
+                                                    @click="openInfoModal()">
                                                 {{app.getLz('term.showMore')}}
-                                            </button>
+                                            </button> -->
                                         </div>
                                     </div>
                                 </template>
@@ -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")){