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

index.html

@@ -53,5 +53,9 @@
     //   }
   </script>
 </body>
-
+  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+  <script>
+    // VConsole will be exported to `window.VConsole` by default.
+    var vConsole = new window.VConsole();
+  </script>
 </html>

src/views/creation/index-share.tsx

@@ -10,7 +10,8 @@ import {
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less';
-import { Cell, Image, List, Popup, Sticky, TextEllipsis, NoticeBar } from 'vant';
+import MHeader from '@/components/m-header';
+import { Cell, Image, List, Popup, Sticky, TextEllipsis, NoticeBar, showConfirmDialog, showToast } from 'vant';
 import iconMember from './images/icon-member.png';
 import iconZan from './images/icon-zan.png';
 import iconZanActive from './images/icon-zan-active.png';
@@ -27,6 +28,9 @@ import playImg from './images/play.png';
 import { browser, getGradeCh, getSecondRPM, vaildMusicScoreUrl } from '@/helpers/utils';
 import { onBeforeRouteUpdate, useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import {
+  postMessage
+} from '@/helpers/native-message';
+import {
   api_openUserMusicDetail,
   api_openUserMusicPage,
   api_userMusicStar,
@@ -52,16 +56,18 @@ import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import btnImg from './images/btn.png';
 import audioVisualDraw from "./audioVisualDraw"
-import playProgressData from "./playCreation/playProgress"
+//import playProgressData from "./playCreation/playProgress"
 import Loading from './loading';
+import backImg from "./images/back.png";
+import wxBg from '../download/images/wx_bg.png';
 
 export default defineComponent({
   name: 'creation-detail',
   setup() {
+    const {isApp, isTablet, weixin} = browser()
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
-    const creationHeight = ref(0)
     const state = reactive({
       id: route.query.id,
       isEmpty:false,
@@ -104,9 +110,10 @@ export default defineComponent({
       musicRenderType:"staff",
       partIndex:0
     })
+    const isLandscapeScreen = ref(false)
+    const wxStatus = ref(false)
     const staffDom= ref<HTMLIFrameElement>()
     const {playStaff, pauseStaff, updateProgressStaff} = staffMoveInstance()
-    let isInitAudioVisualDraw =false
     // 点赞
     const onStarChange = async () => {
       await checkLogin();
@@ -170,8 +177,8 @@ export default defineComponent({
       }
     }
     const onDetail = (item: any) => {
-      playProgressData.playProgress = 0
-      playProgressData.playState = false
+      // playProgressData.playProgress = 0
+      // playProgressData.playState = false
       router.push({
         path: '/shareCreation',
         query: {
@@ -183,17 +190,29 @@ export default defineComponent({
     function initMediaPlay(){
       const id = state.playType === "Audio" ? "#audioMediaSrc" : "#videoMediaSrc";
       state._plrl = new Plyr(id, {
-        controls: ["progress"],
+        controls: ["play", "progress", "current-time", "duration"],
         fullscreen: {
           enabled: false,
           fallback: false
         }
       });
       const player = state._plrl
+      // 创建音波数据
+      if(state.playType === "Audio"){
+        const audioDom = document.querySelector("#audioMediaSrc") as HTMLAudioElement
+        const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
+        const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
+        player.on('play', () => {
+          playVisualDraw()
+        });
+        player.on('pause', () => {
+          pauseVisualDraw()
+        });
+      }
       // 在微信中运行的时候，微信没有开放自动加载资源的权限，所以要等播放之后才显示播放控制器
       player.on('loadedmetadata', () => {
         plyrState.loaded = true
-        player.currentTime = playProgressData.playProgress
+        //player.currentTime = playProgressData.playProgress
       });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
@@ -216,6 +235,9 @@ export default defineComponent({
       });
       // 处理按压事件
       const handleStart = () => {
+        if(isLandscapeScreen.value){
+          return
+        }
         plyrState.duration = player.duration
         plyrState.mediaTimeShow = true
       };
@@ -234,45 +256,100 @@ export default defineComponent({
       progressDom.addEventListener('touchend', handleEnd);
     }
     //点击改变播放状态
-    function handlerClickPlay(){
-      const player = state._plrl;
-      // 由于ios低版本必须在用户操作之后才能初始化 createMediaElementSource 所以必须在用户操作之后初始化
-      if(!isInitAudioVisualDraw && state.playType === "Audio"){
-        isInitAudioVisualDraw = true
-        // 创建音波数据
-        const audioDom = document.querySelector("#audioMediaSrc") as HTMLAudioElement
-        const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
-        const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
-        player.on('play', () => {
-          playVisualDraw()
-        });
-        player.on('pause', () => {
-          pauseVisualDraw()
-        });
+    function handlerClickPlay(event?:MouseEvent){
+      // 原生 播放暂停按钮 点击的时候 不触发
+      // @ts-ignore
+      if(event?.target?.matches('button.plyr__control')){
+        return
       }
+      const player = state._plrl;
       if (player.playing) {
         player.pause();
       } else {
         player.play();
       }
     }
+    function handlerBack(event:any){
+      event.stopPropagation()
+      verticalScreen()
+    }
+    function landscapeScreen(){
+      postMessage({
+        api: "setRequestedOrientation",
+        content: {
+          orientation: 0,
+        },
+      });
+      isLandscapeScreen.value = true
+    }
+    function verticalScreen(){
+      postMessage({
+        api: "setRequestedOrientation",
+        content: {
+          orientation: 1,
+        },
+      });
+      isLandscapeScreen.value = false
+    }
     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),
-          speedRate:encodeURIComponent(staffState.speedRate),
-          musicRenderType:encodeURIComponent(staffState.musicRenderType),
-          partIndex:encodeURIComponent(staffState.partIndex),
-        }
-      })
+      if(isApp){
+        landscapeScreen()
+        return
+      }
+      if(weixin){
+        wxStatus.value = true
+      }else{
+        const t = Date.now()
+        const str  = location.href
+        shareCall(str)
+        setTimeout(() => {
+          if(Date.now() - t < 3500){
+            window.location.href = location.origin + '/#/transfer'
+          }
+        }, 3000)
+      }
+      // showConfirmDialog({
+      //   className: "dialogMusicClass",
+      //   message: '即将离开\n打开“音乐数字课堂”',
+      //   confirmButtonText: "允许",
+      //   cancelButtonText: "取消"
+      // }).then(() => {
+      //   const str  = location.href
+      //   shareCall(str)
+      // });
+      // 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),
+      //     speedRate:encodeURIComponent(staffState.speedRate),
+      //     musicRenderType:encodeURIComponent(staffState.musicRenderType),
+      //     partIndex:encodeURIComponent(staffState.partIndex),
+      //   }
+      // })
+    }
+    const shareCall = (str: string, params?: any) => {
+      const query = {
+        url: str,
+        action: params?.action || 'h5', // app, h5
+        pageTag: params?.pageTag || 1 // 页面标识
+      }
+      const iosStr = encodeURIComponent(JSON.stringify(query))
+      const userAgent = navigator.userAgent || navigator.vendor;
+      const platform = navigator.platform || 'unknown';
+      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || (platform === 'MacIntel')) {
+        window.location.href = `BandInstrumentTeam://linkUrl=${iosStr}`
+      } else if (/(Android)/i.test(userAgent)) {
+        window.location.href = `colexiukt://html:8888/SplashActivity?url=${iosStr}`
+      } else {
+        showToast('请用手机或移动设备打开')
+      }
     }
     const checkLogin = async () => {
       try {
@@ -345,9 +422,15 @@ export default defineComponent({
         // 防止多次调用
         if(height > 0 && isScreenScroll.value === false){
           isScreenScroll.value = true
+          if(isApp){
+            setStatusBarTextColor(false)
+          }
         }
         if(height <= 0){
           isScreenScroll.value = false
+          if(isApp){
+            setStatusBarTextColor(true)
+          }
         }
     })
     function handlerDownLoad(){
@@ -372,11 +455,11 @@ export default defineComponent({
           staffState.isShow = true
           staffState.height = height + "px"
           // 如果是播放中自动开始播放  不是播放 自动跳转到当前位置
-          if(playProgressData.playState){
-            handlerClickPlay()
-          }else{
-            updateProgressStaff(state._plrl.currentTime)
-          }
+          // if(playProgressData.playState){
+          //   handlerClickPlay()
+          // }else{
+          //   updateProgressStaff(state._plrl.currentTime)
+          // }
         }
       });
     }
@@ -440,17 +523,20 @@ export default defineComponent({
         updateProgressStaff
       }
     }
-    function setFullHeight(){
-      creationHeight.value = window.innerHeight
+    // 设置导航栏颜色
+    function setStatusBarTextColor(isWhite:boolean){
+      postMessage({
+        api: 'setStatusBarTextColor',
+        content: { statusBarTextColor: isWhite }
+      })
     }
     onMounted(async () => {
+      if(isApp) { setStatusBarTextColor(true) }
       __init();
-      //window.addEventListener('resize', setFullHeight)
     });
 
     onUnmounted(() => {
       cleanScrollEvent()
-      //window.removeEventListener('resize', setFullHeight)
       state._plrl?.destroy()
     });
 
@@ -459,7 +545,6 @@ export default defineComponent({
       state.playType = '';
       state.params.page = 1;
       state.list = [];
-      isInitAudioVisualDraw = false
       if(state._plrl){
         state._plrl.destroy()
       }
@@ -469,24 +554,23 @@ export default defineComponent({
       staffState.height = "initial"
       __init();
     });
-    onBeforeRouteLeave((to, from, next)=>{
-      if(to.path !== "/playCreation"){
-        playProgressData.playProgress = 0
-        playProgressData.playState = false
-      }
-      next()
-    })
+    // onBeforeRouteLeave((to, from, next)=>{
+    //   if(to.path !== "/playCreation"){
+    //     playProgressData.playProgress = 0
+    //     playProgressData.playState = false
+    //   }
+    //   next()
+    // })
     return () => (
       <div
         style={
           {
             '--barheight':state.heightV + "px",
-            // "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"
           }
         }
         class={[
           styles.creation,
-          browser().isTablet ? styles.creationTablet : '',
+          isTablet ? styles.creationTablet : '',
           isScreenScroll.value && styles.isShareScreenScroll
         ]}>
         <div class={styles.creationBg}></div>
@@ -496,10 +580,20 @@ export default defineComponent({
             state.heightV = height
           }}
         >
-            <div class={styles.logoDownload}>
-              <img src={isScreenScroll.value ? logo1Img : logoImg} class={styles.logoImg}></img>
-              <div class={styles.logTit} onClick={handlerDownLoad}>下载App</div>
-            </div>
+            {
+              isApp ? <MHeader
+                  color={isScreenScroll.value ? "#333333" : "#ffffff"}
+                  background={isScreenScroll.value ? `rgb(255,255,255` : "transparent"}
+                  border={false}
+                  isBack={route.query.platformType != 'ANALYSIS'}
+                  title={"作品详情"}
+                  onLeftClick={()=>{ setStatusBarTextColor(false) }}
+                />
+                : <div class={styles.logoDownload}>
+                    <img src={isScreenScroll.value ? logo1Img : logoImg} class={styles.logoImg}></img>
+                    <div class={styles.logTit} onClick={handlerDownLoad}>下载App</div>
+                  </div>
+            }
         </MSticky>
         {
           state.isEmpty ?
@@ -518,8 +612,23 @@ export default defineComponent({
                 演奏：{state.musicDetail?.username}
               </div>
             </div>
-            <Sticky offsetTop={state.heightV - 1 + "px"}>
-              <div class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow,!plyrState.loaded && styles.notLoaded]} id="playMediaSection" onClick={handlerClickPlay}>
+            <Sticky zIndex={1000} offsetTop={state.heightV - 1 + "px"}>
+              <div class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow,!plyrState.loaded && styles.notLoaded,isLandscapeScreen.value&&styles.isLandscapeScreen]} id="playMediaSection" onClick={handlerClickPlay}>
+                {
+                  isLandscapeScreen.value &&
+                    <div class={styles.backBox}>
+                      <img class={styles.backImg} src={backImg} onClick={handlerBack}/>
+                      <div class={styles.musicDetail}>
+                        <div class={styles.musicSheetName}>
+                            <NoticeBar
+                                text={state.musicDetail?.musicSheetName}
+                                background="none"
+                            />
+                        </div>
+                        <div class={styles.username}>演奏：{state.musicDetail?.username}</div>
+                      </div>
+                    </div>
+                }
                 {
                   state.playType &&
                   <>
@@ -547,9 +656,11 @@ export default defineComponent({
                         class={styles.videoBox}
                         src={state.musicDetail?.videoUrl}
                         data-poster={ state.musicDetail?.videoImg || videobg}
+                        poster={ state.musicDetail?.videoImg || videobg}
                         preload="metadata"
                         playsinline
                         webkit-playsinline
+                        x5-playsinline
                       />
                     }
                     <div class={[styles.playLarge, !plyrState.mediaTimeShow && plyrState.playIngShow && styles.playIngShow]}></div>
@@ -733,6 +844,15 @@ export default defineComponent({
         {
           !staffState.isShow && <Loading></Loading>
         }
+        {wxStatus.value && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              wxStatus.value = false;
+            }}>
+            <img src={wxBg} alt="" />
+          </div>
+        )}
       </div>
     );
   }

src/views/creation/index.module.less

@@ -15,7 +15,7 @@
       color: #ffffff;
     }
   }
-  &.isScreenScroll{
+  &.isScreenScroll,&.isShareScreenScroll{
     :global{
       .van-nav-bar .van-icon{
         color: #333333;
@@ -43,6 +43,7 @@
     bottom: -40px;
     left: 0;
     background: linear-gradient( 180deg, #355662 0%, rgba(57,90,95,0) 100%);
+    pointer-events: none;
   }
   :global {
       .plyr {
@@ -76,6 +77,12 @@
                       margin-top: -1px;
                   }
               }
+              .plyr__controls__item.plyr__time{
+                display: none;
+              }
+              .plyr__controls__item.plyr__control{
+                display: none;
+              }
           }
       }
   }
@@ -92,8 +99,9 @@
       overflow: hidden;
       .audioBga {
         position: absolute;
-        left: 0;
-        top: 0;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -60%);
         width: 100%;
         height: 82%;
       }
@@ -666,6 +674,12 @@
   &.creationTablet{
     .playSection{
       height: 340px;
+      .audioBox {
+        .audioBga{
+          width: 80%;
+          height: 62%;
+        }
+      }
     }
     .musicSection{
       min-height: calc(100% - var(--barheight) - 20px - 14vh - 340px - 55px - 80px);
@@ -711,3 +725,160 @@
     }
   }
 }
+
+.wxpopup {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  img {
+    width: 88%;
+    margin: 0 6%;
+  }
+}
+
+// :global{
+//   .dialogMusicClass.van-dialog{
+//     width: 300px;
+//     .van-dialog__message{
+//       font-weight: 500;
+//       line-height: 24px;
+//     }
+//   }
+// }
+
+// 横屏样式
+.creation.creationTablet{
+  .playSection.isLandscapeScreen{
+    .audioBox {
+      .audioBga{
+        width: 72%;
+        height: 56%;
+      }
+    }
+  }
+}
+.playSection.isLandscapeScreen{
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  z-index: 1000;
+  .landscapeScreen{
+    display: none;
+  }
+  :global {
+    .plyr{
+      .plyr__controls{
+        padding: 0 20px 20px;
+        .plyr__controls__item.plyr__control{
+          display: block;
+          padding: 0;
+          width: 18px;
+          height: 18px;
+          &:hover{
+              background: initial;
+          }
+          .icon--pressed{
+              width: 100%;
+              height: 100%;
+              background: url("./images/pause1.png") no-repeat;
+              background-size: 100% 100%;
+              use{
+                  display: none;
+              }
+          }
+          .icon--not-pressed{
+              width: 100%;
+              height: 100%;
+              background: url("./images/play1.png") no-repeat;
+              background-size: 100% 100%;
+              use{
+                  display: none;
+              }
+          }
+        }
+        .plyr__controls__item.plyr__progress__container{
+          margin-left: 9px;
+          input[type=range]{
+              color: #73C1FF;
+              height: 20px;
+          }
+          input[type="range"]::-webkit-slider-runnable-track {
+              height: 4px;
+          }
+          input[type="range"]::-webkit-slider-thumb {
+              width: 12px;
+              height: 12px;
+              margin-top: -4px;
+              box-shadow: initial;
+          }
+          .plyr__progress__buffer{
+              height: 4px;
+              color: rgba(115,193,255,0.8);
+              background-color: #fff;
+              margin-top: -2px;
+          }
+        }
+        .plyr__controls__item.plyr__time{
+            font-weight: 500;
+            font-size: 14px;
+            color: #FFFFFF;
+            display: initial;
+            &.plyr__time--current{
+                margin-left: 9px;
+            }
+        }
+      }
+    }
+  }
+  .backBox{
+    position: absolute;
+    left: 30px;
+    top: 20px;
+    display: flex;
+    z-index: 10;
+    .backImg{
+      width: 32px;
+      height: 32px;
+    }
+    .musicDetail{
+      margin-left: 20px;
+      .musicSheetName{
+        width: 300px;
+        margin-top: 4px;
+        :global{
+          .van-notice-bar{
+              padding: 0;
+              height: 20px;
+              font-weight: 600;
+              font-size: 18px;
+              color: #FFFFFF;
+              line-height: 20px;
+          }
+      }
+      }
+      .username{
+        margin-top: 2px;
+        font-weight: 400;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+        line-height: 18px
+      }
+    }
+  }
+  .staffBox{
+    height: calc(var(--staffBoxHeight) + 44px);
+    padding-bottom: 44px;
+  }
+}

src/views/creation/index.tsx

@@ -21,7 +21,8 @@ import {
   showDialog,
   showToast,
   Sticky,
-  TextEllipsis
+  TextEllipsis,
+  NoticeBar
 } from 'vant';
 import iconDownload from './images/icon-download.png';
 import iconShare from './images/icon-share.png';
@@ -56,13 +57,15 @@ 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 playProgressData from "./playCreation/playProgress"
+//import playProgressData from "./playCreation/playProgress"
 import Loading from './loading';
 import { generateMixedData } from "./audioVisualDraw"
+import backImg from "./images/back.png";
 
 export default defineComponent({
   name: 'creation-detail',
   setup() {
+    const {isApp, isTablet} = browser()
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
@@ -104,6 +107,7 @@ export default defineComponent({
       musicRenderType:"staff",
       partIndex: 0
     })
+    const isLandscapeScreen = ref(false)
     const staffDom= ref<HTMLIFrameElement>()
     const {playStaff, pauseStaff, updateProgressStaff} = staffMoveInstance()
     // 获取列表
@@ -142,7 +146,7 @@ export default defineComponent({
         }, 100);
 
         setTimeout(() => {
-          if (browser().isApp) {
+          if (isApp) {
             postMessage({
               api: 'goBack'
             });
@@ -190,7 +194,7 @@ export default defineComponent({
     function initMediaPlay(){
       const id = state.playType === "Audio" ? "#audioMediaSrc" : "#videoMediaSrc";
       state._plrl = new Plyr(id, {
-        controls: ["progress"],
+        controls: ["play", "progress", "current-time", "duration"],
         fullscreen: {
           enabled: false,
           fallback: false
@@ -209,9 +213,9 @@ export default defineComponent({
           pauseVisualDraw()
         });
       }
-      player.on('loadedmetadata', () => {
-        player.currentTime = playProgressData.playProgress
-      });
+      // player.on('loadedmetadata', () => {
+      //   player.currentTime = playProgressData.playProgress
+      // });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
       })
@@ -233,6 +237,9 @@ export default defineComponent({
       });
       // 处理按压事件
       const handleStart = () => {
+        if(isLandscapeScreen.value){
+          return
+        }
         plyrState.duration = player.duration
         plyrState.mediaTimeShow = true
       };
@@ -251,7 +258,12 @@ export default defineComponent({
       progressDom.addEventListener('touchend', handleEnd);
     }
     //点击改变播放状态
-    function handlerClickPlay(){
+    function handlerClickPlay(event?:MouseEvent){
+      // 原生 播放暂停按钮 点击的时候 不触发
+      // @ts-ignore
+      if(event?.target?.matches('button.plyr__control')){
+        return
+      }
       if (state._plrl.playing) {
         state._plrl.pause();
       } else {
@@ -377,23 +389,48 @@ export default defineComponent({
         pauseVisualDraw
       }
     }
+    function handlerBack(event:any){
+      event.stopPropagation()
+      verticalScreen()
+    }
+    function landscapeScreen(){
+      postMessage({
+        api: "setRequestedOrientation",
+        content: {
+          orientation: 0,
+        },
+      });
+      isLandscapeScreen.value = true
+    }
+    function verticalScreen(){
+      postMessage({
+        api: "setRequestedOrientation",
+        content: {
+          orientation: 1,
+        },
+      });
+      isLandscapeScreen.value = false
+    }
     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),
-          speedRate:encodeURIComponent(staffState.speedRate),
-          musicRenderType:encodeURIComponent(staffState.musicRenderType),
-          partIndex:encodeURIComponent(staffState.partIndex),
-        }
-      })
+      if(!isLandscapeScreen.value){
+        landscapeScreen()
+      }
+      // 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),
+      //     speedRate:encodeURIComponent(staffState.speedRate),
+      //     musicRenderType:encodeURIComponent(staffState.musicRenderType),
+      //     partIndex:encodeURIComponent(staffState.partIndex),
+      //   }
+      // })
     }
     // 初始化五线谱
     function initStaff(){
@@ -406,11 +443,11 @@ export default defineComponent({
           staffState.isShow = true
           staffState.height = height + "px"
           // 如果是播放中自动开始播放  不是播放 自动跳转到当前位置
-          if(playProgressData.playState){
-            handlerClickPlay()
-          }else{
-            updateProgressStaff(state._plrl.currentTime)
-          }
+          // if(playProgressData.playState){
+          //   handlerClickPlay()
+          // }else{
+          //   updateProgressStaff(state._plrl.currentTime)
+          // }
         }
       });
     }
@@ -486,7 +523,7 @@ export default defineComponent({
             confirmButtonColor:
               'linear-gradient(73deg, #5BECFF 0%, #259CFE 100%)'
           }).then(() => {
-            if (browser().isApp) {
+            if (isApp) {
               postMessage({
                 api: 'goBack'
               });
@@ -519,23 +556,24 @@ export default defineComponent({
       } catch {
         //
       }
-      requestAnimationFrame(()=>{
-        mStickyBottom.value?.onChnageHeight()
-        mStickyBottom.value?.onChnageHeight()
-      })
+      // 横竖屏之后重新计算位置
+      // requestAnimationFrame(()=>{
+      //   mStickyUpward.value?.onChnageHeight()
+      //   mStickyBottom.value?.onChnageHeight()
+      // })
     });
 
     onUnmounted(() => {
       cleanScrollEvent()
       state._plrl?.destroy()
     });
-    onBeforeRouteLeave((to, from, next)=>{
-      if(to.path !== "/playCreation"){
-        playProgressData.playProgress = 0
-        playProgressData.playState = false
-      }
-      next()
-    })
+    // onBeforeRouteLeave((to, from, next)=>{
+    //   if(to.path !== "/playCreation"){
+    //     playProgressData.playProgress = 0
+    //     playProgressData.playState = false
+    //   }
+    //   next()
+    // })
     return () => (
       <div
         style={
@@ -545,7 +583,7 @@ export default defineComponent({
         }
         class={[
           styles.creation,
-          browser().isTablet && styles.creationTablet,
+          isTablet && styles.creationTablet,
           isScreenScroll.value && styles.isScreenScroll
         ]}>
         <div class={styles.creationBg}></div>
@@ -567,8 +605,23 @@ export default defineComponent({
         <div class={styles.singer}>
           演奏：{state.musicDetail?.username}
         </div>
-        <Sticky offsetTop={state.heightV - 1 + "px"}>
-          <div class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow]} id="playMediaSection" onClick={handlerClickPlay}>
+        <Sticky zIndex={1000} offsetTop={state.heightV - 1 + "px"}>
+          <div class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow, isLandscapeScreen.value&&styles.isLandscapeScreen]} id="playMediaSection" onClick={handlerClickPlay}>
+            {
+              isLandscapeScreen.value &&
+                <div class={styles.backBox}>
+                  <img class={styles.backImg} src={backImg} onClick={handlerBack}/>
+                  <div class={styles.musicDetail}>
+                    <div class={styles.musicSheetName}>
+                        <NoticeBar
+                            text={state.musicDetail?.musicSheetName}
+                            background="none"
+                        />
+                    </div>
+                    <div class={styles.username}>演奏：{state.musicDetail?.username}</div>
+                  </div>
+                </div>
+            }
             {
               state.playType === 'Audio' &&
               <div class={styles.audioBox}>
@@ -594,8 +647,11 @@ export default defineComponent({
                 class={styles.videoBox}
                 src={state.musicDetail?.videoUrl}
                 data-poster={ state.musicDetail?.videoImg || videobg}
+                poster={ state.musicDetail?.videoImg || videobg}
                 preload="metadata"
                 playsinline
+                webkit-playsinline
+                x5-playsinline
               />
             }
             <div class={[styles.playLarge, !plyrState.mediaTimeShow && plyrState.playIngShow && styles.playIngShow]}></div>