录音

src/App.vue

@@ -483,4 +483,38 @@ html::-webkit-scrollbar-thumb {
   height: 100%;
   overflow: hidden;
 }
+
+.el-message-box__btns>.pptEasyClassConfirmButtonText {
+  background: #FCCF00 !important;
+  color: #ffffffe0 !important;
+  border-color: #FCCF00 !important;
+}
+
+.el-message-box__btns>.pptEasyClassConfirmButtonText:hover{
+  background: #e9be02 !important;
+  color: #ffffffe0 !important;
+  border-color: #e9be02 !important;
+}
+
+.el-message-box__btns>.pptEasyClassCancelButtonText {
+  background: #FFFFFF  !important;
+  color: #00000090 !important;
+  border-color: #DDDDDD !important;
+}
+
+.el-message-box__btns>.pptEasyClassCancelButtonText:hover {
+  background: #d8d8d8  !important;
+  color: #00000090 !important;
+  border-color: #d8d8d8 !important;
+}
+
+.pptEasyClassMessage{
+  background: #fff !important;
+  box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.08), 0px 8px 12px 1px rgba(0,0,0,0.04), 0px 3px 15px 3px rgba(0,0,0,0.05) !important;
+  min-width: auto !important;
+}
+
+.pptEasyClassMessage>.el-message__icon{
+  color: #FCCF00;
+}
 </style>

src/components/pptEasyClass/index.vue

@@ -23,6 +23,10 @@
           </div>
         </div>
         <div class="pec_h_center">
+          <div class="pec_h_r_btn_refresh" :class="{ 'recording': recordedForm.status == 1 }" @click="toggleRecording" v-show="(jArray.includes(oid) || jArray.includes(org)) && courseDetail.userid == userid && tcid">
+            <svg t="1772588344140"  viewBox="0 0 1024 1024" p-id="1693" width="200" height="200"><path d="M512 1024a512.568889 512.568889 0 0 1-512-512 512.625778 512.625778 0 0 1 512-512 512.568889 512.568889 0 0 1 512 512 512.568889 512.568889 0 0 1-512 512zM512 73.329778c-241.948444 0-438.670222 196.835556-438.670222 438.670222S270.051556 950.670222 512 950.670222s438.670222-196.835556 438.670222-438.670222S753.948444 73.329778 512 73.329778z m0 686.592a245.191111 245.191111 0 1 1 0-490.382222 245.191111 245.191111 0 0 1 0 490.382222z" p-id="1694"></path></svg>
+              <span>{{ recordedForm.status == 1 ? lang.ssStopRecording2 : lang.ssRecord }}</span>
+          </div>
           <el-tooltip effect="dark" :content="courseDetail.title" placement="bottom">
             <div class="pec_h_l_title">
               <span>{{ courseDetail.title }}</span>
@@ -53,9 +57,6 @@
           <div class="pec_h_r_btnArea">
             <!-- openObserveDialog -->
             <!-- toggleRecording -->
-            <div class="pec_h_r_btn_refresh" :class="{ 'recording': recordedForm.status == 1 }" @click="toggleRecording" v-show="(jArray.includes(oid) || jArray.includes(org)) && courseDetail.userid == userid && tcid">
-              <span>{{ recordedForm.status == 1 ? '结束录音' : '开始录音' }}</span>
-            </div>
             <div class="pec_h_r_btn_afterClass" @click="afterClass" v-if="courseDetail.userid == userid">
               <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
               <span>{{ lang.ssEndClass }}</span>
@@ -125,7 +126,7 @@ export default {
       // 录音相关变量
       languageRadio: 2, // 语言选择
       recordedForm: {
-        status: 0, // 0: 未开始, 1: 录音中, 2: 暂停, 3: 结束
+        status: 1, // 0: 未开始, 1: 录音中, 2: 暂停, 3: 结束
         startTime: 0,
         endTime: 0,
         timeDuration: 0,
@@ -168,10 +169,26 @@ export default {
         const now = new Date();
         const duration = (now - new Date(this.recordingStartTime)) / 1000;
         if (duration < 5) {
-          this.$message.warning('录音时间至少需要5秒');
+          this.$message.warning(this.lang.ssRecordingTimeAtLeast5Seconds);
           return;
         }
-        this.onFinishRecordWithMicrosoft();
+        this.$confirm(this.lang.ssStopRecordingNotice, this.lang.ssStopRecordingConfirm, {
+          confirmButtonText: this.lang.ssConfirm,
+          cancelButtonText: this.lang.ssCancel,
+          confirmButtonClass:"pptEasyClassConfirmButtonText",
+          cancelButtonClass:"pptEasyClassCancelButtonText"
+        }).then(() => {
+          console.log("确定")
+          // this.$message({
+          //   dangerouslyUseHTMLString: true,
+          //   customClass:"pptEasyClassMessage",
+          //   message: '已停止录制 <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank">查看结果</p>'
+          // });
+          this.onFinishRecordWithMicrosoft();
+        }).catch(() => {
+          console.log("取消")
+        });
+
       } else {
         const now = new Date();
         const duration = (now - new Date(this.recordingEndTime)) / 1000;
@@ -258,7 +275,12 @@ export default {
           this.recordedForm.status = 0;
           this.controlsStatus = 2;
           this.showGetTextLoading = false;
-          this.$message.success("已结束录音");
+          // this.$message.success("已结束录音");
+          this.$message({
+            dangerouslyUseHTMLString: true,
+            customClass:"pptEasyClassMessage",
+            message: `${this.lang.ssStoppedRecording} <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank">${this.lang.ssViewRecordingResult}</p>`
+          });
           console.log("结束录音👇");
           console.log("结束录音", e);
           this.recordedForm.audioBlob.push(e.preaudio);
@@ -659,15 +681,35 @@ export default {
   margin-right: 5px;
 }
 
-.pec_h_r_btnArea>.pec_h_r_btn_refresh {
+.pec_h_center>.pec_h_r_btn_refresh {
   color: #fff;
-  background-color: #0061ff;
-  border-color: #0061ff;
+  /* background-color: #0061ff;
+  border-color: #0061ff; */
+  padding: 9px 10px;
+  margin-right: 15px;
+  border-radius: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: #FFF7F5;
+  color: #000000;
+  font-weight: 400;
+  cursor: pointer;
+  fill: #666666;
+}
+
+.pec_h_center>.pec_h_r_btn_refresh>svg{
+
+  width: 1rem;
+  height: 1rem;
 }
 
-.pec_h_r_btnArea>.pec_h_r_btn_refresh.recording {
-  background-color: #F53F3F;
-  border-color: #F53F3F;
+.pec_h_center>.pec_h_r_btn_refresh.recording {
+  /* background-color: #F53F3F;
+  border-color: #F53F3F; */
+  background: #FFF7E8;
+  fill: #FF9300;
   animation: pulse 1.5s infinite;
 }
 

src/lang/cn.json

@@ -889,5 +889,11 @@
   "ssWordCloudFail": "生成词云图失败",
   "ssSubmitWork": "提交作业",
   "ssLikeL":"点赞",
-  "ssCorrectOrder": "正确排序"
-}
+  "ssCorrectOrder": "正确排序",
+  "ssStopRecording2": "停止录制",
+  "ssRecordingTimeAtLeast5Seconds": "录音时间至少需要5秒",
+  "ssStopRecordingNotice": "停止录制后，录音文件将发送至课堂分析应用。",
+  "ssStopRecordingConfirm": "确定停止课堂录制?",
+  "ssStoppedRecording": "已停止录制",
+  "ssViewRecordingResult": "查看结果"
+}

src/lang/en.json

@@ -887,5 +887,11 @@
   "ssWordCloudFail": "Failed to generate word cloud",
   "ssSubmitWork": "Submit Work",
   "ssLikeL":"Like",
-  "ssCorrectOrder": "Correct Order"
+  "ssCorrectOrder": "Correct Order",
+  "ssStopRecording2": "Stop Recording",
+  "ssRecordingTimeAtLeast5Seconds": "The recording time must be at least 5 seconds",
+  "ssStopRecordingNotice": "After stopping the recording, the file will be sent to the classroom analysis application.",
+  "ssStopRecordingConfirm": "Are you sure you want to stop classroom recording?",
+  "ssStoppedRecording": "Recording stopped",
+  "ssViewRecordingResult": "View result"
 }

src/lang/hk.json

@@ -887,5 +887,11 @@
   "ssWordCloudFail": "生成詞雲圖失敗",
   "ssSubmitWork": "提交作業",
   "ssLikeL":"點贊",
-  "ssCorrectOrder": "正確排序"
+  "ssCorrectOrder": "正確排序",
+  "ssStopRecording2": "停止錄製",
+  "ssRecordingTimeAtLeast5Seconds": "錄音時間至少需要5秒",
+  "ssStopRecordingNotice": "停止錄製後，錄音檔案將發送至課堂分析應用。",
+  "ssStopRecordingConfirm": "確定停止課堂錄製？",
+  "ssStoppedRecording": "已停止錄製",
+  "ssViewRecordingResult": "查看結果"
 }