优化：视频播放组件概率性不能动态刷新问题

Author: modstart

changelog.md

@@ -1,5 +1,6 @@
-## v0.12.1
+## v0.13.0
 
+- 优化：视频播放组件概率性不能动态刷新问题
 - 修复：云端模型网络异常情况下结果丢失问题
 
 ## v0.12.0 云端大模型，VIP模型，直播功能

electron-builder.json5

@@ -98,7 +98,7 @@
         "type": "development",
         "notarize": false,
         "darkModeSupport": false,
-        "hardenedRuntime": false,
+        "hardenedRuntime": true,
         "identity": "Xi'an Yanyi Information Technology Co., Ltd (Q96H3H33RK)"
     },
     "linux": {

src/components/common/VideoPlayer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Player from 'xgplayer';
 import 'xgplayer/dist/index.min.css';
-import {onBeforeUnmount, onMounted, ref} from "vue";
+import {onBeforeUnmount, onMounted, ref, watch} from "vue";
 
 const videoContainer = ref<HTMLDivElement | undefined>(undefined);
 
@@ -25,17 +25,31 @@ const props = withDefaults(defineProps<{
 
 let player: Player | null = null;
 
+const initPlayer = () => {
+    if (player) {
+        player.destroy();
+        player = null;
+    }
+    if (videoContainer.value && props.url) {
+        player = new Player({
+            el: videoContainer.value,
+            url: props.url,
+            width: props.width,
+            height: props.height,
+            autoplay: props.autoplay,
+            muted: props.autoplayMuted,
+            loop: props.loop,
+            controls: props.controls,
+        });
+    }
+}
+
+watch(() => props.url, (newUrl) => {
+    initPlayer()
+})
+
 onMounted(() => {
-    player = new Player({
-        el: videoContainer.value,
-        url: props.url,
-        width: props.width,
-        height: props.height,
-        autoplay: props.autoplay,
-        muted: props.autoplayMuted,
-        loop: props.loop,
-        controls: props.controls,
-    });
+    initPlayer();
 })
 
 onBeforeUnmount(() => {

src/pages/Video/VideoGen.vue

@@ -166,7 +166,7 @@ onBeforeUnmount(() => {
                             </div>
                             <div class="flex-shrink-0 ml-8">
                                 <div class="p-2 rounded shadow bg-gray-300" v-if="r.result.url">
-                                    <div class="w-48 h-48" v-if="r.result.url">
+                                    <div class="w-48 h-48">
                                         <VideoPlayer :url="'file://'+r.result.url"/>
                                     </div>
                                 </div>