Browse Source

Merge branch 'dev_winpc_touch' of http://gogs.efunbox.cn:3000/Rankin/2BTV-Web into dev_winpc_touch

zhanghe 6 years ago
parent
commit
d6adf74e7a

+ 11 - 12
src/res/tpl/DownloadScene.tpl

@@ -12,11 +12,11 @@
 					<div class="one right-border">下载日期</div>
 					<div class="two right-border">课程名称</div>
 					<div class="three right-border">课名称</div>
-					<div class="four right-border">进度</div>
-					<div class="five right-border">下载状态</div>
-					<div class="six">操作</div>
+					<div class="four right-border">下载状态</div>
+					<div class="five">操作</div>
 	    		</div>
 			</div>
+
 			<div class="horizon-line first-line"></div>
 			<div class="horizon-line"></div>
 			<div class="horizon-line"></div>
@@ -27,53 +27,54 @@
 			<div class="horizon-line"></div>
 			<div class="horizon-line"></div>
     	</div>
+
+
 		<div class="back-row">
 			<div class="one"></div>
 			<div class="two"></div>
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
     	</div>
+
 		<div class="back-row">
 			<div class="one"></div>
 			<div class="two"></div>
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
 	    </div>
+
 		<div class="back-row">
 			<div class="one"></div>
 			<div class="two"></div>
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
 	    </div>
+
 		<div class="back-row">
 			<div class="one"></div>
 			<div class="two"></div>
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
 		</div>
+
 		<div class="back-row">
 			<div class="one"></div>
 			<div class="two"></div>
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
 	  	</div>
+
 		<div class="back-row">
 			<div class="one"></div>
 			<div class="two"></div>
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
     	</div>
 		<div class="back-row">
 			<div class="one"></div>
@@ -81,7 +82,6 @@
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
     	</div>
 		<div class="back-row">
 			<div class="one"></div>
@@ -89,7 +89,6 @@
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
 	  	</div>
 		<div class="back-row">
 			<div class="one"></div>
@@ -97,8 +96,8 @@
 			<div class="three"></div>
 			<div class="four"></div>
 			<div class="five"></div>
-			<div class="six"></div>
     	</div>
+
     	<div fe-role="Scroll" fe-cfg="scroll_dir:v,scroll_center:con,scroll_duration:0.2,scroll_easing:linear" class="content-wrapper" >
 			<div class="scroll-list scroll-lines-wrapper clearfix" id="download-status-table-wrapper"></div>
 		</div>

+ 2 - 2
src/res/tpl/DownloadTipScene.tpl

@@ -1,8 +1,8 @@
 <div id="DownloadTipScene" class="course-download-wrapper" fe-role="Switch">
     <div class="toast">
         <img src="./../../stage/index/assets/img/CourseScene/download_btn_list_undownload.png" alt="">
-        <p>已下载<span id="downloadProcess"></span></p>
-        <p>正在下载中...请等待下载结束</p>
+        <p>已下载<span id="downloadProcess"></span>个文件</p>
+        <p>请等待下载结束</p>
         <div class="ok-btn" fe-role="Widget" id="ok-btn">确认</div>
     </div>
 </div>

BIN
src/stage/index/assets/img/CourseScene/download_btn_list_failed.png


+ 1 - 1
src/stage/index/index.html

@@ -66,7 +66,7 @@
 		document.head.appendChild(appCss);
 
 		var appScript = document.createElement('script');
-		appScript.src = './index.min.js?t=' + ts;
+		appScript.src = './index.js?t=' + ts;
 		document.body.appendChild(appScript);
 	</script>
 	<script>

+ 18 - 14
src/stage/index/scene/CourseScene.js

@@ -250,6 +250,11 @@ class CourseScene extends scene {
 				TVUtil.Toast.show('本地服务请求失败...', 3000);
 				return;
 			}
+			if (event.target.con.classList.contains('download-btn-lesson-list-failed')) {
+				event.target.con.classList.add('download-btn-lesson-list-ongoing');
+				event.target.con.classList.remove('download-btn-lesson-list-failed');
+				return;
+			}
 			if (event.target.con.classList.contains('download-btn-lesson-list-ready')) {
   			event.target.con.classList.add('download-btn-lesson-list-ongoing');
   			event.target.con.classList.remove('download-btn-lesson-list-ready');
@@ -343,21 +348,19 @@ class CourseScene extends scene {
 
 		// 点击正在下载的某一课
 		if (e.target.con.classList.contains('download-btn-lesson-list-ongoing') || e.target.con.classList.contains('download-btn-lesson-icon-ready')) {
-      console.log('e.target', e.target);
-      let id = (e.target.id).split("download-btn-")[1];
-
-      APIClient.getDownloadProcess( id, ( isTrue, res)=> {
-        let storageUsageStr = res.data.resSize + '/' + res.data.resTotal;
-        let downloadProcess = document.getElementById('downloadProcess');
-        downloadProcess.innerText = storageUsageStr;
-      } )
-      this.showScene(require('./DownloadTipScene.js'), {});
-      return;
+      	let id = (e.target.id).split("download-btn-")[1];
+      	APIClient.getDownloadProcess( id, ( isTrue, res)=> {
+        	let storageUsageStr = res.data.resSize + '/' + res.data.resTotal;
+        	let downloadProcess = document.getElementById('downloadProcess');
+        	downloadProcess.innerText = storageUsageStr;
+      	})
+      	this.showScene(require('./DownloadTipScene.js'), {});
+      	return;
 		}
 
 		if (e.target.con.classList.contains('img-wrapper') || e.target.con.classList.contains('text-wrapper')) {
 			// 课件模版 COURSE_WARE_VIDEO(课视频模版)  COURSE_WARE_LIST(课列表)
-      let id = e.target.con.dataset.id;
+      		let id = e.target.con.dataset.id;
       //检查课的权限
 			//首先获取课的序号
 			let lessonSeq = parseInt(e.target.con.dataset.seq);
@@ -415,8 +418,10 @@ class CourseScene extends scene {
 
     //点击课的下载按钮
     if (e.target.con.classList.contains('download-btn-lesson-list-ready')
-		|| e.target.con.classList.contains('download-btn-lesson-icon-ready')) {
-      let courseID = this.id;
+		|| e.target.con.classList.contains('download-btn-lesson-icon-ready') 
+		|| e.target.con.classList.contains('download-btn-lesson-icon-failed')
+		|| e.target.con.classList.contains('download-btn-lesson-list-failed')) {
+      		let courseID = this.id;
 			let courseName = this.title;
 			let lessonID = e.target.con.dataset.id;
 			let lessonName = e.target.con.dataset.name;
@@ -434,7 +439,6 @@ class CourseScene extends scene {
 				return;
 			}
 			*/
-
 			this.addLessonDownloadTask({ lessonID, courseID, event: e });
 		}
 	}

+ 10 - 9
src/stage/index/scene/DownloadManagerScene.js

@@ -113,6 +113,10 @@ class DownloadManagerScene extends scene {
             default:
                 downloadDesc = '未下载';
             }
+            // 删除按钮是否可点击
+            let delDisable = downloadStatus === Consts.DOWNLOAD_STATUS_ONGOING ? true : false;
+            let feRole = delDisable ? '' : 'fe-role="Widget"';
+
             if (!rec['lessonName']) {
                 rec['lessonName'] = rec['courseName'];
             }
@@ -121,15 +125,14 @@ class DownloadManagerScene extends scene {
             <div class="one">${downloadDateStr}</div>
             <div class="two">${rec['courseName']}</div>
             <div class="three">${rec['lessonName']}</div>
-            <div class="four">${storageUsageStr}</div>
-            <div class="five">${downloadDesc}</div>
-            <div class="six" >
+            <div class="four">${downloadDesc}(${storageUsageStr})</div>
+            <div class="five" >
               <div id="download-btn-wrapper" fe-fole="Switch">
                 <div id="enter-btn-lesson-${rec['lessonId']}" class="download-enter-btn" fe-role="Widget" data-id="${rec['lessonId']}">
                   <img src="./assets/img/DownloadScene/download_enter_btn.png" class="img-btn"/>
                 </div>
-                <div id="del-btn-lesson-${rec['lessonId']}" class="download-del-btn" fe-role="Widget" data-id="${rec['lessonId']}" >
-                  <img src="./assets/img/DownloadScene/download_del_btn.png" class="img-btn"/>
+                <div id="del-btn-lesson-${rec['lessonId']}" class="download-del-btn" ${feRole} data-id="${rec['lessonId']}" >
+                  <img src="./assets/img/DownloadScene/download_del_btn.png" class="${delDisable ? 'img-disable-btn' : 'img-btn'}"/>
                 </div>
               </div>
             </div>
@@ -139,9 +142,8 @@ class DownloadManagerScene extends scene {
           <div class="one">下载日期</div>
           <div class="two">课程名称</div>
           <div class="three">课名称</div>
-          <div class="four">进度</div>
-          <div class="five">下载状态</div>
-          <div class="six">操作</div>
+          <div class="four">下载状态</div>
+          <div class="five">操作</div>
           </div>`
         return `${trAcc}`;
     }
@@ -207,7 +209,6 @@ class DownloadManagerScene extends scene {
             let courseId = this.lessonItems[lessonId].courseId;
             let lessonName = this.lessonItems[lessonId].lessonName;
             let downloadStatus = this.lessonItems[lessonId].downloadStatus;
-            // enter relative lesson scene
             this.showScene(require('./LessonScene.js'), {courseId, downloadStatus, id:lessonId, title:lessonName});
         }
     }

+ 0 - 3
src/stage/index/scene/IndexScene.js

@@ -33,9 +33,7 @@ class IndexScene extends scene {
         this.loadHistoryList();
         this.loadTerminal();
         this.loadDownloadList();
-
 				ShopCartState.updateCount();
-
 				//记录用户登录行为
 				let {status, data} = CommandBus.execute({
 					type: CMD_TYPE.APP_BHV_USER_LOGIN,
@@ -166,7 +164,6 @@ class IndexScene extends scene {
 	}
 
 	onBack() {
-		this.showScene(require('./QuitConfirmScene.js'), {});
 		return true;
 	}
 

+ 1 - 1
src/stage/index/scene/LessonScene.js

@@ -238,7 +238,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, url, 'hls-video');
+    this.videoPlayer.initPlayer(url, 'hls-video');
   	// 监控到初始化视频成功后暂停画面
   	this.timer = window.setInterval(() => {
   		if (this.videoPlayer.playStatus()) {

+ 9 - 0
src/stage/index/style/CourseScene.less

@@ -264,6 +264,11 @@
 					.download-btn-lesson-list-ready;
 					background-image:url('assets/img/CourseScene/download_btn_list_success.png');
 				}
+				.download-btn-lesson-list-failed {
+					.download-btn-lesson-list-ready;
+					background-image:url('assets/img/CourseScene/download_btn_list_failed.png');
+				}
+
 			}
 		}
 
@@ -328,6 +333,10 @@
 						.download-btn-lesson-icon-ready;
 						background-image:url('assets/img/CourseScene/download_btn_icon_success.png');
 					}
+					.download-btn-lesson-icon-failed {
+						.download-btn-lesson-icon-ready;
+						background-image:url('assets/img/CourseScene/download_btn_icon_success.png');
+					}
 		        }//lesson-wrapper
 			}
 		}

+ 12 - 18
src/stage/index/style/DownloadScene.less

@@ -93,15 +93,12 @@
 				.right-border;
 			}
 			.four {
-				width:1.5rem;
+				width:2.6rem;
 				.right-border;
 			}
 			.five {
-				width:2rem;
-				.right-border;
-			}
-			.six {
 				width:2.9rem;
+				text-align: center;
 			}
 		}
 	}
@@ -149,15 +146,11 @@
 			width:3.37rem;
 		}
 		.four {
-			width:1.5rem;
+			width:2.6rem;
 		}
 		.five {
-			width:2rem;
-		}
-		.six {
 			width:2.9rem;
 			text-align: center;
-
 			.download-enter-btn {
 				width: 1.7rem;
 				height: .6rem;
@@ -166,11 +159,6 @@
 					height: 100%;
 					width: 100%;
 				}
-
-				&.fe-focus {
-			//		border: .05rem solid #ffe100;
-			//		border-radius: .25rem;
-				}
 			}
 
 			.download-del-btn {
@@ -181,9 +169,15 @@
 					height: 100%;
 					width: 100%;
 				}
-				&.fe-focus {
-					//border: .05rem solid #ffe100;
-					//border-radius: .25rem;
+				.img-disable-btn {
+					height: 100%;
+					width: 100%;
+					-webkit-filter: grayscale(100%);
+					-moz-filter: grayscale(100%);
+					-ms-filter: grayscale(100%);
+					-o-filter: grayscale(100%);
+					filter: grayscale(100%);
+					filter: gray;
 				}
 			}
 		}

+ 3 - 3
src/util/API/APIClient.js

@@ -202,15 +202,15 @@ class APIClient {
 	// 获取用户的下载记录
 	static getUserDownloadList(callback) {
 		APIClient.getUserMacUrl( ( mac ) => {
-      AJAXHelper.get('/callback/download/list', { mac: mac }, callback);
+			AJAXHelper.get('/callback/download/list', { mac: mac }, callback);
 		});
 	}
 
 	//refresh 处的查询下载记录
 	static getDownloadList(callback) {
     APIClient.getUserMacUrl( ( mac ) => {
-			let params =  { mac: mac };
-      AJAXHelper.get('/callback/download/fail', params, callback);
+		let params =  { mac: mac };
+      	AJAXHelper.get('/callback/download/fail', params, callback);
     });
   }
 }

+ 28 - 0
src/util/EfunVideoPlayer.js

@@ -18,6 +18,34 @@ 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;

+ 1 - 2
src/util/WinBoxAPI.js

@@ -5,7 +5,7 @@ class WinBoxAPI {
   constructor() {}
 
   static whenAjaxResponse(httpRequest, callback) {
-		if (httpRequest.readyState != 4) {
+    if (httpRequest.readyState != 4) {
 			return;
 		}
     try {
@@ -13,7 +13,6 @@ class WinBoxAPI {
 		  callback(httpRequest.status == 200, res);
     }
     catch(err) {
-      console.log(err);
       callback(false, {});
     }
   }

+ 2 - 1
src/util/course.js

@@ -15,7 +15,6 @@ class Course {
 		let item = data[idx];
 			recs.push(item.id);
 		}
-
 		// 现在只按文字模板进行渲染
 		main.innerHTML = this.textList(data, auth);
 	}
@@ -29,6 +28,8 @@ class Course {
 			}
 			else if (data.downloadStatus == Consts.DOWNLOAD_STATUS_SUCCESS) {
 				btnClass = 'download-btn-lesson-list-success';
+			} if ( data.downloadStatus == Consts.DOWNLOAD_STATUS_FAILED ) {
+				btnClass = 'download-btn-lesson-list-failed';
 			}
 			return `
 				<div data-seq="${seq}">