From 3a605453bed3545b3471748ff784c13c1c3b0cc8 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Mon, 23 Oct 2023 20:29:26 +0200
Subject: [PATCH] some more progress on fancy view

---
 frontend/src/app.js                   |  4 ++++
 frontend/src/components/fancyView.vue | 29 ++++++++++++++++++++++++---
 frontend/src/components/mediaPool.vue |  7 +++++--
 frontend/src/components/player.vue    | 22 +++++++++++++-------
 frontend/src/imageFetcher.js          | 12 +++++++++++
 frontend/src/views/HomeView.vue       |  2 +-
 6 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/imageFetcher.js

diff --git a/frontend/src/app.js b/frontend/src/app.js
index 6819a2c..18cca62 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -66,6 +66,10 @@ app.get( '/indexDirs', ( req, res ) => {
                             } catch ( err ) {
                                 files[ req.query.dir + '/' + dat[ file ] ] = 'ERROR';
                             }
+                        } else if ( dat[ file ].slice( dat[ file ].indexOf( '.' ), dat[ file ].length ) === '.csv' ) {
+
+                        } else if ( dat[ file ].slice( dat[ file ].indexOf( '.' ), dat[ file ].length ) === '.json' ) {
+                            
                         }
                     }
                     indexedData[ req.query.dir ] = files;
diff --git a/frontend/src/components/fancyView.vue b/frontend/src/components/fancyView.vue
index 819f39a..cc6db87 100644
--- a/frontend/src/components/fancyView.vue
+++ b/frontend/src/components/fancyView.vue
@@ -1,13 +1,27 @@
 <template>
     <div class="fancy-view">
-        <span class="material-symbols-outlined image" v-if="!song.hasCoverArt">music_note</span>
-        <img v-else :src="'http://localhost:8081/getSongCover?filename=' + song.filename" class="image">
+        <span class="material-symbols-outlined fancy-view-song-art" v-if="!song.hasCoverArt">music_note</span>
+        <img v-else :src="'http://localhost:8081/getSongCover?filename=' + song.filename" class="fancy-view-song-art">
+        <button @click="exit()" id="exit-button"><span class="material-symbols-outlined" style="font-size: 4vh;">close</span></button>
+        <div class="controls"></div>
     </div>
 </template>
 
 <style scoped>
+    #exit-button {
+        position: fixed;
+        right: 1vw;
+        top: 1vw;
+        background-color: rgba( 0,0,0,0 );
+        border: none;
+        cursor: pointer;
+        color: var( --primary-color );
+    }
+
     .fancy-view {
-        display: block;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         position: fixed;
         z-index: 20;
         height: 100vh;
@@ -16,6 +30,12 @@
         left: 0;
         background-color: var( --background-color );
     }
+
+    .fancy-view-song-art {
+        height: 40vh;
+        width: auto;
+        margin-bottom: 5%;
+    }
 </style>
 
 <script>
@@ -23,6 +43,9 @@
         methods: {
             control ( instruction ) {
 
+            },
+            exit() {
+                this.$emit( 'control', 'exitFancyView' );
             }
         },
         props: {
diff --git a/frontend/src/components/mediaPool.vue b/frontend/src/components/mediaPool.vue
index 73221a9..f1d8960 100644
--- a/frontend/src/components/mediaPool.vue
+++ b/frontend/src/components/mediaPool.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="media-pool">
+    <div class="media-pool" :style="isShowingFancyView ? 'overflow: hidden;' : ''">
         <div v-if="hasLoadedSongs" style="width: 100%;" class="song-list-wrapper">
             <div v-for="song in songQueue" class="song-list" :class="[ isPlaying ? ( currentlyPlaying === song.filename ? 'playing': 'not-playing' ) : 'not-playing', !isPlaying && currentlyPlaying === song.filename ? 'active-song': undefined ]">
                 <span class="material-symbols-outlined song-image" v-if="!loadCoverArtPreview || !song.hasCoverArt">music_note</span>
@@ -128,7 +128,7 @@
         align-items: center;
         width: 80%;
         margin: 2px;
-        padding: 15px;
+        padding: 1vh;
         border: 1px var( --border-color ) solid;
     }
 
@@ -199,6 +199,7 @@
                 isPlaying: false,
                 songPos: 0,
                 repeat: false,
+                isShowingFancyView: false,
             }
         },
         methods: {
@@ -235,6 +236,8 @@
                     this.repeat = true;
                 } else if ( status.type === 'repeatOff' ) {
                     this.repeat = false;
+                } else if ( status.type === 'fancyView' ) {
+                    this.isShowingFancyView = status.status;
                 }
             },
             queueHandler ( command ) {
diff --git a/frontend/src/components/player.vue b/frontend/src/components/player.vue
index 4bf1bd6..67ab007 100644
--- a/frontend/src/components/player.vue
+++ b/frontend/src/components/player.vue
@@ -26,6 +26,7 @@
                     <h3>{{ playingSong.title ?? 'No song selected' }}</h3>
                     <p>{{ playingSong.artist }}</p>
                 </div>
+                <div class="image"></div>
             </div>
             <div class="playback-pos-info">
                 <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
@@ -33,14 +34,14 @@
             </div>
             <sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"></sliderView>
         </div>
-        <FancyView v-if="isShowingFancyView" :song="playingSong"></FancyView>
+        <FancyView v-if="isShowingFancyView" :song="playingSong" @control="instruction => { control( instruction ) }" :playing="isPlaying"></FancyView>
     </div>
 </template>
 
 <style>
     .song-info {
         background-color: #8e9ced;
-        height: 80%;
+        height: 13vh;
         width: 50%;
         margin-left: auto;
         margin-right: auto;
@@ -48,11 +49,11 @@
     }
 
     .image {
-        width: 6vh;
-        height: 6vh;
+        width: 7vh;
+        height: 7vh;
         object-fit: cover;
         object-position: center;
-        font-size: 6vh;
+        font-size: 7vh;
         margin-left: 1vh;
         margin-top: 1vh;
     }
@@ -107,8 +108,8 @@
     .playback-pos-info {
         display: flex;
         flex-direction: row;
-        width: 99%;
-        margin-left: 0.5%;
+        width: 98%;
+        margin-left: 1%;
         position: absolute;
         bottom: 17px;
     }
@@ -239,6 +240,9 @@ export default {
                 } else if ( action === 'repeatOff' ) {
                     this.$emit( 'update', { 'type': 'repeatOff' } );
                     this.repeatMode = 'off';
+                } else if ( action === 'exitFancyView' ) {
+                    this.isShowingFancyView = false;
+                    this.$emit( 'update', { 'type': 'fancyView', 'status': false } );
                 }
             } else if ( action === 'songsLoaded' ) {
                 this.hasLoadedSongs = true;
@@ -256,6 +260,9 @@ export default {
             } else if ( action === 'repeatOff' ) {
                 this.$emit( 'update', { 'type': 'repeatOff' } );
                 this.repeatMode = 'off';
+            } else if ( action === 'exitFancyView' ) {
+                this.isShowingFancyView = false;
+                this.$emit( 'update', { 'type': 'fancyView', 'status': false } );
             }
         },
         setPos( pos ) {
@@ -263,6 +270,7 @@ export default {
             musicPlayer.currentTime = pos;
         },
         showFancyView() {
+            this.$emit( 'update', { 'type': 'fancyView', 'status': true } );
             this.isShowingFancyView = true;
         },
     }
diff --git a/frontend/src/imageFetcher.js b/frontend/src/imageFetcher.js
new file mode 100644
index 0000000..42873f0
--- /dev/null
+++ b/frontend/src/imageFetcher.js
@@ -0,0 +1,12 @@
+/*
+*				MusicPlayerV2 - imageFetcher.js
+*
+*	Created by Janis Hutz 10/23/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+module.exports.fetch = () => {
+    // TODO: Implement
+}
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 220eef2..a943e83 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -47,7 +47,7 @@
     }
 
     .logo {
-        height: 90%;
+        height: 13vh;
         margin-left: 3%;
         margin-right: auto;
     }