Skip to content

Commit 038f9fb

Browse files
eee555eee555
authored
Merge pull request eee555#64 from putianyi889/patch-49
全局共享录像播放器
2 parents caa7408 + bbbaac2 commit 038f9fb

File tree

9 files changed

+112
-324
lines changed

9 files changed

+112
-324
lines changed

‎front_end/src/App.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848

4949
<el-container class="mainheight">
5050
<el-main class="common-layout">
51+
<PlayerDialog />
5152
<router-view />
5253
<Footer />
5354
</el-main>
@@ -73,6 +74,7 @@ import { ref, onMounted, computed } from "vue";
7374
import LanguagePicker from "./components/widgets/LanguagePicker.vue";
7475
import Login from "./components/Login.vue";
7576
import Footer from "./components/Footer.vue";
77+
import PlayerDialog from "./components/PlayerDialog.vue";
7678
import useCurrentInstance from "@/utils/common/useCurrentInstance";
7779
import { useLocalStore, useUserStore } from "./store";
7880
const store = useUserStore();

‎front_end/src/components/PlayerDialog.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<el-dialog v-model="videoplayerstore.visible" style="backdrop-filter: blur(1px);" draggable align-center destroy-on-close
3+
:modal="false" :lock-scroll="false">
4+
<iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
5+
src="/flop/index.html" ref="video_iframe"></iframe>
6+
</el-dialog>
7+
</template>
8+
9+
<script setup lang="ts">
10+
11+
import { useVideoPlayerStore } from '@/store';
12+
import useCurrentInstance from '@/utils/common/useCurrentInstance';
13+
import { watch } from 'vue';
14+
import { generalNotification } from '@/utils/system/status';
15+
import { useI18n } from 'vue-i18n';
16+
const { proxy } = useCurrentInstance();
17+
const videoplayerstore = useVideoPlayerStore();
18+
const t = useI18n();
19+
20+
watch(videoplayerstore, () => {
21+
if (videoplayerstore.visible) {
22+
preview(videoplayerstore.id)
23+
}
24+
})
25+
26+
const preview = (id: Number | undefined) => {
27+
if (!id) {
28+
return
29+
}
30+
(window as any).flop = null;
31+
proxy.$axios.get('/video/get_software/',
32+
{
33+
params: {
34+
id,
35+
}
36+
}
37+
).then(function (response) {
38+
let url = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
39+
// console.log(url);
40+
if (response.data.msg == "a") {
41+
url += ".avf";
42+
} else if (response.data.msg == "e") {
43+
url += ".evf";
44+
}
45+
46+
if ((window as any).flop) {
47+
playVideo(url);
48+
} else {
49+
(window as any).flop = {
50+
onload: async function () {
51+
playVideo(url);
52+
},
53+
}
54+
}
55+
}).catch((error: any) => {
56+
generalNotification(t, error.response.status, t.t('common.action.getSoftware'))
57+
})
58+
}
59+
60+
const playVideo = function (url: string) {
61+
(window as any).flop.playVideo(url, {
62+
share: {
63+
uri: url,
64+
pathname: "/flop-player/player",
65+
anonymous: false,
66+
background: "rgba(100, 100, 100, 0.05)",
67+
title: "Flop Player Share",
68+
favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
69+
},
70+
anonymous: false,
71+
background: "rgba(0, 0, 0, 0)",
72+
listener: function () {
73+
videoplayerstore.visible = false;
74+
(window as any).flop = null;
75+
},
76+
});
77+
}
78+
79+
</script>

‎front_end/src/components/PreviewDownload.vue

Lines changed: 3 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
11
<template>
2-
<Teleport to=".common-layout">
3-
<el-dialog v-model="preview_visible"
4-
style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
5-
destroy-on-close :modal="false" :lock-scroll="false">
6-
<iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
7-
src="/flop/index.html" ref="video_iframe"></iframe>
8-
</el-dialog>
9-
</Teleport>
10-
<el-button :size="'small'" plain icon="View" @click="preview($event, id);">预览</el-button>
2+
<el-button :size="'small'" plain icon="View" @click="preview(id);">预览</el-button>
113
<el-button :size="'small'" plain icon="Download" @click="download($event, id)">下载</el-button>
124
</template>
135

146
<script setup lang="ts" name="PreviewDownload">
157
// 拟弃用
168
// 两个按钮，预览或下载
17-
import { onMounted, watch, ref, toRefs } from "vue";
9+
import { onMounted, ref } from "vue";
1810
// import axios from 'axios';
1911
// import { getCurrentInstance } from 'vue';
2012
import useCurrentInstance from "@/utils/common/useCurrentInstance";
13+
import { preview } from "@/utils/common/PlayerDialog";
2114
2215
const { proxy } = useCurrentInstance();
2316
// import { genFileId, ElMessage } from 'element-plus'
2417
25-
26-
const preview_visible = ref(false);
2718
// const hashkey = ref("");
2819
2920
const { id } = defineProps({
@@ -60,78 +51,6 @@ const { id } = defineProps({
6051
// onSuccess(`https://example.com/${id}.avf`)
6152
// }
6253
63-
const preview = (event: MouseEvent, id: Number | undefined) => {
64-
if (!id) {
65-
return
66-
}
67-
(window as any).flop = null;
68-
preview_visible.value = true;
69-
proxy.$axios.get('/video/get_software/',
70-
{
71-
params: {
72-
id,
73-
}
74-
}
75-
).then(function (response) {
76-
let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
77-
// console.log(uri);
78-
if (response.data.msg == "a") {
79-
uri += ".avf";
80-
} else if (response.data.msg == "e") {
81-
uri += ".evf";
82-
}
83-
84-
85-
// (window as any).flop.playVideo(uri);
86-
if ((window as any).flop) {
87-
// console.log("985", 'playVideo' in window.flop);
88-
// console.log("523", window.flop.hasOwnProperty('playVideo'));
89-
playVideo(uri);
90-
} else {
91-
(window as any).flop = {
92-
onload: async function () {
93-
// console.log("444", window.flop);
94-
// console.log("111", window.flop.playVideo);
95-
playVideo(uri);
96-
},
97-
}
98-
}
99-
100-
// console.log("333", window.flop);
101-
// console.log("777", window.flop.playVideo);
102-
// window.flop = null;
103-
// playVideo(uri);
104-
105-
// 等待 Flop Player 初始化完成
106-
// (window as any).flop = {
107-
// onload: () => {
108-
// // 具体参数说明参见：https://github.com/hgraceb/flop-player#flopplayvideouri-options
109-
// (window as any).flop.playVideo(uri, {
110-
// share: {
111-
// uri: uri,
112-
// pathname: "/flop-player/player",
113-
// anonymous: false,
114-
// background: "rgba(100, 100, 100, 0.05)",
115-
// title: "Flop Player Share",
116-
// favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
117-
// },
118-
// anonymous: false,
119-
// background: "rgba(0, 0, 0, 0)",
120-
// listener: function () {
121-
// preview_visible.value = false;
122-
// },
123-
// });
124-
// },
125-
// };
126-
127-
}).catch(
128-
(res) => {
129-
// console.log("报错");
130-
// console.log(res);
131-
}
132-
)
133-
}
134-
13554
13655
const download = (event: MouseEvent, id: Number | undefined) => {
13756
if (!id) {
@@ -150,29 +69,6 @@ const download = (event: MouseEvent, id: Number | undefined) => {
15069
// flop: any
15170
// }
15271
153-
const playVideo = function (uri: string) {
154-
// console.log(uri);
155-
156-
// console.log("747", window.flop);
157-
// console.log("585", window.flop.playVideo);
158-
(window as any).flop.playVideo(uri, {
159-
share: {
160-
uri: uri,
161-
pathname: "/flop-player/player",
162-
anonymous: false,
163-
background: "rgba(100, 100, 100, 0.05)",
164-
title: "Flop Player Share",
165-
favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
166-
},
167-
anonymous: false,
168-
background: "rgba(0, 0, 0, 0)",
169-
listener: function () {
170-
preview_visible.value = false;
171-
(window as any).flop = null;
172-
},
173-
});
174-
}
175-
17672
onMounted(() => {
17773
17874
// (window as any).flop = {

‎front_end/src/components/PreviewNumber.vue

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
<template>
2-
<Teleport to=".common-layout">
3-
<el-dialog v-if="preview_visible" v-model="preview_visible" style="backdrop-filter: blur(1px);" draggable
4-
align-center destroy-on-close :modal="false" :lock-scroll="false">
5-
<iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
6-
src="/flop/index.html" ref="video_iframe"></iframe>
7-
</el-dialog>
8-
</Teleport>
92
<el-link v-if="data.id" :underline="false" @click="preview(data.id);" class="clickable">{{ data.text }}</el-link>
103
<span v-else>--</span>
114
</template>
125

136
<script setup lang="ts" name="PreviewNumber">
147
// 某个数字或字符串，点击后预览
15-
import { ref } from "vue";
16-
import useCurrentInstance from "@/utils/common/useCurrentInstance";
17-
import { generalNotification } from "@/utils/system/status";
18-
import { useI18n } from "vue-i18n";
19-
const { proxy } = useCurrentInstance();
20-
const preview_visible = ref(false);
21-
const t = useI18n();
8+
import { preview } from '@/utils/common/PlayerDialog';
229
2310
const data = defineProps({
2411
id: {
@@ -29,62 +16,6 @@ const data = defineProps({
2916
},
3017
})
3118
32-
33-
const preview = (id: Number | undefined) => {
34-
if (!id) {
35-
return
36-
}
37-
(window as any).flop = null;
38-
preview_visible.value = true;
39-
proxy.$axios.get('/video/get_software/',
40-
{
41-
params: {
42-
id,
43-
}
44-
}
45-
).then(function (response) {
46-
let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
47-
// console.log(uri);
48-
if (response.data.msg == "a") {
49-
uri += ".avf";
50-
} else if (response.data.msg == "e") {
51-
uri += ".evf";
52-
}
53-
54-
if ((window as any).flop) {
55-
playVideo(uri);
56-
} else {
57-
(window as any).flop = {
58-
onload: async function () {
59-
playVideo(uri);
60-
},
61-
}
62-
}
63-
}).catch((error: any) => {
64-
generalNotification(t, error.response.status, t.t('common.action.getSoftware'))
65-
})
66-
}
67-
68-
const playVideo = function (uri: string) {
69-
(window as any).flop.playVideo(uri, {
70-
share: {
71-
uri: uri,
72-
pathname: "/flop-player/player",
73-
anonymous: false,
74-
background: "rgba(100, 100, 100, 0.05)",
75-
title: "Flop Player Share",
76-
favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
77-
},
78-
anonymous: false,
79-
background: "rgba(0, 0, 0, 0)",
80-
listener: function () {
81-
preview_visible.value = false;
82-
(window as any).flop = null;
83-
},
84-
});
85-
}
86-
87-
8819
</script>
8920

9021
<style lang="less" scoped></style>

0 commit comments

Comments
 (0)