From a5e2520d28bf3c3644c085352378c4bf7ea550ed Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sun, 21 Jul 2024 08:21:09 +0200
Subject: [PATCH] some marketing + other changes & fixes

---
 MusicPlayerV2-GUI/public/favicon.ico          | Bin 4286 -> 1150 bytes
 .../src/components/notificationsModule.vue    |   8 +---
 .../src/components/playerView.vue             |  22 ++++++++---
 .../src/components/playlistView.vue           |  37 +++++++++++-------
 .../src/components/playlistsView.vue          |   2 +-
 MusicPlayerV2-GUI/src/views/AppView.vue       |  21 +++++++++-
 MusicPlayerV2-GUI/src/views/GetView.vue       |  21 +++++++++-
 MusicPlayerV2-GUI/src/views/HomeView.vue      |   4 +-
 MusicPlayerV2-GUI/src/views/RemoteView.vue    |   2 +-
 9 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/MusicPlayerV2-GUI/public/favicon.ico b/MusicPlayerV2-GUI/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..9e7743bc511b887796c9ee577ede780d8ed5f238 100644
GIT binary patch
literal 1150
zcmbW%?@wA+9LMpyWPd;(?eUU5*`xhgOP8j}(rz_vWizv}v043zjbdFhsny#0qfn)4
zSLs@~fap}TfJhA%(SZCA;a))Dz3)XwX7+6N=G>EeZtm-R&iDRMl+R?pbV-rpm&)bO
z73B*>QNETYLo#wUE}f#twXeQ8YxQ$ExQb4^#n-GB9E6T-#PSoQj>gC(t>hw)$SzsP
z%=M8T?Iu0cLHgmv=F&VEhOfB5T49#(@e6jvI5dm{F~Yx*^$w76h%wUjAH%B$aA{s#
zg++YF^Q>iUgfkQDW}cEdd`vDeOm<_C^jkBB({lgt#raqCk9hSBT%jr4-iP>Pt`*hH
zrn`%%zneXOCy6(0#3z0tZf)k%gIgpmcN;kZrF~XPJ9u{%aRn!F@7eGrrdf@R5!@MO
zd#Q{4&;!!p0n+|HQuCc0PIZ#DN*1X_sGKEGIuOIiVXQ^PtvOjL&J!rkvR!yVJpY_b
zZj>WgOD-t&a7#Vx=DM+6(asIYp-0777sHK5cVhcsWz^YGH}>++$Yh_8+Y@7Ri0u1*
zGB3@<$`ztw1SQA1tYujYkG95p%|+i_7ftuC5Gc$LKANOq#DABXis9-fp`X+ZBZpyZ
zoE)$a^YZghD?JV~H@d&aY`e>t<k->eB#ayx$?-`H$&u1d8%Cs5K;4fr8&vtW`6}kw
zL4NG{f!hO3^iH;-?u`>nKdT#A!;l;~t$JpZPT9)mx%Nv7&($}4XSz<m!^(}`TimuZ
z(=pk`wf4(6)+~IKn(pVvF^poV+Av~yjlPi)W|n<iF*Pyh80Thh3noh|zfRqw{plU%
zwx95!I72i)B{{~aoYcgqHH<|06jvm|Rntu#y_%-k+(wJ#9`~nvP|I%A;vXy*Ua@&>
zuN$=*=f-&sy~<W9gI!g5yx_pp(~d3h4*S+3p3-0PT;AakW2J7q#Mu6AWQ}_0rzEQ|
z;e5-T{$94KN356Q`1LTVwtT^;1LsD$QllXA8%9$4P%@2gH%6pVV6&WJwY1BU9+LOd
RFW>B+lH)c1{0IJT|2K4^V}Sqw

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

diff --git a/MusicPlayerV2-GUI/src/components/notificationsModule.vue b/MusicPlayerV2-GUI/src/components/notificationsModule.vue
index d1a4cfc..bddaec1 100644
--- a/MusicPlayerV2-GUI/src/components/notificationsModule.vue
+++ b/MusicPlayerV2-GUI/src/components/notificationsModule.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable no-undef -->
 <template>
     <div id="notifications">
-        <div class="message-box" :class="[ location, size ]">
+        <div class="message-box" :class="[ location, size ]" :style="'z-index: ' + ( messageType === 'hide' ? '-1' : '1000' )">
             <div class="message-container" :class="messageType">
                 <button @click="handleNotifications();" class="close-notification"><span class="material-symbols-outlined close-notification-icon">close</span></button>
                 <span class="material-symbols-outlined types hide" v-if="messageType == 'hide'">question_mark</span>
@@ -150,15 +150,11 @@
             notificationTimeout = setTimeout( () => {
                 handleNotifications();
             }, notifications.value[ currentDID.value ].showDuration * 1000 );
-            // eslint-disable-next-line no-undef
-            $( '.message-box' ).css( 'z-index', 1000 );
         } else {
             try {
                 clearInterval( progressBar );
             } catch (err) { /* empty */ }
             messageType.value = 'hide';
-            // eslint-disable-next-line no-undef
-            $( '.message-box' ).css( 'z-index', -1 );
         }
     }
 
@@ -185,7 +181,7 @@
 <style scoped>
     .message-box {
         position: fixed;
-        z-index: -1;
+        z-index: -100;
         color: white;
         transition: all 0.5s;
         width: 95vw;
diff --git a/MusicPlayerV2-GUI/src/components/playerView.vue b/MusicPlayerV2-GUI/src/components/playerView.vue
index 9b4d2f3..84401ed 100644
--- a/MusicPlayerV2-GUI/src/components/playerView.vue
+++ b/MusicPlayerV2-GUI/src/components/playerView.vue
@@ -24,7 +24,7 @@
                         </div>
                     </div>
                 </div>
-                <div :class="'controls-wrapper' + ( isShowingFullScreenPlayer ? ' full-screen' : '' )">
+                <div :class="'controls-wrapper' + ( isShowingFullScreenPlayer ? ' full-screen' : '' )" :style="playlist.length > 0 ? '' : 'pointer-events: none'">
                     <div class="main-controls">
                         <span class="material-symbols-outlined controls next-previous" @click="control( 'previous' )" id="previous" v-if="isShowingFullScreenPlayer">skip_previous</span>
                         <span class="material-symbols-outlined controls forward-back" @click="control( 'back' )" :style="'rotate: -' + 360 * clickCountBack + 'deg;'" v-if="isShowingFullScreenPlayer">replay_10</span>
@@ -64,7 +64,8 @@
                 :is-logged-into-apple-music="player.isLoggedIn"
                 @add-new-songs-apple-music="( song ) => addNewSongFromObject( song )"
                 @delete-song="song => removeSongFromPlaylist( song )"
-                @clear-playlist="() => clearPlaylist()"></playlistView>
+                @clear-playlist="() => clearPlaylist()"
+                @send-additional-info="() => sendAdditionalInfo()"></playlistView>
         </div>
         <notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
         <popupModule @update="( data ) => popupReturnHandler( data )" ref="popup"></popupModule>
@@ -225,10 +226,14 @@
                 notifications.value.createNotification( 'Disconnected successfully!', 5, 'ok', 'normal' );
             }
         } else if ( action === 'show-share' ) {
-            alert( 'You are currently connected to share "' + roomName.value 
-                + '". \nYou can connect to it via https://music.janishutz.com/share/' + roomName.value
-                + '. \n\nYou can connect to the fancy showcase screen using this link: https://music.janishutz.com/fancy/' + roomName.value
-                + '. Be aware that this one will use significantly more system AND network resources, so only use that for a screen that is front and center, not for a QR code to have all people connect to.' );
+            popup.value.openPopup( {
+                title: 'Details on share',
+                subtitle: 'You are currently connected to share "' + roomName.value 
+                + '". \nYou can connect to it via <a href="https://music.janishutz.com/share/' + roomName.value + '" target="_blank">https://music.janishutz.com/share/' + roomName.value + '</a>'
+                + '. \n\nYou can connect to the fancy showcase screen using this link: <a href="https://music.janishutz.com/fancy/' + roomName.value + '" target="_blank">https://music.janishutz.com/fancy/' + roomName.value + '</a>'
+                + '. Be aware that this one will use significantly more system AND network resources, so only use that for a screen that is front and center, not for a QR code to have all people connect to.'
+            } );
+            currentlyOpenPopup = 'share-details';
         }
     }
 
@@ -514,6 +519,11 @@
         notificationHandler.emit( 'playlist-update', playlist.value );
     }
 
+    const sendAdditionalInfo = () => {
+        notifications.value.createNotification( 'Additional song info transmitted', 5, 'ok', 'normal' );
+        notificationHandler.emit( 'playlist-update', playlist.value );
+    }
+
     emits( 'playerStateChange', isShowingFullScreenPlayer.value ? 'show' : 'hide' );
 
     const userStore = useUserStore();
diff --git a/MusicPlayerV2-GUI/src/components/playlistView.vue b/MusicPlayerV2-GUI/src/components/playlistView.vue
index 1f6a85a..92e5055 100644
--- a/MusicPlayerV2-GUI/src/components/playlistView.vue
+++ b/MusicPlayerV2-GUI/src/components/playlistView.vue
@@ -6,9 +6,9 @@
         <button @click="openSearch()" v-if="$props.isLoggedIntoAppleMusic" class="small-buttons" title="Search Apple Music for the song"><span class="material-symbols-outlined">search</span></button>
         <button @click="clearPlaylist()" class="small-buttons" title="Clear the playlist"><span class="material-symbols-outlined">delete</span></button>
         <p v-if="!hasSelectedSongs">Please select at least one song to proceed</p>
+        <button title="Transmit additional information" class="small-buttons" @click="sendAdditionalInfo()"><span class="material-symbols-outlined">send</span></button>
         <div class="playlist-box" id="pl-box">
-            <!-- TODO: Allow editing additionalInfo. Think also how to make it persist over reloads... Export to JSON and then best-guess add them? Very easy for Apple Music 'cause ID, but how for local songs? -->
-            <!-- TODO: Allow deleting songs, as well as whole playlist -> Handle on player side -->
+            <!-- TODO: Allow editing additionalInfo. Think also how to make it persist over reloads... Export to JSON and then best-guess add them? Very easy for Apple Music 'cause ID, but how for local songs? Maybe using retrieved ID from Apple Music? -->
             <!-- TODO: Handle long AppleMusic Playlists, as AppleMusic doesn't automatically load all songs of a playlist -->
             <div class="song" v-for="song in computedPlaylist" v-bind:key="song.id" 
                 :class="( song.id === ( $props.playlist ? $props.playlist [ $props.currentlyPlaying ?? 0 ].id : '' ) && isPlaying ? 'playing' : ' not-playing' ) 
@@ -27,7 +27,10 @@
                 <span class="material-symbols-outlined move-icon" @click="moveSong( song.id, 'up' )" title="Move song up" v-if="canBeMoved( 'up', song.id )">arrow_upward</span>
                 <span class="material-symbols-outlined move-icon" @click="moveSong( song.id, 'down' )" title="Move song down" v-if="canBeMoved( 'down', song.id )">arrow_downward</span>
                 <h3 class="song-title">{{ song.title }}</h3>
-                <p class="playing-in">{{ getTimeUntil( song ) }}</p>
+                <div>
+                    <input type="text" placeholder="Additional information for remote display" v-model="song.additionalInfo">
+                    <p class="playing-in">{{ getTimeUntil( song ) }}</p>
+                </div>
                 <button @click="deleteSong( song.id )" class="small-buttons" title="Remove this song from the queue" v-if="canBeMoved( 'down', song.id ) || canBeMoved( 'up', song.id )"><span class="material-symbols-outlined">delete</span></button>
             </div>
         </div>
@@ -36,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-// TODO: Add logout button
+    // TODO: Add logout button
     import type { AppleMusicSongData, ReadFile, Song } from '@/scripts/song';
     import { computed, ref } from 'vue';
     import searchView from './searchView.vue';
@@ -198,7 +201,11 @@
         }
     }
 
-    const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music', 'delete-song', 'clear-playlist' ] );
+    const sendAdditionalInfo = () => {
+        emits( 'send-additional-info' );
+    }
+
+    const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music', 'delete-song', 'clear-playlist', 'send-additional-info' ] );
 </script>
 
 <style scoped>
@@ -224,11 +231,11 @@
     }
 
     .song .song-cover {
-        width: 5vw;
-        height: 5vw;
+        width: 6rem;
+        height: 6rem;
         object-fit: cover;
         object-position: center;
-        font-size: 5vw;
+        font-size: 6rem;
     }
 
     .song-title {
@@ -244,14 +251,14 @@
         align-items: center;
         flex-direction: row;
         margin: 0;
-        width: 5vw;
-        height: 5vw;
+        width: 6rem;
+        height: 6rem;
         background-color: rgba( 0, 0, 0, 0.6 );
     }
 
     .playing-symbols-wrapper {
-        width: 4vw;
-        height: 5vw;
+        width: 5rem;
+        height: 6rem;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -294,11 +301,11 @@
 
     .play-icon, .pause-icon {
         display: none;
-        width: 5vw;
-        height: 5vw;
+        width: 6rem;
+        height: 6rem;
         object-fit: cover;
         object-position: center;
-        font-size: 5vw;
+        font-size: 6rem;
         cursor: pointer;
         user-select: none;
     }
diff --git a/MusicPlayerV2-GUI/src/components/playlistsView.vue b/MusicPlayerV2-GUI/src/components/playlistsView.vue
index 020fe87..385b6f4 100644
--- a/MusicPlayerV2-GUI/src/components/playlistsView.vue
+++ b/MusicPlayerV2-GUI/src/components/playlistsView.vue
@@ -7,7 +7,7 @@
         </div>
         <div v-else-if="!$props.isLoggedIn" class="not-logged-in">
             <p>You are not logged into Apple Music. We therefore can't show you your playlists. <a href="" title="Refreshes the page, allowing you to log in">Change that</a></p>
-            <p>Use the below button to load songs from your local disk</p>
+            <p>Use the button below to load songs from your local disk</p>
             <input class="pl-loader-button" type="file" multiple="true" accept="audio/*" id="pl-loader"><br>
             <button @click="loadPlaylistFromDisk()" class="pl-loader-button" id="load-button">Load</button>
             <p v-if="!hasSelectedSongs">Please select at least one song to proceed!</p>
diff --git a/MusicPlayerV2-GUI/src/views/AppView.vue b/MusicPlayerV2-GUI/src/views/AppView.vue
index b919bcc..8b9bda8 100644
--- a/MusicPlayerV2-GUI/src/views/AppView.vue
+++ b/MusicPlayerV2-GUI/src/views/AppView.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="app-view">
+        <button id="logout" @click="logout()"><span class="material-symbols-outlined">logout</span></button>
         <div class="loading-view" v-if="!hasFinishedLoading">
             <h1>Loading...</h1>
         </div>
@@ -92,10 +93,28 @@
             console.log( res.status );
         }
     } );
-    
+
+    const logout = () => {
+        location.href = 'http://localhost:8080/logout?return=http://localhost:8081';
+        // location.href = 'https://id.janishutz.com/logout?return=https://music.janishutz.com';
+    }
 </script>
 
 <style scoped>
+    #logout {
+        border: none;
+        background: none;
+        position: fixed;
+        left: calc( 10px + 2rem );
+        top: 10px;
+        cursor: pointer;
+    }
+
+    #logout .material-symbols-outlined {
+        font-size: 1.5rem;
+        color: var( --primary-color );
+    }
+
     .library-view {
         height: calc( 90vh - 10px );
         width: 100%;
diff --git a/MusicPlayerV2-GUI/src/views/GetView.vue b/MusicPlayerV2-GUI/src/views/GetView.vue
index 18a8e90..da79567 100644
--- a/MusicPlayerV2-GUI/src/views/GetView.vue
+++ b/MusicPlayerV2-GUI/src/views/GetView.vue
@@ -5,21 +5,25 @@
             <h1>MusicPlayer</h1>
             <p><i>An Open Source, browser-based MusicPlayer with beautiful graphics</i></p>
             <div style="margin-top: 20px;">
-                <a href="https://store.janishutz.com/product/com.janishutz.MusicPlayer" class="fancy-button">Subscribe</a>
-                <a href="https://github.com/simplePCBuilding/MusicPlayerV2" class="fancy-button" style="margin-left: 10px;">GitHub</a>
+                <a href="https://store.janishutz.com/product/com.janishutz.MusicPlayer" class="fancy-button" target="_blank">Subscribe</a>
+                <a href="https://github.com/simplePCBuilding/MusicPlayerV2" class="fancy-button" style="margin-left: 10px;" target="_blank">GitHub</a>
             </div>
         </div>
         <div class="full-height">
             <h2>Fully featured Music Player</h2>
+            <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="promo-img">
         </div>
         <div class="full-height">
             <h2>Apple Music integration</h2>
+            <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="promo-img">
         </div>
         <div class="full-height">
             <h2>Share your playlist</h2>
+            <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="promo-img">
         </div>
         <div class="full-height">
             <h2>Fully browser based</h2>
+            <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="promo-img">
         </div>
     </div>
 </template>
@@ -39,4 +43,17 @@
         align-items: center;
         flex-direction: column; 
     }
+
+    .full-height {
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .promo-img {
+        height: 100vh;
+        width: 100vh;
+    }
 </style>
\ No newline at end of file
diff --git a/MusicPlayerV2-GUI/src/views/HomeView.vue b/MusicPlayerV2-GUI/src/views/HomeView.vue
index 7d8b50b..b8cfdd6 100644
--- a/MusicPlayerV2-GUI/src/views/HomeView.vue
+++ b/MusicPlayerV2-GUI/src/views/HomeView.vue
@@ -6,13 +6,15 @@
             >{{ isTryingToSignIn ? 'Signing you in...' : 'Login / Sign up' }}</button>
         <p v-else>We are sorry, but we were unable to initialize the login services. Please reload the page if you wish to retry!</p>
         <p style="width: 80%;">MusicPlayer is a browser based Music Player, that allows you to connect other devices, simply with another web-browser, where you can see the current playlist with sleek animations. You can log in using your Apple Music account or load a playlist from your local disk, simply by selecting the songs using a file picker.</p>
-        <p>Head to my store to subscribe</p>
+        <router-link to="/get" class="fancy-button">More information</router-link>
         <notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
     </div>
 </template>
 
 <script setup lang="ts">
+// TODO: Make possible to install and use without account, if using FOSS version
     import router from '@/router';
+    import { RouterLink } from 'vue-router';
     import { useUserStore } from '@/stores/userStore';
     import notificationsModule from '@/components/notificationsModule.vue';
     import { ref } from 'vue';
diff --git a/MusicPlayerV2-GUI/src/views/RemoteView.vue b/MusicPlayerV2-GUI/src/views/RemoteView.vue
index 13c879f..90c2c2e 100644
--- a/MusicPlayerV2-GUI/src/views/RemoteView.vue
+++ b/MusicPlayerV2-GUI/src/views/RemoteView.vue
@@ -29,7 +29,7 @@
             <div v-else-if="!hasLoaded && !showCouldNotFindRoom">
                 <h1>Loading...</h1>
             </div>
-            <div v-else>
+            <div v-else style="max-width: 80%;">
                 <span class="material-symbols-outlined" style="font-size: 4rem;">wifi_off</span>
                 <h1>Couldn't connect!</h1>
                 <p>There does not appear to be a share with the specified name, or an error occurred when connecting.</p>