等待动画

public/osmd/index.html

@@ -32,8 +32,16 @@
         osmd.setOptions({
             backend: "svg",
             drawTitle: false,
+            drawPartNames: true,
             // drawingParameters: "compacttight" // don't display title, composer etc., smaller margins
         });
+        function render(){
+            osmd.render();
+            window.parent.postMessage({
+                api: 'musicStaffRender',
+                loading: false
+            }, '*');
+        }
 
         function renderXml(xmlUrl, partIndex) {
             osmd
@@ -45,7 +53,7 @@
                             osmd.Sheet.Instruments[i].Visible = i === partIndex;
                         }
                         osmd.zoom = .5
-                        osmd.render();
+                        render();
                     }
                 );
         }
@@ -54,7 +62,8 @@
                 // console.log(osmd.Sheet.Instruments[i].Name);
                 osmd.Sheet.Instruments[i].Visible = i === partIndex;
             }
-            osmd.render();
+            render();
+            
         }
     </script>
 </body>

src/views/music/music-detail/index.tsx

@@ -3,6 +3,7 @@ import {
   defineComponent,
   nextTick,
   onMounted,
+  onUnmounted,
   reactive,
   ref,
   watch
@@ -174,7 +175,11 @@ export default defineComponent({
       } catch (error) {
         isError.value = true
       }
-      loading.value = false
+      if (musicDetail.value?.musicSheetType !== 'CONCERT') {
+        loading.value = false
+      }
+
+      
     }
     const base64ToBlob = data => {
       const arr = data.split(','),
@@ -303,6 +308,13 @@ export default defineComponent({
         }
       })
     }
+    const showLoading = (e: any) => {
+      console.log(e)
+      if(e.data?.api === 'musicStaffRender'){
+        loading.value = e.data.loading
+
+      }
+    }
     onMounted(async () => {
       await FetchList()
       const { height } = useRect(headers as any)
@@ -313,6 +325,11 @@ export default defineComponent({
       if (audioFileUrl.value) {
         initAudio()
       }
+
+      window.addEventListener('message', showLoading)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('message', showLoading)
     })
 
     const toggleFavorite = async () => {
@@ -500,6 +517,7 @@ export default defineComponent({
       open: false,
       iframeSrc: '',
       musicXml: '',
+      instrumentName: '',
       iframeRef: null as any,
       partIndex: 0,
       partList: [] as any[]
@@ -509,6 +527,7 @@ export default defineComponent({
       staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
       staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
       staffData.partList = musicDetail.value?.background || []
+      staffData.instrumentName = getInstrumentName(staffData.partList[staffData.partIndex]?.track)
       
     }
     const musicIframeLoad = () => {
@@ -521,6 +540,7 @@ export default defineComponent({
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml){
         iframeRef.contentWindow.resetRender(staffData.partIndex)
+        staffData.instrumentName = getInstrumentName(staffData.partList[staffData.partIndex]?.track)
       }
     }
     const partColumns = computed(() => {
@@ -666,27 +686,41 @@ export default defineComponent({
             />
             <div class={styles.musicContent}>
               <p class={styles.musicTitle}>
-                {musicDetail.value?.musicSheetName}
+                {musicDetail.value?.musicSheetName + (staffData.instrumentName ? `(${staffData.instrumentName})` : '')}
               </p>
               {musicDetail.value?.musicSheetType === 'CONCERT' ? (
-                <iframe id="staffIframeRef" src={staffData.iframeSrc} onLoad={musicIframeLoad}></iframe>
-              ) : null}
-              {showImg.length > 0 ? (
-                <img src={showImg[0]} alt="" class={styles.musicImg} />
-              ) : loading.value ? (
                 <>
-                  <Vue3Lottie
-                    animationData={AstronautJSON}
-                    class={styles.finch}
-                  ></Vue3Lottie>
-                  <p class={styles.finchLoad}>加载中...</p>
+                  {loading.value && (
+                    <>
+                      <Vue3Lottie
+                        animationData={AstronautJSON}
+                        class={styles.finch}
+                      ></Vue3Lottie>
+                      <p class={styles.finchLoad}>加载中...</p>
+                    </>
+                  )}
+                  <iframe id="staffIframeRef" src={staffData.iframeSrc} onLoad={musicIframeLoad}></iframe>
+                  
                 </>
-              ) : (
-                <div class={styles.empty}>
-                  <Image src={emtpy} class={styles.emptyImg} />
-                  <p class={styles.emptyTip}>暂无乐谱预览图</p>
-                </div>
-              )}
+              ) : <>
+                {showImg.length > 0 ? (
+                  <img src={showImg[0]} alt="" class={styles.musicImg} />
+                ) : loading.value ? (
+                  <>
+                    <Vue3Lottie
+                      animationData={AstronautJSON}
+                      class={styles.finch}
+                    ></Vue3Lottie>
+                    <p class={styles.finchLoad}>加载中...</p>
+                  </>
+                ) : (
+                  <div class={styles.empty}>
+                    <Image src={emtpy} class={styles.emptyImg} />
+                    <p class={styles.emptyTip}>暂无乐谱预览图</p>
+                  </div>
+                )}
+              </>}
+              
 
               <div class={styles.videoOperation}>
                 {audioFileUrl.value && (
@@ -1015,9 +1049,11 @@ export default defineComponent({
           <Popup teleport="body"  position="bottom" round v-model:show={staffData.open}>
               <Picker columns={partColumns.value} 
                 onConfirm={(value) => {
-                  staffData.partIndex = value.value
-                  resetRender()
                   staffData.open = false
+                  staffData.partIndex = value.value
+                  nextTick(() => {
+                    resetRender()
+                  })
                 }} 
                 onCancel={() => staffData.open = false}
                />