Browse Source

feat: 跟练添加自动结束和循环跟练

TIANYONG 6 months ago
parent
commit
7339504196

+ 33 - 0
src/subpages/colexiu/popups/follow/index.tsx

@@ -12,6 +12,7 @@ import detailState from '/src/pages/detail/state'
 import iconFollwBtn from './icons/icon-follwBtn.png'
 import { unitTestData } from '/src/subpages/colexiu/unitTest/index'
 import { formatPitch } from '/src/subpages/colexiu/buttons/evaluating'
+import SettingState from '/src/pages/detail/setting-state'
 
 // 显示或隐藏播放按钮
 const togglePlayer = (show: boolean = false) => {
@@ -106,6 +107,7 @@ const getDefaultIndex = () => {
 
 // 开始
 const handleStart = () => {
+  checking = false;
   onClear()
   data.start = true
   openToggleRecord(true)
@@ -126,6 +128,36 @@ const handleEnd = () => {
   getNoteIndex()
 }
 
+/**
+ * 2024.7.9 新增自动结束跟练模式功能
+ * 如果跟练模式,唱完了最后一个有频率的音符,需要自动结束掉跟练模式
+ * 需要判断当前音符的后面是否都是休止音符(休止音符的频率都是-1),或者是否是最后一个音符了
+ */
+const autoEndFollow = () => {
+	if (data.index >= detailState.times.length) {
+    // 如果开了自动循环需要重新开始跟练
+    if (SettingState.sett.loop) {
+      handleStart()
+    } else {
+      handleEnd()
+    }
+		return
+	}
+	let nextIndex = data.index + 1;
+	const rightTimes = detailState.times.slice(data.index,detailState.times.length)
+	// 后面的音符是否都是休止音符
+	const isAllRest = !rightTimes.some((item: any) => item.frequency > 1);
+	if (isAllRest && detailState.times[data.index].frequency < 1) {
+    // 如果开了自动循环需要重新开始跟练
+    if (SettingState.sett.loop) {
+      handleStart()
+    } else {
+      handleEnd()
+    }
+		return
+	}
+}
+
 // 下一个
 const next = () => {
   if (state.osmd.product) {
@@ -134,6 +166,7 @@ const next = () => {
     state.osmd.cursor.next()
   }
   refreshView()
+  autoEndFollow()
 }
 
 // 获取当前音符

+ 6 - 1
src/subpages/colexiu/popups/setting/index.module.less

@@ -83,7 +83,13 @@
   border-radius: 5px;
 }
 
+.columnBox {
+  display: flex;
+  flex-direction: column;
+}
+
 .groupBox {
+  flex: 1;
   padding: 4px 12px;
   overflow: hidden;
   overflow-y: auto;
@@ -110,7 +116,6 @@
   margin: 4px auto;
   margin-bottom: 8px;
   box-sizing: border-box;
-  position: absolute;
   bottom: 0;
   display: flex;
   width: 100%;

+ 3 - 3
src/subpages/colexiu/popups/setting/index.tsx

@@ -17,12 +17,12 @@ export default defineComponent({
     return () => (
       <div class={styles.setting}>
         <Tabs active={props.active}>
-          <Tab title="全局设置" name="1">
+          <Tab title="设置" name="1">
             <Seet />
           </Tab>
-          <Tab title="练习设置" name="2">
+          {/* <Tab title="练习设置" name="2">
             <Practise />
-          </Tab>
+          </Tab> */}
           <Tab title="评测设置" name="3">
             <Evaluat />
           </Tab>

+ 17 - 2
src/subpages/colexiu/popups/setting/sett.tsx

@@ -19,6 +19,7 @@ import { promisefiyPostMessage } from '/src/helpers/native-message'
 import Popups from '..'
 import Feedback from '../feedback'
 import { useReload } from '../../uses'
+
 export const suggestPopup: Ref<any> = ref(null)
 export const confirmShow: Ref<boolean> = ref(false)
 
@@ -132,7 +133,7 @@ export default defineComponent({
     return () => {
       return (
         <>
-          <div>
+          <div class={styles.columnBox}>
             <NoticeBar
               class={styles.noticebar}
               left-icon={InfoIcon}
@@ -169,8 +170,22 @@ export default defineComponent({
                   }
                 </>
               }
-
               <Divider />
+              <Cell center border={false} title="循环播放">
+                <Switch v-model={SettingState.sett.loop} {...switchProps}>
+                  off
+                </Switch>
+              </Cell>
+              <Divider />
+              <Cell center border={false} title="显示指法">
+                <Switch v-model={SettingState.sett.fingering} {...switchProps} onChange={val => {
+                      SettingState.sett.fingering = val
+                      runtime.event.emit('settingFingeringChange')
+                    }
+                  }>
+                  off
+                </Switch>
+              </Cell>
               {/* <Cell center border={false} title="乐谱大小">
                 <div style={{ display: 'flex' }}>
                   <RadioGroup