语音矩阵全屏去掉录音

src/components/Adult/preview/VoiceMatrixFullscreen.vue

@@ -6,7 +6,7 @@
       @mouseleave="setBottomShow(false)"
     >
       <div :class="['voicefull-bottom-show', isBottomShow ? '' : 'hidden']">
-        <div class="bottom-left">
+        <!-- <div class="bottom-left">
           <soundrecorddiff
             ref="Soundrecorddiff"
             :bg-index="bgIndex"
@@ -40,7 +40,7 @@
               :cur-time="curTime"
             />
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -50,7 +50,7 @@
         class="matrix"
         :style="{
           'grid-template': `96px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(1.5em, 1fr) / 112px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(124px, 1fr)`,
-          'font-size': `${hzSize}px`,
+          'font-size': `${hzSize}px`
         }"
         @mouseleave="clearSelectCell"
       >
@@ -68,14 +68,14 @@
               "
               v-show="
                 isMobile ||
-                selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i)
+                  selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
-                  : '',
+                  : ''
               ]"
               @click="selectRowOrColumn(i, 'column')"
             />
@@ -93,14 +93,14 @@
               v-if="curQue.voiceMatrix.rowSelection"
               v-show="
                 isMobile ||
-                selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i)
+                  selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : '',
+                  : ''
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -114,7 +114,7 @@
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                 (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : '',
+                  : ''
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -136,7 +136,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -150,7 +150,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : '',
+                    : ''
                 ]"
               />
               <!-- 分词 -->
@@ -171,10 +171,10 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 :style="{
-                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`,
+                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
                 }"
                 @click="matrixCellClick(i, j)"
               >
@@ -182,16 +182,18 @@
                   v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="`${
-                      column.sentence_data.pyPosition === 'top'
-                        ? 'pinyin'
-                        : 'chs'
-                    }-${w}`"
+                    :key="
+                      `${
+                        column.sentence_data.pyPosition === 'top'
+                          ? 'pinyin'
+                          : 'chs'
+                      }-${w}`
+                    "
                     :style="{
                       visibility:
                         column.sentence_data.pyPosition === 'top' && isShowPY
                           ? 'visible'
-                          : 'hidden',
+                          : 'hidden'
                     }"
                     :class="
                       column.sentence_data.pyPosition === 'top'
@@ -208,16 +210,18 @@
                   v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="`${
-                      column.sentence_data.pyPosition === 'top'
-                        ? 'chs'
-                        : 'pinyin'
-                    }-${w}`"
+                    :key="
+                      `${
+                        column.sentence_data.pyPosition === 'top'
+                          ? 'chs'
+                          : 'pinyin'
+                      }-${w}`
+                    "
                     :style="{
                       visibility:
                         column.sentence_data.pyPosition !== 'top' && isShowPY
                           ? 'hidden'
-                          : 'visible',
+                          : 'visible'
                     }"
                     :class="
                       column.sentence_data.pyPosition === 'top'
@@ -249,7 +253,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -283,7 +287,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -340,7 +344,7 @@
               <span
                 :class="[
                   'font-jian-black',
-                  bgIndex === 1 ? 'font-jian-yellow' : '',
+                  bgIndex === 1 ? 'font-jian-yellow' : ''
                 ]"
                 @click="setFontSize('-')"
               />
@@ -351,21 +355,21 @@
                   'font-jian-black',
                   bgIndex === 1
                     ? 'font-jian-yellow-disabled'
-                    : 'font-jian-white-disabled',
+                    : 'font-jian-white-disabled'
                 ]"
               />
             </template>
             <span
               :class="[
                 'font-img-black',
-                bgIndex === 1 ? 'font-img-yellow' : '',
+                bgIndex === 1 ? 'font-img-yellow' : ''
               ]"
             />
             <template v-if="hzSize <= 76">
               <span
                 :class="[
                   'font-jia-black',
-                  bgIndex === 1 ? 'font-jia-yellow' : '',
+                  bgIndex === 1 ? 'font-jia-yellow' : ''
                 ]"
                 @click="setFontSize('+')"
               />
@@ -376,7 +380,7 @@
                   'font-jia-black',
                   bgIndex === 1
                     ? 'font-jia-yellow-disabled'
-                    : 'font-jia-white-disabled',
+                    : 'font-jia-white-disabled'
                 ]"
               />
             </template>
@@ -389,7 +393,7 @@
               :class="[
                 'keyboard-icon',
                 !isKeyboard ? 'disabled' : '',
-                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : '',
+                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : ''
               ]"
             />
           </div>
@@ -418,7 +422,7 @@
               :class="[
                 'repeat-icon',
                 !isRepeat ? 'disabled' : 'auto-icon',
-                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : '',
+                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : ''
               ]"
             />
           </div>
@@ -430,9 +434,7 @@
               :class="[
                 'pinyin-icon',
                 !isShowPY || !isHasPY ? 'disabled' : '',
-                isShowPY && isHasPY && bgIndex === 1
-                  ? 'pinyin-icon-yellow'
-                  : '',
+                isShowPY && isHasPY && bgIndex === 1 ? 'pinyin-icon-yellow' : ''
               ]"
             />
           </div>
@@ -444,7 +446,7 @@
               :class="[
                 'en-icon',
                 !isShowEN || !isHasEN ? 'disabled' : '',
-                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : '',
+                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : ''
               ]"
             />
           </div>
@@ -473,16 +475,15 @@ export default {
     VoiceMatrixFullscreenAudio,
     Soundrecorddiff,
     AudioCompare,
-    Wordcard,
+    Wordcard
   },
   props: ["mp3", "curQue", "themeColor", "recordList"],
   data() {
     const userAgent = navigator.userAgent || window.opera;
     // 检查是否包含移动设备的标识
-    let isMobile =
-      /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
-        userAgent
-      );
+    let isMobile = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+      userAgent
+    );
 
     return {
       isMobile,
@@ -511,12 +512,12 @@ export default {
       // 行、列选中
       selectedLine: {
         type: "",
-        index: 0,
+        index: 0
       },
       // 点击选中
       selectCell: {
         row: -1,
-        column: -1,
+        column: -1
       },
       isRepeat: false,
       // 跟读所需属性
@@ -528,7 +529,7 @@ export default {
       cellTimer: null,
       // 拼音、英文显隐判断
       isShowPY: true,
-      isShowEN: true,
+      isShowEN: true
     };
   },
   computed: {
@@ -560,7 +561,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column,
+        column
       };
     },
     // 矩阵的行、列数从 0 开始
@@ -568,9 +569,9 @@ export default {
       const matrixArr = this.curQue.voiceMatrix.matrix;
       return {
         rows: matrixArr.length - 1,
-        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1,
+        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1
       };
-    },
+    }
   },
   watch: {
     isRecording(newVal) {
@@ -594,7 +595,7 @@ export default {
           }
         }, 50);
       }
-    },
+    }
   },
   created() {
     document.addEventListener("keyup", this.handleKeyup);
@@ -603,8 +604,8 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange",
-    ].forEach((event) => {
+      "msfullscreenchange"
+    ].forEach(event => {
       document.addEventListener(event, this.handleFullscreen);
     });
   },
@@ -614,8 +615,8 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange",
-    ].forEach((event) => {
+      "msfullscreenchange"
+    ].forEach(event => {
       document.removeEventListener(event, this.handleFullscreen);
     });
   },
@@ -658,8 +659,13 @@ export default {
     },
 
     setRecordingFileName(row, column) {
-      let { type, text, sentence_data, pinyin_english_data, text_brackets } =
-        this.curQue.voiceMatrix.matrix[row][column];
+      let {
+        type,
+        text,
+        sentence_data,
+        pinyin_english_data,
+        text_brackets
+      } = this.curQue.voiceMatrix.matrix[row][column];
       if (type === "text") this.fileName = text;
       if (type === "SentenceSegwordChs") this.fileName = sentence_data.sentence;
       if (type === "PinyinEnglish") this.fileName = pinyin_english_data.pinyin;
@@ -708,7 +714,7 @@ export default {
       this.lrcArray = [];
       let { type, index } = this.selectedLine;
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
+        this.curQue.voiceMatrix.matrix[index].forEach(item => {
           let data = this.getLrcData(item);
           if (data) this.lrcArray.push(data);
         });
@@ -717,7 +723,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach((item) => {
+        this.curQue.voiceMatrix.matrix.forEach(item => {
           let data = this.getLrcData(item[index]);
           if (data) this.lrcArray.push(data);
         });
@@ -740,7 +746,7 @@ export default {
         this.$refs.audioLine.PlayAudio();
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", (val) => {
+        this.unWatch = this.$watch("curTime", val => {
           if (val >= end) {
             if (!this.hasSelectedCell) return this.unWatch();
             this.handleParentPlay();
@@ -790,7 +796,7 @@ export default {
       }
       let arr = [];
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
+        this.curQue.voiceMatrix.matrix[index].forEach(item => {
           let data = this.getLrcData(item);
           if (data) arr.push(data);
         });
@@ -799,7 +805,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach((item) => {
+        this.curQue.voiceMatrix.matrix.forEach(item => {
           let data = this.getLrcData(item[index]);
           if (data) arr.push(data);
         });
@@ -825,7 +831,7 @@ export default {
           return {
             begin_time: lrc_data.begin_time,
             end_time: this.mp3Duration,
-            text: lrc_data.text,
+            text: lrc_data.text
           };
         }
         return lrc_data;
@@ -846,7 +852,7 @@ export default {
         // 监听是否已到结束时间，为了选中效果 - 0.01
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", (val) => {
+        this.unWatch = this.$watch("curTime", val => {
           if (val >= end) {
             this.handleParentPlay();
             this.$refs.audioLine.onTimeupdateTime(end);
@@ -980,7 +986,7 @@ export default {
         audio.length > 0 &&
         window.location.href.indexOf("GCLS-Learn") == -1
       ) {
-        audio.forEach((item) => {
+        audio.forEach(item => {
           item.pause();
         });
       }
@@ -992,8 +998,8 @@ export default {
     changeFullScreen() {
       this.pauseAudio();
       this.$emit("changeIsFull");
-    },
-  },
+    }
+  }
 };
 </script>