|
|
@@ -3,7 +3,7 @@
|
|
|
:class="[
|
|
|
'voicefull',
|
|
|
bgIndex === 0 ? 'bg1' : 'bg2',
|
|
|
- isLandscape ? 'voicefull-scape' : '',
|
|
|
+ isLandscape ? 'voicefull-scape' : ''
|
|
|
]"
|
|
|
>
|
|
|
<div class="voicefull-top">
|
|
|
@@ -30,7 +30,7 @@
|
|
|
<span
|
|
|
:class="[
|
|
|
'font-jian-black',
|
|
|
- bgIndex === 1 ? 'font-jian-yellow' : '',
|
|
|
+ bgIndex === 1 ? 'font-jian-yellow' : ''
|
|
|
]"
|
|
|
@click="setFontSize('-')"
|
|
|
/>
|
|
|
@@ -41,21 +41,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('+')"
|
|
|
/>
|
|
|
@@ -66,7 +66,7 @@
|
|
|
'font-jia-black',
|
|
|
bgIndex === 1
|
|
|
? 'font-jia-yellow-disabled'
|
|
|
- : 'font-jia-white-disabled',
|
|
|
+ : 'font-jia-white-disabled'
|
|
|
]"
|
|
|
/>
|
|
|
</template>
|
|
|
@@ -96,7 +96,7 @@
|
|
|
:class="[
|
|
|
'repeat-icon',
|
|
|
!isRepeat ? 'disabled' : 'auto-icon',
|
|
|
- isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : '',
|
|
|
+ isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : ''
|
|
|
]"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -108,9 +108,7 @@
|
|
|
:class="[
|
|
|
'pinyin-icon',
|
|
|
!isShowPY || !isHasPY ? 'disabled' : '',
|
|
|
- isShowPY && isHasPY && bgIndex === 1
|
|
|
- ? 'pinyin-icon-yellow'
|
|
|
- : '',
|
|
|
+ isShowPY && isHasPY && bgIndex === 1 ? 'pinyin-icon-yellow' : ''
|
|
|
]"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -122,7 +120,7 @@
|
|
|
:class="[
|
|
|
'en-icon',
|
|
|
!isShowEN || !isHasEN ? 'disabled' : '',
|
|
|
- isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : '',
|
|
|
+ isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : ''
|
|
|
]"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -143,7 +141,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"
|
|
|
>
|
|
|
@@ -163,7 +161,7 @@
|
|
|
`matrix-checkbox-row-${themeColor}`,
|
|
|
selectedLine.type === 'column' && selectedLine.index === i
|
|
|
? 'active'
|
|
|
- : '',
|
|
|
+ : ''
|
|
|
]"
|
|
|
@click="selectRowOrColumn(i, 'column')"
|
|
|
/>
|
|
|
@@ -183,7 +181,7 @@
|
|
|
`matrix-checkbox-column-${themeColor}`,
|
|
|
selectedLine.type === 'row' && selectedLine.index === i
|
|
|
? 'active'
|
|
|
- : '',
|
|
|
+ : ''
|
|
|
]"
|
|
|
@click="selectRowOrColumn(i, 'row')"
|
|
|
/>
|
|
|
@@ -197,7 +195,7 @@
|
|
|
(i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
|
|
|
(j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
|
|
|
? `highlight-${themeColor}`
|
|
|
- : '',
|
|
|
+ : ''
|
|
|
]"
|
|
|
@mouseenter="matrixCellMouseenter(i, j, column.type)"
|
|
|
>
|
|
|
@@ -219,7 +217,7 @@
|
|
|
column.lrc_data.end_time === -1)
|
|
|
? 'playing'
|
|
|
: '',
|
|
|
- column.isTitle ? 'title' : '',
|
|
|
+ column.isTitle ? 'title' : ''
|
|
|
]"
|
|
|
@click="matrixCellClick(i, j)"
|
|
|
>
|
|
|
@@ -233,7 +231,7 @@
|
|
|
'connection',
|
|
|
i === 0 && curQue.voiceMatrix.firstLineHighlight
|
|
|
? `highlight-bc-${themeColor}`
|
|
|
- : '',
|
|
|
+ : ''
|
|
|
]"
|
|
|
/>
|
|
|
<!-- 分词 -->
|
|
|
@@ -254,10 +252,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)"
|
|
|
>
|
|
|
@@ -265,16 +263,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'
|
|
|
@@ -291,16 +291,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'
|
|
|
@@ -332,7 +334,7 @@
|
|
|
column.lrc_data.end_time === -1)
|
|
|
? 'playing'
|
|
|
: '',
|
|
|
- column.isTitle ? 'title' : '',
|
|
|
+ column.isTitle ? 'title' : ''
|
|
|
]"
|
|
|
@click="matrixCellClick(i, j)"
|
|
|
>
|
|
|
@@ -366,7 +368,7 @@
|
|
|
column.lrc_data.end_time === -1)
|
|
|
? 'playing'
|
|
|
: '',
|
|
|
- column.isTitle ? 'title' : '',
|
|
|
+ column.isTitle ? 'title' : ''
|
|
|
]"
|
|
|
@click="matrixCellClick(i, j)"
|
|
|
>
|
|
|
@@ -408,7 +410,7 @@ export default {
|
|
|
VoiceMatrixFullscreenAudio,
|
|
|
Soundrecorddiff,
|
|
|
AudioCompare,
|
|
|
- Wordcard,
|
|
|
+ Wordcard
|
|
|
},
|
|
|
props: ["mp3", "curQue", "themeColor", "recordList"],
|
|
|
data() {
|
|
|
@@ -438,12 +440,12 @@ export default {
|
|
|
// 行、列选中
|
|
|
selectedLine: {
|
|
|
type: "",
|
|
|
- index: 0,
|
|
|
+ index: 0
|
|
|
},
|
|
|
// 点击选中
|
|
|
selectCell: {
|
|
|
row: -1,
|
|
|
- column: -1,
|
|
|
+ column: -1
|
|
|
},
|
|
|
isRepeat: false,
|
|
|
// 跟读所需属性
|
|
|
@@ -456,7 +458,7 @@ export default {
|
|
|
// 拼音、英文显隐判断
|
|
|
isShowPY: true,
|
|
|
isShowEN: true,
|
|
|
- isLandscape: window.innerWidth < window.innerHeight, // 手机是否为竖屏
|
|
|
+ isLandscape: window.innerWidth < window.innerHeight // 手机是否为竖屏
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -488,7 +490,7 @@ export default {
|
|
|
type: type.length > 0 && index >= 0 ? type : "cell",
|
|
|
index,
|
|
|
row,
|
|
|
- column,
|
|
|
+ column
|
|
|
};
|
|
|
},
|
|
|
// 矩阵的行、列数从 0 开始
|
|
|
@@ -496,9 +498,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) {
|
|
|
@@ -522,7 +524,7 @@ export default {
|
|
|
}
|
|
|
}, 50);
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
document.addEventListener("keyup", this.handleKeyup);
|
|
|
@@ -531,10 +533,11 @@ export default {
|
|
|
"fullscreenchange",
|
|
|
"mozfullscreenchange",
|
|
|
"webkitfullscreenchange",
|
|
|
- "msfullscreenchange",
|
|
|
- ].forEach((event) => {
|
|
|
+ "msfullscreenchange"
|
|
|
+ ].forEach(event => {
|
|
|
document.addEventListener(event, this.handleFullscreen);
|
|
|
});
|
|
|
+ window.addEventListener("resize", this.handleResize);
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
document.removeEventListener("keyup", this.handleKeyup);
|
|
|
@@ -542,10 +545,11 @@ export default {
|
|
|
"fullscreenchange",
|
|
|
"mozfullscreenchange",
|
|
|
"webkitfullscreenchange",
|
|
|
- "msfullscreenchange",
|
|
|
- ].forEach((event) => {
|
|
|
+ "msfullscreenchange"
|
|
|
+ ].forEach(event => {
|
|
|
document.removeEventListener(event, this.handleFullscreen);
|
|
|
});
|
|
|
+ window.removeEventListener("resize", this.handleResize);
|
|
|
},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
@@ -586,8 +590,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;
|
|
|
@@ -636,7 +645,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);
|
|
|
});
|
|
|
@@ -645,7 +654,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);
|
|
|
});
|
|
|
@@ -668,7 +677,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();
|
|
|
@@ -718,7 +727,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);
|
|
|
});
|
|
|
@@ -727,7 +736,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);
|
|
|
});
|
|
|
@@ -753,7 +762,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;
|
|
|
@@ -774,7 +783,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);
|
|
|
@@ -908,7 +917,7 @@ export default {
|
|
|
audio.length > 0 &&
|
|
|
window.location.href.indexOf("GCLS-Learn") == -1
|
|
|
) {
|
|
|
- audio.forEach((item) => {
|
|
|
+ audio.forEach(item => {
|
|
|
item.pause();
|
|
|
});
|
|
|
}
|
|
|
@@ -921,7 +930,10 @@ export default {
|
|
|
this.pauseAudio();
|
|
|
this.$emit("changeIsFull");
|
|
|
},
|
|
|
- },
|
|
|
+ handleResize() {
|
|
|
+ this.isLandscape = window.innerWidth < window.innerHeight;
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
natasha