From 5b8a7c1baceee12f5a30dbca471cfd25819991fa Mon Sep 17 00:00:00 2001
From: Tianyi Pu <912396513@qq.com>
Date: Thu, 18 Jul 2024 08:14:24 +0100
Subject: [PATCH 1/4] =?UTF-8?q?=E5=85=A8=E5=B1=80=E5=85=B1=E4=BA=AB?=
 =?UTF-8?q?=E5=BD=95=E5=83=8F=E6=92=AD=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front_end/src/App.vue                        |   2 +
 front_end/src/components/PlayerDialog.vue    |  80 ++++++++++++++
 front_end/src/components/PreviewDownload.vue | 110 +------------------
 front_end/src/components/PreviewNumber.vue   |  71 +-----------
 front_end/src/components/VideoList.vue       |  70 +-----------
 front_end/src/utils/common/PlayerDialog.ts   |  11 ++
 front_end/src/utils/system/status.ts         |   3 +-
 front_end/src/views/VideoView.vue            |  82 +-------------
 8 files changed, 106 insertions(+), 323 deletions(-)
 create mode 100644 front_end/src/components/PlayerDialog.vue
 create mode 100644 front_end/src/utils/common/PlayerDialog.ts

diff --git a/front_end/src/App.vue b/front_end/src/App.vue
index 7d5b38c..c36ecae 100644
--- a/front_end/src/App.vue
+++ b/front_end/src/App.vue
@@ -48,6 +48,7 @@
 
         <el-container class="mainheight">
             <el-main class="common-layout">
+                <PlayerDialog />
                 <router-view />
                 <Footer />
             </el-main>
@@ -73,6 +74,7 @@ import { ref, onMounted, computed } from "vue";
 import LanguagePicker from "./components/widgets/LanguagePicker.vue";
 import Login from "./components/Login.vue";
 import Footer from "./components/Footer.vue";
+import PlayerDialog from "./components/PlayerDialog.vue";
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
 import { useLocalStore, useUserStore } from "./store";
 const store = useUserStore();
diff --git a/front_end/src/components/PlayerDialog.vue b/front_end/src/components/PlayerDialog.vue
new file mode 100644
index 0000000..4e2689f
--- /dev/null
+++ b/front_end/src/components/PlayerDialog.vue
@@ -0,0 +1,80 @@
+<template>
+    <el-dialog v-model="playerstore.visible" style="backdrop-filter: blur(1px);" draggable align-center destroy-on-close
+        :modal="false" :lock-scroll="false">
+        <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
+            src="/flop/index.html" ref="video_iframe"></iframe>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+
+import { usePlayerStore } from '@/store';
+import useCurrentInstance from '@/utils/common/useCurrentInstance';
+import { watch } from 'vue';
+import { generalNotification } from '@/utils/system/status';
+import { useI18n } from 'vue-i18n';
+const { proxy } = useCurrentInstance();
+const playerstore = usePlayerStore();
+const t = useI18n();
+
+watch(playerstore, (newPlayerStore: any, oldPlayerStore: any) => {
+    if (newPlayerStore.visible) {
+        preview(newPlayerStore.id)
+    }
+})
+
+const preview = (id: Number | undefined) => {
+    if (!id) {
+        return
+    }
+    (window as any).flop = null;
+    playerstore.visible = true;
+    proxy.$axios.get('/video/get_software/',
+        {
+            params: {
+                id,
+            }
+        }
+    ).then(function (response) {
+        let url = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
+        // console.log(url);
+        if (response.data.msg == "a") {
+            url += ".avf";
+        } else if (response.data.msg == "e") {
+            url += ".evf";
+        }
+
+        if ((window as any).flop) {
+            playVideo(url);
+        } else {
+            (window as any).flop = {
+                onload: async function () {
+                    playVideo(url);
+                },
+            }
+        }
+    }).catch((error: any) => {
+        generalNotification(t, error.response.status, t.t('common.action.getSoftware'))
+    })
+}
+
+const playVideo = function (url: string) {
+    (window as any).flop.playVideo(url, {
+        share: {
+            uri: url,
+            pathname: "/flop-player/player",
+            anonymous: false,
+            background: "rgba(100, 100, 100, 0.05)",
+            title: "Flop Player Share",
+            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
+        },
+        anonymous: false,
+        background: "rgba(0, 0, 0, 0)",
+        listener: function () {
+            playerstore.visible = false;
+            (window as any).flop = null;
+        },
+    });
+}
+
+</script>
\ No newline at end of file
diff --git a/front_end/src/components/PreviewDownload.vue b/front_end/src/components/PreviewDownload.vue
index 8d6d73e..ef1b16e 100644
--- a/front_end/src/components/PreviewDownload.vue
+++ b/front_end/src/components/PreviewDownload.vue
@@ -1,29 +1,20 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-model="preview_visible"
-            style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
-            destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
-    <el-button :size="'small'" plain icon="View" @click="preview($event, id);">预览</el-button>
+    <el-button :size="'small'" plain icon="View" @click="preview(id);">预览</el-button>
     <el-button :size="'small'" plain icon="Download" @click="download($event, id)">下载</el-button>
 </template>
 
 <script setup lang="ts" name="PreviewDownload">
 // 拟弃用
 // 两个按钮，预览或下载
-import { onMounted, watch, ref, toRefs } from "vue";
+import { onMounted, ref } from "vue";
 // import axios from 'axios';
 // import { getCurrentInstance } from 'vue';
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
+import { preview } from "@/utils/common/PlayerDialog";
 
 const { proxy } = useCurrentInstance();
 // import { genFileId, ElMessage } from 'element-plus'
 
-
-const preview_visible = ref(false);
 // const hashkey = ref("");
 
 const { id } = defineProps({
@@ -60,78 +51,6 @@ const { id } = defineProps({
 //   onSuccess(`https://example.com/${id}.avf`)
 // }
 
-const preview = (event: MouseEvent, id: Number | undefined) => {
-    if (!id) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-
-        // (window as any).flop.playVideo(uri);
-        if ((window as any).flop) {
-            // console.log("985", 'playVideo' in window.flop);
-            // console.log("523", window.flop.hasOwnProperty('playVideo'));
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    // console.log("444", window.flop);
-                    // console.log("111", window.flop.playVideo);
-                    playVideo(uri);
-                },
-            }
-        }
-
-        // console.log("333", window.flop);
-        // console.log("777", window.flop.playVideo);
-        // window.flop = null;
-        // playVideo(uri);
-
-        // 等待 Flop Player 初始化完成
-        // (window as any).flop = {
-        // 	onload: () => {
-        // 		// 具体参数说明参见：https://github.com/hgraceb/flop-player#flopplayvideouri-options
-        // 		(window as any).flop.playVideo(uri, {
-        // 			share: {
-        // 				uri: uri,
-        // 				pathname: "/flop-player/player",
-        // 				anonymous: false,
-        // 				background: "rgba(100, 100, 100, 0.05)",
-        // 				title: "Flop Player Share",
-        // 				favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        // 			},
-        // 			anonymous: false,
-        // 			background: "rgba(0, 0, 0, 0)",
-        // 			listener: function () {
-        // 				preview_visible.value = false;
-        // 			},
-        // 		});
-        // 	},
-        // };
-
-    }).catch(
-        (res) => {
-            // console.log("报错");
-            // console.log(res);
-        }
-    )
-}
-
 
 const download = (event: MouseEvent, id: Number | undefined) => {
     if (!id) {
@@ -150,29 +69,6 @@ const download = (event: MouseEvent, id: Number | undefined) => {
 // 	flop: any
 // }
 
-const playVideo = function (uri: string) {
-    // console.log(uri);
-
-    // console.log("747", window.flop);
-    // console.log("585", window.flop.playVideo);
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
 onMounted(() => {
 
     // (window as any).flop = {
diff --git a/front_end/src/components/PreviewNumber.vue b/front_end/src/components/PreviewNumber.vue
index f79987d..5fabc4c 100644
--- a/front_end/src/components/PreviewNumber.vue
+++ b/front_end/src/components/PreviewNumber.vue
@@ -1,24 +1,11 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-if="preview_visible" v-model="preview_visible" style="backdrop-filter: blur(1px);" draggable
-            align-center destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
     <el-link v-if="data.id" :underline="false" @click="preview(data.id);" class="clickable">{{ data.text }}</el-link>
     <span v-else>--</span>
 </template>
 
 <script setup lang="ts" name="PreviewNumber">
 // 某个数字或字符串，点击后预览
-import { ref } from "vue";
-import useCurrentInstance from "@/utils/common/useCurrentInstance";
-import { generalNotification } from "@/utils/system/status";
-import { useI18n } from "vue-i18n";
-const { proxy } = useCurrentInstance();
-const preview_visible = ref(false);
-const t = useI18n();
+import { preview } from '@/utils/common/PlayerDialog';
 
 const data = defineProps({
     id: {
@@ -29,62 +16,6 @@ const data = defineProps({
     },
 })
 
-
-const preview = (id: Number | undefined) => {
-    if (!id) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-        if ((window as any).flop) {
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    playVideo(uri);
-                },
-            }
-        }
-    }).catch((error: any) => {
-        generalNotification(t, error.response.status, t.t('common.action.getSoftware'))
-    })
-}
-
-const playVideo = function (uri: string) {
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
-
 </script>
 
 <style lang="less" scoped></style>
\ No newline at end of file
diff --git a/front_end/src/components/VideoList.vue b/front_end/src/components/VideoList.vue
index 5b61099..36ad572 100644
--- a/front_end/src/components/VideoList.vue
+++ b/front_end/src/components/VideoList.vue
@@ -1,13 +1,5 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-model="preview_visible"
-            style="backdrop-filter: blur(1px);" draggable align-center
-            destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
-    <el-table :data="videos_trans" :show-header="false" @row-click="preview" table-layout="auto"
+    <el-table :data="videos_trans" :show-header="false" @row-click="(row: any) => preview(row.key)" table-layout="auto"
         style="width: 100%;font-size: 16px;user-select: none;">
         <el-table-column prop="time" min-width="200" :formatter="simple_formatter(utc_to_local_format)"/>
         <el-table-column v-if="need_player_name" min-width="80">
@@ -41,16 +33,15 @@
 import { ref, computed } from 'vue'
 import { utc_to_local_format } from "@/utils/system/tools";
 import PlayerName from '@/components/PlayerName.vue';
-const preview_visible = ref(false);
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
 import { Check, Close } from '@element-plus/icons-vue';
 import { ElNotification } from 'element-plus';
+import { preview } from '@/utils/common/PlayerDialog';
 
 import { useUserStore } from '@/store';
 const store = useUserStore()
 
 import { ms_to_s, approve, freeze, simple_formatter } from '@/utils';
-import { generalNotification } from '@/utils/system/status';
 import { useI18n } from 'vue-i18n';
 const { proxy } = useCurrentInstance();
 
@@ -115,63 +106,6 @@ const videos_trans = computed(() => {
 
 // console.log(videos_trans);
 
-
-const preview = (row: any, column: any, event: Event) => {
-
-    if (!row.key) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id: row.key,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + row.key;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-        if ((window as any).flop) {
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    playVideo(uri);
-                },
-            }
-        }
-    }).catch((error: any) => {
-        generalNotification(t, error.response.status, t.t('common.action.getSoftware'));
-    })
-}
-
-
-const playVideo = function (uri: string) {
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
 const handleApprove = async function (row: any) {
     let status = await approve(proxy, row.key);
     if (status == 'True') {
diff --git a/front_end/src/utils/common/PlayerDialog.ts b/front_end/src/utils/common/PlayerDialog.ts
new file mode 100644
index 0000000..0312b59
--- /dev/null
+++ b/front_end/src/utils/common/PlayerDialog.ts
@@ -0,0 +1,11 @@
+import { usePlayerStore } from "@/store";
+
+const playerstore = usePlayerStore();
+
+export const preview = (id: number | undefined) => {
+    if (!id) {
+        return;
+    }
+    playerstore.id = id;
+    playerstore.visible = true;
+}
\ No newline at end of file
diff --git a/front_end/src/utils/system/status.ts b/front_end/src/utils/system/status.ts
index 06cc645..c74bd64 100644
--- a/front_end/src/utils/system/status.ts
+++ b/front_end/src/utils/system/status.ts
@@ -1,6 +1,5 @@
 import { useLocalStore } from "@/store";
 import { ElNotification } from "element-plus"
-const local = useLocalStore();
 
 const notificationType = ['', '', 'success', '', 'error', 'error'];
 const notificationTitle = ['', '', 'common.msg.actionSuccess', '', 'common.msg.actionFail', 'common.msg.actionFail'];
@@ -21,6 +20,6 @@ export function generalNotification(t: any, status: number, action: string) {
         title: t.t(notificationTitle[type], [action]),
         message: t.t(notificationMessage[status]),
         type: notificationType[type],
-        duration: local.notification_duration,
+        duration: localStorage.getItem('local').notification_duration,
     })
 }
diff --git a/front_end/src/views/VideoView.vue b/front_end/src/views/VideoView.vue
index 0d29424..5dd0b61 100644
--- a/front_end/src/views/VideoView.vue
+++ b/front_end/src/views/VideoView.vue
@@ -1,12 +1,4 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-model="preview_visible"
-            style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
-            destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
     <el-row class="mb-4" style="margin-bottom: 10px;">
         <el-button v-for="(tag, key) in level_tags" type="warning" :plain="!(level_tag_selected == key)" :size="'small'"
             @click="level_tag_selected = key as string; request_videos();">{{ $t('common.level.' + tag.key)
@@ -25,7 +17,7 @@
     </el-row>
 
     <div style="font-size:20px;margin: auto;margin-top: 10px;">
-        <el-table :data="videoList" @sort-change="handleSortChange" @row-click="preview" border table-layout="auto">
+        <el-table :data="videoList" @sort-change="handleSortChange" @row-click="(row: any) => preview(row.id)" border table-layout="auto">
             <el-table-column type="index" :index="offsetIndex" fixed></el-table-column>
             <el-table-column :label="$t('common.prop.realName')" v-slot="scope" width="auto">
                 <span class="nobr">
@@ -51,20 +43,19 @@
 
 <script lang="ts" setup>
 // 全网录像的检索器，根据三个维度排序
-import { onMounted, ref, Ref, reactive } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
 import PreviewDownload from '@/components/PreviewDownload.vue';
 import PlayerName from '@/components/PlayerName.vue';
 const { proxy } = useCurrentInstance();
 import { utc_to_local_format } from "@/utils/system/tools";
 import { ms_to_s } from "@/utils";
-import { genFileId, ElMessage } from 'element-plus'
+import { preview } from '@/utils/common/PlayerDialog';
 
 import { useI18n } from 'vue-i18n';
+import { generalNotification } from '@/utils/system/status';
 const t = useI18n();
 
-const preview_visible = ref(false);
-
 const level_tag_selected = ref("EXPERT");
 const mode_tag_selected = ref("STD");
 const index_tag_selected = ref("timems");
@@ -258,9 +249,8 @@ const request_videos = () => {
         videoList.splice(0, videoList.length);
         videoList.push(...data.videos);
         state.VideoCount = data.count;
-    }).catch(() => {
-        // 触发限流
-        ElMessage.error({ message: '请稍后再试', offset: 68 });
+    }).catch((error: any) => {
+        generalNotification(t, error.response.status, t.t('common.action.videoQuery'))
     })
 }
 
@@ -268,66 +258,6 @@ const index_select = (key: string | number, value: NameKeyReverse) => {
     index_tags[key].selected = !value.selected;
 }
 
-const preview = (row: any) => {
-    var id = row.id
-    if (!id) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-        if ((window as any).flop) {
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    playVideo(uri);
-                },
-            }
-        }
-    }).catch(
-        (res) => {
-            // console.log("报错");
-            // console.log(res);
-        }
-    )
-}
-
-
-const playVideo = function (uri: string) {
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
-
 </script>
 
 

From c905e1c9ed59a0a435c6889bb99e5dde5cf72e8c Mon Sep 17 00:00:00 2001
From: Tianyi Pu <912396513@qq.com>
Date: Thu, 18 Jul 2024 11:19:29 +0100
Subject: [PATCH 2/4] update

---
 front_end/src/components/PlayerDialog.vue | 1 -
 front_end/src/views/VideoView.vue         | 1 -
 2 files changed, 2 deletions(-)

diff --git a/front_end/src/components/PlayerDialog.vue b/front_end/src/components/PlayerDialog.vue
index 4e2689f..6ea8f74 100644
--- a/front_end/src/components/PlayerDialog.vue
+++ b/front_end/src/components/PlayerDialog.vue
@@ -28,7 +28,6 @@ const preview = (id: Number | undefined) => {
         return
     }
     (window as any).flop = null;
-    playerstore.visible = true;
     proxy.$axios.get('/video/get_software/',
         {
             params: {
diff --git a/front_end/src/views/VideoView.vue b/front_end/src/views/VideoView.vue
index 5dd0b61..aa90505 100644
--- a/front_end/src/views/VideoView.vue
+++ b/front_end/src/views/VideoView.vue
@@ -45,7 +45,6 @@
 // 全网录像的检索器，根据三个维度排序
 import { onMounted, ref, reactive } from 'vue'
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
-import PreviewDownload from '@/components/PreviewDownload.vue';
 import PlayerName from '@/components/PlayerName.vue';
 const { proxy } = useCurrentInstance();
 import { utc_to_local_format } from "@/utils/system/tools";

From 82caf51773247bcc75815ddd01c2882b1edb9602 Mon Sep 17 00:00:00 2001
From: Tianyi Pu <912396513@qq.com>
Date: Thu, 18 Jul 2024 12:53:16 +0100
Subject: [PATCH 3/4] Update index.ts

---
 front_end/src/store/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/front_end/src/store/index.ts b/front_end/src/store/index.ts
index 8535a63..bdcf1c0 100644
--- a/front_end/src/store/index.ts
+++ b/front_end/src/store/index.ts
@@ -29,6 +29,13 @@ export const useUserStore = defineStore('user', {
     ),
 })
 
+export const usePlayerStore = defineStore('player', {
+    state: () => ({
+        visible: false,
+        id: 0,
+    }),
+})
+
 export const useLocalStore = defineStore('local', {
     state: () => ({
         darkmode: false,

From bbbaac29ed59a6a7923b0d8b0e1e6c67489cd6ae Mon Sep 17 00:00:00 2001
From: Tianyi Pu <912396513@qq.com>
Date: Fri, 19 Jul 2024 07:36:54 +0100
Subject: [PATCH 4/4] =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=90=8D=E6=94=B9?=
 =?UTF-8?q?=E6=88=90videoplayerstore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front_end/src/components/PlayerDialog.vue  | 14 +++++++-------
 front_end/src/utils/common/PlayerDialog.ts |  8 ++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/front_end/src/components/PlayerDialog.vue b/front_end/src/components/PlayerDialog.vue
index 6ea8f74..193e7e7 100644
--- a/front_end/src/components/PlayerDialog.vue
+++ b/front_end/src/components/PlayerDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="playerstore.visible" style="backdrop-filter: blur(1px);" draggable align-center destroy-on-close
+    <el-dialog v-model="videoplayerstore.visible" style="backdrop-filter: blur(1px);" draggable align-center destroy-on-close
         :modal="false" :lock-scroll="false">
         <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
             src="/flop/index.html" ref="video_iframe"></iframe>
@@ -8,18 +8,18 @@
 
 <script setup lang="ts">
 
-import { usePlayerStore } from '@/store';
+import { useVideoPlayerStore } from '@/store';
 import useCurrentInstance from '@/utils/common/useCurrentInstance';
 import { watch } from 'vue';
 import { generalNotification } from '@/utils/system/status';
 import { useI18n } from 'vue-i18n';
 const { proxy } = useCurrentInstance();
-const playerstore = usePlayerStore();
+const videoplayerstore = useVideoPlayerStore();
 const t = useI18n();
 
-watch(playerstore, (newPlayerStore: any, oldPlayerStore: any) => {
-    if (newPlayerStore.visible) {
-        preview(newPlayerStore.id)
+watch(videoplayerstore, () => {
+    if (videoplayerstore.visible) {
+        preview(videoplayerstore.id)
     }
 })
 
@@ -70,7 +70,7 @@ const playVideo = function (url: string) {
         anonymous: false,
         background: "rgba(0, 0, 0, 0)",
         listener: function () {
-            playerstore.visible = false;
+            videoplayerstore.visible = false;
             (window as any).flop = null;
         },
     });
diff --git a/front_end/src/utils/common/PlayerDialog.ts b/front_end/src/utils/common/PlayerDialog.ts
index 0312b59..ed32b8b 100644
--- a/front_end/src/utils/common/PlayerDialog.ts
+++ b/front_end/src/utils/common/PlayerDialog.ts
@@ -1,11 +1,11 @@
-import { usePlayerStore } from "@/store";
+import { useVideoPlayerStore } from "@/store";
 
-const playerstore = usePlayerStore();
+const videoplayerstore = useVideoPlayerStore();
 
 export const preview = (id: number | undefined) => {
     if (!id) {
         return;
     }
-    playerstore.id = id;
-    playerstore.visible = true;
+    videoplayerstore.id = id;
+    videoplayerstore.visible = true;
 }
\ No newline at end of file