fix(components): fix ssr issue

vuepress-theme-hope · Dec 8, 2022 · b63bff6 · b63bff6
1 parent 69cceb7
commit b63bff6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 29 deletions.
diff --git a/packages/components/rollup.config.ts b/packages/components/rollup.config.ts
@@ -12,8 +12,8 @@ export default [
     copy: [["client/styles", "client"]],
   }),
   ...rollupTypescript("client/components/AudioPlayer", {
-    external: ["@vueuse/core", "plyr", "vue", /\.s?css$/],
-    dtsExternal: ["@vueuse/core", /\.s?css$/],
+    external: ["plyr", "vue", /\.s?css$/],
+    dtsExternal: [/\.s?css$/],
   }),
   ...rollupTypescript("client/components/Badge", {
     external: ["vue", /\.scss$/],

diff --git a/packages/components/src/client/components/AudioPlayer.ts b/packages/components/src/client/components/AudioPlayer.ts
@@ -1,5 +1,3 @@
-/* eslint-disable vue/no-unused-properties */
-import Plyr from "plyr";
 import {
   computed,
   defineComponent,
@@ -9,7 +7,6 @@ import {
   ref,
 } from "vue";
 
-import type { UseMediaTextTrackSource } from "@vueuse/core";
 import type { Options as PlyrOptions } from "plyr";
 import type { PropType, VNode } from "vue";
 
@@ -27,49 +24,39 @@ export default defineComponent({
     },
 
     /**
-     * Video source
+     * Audio source
      *
-     * 视频源
+     * 音频源
      */
     src: {
       type: String,
       required: true,
     },
 
     /**
-     * Video title
+     * Audio title
      *
-     * 视频标题
+     * 音频标题
      */
     title: {
       type: String,
       default: "",
     },
 
     /**
-     * Video file type
+     * Audio file type
      *
-     * 视频文件类型
+     * 音频文件类型
      */
     type: {
       type: String,
       default: "",
     },
 
     /**
-     * Video tracks
+     * Audio poster
      *
-     * 视频字幕
-     */
-    tracks: {
-      type: Array as PropType<UseMediaTextTrackSource[]>,
-      default: (): UseMediaTextTrackSource[] => [],
-    },
-
-    /**
-     * Video poster
-     *
-     * 视频海报
+     * 音频封面
      */
     poster: {
       type: String,
@@ -86,15 +73,17 @@ export default defineComponent({
 
   setup(props) {
     let player: Plyr | null = null;
-    const audio = ref<HTMLVideoElement>();
+    const audio = ref<HTMLAudioElement>();
 
     const plyrOptions = computed(() => ({
       hideYouTubeDOMError: true,
       ...props.options,
     }));
 
     onMounted(() => {
-      if (audio.value) player = new Plyr(audio.value, plyrOptions.value);
+      void import("plyr").then(({ default: Plyr }) => {
+        if (audio.value) player = new Plyr(audio.value, plyrOptions.value);
+      });
     });
 
     onBeforeMount(() => {

diff --git a/packages/components/src/client/components/VideoPlayer.ts b/packages/components/src/client/components/VideoPlayer.ts
@@ -1,5 +1,3 @@
-/* eslint-disable vue/no-unused-properties */
-import Plyr from "plyr";
 import {
   computed,
   defineComponent,
@@ -69,7 +67,7 @@ export default defineComponent({
     /**
      * Video poster
      *
-     * 视频海报
+     * 视频封面
      */
     poster: {
       type: String,
@@ -104,7 +102,9 @@ export default defineComponent({
     }));
 
     onMounted(() => {
-      if (video.value) player = new Plyr(video.value, plyrOptions.value);
+      void import("plyr").then(({ default: Plyr }) => {
+        if (video.value) player = new Plyr(video.value, plyrOptions.value);
+      });
     });
 
     onBeforeMount(() => {