From cea54c403de0a468f028b336c9d1f0c391247c77 Mon Sep 17 00:00:00 2001
From: CosineSky <11737516+cosinesky@user.noreply.gitee.com>
Date: Sat, 21 Dec 2024 22:31:37 +0800
Subject: [PATCH] =?UTF-8?q?-=20=E6=AD=8C=E5=8D=95=E4=B8=AD=E6=AD=8C?=
=?UTF-8?q?=E6=9B=B2=E7=9A=84=E6=B7=BB=E5=8A=A0=E5=92=8C=E5=88=A0=E9=99=A4?=
=?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/playlist.js | 4 +-
src/components/MusicAlbumView.vue | 477 ++++++++++++++++--------------
src/views/HomePage.vue | 4 +-
3 files changed, 258 insertions(+), 227 deletions(-)
diff --git a/src/api/playlist.js b/src/api/playlist.js
index bf7574d..9a80b08 100644
--- a/src/api/playlist.js
+++ b/src/api/playlist.js
@@ -57,8 +57,8 @@ export const modifyPlaylist = (playlistModifyInfo) => {
+ song_id: number
*/
export const addSongToPlaylist = (songInfo) => {
- return axios.post(`${PLAYLIST_MODULE}/addSong`, songInfo,
- { headers: { 'Content-Type': 'application/json' } })
+ return axios.post(`${PLAYLIST_MODULE}/addSong`, null,
+ { params: songInfo })
.then(res => {
return res;
});
diff --git a/src/components/MusicAlbumView.vue b/src/components/MusicAlbumView.vue
index f8118ae..0f19caf 100644
--- a/src/components/MusicAlbumView.vue
+++ b/src/components/MusicAlbumView.vue
@@ -6,24 +6,31 @@ import checkMark from "../icon/checkMark.vue";
import {ElMessage, ElPopover} from "element-plus";
import {backgroundColor, updateBackground} from "../utils/getBackgroundColor";
import pauseButton from "../icon/pauseButton.vue";
-import {modifyPlaylist, removePlaylist, removeSongFromPlaylist} from "../api/playlist";
+import {addSongToPlaylist, modifyPlaylist, removePlaylist, removeSongFromPlaylist} from "../api/playlist";
+
+
+/*
+ USER
+ */
+const userToken = ref(JSON.parse(sessionStorage.getItem('user-token')));
+const currentUserId = ref(userToken.value.id);
const emit = defineEmits();
const props = defineProps({
- albumInfo: { // 绫诲瀷 锛歩d, userid, title ,description ,picPath,createTime,updateTime,songNum
- type: Object,
- required: true,
- },
- playList:{
- type: Array,
- required: true,
- },
- musicList: {// 绫诲瀷 锛歩d ,title, artist, album,description, picPath,uploadTime
- type: Object,
- required: true,
- },
- playFromLeftBar: null,
- currentSongId: Number,
+ albumInfo: { // 绫诲瀷 锛歩d, userid, title ,description ,picPath,createTime,updateTime,songNum
+ type: Object,
+ required: true,
+ },
+ playList: {
+ type: Array,
+ required: true,
+ },
+ musicList: {// 绫诲瀷 锛歩d ,title, artist, album,description, picPath,uploadTime
+ type: Object,
+ required: true,
+ },
+ playFromLeftBar: null,
+ currentSongId: Number,
});
const edit_title = ref("");
@@ -52,48 +59,48 @@ const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundCol
// 鏀剧缉鏃剁殑缁勪欢澶勭悊
const handleResize = () => {
- const albums = document.querySelectorAll(".music-album-info");
- const albumText = document.querySelectorAll(".album-text");
- const albumContent = document.querySelector(".album-content");
- // if (window.innerWidth > 0)
- // 涓撹緫闅愯棌
- console.log(albumContent.clientWidth);
- if (albumContent.clientWidth < 605) {
- albums.forEach(album => {
- album.style.visibility = "hidden";
- });
- albumText.forEach(album => {
- album.style.visibility = "hidden";
- });
-
- } else {
- albums.forEach(album => {
- album.style.visibility = "visible";
- });
- albumText.forEach(album => {
- album.style.visibility = "visible";
- });
- }
- const albumImage = document.querySelector(".album-image");
- const headerAlbumName = document.querySelector(".header-album-name");
- // 姝屽崟鍥剧墖鍜屾枃瀛楃缉鏀�
- if (albumContent.clientWidth < 420) {
- albumImage.style.width = "120px";
- albumImage.style.height = "120px";
- headerAlbumName.style.fontSize = "40px";
- headerAlbumName.style.marginBottom = "20px";
- } else {
- albumImage.style.width = "160px";
- albumImage.style.height = "160px";
- headerAlbumName.style.fontSize = "80px";
- headerAlbumName.style.marginBottom = "35px";
- }
-
- //馃檹 鏉冨疁涔嬭
- const fixedTipArea = document.querySelector(".fixed-tips");
- const fixedPlayArea = document.querySelector(".fixed-play-area");
- fixedPlayArea.style.width = (albumContent.clientWidth - 20) + "px";
- fixedTipArea.style.width = (albumContent.clientWidth - 16) + "px";
+ const albums = document.querySelectorAll(".music-album-info");
+ const albumText = document.querySelectorAll(".album-text");
+ const albumContent = document.querySelector(".album-content");
+ // if (window.innerWidth > 0)
+ // 涓撹緫闅愯棌
+ console.log(albumContent.clientWidth);
+ if (albumContent.clientWidth < 605) {
+ albums.forEach(album => {
+ album.style.visibility = "hidden";
+ });
+ albumText.forEach(album => {
+ album.style.visibility = "hidden";
+ });
+
+ } else {
+ albums.forEach(album => {
+ album.style.visibility = "visible";
+ });
+ albumText.forEach(album => {
+ album.style.visibility = "visible";
+ });
+ }
+ const albumImage = document.querySelector(".album-image");
+ const headerAlbumName = document.querySelector(".header-album-name");
+ // 姝屽崟鍥剧墖鍜屾枃瀛楃缉鏀�
+ if (albumContent.clientWidth < 420) {
+ albumImage.style.width = "120px";
+ albumImage.style.height = "120px";
+ headerAlbumName.style.fontSize = "40px";
+ headerAlbumName.style.marginBottom = "20px";
+ } else {
+ albumImage.style.width = "160px";
+ albumImage.style.height = "160px";
+ headerAlbumName.style.fontSize = "80px";
+ headerAlbumName.style.marginBottom = "35px";
+ }
+
+ //馃檹 鏉冨疁涔嬭
+ const fixedTipArea = document.querySelector(".fixed-tips");
+ const fixedPlayArea = document.querySelector(".fixed-play-area");
+ fixedPlayArea.style.width = (albumContent.clientWidth - 20) + "px";
+ fixedTipArea.style.width = (albumContent.clientWidth - 16) + "px";
}
const debounce = (fn, delay) => {
@@ -201,18 +208,21 @@ const playFromId = (musicId) => {
musicPauseIndex = null;
}
-const addToFavorite = (musicId,albumId) => {
- //TODO:璋冪敤鎺ュ彛娣诲姞姝屾洸鍒版寚瀹氭瓕鍗曪紝骞惰缃甧lmessage鎻愮ず淇℃伅
-
- ElMessage({
- message: "娣诲姞鑷�: " + props.albumInfo.title,
- grouping: true,
- type: 'info',
- offset: 16,
- customClass: "reco-message",
- duration: 4000,
- }
- )
+const addToFavorite = (musicId, albumId) => {
+ addSongToPlaylist({
+ user_id: currentUserId.value,
+ playlist_id: albumId,
+ song_id: musicId,
+ }).then(() => {
+ ElMessage({
+ message: "娣诲姞鑷�: " + props.albumInfo.title,
+ grouping: true,
+ type: 'info',
+ offset: 16,
+ customClass: "reco-message",
+ duration: 4000,
+ })
+ })
}
const removeMusicFromAlbum = (albumId, songId) => {
removeSongFromPlaylist({
@@ -241,7 +251,7 @@ const confirmEdit = (albumId) => {
description: edit_description.value,
picPath: "",
}).then(() => {
-
+
})
}
@@ -385,10 +395,13 @@ const addRecommendMusic = (musicId) => {
</div>
</div>
<div class="edit-desc-input-name">
- <input v-model="edit_title" data-testid="playlist-edit-details-name-input" id="text-input-c673a65959365e7f" type="text" class="edit-desc-input-name-1" placeholder="娣诲姞鍚嶇О">
+ <input v-model="edit_title" data-testid="playlist-edit-details-name-input"
+ id="text-input-c673a65959365e7f" type="text" class="edit-desc-input-name-1"
+ placeholder="娣诲姞鍚嶇О">
</div>
<div class="edit-desc-input-desc">
- <textarea v-model="edit_description" data-testid="playlist-edit-details-description-input" class="edit-desc-input-desc-1" placeholder="娣诲姞绠€浠�"/>
+ <textarea v-model="edit_description" data-testid="playlist-edit-details-description-input"
+ class="edit-desc-input-desc-1" placeholder="娣诲姞绠€浠�"/>
</div>
<div class="edit-desc-button">
<button @click="confirmEdit(albumInfo.id)" data-testid="playlist-edit-details-save-button"
@@ -421,104 +434,120 @@ const addRecommendMusic = (musicId) => {
:style="{backgroundColor: musicClickedIndex===music.id? '#404040':
musicHoveredIndex === music.id ? 'rgba(54,54,54,0.7)' :'rgba(0,0,0,0)',
}"> <!--@click浜嬩欢鍐欏湪script涓殑鍑芥暟閲� 鏃犳硶鍙婃椂瑙﹀彂:style涓殑鏍峰紡!!!-->
-
- <div
- :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
- {{
- musicList.indexOf(music) + 1
- }}
- </div>
- <play-button @click="playFromId(music.id)" style="position: absolute;left: 14px;cursor: pointer"
- v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
- :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
-
- <pause-button @click="pauseMusic(music.id)"
- style="color:#1ed660 ;position: absolute;left: 17px;cursor: pointer"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
- <img width="17" height="17" alt=""
- style="position: absolute;left: 24px;"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
- src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
-
- <div class="music-detailed-info">
- <img class="music-image"
- :src="music.picPath"
- alt="姝屾洸鍥剧墖"/>
- <div class="music-name-author" style="padding-left: 5px;">
- <p @click="enterMusicDescription(music.id)" class="music-name"
- :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
- :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
- >{{ music.title }}</p>
-
- <p @click="enterAuthorDescription(music.artist)" class="music-author"
- :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.artist }}</p>
- </div>
- </div>
-
- <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.album }}
- </div>
- <div class="music-right-info">
- <el-popover
- :ref="getPopoverIndex"
- class="music-dropdown-options"
- popper-class="my-popover"
- :width="400"
- trigger="click"
- :hide-after=0
-
- >
- <template #reference>
- <check-mark class="check-mark"
- :style="{visibility: musicHoveredIndex === music.id ? 'visible' : 'hidden'}"/>
- </template>
-
- <ul @click="closePopover" style="overflow: scroll;max-height: 400px;">
- <div style="padding: 6px 0 6px 10px;font-weight: bold;color:darkgrey;font-size:16px">閫夋嫨姝屽崟鏀惰棌</div>
- <hr style=" border: 0;padding-top: 1px;background: linear-gradient(to right, transparent, #98989b, transparent);" >
-
- <li class="album-to-add" @click="addToFavorite(music.id,album.id)" v-for="album in playList">
- <div style="height:40px;display: flex;align-items: center;font-size: 20px;font-weight:400">
- <img :src="album.picPath" style="height: 32px;width:32px;border-radius: 4px" alt=""/>
- <div style="margin-left: 30px">{{album.title}} </div>
- </div>
-
- </li>
- </ul>
- </el-popover>
-<!-- 杩欓噷鍘熸湰鎯冲啓姝屾洸鏃堕暱锛屼絾鏄病鏈� 鍙兘鐣欑┖-->
- <div style="margin-left: auto;margin-right: 15px; color: #b2b2b2"
- :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">{{}}
- </div>
- <el-popover
- :ref="getPopoverIndex"
- class="music-dropdown-options"
- popper-class="my-popover"
- :width="400"
- trigger="click"
- :hide-after=0
- >
- <template #reference>
- <dots class="music-more-info"/>
- </template>
- <ul @click="closePopover">
- <li @click="removeMusicFromAlbum(music.id)">鍒犻櫎姝屾洸</li>
- </ul>
- </el-popover>
-
- </div>
-
- </div>
-
- </div>
-
- <!--TODO:鎺ㄨ崘姝屾洸鐨勭粏鑺傚鐞�-->
- <div class="other-info">
- <div style="margin-left:20px;margin-bottom:20px;">
- <div style="display: flex;text-align: left;justify-content: center;flex-direction: column">
- <span style="color:white;font-size: 30px;font-weight: bolder">鎺ㄨ崘</span>
- <span style="color:grey;font-size: 20px">鏍规嵁姝ゆ瓕鍗曞寘鍚殑鍐呭鎺ㄨ崘
+
+ <div
+ :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
+ {{
+ musicList.indexOf(music) + 1
+ }}
+ </div>
+ <play-button @click="playFromId(music.id)" style="position: absolute;left: 14px;cursor: pointer"
+ v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
+ :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
+
+ <pause-button @click="pauseMusic(music.id)"
+ style="color:#1ed660 ;position: absolute;left: 17px;cursor: pointer"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
+ <img width="17" height="17" alt=""
+ style="position: absolute;left: 24px;"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
+ src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
+
+ <div class="music-detailed-info">
+ <img class="music-image"
+ :src="music.picPath"
+ alt="姝屾洸鍥剧墖"/>
+ <div class="music-name-author" style="padding-left: 5px;">
+ <p @click="enterMusicDescription(music.id)" class="music-name"
+ :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
+ :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
+ >{{ music.title }}</p>
+
+ <p @click="enterAuthorDescription(music.artist)" class="music-author"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.artist }}</p>
+ </div>
+ </div>
+
+ <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.album }}
+ </div>
+ <div class="music-right-info">
+ <el-popover
+ :ref="getPopoverIndex"
+ class="music-dropdown-options"
+ popper-class="my-popover"
+ :width="400"
+ trigger="click"
+ :hide-after=0
+
+ >
+ <template #reference>
+ <check-mark class="check-mark"
+ :style="{visibility: musicHoveredIndex === music.id ? 'visible' : 'hidden'}"/>
+ </template>
+
+ <ul @click="closePopover" style="overflow: scroll;max-height: 400px;">
+ <div style="padding: 6px 0 6px 10px;font-weight: bold;color:darkgrey;font-size:16px">
+ 閫夋嫨姝屽崟鏀惰棌
+ </div>
+ <hr style=" border: 0;padding-top: 1px;background: linear-gradient(to right, transparent, #98989b, transparent);">
+
+ <li class="album-to-add" @click="addToFavorite(music.id,album.id)"
+ v-for="album in playList">
+ <div style="
+ height:40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 20px;
+ font-weight:400"
+ >
+ <div style="display: flex; flex-direction: row">
+ <img :src="album.picPath" style="height: 40px; width:40px; border-radius: 4px" alt=""/>
+ <div style="
+ margin-left: 10px;
+ font-size: 18px;
+ ">{{ album.title }}</div>
+ </div>
+ <div style="font-size: 14px; color: #a4a4a4">{{ album.songNum }}棣�</div>
+ </div>
+
+ </li>
+ </ul>
+ </el-popover>
+ <!-- 杩欓噷鍘熸湰鎯冲啓姝屾洸鏃堕暱锛屼絾鏄病鏈� 鍙兘鐣欑┖-->
+ <div style="margin-left: auto;margin-right: 15px; color: #b2b2b2"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">{{}}
+ </div>
+ <el-popover
+ :ref="getPopoverIndex"
+ class="music-dropdown-options"
+ popper-class="my-popover"
+ :width="400"
+ trigger="click"
+ :hide-after=0
+ >
+ <template #reference>
+ <dots class="music-more-info"/>
+ </template>
+ <ul @click="closePopover">
+ <li @click="removeMusicFromAlbum(albumInfo.id, music.id)">鍒犻櫎姝屾洸</li>
+ </ul>
+ </el-popover>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ <!--TODO:鎺ㄨ崘姝屾洸鐨勭粏鑺傚鐞�-->
+ <div class="other-info">
+ <div style="margin-left:20px;margin-bottom:20px;">
+ <div style="display: flex;text-align: left;justify-content: center;flex-direction: column">
+ <span style="color:white;font-size: 30px;font-weight: bolder">鎺ㄨ崘</span>
+ <span style="color:grey;font-size: 20px">鏍规嵁姝ゆ瓕鍗曞寘鍚殑鍐呭鎺ㄨ崘
</span>
</div>
</div>
@@ -535,57 +564,58 @@ const addRecommendMusic = (musicId) => {
:style="{backgroundColor: musicClickedIndex===music.id? '#404040':
musicHoveredIndex === music.id ? 'rgba(54,54,54,0.7)' :'rgba(0,0,0,0)',
}">
-
-
- <div
- :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
- {{
- recMusicList.indexOf(music) + 1
- }}
- </div>
- <play-button @click="playFromId(music.id)" style="position: absolute;left: 33px;cursor: pointer"
- v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
- :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
- <pause-button @click="pauseMusic(music.id)"
- style="color:#1ed660 ;position: absolute;left: 37px;cursor: pointer"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
- <img width="17" height="17" alt=""
- style="position: absolute;left: 42px;"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
- src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
-
- <div class="music-detailed-info">
- <img class="music-image"
- :src="music.picPath"
- alt="姝屾洸鍥剧墖"/>
- <div class="music-name-author" style="padding-left: 5px;">
- <p @click="enterMusicDescription(music.id)" class="music-name"
- :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
- :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
- >{{ music.title }}</p>
-
- <p @click="enterAuthorDescription(music.artist)" class="music-author"
- :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.artist }}</p>
- </div>
- </div>
-
- <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.album }}
- </div>
- <div class="music-right-info">
- <button class="reco-add-button" @click="addRecommendMusic(music.id)">娣诲姞</button>
-
- </div>
-
- </div>
-
- </div>
- </div>
-
- </div>
-
- </div>
+
+
+ <div
+ :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
+ {{
+ recMusicList.indexOf(music) + 1
+ }}
+ </div>
+ <play-button @click="playFromId(music.id)" style="position: absolute;left: 33px;cursor: pointer"
+ v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
+ :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
+ <pause-button @click="pauseMusic(music.id)"
+ style="color:#1ed660 ;position: absolute;left: 37px;cursor: pointer"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
+ <img width="17" height="17" alt=""
+ style="position: absolute;left: 42px;"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
+ src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
+
+ <div class="music-detailed-info">
+ <img class="music-image"
+ :src="music.picPath"
+ alt="姝屾洸鍥剧墖"/>
+ <div class="music-name-author" style="padding-left: 5px;">
+ <p @click="enterMusicDescription(music.id)" class="music-name"
+ :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
+ :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
+ >{{ music.title }}</p>
+
+ <p @click="enterAuthorDescription(music.artist)" class="music-author"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.artist }}</p>
+ </div>
+ </div>
+
+ <div class="music-album-info"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.album }}
+ </div>
+ <div class="music-right-info">
+ <button class="reco-add-button" @click="addRecommendMusic(music.id)">娣诲姞</button>
+
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+
+ </div>
</template>
<style scoped>
@@ -857,8 +887,9 @@ p {
.check-mark:focus {
outline: none;
}
-.album-to-add{
- padding: 8px;
+
+.album-to-add {
+ padding: 8px;
}
.music-more-info {
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 6da2198..3ca349d 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,7 +1,7 @@
/* eslint-disable */
<script setup>
// Vue Basics
-import {computed, onMounted, ref} from "vue"
+import {computed, onMounted, ref, watch} from "vue"
// Assets
import defaultBg from '../assets/pictures/Eason.png'
@@ -599,7 +599,7 @@ let playFromLeftBarAlbum = ref(null);
<!--height: 730px -->
<div v-if="midComponents == 1" class="playlist-container"
style="overflow: scroll; border-radius: 12px">
- <MusicAlbumView :album-info="displayingPlaylist" :music-list="displayingSongs"
+ <MusicAlbumView :album-info="displayingPlaylist" :music-list="displayingSongs" :play-list="playlists"
@switchSongs="switchToPlaylist" :playFromLeftBar="playFromLeftBarAlbum"/>
</div>
<el-container v-if="midComponents == 2" class="playlist-container"
--
GitLab