fix play compile

ykxie
1 parent 6fc2f36b
Showing 12 changed files with 361 additions and 50 deletions
src/css/ide.css
src/css/main.css
src/gxb-ide/CodingEditer.js
src/gxb-ide/ToolBox.js
src/index.html
src/js/player.js
src/js/player1.js
src/player.html
src/scss/main.scss
src/v1.1/index.html
src/v1.1/index1.html
src/v1.1/player1.html
@@ -287,3 +287,12 @@ html, body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); }
+
+#playFooter {
+  height: 60px;
+  width: 100%;
+  z-index: 999;
+  background-color: #23383f;
+  padding: 10px 24px; }
+  #playFooter #componentWrapper {
+    width: 100%; }
@@ -209,3 +209,12 @@ html, body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); }
+
+#playFooter {
+  height: 60px;
+  width: 100%;
+  z-index: 999;
+  background-color: #23383f;
+  padding: 10px 24px; }
+  #playFooter #componentWrapper {
+    width: 100%; }
@@ -76,6 +76,10 @@
          */
         playCoding: function(){
             CodingEditer.resetCodeMirrorValue(1)
+            var iterm = new Iterm();
+            iterm.compileResult()
+            console.log('------------------CodingEditer.records')
+            console.log(CodingEditer.records)
             var playbackrecord = CodingEditer.records;
             var starttime = 0;
             $('#recordertab a:eq(1)').tab('show');
@@ -315,20 +319,19 @@
             record.trigger = 1; //标记已运行
             record.playTime = new Date().getTime(); // 播放开始时间
  
-            // var iterm = new Iterm();
-            // var resultData = {
-            //     status: record.status || 200,
-            //     compilerInfo: record.compilerInfo || '',
-            //     content: record.content || '',
-            //     error: record.error || '',
-            //     code: record.code || ''
-            // };
-            // console.log("================== _role ======================");
-            // console.log(record);
-            // console.log(_role);
-            // if (record.code == 0 || record.code == 1) {
-            //     iterm.compileResult(resultData, ecord.runtimeArgus)
-            // }
+            
+            console.log("================== _role ======================");
+            if (record.code == 0 || record.code == 1) {
+                var iterm = new Iterm();
+                var resultData = {
+                    status: record.status || 200,
+                    compilerInfo: record.compilerInfo || '',
+                    content: record.content || '',
+                    error: record.error || '',
+                    code: record.code || ''
+                };
+                iterm.compileResult(resultData)
+            }
  
             CodingEditer.triggertotal += 1;
  
@@ -72,6 +72,7 @@
             $('#start-recording').hide()
             $('#stop-recording').show()
             var _this = this;
+            _this.readOnly(0)
             if (typeof _this.options.startCallback == 'function') {
                 console.log('startCallback');
                 _this.options.startCallback();
@@ -87,11 +88,9 @@
             Hourglass.stopTimer()
             var _this = this;
             _this.readOnly(1)
-            console.log('-===============******************' + _this.options.role)
             // 老师端录制停止录音
             if (_this.options.role == 0) {
                 _this.stopAudio();
-                console.log('-===============******************')
             }
             // 回调
             if (typeof _this.options.stopCallback == 'function') {
@@ -121,8 +120,6 @@
             var _this = this;
             if (_this.options.role == 0) {
                 HZRecorder.get(function(rec) {
-                    console.log('-============================================')
-                    console.log(rec);
                     recorder = rec;
                     recorder.start();
                     CodingEditer.initRecodesValue()
@@ -18,7 +18,7 @@
     <link href="css/recording.css" rel="stylesheet">
  
     <script>
-        var gxb_api = "https://restful1.gaoxiaobang.com";
+        var gxb_api = "https://restful.gaoxiaobang.com";
         // var gxb_api = "http://192.168.80.236:8080"
  
     </script>
 $(function(){
-    $('#full-screen').click(function(){
-        var fullData = $(this).data('full');
-        launchFullScreen(document.getElementById("player")); 
-        $('#back-screen').show();
-        $('#full-screen').hide();
+    var _languageid = getQuery('languageid');
+    var _userId = getQuery('userId');
+    var _role = getQuery('role');
+    var _codeReplayId = getQuery('codeReplayId');
+    var player = $.AudioPlayer;
+
+    $("title").html("C 语言");
+    // new一个基本IDE结构
+    var ide = new GxbIde({
+        el: '#folder',
+        languageid: parseInt(_languageid)
     });
  
-    $('#back-screen').click(function(){
-        exitFullscreen();
-        $('#full-screen').show();
-        $('#back-screen').hide();
-    })
-    // 找到支持的方法, 使用需要全屏的 element 调用 
-    function launchFullScreen(element) {
-        if (element.requestFullscreen) {
-            element.requestFullscreen();
-        } else if (element.mozRequestFullScreen) {
-            element.mozRequestFullScreen();
-        } else if (element.webkitRequestFullscreen) {
-            element.webkitRequestFullscreen();
-        } else if (element.msRequestFullscreen) {
-            element.msRequestFullscreen();
-        }
+    // 编译控制台
+    var iterm = new Iterm({
+        userId: _userId,
+        languageId: _languageid
+    });
+
+    console.log(_role)
+    if (_role == 0) {
+        playUrl = gxb_api + "/programming/codeReplay/" + _codeReplayId + "/api";
+        getCodeData(playUrl)
+    } else if (_role == 1) {
+        playUrl = gxb_api + "/programming/student/studentReplay/" + _codeReplayId + "/api";
+        getCodeData(playUrl)
+    }
+
+
+
+
+    // 获取code
+    function getCodeData(url){
+        console.log(url)
+        $.ajax({
+            type: "get",
+            url: url,
+            dataType: "json",
+            contentType: "application/json",
+            success: function(res) {
+                console.log('++++++++--------');
+                console.log(res)
+                var coderecords = res.codeRecordList
+                var audioUrl = res.audioUrl;
+
+                initTrigger(coderecords)
+                AudioPlayer(audioUrl)
+            },
+            error: function(error) {
+                console.log(error)
+            }
+        });
     }
  
-    function exitFullscreen() {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.mozExitFullScreen) {
-            document.mozExitFullScreen();
-        } else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
+    // 初始化tigger
+    function initTrigger(records){
+        var records = records
+        for (var i = 0, leg = records.length; i < leg; i++) {
+            if (!records[i].trigger) records[i].trigger = 0;
+            records[i].changeobj = jQuery.parseJSON(records[i].changeobj);
+            records[i].treefile = jQuery.parseJSON(records[i].treefile);
         }
+        CodingEditer.records = records;
+    }
+
+    // 初始化播放音频控制条
+    function AudioPlayer(audioUrl){
+        player.init({
+            container: '#audioWrap',
+            source: "https://gxb-file.oss-cn-beijing.aliyuncs.com" + audioUrl,
+            imagePath: '../js/audioPlayer/image',
+            debuggers: false,
+            allowSeek: false,
+            playCallback: function() { // 播放
+                console.log('++++++++');
+                CodingEditer.playCoding();
+            },
+            pauseCallback: function() { // 暂停
+            },
+            seekedCallback: function() { // 拖拽
+            }, 
+            endedCallback: function() { // 结束播放
+                playEnd()
+            }
+        });
     }
  
  
+$(function(){
+    $('#full-screen').click(function(){
+        var fullData = $(this).data('full');
+        launchFullScreen(document.getElementById("player")); 
+        $('#back-screen').show();
+        $('#full-screen').hide();
+    });
+
+    $('#back-screen').click(function(){
+        exitFullscreen();
+        $('#full-screen').show();
+        $('#back-screen').hide();
+    })
+    // 找到支持的方法, 使用需要全屏的 element 调用 
+    function launchFullScreen(element) {
+        if (element.requestFullscreen) {
+            element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    }
+
+    function exitFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozExitFullScreen) {
+            document.mozExitFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    }
+
+
+})
 \ No newline at end of file
@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="js/audioPlayer/theme.default.css">
  
     <script>
-        var gxb_api = "https://restful1.gaoxiaobang.com";
+        var gxb_api = "https://restful.gaoxiaobang.com";
         // var gxb_api = "https://restful.gaoxiaobang.com"
     </script>
  
@@ -277,6 +277,28 @@ html, body{
     }
 }
  
+// player
+#playFooter{
+    height: 60px;
+    width: 100%;
+    z-index: 999;
+    background-color: #23383f;
+    padding: 10px 24px;
+
+    #componentWrapper{
+        width: 100%;
+    }
+}
+
+
+
+
+
+
+
+
+
+
  
  
  
@@ -50,7 +50,7 @@
     <script src="../js/gbdebug/mode/clike/clike.js"></script> 
  
     <script>
-        var gxb_api = "https://restful1.gaoxiaobang.com";
+        var gxb_api = "https://restful.gaoxiaobang.com";
         // var gxb_api = "http://192.168.80.223:8080"
         $(function(){
             $('.my-button').click(function(){
@@ -20,7 +20,7 @@
     <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
  
     <script>
-        var gxb_api = "https://restful1.gaoxiaobang.com";
+        var gxb_api = "https://restful.gaoxiaobang.com";
         // var gxb_api = "http://192.168.80.223:8080"
  
     </script>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>JAVA</title>
+    <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/reset.css" rel="stylesheet">
+    <link rel="stylesheet" href="../js/audioPlayer/theme.default.css">
+    <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
+
+    <link href="../common/fonts/iconfont.css" rel="stylesheet">
+
+    <link href="../css/cm-theme/gbtags.css" rel="stylesheet">
+    <link href="../css/cm-theme/eclipse.css" rel="stylesheet">
+    <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">
+ 
+    <link rel="stylesheet" href="../gxb-ide/toolBox.css">
+    <link rel="stylesheet" href="../css/ide.css">
+    
+    <script src="../js/jquery-1.7.1.js"></script>
+    <script src="../js/bootstrap.js"></script>
+    <script src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
+    <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
+    <script src="../js/emmet.js"></script>
+    
+    <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
+    <script src="../js/ladda/spin.js"></script>
+    <script src="../js/ladda/ladda.js"></script>
+
+    <script src="../js/util/Hourglass.js"></script>
+    <script src="../js/util/util.js"></script>
+
+    <script src="../js/05-util.js"></script>
+    <script src="../js/03-http.js"></script>
+    
+    <script src="../js/recorder/Myna.js"></script>
+    <script src="../gxb-ide/Dir.js"></script>
+    <script src="../gxb-ide/CodingEditer.js"></script>
+    <script src="../gxb-ide/Iterm.js"></script>
+    <script src="../gxb-ide/Ide.js"></script>
+    <script src="../gxb-ide/ToolBox.js"></script>
+    <script type="text/javascript" src="../js/audioPlayer/jQuery.AudioPlayer.js"></script>
+
+      <script src="../js/player.js"></script>
+
+    <script src="../js/gbdebug/mode/xml/xml.js"></script>
+    <script src="../js/gbdebug/mode/javascript/javascript.js"></script>
+    <script src="../js/gbdebug/mode/css/css.js"></script>
+    <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script> 
+    <script src="../js/gbdebug/mode/clike/clike.js"></script> 
+    
+    <script>
+        var gxb_api = "https://restful.gaoxiaobang.com";
+        // var gxb_api = "http://192.168.80.223:8080"
+    </script>
+
+    <style>
+        .ladda-button[data-style=expand-right] .ladda-spinner{
+            right: 0;
+        }
+        .ladda-button[data-style=expand-right][data-loading]{
+            padding-right: 32px;
+        }
+        .ladda-button .ladda-spinner{
+            top: 0;
+        }
+    </style>
+
+
+</head>
+<body>
+    <div class="programing">
+        <!-- 控制条 -->
+        <div class="record-title">
+            <ul id="recordertab" class="nav nav-tabs pull-left">
+                <li class="active">
+                    <a href="#recordzone" data-toggle="tab">
+                        <i class="icon iconfont icon-suspend"></i>课程录制区
+                    </a>
+                </li>
+                <li>
+                    <a href="#replayzone" data-toggle="tab">
+                        <i class="icon iconfont icon-yulan"></i>课程预览区
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+        <!-- 录制区 -->
+        <div class="record-wrap">
+            <!-- 录制区 -->
+            <div class="gxb-record">
+                <div id="ideDir">
+                    <div class="tree-header">目录</div>
+                    <ul id="folder" class="ztree"></ul>
+                    <div id="handleLM"></div>
+                </div>
+
+                <div  id="ideEditer" class="tab-content">
+                  <div id="recordzone" class="tab-pane active"></div>
+                  <div id="replayzone" class="tab-pane"></div>
+                </div>
+            </div>
+            <div class="pause-shodow" style="display: none;">
+                <div class="compile-loading">
+                    <img src="../img/loading.png" alt="">
+                </div>
+                <div class="compile-reslut" style="display: none;">
+                    <div class="tip-header">
+                        <span>成功获取编译运行结果</span>
+                    </div>
+                    <div class="tip-content">
+                        <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>
+                    </div>
+                    <div class="tip-footer">
+                        <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>
+                        <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 控录制录制 -->
+        <div class="record-toolbox">
+            <!-- 运行结果区 -->
+            <div class="console-wrap">
+                <div id="toolbar">
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
+                        <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
+                        <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
+                        <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
+                        <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
+                    </ul>
+                    <div class="pull-right func">
+                        <a class="btn btn-success" id="CompileBtn">
+                            <span class="ladda-label">编译运行</span>
+                        </a>
+                        <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>
+                        <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> -->
+                    </div>
+                </div>
+
+                <!-- Tab panes -->
+                <div id="resultoutput" class="tab-content need-compile">
+                    <div class="tab-pane active padall15" id="stdin">
+                        <input type="text" class="form-control" id="runtimeArgus" 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>
+                <div class="panel-body no-compile" id="ifrcontainer">
+                    <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
+                </div>
+            </div>
+            <input type="hidden" class="audio-url" value="">
+            <div id="playFooter">
+                <div class="" id="audioWrap">
+                    <button class="play-code" style="display: none;">
+                        <i class="icon iconfont icon-play"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 准备开始 -->
+        <div id="countdown" style="display: none;">
+            <img src="" alt="">
+        </div>
+        <!-- 保存提示 -->
+        <div class="upload-tip" style="display: none;">
+            <img src="../img/upload_tip.png" alt="">
+        </div>
+        
+    </div>
+    
+</body>
+</html>
 \ No newline at end of file