From 736a6c1973849adf11478f6e5d02ead31eedfdc0 Mon Sep 17 00:00:00 2001
From: Harvey Zack <laozhaochaguan@gmail.com>
Date: Sat, 6 Sep 2025 12:31:10 +0800
Subject: [PATCH] feat: refactor Artplayer component and add Player component
 with TypeScript support

---
 .../artplayer-template/vue.js/package.json    |  3 ++
 .../artplayer-template/vue.js/src/App.vue     | 18 +++++-----
 .../vue.js/src/{Artplayer.vue => Player.vue}  | 35 ++++++++-----------
 3 files changed, 27 insertions(+), 29 deletions(-)
 rename packages/artplayer-template/vue.js/src/{Artplayer.vue => Player.vue} (58%)

diff --git a/packages/artplayer-template/vue.js/package.json b/packages/artplayer-template/vue.js/package.json
index dcd163adc..a6dbb6b74 100644
--- a/packages/artplayer-template/vue.js/package.json
+++ b/packages/artplayer-template/vue.js/package.json
@@ -12,6 +12,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "artplayer": "^5.3.0-beta.2",
+    "artplayer-plugin-danmuku": "^5.1.8",
+    "artplayer-plugin-document-pip": "^1.0.1",
     "vue": "^3.5.18"
   },
   "devDependencies": {
diff --git a/packages/artplayer-template/vue.js/src/App.vue b/packages/artplayer-template/vue.js/src/App.vue
index 3874ae132..3e6f2b222 100644
--- a/packages/artplayer-template/vue.js/src/App.vue
+++ b/packages/artplayer-template/vue.js/src/App.vue
@@ -1,24 +1,24 @@
-<script setup>
+<script setup lang="ts">
 import { reactive } from 'vue'
-import Artplayer from './Artplayer.vue'
+import Artplayer, { type Option } from 'artplayer'
+import Player from './Player.vue'
 
-const option = reactive({
+const option = reactive<Partial<Option>>({
   url: 'https://artplayer.org/assets/sample/video.mp4',
   autoSize: true,
 })
 
 const style = reactive({
-  width: '600px',
-  height: '400px',
+  width: '800px',
+  height: '600px',
   margin: '60px auto 0',
 })
 
-function getInstance(art) {
-  // eslint-disable-next-line no-console
-  console.log(art)
+function getInstance(art: Artplayer) {
+  console.log('Artplayer instance:', art)
 }
 </script>
 
 <template>
-  <Artplayer :option="option" :style="style" @get-instance="getInstance" />
+  <Player :option="option" :style="style" @get-instance="getInstance" />
 </template>
diff --git a/packages/artplayer-template/vue.js/src/Artplayer.vue b/packages/artplayer-template/vue.js/src/Player.vue
similarity index 58%
rename from packages/artplayer-template/vue.js/src/Artplayer.vue
rename to packages/artplayer-template/vue.js/src/Player.vue
index 95aba3a70..332f06389 100644
--- a/packages/artplayer-template/vue.js/src/Artplayer.vue
+++ b/packages/artplayer-template/vue.js/src/Player.vue
@@ -1,26 +1,21 @@
-<script setup>
-import Artplayer from 'artplayer'
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
 
-// test i18n
+// Test type
+import Artplayer, { type Option } from 'artplayer'
+
+// Test i18n
 import fr from 'artplayer/i18n/fr'
 import id from 'artplayer/i18n/id'
 
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
-
-// test plugins
-import artplayerPluginDanmuku from '../../../artplayer-plugin-danmuku'
-import artplayerPluginDocumentPip from '../../../artplayer-plugin-document-pip'
-
-const props = defineProps({
-  option: {
-    type: Object,
-    required: true,
-  },
-})
+// Test plugins
+import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
+import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
 
+const props = defineProps<{ option: Partial<Option> }>()
 const emit = defineEmits(['getInstance'])
 
-const art = shallowRef(null)
+const art = shallowRef<Artplayer>(null)
 const $container = ref(null)
 
 onMounted(() => {
@@ -30,7 +25,9 @@ onMounted(() => {
     i18n: { id, fr },
     lang: 'fr',
     plugins: [
-      artplayerPluginDocumentPip(),
+      artplayerPluginDocumentPip({
+        //
+      }),
       artplayerPluginDanmuku({
         danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
       }),
@@ -40,9 +37,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  if (art.value) {
-    art.value.destroy(false)
-  }
+  art.value?.destroy(false)
 })
 </script>