From 7f5a2d7eef0450798aa9234e554754b0baad58fb Mon Sep 17 00:00:00 2001
From: janis <jahu04@outlook.com>
Date: Mon, 23 Oct 2023 16:37:12 +0200
Subject: [PATCH] start adding fancyView

---
 frontend/src/components/fancyView.vue | 34 +++++++++++++++++++++++++++
 frontend/src/components/player.vue    |  9 ++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/fancyView.vue

diff --git a/frontend/src/components/fancyView.vue b/frontend/src/components/fancyView.vue
new file mode 100644
index 0000000..819f39a
--- /dev/null
+++ b/frontend/src/components/fancyView.vue
@@ -0,0 +1,34 @@
+<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">
+    </div>
+</template>
+
+<style scoped>
+    .fancy-view {
+        display: block;
+        position: fixed;
+        z-index: 20;
+        height: 100vh;
+        width: 100vw;
+        top: 0;
+        left: 0;
+        background-color: var( --background-color );
+    }
+</style>
+
+<script>
+    export default {
+        methods: {
+            control ( instruction ) {
+
+            }
+        },
+        props: {
+            song: {
+                type: Object,
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/player.vue b/frontend/src/components/player.vue
index 1ca4432..4bf1bd6 100644
--- a/frontend/src/components/player.vue
+++ b/frontend/src/components/player.vue
@@ -17,7 +17,7 @@
         <div class="song-info">
             <audio v-if="audioLoaded" :src="'http://localhost:8081/getSongFile?filename=' + playingSong.filename" id="music-player"></audio>
             <div class="song-info-wrapper">
-                <div v-if="audioLoaded">
+                <div v-if="audioLoaded" @click="showFancyView()" style="cursor: pointer;">
                     <span class="material-symbols-outlined image" v-if="!playingSong.hasCoverArt">music_note</span>
                     <img v-else :src="'http://localhost:8081/getSongCover?filename=' + playingSong.filename" class="image">
                 </div>
@@ -33,6 +33,7 @@
             </div>
             <sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"></sliderView>
         </div>
+        <FancyView v-if="isShowingFancyView" :song="playingSong"></FancyView>
     </div>
 </template>
 
@@ -114,6 +115,7 @@
 </style>
 
 <script>
+import FancyView from './fancyView.vue';
 import SliderView from './sliderView.vue';
 
 export default {
@@ -129,10 +131,12 @@ export default {
             playbackPosBeautified: '00:00',
             durationBeautified: '--:--',
             hasLoadedSongs: false,
+            isShowingFancyView: false,
         }
     },
     components: {
         SliderView,
+        FancyView,
     },
     methods: {
         play( song, autoplay, doCrossFade = false ) {
@@ -258,6 +262,9 @@ export default {
             let musicPlayer = document.getElementById( 'music-player' );
             musicPlayer.currentTime = pos;
         },
+        showFancyView() {
+            this.isShowingFancyView = true;
+        },
     }
 }
 </script>
\ No newline at end of file