Skip to content

Commit

Permalink
Merge pull request eee555#64 from putianyi889/patch-49
Browse files Browse the repository at this point in the history
全局共享录像播放器
  • Loading branch information
eee555 authored Jul 19, 2024
2 parents caa7408 + bbbaac2 commit 038f9fb
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 324 deletions.
2 changes: 2 additions & 0 deletions front_end/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@

<el-container class="mainheight">
<el-main class="common-layout">
<PlayerDialog />
<router-view />
<Footer />
</el-main>
Expand All @@ -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();
Expand Down
79 changes: 79 additions & 0 deletions front_end/src/components/PlayerDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<template>
<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>
</el-dialog>
</template>

<script setup lang="ts">
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 videoplayerstore = useVideoPlayerStore();
const t = useI18n();
watch(videoplayerstore, () => {
if (videoplayerstore.visible) {
preview(videoplayerstore.id)
}
})
const preview = (id: Number | undefined) => {
if (!id) {
return
}
(window as any).flop = null;
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 () {
videoplayerstore.visible = false;
(window as any).flop = null;
},
});
}
</script>
110 changes: 3 additions & 107 deletions front_end/src/components/PreviewDownload.vue
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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) {
Expand All @@ -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 = {
Expand Down
71 changes: 1 addition & 70 deletions front_end/src/components/PreviewNumber.vue
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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>
Loading

0 comments on commit 038f9fb

Please sign in to comment.