From 59824bffc5813f9d7908e6d9b4e29c19e874697c Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 22 Jul 2024 07:12:21 +0800
Subject: [PATCH] add close button for music player

---
 web/src/assets/css/suno.styl       |  3 ++-
 web/src/components/MusicPlayer.vue | 20 ++++++++++++++++++--
 web/src/views/Suno.vue             |  8 +++++---
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl
index 0976ac6..becbd66 100644
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -72,6 +72,7 @@
   .right-box {
     width 100%
     color rgb(250 247 245)
+    overflow hidden
 
     .list-box {
       padding 0 0 0 20px
@@ -230,7 +231,7 @@
       width 100%
       position: fixed;
       bottom: 0;
-      left: 0;
+      left: 50px;
       padding 20px 0
     }
   }
diff --git a/web/src/components/MusicPlayer.vue b/web/src/components/MusicPlayer.vue
index a3e3807..62802be 100644
--- a/web/src/components/MusicPlayer.vue
+++ b/web/src/components/MusicPlayer.vue
@@ -32,6 +32,8 @@
        <div class="progress" :style="{ width: `${progressPercent}%` }"></div>
      </div>
      <audio ref="audio" @timeupdate="updateProgress" @ended="nextSong"></audio>
+
+     <el-button class="close" type="info" :icon="Close" circle size="small" @click="emits('close')" />
    </div>
  </div>
 </template>
@@ -39,6 +41,7 @@
 <script setup>
 import {ref, onMounted, watch} from 'vue';
 import {showMessageError} from "@/utils/dialog";
+import {Close} from "@element-plus/icons-vue";
 
 const audio = ref(null);
 const isPlaying = ref(false);
@@ -58,6 +61,8 @@ const props = defineProps({
     default: () => []
   },
 });
+// eslint-disable-next-line no-undef
+const emits = defineEmits(['close']);
 
 watch(() => props.songs, (newVal) => {
   console.log(newVal)
@@ -108,8 +113,12 @@ const nextSong = () => {
 };
 
 const updateProgress = () => {
-  currentTime.value = audio.value.currentTime;
-  progressPercent.value = (currentTime.value / duration.value) * 100;
+  try {
+    currentTime.value = audio.value.currentTime;
+    progressPercent.value = (currentTime.value / duration.value) * 100;
+  } catch (e) {
+    console.error(e.message)
+  }
 };
 
 const formatTime = (time) => {
@@ -125,6 +134,7 @@ const setProgress = (event) => {
   audio.value.currentTime = (clickX / totalWidth) * audioDuration;
 };
 
+// eslint-disable-next-line no-undef
 defineExpose({
   play
 });
@@ -237,6 +247,12 @@ onMounted(() => {
       }
 
     }
+
+    .close {
+      position absolute
+      right 10px
+      top 15px
+    }
   }
 }
 
diff --git a/web/src/views/Suno.vue b/web/src/views/Suno.vue
index fbac46e..992e89c 100644
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -157,8 +157,8 @@
       </div>
       <el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else/>
 
-      <div class="music-player" v-if="playList.length > 0">
-        <music-player :songs="playList" ref="playerRef" />
+      <div class="music-player" v-if="showPlayer">
+        <music-player :songs="playList" ref="playerRef" @close="showPlayer = false" />
       </div>
     </div>
   </div>
@@ -173,7 +173,7 @@ import BlackInput from "@/components/ui/BlackInput.vue";
 import MusicPlayer from "@/components/MusicPlayer.vue";
 import {compact} from "lodash";
 
-const winHeight = ref(window.innerHeight - 60)
+const winHeight = ref(window.innerHeight - 50)
 const custom = ref(false)
 const instrumental = ref(false)
 const models = ref([
@@ -191,6 +191,7 @@ const loading = ref(false)
 const noData = ref(false)
 const playList = ref([])
 const playerRef = ref(null)
+const showPlayer = ref(false)
 const list = ref([
     {
       id: 1,
@@ -240,6 +241,7 @@ const create = () => {
 
 const play = (item) => {
   playList.value = [item]
+  showPlayer.value = true
   nextTick(()=> playerRef.value.play())
 }
 // 格式化音频时长