Merge branch 'dev_audio' into dev_winpc_touch

src/res/tpl/AudioWareFullScreen.tpl

@@ -0,0 +1,3 @@
+<div id="AudioWareFullScreen" fe-role="Switch">
+    <img id="wareImg" src="assets/img/default_bg.jpg" />
+</div>

src/stage/index/index.less

@@ -31,3 +31,4 @@ body {
 @import './style/GlobalGoodDetail.less';
 @import './style/ImageWareFullScreen.less';
 @import './style/VideoWareFullScreen.less';
+@import './style/AudioWareFullScreen.less';

src/stage/index/scene/AudioWareFullScreenScene.js

@@ -0,0 +1,296 @@
+import Consts from '../../../util/Consts';
+
+function getLocalResourceUrl(absoluteUrl) {
+  if (!absoluteUrl) return;
+  const segments = absoluteUrl.split('/') || [];
+  return `${Consts.NODE_SERVER}/lesson/readFile?n=${segments.slice(3).join('*')}`;
+}
+
+class AudioWareFullScreenScene extends scene {
+	constructor(scope) {
+		super(scope);
+		this.isDownload = false;
+		this.wareList = [];
+		this.curWareIndex = 0;
+		this.curWareType = null;
+		this.curAudioList = [];
+		this.curAudioIndex = 0;
+	}
+
+  /**
+   * 音频播放控制
+   */
+  audioPlayControl(eventId) {
+    let targetAudio = document.getElementById('courseware-audio');
+    if (!targetAudio) { return; }
+    switch (eventId) {
+        case 'audio-play':
+            let playBtn = document.querySelector('#audio-play');
+            if (targetAudio.paused) {
+                targetAudio.play();
+                playBtn.classList.remove('paused');
+            } else {
+                targetAudio.pause();
+                playBtn.classList.add('paused');
+            }
+            break;
+        case 'audio-mute':
+            let muteBtn = document.querySelector('#audio-mute');
+            if (targetAudio.muted) {
+                targetAudio.muted = false;
+                muteBtn.classList.remove('muted');
+            } else {
+                targetAudio.muted = true;
+                muteBtn.classList.add('muted');
+            }
+            break;
+        case 'audio-next':
+            if (this.curAudioIndex < this.curAudioList.length -1) {
+                this.curAudioIndex += 1;
+                this.renderAudioView('audio-next');
+            } else {
+                this.keyRightHandler();
+            }
+            break;
+        case 'audio-last':
+            if (this.curAudioIndex > 0) {
+                this.curAudioIndex -= 1;
+                this.renderAudioView('audio-last');
+            } else {
+                this.keyLeftHandler();
+            }
+            break;
+        default:
+            break;
+      }
+  }
+
+  /**
+   * 音频渲染
+   */
+	renderAudioView(focusTarget) {
+    const curAudio = this.curAudioList[this.curAudioIndex];
+    const { type, img, audio } = curAudio;
+    let imgPath = (img || {}).path || '';
+    let audioUrl = (audio || {}).url || '';
+    let content = document.getElementById('AudioWareFullScreen');
+    // 1.更换背景图片
+    let imgUrl = `${Consts.IMG_PATH}/${imgPath}`;
+		let imgHTML = `<img src="${imgUrl}" />`;
+		if (this.isDownload) {
+    	imgHTML = `<img src="${getLocalResourceUrl(imgUrl)}" />`;
+		}
+    content.innerHTML = imgHTML;
+    // 2.根据是否有无audioURL来控制面板及audio的展现
+    if (type === Consts.TYPE_AUDIOBOOK && audioUrl) {
+      if (this.isDownload) {
+        audioUrl = getLocalResourceUrl(audioUrl)
+      }
+      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');
+      let controlsBtns = `
+          <!-- 播放/暂停 -->
+          <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>
+          <!-- 下一个音频 -->
+          <div id="audio-next" class="audio-controls-item btn-next" fe-role="Widget"></div>
+          <!-- 上一个音频 -->
+          <div id="audio-last" class="audio-controls-item btn-last" fe-role="Widget"></div>
+      `;
+      controlsElement.innerHTML = controlsBtns;
+      content.appendChild(audioElement);
+      content.appendChild(controlsElement);
+      this.moye.root.reRender();
+      // 监听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();
+      }
+    }
+	}
+
+	dynamicChangeWare(wareIndex, type) {
+		if (type === 'BACK') {
+			TVUtil.Toast.show('即将播放上个课件...', 1500);
+		} else if (type === 'NEXT') {
+			TVUtil.Toast.show('即将播放下个课件...', 1500);
+		}
+		setTimeout(() => {
+			this.curWareIndex = wareIndex;
+			this.curWareType = this.wareList[wareIndex].type;
+			//下一个或前一个课件是视频课件
+			if (this.curWareType === Consts.TYPE_VIDEO) {
+				this.hideScene();
+				this.showScene(require('./VideoWareFullScreenScene.js'), {
+					wareList: this.wareList,
+					curWareIndex: this.curWareIndex,
+				});
+            //下一个或前一个课件是图片课件
+            } else if (this.curWareType === Consts.TYPE_IMAGE) {
+                let imgList = this.wareList[this.curWareIndex].list;
+                let imgIndex = 0;
+                if (type === 'BACK' && imgList.length) {
+                    imgIndex = imgList.length - 1;
+                }
+                this.hideScene();
+        		this.showScene(require('./ImageWareFullScreenScene.js'), {
+        			wareList: this.wareList,
+        			curWareIndex: this.curWareIndex,
+        			curImageList: imgList,
+        			curImageIndex: imgIndex,
+        		});
+			//下一个或前一个课件是音频课件
+			} else {
+				this.curAudioList = this.wareList[wareIndex].list;
+				if (type === 'BACK') {
+					this.curAudioIndex = this.wareList[wareIndex].list.length - 1;
+				}
+				if (type === 'NEXT') {
+					this.curAudioIndex = 0;
+				}
+				this.renderAudioView();
+			}
+		}, 1500);
+	}
+
+	keyRightHandler() {
+		const hasNextWare = this.curWareIndex < this.wareList.length - 1 ? true : false;
+		//当前图片是该图片课件最后一张图片，且后边还有课件则切换课件
+		if (this.curAudioIndex === this.curAudioList.length - 1 && hasNextWare) {
+			return;
+			// const nextWareIndex = this.curWareIndex + 1;
+			// this.dynamicChangeWare(nextWareIndex, 'NEXT')
+		//当前图片是该图片课件最后一张图片，且后边没有课件，给出提示
+		} else if (this.curAudioIndex === this.curAudioList.length - 1 && !hasNextWare) {
+			return;
+			// TVUtil.Toast.show('已经是最后一个课件了', 2000);
+		//当前图片不是该图片课件的最后一张图片
+    } else {
+			this.curAudioIndex += 1;
+			this.renderAudioView();
+    }
+	}
+
+	keyLeftHandler() {
+		const hasPreviousWare = this.curWareIndex === 0 ? false : true;
+		//当前图片是该图片课件的第一张图片，且前边还有课件
+	  if (this.curAudioIndex == 0 && hasPreviousWare) {
+			return;
+			// const previousWareIndex = this.curWareIndex - 1;
+			// this.dynamicChangeWare(previousWareIndex, 'BACK');
+		//当前图片是该图片课件的第一张图片，且前边没有课件，则给出提示
+		} else if (this.curAudioIndex === 0 && !hasPreviousWare) {
+			return;
+			// TVUtil.Toast.show('已经是第一个课件了', 2000);
+		//当前图片不是该图片课件的第一张图片
+		} else {
+			this.curAudioIndex -= 1;
+			this.renderAudioView();
+		}
+	}
+
+	onCreate(data) {
+	    this.wareList = data.wareList;
+	    this.curWareIndex = data.curWareIndex;
+			this.isDownload = data.isDownload;
+	    if (data.curAudioList) {
+				this.curAudioList = data.curAudioList;
+	    }
+	    if (data.curAudioIndex) {
+				this.curAudioIndex = data.curAudioIndex;
+	    }
+	    this.curWareType = this.wareList[this.curWareIndex].type;
+		this.setContentView(require('../../../res/tpl/AudioWareFullScreen.tpl'), {}, 'AudioWareFullScreen', {}, () => {
+			this.renderAudioView();
+		});
+	}
+
+	onResume() {
+
+	}
+
+	onPause() {
+
+	}
+
+	onDestroy() {
+
+	}
+
+	onActive() {
+
+	}
+
+	onInactive() {
+
+	}
+
+	onOK() {
+    	const leaf = FocusEngine.getFocusedLeaf();
+        // 拦截音频控制相关事件单独处理
+        if (leaf.id && leaf.id.startsWith('audio')) {
+            this.audioPlayControl(leaf.id);
+            return;
+        }
+	}
+
+	onBack() {
+
+	}
+
+	onKeyup() {
+
+	}
+
+	onKeydown(e) {
+    let curFocusedLeaf = FocusEngine.getFocusedLeaf();
+		switch (e.keyCode) {
+			//左键
+			case 37:
+        if (!curFocusedLeaf || !curFocusedLeaf.id.startsWith('audio')) {
+          this.keyLeftHandler();
+        }
+				break;
+			//右键
+			case 39:
+        if (!curFocusedLeaf || !curFocusedLeaf.id.startsWith('audio')) {
+          this.keyRightHandler();
+        }
+				break;
+			//触屏设备向左滑动
+			case Consts.KEYCODE_CLICK_LEFT_SCREEN:
+				this.keyLeftHandler();
+				break;
+			//触屏设备向右滑动
+			case Consts.KEYCODE_CLICK_RIGHT_SCREEN:
+				this.keyRightHandler();
+				break;
+			//ESC键退出图片全屏
+			case 27:
+				this.hideScene({
+					curWareIndex: this.curWareIndex,
+					curAudioList: this.curAudioList,
+					curAudioIndex: this.curAudioIndex,
+				}, 'LessonScene');
+				break;
+			default:
+				break;
+		}
+	}
+}
+
+module.exports = AudioWareFullScreenScene;

src/stage/index/scene/ImageWareFullScreenScene.js

@@ -42,6 +42,20 @@ class ImageWareFullScreenScene extends scene {
 					wareList: this.wareList,
 					curWareIndex: this.curWareIndex,
 				});
+            //下一个或前一个课件是音频课件
+			} else if (this.curWareType === Consts.TYPE_AUDIOBOOK) {
+        let imgList = this.wareList[this.curWareIndex].list;
+        let imgIndex = 0;
+        if (type === 'BACK' && imgList.length) {
+            imgIndex = imgList.length - 1;
+        }
+        this.hideScene();
+        this.showScene(require('./AudioWareFullScreenScene.js'), {
+            wareList: this.wareList,
+            curWareIndex: this.curWareIndex,
+            curAudioList: imgList,
+            curAudioIndex: imgIndex,
+        });
 			//下一个或前一个课件是图片课件
 			} else {
 				this.curImageList = this.wareList[wareIndex].list;

src/stage/index/scene/LessonScene.js

@@ -45,6 +45,8 @@ class LessonScene extends scene {
     this.curWareIndex = 0;    //当前课件在课件列表中的索引
     this.curImageList = null; //当前图片课件的图片列表
     this.curImageIndex = null;//当前图片在列表中的索引
+    this.curAudioList = null; //当前音频课件的音频列表
+    this.curAudioIndex = 0;   //当前音频在列表中的索引
     this.videoPosition = {
     	top: 270,
     	left: 790,
@@ -104,7 +106,7 @@ class LessonScene extends scene {
   		this.curWareIndex = parseInt(e.target.id.split('-')[3]);
       let curWare = matchWare(this.wareList, this.curWareId);
       if (curWare) {
-          this.createRightView(curWare);
+        this.createRightView(curWare);
       }
   	});
   	this.moye.root.reRender();
@@ -125,6 +127,9 @@ class LessonScene extends scene {
   		case Consts.TYPE_VIDEO:
   			item.icon = 'assets/img/LessonScene/video.png';
   			break;
+      case Consts.TYPE_AUDIOBOOK:
+        item.icon = 'assets/img/LessonScene/audio.png';
+        break;
   	}
   	return `
       <div class="ware-item-frame">
@@ -160,16 +165,6 @@ class LessonScene extends scene {
   			if (list && list.length >= 1) {
   				playUrl = Utils.videoUrlFormat(list[0].url);
   			}
-        /*
-  			let videoViewDom =
-          `
-            <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>
-          `;
-        */
         let videoViewDom = '';
   			document.getElementById('view-bottom').innerHTML = videoViewDom;
   			this.moye.root.reRender();
@@ -194,9 +189,29 @@ class LessonScene extends scene {
   				this.curImageIndex = 0;
   				this.renderImageView();
   			}
+        break;
+      case Consts.TYPE_AUDIOBOOK:
+    		let audioViewDom =
+    			`
+    				<div id="view-full-screen" fe-role="Widget" class="view-full-screen-img"></div>
+    				<div id="view-previous" fe-role="Widget">
+              <div class="transparent-btn">上一页</div>
+            </div>
+    				<div id="view-page">1/1</div>
+              <div id="view-next" fe-role="Widget">
+              <div class="transparent-btn">下一页</div>
+            </div>
+    			`;
+  			document.getElementById('view-bottom').innerHTML = audioViewDom;
+  			this.moye.root.reRender();
+  			this.curAudioList = list;
+  			if (this.curAudioList.length > 0) {
+  				this.curAudioIndex = 0;
+  				this.renderAudioView();
+  			}
   			break;
-          default:
-              break;
+      default:
+        break;
   	}
   }
 
@@ -206,9 +221,9 @@ class LessonScene extends scene {
   renderImageView() {
   	const curImage = this.curImageList[this.curImageIndex];
   	document.getElementById('view-page').innerHTML = (this.curImageIndex + 1) + '/' + this.curImageList.length;
-    let imageDom = `<img src=${curImage.url} />`
+    let imageDom = `<img src="${curImage.url}" />`
     if (this.isDownload) {
-      imageDom = `<img src=${getLocalResourceUrl(curImage.url)} />`
+      imageDom = `<img src="${getLocalResourceUrl(curImage.url)}" onerror="this.src='${curImage.url}'" />`
     }
   	document.getElementById('view-content').innerHTML = imageDom;
   }
@@ -238,7 +253,7 @@ class LessonScene extends scene {
         const videoDom = `<div id="hls-video"></div>`;
         document.getElementById('view-content').innerHTML = videoDom;
         this.videoPlayer = new EfunVideoPlayer();
-        this.videoPlayer.initPlayer(localUrl, 'hls-video');
+        this.videoPlayer.initPlayer(localUrl, 'hls-video', url);
     }
   	// 监控到初始化视频成功后暂停画面
   	this.timer = window.setInterval(() => {
@@ -253,6 +268,108 @@ class LessonScene extends scene {
   	}, 500);
   }
 
+  /**
+   * 渲染音频视图
+   */
+  renderAudioView(focusTarget) {
+    const curAudio = this.curAudioList[this.curAudioIndex];
+    const { img, audio, type } = curAudio;
+    let imgPath = (img || {}).path || '';
+    let audioUrl = (audio || {}).url;
+	  let footer = document.getElementById('view-page');
+    if (footer) {
+      footer.innerHTML = (this.curAudioIndex + 1) + '/' + this.curAudioList.length;
+    }
+    let content = document.getElementById('view-content');
+    // 1.更换背景图片
+    const imgUrl = `${Consts.IMG_PATH}/${imgPath}`;
+    let imgHTML = `<img src="${imgUrl}" />`;
+    if (this.isDownload) {
+      imgHTML = `<img src="${getLocalResourceUrl(imgUrl)}" />`
+    }
+    content.innerHTML = imgHTML;
+    // 2.根据是否有无audioURL来控制面板及audio的展现
+    if (type === Consts.TYPE_AUDIOBOOK && audioUrl) {
+      if (this.isDownload) {
+        audioUrl = getLocalResourceUrl(audioUrl)
+      }
+      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');
+      let controlsBtns = `
+        <!-- 播放/暂停 -->
+        <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>
+        <!-- 下一个音频 -->
+        <div id="audio-next" class="audio-controls-item btn-next" fe-role="Widget"></div>
+        <!-- 上一个音频 -->
+        <div id="audio-last" class="audio-controls-item btn-last" fe-role="Widget"></div>
+      `;
+      controlsElement.innerHTML = controlsBtns;
+      content.appendChild(audioElement);
+      content.appendChild(controlsElement);
+      this.moye.root.reRender();
+      // 监听onended事件
+      let audioDom = document.getElementById('courseware-audio');
+      if (audioDom) {
+        audioDom.addEventListener('ended', function () {
+        document.getElementById('audio-play').classList.add('paused');
+        audioDom.currentTime = 0;
+        }, false);
+      }
+      // 指定光标位置
+      if (focusTarget && this.moye.root.getWidgetById(focusTarget)) {
+        this.moye.root.getWidgetById(focusTarget).focus();
+      }
+    }
+  }
+
+  /* 音频播放控制 */
+  audioPlayControl(eventId) {
+      let targetAudio = document.getElementById('courseware-audio');
+      if (!targetAudio) { return; }
+      switch (eventId) {
+          case 'audio-play':
+              let playBtn = document.querySelector('#audio-play');
+              if (targetAudio.paused) {
+                  targetAudio.play();
+                  playBtn.classList.remove('paused');
+              } else {
+                  targetAudio.pause();
+                  playBtn.classList.add('paused');
+              }
+              break;
+          case 'audio-mute':
+              let muteBtn = document.querySelector('#audio-mute');
+              if (targetAudio.muted) {
+                  targetAudio.muted = false;
+                  muteBtn.classList.remove('muted');
+              } else {
+                  targetAudio.muted = true;
+                  muteBtn.classList.add('muted');
+              }
+              break;
+          case 'audio-next':
+              if (this.curAudioIndex < this.curAudioList.length -1) {
+                  this.curAudioIndex += 1;
+                  this.renderAudioView('audio-next');
+              }
+              break;
+          case 'audio-last':
+              if (this.curAudioIndex > 0) {
+                  this.curAudioIndex -= 1;
+                  this.renderAudioView('audio-last');
+              }
+              break;
+          default:
+              break;
+      }
+  }
+
   updateRightView(item) {
   	const { title, type, list } = item;
   	document.getElementById('view-top').innerHTML = title;
@@ -262,20 +379,6 @@ class LessonScene extends scene {
   			if (list && list.length >= 1) {
   				playUrl = Utils.videoUrlFormat(list[0].url);
   			}
-        /*
-        let playText = '播放';
-        if (this.videoPlayer && this.videoPlayer.playStatus()) {
-            playText = '暂停';
-        }
-  			let videoViewDom =
-          `
-            <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">${playText}</div>
-            </div>
-          `;
-        */
   			document.getElementById('view-bottom').innerHTML = '';
   			this.moye.root.reRender();
         //如果是H5播放器，则重新创建video标签
@@ -285,7 +388,7 @@ class LessonScene extends scene {
           const videoDom = `<div id="hls-video"></div>`;
           document.getElementById('view-content').innerHTML = videoDom;
           this.videoPlayer = new EfunVideoPlayer();
-          this.videoPlayer.initPlayer(playUrl, 'hls-video');
+          this.videoPlayer.initPlayer(playUrl, 'hls-video', url);
         }
   			break;
   		case Consts.TYPE_IMAGE:
@@ -293,12 +396,12 @@ class LessonScene extends scene {
   			`
   				<div id="view-full-screen" fe-role="Widget" class="view-full-screen-img"></div>
   				<div id="view-previous" fe-role="Widget">
-                      <div class="transparent-btn">上一页</div>
-                  </div>
+            <div class="transparent-btn">上一页</div>
+          </div>
   				<div id="view-page">1/1</div>
   				<div id="view-next" fe-role="Widget">
-                      <div class="transparent-btn">下一页</div>
-                  </div>
+            <div class="transparent-btn">下一页</div>
+          </div>
   			`;
   			document.getElementById('view-bottom').innerHTML = imageViewDom;
   			this.moye.root.reRender();
@@ -324,7 +427,8 @@ class LessonScene extends scene {
 
   onCreate(data) {
     //是否已下载
-    this.isDownload = checkDownloadStatus(data.downloadStatus);
+    // this.isDownload = checkDownloadStatus(data.downloadStatus);
+    this.isDownload = true;
     this.lessonId = data.id;
     this.courseId = data.courseId;
     this.setContentView(require('../../../res/tpl/LessonScene.tpl'), {}, 'LessonScene', {}, () => {
@@ -336,15 +440,21 @@ class LessonScene extends scene {
   onResume(data) {
     if (!data) { return; }
     //更新下当前的课件信息
-    const { curWareIndex, curImageList, curImageIndex } = data;
+    const { curWareIndex, curImageList, curImageIndex, curAudioList, curAudioIndex } = data;
     this.curWareIndex = curWareIndex;
     this.curWareId = this.wareList[curWareIndex].id;
     this.curWareType = this.wareList[curWareIndex].type;
     if (curImageList) {
-        this.curImageList = curImageList;
+      this.curImageList = curImageList;
     }
     if (curImageIndex) {
-        this.curImageIndex = curImageIndex;
+      this.curImageIndex = curImageIndex;
+    }
+    if (curAudioList) {
+      this.curAudioList = curAudioList;
+    }
+    if (curAudioIndex) {
+      this.curAudioIndex = curAudioIndex;
     }
     //更新左侧焦点位置
     this.moye.root.getWidgetById(`item-${this.curWareType}-${this.curWareId}-${this.curWareIndex}`).focus();
@@ -354,52 +464,91 @@ class LessonScene extends scene {
   }
 
   onOK(e) {
-    // 后退
+    // 点击后退按钮
     if (e.target.con.classList.contains('goback')) {
       this.hideScene({id: this.courseId}, 'CourseScene');
       return;
     }
+    // 拦截音频控制相关事件单独处理
   	const leaf = FocusEngine.getFocusedLeaf();
-  	switch (leaf.id) {
-  		case 'view-video-start':
-  			if (this.curWareType == Consts.TYPE_VIDEO) {
-  				if (this.videoPlayer.playStatus()) {
-  					this.videoPlayer.pause();
-  					document.getElementById('view-video-start').innerHTML = '播放';
-  				} else {
-  					this.videoPlayer.start();
-  					document.getElementById('view-video-start').innerHTML = '暂停';
-  				}
-  			}
-  			//添加播放记录
-  			this.postPlayRecord(this.curWareId, this.courseId);
-  			break;
-  		case 'view-full-screen':
+    if (leaf.id && leaf.id.startsWith('audio')) {
+      this.audioPlayControl(leaf.id);
+      return;
+    }
+    switch (leaf.id) {
+      case 'view-video-start':
+        if (this.curWareType == Consts.TYPE_VIDEO) {
+          if (this.videoPlayer.playStatus()) {
+            this.videoPlayer.pause();
+            document.getElementById('view-video-start').innerHTML = '播放';
+          } else {
+            this.videoPlayer.start();
+            document.getElementById('view-video-start').innerHTML = '暂停';
+          }
+        }
+        //添加播放记录
+        this.postPlayRecord(this.curWareId, this.courseId);
+        break;
+      case 'view-full-screen':
         if (this.curWareType === Consts.TYPE_IMAGE) {
-      		this.showScene(require('./ImageWareFullScreenScene.js'), {
-      			wareList: this.wareList,
-      			curWareIndex: this.curWareIndex,
-      			curImageList: this.curImageList,
-      			curImageIndex: this.curImageIndex,
+          this.showScene(require('./ImageWareFullScreenScene.js'), {
+            wareList: this.wareList,
+            curWareIndex: this.curWareIndex,
+            curImageList: this.curImageList,
+            curImageIndex: this.curImageIndex,
+          });
+        } else if (this.curWareType === Consts.TYPE_VIDEO) {
+          let video = document.getElementById('hls-video');
+          if (video) {
+            document.getElementById('view-content').removeChild(video);
+          }
+          this.showScene(require('./VideoWareFullScreenScene.js'), {
+            isFull: true,
+            wareList: this.wareList,
+            curWareIndex: this.curWareIndex,
+          });
+        } else if (this.curWareType === Consts.TYPE_AUDIOBOOK) {
+          // 全屏前移除audio标签
+          let audio = document.getElementById('courseware-audio');
+          let controls = document.querySelector('.audio-controls');
+          if (audio) {
+            document.getElementById('view-content').removeChild(audio);
+          }
+          if (controls) {
+            document.getElementById('view-content').removeChild(controls);
+          }
+          this.showScene(require('./AudioWareFullScreenScene.js'), {
+            wareList: this.wareList,
+            curWareIndex: this.curWareIndex,
+            curAudioList: this.curAudioList,
+            curAudioIndex: this.curAudioIndex,
             isDownload: this.isDownload,
-      		});
+          });
         }
-  			this.postPlayRecord(this.cur_item_id, this.courseId);
-  			break;
-  		case 'view-previous':
-  			if (this.curWareType === Consts.TYPE_IMAGE && this.curImageIndex - 1 >= 0) {
-  				this.curImageIndex -= 1;
-  				this.renderImageView();
-  			}
-  			this.postPlayRecord(this.curWareId, this.courseId);
-  			break;
-  		case 'view-next':
-  			if (this.curWareType === Consts.TYPE_IMAGE && this.curImageIndex + 1 < this.curImageList.length) {
-  				this.curImageIndex += 1;
-  				this.renderImageView();
-  			}
-  			this.postPlayRecord(this.curWareId, this.courseId);
-  		  break;
+        this.postPlayRecord(this.cur_item_id, this.courseId);
+        break;
+      case 'view-previous':
+        if (this.curWareType === Consts.TYPE_IMAGE && this.curImageIndex - 1 >= 0) {
+          this.curImageIndex -= 1;
+          this.renderImageView();
+        }
+        if (this.curWareType === Consts.TYPE_AUDIOBOOK && this.curAudioIndex - 1 >= 0) {
+          this.curAudioIndex -= 1;
+          this.renderAudioView();
+        }
+        this.postPlayRecord(this.curWareId, this.courseId);
+        break;
+      case 'view-next':
+        if (this.curWareType === Consts.TYPE_IMAGE && this.curImageIndex + 1 < this.curImageList.length) {
+          this.curImageIndex += 1;
+          this.renderImageView();
+        }
+        if (this.curWareType === Consts.TYPE_AUDIOBOOK && this.curAudioIndex + 1 < this.curAudioList.length) {
+          this.curAudioIndex += 1;
+          this.renderAudioView();
+        }
+        this.postPlayRecord(this.curWareId, this.courseId);
+        break;
       default:
         break;
   	}

src/stage/index/scene/VideoWareFullScreenScene.js

@@ -36,12 +36,31 @@ class VideoWareFullScreenScene extends scene {
                 this.initVideoPlayer(curWareItem);
             } else if (this.curWareType === Consts.TYPE_IMAGE) {
                 //进入到图片全屏场景
+                let imgList = curWareItem.list;
+                let imgIndex = 0;
+                if (type === 'BACK' && imgList.length) {
+                    imgIndex = imgList.length - 1;
+                }
                 this.hideScene();
                 this.showScene(require('./ImageWareFullScreenScene.js'), {
                     wareList: this.wareList,
                     curWareIndex: this.curWareIndex,
-                    curImageList: curWareItem.list,
-                    curImageIndex: 0,
+                    curImageList: imgList,
+                    curImageIndex: imgIndex,
+                });
+            } else if (this.curWareType === Consts.TYPE_AUDIOBOOK) {
+                //进入到音频全屏场景
+                let imgList = curWareItem.list;
+                let imgIndex = 0;
+                if (type === 'BACK' && imgList.length) {
+                    imgIndex = imgList.length - 1;
+                }
+                this.hideScene();
+                this.showScene(require('./AudioWareFullScreenScene.js'), {
+                    wareList: this.wareList,
+                    curWareIndex: this.curWareIndex,
+                    curAudioList: imgList,
+                    curAudioIndex: imgIndex,
                 });
             }
         }, 1500);

src/stage/index/style/AudioWareFullScreen.less

@@ -0,0 +1,65 @@
+#AudioWareFullScreen {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background-image: url(assets/img/icon.png);
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
+
+	audio {
+		width: 100%;
+		height: 100%;
+	}
+
+	.audio-controls {
+		z-index: 10;
+		position: absolute;
+		left: 0;
+		bottom: .4rem;
+		width: 100%;
+		height: .7rem;
+		.audio-controls-item {
+			width: .6rem;
+			height: .6rem;
+			border: solid unit(@borderSize, rem) transparent;
+			border-radius: 50%;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			&.btn-play {
+				float: left;
+				margin-left: .2rem;
+				background-image: url(assets/img/Audio/audio_stop.png);
+				&.paused {
+					background-image: url(assets/img/Audio/audio_play.png);
+				}
+			}
+			&.btn-mute {
+				float: left;
+				background-image: url(assets/img/Audio/audio_voice.png);
+				&.muted {
+					background-image: url(assets/img/Audio/audio_mute.png);
+				}
+			}
+			&.btn-last {
+				float: right;
+				background-image: url(assets/img/Audio/audio_last.png);
+			}
+			&.btn-next {
+				float: right;
+				margin-right: .2rem;
+				background-image: url(assets/img/Audio/audio_next.png);
+			}
+			&.fe-focus {
+				// .after-focus(@borderSize; #ffe100; .1rem; rgba(0,0,0,0.5));
+			}
+		}
+	}
+}

src/stage/index/style/LessonScene.less

@@ -124,6 +124,53 @@
 				width: 100%;
 				height: 100%;
 			}
+			audio {
+				width: 100%;
+				height: 100%;
+			}
+			.audio-controls {
+				z-index: 10;
+				position: absolute;
+				left: 0;
+				bottom: 1.22rem;
+				width: 10.72rem;
+				height: .6rem;
+				.audio-controls-item {
+					width: .6rem;
+					height: .6rem;
+					border: solid unit(@borderSize, rem) transparent;
+					border-radius: 50%;
+					background-size: 100% 100%;
+					background-repeat: no-repeat;
+					&.btn-play {
+						float: left;
+						margin-left: .2rem;
+						background-image: url(assets/img/Audio/audio_stop.png);
+						&.paused {
+							background-image: url(assets/img/Audio/audio_play.png);
+						}
+					}
+					&.btn-mute {
+						float: left;
+						background-image: url(assets/img/Audio/audio_voice.png);
+						&.muted {
+							background-image: url(assets/img/Audio/audio_mute.png);
+						}
+					}
+					&.btn-last {
+						float: right;
+						background-image: url(assets/img/Audio/audio_last.png);
+					}
+					&.btn-next {
+						float: right;
+						margin-right: .2rem;
+						background-image: url(assets/img/Audio/audio_next.png);
+					}
+					&.fe-focus {
+						// .after-focus(@borderSize; #ffe100; .1rem; rgba(0,0,0,0.5));
+					}
+				}
+			}
 		}
 
 		#view-bottom {

src/util/Consts.js

@@ -22,7 +22,9 @@ Consts.DATA_BUILDING = 'http://ljimgs.ai160.com/2b/app_resource/data_building.jp
 
 //图片/视频资源类型代号
 Consts.TYPE_VIDEO = 0;
+Consts.TYPE_AUDIO = 1;
 Consts.TYPE_IMAGE = 3;
+Consts.TYPE_AUDIOBOOK = 4;
 
 //产品类型
 Consts.TYPE_COURSE = 'COURSE';

src/util/EfunVideoPlayer.js

@@ -4,12 +4,6 @@ class EfunVideoPlayer {
     this.metadata = null;
   }
 
-  loadedHandler() {
-    this.efunplayer.addListener('loadedmetadata', () => {
-      this.metadata = this.efunplayer.getMetaDate();
-    });
-  }
-
   initPlayer(url, domId) {
     let videoObject = {
       autoplay: true,
@@ -30,7 +24,6 @@ class EfunVideoPlayer {
   }
 
   pause() {
-    console.log('click pause btn...');
     this.efunplayer.videoPause();
   }