Merge branch 'feature-wxl-newVersion' into ktyq-test-new

osmd-extended

@@ -1 +1 @@
-Subproject commit bab1ca04065946e20f10fa1aacdb0c25b533a6f2
+Subproject commit e96ef0a67e70a21b7ea9a2a5a7925f8a9360a396

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -16,6 +16,8 @@ const endGuide = (guideInfo: any) => {
  * 按钮状态
  */
 type ButtonStatus = {
+  /** 是否显示播放按钮 */
+  playBtnStatus?: Boolean;
   /** 声部状态 */
   subjectStatus?: Boolean;
   /** 练习模式 */
@@ -28,6 +30,8 @@ type ButtonStatus = {
   titleType?: String;
   /** 原声 true 范唱 false */
   originPlayType?: Boolean;
+  /** 是否显示原音 */
+  originBtnStatus?: Boolean;
 };
 
 /** 练习模式 */
@@ -54,6 +58,15 @@ export const PractiseDriver = defineComponent({
 
     const driverOptions = (): Config => {
       let length = 10;
+
+      if (!props.statusAll.playBtnStatus) {
+        length -= 1;
+      }
+
+      if (!props.statusAll.originBtnStatus) {
+        length -= 1;
+      }
+
       // 显示指法
       if (!state.setting.displayFingering) {
         length -= 1;
@@ -96,25 +109,27 @@ export const PractiseDriver = defineComponent({
         onHighlighted: () => {
           driverNextStatus.value = false;
         },
-        steps: [
-          {
-            element: ".driver-1",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass1",
-              align: "end",
-              side: "top",
-              nextBtnText: `下一步 (1/${length})`,
-              showButtons: ["next"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                options.config.stageRadius = 1000;
-                options.config.stagePadding = 0;
-              },
+        steps: [] as DriveStep[],
+      };
+
+      if (props.statusAll.playBtnStatus) {
+        options.steps?.push({
+          element: ".driver-1",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass1",
+            align: "end",
+            side: "top",
+            nextBtnText: `下一步 (1/${length})`,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              options.config.stageRadius = 1000;
+              options.config.stagePadding = 0;
             },
           },
-        ] as DriveStep[],
-      };
+        });
+      }
 
       if (props.statusAll.playType) {
         options.steps?.push({
@@ -134,8 +149,8 @@ export const PractiseDriver = defineComponent({
         });
       }
 
-      options.steps?.push(
-        {
+      if (props.statusAll.originBtnStatus) {
+        options.steps?.push({
           element: ".driver-3",
           popover: {
             title: "",
@@ -149,7 +164,9 @@ export const PractiseDriver = defineComponent({
               driverInitialPosition(popover, options);
             },
           },
-        },
+        });
+      }
+      options.steps?.push(
         {
           element: ".driver-4",
           popover: {
@@ -158,7 +175,7 @@ export const PractiseDriver = defineComponent({
             popoverClass: "popoverClass popoverClass4",
             align: "start",
             side: "top",
-            nextBtnText: `下一步 (${options.steps.length + 2}/${length})`,
+            nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -173,7 +190,7 @@ export const PractiseDriver = defineComponent({
             popoverClass: "popoverClass popoverClass5",
             align: "start",
             side: "top",
-            nextBtnText: `下一步 (${options.steps.length + 3}/${length})`,
+            nextBtnText: `下一步 (${options.steps.length + 2}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);

src/page-instrument/header-top/index.module.less

@@ -450,6 +450,6 @@
     opacity: 0;
 }
 
-.socketErrorStatus{
+.socketErrorStatus {
     top: 20vh;
 }

src/page-instrument/header-top/index.tsx

@@ -359,7 +359,7 @@ export default defineComponent({
     /** 原声按钮 */
     const originBtn = computed(() => {
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 选择模式,跟练模式 不显示
       if (headTopData.modeType !== "show" || state.modeType === "follow") return { display: false, disabled: false };
       // 评测开始 禁用
@@ -416,9 +416,9 @@ export default defineComponent({
     });
     /** 模式切换按钮 */
     const toggleBtn = computed(() => {
-      if(state.isCombineRender) return { display: false, disabled: false };
+      if (state.isCombineRender) return { display: false, disabled: false };
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 不是演奏模式 影藏
       if (state.playType !== "play") return { display: false, disabled: false };
       // 选择模式, url设置模式 不显示
@@ -435,7 +435,7 @@ export default defineComponent({
     /** 播放按钮 */
     const playBtn = computed(() => {
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 选择模式 不显示
       if (headTopData.modeType !== "show") return { display: false, disabled: false };
       // 评测模式 不显示,跟练模式 不显示
@@ -451,7 +451,7 @@ export default defineComponent({
     /** 重播按钮 */
     resetBtn = computed(() => {
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 选择模式 不显示
       if (headTopData.modeType !== "show") return { display: false, disabled: false };
       // 评测模式 不显示,跟练模式 不显示
@@ -587,16 +587,20 @@ export default defineComponent({
     onUnmounted(() => {
       window.removeEventListener("message", changePlay);
     });
-    const noticeBarWidth = ref<number>()
-    watch(()=>smoothAnimationState.isShow.value, ()=>{
-      // NoticeBar能不能滚动
-      if((smoothAnimationState.isShow.value || state.isCombineRender) && isMusicList.value){
-        nextTick(()=>{
-          const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined
-          noticeBarWidth.value = widthCon
-        })
-      }
-    },{ immediate: true })
+    const noticeBarWidth = ref<number>();
+    watch(
+      () => smoothAnimationState.isShow.value,
+      () => {
+        // NoticeBar能不能滚动
+        if ((smoothAnimationState.isShow.value || state.isCombineRender) && isMusicList.value) {
+          nextTick(() => {
+            const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined;
+            noticeBarWidth.value = widthCon;
+          });
+        }
+      },
+      { immediate: true }
+    );
     // 设置改变触发
     watch(state.setting, () => {
       console.log(state.setting, "state.setting");
@@ -647,37 +651,40 @@ export default defineComponent({
           }}
         >
           {/* 返回和标题 */}
-          {
-            !(state.playState == "play" || followData.start || evaluatingData.startBegin) &&
-              <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
-                <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
-                {
-                  smoothAnimationState.isShow.value || state.isCombineRender ?
-                    <div 
-                      style={
-                        noticeBarWidth.value ? {
-                          "--noticeBarWidth":noticeBarWidth.value + "px"
-                        } : {}
-                      }
-                      class={[styles.title, "driver-8"]} 
-                      onClick={()=>{
-                        isMusicList.value && (musicListShow.value = true)
-                      }}>
-                        {
-                          isMusicList.value && <div class={styles.symbolNote}></div>
+          {!(state.playState == "play" || followData.start || evaluatingData.startBegin) && (
+            <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
+              <img src={iconBack} class={["headTopBackBtn", styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
+              {smoothAnimationState.isShow.value || state.isCombineRender ? (
+                <div
+                  style={
+                    noticeBarWidth.value
+                      ? {
+                          "--noticeBarWidth": noticeBarWidth.value + "px",
                         }
-                        <NoticeBar
-                          text={state.examSongName}
-                          background="none"
-                        />
-                    </div> :
-                    isMusicList.value &&
-                    <img src={listImg} class={[styles.img, styles.listImg, "driver-8"]} onClick={()=>{
-                      musicListShow.value = true
-                    }} />
-                }
-              </div>
-          }          
+                      : {}
+                  }
+                  class={[styles.title, "headeTopTitleBtn"]}
+                  onClick={() => {
+                    isMusicList.value && (musicListShow.value = true);
+                  }}
+                >
+                  {isMusicList.value && <div class={[styles.symbolNote, "driver-8"]}></div>}
+                  <NoticeBar text={state.examSongName} background="none" />
+                </div>
+              ) : (
+                isMusicList.value && (
+                  <img
+                    src={listImg}
+                    class={[styles.img, styles.listImg, "driver-8"]}
+                    onClick={() => {
+                      musicListShow.value = true;
+                    }}
+                  />
+                )
+              )}
+            </div>
+          )}
+
           {/* 模式切换 */}
           {
             <div
@@ -696,13 +703,12 @@ export default defineComponent({
           }
 
           {/* 模式提醒 */}
-          {
-            state.modeType === "practise" &&
+          {state.modeType === "practise" && (
             <div class={[styles.modeWarn, "practiseModeWarn", state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.modeWarnRight : ""]}>
-                <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
-                <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
-              </div>
-          }
+              <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
+              <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
+            </div>
+          )}
           {/* 功能按钮 */}
           <div
             class={[styles.headRight]}
@@ -937,10 +943,12 @@ export default defineComponent({
         {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
           <PractiseDriver
             statusAll={{
+              playBtnStatus: playBtn.value.display,
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
               modelTypeStatus: toggleBtn.value.display,
               playType: playTypeBtn.value.display,
               originPlayType: state.playType === "play" ? true : false,
+              originBtnStatus: originBtn.value.display,
               backTitle: !(state.playState == "play" || followData.start || evaluatingData.startBegin),
               titleType: smoothAnimationState.isShow.value ? "TEXT" : isMusicList.value ? "IMG" : "NONE",
             }}

src/page-instrument/view-detail/index.module.less

@@ -87,10 +87,12 @@
         transition: padding-bottom .2s;
         overflow: hidden;
     }
+
     .multiContainer {
         top: 0;
         height: calc(100vh);
     }
+
     .pcContainer {
         // height: calc(100vh - var(--header-height) - var(--pc-header-height));
     }
@@ -279,6 +281,7 @@
     left: 0;
     top: 0;
 }
+
 .bg2Right {
     width: 52px;
     height: 125px;

src/page-instrument/view-detail/index.tsx

@@ -121,7 +121,7 @@ export default defineComponent({
       const settting = store.get("musicscoresetting");
       if (settting) {
         //state.setting = settting;
-        Object.assign(state.setting, settting)
+        Object.assign(state.setting, settting);
         //state.setting.beatVolume = state.setting.beatVolume || 50
         state.setting.beatVolume = 50;
         if (state.setting.camera) {
@@ -168,8 +168,8 @@ export default defineComponent({
       detailData.isLoading = false;
       // 如果后台设置了不显示指法，关闭指法开关   如果默认进来是演奏模式 不显示指法开关
       if (!state.isShowFingering || state.playType === "sing") {
-        state.setting.displayFingering = false
-      }      
+        state.setting.displayFingering = false;
+      }
       // api_setEventTracking();
     });
 
@@ -271,8 +271,8 @@ export default defineComponent({
       handleInitTick(osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4);
       // }
       // api_cloudLoading();
-      state.playBtnDirection = query.imagePos === 'left' ? 'left' : 'right';
-      state.isAttendClass = (query.imagePos === 'left' || query.imagePos === 'right') ? true : false;
+      state.playBtnDirection = query.imagePos === "left" ? "left" : "right";
+      state.isAttendClass = query.imagePos === "left" || query.imagePos === "right" ? true : false;
       // if (state.fingeringInfo.direction === "vertical" && state.setting.displayFingering) {
       //   state.musicScoreBtnDirection = state.playBtnDirection === 'right' ? 'left' : 'right';
       // } else {
@@ -472,17 +472,13 @@ export default defineComponent({
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}
       >
-        <img 
-          style={{opacity: state.setting.camera && state.modeType === 'evaluating' ? state.setting.cameraOpacity / 100 : 1}} 
-          class={styles.pageBg} 
-          src={state.modeType === 'practise' ? bgJson[1] : state.modeType === 'evaluating' ? bgJson[2] : state.modeType === 'follow' ? bgJson[3] : ''} 
-        />
-        {
-          state.modeType === 'evaluating' ? <>
+        <img style={{ opacity: state.setting.camera && state.modeType === "evaluating" ? state.setting.cameraOpacity / 100 : 1 }} class={styles.pageBg} src={state.modeType === "practise" ? bgJson[1] : state.modeType === "evaluating" ? bgJson[2] : state.modeType === "follow" ? bgJson[3] : ""} />
+        {state.modeType === "evaluating" ? (
+          <>
             <img src={bg2Left} class={styles.bg2Left} />
             <img src={bg2Right} class={styles.bg2Right} />
-          </> : null
-        }
+          </>
+        ) : null}
         {/* 骨架屏 */}
         {/* <Transition name="van-fade">
           {detailData.skeletonLoading && (