From 5199dac5b14af31e73eab80c60a1151034dc0e0f Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Mon, 30 Oct 2023 08:56:09 +0100
Subject: [PATCH] progress on internal fancy view

---
 frontend/src/components/fancyView.vue | 87 ++++++++++++++++++++++++---
 frontend/src/components/player.vue    |  2 +-
 2 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/fancyView.vue b/frontend/src/components/fancyView.vue
index 608de2e..112f8a3 100644
--- a/frontend/src/components/fancyView.vue
+++ b/frontend/src/components/fancyView.vue
@@ -3,13 +3,34 @@
         <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 style="margin-right: auto;">{{ playbackPosBeautified }}</div>
-                <div>{{ durationBeautified }}</div>
+        <div class="controls-wrapper">
+            <div class="song-info">
+                <h3>{{ song.title }}</h3>
+                <p>{{ song.artist }}</p>
+            </div>
+            <div class="controls">
+                <span class="material-symbols-outlined control-icon" @click="control( 'previous' )">skip_previous</span>
+                <span class="material-symbols-outlined control-icon" @click="control( 'replay10' )">replay_10</span>
+                <span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying" @click="control( 'play' )">play_arrow</span>
+                <span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying" @click="control( 'pause' )">pause</span>
+                <span class="material-symbols-outlined control-icon" @click="control( 'forward10' )">forward_10</span>
+                <span class="material-symbols-outlined control-icon" @click="control( 'next' )">skip_next</span>
+            </div>
+            <div class="slider-wrapper">
+                <sliderView :active="true" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"
+                    name="fancy" class="slider"></sliderView>
+                <div class="playback-pos-info">
+                    <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
+                    <div>{{ durationBeautified }}</div>
+                </div>
+            </div>
+            <div class="shuffle-repeat-wrapper">
+                <span class="material-symbols-outlined control-icon" v-if="!shuffle" @click="control( 'shuffleOn' )">shuffle</span>
+                <span class="material-symbols-outlined control-icon" v-else @click="control( 'shuffleOff' )">shuffle_on</span>
+                <span class="material-symbols-outlined control-icon" v-if="repeatMode === 'off'" @click="control( 'repeatOne' )">repeat</span>
+                <span class="material-symbols-outlined control-icon" v-else-if="repeatMode === 'one'" @click="control( 'repeatAll' )">repeat_one_on</span>
+                <span class="material-symbols-outlined control-icon" v-else-if="repeatMode === 'all'" @click="control( 'repeatOff' )">repeat_on</span>
             </div>
-            <sliderView :active="true" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"
-                name="fancy"></sliderView>
         </div>
     </div>
 </template>
@@ -30,6 +51,7 @@
         justify-content: center;
         align-items: center;
         position: fixed;
+        flex-direction: column;
         z-index: 20;
         height: 100vh;
         width: 100vw;
@@ -38,10 +60,57 @@
         background-color: var( --background-color );
     }
 
+    .controls-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .slider-wrapper {
+        position: relative;
+        margin-top: 40px;
+        width: 40vh;
+        margin-bottom: 20px
+    }
+
     .fancy-view-song-art {
         height: 40vh;
         width: auto;
-        margin-bottom: 5%;
+        margin-bottom: 20px;
+    }
+
+    .controls {
+        width: 50vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .control-icon {
+        cursor: pointer;
+        font-size: 3vh;
+        user-select: none;
+    }
+
+    .play-pause {
+        font-size: 5vh;
+    }
+
+    .playback-pos-info {
+        display: flex;
+        flex-direction: row;
+        width: 98%;
+        margin-left: 1%;
+        position: absolute;
+        bottom: 17px;
+        left: 0;
+    }
+
+    .shuffle-repeat-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 </style>
 
@@ -49,8 +118,8 @@
     import SliderView from './sliderView.vue';
     export default {
         methods: {
-            control ( instruction, value ) {
-
+            control ( instruction ) {
+                this.$emit( 'control', instruction );
             },
             setPos ( pos ) {
                 this.$emit( 'posUpdate', pos );
diff --git a/frontend/src/components/player.vue b/frontend/src/components/player.vue
index eb7515b..8c6de14 100644
--- a/frontend/src/components/player.vue
+++ b/frontend/src/components/player.vue
@@ -42,7 +42,7 @@
     </div>
 </template>
 
-<style>
+<style scoped>
     .song-info {
         background-color: #8e9ced;
         height: 13vh;