Merge branch '2023-7-31_合奏'

src/pages/detail/state.ts

@@ -48,6 +48,7 @@ const state = reactive({
   isAppPlay: false, // 是否是app播放
   partListNames: [] as string[], // 当前曲谱中所有声部名字
   partIndex: 0, // 当前显示声部索引
+  partName: '', //当前显示声部名字
   midiPlayIniting: false, // midi播放器是否初始化中
   isSpecialBookCategory: false, // 是否是特殊乐谱类型
   // 声部对应code

src/subpages/colexiu/buttons/index.tsx

@@ -26,10 +26,12 @@ import iconFollowEndBtn from '../popups/follow/icons/icon-followEndBtn.png'
 import iconEvaluatingEnd from './icons/icon-evaluatingEnd.png'
 import iconCameraOff from './icons/icon-camera-off.png'
 import iconCameraOn from './icons/icon-camera-on.png'
+import iconToggle from './icons/icon_toggle.png'
 import store from 'store'
 import styles from './index.module.less'
 import { sendBackRecordTotalTime } from '../App'
 import { unitTestData } from '../unitTest'
+import { toggleMusicSheet } from '../plugins/toggleMusicSheet'
 export const confirmShow: Ref<boolean> = ref(false)
 
 /**评测开始按钮状态 */
@@ -201,7 +203,7 @@ export default defineComponent({
                     evaluatingRef.value?.playerStop?.()
                   }}
                 >
-                  <img style={{width: '100%', display: 'block'}} src={iconEvaluatingEnd} />
+                  <img style={{ width: '100%', display: 'block' }} src={iconEvaluatingEnd} />
                 </Button>
               )}
             </Transition>
@@ -213,7 +215,7 @@ export default defineComponent({
                     followRef.value?.handleEnd?.()
                   }}
                 >
-                  <img style={{width: '100%', display: 'block'}} src={iconFollowEndBtn} />
+                  <img style={{ width: '100%', display: 'block' }} src={iconFollowEndBtn} />
                 </Button>
               )}
             </Transition>
@@ -254,6 +256,22 @@ export default defineComponent({
                 <span>模式</span>
               </Button>
             )}
+            {detailState.initRendered && !search.lessonTrainingId && !search.questionId &&  detailState.activeDetail?.musicSheetType == 'CONCERT' && (
+              <Button
+                class={[styles.button, styles.hasText]}
+                onClick={() => {
+                  toggleMusicSheet.toggle(true)
+                }}
+                disabled={
+                  (runtime.evaluatingStatus && !startButtonShow.value) ||
+                  runtime.playState === 'play' ||
+                  followRef.value?.data.start
+                }
+              >
+                <img src={iconToggle} />
+                <span>声轨</span>
+              </Button>
+            )}
             {modelType.value === 'evaluation' && (
               <>
                 <Popover
@@ -264,9 +282,11 @@ export default defineComponent({
                   show-arrow={false}
                   vSlots={{
                     reference: () => (
-                      <div onClick={(e: Event) => {
-                        if (!startButtonShow.value) e.stopPropagation()
-                      }}>
+                      <div
+                        onClick={(e: Event) => {
+                          if (!startButtonShow.value) e.stopPropagation()
+                        }}
+                      >
                         <Button class={[styles.button, styles.hasText]} disabled={!startButtonShow.value}>
                           <img src={SettingState.sett.camera ? iconCameraOn : iconCameraOff} />
                           <span>摄像头</span>
@@ -288,7 +308,7 @@ export default defineComponent({
                     {SettingState.sett.camera && (
                       <Cell class="cameraOpacity" center title="透明度">
                         <Slider
-                          style={{width: '90%'}}
+                          style={{ width: '90%' }}
                           min={0}
                           max={100}
                           v-model:modelValue={SettingState.sett.opacity}
@@ -446,7 +466,11 @@ export default defineComponent({
                   onClick={() => {
                     settingPopup.value?.onShow()
                   }}
-                  disabled={(runtime.evaluatingStatus && !startButtonShow.value) || runtime.playState === 'play' || followRef.value?.data.start }
+                  disabled={
+                    (runtime.evaluatingStatus && !startButtonShow.value) ||
+                    runtime.playState === 'play' ||
+                    followRef.value?.data.start
+                  }
                 >
                   <ButtonIcon name="setting" />
                   <span>设置</span>

src/subpages/colexiu/index.module.less

@@ -13,14 +13,17 @@
   padding: 7px 0 0 0;
   margin: auto 0px auto auto;
 }
+:global{
+  .fingering{
+    background-color: #fff;
+  }
+}
 :global(.openCamera) {
   opacity: 0.7;
 }
 :global(.eyeProtection) {
   :global(.fingering) {
-    &::before {
-      background: var(--eye-background-color);
-    }
+    background: var(--eye-background-color);
   }
   .musicSheet {
     background: var(--eye-background-color) !important;
@@ -61,6 +64,7 @@
     width: 0;
   }
 }
+
 .skeleton {
   :global{
     .van-skeleton__content{
@@ -111,4 +115,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
+.partName{
+  text-align: center;
+  font-size: 14Px;
+  margin: auto 0px auto auto;
 }

src/subpages/colexiu/index.tsx

@@ -336,6 +336,7 @@ export default defineComponent({
                   {detail.value.musicSheetName}
                 </div>
               )}
+              {detailState.partName ? <div style={{ width: !renderLoading.value ? musicSheetStyle.width : '' }} class={styles.partName}>{detailState.partName}</div> : null}
               <Skeleton class={styles.skeleton} rowWidth="80%" title loading={detailStatus.value === 'loading'} />
               <Skeleton class={styles.skeleton} row={6} loading={renderLoading.value} />
               {score.value && fingeringInited && (

src/subpages/colexiu/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -11,7 +11,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 8px 10px;
     position: relative;
     font-size: 14Px;
     &::before {

src/subpages/colexiu/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
     partIndex: {
       type: Number,
       default: 0,
-    }
+    },
   },
   emits: ['close'],
   setup(props, { emit }) {
@@ -32,9 +32,8 @@ export default defineComponent({
           defaultIndex={partIndex.value}
           showToolbar={false}
           columns={columns.value}
-		  visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
+          visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
           onChange={(row) => {
-			console.log(row)
             selectIndex.value = row.value
           }}
         />

src/subpages/colexiu/plugins/toggleMusicSheet/index.tsx

@@ -8,13 +8,18 @@ import qs from 'query-string'
 import { useOriginSearch } from '../../uses'
 import { getInstrumentName } from '../../helpers/instruments'
 
+export const toggleMusicSheet = reactive({
+  show: false,
+  toggle: (type = true) => {
+    toggleMusicSheet.show = type
+  },
+})
+
 export default defineComponent({
   name: 'ToggleMusicSheet',
   setup() {
     const search = useOriginSearch()
-    const musicSheet = reactive({
-      show: false,
-    })
+
     const partListNames = computed(() => {
       const partList = state.activeDetail?.background || []
       return partList.map((item: any, index: number) => {
@@ -27,47 +32,46 @@ export default defineComponent({
     })
 
     const switchMusic = (index: number) => {
-        // 暂停播放
-        RuntimeUtils.pause()
-        // 销毁播放器
-        postMessage({
-          api: 'cloudDestroy'
-        })
-        postMessage({
-          api: 'cloudLoading',
-          content: {
-            show: true,
-            type: 'fullscreen',
-          },
+      // 暂停播放
+      RuntimeUtils.pause()
+      // 销毁播放器
+      postMessage({
+        api: 'cloudDestroy',
+      })
+      postMessage({
+        api: 'cloudLoading',
+        content: {
+          show: true,
+          type: 'fullscreen',
+        },
+      })
+      const _url =
+        location.origin +
+        location.pathname +
+        '?' +
+        qs.stringify({
+          ...search,
+          behaviorId: sessionStorage.getItem('behaviorId') || '',
+          _t: new Date().valueOf(),
+          'part-index': index,
         })
-        const _url =
-          location.origin +
-          location.pathname +
-          '?' +
-          qs.stringify({
-            ...search,
-            behaviorId: sessionStorage.getItem('behaviorId') || '',
-            _t: new Date().valueOf(),
-            "part-index": index,
-          })
-        console.log( _url)
-        location.href = _url
-      }
+      console.log(_url)
+      location.href = _url
+    }
 
     return () => (
-      <>
-        <div style={{display: runtime.playState == 'play' ? 'none' : ''}} class={styles.iconToggle} onClick={() => (musicSheet.show = true)}>
-          <Icon size="20px" color='#fff' name="exchange" />
-        </div>
-        <Popup class={styles.popup} v-model:show={musicSheet.show}>
-          <ChoosePartName partIndex={state.partIndex || 0} partListNames={partListNames.value} onClose={(value) => {
-            musicSheet.show = false
+      <Popup class={styles.popup} v-model:show={toggleMusicSheet.show}>
+        <ChoosePartName
+          partIndex={state.partIndex || 0}
+          partListNames={partListNames.value}
+          onClose={(value) => {
+            toggleMusicSheet.show = false
             if (value !== undefined) {
-                switchMusic(value)
+              switchMusic(value)
             }
-          }} />
-        </Popup>
-      </>
+          }}
+        />
+      </Popup>
     )
   },
 })

src/subpages/colexiu/uses/use-app.ts

@@ -11,11 +11,12 @@ import audiosInstance from '/src/helpers/multiple-audio'
 import { formatXML, onlyVisible, getCustomInfo } from '/src/pages/detail/helpers'
 import { MusicSheelDetail, ShaeetStatusType } from '../index.d'
 import { browser, getRequestHostname } from '/src/helpers/utils'
-import formatId, { getSubjectIdCode } from '../fingering/format-id'
+import formatId, { formatdata, getSubjectIdCode } from '../fingering/format-id'
 import { evaluatStopPlay } from '../buttons/evaluating'
 import state from '/src/pages/detail/state'
 import { getGradualLengthByXml } from '/src/pages/detail/calcSpeed'
 import { musicInfo } from '../state'
+import { getInstrumentName } from '../helpers/instruments'
 
 const search = useOriginSearch()
 const skpList = ['Ukulele']
@@ -43,6 +44,7 @@ export const useXml = async (url: string, detail: MusicSheelDetail) => {
         title: detail.musicSheetName,
       })
       score.value = onlyVisible(score.value, partIndex)
+      state.partIndex = partIndex
     }
     state.gradual = getGradualLengthByXml(xml)
   } catch (error) {}
@@ -184,6 +186,17 @@ export const useDetail = (id: number | string): [Ref<ShaeetStatusType>, Ref<Musi
         }
       } catch (error) {}
       state.gradualTimes = extConfigJson.gradualTimes as GradualTimes
+
+      // 合奏设置
+      if (res?.data?.musicSheetType == 'CONCERT') {
+        const backgrounds = res?.data?.background || [];
+        const partIndex = Number(search['part-index']) || 0
+        const track = backgrounds[partIndex]?.track
+        const instrumentName = getInstrumentName(track)
+        detailState.partName =  track + (instrumentName ? `(${instrumentName})` : '')
+        const _track = Object.keys(formatdata).filter((key) => key.includes(track) || track.includes(key))[0]
+        data.value.code = _track
+      }
     })
     .catch(() => (status.value = 'error'))
 

src/subpages/colexiu/uses/use-fingering.ts

@@ -48,6 +48,7 @@ export const useFingering = async (code = '') => {
   const activeType = ref({})
   const detail = ref({})
   const res = await fingeringViewInfo(typeById[formatId(code)])
+  // console.log("🚀 ~ code:", typeById[formatId(code)] , formatId(code))
   activeType.value = res?.activeType || {}
   detail.value = res?.detail || {}
   return [fingeringStatus, fingeringWidth, activeType, detail]