feat: 修复搜索播放 bug 优化搜索 mv播放器

This commit is contained in:
alger
2024-12-05 21:29:13 +08:00
parent c5e7c87658
commit 5d4c4922fd
6 changed files with 43 additions and 25 deletions

View File

@@ -44,9 +44,9 @@
<div class="controls-main">
<div class="left-controls">
<n-tooltip placement="top">
<n-tooltip v-if="!props.noList" placement="top">
<template #trigger>
<n-button quaternary circle :disabled="isPrevDisabled" @click="handlePrev">
<n-button quaternary circle @click="handlePrev">
<template #icon>
<n-icon size="24">
<n-spin v-if="prevLoading" size="small" />
@@ -72,7 +72,7 @@
{{ isPlaying ? '暂停' : '播放' }}
</n-tooltip>
<n-tooltip placement="top">
<n-tooltip v-if="!props.noList" placement="top">
<template #trigger>
<n-button quaternary circle @click="handleNext">
<template #icon>
@@ -106,7 +106,7 @@
<n-slider v-model:value="volume" :min="0" :max="100" :tooltip="false" class="volume-slider" />
</div>
<n-tooltip placement="top">
<n-tooltip v-if="!props.noList" placement="top">
<template #trigger>
<n-button quaternary circle class="play-mode-btn" @click="togglePlayMode">
<template #icon>
@@ -171,7 +171,7 @@
</template>
<script setup lang="ts">
import { NButton, NIcon, NSlider, NTooltip, useMessage } from 'naive-ui';
import { NButton, NIcon, NSlider, NTooltip } from 'naive-ui';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
@@ -184,10 +184,18 @@ const PLAY_MODE = {
Auto: 'auto' as PlayMode,
} as const;
const props = defineProps<{
show: boolean;
currentMv?: IMvItem;
}>();
const props = withDefaults(
defineProps<{
show: boolean;
currentMv?: IMvItem;
noList?: boolean;
}>(),
{
show: false,
currentMv: undefined,
noList: false,
},
);
const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
@@ -345,7 +353,9 @@ const handleEnded = () => {
}
} else {
// 自动播放模式,触发下一个
emit('next');
emit('next', (value: boolean) => {
nextLoading.value = value;
});
}
};
@@ -369,9 +379,9 @@ const checkFullscreenAPI = () => {
return {
requestFullscreen:
videoContainerRef.value?.requestFullscreen ||
videoContainerRef.value?.webkitRequestFullscreen ||
videoContainerRef.value?.mozRequestFullScreen ||
videoContainerRef.value?.msRequestFullscreen,
(videoContainerRef.value as any)?.webkitRequestFullscreen ||
(videoContainerRef.value as any)?.mozRequestFullScreen ||
(videoContainerRef.value as any)?.msRequestFullscreen,
exitFullscreen: doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen || doc.msExitFullscreen,
fullscreenElement:
doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement,
@@ -441,9 +451,6 @@ onUnmounted(() => {
document.removeEventListener('keydown', handleKeyPress);
});
// 在 setup 中初始化 message
const message = useMessage();
// 添加提示状态
const showModeHint = ref(false);

View File

@@ -18,14 +18,15 @@
:song-list="songList"
:list-info="listInfo"
/>
<PlayVideo v-if="item.type === 'mv'" v-model:show="showPop" :title="item.name" :url="url" />
<mv-player v-if="item.type === 'mv'" v-model:show="showPop" :current-mv="getCurrentMv()" no-list />
</div>
</template>
<script setup lang="ts">
import { getAlbum, getListDetail } from '@/api/list';
import { getMvUrl } from '@/api/mv';
import MvPlayer from '@/components/MvPlayer.vue';
import { IMvItem } from '@/type/mv';
import { getImgUrl } from '@/utils';
const props = defineProps<{
@@ -45,6 +46,13 @@ const songList = ref<any[]>([]);
const showPop = ref(false);
const listInfo = ref<any>(null);
const getCurrentMv = () => {
return {
id: props.item.id,
name: props.item.name,
} as unknown as IMvItem;
};
const handleClick = async () => {
listInfo.value = null;
if (props.item.type === '专辑') {

View File

@@ -12,8 +12,8 @@
<div>
<div class="music-content-name">{{ playMusic.name }}</div>
<div class="music-content-singer">
<span v-for="(item, index) in playMusic.song.artists" :key="index">
{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
<span v-for="(item, index) in playMusic.ar || playMusic.song.artists" :key="index">
{{ item.name }}{{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
</span>
</div>
</div>

View File

@@ -26,9 +26,10 @@
</div>
<div class="music-content-name">
<n-ellipsis class="text-ellipsis" line-clamp="1">
<span v-for="(item, index) in playMusic.song.artists" :key="index">
{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
</span>
<span v-for="(artists, artistsindex) in playMusic.ar || playMusic.song.artists" :key="artistsindex"
>{{ artists.name
}}{{ artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}</span
>
</n-ellipsis>
</div>
</div>

View File

@@ -35,7 +35,6 @@ const state: State = {
searchValue: '',
searchType: 1,
};
const windowData = window as any;
const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -64,7 +63,9 @@ const mutations = {
},
async setSetData(state: State, setData: any) {
state.setData = setData;
window.electron && window.electron.ipcRenderer.setStoreValue('set', JSON.parse(JSON.stringify(setData)));
if ((window as any).electron) {
(window as any).electron.ipcRenderer.setStoreValue('set', JSON.parse(JSON.stringify(setData)));
}
},
};

View File

@@ -81,6 +81,7 @@ export interface Song {
count?: number;
playLoading?: boolean;
picUrl?: string;
ar: Artist[];
}
interface Privilege {