add recording pause

ykxie
1 parent 69ae38c8
Showing 6 changed files with 90 additions and 84 deletions
src/css/recording.css
src/index.html
src/js/gbreplayer.js
src/js/recorder/Myna.js
src/player.html
src/scss/recording.scss
@@ -52,12 +52,13 @@ button {
     left: 50%;
     transform: translate(-50%, -50%); }
-.recording-page .col-md-8 {
-  padding-right: 0;
-  overflow: hidden; }
-
-.recording-page .col-md-4 {
-  padding-left: 0; }
+.recording-page {
+  padding-top: 16px; }
+  .recording-page .col-md-8 {
+    padding-right: 0;
+    overflow: hidden; }
+  .recording-page .col-md-4 {
+    padding-left: 0; }
 .real-program-title {
   width: 100%;
@@ -16,7 +16,7 @@
     <link href="css/recording.css" rel="stylesheet">
     <script>
-        var gxb_api = "https://restful.gaoxiaobang.com";
+        var gxb_api = "https://restful1.gaoxiaobang.com";
         // var gxb_api = "https://restful.gaoxiaobang.cn"
     </script>
@@ -119,9 +119,9 @@
                                 <div class="tab-pane active padall15" id="stdin">
                                     <input type="text" class="form-control" id="input" placeholder="标准输入">
                                 </div>
-                                <div class="tab-pane padall15" id="cmpinfo">...</div>
-                                <div class="tab-pane padall15" id="stderr">...</div>
-                                <div class="tab-pane padall15" id="output">...</div>
+                                <div class="tab-pane padall15" id="cmpinfo"></div>
+                                <div class="tab-pane padall15" id="stderr"></div>
+                                <div class="tab-pane padall15" id="output"></div>
                             </div>
                         </div>
                     </div>
@@ -243,7 +243,7 @@
             window.location.reload();
         }
     })
-
+ 
     // 结束播放事件
     audio.addEventListener("ended", function() {
         timer.stopTimer();
@@ -348,47 +348,8 @@ $(function(){
 			});	
 			// 初始化渲染编辑页面
-			if (document.URL.indexOf('index.htm')>=0) {
-				if(_languageid == 35){
-				    // GBCodePlayBack.htmleditor.setValue(
-				    //     '<!doctype html>\n' +
-				    //     '<html>\n' +
-				    //     '<head>\n' +
-				    //     '  <meta charset="UTF-8">\n' +
-				    //     '  <title>Document</title>\n' +
-				    //     '</head>\n' +
-				    //     '<body>\n' +
-				    //     '  \n' +
-				    //     '</body>\n' +
-				    //     '</html>' 
-				    // );
-				    $('#htmlbutton').data('languageid',35).attr('data-original-title', 'HTML/CSS/JS').html("HTML/CSS/JS").trigger('click');
-				}else if(_languageid == 10){
-				    $('#htmlbutton').data('languageid',10).html("java").trigger('click');
-				    GBCodePlayBack.htmleditor.setOption('mode','text/x-java');
-				}else if(_languageid == 43){
-				    GBCodePlayBack.htmleditor.setValue('/* Objective-c基础代码 */\n');
-				    $('#htmlbutton').data('languageid',43).attr('data-original-title', 'Objective-c').html("Objective-c").trigger('click');
-				    GBCodePlayBack.htmleditor.setOption('mode','text/x-csrc');
-				}else if(_languageid == 11){
-				    GBCodePlayBack.htmleditor.setValue('/* c基础代码 */\n');
-				    $('#htmlbutton').data('languageid',11).attr('data-original-title', 'C').html("C").trigger('click');
-				    GBCodePlayBack.htmleditor.setOption('mode','text/x-csrc');
-				}else if(_languageid == 1 || _languageid == 41 || _languageid == 82){
-				    GBCodePlayBack.htmleditor.setValue('/* cpp基础代码 */\n');
-				    $('#htmlbutton').data('languageid',82).attr('data-original-title', 'C++').html("C++").trigger('click');
-				    GBCodePlayBack.htmleditor.setOption('mode','text/x-c++src');
-				}else if(_languageid == 4){
-				    $('#htmlbutton').data('languageid',4).attr('data-original-title', 'Python').html("Python").trigger('click');
-				}else if(_languageid == 40){
-				    $('#htmlbutton').data('languageid',40).attr('data-original-title', 'SQL').html("SQL").trigger('click');
-				}else if(_languageid == 117){
-				    $('#htmlbutton').data('languageid', 117).attr('data-original-title', 'R').html("R").trigger('click');
-				}
-			}
+			initPageLang()
-			var langid = $('#htmlbutton').data("languageid");
-			$.jStorage.set("gb_autosave_langid", langid);
 			if(document.URL.indexOf('player.htm')>=0){
 				if (_role == 0) {
@@ -412,7 +373,6 @@ $(function(){
 				        var langid = parseInt(coderecords.languageid);
 				        selectLang(langid);
 				        compileMode(langid);
-				        
 				    },
 				    error: function(){
 				    	alert('错误')
@@ -420,23 +380,6 @@ $(function(){
 				});
 			}
-			// 判断是否需要有服务端编译
-			function compileMode(langid){
-				if(!(langid==='empty' || langid==0 || langid==35)){
-					$('#fontendrun').addClass('hidden');
-					$('#comprunbtngrp').html('<button id="comprun" type="button" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
-					
-					$('#ifrcontainer').addClass('hidden');
-					$('#cmprun-output').removeClass('hidden');
-					
-					$('#frontenttools').remove();
-					$('#allbutton').remove();
-					$('#cssbutton').remove();
-					$('#jsbutton').remove();
-					
-					GBCodePlayBack.autorun=0;
-				}
-			}
 			// 使编辑器满屏
 			setTimeout(function(){
 		    	$("#htmlbutton").trigger('click');
@@ -560,13 +503,7 @@ $(function(){
 			    GBCodePlayBack.jsplayereditor.setValue('');
 			    playbtn.data('status', 0);
-			    $('#play').trigger('click');
-
-				// if (data == 1){
-
-				// } else if(data == 0) {
-				//     $(this).attr('data', 1).attr('data-original-title', '预览录制');
-				// }		
+			    $('#play').trigger('click');	
 			});
@@ -949,6 +886,8 @@ $(function(){
 					    dataType: "json",
 					    contentType: "application/json",
 					    success: function(data){
+					    	console.log('-------------------');
+					    	console.log(data);
 					        $(window).unbind('beforeunload');
 	                        var _data = {
 	                                "programId": data.codeReplayId,
@@ -976,6 +915,8 @@ $(function(){
 					    dataType: "json",
 					    contentType: "application/json",
 					    success: function(data) {
+					    	console.log('++++++++++++++++++++++++');
+					    	console.log(data)
 					        $(window).unbind('beforeunload');
 	                        var _data = {
 	                                "programId": data.studentReplayId,
@@ -1502,9 +1443,7 @@ $(function(){
 		    }else{
 		    	thisiframe.height(450);
 		    }
-			
 			/* end of do resize here*/
-			
 			var iframe = $('#resultiframe')[0], doc;
 			if(iframe.contentDocument){
@@ -1514,7 +1453,6 @@ $(function(){
 			}else{
 				doc = iframe.document;
 			}
-
 			/* 判断用户输入HTML片段还是完成的HTML文档 */
 			var completedflag = 0, lowhtml = html.toLowerCase();
 			if(lowhtml.toLowerCase().indexOf('</body>')>=0&&lowhtml.toLowerCase().indexOf('<body>')>=0){
@@ -1533,11 +1471,10 @@ $(function(){
 			doc.open();
 			doc.writeln(result);
 			doc.close();	
-
 		}
 	}
-	// // 呼气麦克风和录制代码
+	// 呼气麦克风和录制代码
 	if(document.URL.indexOf('index.htm') >= 0 && _role == 0){
 		HZRecorder.get(function(rec) {
 		    var seconds = 0;
@@ -1570,6 +1507,58 @@ $(function(){
+
+
+
+	// 初始化渲染编辑页面
+	function initPageLang(){
+		if (document.URL.indexOf('index.htm')>=0) {
+			if(_languageid == 35){
+			    $('#htmlbutton').data('languageid',35).attr('data-original-title', 'HTML/CSS/JS').html("HTML/CSS/JS").trigger('click');
+			}else if(_languageid == 10){
+			    $('#htmlbutton').data('languageid',10).html("java").trigger('click');
+			    GBCodePlayBack.htmleditor.setOption('mode','text/x-java');
+			}else if(_languageid == 43){
+			    GBCodePlayBack.htmleditor.setValue('/* Objective-c基础代码 */\n');
+			    $('#htmlbutton').data('languageid',43).attr('data-original-title', 'Objective-c').html("Objective-c").trigger('click');
+			    GBCodePlayBack.htmleditor.setOption('mode','text/x-csrc');
+			}else if(_languageid == 11){
+			    GBCodePlayBack.htmleditor.setValue('/* c基础代码 */\n');
+			    $('#htmlbutton').data('languageid',11).attr('data-original-title', 'C').html("C").trigger('click');
+			    GBCodePlayBack.htmleditor.setOption('mode','text/x-csrc');
+			}else if(_languageid == 1 || _languageid == 41 || _languageid == 82){
+			    GBCodePlayBack.htmleditor.setValue('/* cpp基础代码 */\n');
+			    $('#htmlbutton').data('languageid',82).attr('data-original-title', 'C++').html("C++").trigger('click');
+			    GBCodePlayBack.htmleditor.setOption('mode','text/x-c++src');
+			}else if(_languageid == 4){
+			    $('#htmlbutton').data('languageid',4).attr('data-original-title', 'Python').html("Python").trigger('click');
+			}else if(_languageid == 40){
+			    $('#htmlbutton').data('languageid',40).attr('data-original-title', 'SQL').html("SQL").trigger('click');
+			}else if(_languageid == 117){
+			    $('#htmlbutton').data('languageid', 117).attr('data-original-title', 'R').html("R").trigger('click');
+			}
+		}
+	}
+	
+
+	// 判断是否需要有服务端编译
+	function compileMode(langid){
+		if(!(langid==0 || langid==35)){
+			$('#fontendrun').addClass('hidden');
+			$('#comprunbtngrp').html('<button id="comprun" type="button" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
+			
+			$('#ifrcontainer').addClass('hidden');
+			$('#cmprun-output').removeClass('hidden');
+			
+			$('#frontenttools').remove();
+			$('#allbutton').remove();
+			$('#cssbutton').remove();
+			$('#jsbutton').remove();
+			
+			GBCodePlayBack.autorun=0;
+		}
+	}
+
 	var htmlhlLine = null,
 		csshlLine = null,
@@ -132,6 +132,20 @@
             recorder.connect(context.destination);
         }
+        // 暂停继续
+        this.pause = function() {
+            console.log(context.state);
+            if (context.state === 'running') {
+                context.suspend().then(function() {
+
+                });
+            } else if (context.state === 'suspended') {
+                context.resume().then(function() {
+
+                });
+            }
+        }
+
         //停止
         this.stop = function() {
             recorder.disconnect();
@@ -115,9 +115,9 @@
                                     <div class="tab-pane active padall15" id="stdin">
                                         <input type="text" class="form-control" id="input" placeholder="标准输入">
                                     </div>
-                                    <div class="tab-pane padall15" id="cmpinfo">...</div>
-                                    <div class="tab-pane padall15" id="stderr">...</div>
-                                    <div class="tab-pane padall15" id="output">...</div>
+                                    <div class="tab-pane padall15" id="cmpinfo"></div>
+                                    <div class="tab-pane padall15" id="stderr"></div>
+                                    <div class="tab-pane padall15" id="output"></div>
                                 </div>
                             </div>
                         </div>
@@ -79,6 +79,8 @@ button{
 }
 .recording-page{
+    padding-top:16px;
+    
     .col-md-8{
         padding-right: 0;
         overflow: hidden