feat: support for passing vnode

MoePlayer · Dec 12, 2018 · 92da310 · 92da310
1 parent fbd1ad6
commit 92da310
Show file tree

Hide file tree

Showing 7 changed files with 257 additions and 158 deletions.
diff --git a/docs/.vuepress/components/aplayer-vnode.vue b/docs/.vuepress/components/aplayer-vnode.vue
@@ -0,0 +1,70 @@
+<template>
+  <aplayer v-if="showPlayer" :audio="audio" :lrcType="3" />
+  <button v-else class="button" @click="showPlayer = true">
+    点击加载播放器
+  </button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showPlayer: false,
+      audio: [
+        {
+          name: h(
+            'span',
+            {
+              attrs: {
+                'data-name': '东西（Cover：林俊呈）', // data-name is required!
+              },
+            },
+            [
+              h(
+                'span',
+                {
+                  staticClass: 'aplayer-badge',
+                  style: {
+                    fontWeight: 'bold',
+                  },
+                  on: {
+                    click: (e) => {
+                      alert('HOT');
+                      e.stopImmediatePropagation();
+                    },
+                  },
+                },
+                '[HOT] '
+              ),
+              '东西（Cover：林俊呈）',
+            ]
+          ),
+          artist: (
+            // data-artist is required!
+            <span data-artist="纳豆" style="color: red">
+              纳豆
+            </span>
+          ),
+          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
+          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
+          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
+        },
+        {
+          name: '响喜乱舞（Cover：MARiA）',
+          artist: '泠鸢yousa',
+          url: 'https://cdn.moefe.org/music/mp3/kyoukiranbu.mp3',
+          cover: 'https://p1.music.126.net/AUGVPQ_rVrngDH9ocQrn3Q==/109951163613037822.jpg?param=300y300', // prettier-ignore
+          lrc: 'https://cdn.moefe.org/music/lrc/kyoukiranbu.lrc',
+        },
+        {
+          name: '啵唧',
+          artist: 'Hanser',
+          url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
+          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
+          lrc: 'https://cdn.moefe.org/music/lrc/kiss.lrc',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/docs/guide/options.md b/docs/guide/options.md
@@ -102,8 +102,8 @@ declare namespace APlayer {
   export type AudioType = 'auto' | 'hls' | 'normal';
   export interface Audio {
     id?: number; // 音频 id
-    name: string; // 音频名称
-    artist: string; // 音频艺术家
+    name: string | VNode; // 音频名称
+    artist: string | VNode; // 音频艺术家
     url: string; // 音频播放地址
     cover: string; // 音频封面
     lrc?: string; // lrc 歌词
@@ -114,6 +114,8 @@ declare namespace APlayer {
 }
 ```
 
+<aplayer-vnode />
+
 这里与 [APlayer](https://github.com/MoePlayer/APlayer) 不同的是新增了 `id` 和 `speed` 属性。  
 `id` 默认情况下由播放器自动生成，你也可以手动传一个 `id` 来覆盖它。  
 `speed` 属性可以指定该音频的播放速度。

diff --git a/docs/options/README.md b/docs/options/README.md
@@ -106,8 +106,8 @@ declare namespace APlayer {
   export type AudioType = 'auto' | 'hls' | 'normal';
   export interface Audio {
     id?: number; // 音频 id
-    name: string; // 音频名称
-    artist: string; // 音频艺术家
+    name: string | VNode; // 音频名称
+    artist: string | VNode; // 音频艺术家
     url: string; // 音频播放地址
     cover: string; // 音频封面
     lrc?: string; // lrc 歌词
@@ -118,6 +118,8 @@ declare namespace APlayer {
 }
 ```
 
+<aplayer-vnode />
+
 这里与 [APlayer](https://github.com/MoePlayer/APlayer) 不同的是新增了 `id` 和 `speed` 属性。  
 `id` 默认情况下由播放器自动生成，你也可以手动传一个 `id` 来覆盖它。  
 `speed` 属性可以指定该音频的播放速度。

diff --git a/packages/@moefe/vue-aplayer/components/APlayer.tsx b/packages/@moefe/vue-aplayer/components/APlayer.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-underscore-dangle */
+import { VNode } from 'vue';
 import * as Vue from 'vue-tsx-support';
 import Component from 'vue-class-component';
 import { Prop, Provide, Watch } from 'vue-property-decorator';
@@ -103,8 +104,8 @@ export default class APlayer extends Vue.Component<
     return this.currentOrder === 'list' ? this.orderList : this.randomList;
   }
 
-  // 顺序播放列表，数据源，自动生成 ID 作为播放列表项的 key
-  private get orderList(): APlayer.Audio[] {
+  // 数据源，自动生成 ID 作为播放列表项的 key
+  private get dataSource(): APlayer.Audio[] {
     return (Array.isArray(this.audio) ? this.audio : [this.audio])
       .filter(x => x)
       .map((item, index) => ({
@@ -113,6 +114,20 @@ export default class APlayer extends Vue.Component<
       }));
   }
 
+  // 根据数据源生成顺序播放列表（处理 VNode）
+  private get orderList(): APlayer.Audio[] {
+    const text = (vnode: string | VNode, key: string) =>
+      typeof vnode === 'string'
+        ? vnode
+        : vnode.data && vnode.data.attrs && vnode.data.attrs[`data-${key}`];
+
+    return this.dataSource.map(({ name, artist, ...item }) => ({
+      ...item,
+      name: text(name, 'name'),
+      artist: text(artist, 'artist'),
+    }));
+  }
+
   // 根据顺序播放列表生成随机播放列表
   private get randomList(): APlayer.Audio[] {
     return shuffle([...this.orderList]);
@@ -704,9 +719,9 @@ export default class APlayer extends Vue.Component<
   }
 
   // 处理播放曲目改变事件
-  private handleChangePlaylist(music: APlayer.Audio) {
+  private handleChangePlaylist(music: APlayer.Audio, index: number) {
     if (music.id === this.currentMusic.id) this.handleTogglePlay();
-    else this.currentMusic = music;
+    else this.currentMusic = this.orderList[index];
   }
   // #endregion
 
@@ -769,7 +784,7 @@ export default class APlayer extends Vue.Component<
 
   render() {
     const {
-      orderList,
+      dataSource,
       fixed,
       lrcType,
       isMini,
@@ -788,7 +803,7 @@ export default class APlayer extends Vue.Component<
         ref="container"
         class={classNames({
           aplayer: true,
-          'aplayer-withlist': orderList.length > 1,
+          'aplayer-withlist': dataSource.length > 1,
           'aplayer-withlrc': !fixed && (lrcType !== 0 && lyricVisible),
           'aplayer-narrow': isMini,
           'aplayer-fixed': fixed,
@@ -814,7 +829,7 @@ export default class APlayer extends Vue.Component<
           visible={listVisible}
           scrollTop={listScrollTop}
           currentMusic={currentMusic}
-          dataSource={orderList}
+          dataSource={dataSource}
           onChange={this.handleChangePlaylist}
         />
         {fixed && lrcType !== 0 ? <Lyric visible={lyricVisible} /> : null}

diff --git a/packages/@moefe/vue-aplayer/components/PlayList.tsx b/packages/@moefe/vue-aplayer/components/PlayList.tsx
@@ -11,7 +11,7 @@ export interface PlayListProps {
 }
 
 export interface PlayListEvents {
-  onChange: APlayer.Audio;
+  onChange: (music: APlayer.Audio, index: number) => void;
 }
 
 @Component
@@ -69,7 +69,7 @@ export default class PlayList extends Vue.Component<
             class={classNames({
               'aplayer-list-light': item.id === currentMusic.id,
             })}
-            onClick={() => this.$emit('change', item)}
+            onClick={() => this.$emit('change', item, index)}
           >
             <span
               class="aplayer-list-cur"