|
|
@@ -4,7 +4,8 @@ import {
|
|
|
onUnmounted,
|
|
|
reactive,
|
|
|
ref,
|
|
|
- watch
|
|
|
+ watch,
|
|
|
+ nextTick
|
|
|
} from 'vue';
|
|
|
// import WaveSurfer from 'wavesurfer.js';
|
|
|
// import Regions from 'wavesurfer.js/dist/plugins/regions.js';
|
|
|
@@ -24,7 +25,7 @@ import videoLabel from './share-model/images/videoLabel.png';
|
|
|
import musicBg from './share-model/images/music-bg.png';
|
|
|
import playImg from './images/play.png';
|
|
|
import { browser, getGradeCh, getSecondRPM, vaildMusicScoreUrl } from '@/helpers/utils';
|
|
|
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
|
|
+import { onBeforeRouteUpdate, useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
|
|
|
import {
|
|
|
api_openUserMusicDetail,
|
|
|
api_openUserMusicPage,
|
|
|
@@ -32,7 +33,6 @@ import {
|
|
|
api_verification
|
|
|
} from './api';
|
|
|
import MEmpty from '@/components/m-empty';
|
|
|
-import { nextTick } from 'process';
|
|
|
import MVideo from '@/components/m-video';
|
|
|
import LoginModel from './login-model';
|
|
|
import { removeAuth } from '../student-register/layout/utils';
|
|
|
@@ -48,8 +48,11 @@ import "plyr/dist/plyr.css";
|
|
|
import Plyr from "plyr";
|
|
|
import { Vue3Lottie } from "vue3-lottie";
|
|
|
import audioBga from "./images/audioBga.json";
|
|
|
+import audioBga1 from "./images/leftCloud.json";
|
|
|
+import audioBga2 from "./images/rightCloud.json";
|
|
|
import videobg from "./images/videobg.png";
|
|
|
import audioVisualDraw from "./audioVisualDraw"
|
|
|
+import playProgressData from "./playCreation/playProgress"
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'creation-detail',
|
|
|
@@ -57,7 +60,10 @@ export default defineComponent({
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
const isScreenScroll = ref(false)
|
|
|
+ const creationHeight = ref(0)
|
|
|
const lottieDom = ref()
|
|
|
+ const lottieDom1 = ref()
|
|
|
+ const lottieDom2 = ref()
|
|
|
const state = reactive({
|
|
|
id: route.query.id,
|
|
|
isEmpty:false,
|
|
|
@@ -158,6 +164,8 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
const onDetail = (item: any) => {
|
|
|
+ playProgressData.playProgress = 0
|
|
|
+ playProgressData.playState = false
|
|
|
router.push({
|
|
|
path: '/shareCreation',
|
|
|
query: {
|
|
|
@@ -176,6 +184,8 @@ export default defineComponent({
|
|
|
// 在微信中运行的时候，微信没有开放自动加载资源的权限，所以要等播放之后才显示播放控制器
|
|
|
player.on('loadedmetadata', () => {
|
|
|
plyrState.loaded = true
|
|
|
+ player.currentTime = playProgressData.playProgress
|
|
|
+ if(playProgressData.playState) handlerClickPlay()
|
|
|
});
|
|
|
player.on("timeupdate", ()=>{
|
|
|
plyrState.currentTime = player.currentTime
|
|
|
@@ -219,10 +229,14 @@ export default defineComponent({
|
|
|
const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
|
|
|
player.on('play', () => {
|
|
|
lottieDom.value.play()
|
|
|
+ lottieDom1.value.play()
|
|
|
+ lottieDom2.value.play()
|
|
|
playVisualDraw()
|
|
|
});
|
|
|
player.on('pause', () => {
|
|
|
lottieDom.value.pause()
|
|
|
+ lottieDom1.value.pause()
|
|
|
+ lottieDom2.value.pause()
|
|
|
pauseVisualDraw()
|
|
|
});
|
|
|
}
|
|
|
@@ -234,10 +248,13 @@ export default defineComponent({
|
|
|
}
|
|
|
function handlerLandscapeScreen(event:any){
|
|
|
event.stopPropagation()
|
|
|
+ playProgressData.playState = !!state._plrl?.playing
|
|
|
+ playProgressData.playProgress = state._plrl?.currentTime || 0
|
|
|
router.push({
|
|
|
path:"/playCreation",
|
|
|
query:{
|
|
|
resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
|
|
|
+ videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg),
|
|
|
musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
|
|
|
username:encodeURIComponent(state.musicDetail?.username),
|
|
|
musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
|
|
|
@@ -309,6 +326,7 @@ export default defineComponent({
|
|
|
};
|
|
|
// 滚动事件
|
|
|
const cleanScrollEvent = useEventListener('scroll', () => {
|
|
|
+ creationHeight.value = window.innerHeight
|
|
|
const height =
|
|
|
window.scrollY ||
|
|
|
document.documentElement.scrollTop
|
|
|
@@ -333,8 +351,8 @@ export default defineComponent({
|
|
|
});
|
|
|
// 初始化五线谱
|
|
|
function initStaff(){
|
|
|
- //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
|
|
|
- const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
|
|
|
+ const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
|
|
|
+ //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
|
|
|
staffState.staffSrc = src
|
|
|
window.addEventListener('message', (event) => {
|
|
|
const { api, height } = event.data;
|
|
|
@@ -430,6 +448,13 @@ export default defineComponent({
|
|
|
staffState.height = "initial"
|
|
|
__init();
|
|
|
});
|
|
|
+ onBeforeRouteLeave((to, from, next)=>{
|
|
|
+ if(to.path !== "/playCreation"){
|
|
|
+ playProgressData.playProgress = 0
|
|
|
+ playProgressData.playState = false
|
|
|
+ }
|
|
|
+ next()
|
|
|
+ })
|
|
|
return () => (
|
|
|
<div
|
|
|
style={
|
|
|
@@ -442,7 +467,7 @@ export default defineComponent({
|
|
|
browser().isTablet ? styles.creationTablet : '',
|
|
|
isScreenScroll.value && styles.isShareScreenScroll
|
|
|
]}>
|
|
|
- <div class={styles.creationBg}></div>
|
|
|
+ <div style={ creationHeight.value ? {"--creationHeight":creationHeight.value + "px"} : {}} class={styles.creationBg}></div>
|
|
|
<MSticky position="top"
|
|
|
onBarHeight={(height: any) => {
|
|
|
console.log(height, 'height', height)
|
|
|
@@ -457,7 +482,7 @@ export default defineComponent({
|
|
|
{
|
|
|
state.isEmpty ?
|
|
|
<div class={styles.isEmpty}>
|
|
|
- <MEmpty description="作品已删除～" />
|
|
|
+ <MEmpty image={"empty2"} description="作品已删除～" />
|
|
|
</div> :
|
|
|
<>
|
|
|
<div class={styles.singerBox}>
|
|
|
@@ -478,6 +503,8 @@ export default defineComponent({
|
|
|
<div class={styles.audioBox}>
|
|
|
<canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
|
|
|
<Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
|
|
|
+ <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
|
|
|
+ <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
|
|
|
<audio
|
|
|
crossorigin="anonymous"
|
|
|
id="audioMediaSrc"
|
|
|
@@ -494,7 +521,7 @@ export default defineComponent({
|
|
|
id="videoMediaSrc"
|
|
|
class={styles.videoBox}
|
|
|
src={state.musicDetail?.videoUrl}
|
|
|
- data-poster={videobg}
|
|
|
+ data-poster={ state.musicDetail?.videoImg || videobg}
|
|
|
preload="metadata"
|
|
|
playsinline
|
|
|
/>
|
|
|
@@ -611,7 +638,7 @@ export default defineComponent({
|
|
|
))}
|
|
|
</List>
|
|
|
) : (
|
|
|
- <MEmpty description="暂无数据" />
|
|
|
+ <MEmpty image={"empty2"} description="暂无作品" />
|
|
|
)}
|
|
|
</div>
|
|
|
{
|
黄琪勇
