feat: refactor Artplayer component and add Player component with TypeScript support

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": {

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',
+  width: '800px',
-  height: '400px',
+  height: '600px',
   margin: '60px auto 0',
 })
 
-function getInstance(art) {
+function getInstance(art: Artplayer) {
-  // eslint-disable-next-line no-console
+  console.log('Artplayer instance:', art)
-  console.log(art)
 }
 </script>
 
 <template>
-  <Artplayer :option="option" :style="style" @get-instance="getInstance" />
+  <Player :option="option" :style="style" @get-instance="getInstance" />
 </template>

packages/artplayer-template/vue.js/src/Player.vue

@@ -1,26 +1,21 @@
-<script setup>
+<script setup lang="ts">
-import Artplayer from 'artplayer'
+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 artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
-// test plugins
+import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
-import artplayerPluginDanmuku from '../../../artplayer-plugin-danmuku'
-import artplayerPluginDocumentPip from '../../../artplayer-plugin-document-pip'
-
-const props = defineProps({
-  option: {
-    type: Object,
-    required: true,
-  },
-})
 
+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>