:twisted_rightwards_arrows: Merge branch 'dev_audio' into online_kid

src/stage/index/scene/AudioWareFullScreenScene.js

@@ -40,7 +40,7 @@ class AudioWareFullScreenScene extends scene {
             case 'audio-next':
                 if (this.curAudioIndex < this.curAudioList.length -1) {
                     this.curAudioIndex += 1;
-                    this.renderAudioView();
+                    this.renderAudioView('audio-next');
                 } else {
                     this.keyRightHandler();
                 }
@@ -48,7 +48,7 @@ class AudioWareFullScreenScene extends scene {
             case 'audio-last':
                 if (this.curAudioIndex > 0) {
                     this.curAudioIndex -= 1;
-                    this.renderAudioView();
+                    this.renderAudioView('audio-last');
                 } else {
                     this.keyLeftHandler();
                 }
@@ -61,7 +61,7 @@ class AudioWareFullScreenScene extends scene {
     /**
      * 音频渲染
      */
-	renderAudioView() {
+	renderAudioView(focusTarget) {
         const curAudio = this.curAudioList[this.curAudioIndex];
         const { type, img, audio } = curAudio;
         let imgPath = (img || {}).path || '';
@@ -75,12 +75,13 @@ class AudioWareFullScreenScene extends scene {
             let audioElement = document.createElement('audio');
             audioElement.setAttribute('id', 'courseware-audio');
             audioElement.setAttribute('src', audioUrl);
+            audioElement.setAttribute('autoplay', 'autoplay');
             let controlsElement = document.createElement('div');
+            controlsElement.setAttribute('autoplay', 'autoplay');
             controlsElement.setAttribute('class', 'audio-controls');
-            controlsElement.setAttribute('fe-role', 'Switch');
             let controlsBtns = `
                 <!-- 播放/暂停 -->
-                <div id="audio-play" class="audio-controls-item btn-play paused" fe-role="Widget"></div>
+                <div id="audio-play" class="audio-controls-item btn-play" fe-role="Widget"></div>
                 <!-- 有声/静音 -->
                 <div id="audio-mute" class="audio-controls-item btn-mute" fe-role="Widget"></div>
                 <!-- 下一个音频 -->
@@ -92,7 +93,19 @@ class AudioWareFullScreenScene extends scene {
             content.appendChild(audioElement);
             content.appendChild(controlsElement);
             this.moye.root.reRender();
-            FocusEngine.getWidgetById('audio-play').focus();
+            // 监听onended事件
+            let audioDom = document.getElementById('courseware-audio');
+            if (audioDom) {
+                audioDom.addEventListener('ended', function () {
+                    TVUtil.Toast.show('播放结束', 1500);
+                    document.getElementById('audio-play').classList.add('paused');
+                    audioDom.currentTime = 0;
+                }, false);
+            }
+            // 指定光标位置
+            if (focusTarget && this.moye.root.getWidgetById(focusTarget)) {
+                this.moye.root.getWidgetById(focusTarget).focus();
+            }
         }
 	}
 
@@ -229,13 +242,13 @@ class AudioWareFullScreenScene extends scene {
 		switch (e.keyCode) {
 			//左键
 			case 37:
-                if (!curFocusedLeaf.id.startsWith('audio')) {
+                if (!curFocusedLeaf || !curFocusedLeaf.id.startsWith('audio')) {
                     this.keyLeftHandler();
                 }
 				break;
 			//右键
 			case 39:
-                if (!curFocusedLeaf.id.startsWith('audio')) {
+                if (!curFocusedLeaf || !curFocusedLeaf.id.startsWith('audio')) {
                     this.keyRightHandler();
                 }
 				break;

src/stage/index/scene/LessonScene.js

@@ -153,7 +153,7 @@ class LessonScene extends scene {
                   <div id="view-full-screen" fe-role="Widget" class="view-full-screen-video">
                   </div>
                   <div id="view-video-start" fe-role="Widget">
-                    <div class="transparent-btn">播放</div>
+                    <div class="transparent-btn">暂停</div>
                   </div>
                 `;
     			document.getElementById('view-bottom').innerHTML = videoViewDom;
@@ -218,7 +218,7 @@ class LessonScene extends scene {
     /**
      * 渲染音频视图
      */
-    renderAudioView() {
+    renderAudioView(focusTarget) {
         const curAudio = this.curAudioList[this.curAudioIndex];
         const { img, audio, type } = curAudio;
         let imgPath = (img || {}).path || '';
@@ -236,12 +236,12 @@ class LessonScene extends scene {
             let audioElement = document.createElement('audio');
             audioElement.setAttribute('id', 'courseware-audio');
             audioElement.setAttribute('src', audioUrl);
+            audioElement.setAttribute('autoplay', 'autoplay');
             let controlsElement = document.createElement('div');
             controlsElement.setAttribute('class', 'audio-controls');
-            controlsElement.setAttribute('fe-role', 'Switch');
             let controlsBtns = `
                 <!-- 播放/暂停 -->
-                <div id="audio-play" class="audio-controls-item btn-play paused" fe-role="Widget"></div>
+                <div id="audio-play" class="audio-controls-item btn-play" fe-role="Widget"></div>
                 <!-- 有声/静音 -->
                 <div id="audio-mute" class="audio-controls-item btn-mute" fe-role="Widget"></div>
                 <!-- 下一个音频 -->
@@ -253,7 +253,19 @@ class LessonScene extends scene {
             content.appendChild(audioElement);
             content.appendChild(controlsElement);
             this.moye.root.reRender();
-            //FocusEngine.getWidgetById('audio-play').focus();
+            // 监听onended事件
+            let audioDom = document.getElementById('courseware-audio');
+            if (audioDom) {
+                audioDom.addEventListener('ended', function () {
+                    TVUtil.Toast.show('播放结束', 1500);
+                    document.getElementById('audio-play').classList.add('paused');
+                    audioDom.currentTime = 0;
+                }, false);
+            }
+            // 指定光标位置
+            if (focusTarget && this.moye.root.getWidgetById(focusTarget)) {
+                this.moye.root.getWidgetById(focusTarget).focus();
+            }
         }
     }
 
@@ -393,13 +405,13 @@ class LessonScene extends scene {
             case 'audio-next':
                 if (this.curAudioIndex < this.curAudioList.length -1) {
                     this.curAudioIndex += 1;
-                    this.renderAudioView();
+                    this.renderAudioView('audio-next');
                 }
                 break;
             case 'audio-last':
                 if (this.curAudioIndex > 0) {
                     this.curAudioIndex -= 1;
-                    this.renderAudioView();
+                    this.renderAudioView('audio-last');
                 }
                 break;
             default:

src/stage/index/style/AudioWareFullScreen.less

@@ -43,9 +43,9 @@
 			}
 			&.btn-mute {
 				float: left;
-				background-image: url(assets/img/Audio/audio_mute.png);
+				background-image: url(assets/img/Audio/audio_voice.png);
 				&.muted {
-					background-image: url(assets/img/Audio/audio_voice.png);
+					background-image: url(assets/img/Audio/audio_mute.png);
 				}
 			}
 			&.btn-last {

src/stage/index/style/LessonScene.less

@@ -152,9 +152,9 @@
 					}
 					&.btn-mute {
 						float: left;
-						background-image: url(assets/img/Audio/audio_mute.png);
+						background-image: url(assets/img/Audio/audio_voice.png);
 						&.muted {
-							background-image: url(assets/img/Audio/audio_voice.png);
+							background-image: url(assets/img/Audio/audio_mute.png);
 						}
 					}
 					&.btn-last {