Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/components/m-header/index.tsx

@@ -42,7 +42,7 @@ export default defineComponent({
       default: ''
     }
   },
-  emits: ['rightClick'],
+  emits: ["leftClick", 'rightClick'],
   setup(props, { emit, slots }) {
     const route = useRoute();
     const router = useRouter();
@@ -52,6 +52,7 @@ export default defineComponent({
     });
 
     const onClickLeft = () => {
+      emit('leftClick');
       if (browser().isApp) {
         postMessage({
           api: 'goBack'

src/views/creation/audioVisualDraw.ts

@@ -87,6 +87,9 @@
       }
       const pauseVisualDraw = () => {
         isPause = true
+        requestAnimationFrame(()=>{
+          canvasCtx.clearRect(0, 0, width, height);
+        })
         //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
         // source?.disconnect()
         // analyser?.disconnect()

src/views/creation/edit/index.module.less

@@ -203,6 +203,10 @@
       font-weight: 600;
       color: #131415;
       line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 240px;
     }
 
     .username {

src/views/creation/index-share.tsx

@@ -62,9 +62,6 @@ export default defineComponent({
     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,
@@ -247,15 +244,9 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         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()
         });
       }
@@ -346,6 +337,8 @@ export default defineComponent({
     };
     // 滚动事件
     const cleanScrollEvent = useEventListener('scroll', () => {
+      // 作品已删除不让滚动变色
+      if(state.isEmpty) return
       const height =
         window.scrollY ||
         document.documentElement.scrollTop
@@ -531,9 +524,9 @@ export default defineComponent({
                       state.playType === 'Audio' &&
                       <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>
+                        <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
                         <audio
                           crossorigin="anonymous"
                           id="audioMediaSrc"
@@ -556,14 +549,16 @@ export default defineComponent({
                         webkit-playsinline
                       />
                     }
-                    <div class={[styles.playLarge, plyrState.playIngShow && styles.playIngShow]}></div>
-                    <div class={styles.mediaTime}>
-                      <div>
-                        {getSecondRPM(plyrState.currentTime)}
-                      </div>
-                      <div class={styles.note}>/</div>
-                      <div class={styles.duration}>
-                        {getSecondRPM(plyrState.duration)}
+                    <div class={[styles.playLarge, !plyrState.mediaTimeShow && plyrState.playIngShow && styles.playIngShow]}></div>
+                    <div class={styles.mediaTimeCon}>
+                      <div class={styles.mediaTime}>
+                        <div>
+                          {getSecondRPM(plyrState.currentTime)}
+                        </div>
+                        <div class={styles.note}>/</div>
+                        <div class={styles.duration}>
+                          {getSecondRPM(plyrState.duration)}
+                        </div>
                       </div>
                     </div>
                     <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>
@@ -657,7 +652,7 @@ export default defineComponent({
                                   <img src={iconZanActive} />
                                   <span>{item.likeNum}</span>
                                 </div>
-                                <div class={styles.username}>{item.username}</div>
+                                <div class={[styles.username, 'van-ellipsis']}>{item.username}</div>
                               </div>
                             </div>
                           ),
@@ -671,8 +666,8 @@ export default defineComponent({
                   {
                     (!state.listState.finished || state.params.page>2) &&
                       <div class={styles.btnImg}>
-                        <img onClick={handleChangeList} src={btnImg} />
-                    </div>
+                        <img onClick={handleChangeList} onTouchstart={()=>{}} src={btnImg} />
+                      </div>
                   }
                 </>
               ) : (

src/views/creation/index.module.less

@@ -33,15 +33,15 @@
 }
 
 .playSection{
-  height: 250px;
-  padding-bottom: 40px;
+  height: 210px;
   position: relative;
+  overflow: hidden;
   &::after{
     position: absolute;
     content: "";
     width: 100%;
     height: 40px;
-    bottom: 0;
+    bottom: -40px;
     left: 0;
     background: linear-gradient( 180deg, #355662 0%, rgba(57,90,95,0) 100%);
   }
@@ -134,7 +134,7 @@
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%, calc(-50% - 20px));
+    transform: translate(-50%, -50%);
     width: 48px;
     height: 48px;
     background: url("./images/midPlay.png") no-repeat;
@@ -145,17 +145,32 @@
       display: initial;
     }
   }
+  .mediaTimeCon{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .3);
+  }
+  &.mediaTimeShow{
+    .mediaTimeCon{
+      display: block;
+    }
+  }
   .mediaTime{
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    bottom: 96px;
-    display: none;
+    bottom: 95px;
+    display: flex;
     font-weight: 500;
-    font-size: 14px;
-    color: #FFFFFF;
+    font-size: 16px;
+    color: #B8E8FF;
     line-height: 20px;
     z-index: 10;
+    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
     & div:first-child{
       width: 50px;
       text-align: right;
@@ -164,12 +179,7 @@
       margin: 0 4px;
     }
     .duration{
-      color: rgba(255,255,255,0.5);
-    }
-  }
-  &.mediaTimeShow{
-    .mediaTime{
-      display: flex;
+      color: #fff;
     }
   }
   .landscapeScreen{
@@ -186,7 +196,7 @@
     width: 100%;
     height: calc(var(--staffBoxHeight) + 12px);
     position: absolute;
-    bottom: 40px;
+    bottom: 0;
     padding-bottom: 12px;
     visibility: hidden;
     background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
@@ -240,6 +250,10 @@
             font-size: 16px;
             color: #FFFFFF;
             line-height: 22px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: 160px;
           }
           .iconMember{
             margin-left: 6px;
@@ -589,7 +603,7 @@
         align-items: center;
         border-radius: 3px;
         background-color: rgba(255,255,255,.22);
-        padding: 1px 2px 1px 1px;
+        padding: 1px 2px;
         img{
           width: 14px;
           height: 15px;
@@ -603,6 +617,7 @@
         }
       }
       .username{
+        max-width: 160px;
         margin-left: 4px;
         font-weight: 400;
         font-size: 13px;

src/views/creation/index.tsx

@@ -65,9 +65,6 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
-    const lottieDom = ref()
-    const lottieDom1 = ref()
-    const lottieDom2 = ref()
     const mStickyBottom = ref()
     const mStickyUpward = ref()
     const state = reactive({
@@ -205,15 +202,9 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         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()
         });
       }
@@ -359,6 +350,9 @@ export default defineComponent({
       }
       const pauseVisualDraw = () => {
         isPause = true
+        requestAnimationFrame(()=>{
+          canvasCtx.clearRect(0, 0, width, height);
+        })
         //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
         // source?.disconnect()
         // analyser?.disconnect()
@@ -517,7 +511,6 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      setStatusBarTextColor(false)
       cleanScrollEvent()
       state._plrl?.destroy()
     });
@@ -553,6 +546,7 @@ export default defineComponent({
             title={state.musicDetail?.musicSheetName}
             border={false}
             isBack={route.query.platformType != 'ANALYSIS'}
+            onLeftClick={()=>{ setStatusBarTextColor(false) }}
           />
         </MSticky>
         <div class={styles.singer}>
@@ -564,9 +558,9 @@ export default defineComponent({
               state.playType === 'Audio' &&
               <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>
+                <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
                 <audio
                   crossorigin="anonymous"
                   id="audioMediaSrc"
@@ -589,14 +583,16 @@ export default defineComponent({
                 playsinline
               />
             }
-            <div class={[styles.playLarge, plyrState.playIngShow && styles.playIngShow]}></div>
-            <div class={styles.mediaTime}>
-              <div>
-                {getSecondRPM(plyrState.currentTime)}
-              </div>
-              <div class={styles.note}>/</div>
-              <div class={styles.duration}>
-                {getSecondRPM(plyrState.duration)}
+            <div class={[styles.playLarge, !plyrState.mediaTimeShow && plyrState.playIngShow && styles.playIngShow]}></div>
+            <div class={styles.mediaTimeCon}>
+              <div class={styles.mediaTime}>
+                <div>
+                  {getSecondRPM(plyrState.currentTime)}
+                </div>
+                <div class={styles.note}>/</div>
+                <div class={styles.duration}>
+                  {getSecondRPM(plyrState.duration)}
+                </div>
               </div>
             </div>
             <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>

src/views/creation/playCreation/index.module.less

@@ -2,6 +2,7 @@
   width: 100vw;
   height: 100vh;
   position: relative;
+  overflow: hidden;
   &.landscapeScreen{
     width: 100vh;
     height: 100vw;
@@ -181,11 +182,18 @@
     .musicDetail{
       margin-left: 10px;
       .musicSheetName{
+        width: 300px;
         margin-top: 4px;
-        font-weight: 600;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 20px;
+        :global{
+          .van-notice-bar{
+              padding: 0;
+              height: 20px;
+              font-weight: 600;
+              font-size: 18px;
+              color: #FFFFFF;
+              line-height: 20px;
+          }
+      }
       }
       .username{
         margin-top: 2px;

src/views/creation/playCreation/index.tsx

@@ -16,6 +16,7 @@ import {
 import { usePageVisibility } from '@vant/use';
 import playProgressData from "./playProgress"
 import Loading from '../loading';
+import { NoticeBar } from "vant"
 
 export default defineComponent({
   name: 'playCreation',
@@ -29,9 +30,6 @@ export default defineComponent({
     const musicSheetId = decodeURIComponent(route.query.musicSheetId as string || '');
     const videoBgUrl = decodeURIComponent(route.query.videoBgUrl as string || '');
     const playType = resourceUrl.lastIndexOf('mp4') !== -1 ? 'Video' : 'Audio'
-    const lottieDom = ref()
-    const lottieDom1 = ref()
-    const lottieDom2 = ref()
     const landscapeScreen = ref(false)
     let _plrl:any
     const playIngShow = ref(true)
@@ -241,6 +239,9 @@ export default defineComponent({
       }
       const pauseVisualDraw = () => {
         isPause = true
+        requestAnimationFrame(()=>{
+          canvasCtx.clearRect(0, 0, width, height);
+        })
         //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
         // source?.disconnect()
         // analyser?.disconnect()
@@ -266,15 +267,9 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         _plrl.on('play', () => {
-          lottieDom.value?.play()
-          lottieDom1.value?.play()
-          lottieDom2.value?.play()
           playVisualDraw()
         });
         _plrl.on('pause', () => {
-          lottieDom.value?.pause()
-          lottieDom1.value?.pause()
-          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
@@ -429,7 +424,12 @@ export default defineComponent({
       <div class={styles.backBox}>
         <img class={styles.backImg} src={backImg} onClick={handlerBack} />
         <div class={styles.musicDetail}>
-          <div class={styles.musicSheetName}>{musicSheetName}</div>
+          <div class={styles.musicSheetName}>
+              <NoticeBar
+                  text={musicSheetName}
+                  background="none"
+              />
+          </div>
           <div class={styles.username}>演奏：{username}</div>
         </div>
       </div>
@@ -437,9 +437,9 @@ export default defineComponent({
           playType === 'Audio' ?
           <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>
+            <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
             <audio
               crossorigin="anonymous"
               id="audioMediaSrc"

src/views/creation/share-model/index.module.less

@@ -97,6 +97,7 @@
       font-size: 13px;
       color: #aaa;
       line-height: 20px;
+      max-width: 200px;
     }
   }
 }
@@ -175,7 +176,8 @@
   position: relative;
   background-color: #fff;
   border-radius: 12px 12px 0px 0px;
-  padding-bottom: env(safe-area-inset-bottom);
+  //padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 10px;
 
   .iconClose {
     position: absolute;

src/views/creation/share-model/index.tsx

@@ -243,7 +243,7 @@ export default defineComponent({
               <p class={[styles.musicName, 'van-ellipsis']}>
                 {props.musicDetail.musicSheetName}
               </p>
-              <p class={styles.username}>
+              <p class={[styles.username, 'van-ellipsis']}>
                 演奏者：{props.musicDetail.username}
               </p>
             </div>