调整登录界面交互

src/res/tpl/LoginScene.tpl

@@ -5,7 +5,7 @@
 
 		<div class="form-sid">
 			<div class="form-sid-label">
-				学&nbsp;&nbsp;号
+				学&nbsp;&nbsp;号:
 			</div>
 			<div class="form-sid-input">
 				<input id="sid-input" class="form-item" name="sid" type="text" readonly fe-role="Widget"/>
@@ -14,7 +14,7 @@
 
 		<div class="form-password">
 			<div class="form-password-label">
-				密&nbsp;&nbsp;码
+				密&nbsp;&nbsp;码:
 			</div>
 			<div class="form-password-input">
 				<input id="password-input" class="form-item" name="password" type="text" readonly fe-role="Widget"/>

src/stage/index/scene/CourseScene.js

@@ -437,12 +437,11 @@ class CourseScene extends scene {
 			let lessonID = e.target.con.dataset.id;
 			let lessonName = e.target.con.dataset.name;
 
-			/*调试不启用
 			let lessonSeq = parseInt(e.target.con.dataset.seq);
 			if (!this.isAuthorized(lessonSeq)) {
 				TVUtil.Toast.show('购买后方可下载!', 3000);
 				return;
-			}*/
+			}
 
 			/* windows不提供此方法
 			if (this.getAvailableBlocks() < 200*1024){

src/stage/index/scene/DownloadManagerScene.js

@@ -168,7 +168,7 @@ class DownloadManagerScene extends scene {
     }
 
     onResume(retData) {
-      if (!retData) return;
+      if (!retData || !retData.isDelete) return;
       //send delete cmd
       let lessonId = retData.lessonId;
       let courseId = this.lessonItems[lessonId]['courseId']

src/stage/index/scene/LessonScene.js

@@ -24,10 +24,11 @@ function checkDownloadStatus(status) {
   }
 }
 
-function getLocalResourceUrl(absoluteUrl) {
-  if (!absoluteUrl) return;
-  const segments = absoluteUrl.split('/') || [];
-  return `${Consts.NODE_SERVER}/lesson/readFile?n=${segments.slice(3).join('*')}`;
+function getLocalResourceUrl(onlineURL) {
+  if (!onlineURL) return;
+  const segments = onlineURL.split('/') || [];
+  const localURL = `${Consts.NODE_SERVER}/lesson/readFile?n=${segments.slice(3).join('*')}`;
+  return localURL;
 }
 
 class LessonScene extends scene {
@@ -155,10 +156,6 @@ class LessonScene extends scene {
     const { title, type, list } = item;
     //设定视窗的标题
     document.getElementById('view-top').innerHTML = title;
-    //关闭安卓播放器
-  	if (window.efunbox) {
-  		window.efunbox.closePlayer();
-  	}
   	switch (type) {
   		case Consts.TYPE_VIDEO:
   			let playUrl = '';
@@ -223,7 +220,7 @@ class LessonScene extends scene {
   	document.getElementById('view-page').innerHTML = (this.curImageIndex + 1) + '/' + this.curImageList.length;
     let imageDom = `<img src="${curImage.url}" />`
     if (this.isDownload) {
-      imageDom = `<img src="${getLocalResourceUrl(curImage.url)}" onerror="this.src='${curImage.url}'" />`
+      imageDom = `<img src="${getLocalResourceUrl(curImage.url)}" />`
     }
   	document.getElementById('view-content').innerHTML = imageDom;
   }
@@ -232,29 +229,16 @@ class LessonScene extends scene {
   * 渲染视频视图
   */
   renderVideoView(name, url, type) {
+    // 处理视频链接，是读本地还是读线上
     let localUrl = url;
     if (this.isDownload) {
       localUrl = getLocalResourceUrl(url)
     }
-    if (window.efunbox) {
-        window.efunbox.initAndroidPlayer(
-        	name,
-        	localUrl,
-        	1, //与android里的音视频类型定义有关，这里写死为type=1
-        	this.videoPosition.top,
-        	this.videoPosition.left,
-        	this.videoPosition.width,
-        	this.videoPosition.height,
-        	false
-        );
-        window.efunbox.start();
-        this.videoPlayer = window.efunbox;
-    } else {
-        const videoDom = `<div id="hls-video"></div>`;
-        document.getElementById('view-content').innerHTML = videoDom;
-        this.videoPlayer = new EfunVideoPlayer();
-        this.videoPlayer.initPlayer(localUrl, 'hls-video', url);
-    }
+    // 初始化视频播放器
+    const videoDom = `<div id="hls-video"></div>`;
+    document.getElementById('view-content').innerHTML = videoDom;
+    this.videoPlayer = new EfunVideoPlayer();
+    this.videoPlayer.initPlayer(localUrl, url, 'hls-video');
   	// 监控到初始化视频成功后暂停画面
   	this.timer = window.setInterval(() => {
   		if (this.videoPlayer.playStatus()) {
@@ -290,12 +274,9 @@ class LessonScene extends scene {
     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('src', this.isDownload ? getLocalResourceUrl(audioUrl) : audioUrl);
       audioElement.setAttribute('autoplay', 'autoplay');
       let controlsElement = document.createElement('div');
       controlsElement.setAttribute('class', 'audio-controls');
@@ -427,8 +408,7 @@ class LessonScene extends scene {
 
   onCreate(data) {
     //是否已下载
-    // this.isDownload = checkDownloadStatus(data.downloadStatus);
-    this.isDownload = true;
+    this.isDownload = checkDownloadStatus(data.downloadStatus);
     this.lessonId = data.id;
     this.courseId = data.courseId;
     this.setContentView(require('../../../res/tpl/LessonScene.tpl'), {}, 'LessonScene', {}, () => {
@@ -466,8 +446,12 @@ class LessonScene extends scene {
   onOK(e) {
     // 点击后退按钮
     if (e.target.con.classList.contains('goback')) {
-      this.hideScene({id: this.courseId}, 'CourseScene');
-      return;
+			if ( -1 != this.moye.focusList.indexOf('CourseScene')) {
+        this.hideScene({id: this.courseId}, 'CourseScene');
+        return;
+      } else {
+        this.hideScene();
+      }
     }
     // 拦截音频控制相关事件单独处理
   	const leaf = FocusEngine.getFocusedLeaf();

src/stage/index/scene/LoginScene.js

@@ -15,6 +15,9 @@ class LoginScene extends scene {
 	 * @desc 将登录逻辑抽象为此函数,方便多处调用
 	 */
 	loginLogic() {
+		//触发登录逻辑后输入框置灰
+		document.querySelector('.form-sid').style.borderColor = '#d3d3d3';
+		document.querySelector('.form-password').style.borderColor = '#d3d3d3';
 		let stu_no = this.sidInput.value.replace(/\s|\|/g, '');
 		let password = this.passwordInput.value.replace(/\s|\|/g, '');
 		APIClient.userLoginAndBindDevice({
@@ -30,16 +33,12 @@ class LoginScene extends scene {
 				if ( -1 != this.moye.focusList.indexOf('IndexScene')){
 					this.hideScene({success: true}, 'IndexScene');
 				} else {
-      				this.showScene(require('./IndexScene.js'), {});
+      		this.showScene(require('./IndexScene.js'), {});
 				}
 			} else if (Consts.API_CODE_ISBOUND == res.code) {
 				this.showScene(require('./RepeatLoginScene.js'), {});
 			} else {
 				TVUtil.Toast.show('帐号或密码错误！', 3000);
-				this.sidInput.value = '|';
-				this.passwordInput.value = '';
-				this.moye.root.getWidgetById('sid-input').focus();
-				this.onKeydown();
 			}
 		});
 	}
@@ -51,12 +50,11 @@ class LoginScene extends scene {
 			this.submitInput = document.getElementById('submit-input');
 			this.sidInput.value = '|';
 			this.passwordInput.value = '';
-			this.moye.root.getWidgetById('key-5').focus();
 		});
 		document.querySelector('.form-sid').style.borderColor = '#4682B4';
 	}
 
-	onResume(data) { }
+	onResume() { }
 
 	onPause() { }
 
@@ -70,7 +68,43 @@ class LoginScene extends scene {
 
 	onKeyup(e) { }
 
+	onKeydown(e) { }
+
 	onOK(e) {
+		if (e.target.id !== this.currFocus) {
+			if (this.currFocus === 'sid-input' || this.currFocus === 'password-input') {
+				const currInput = document.getElementById(this.currFocus);
+				currInput.value = currInput.value.replace(/\|/g, '');
+				if (e.target.id !== 'submit-input') {
+					const nextInput = document.getElementById(e.target.id);
+					nextInput.value = nextInput.value + '|';
+				}
+			}
+		}
+		//左侧input控件切换逻辑
+		switch(e.target.id) {
+			case 'sid-input':
+				document.querySelector('.form-sid').style.borderColor = '#4682B4';
+				document.querySelector('.form-password').style.borderColor = '#d3d3d3';
+				this.currFocus = e.target.id;
+				return;
+			case 'password-input':
+				document.querySelector('.form-password').style.borderColor = '#4682B4';
+				document.querySelector('.form-sid').style.borderColor = '#d3d3d3';
+				this.currFocus = e.target.id;
+				return;
+			case 'submit-input':
+				const account = this.sidInput.value.replace(/\s|\|/g, '');
+				const password = this.passwordInput.value.replace(/\s|\|/g, '');
+				if (account && password) {
+					this.loginLogic();
+				}
+				return;
+			default:
+				break;
+		}
+
+		//右侧键盘点击处理逻辑
 		let key = null;
 		switch (e.target.id) {
 			case 'key-1':
@@ -111,80 +145,38 @@ class LoginScene extends scene {
 				break;
 		}
 
-		let currInput = document.getElementById(this.currFocus);
-		if (this.currFocus !== 'submit-input') {
-			if (typeof key === 'number') {
-				if (this.currFocus === 'sid-input') {
-					currInput.value = (currInput.value.replace(/\s|\|/g, '') + key.toString()).replace(/(\d{4})/g, '$1 ').trim() + '|';
-				}
-				if (this.currFocus === 'password-input') {
-					currInput.value = (currInput.value.replace(/\s|\|/g, '') + key.toString()).replace(/(\d{4})/g, '$1 ').trim() + '|';
-				}
-			} else if (key === 'backspace') {
-				currInput.value = currInput.value.indexOf('|') === -1 ? currInput.value.slice(0, -1) : currInput.value.slice(0, -2) + '|';
-			} else if (key === 'enter') {
-				if (this.currFocus === 'password-input') {
-					this.loginLogic();
-				}
-				let focusArr = ['sid-input', 'password-input', 'submit-input', 'submit-input'];
-				let nextInputIndex = focusArr.indexOf(this.currFocus);
-				// console.log(focusArr[nextInputIndex + 1]);
-				let nextInput = this.moye.root.getWidgetById(focusArr[nextInputIndex + 1]);
-				nextInput.focus();
-				this.onKeydown();
+		/* 动态改变input内的值 */
+		const currInput = document.getElementById(this.currFocus);
+		if (typeof key === 'number') {
+			if (this.currFocus === 'sid-input') {
+				currInput.value = (currInput.value.replace(/\s|\|/g, '') + key.toString()).replace(/(\d{4})/g, '$1 ').trim() + '|';
 			}
-		} else {
-			if (key !== null) {
-				this.moye.root.getWidgetById('submit-input').focus();
-			} else {
+			if (this.currFocus === 'password-input') {
+				currInput.value = (currInput.value.replace(/\s|\|/g, '') + key.toString()).replace(/(\d{4})/g, '$1 ').trim() + '|';
+			}
+		} else if (key === 'backspace') {
+			currInput.value = currInput.value.indexOf('|') === -1 ? currInput.value.slice(0, -1) : currInput.value.slice(0, -2) + '|';
+		} else if (key === 'enter') {
+			const account = this.sidInput.value.replace(/\s|\|/g, '');
+			const password = this.passwordInput.value.replace(/\s|\|/g, '');
+			if (this.currFocus === 'sid-input' && account) {
+				document.querySelector('.form-password').style.borderColor = '#4682B4';
+				document.querySelector('.form-sid').style.borderColor = '#d3d3d3';
+				document.querySelector('#submit-input').style.background = '#ccc';
+				this.currFocus = 'password-input';
+			}
+			else if (this.currFocus === 'password-input' && password) {
 				this.loginLogic();
 			}
 		}
-	}
 
-	onKeydown(e) {
-		const leaf = FocusEngine.getFocusedLeaf();
-		switch (leaf.id) {
-			case 'sid-input':
-				document.querySelector('.form-sid').style.borderColor = '#ff5a00';
-				document.querySelector('.form-password').style.borderColor = '#d3d3d3';
-				this.passwordInput.value = this.passwordInput.value.replace(/\|/g, '');
-				this.sidInput.value = this.sidInput.value.indexOf('|') === -1 ? this.sidInput.value + '|' : this.sidInput.value;
-				if (this.currFocus !== 'sid-input') {
-					this.moye.root.getWidgetById('key-5').focus();
-					this.currFocus = 'sid-input';
-					// 焦点离开 - 颜色变为输入状态颜色
-					document.querySelector('.form-sid').style.borderColor = '#4682B4';
-				}
-				break;
-			case 'password-input':
-				document.querySelector('.form-sid').style.borderColor = '#d3d3d3';
-				document.querySelector('.form-password').style.borderColor = '#ff5a00';
-				this.sidInput.value = this.sidInput.value.replace(/\|/g, '');
-				this.passwordInput.value = this.passwordInput.value.indexOf('|') === -1 ? this.passwordInput.value + '|' : this.passwordInput.value;
-				if (this.currFocus !== 'password-input') {
-					this.moye.root.getWidgetById('key-5').focus();
-					this.currFocus = 'password-input';
-					// 焦点离开 - 颜色变为输入状态颜色
-					document.querySelector('.form-password').style.borderColor = '#4682B4';
-				}
-				break;
-			case 'submit-input':
-				document.querySelector('.form-sid').style.borderColor = '#d3d3d3';
-				document.querySelector('.form-password').style.borderColor = '#d3d3d3';
-				this.passwordInput.value = this.passwordInput.value.replace(/\|/g, '');
-				this.sidInput.value = this.sidInput.value.replace(/\|/g, '');
-				this.currFocus = 'submit-input';
-				break;
-			default:
-				if (this.currFocus == 'sid-input') {
-					document.querySelector('.form-sid').style.borderColor = '#4682B4';
-					document.querySelector('.form-password').style.borderColor = '#d3d3d3';
-				} else if (this.currFocus == 'password-input') {
-					document.querySelector('.form-sid').style.borderColor = '#d3d3d3';
-					document.querySelector('.form-password').style.borderColor = '#4682B4';
-				}
-				break;
+		/* 根据sid-input与password-input是否有值动态更换submit-input颜色 */
+		const account = this.sidInput.value.replace(/\s|\|/g, '');
+		const password = this.passwordInput.value.replace(/\s|\|/g, '');
+		if (account && password) {
+			document.querySelector('#submit-input').style.background = '#2973d7';
+		} else {
+			document.querySelector('#submit-input').style.background = '#ccc';
 		}
 	}
 }

src/stage/index/style/LoginScene.less

@@ -112,11 +112,7 @@
 				font-size: 0.45rem;
 				color: #fff;
 				background: #ccc;
-
-				&.fe-focus {
-					background: #2973d7;
-				//	.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
-				}
+				outline: none;
 			}
 		}
 	}
@@ -190,9 +186,6 @@
 					background-image: url('assets/img/LoginScene/enter.png');
 				}
 			}
-			&.fe-focus .key-icon {
-			//	.after-focus(@outLineSize; #ff5a00; 0; #ff5a00);
-			}
 		}
 	}
 }

src/util/EfunVideoPlayer.js

@@ -18,34 +18,6 @@ class EfunVideoPlayer {
     }
     this.efunplayer = new ckplayer(videoObject);
   }
-
-  playStatus() {
-    return (this.metadata || {})['paused'];
-  }
-
-  pause() {
-    this.efunplayer.videoPause();
-  }
-
-  start() {
-    this.efunplayer.videoPlay();
-  }
-
-  fullScreen() {
-    this.efunplayer.webkitRequestFullScreen();
-  }
-
-  getCurtime() {
-    return this.efunplayer.currentTime * 1000;
-  }
-
-  getDuration() {
-    return this.efunplayer.duration * 1000;
-  }
-
-  seekProgress(currentTime) {
-    this.efunplayer.videoSeek(currentTime);
-  }
 }
 
 module.exports = EfunVideoPlayer;

src/util/WinBoxAPI.js

@@ -8,8 +8,14 @@ class WinBoxAPI {
 		if (httpRequest.readyState != 4) {
 			return;
 		}
-		let res = JSON.parse(httpRequest.responseText);
-		callback(httpRequest.status == 200, res);
+    try {
+		  let res = JSON.parse(httpRequest.responseText);
+		  callback(httpRequest.status == 200, res);
+    }
+    catch(err) {
+      console.log(err);
+      callback(false, {});
+    }
   }
 
   static baseRequest(method, path, params, callback) {
@@ -59,12 +65,6 @@ class WinBoxAPI {
     let params = { lessonId, courseId, uid, eid, token };
     WinBoxAPI.get(path, params, callback);
   }
-
-  static readDownloadedFile(lessonId, courseId, callback) {
-		const { token = '', uid = '', eid = '' } = userDataStorage.getData() || {};
-    let path = '/lesson/readFile';
-    let params = { lessonId, courseId, uid, eid, token };
-  }
 }
 
 module.exports = WinBoxAPI;