some more progress on fancy view

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;

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>
+        <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="image">
+        <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: {

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

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;
+        width: 7vh;
-        height: 6vh;
+        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%;
+        width: 98%;
-        margin-left: 0.5%;
+        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;
         },
     }

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

frontend/src/views/HomeView.vue

@@ -47,7 +47,7 @@
     }
 
     .logo {
-        height: 90%;
+        height: 13vh;
         margin-left: 3%;
         margin-right: auto;
     }