|
|
@@ -0,0 +1,269 @@
|
|
|
+import Consts from '../../../util/Consts';
|
|
|
+
|
|
|
+class AudioWareFullScreenScene extends scene {
|
|
|
+ constructor(scope) {
|
|
|
+ super(scope);
|
|
|
+ this.wareList = [];
|
|
|
+ this.curWareIndex = 0;
|
|
|
+ this.curWareType = null;
|
|
|
+ this.curAudioList = [];
|
|
|
+ this.curAudioIndex = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 音频播放控制
|
|
|
+ */
|
|
|
+ audioPlayControl(eventId) {
|
|
|
+ let targetAudio = document.getElementById('courseware-audio');
|
|
|
+ if (!targetAudio) { return; }
|
|
|
+ const changeContent = () => {
|
|
|
+ // 更换图片
|
|
|
+ let imgDom = document.getElementById('img-wrapper');
|
|
|
+ let curAudio = this.curAudioList[this.curAudioIndex];
|
|
|
+ const { bgUrl, playUrl } = curAudio;
|
|
|
+ let newImg = `<img src="${Consts.IMG_PATH}/${bgUrl}" />`
|
|
|
+ imgDom.innerHTML = newImg;
|
|
|
+ }
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'audio-last':
|
|
|
+ if (this.curAudioIndex > 0) {
|
|
|
+ this.curAudioIndex -= 1;
|
|
|
+ this.renderAudioView();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 音频渲染
|
|
|
+ */
|
|
|
+ renderAudioView() {
|
|
|
+ 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 imgHTML = `<img src="${Consts.IMG_PATH}/${imgPath}" />`;
|
|
|
+ content.innerHTML = imgHTML;
|
|
|
+ // 2.根据是否有无audioURL来控制面板及audio的展现
|
|
|
+ if (type === Consts.TYPE_AUDIOBOOK && audioUrl) {
|
|
|
+ let audioElement = document.createElement('audio');
|
|
|
+ audioElement.setAttribute('id', 'courseware-audio');
|
|
|
+ audioElement.setAttribute('src', audioUrl);
|
|
|
+ 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-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();
|
|
|
+ FocusEngine.getWidgetById('audio-play').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) {
|
|
|
+ const nextWareIndex = this.curWareIndex + 1;
|
|
|
+ this.dynamicChangeWare(nextWareIndex, 'NEXT')
|
|
|
+ //当前图片是该图片课件最后一张图片，且后边没有课件，给出提示
|
|
|
+ } else if (this.curAudioIndex === this.curAudioList.length - 1 && !hasNextWare) {
|
|
|
+ TVUtil.Toast.show('已经是最后一个课件了', 2000);
|
|
|
+ //当前图片不是该图片课件的最后一张图片
|
|
|
+ } else {
|
|
|
+ this.curAudioIndex += 1;
|
|
|
+ this.renderAudioView();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ keyLeftHandler() {
|
|
|
+ const hasPreviousWare = this.curWareIndex === 0 ? false : true;
|
|
|
+ //当前图片是该图片课件的第一张图片，且前边还有课件
|
|
|
+ if (this.curAudioIndex == 0 && hasPreviousWare) {
|
|
|
+ const previousWareIndex = this.curWareIndex - 1;
|
|
|
+ this.dynamicChangeWare(previousWareIndex, 'BACK');
|
|
|
+ //当前图片是该图片课件的第一张图片，且前边没有课件，则给出提示
|
|
|
+ } else if (this.curAudioIndex === 0 && !hasPreviousWare) {
|
|
|
+ TVUtil.Toast.show('已经是第一个课件了', 2000);
|
|
|
+ //当前图片不是该图片课件的第一张图片
|
|
|
+ } else {
|
|
|
+ this.curAudioIndex -= 1;
|
|
|
+ this.renderAudioView();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onCreate(data) {
|
|
|
+ this.wareList = data.wareList;
|
|
|
+ this.curWareIndex = data.curWareIndex;
|
|
|
+ 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) {
|
|
|
+ switch (e.keyCode) {
|
|
|
+ //左键
|
|
|
+ case 37:
|
|
|
+ // 如当前光标在控制按钮上，阻止向左
|
|
|
+ if (!FocusEngine.getFocusedLeaf().id.startsWith('audio')) {
|
|
|
+ this.keyLeftHandler();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ //右键
|
|
|
+ case 39:
|
|
|
+ // 如当前光标在控制按钮上，阻止向右
|
|
|
+ if (!FocusEngine.getFocusedLeaf().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;
|
