refactor(project): Reorganize frontend and backend directories

2026-03-18 10:45:15 +08:00
parent cc9eaf4cdf
commit 92a139e470
513 changed files with 28251 additions and 287 deletions
@@ -0,0 +1,101 @@
+<template>
+  <div class="video-player">
+    <div ref="playerRef" class="player-container"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import Artplayer from 'artplayer'
+import type { Danmaku } from '@/api/danmaku.ts'
+
+const props = defineProps<{
+  src: string
+  poster?: string
+  danmakuList?: Danmaku[]
+}>()
+
+const emit = defineEmits<{
+  timeupdate: [time: number]
+  ended: []
+}>()
+
+const playerRef = ref<HTMLElement>()
+let instance: Artplayer | null = null
+
+const initPlayer = () => {
+  if (!playerRef.value) return
+
+  instance = new Artplayer({
+    container: playerRef.value,
+    url: props.src,
+    poster: props.poster,
+    autoplay: false,
+    pip: true,
+    autoSize: false,
+    autoMini: true,
+    screenshot: true,
+    setting: true,
+    loop: false,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    subtitleOffset: true,
+    miniProgressBar: true,
+    mutex: true,
+    backdrop: true,
+    playsInline: true,
+    autoPlayback: true,
+    airplay: true,
+    theme: '#00a1d6',
+    lang: navigator.language.toLowerCase(),
+    moreVideoAttr: {
+      crossOrigin: 'anonymous'
+    },
+    customType: {
+      danmaku: (video, url) => {
+        // 弹幕插件集成
+      }
+    }
+  })
+
+  instance.on('video:timeupdate', () => {
+    emit('timeupdate', instance?.video?.currentTime || 0)
+  })
+
+  instance.on('video:ended', () => {
+    emit('ended')
+  })
+}
+
+watch(() => props.src, () => {
+  if (instance) {
+    instance.switchUrl(props.src, props.poster)
+  }
+})
+
+onMounted(() => {
+  initPlayer()
+})
+
+onUnmounted(() => {
+  if (instance) {
+    instance.destroy()
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.video-player {
+  width: 100%;
+  background: #000;
+
+  .player-container {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 16 / 9;
+  }
+}
+</style>