|
@@ -6,8 +6,11 @@ import { api_back } from "/src/helpers/communication";
|
|
|
import state from "/src/state";
|
|
|
import iconBack from "./image/icon-back.svg";
|
|
|
import { Icon, Popup } from "vant";
|
|
|
-import TheVideo from "/src/components/the-video";
|
|
|
-import TheAudio from "/src/components/the-audio";
|
|
|
+
|
|
|
+import videobg from "./image/videobg.png";
|
|
|
+import "plyr/dist/plyr.css";
|
|
|
+import Plyr from "plyr";
|
|
|
+import { nextTick } from "vue";
|
|
|
|
|
|
type IItemType = "intonation" | "cadence" | "integrity";
|
|
|
|
|
@@ -21,6 +24,11 @@ export default defineComponent({
|
|
|
},
|
|
|
setup(props) {
|
|
|
const { scoreData } = toRefs(props);
|
|
|
+ const shareData = reactive({
|
|
|
+ show: false,
|
|
|
+ isInitPlyr: false,
|
|
|
+ _plrl: null as any,
|
|
|
+ });
|
|
|
const level: any = {
|
|
|
BEGINNER: "入门级",
|
|
|
ADVANCED: "进阶级",
|
|
@@ -47,6 +55,20 @@ export default defineComponent({
|
|
|
return "video";
|
|
|
});
|
|
|
|
|
|
+ const openAudioAndVideo = () => {
|
|
|
+ shareData.show = true;
|
|
|
+ if (shareData.isInitPlyr) return;
|
|
|
+ nextTick(() => {
|
|
|
+ const id = mediaType.value === "audio" ? "#audioSrc" : "#videoSrc";
|
|
|
+ shareData._plrl = new Plyr(id, {
|
|
|
+ controls: ["play-large", "play", "progress", 'current-time'],
|
|
|
+ fullscreen: { enabled: false },
|
|
|
+ });
|
|
|
+ shareData.isInitPlyr = true;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
return () => (
|
|
|
<div class={styles.headerTop}>
|
|
|
<div class={styles.left}>
|
|
@@ -81,12 +103,30 @@ export default defineComponent({
|
|
|
</>
|
|
|
)}
|
|
|
</div>
|
|
|
- <div style={{ display: scoreData.value.videoFilePath ? "" : "none" }} class={styles.replaybtn} onClick={() => (showVideo.value = true)}>
|
|
|
+ <div style={{ display: scoreData.value.videoFilePath ? "" : "none" }} class={styles.replaybtn} onClick={openAudioAndVideo}>
|
|
|
<Icon class={styles.iconBtn} name="replay" />
|
|
|
<span>查看回放</span>
|
|
|
</div>
|
|
|
- <Popup class={["popup-custom", "van-scale", styles.popup]} transition="van-scale" v-model:show={showVideo.value} closeable>
|
|
|
- {mediaType.value === 'video' ? <TheVideo src={showVideo.value ? scoreData.value.videoFilePath : ""} /> : <TheAudio src={showVideo.value ? scoreData.value.videoFilePath : ""} />}
|
|
|
+ <Popup
|
|
|
+ teleport="body"
|
|
|
+ class={["popup-custom", "van-scale", styles.popup]}
|
|
|
+ transition="van-scale"
|
|
|
+ v-model:show={shareData.show}
|
|
|
+ closeable
|
|
|
+ onClose={() => {
|
|
|
+ shareData._plrl?.pause();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {mediaType.value === "audio" && (
|
|
|
+ <div class={styles.audiobox}>
|
|
|
+ <audio id="audioSrc" src={scoreData.value.videoFilePath} controls="false" preload="metadata" playsinline />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {mediaType.value === "video" && (
|
|
|
+ <div class={styles.videobox}>
|
|
|
+ <video id="videoSrc" class={styles.videoBox} src={scoreData.value.videoFilePath} data-poster={videobg} preload="metadata" playsinline />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</Popup>
|
|
|
</div>
|
|
|
);
|