新增 我的列表-换源播放 功能

src/renderer/views/List/MusicList/components/MusicToggleModal.vue

@@ -0,0 +1,356 @@
+<template>
+  <material-modal :show="show" teleport="#view" bg-close @close="handleClose">
+    <main :class="$style.main">
+      <base-tab v-model="source" :class="$style.tab" :list="tabs" />
+      <div class="scroll" :class="$style.list">
+        <template v-if="list.length">
+          <div v-for="(item, index) in list" :key="item.id" :class="$style.listItem">
+            <div :class="$style.num">{{ index + 1 }}</div>
+            <div :class="$style.textContent">
+              <h3 :class="$style.text" :aria-label="`${item.name} - ${item.singer}`">{{ item.name }}</h3>
+              <h3 v-if="item.meta.albumName" :class="[$style.text, $style.albumName]" :aria-label="item.meta.albumName">
+                {{ item.singer }}
+                <span v-if="item.meta.albumName"> - {{ item.meta.albumName }}</span>
+              </h3>
+            </div>
+            <div :class="$style.label">{{ item.interval }}</div>
+            <div :class="$style.btns">
+              <button type="button" :class="$style.btn" @click="openDetail(item)">
+                <svg-icon name="share" />
+              </button>
+              <button type="button" :class="$style.btn" @click="handleToggle(item)">
+                <svg v-once version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 287.386 287.386" space="preserve">
+                  <use xlink:href="#icon-testPlay" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </template>
+        <div v-else :class="$style.noItem">
+          <p v-text="noItemLabel" />
+        </div>
+      </div>
+      <div :class="$style.footer">
+        <div :class="$style.info">
+          <h2>
+            <div :class="$style.nameLabel">
+              <span :class="$style.name">{{ musicInfo.name }}</span>
+              <span :class="$style.label">{{ musicInfo.source }} {{ musicInfo.interval }}</span>
+            </div>
+            <div :class="$style.singer">
+              {{ musicInfo.singer }}
+              <span v-if="musicInfo.meta.albumName"> - {{ musicInfo.meta.albumName }}</span>
+            </div>
+          </h2>
+          <template v-if="toggleMusicInfo">
+            <span style="flex: none;">→</span>
+            <h2>
+              <div :class="$style.nameLabel">
+                <span :class="$style.name">{{ toggleMusicInfo.name }}</span>
+                <span :class="$style.label">{{ toggleMusicInfo.source }} {{ musicInfo.interval }}</span>
+              </div>
+              <div :class="$style.singer">
+                {{ toggleMusicInfo.singer }}
+                <span v-if="toggleMusicInfo.meta.albumName"> - {{ toggleMusicInfo.meta.albumName }}</span>
+              </div>
+            </h2>
+          </template>
+        </div>
+        <base-btn :disabled="!toggleMusicInfo" :class="$style.btn" @click="handleClean">{{ $t('music_toggle_clean') }}</base-btn>
+      </div>
+    </main>
+  </material-modal>
+</template>
+
+<script>
+import { openUrl } from '@common/utils/electron'
+import { getSourceI18nPrefix } from '@renderer/store'
+import { toNewMusicInfo, toOldMusicInfo } from '@renderer/utils'
+import musicSdk from '@renderer/utils/musicSdk'
+import { markRaw } from 'vue'
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    musicInfo: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  emits: ['update:show', 'toggle'],
+  data() {
+    return {
+      tabs: [],
+      lists: {},
+      source: '',
+      isError: false,
+      loading: false,
+      searchKey: 0,
+      toggleMusicInfo: null,
+    }
+  },
+  computed: {
+    list() {
+      return this.lists[this.source] ?? []
+    },
+    noItemLabel() {
+      return this.loading ? this.$t('list__loading') : this.isError ? this.$t('list__load_failed') : this.$t('no_item')
+    },
+  },
+  watch: {
+    show(n) {
+      if (n) {
+        this.isError = false
+        const musicInfo = this.musicInfo
+        this.toggleMusicInfo = musicInfo.meta.toggleMusicInfo
+        this.tabs = []
+        this.lists = {}
+        this.loading = true
+        const searchKey = this.searchKey = Math.random()
+        void musicSdk.searchMusic({
+          name: musicInfo.name,
+          singer: musicInfo.singer,
+          source: '',
+          albumName: musicInfo.meta.albumName,
+          interval: musicInfo.interval ?? '',
+        }).then((lists) => {
+          if (this.searchKey != searchKey) return
+          const prefix = getSourceI18nPrefix()
+          this.tabs = lists.map(item => {
+            return {
+              id: item.source,
+              label: window.i18n.t(prefix + item.source),
+            }
+          })
+          if (lists.length) this.source = lists[0].source
+          for (const s of lists) this.lists[s.source] = s.list.map(s => markRaw(toNewMusicInfo(s)))
+        }).catch(() => {
+          if (this.searchKey != searchKey) return
+          this.isError = true
+        }).finally(() => {
+          if (this.searchKey != searchKey) return
+          this.loading = false
+        })
+      }
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:show', false)
+    },
+    handleClean() {
+      this.handleToggle(null)
+    },
+    openDetail(minfo) {
+      const url = musicSdk[minfo.source]?.getMusicDetailPageUrl(toOldMusicInfo(minfo))
+      if (!url) return
+      void openUrl(url)
+    },
+    handleToggle(info) {
+      this.toggleMusicInfo = info
+      this.$emit('toggle', info)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  padding: 10px 7px 0;
+  width: 560px;
+  // min-width: 280px;
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+}
+
+.list {
+  min-height: 200px;
+  min-width: 460px;
+  // background-color: @color-search-form-background;
+  font-size: 13px;
+  transition-property: height;
+  margin-top: 10px;
+  padding: 0 7px;
+  // position: relative;
+  .listItem {
+    position: relative;
+    padding: 10px 5px;
+    transition: background-color .2s ease;
+    line-height: 1.4;
+    height: 100%;
+    // overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--color-primary-background-hover);
+    }
+    // &:last-child {
+    //   border-bottom-left-radius: 4px;
+    //   border-bottom-right-radius: 4px;
+    // }
+  }
+
+  .num {
+    flex: none;
+    font-size: 12px;
+    width: 20px;
+    text-align: center;
+    color: var(--color-font-label);
+  }
+  .textContent {
+    flex: auto;
+    padding-left: 5px;
+    min-width: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    overflow: hidden;
+  }
+  .text {
+    max-width: 100%;
+    .mixin-ellipsis-1;
+  }
+  .albumName {
+    font-size: 12px;
+    opacity: 0.6;
+    // .mixin-ellipsis-1;
+  }
+  .label {
+    flex: none;
+    font-size: 12px;
+    opacity: 0.5;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    // transform: rotate(45deg);
+    // background-color:
+  }
+  .btns {
+    flex: none;
+    font-size: 12px;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+  }
+  .btn {
+    background-color: transparent;
+    border: none;
+    border-radius: @form-radius;
+    margin-right: 5px;
+    cursor: pointer;
+    padding: 4px 7px;
+    color: var(--color-button-font);
+    outline: none;
+    transition: background-color 0.2s ease;
+    line-height: 0;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      background-color: var(--color-primary-background-hover);
+    }
+    &:active {
+      background-color: var(--color-primary-font-active);
+    }
+  }
+
+  .noItem {
+    position: relative;
+    height: 200px;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+
+    p {
+      font-size: 16px;
+      color: var(--color-font-label);
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 7px;
+  .info {
+    min-width: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    padding-right: 10px;
+    gap: 10px;
+    font-size: 12px;
+    align-items: center;
+
+    h2 {
+      min-width: 0;
+      color: var(--color-font);
+      line-height: 1.5;
+      word-break: break-all;
+    }
+    .nameLabel {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+    .name {
+      .mixin-ellipsis;
+    }
+    .label {
+      flex: none;
+      font-size: 12px;
+      opacity: 0.8;
+      padding: 0 5px;
+      color: var(--color-primary);
+      // display: flex;
+      // align-items: center;
+      // transform: rotate(45deg);
+      // background-color:
+    }
+    .singer {
+      // font-size: 0.9em;
+      color: var(--color-font-label);
+      .mixin-ellipsis;
+    }
+  }
+
+  .btn {
+    flex: none;
+    // box-sizing: border-box;
+    // margin-left: 15px;
+    // margin-bottom: 15px;
+    // height: 36px;
+    // line-height: 36px;
+    // padding: 0 10px !important;
+    min-width: 70px;
+    // .mixin-ellipsis-1;
+
+    +.btn {
+      margin-left: 10px;
+    }
+  }
+}
+
+
+</style>

src/renderer/views/List/MusicList/index.vue

@@ -98,6 +98,7 @@
     <common-download-multiple-modal v-model:show="isShowDownloadMultiple" :list="selectedList" teleport="#view" @confirm="removeAllSelect" />
     <search-list :list="list" :visible="isShowSearchBar" @action="handleMusicSearchAction" />
     <music-sort-modal v-model:show="isShowMusicSortModal" :music-info="selectedSortMusicInfo" :selected-num="selectedNum" @confirm="sortMusic" />
+    <music-toggle-modal v-model:show="isShowMusicToggleModal" :music-info="selectedToggleMusicInfo" @toggle="toggleSource" />
     <base-menu v-model="isShowItemMenu" :menus="menus" :xy="menuLocation" item-name="name" @menu-click="handleMenuClick" />
   </div>
 </template>
@@ -107,6 +108,7 @@ import { clipboardWriteText } from '@common/utils/electron'
 import { assertApiSupport } from '@renderer/store/utils'
 import SearchList from './components/SearchList.vue'
 import MusicSortModal from './components/MusicSortModal.vue'
+import MusicToggleModal from './components/MusicToggleModal.vue'
 import useListInfo from './useListInfo'
 import useList from './useList'
 import useMenu from './useMenu'
@@ -117,12 +119,14 @@ import useSort from './useSort'
 import useMusicActions from './useMusicActions'
 import useSearch from './useSearch'
 import useListScroll from './useListScroll'
+import useMusicToggle from './useMusicToggle'
 import { appSetting } from '@renderer/store/setting'
 export default {
   name: 'MusicList',
   components: {
     SearchList,
     MusicSortModal,
+    MusicToggleModal,
   },
   props: {
     listId: {
@@ -197,6 +201,13 @@ export default {
       sortMusic,
     } = useSort({ props, list, selectedList, removeAllSelect })
 
+    const {
+      handleShowMusicToggleModal,
+      isShowMusicToggleModal,
+      selectedToggleMusicInfo,
+      toggleSource,
+    } = useMusicToggle(props, list)
+
     const {
       handleSearch,
       handleOpenMusicDetail,
@@ -218,6 +229,7 @@ export default {
       handleShowDownloadModal,
       handlePlayMusic,
       handlePlayMusicLater,
+      handleShowMusicToggleModal,
       handleSearch,
       handleShowMusicAddModal,
       handleShowMusicMoveModal,
@@ -338,6 +350,10 @@ export default {
       handleRestoreScroll,
 
       actionButtonsVisible,
+
+      isShowMusicToggleModal,
+      selectedToggleMusicInfo,
+      toggleSource,
     }
   },
 }

src/renderer/views/List/MusicList/useMenu.js

@@ -11,6 +11,7 @@ export default ({
   handlePlayMusic,
   handlePlayMusicLater,
   handleSearch,
+  handleShowMusicToggleModal,
   handleShowMusicAddModal,
   handleShowMusicMoveModal,
   handleShowSortModal,
@@ -26,6 +27,7 @@ export default ({
     addTo: true,
     moveTo: true,
     sort: true,
+    toggleSource: true,
     download: true,
     search: true,
     dislike: true,
@@ -68,6 +70,11 @@ export default ({
         action: 'sort',
         disabled: !itemMenuControl.sort,
       },
+      {
+        name: t('list__toggle_source'),
+        action: 'toggleSource',
+        disabled: !itemMenuControl.toggleSource,
+      },
       {
         name: t('list__copy_name'),
         action: 'copyName',
@@ -142,6 +149,9 @@ export default ({
       case 'sort':
         handleShowSortModal(index)
         break
+      case 'toggleSource':
+        handleShowMusicToggleModal(index)
+        break
       case 'download':
         handleShowDownloadModal(index)
         break

src/renderer/views/List/MusicList/useMusicToggle.js

@@ -0,0 +1,49 @@
+// import { updateListMusicsPosition } from '@renderer/store/list/action'
+import { ref, nextTick } from '@common/utils/vueTools'
+import { updateListMusics } from '@renderer/store/list/listManage'
+import { playList } from '@renderer/core/player'
+import { getListMusicsFromCache } from '@renderer/store/list/action'
+
+export default (props, list) => {
+  const isShowMusicToggleModal = ref(false)
+  const musicInfo = ref(null)
+
+  const handleShowMusicToggleModal = (index) => {
+    musicInfo.value = list.value[index]
+    nextTick(() => {
+      isShowMusicToggleModal.value = true
+    })
+  }
+
+  const toggleSource = (toggleMusicInfo) => {
+    const id = musicInfo.value.id
+    const index = list.value.findIndex(m => m.id == id)
+    if (index < 0) {
+      isShowMusicToggleModal.value = false
+      return
+    }
+    musicInfo.value.meta.toggleMusicInfo = toggleMusicInfo
+    updateListMusics([
+      {
+        id: props.listId,
+        musicInfo: {
+          ...musicInfo.value,
+          meta: {
+            ...musicInfo.value.meta,
+            toggleMusicInfo,
+          },
+        },
+      },
+    ])
+    const rawInfo = getListMusicsFromCache(props.listId)[index]
+    rawInfo.meta.toggleMusicInfo = toggleMusicInfo
+    playList(props.listId, index)
+  }
+
+  return {
+    isShowMusicToggleModal,
+    selectedToggleMusicInfo: musicInfo,
+    handleShowMusicToggleModal,
+    toggleSource,
+  }
+}