Commit 96ea1ff60fbaf5ddfbb7eb191e044aa0d4d57b9f
1 parent
798e71cb
fix finish compile
Showing
4 changed files
with
77 additions
and
11 deletions
src/css/recording.css
| @@ -346,7 +346,7 @@ button { | @@ -346,7 +346,7 @@ button { | ||
| 346 | top: 0; | 346 | top: 0; |
| 347 | width: 100%; | 347 | width: 100%; |
| 348 | height: 100%; | 348 | height: 100%; |
| 349 | - z-index: 888; | 349 | + z-index: 9999; |
| 350 | background-color: rgba(0, 0, 0, 0.6); } | 350 | background-color: rgba(0, 0, 0, 0.6); } |
| 351 | #countdown img { | 351 | #countdown img { |
| 352 | position: absolute; | 352 | position: absolute; |
| @@ -482,7 +482,15 @@ button { | @@ -482,7 +482,15 @@ button { | ||
| 482 | left: 50%; | 482 | left: 50%; |
| 483 | transform: translate(-50%, -50%); } | 483 | transform: translate(-50%, -50%); } |
| 484 | 484 | ||
| 485 | -.compile-reslut { | 485 | +.re-tips { |
| 486 | + position: absolute; | ||
| 487 | + top: 0; | ||
| 488 | + width: 100%; | ||
| 489 | + height: 100%; | ||
| 490 | + background-color: rgba(0, 0, 0, 0.6); | ||
| 491 | + z-index: 999; } | ||
| 492 | + | ||
| 493 | +.compile-reslut, .re-reslut { | ||
| 486 | position: absolute; | 494 | position: absolute; |
| 487 | height: 200px; | 495 | height: 200px; |
| 488 | width: 400px; | 496 | width: 400px; |
| @@ -490,14 +498,14 @@ button { | @@ -490,14 +498,14 @@ button { | ||
| 490 | top: 50%; | 498 | top: 50%; |
| 491 | left: 50%; | 499 | left: 50%; |
| 492 | transform: translate(-50%, -50%); } | 500 | transform: translate(-50%, -50%); } |
| 493 | - .compile-reslut .tip-header, .compile-reslut .tip-footer { | 501 | + .compile-reslut .tip-header, .compile-reslut .tip-footer, .re-reslut .tip-header, .re-reslut .tip-footer { |
| 494 | width: 100%; | 502 | width: 100%; |
| 495 | padding: 8px 16px; | 503 | padding: 8px 16px; |
| 496 | background-color: #F5F6FA; } | 504 | background-color: #F5F6FA; } |
| 497 | - .compile-reslut .tip-content { | 505 | + .compile-reslut .tip-content, .re-reslut .tip-content { |
| 498 | padding: 40px; | 506 | padding: 40px; |
| 499 | line-height: 1.7; } | 507 | line-height: 1.7; } |
| 500 | - .compile-reslut .tip-footer { | 508 | + .compile-reslut .tip-footer, .re-reslut .tip-footer { |
| 501 | position: absolute; | 509 | position: absolute; |
| 502 | bottom: 0; | 510 | bottom: 0; |
| 503 | text-align: right; } | 511 | text-align: right; } |
src/index.html
| @@ -154,6 +154,7 @@ | @@ -154,6 +154,7 @@ | ||
| 154 | <!-- 录音控制条 --> | 154 | <!-- 录音控制条 --> |
| 155 | <div class="recording-ctrl-bar"> | 155 | <div class="recording-ctrl-bar"> |
| 156 | <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button> | 156 | <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button> |
| 157 | + <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button> | ||
| 157 | <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中"> | 158 | <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中"> |
| 158 | <img src="img/pause.svg" alt=""> | 159 | <img src="img/pause.svg" alt=""> |
| 159 | </button> | 160 | </button> |
| @@ -177,11 +178,29 @@ | @@ -177,11 +178,29 @@ | ||
| 177 | </div> | 178 | </div> |
| 178 | 179 | ||
| 179 | 180 | ||
| 180 | - <!-- 倒计时 --> | 181 | + <!-- 准备开始 --> |
| 181 | <div id="countdown" style="display: none;"> | 182 | <div id="countdown" style="display: none;"> |
| 182 | <img src="" alt=""> | 183 | <img src="" alt=""> |
| 183 | </div> | 184 | </div> |
| 184 | 185 | ||
| 186 | + <!-- 重新开始 --> | ||
| 187 | + <div class="re-tips" style="display: none;"> | ||
| 188 | + <div class="re-reslut"> | ||
| 189 | + <div class="tip-header"> | ||
| 190 | + <span>提示</span> | ||
| 191 | + </div> | ||
| 192 | + <div class="tip-content"> | ||
| 193 | + <p>你确定要重新录制吗?</p> | ||
| 194 | + </div> | ||
| 195 | + <div class="tip-footer"> | ||
| 196 | + <button class="btn btn-success btn-sm" id="re-sure">确定</button> | ||
| 197 | + <button class="btn btn-danger btn-sm" id="re-cancel">取消</button> | ||
| 198 | + </div> | ||
| 199 | + </div> | ||
| 200 | + </div> | ||
| 201 | + | ||
| 202 | + | ||
| 203 | + | ||
| 185 | 204 | ||
| 186 | <script src="js/recorder/Myna.js"></script> | 205 | <script src="js/recorder/Myna.js"></script> |
| 187 | <script src="js/recording/recording.js"></script> | 206 | <script src="js/recording/recording.js"></script> |
src/js/gbreplayer.js
| @@ -1021,12 +1021,13 @@ $(function(){ | @@ -1021,12 +1021,13 @@ $(function(){ | ||
| 1021 | // 暂停录制 | 1021 | // 暂停录制 |
| 1022 | var pauseState = $('#pause').data('pause'); | 1022 | var pauseState = $('#pause').data('pause'); |
| 1023 | 1023 | ||
| 1024 | + console.log('------------' + pauseState + '----------------'); | ||
| 1024 | if(pauseState == 1 && _role == 0){ | 1025 | if(pauseState == 1 && _role == 0){ |
| 1025 | GBCodePlayBack.record_pause_time = new Date().getTime(); // 暂停的时间 | 1026 | GBCodePlayBack.record_pause_time = new Date().getTime(); // 暂停的时间 |
| 1026 | 1027 | ||
| 1027 | Hourglass.pauseTimer(); // 暂停计时器 | 1028 | Hourglass.pauseTimer(); // 暂停计时器 |
| 1028 | 1029 | ||
| 1029 | - $('#pause').data('status', '1'); | 1030 | + // $('#pause').data('status', '1'); |
| 1030 | $('#pause').removeClass('hidden').addClass('show'); | 1031 | $('#pause').removeClass('hidden').addClass('show'); |
| 1031 | $('#start-recording').hide(); | 1032 | $('#start-recording').hide(); |
| 1032 | recorder.pause(); | 1033 | recorder.pause(); |
| @@ -1357,6 +1358,7 @@ $(function(){ | @@ -1357,6 +1358,7 @@ $(function(){ | ||
| 1357 | } | 1358 | } |
| 1358 | 1359 | ||
| 1359 | var pausetatus = $('#pause').data('status'); | 1360 | var pausetatus = $('#pause').data('status'); |
| 1361 | + | ||
| 1360 | console.log(pausetatus) | 1362 | console.log(pausetatus) |
| 1361 | 1363 | ||
| 1362 | if(_role == 0 && pausetatus == 1){ | 1364 | if(_role == 0 && pausetatus == 1){ |
| @@ -1535,7 +1537,7 @@ $(function(){ | @@ -1535,7 +1537,7 @@ $(function(){ | ||
| 1535 | 1537 | ||
| 1536 | // 开始录制 | 1538 | // 开始录制 |
| 1537 | $('#start-recording').click(function(){ | 1539 | $('#start-recording').click(function(){ |
| 1538 | - $('#pause').data('pause', '1'); // | 1540 | + // 编译状态 |
| 1539 | var data = $(this).attr('data'); | 1541 | var data = $(this).attr('data'); |
| 1540 | var seconds = 0; | 1542 | var seconds = 0; |
| 1541 | $("#countdown").show(); | 1543 | $("#countdown").show(); |
| @@ -1545,12 +1547,16 @@ $(function(){ | @@ -1545,12 +1547,16 @@ $(function(){ | ||
| 1545 | seconds += 1; | 1547 | seconds += 1; |
| 1546 | if(seconds == 2){ | 1548 | if(seconds == 2){ |
| 1547 | $("#countdown").hide(); | 1549 | $("#countdown").hide(); |
| 1548 | - $("#countdown").find('img').hide() | ||
| 1549 | startReacoder(); | 1550 | startReacoder(); |
| 1550 | } | 1551 | } |
| 1551 | },1000); | 1552 | },1000); |
| 1552 | }else{ | 1553 | }else{ |
| 1553 | $("#countdown").hide(); | 1554 | $("#countdown").hide(); |
| 1555 | + $("#re-recoding").show(); | ||
| 1556 | + $("#start-recording").hide(); | ||
| 1557 | + $("#countdown").find('img').attr('src', ''); | ||
| 1558 | + | ||
| 1559 | + console.log() | ||
| 1554 | stopReacoder(); | 1560 | stopReacoder(); |
| 1555 | } | 1561 | } |
| 1556 | }) | 1562 | }) |
| @@ -1560,9 +1566,32 @@ $(function(){ | @@ -1560,9 +1566,32 @@ $(function(){ | ||
| 1560 | // recorder.pause(); | 1566 | // recorder.pause(); |
| 1561 | }) | 1567 | }) |
| 1562 | 1568 | ||
| 1569 | + $('#re-recoding').click(function(){ | ||
| 1570 | + $('.re-tips').show(); | ||
| 1571 | + }) | ||
| 1572 | + | ||
| 1573 | + $('#re-sure').click(function(){ | ||
| 1574 | + console.log('sdkddd') | ||
| 1575 | + initRecoding() | ||
| 1576 | + }) | ||
| 1577 | + | ||
| 1578 | + $('#re-cancel').click(function(){ | ||
| 1579 | + $(".re-tips").hide(); | ||
| 1580 | + }) | ||
| 1563 | 1581 | ||
| 1564 | 1582 | ||
| 1565 | 1583 | ||
| 1584 | + // 初始化页面 | ||
| 1585 | + function initRecoding(){ | ||
| 1586 | + GBCodePlayBack.recordinit(); | ||
| 1587 | + $(".re-tips").hide(); | ||
| 1588 | + $("#re-recoding").hide(); | ||
| 1589 | + $(".audio-play").removeClass('show').addClass('hidden'); | ||
| 1590 | + $("#start-recording").show(); | ||
| 1591 | + $('.recording-time').html('00:00:00'); | ||
| 1592 | + $('#upload').removeClass('recording-finish').addClass('upload-teach').attr("disabled", true); | ||
| 1593 | + GBCodePlayBack.htmleditor.setValue(''); | ||
| 1594 | + } | ||
| 1566 | 1595 | ||
| 1567 | // 编译结果 | 1596 | // 编译结果 |
| 1568 | function compileResult(data){ | 1597 | function compileResult(data){ |
| @@ -1638,6 +1667,7 @@ $(function(){ | @@ -1638,6 +1667,7 @@ $(function(){ | ||
| 1638 | $('.recording-time').addClass('twinkle'); | 1667 | $('.recording-time').addClass('twinkle'); |
| 1639 | Hourglass.init(); | 1668 | Hourglass.init(); |
| 1640 | $('.audio-play').removeClass('show').addClass('hidden'); | 1669 | $('.audio-play').removeClass('show').addClass('hidden'); |
| 1670 | + $('#pause').data('pause', '1'); | ||
| 1641 | }); | 1671 | }); |
| 1642 | } | 1672 | } |
| 1643 | 1673 | ||
| @@ -1650,6 +1680,7 @@ $(function(){ | @@ -1650,6 +1680,7 @@ $(function(){ | ||
| 1650 | $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false); | 1680 | $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false); |
| 1651 | $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false); | 1681 | $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false); |
| 1652 | $('.audio-play').removeClass('hidden').addClass('show'); | 1682 | $('.audio-play').removeClass('hidden').addClass('show'); |
| 1683 | + $('#pause').data('pause', '0'); | ||
| 1653 | if (_role == 0) { | 1684 | if (_role == 0) { |
| 1654 | recorder.stop(); | 1685 | recorder.stop(); |
| 1655 | $('#upload').show(); | 1686 | $('#upload').show(); |
src/scss/recording.scss
| @@ -447,7 +447,7 @@ button{ | @@ -447,7 +447,7 @@ button{ | ||
| 447 | top: 0; | 447 | top: 0; |
| 448 | width: 100%; | 448 | width: 100%; |
| 449 | height: 100%; | 449 | height: 100%; |
| 450 | - z-index: 888; | 450 | + z-index: 9999; |
| 451 | background-color: rgba(0, 0, 0, 0.6); | 451 | background-color: rgba(0, 0, 0, 0.6); |
| 452 | 452 | ||
| 453 | img{ | 453 | img{ |
| @@ -630,7 +630,15 @@ button{ | @@ -630,7 +630,15 @@ button{ | ||
| 630 | } | 630 | } |
| 631 | } | 631 | } |
| 632 | // ti | 632 | // ti |
| 633 | -.compile-reslut{ | 633 | +.re-tips{ |
| 634 | + position: absolute; | ||
| 635 | + top: 0; | ||
| 636 | + width: 100%; | ||
| 637 | + height: 100%; | ||
| 638 | + background-color: rgba(0, 0, 0, 0.6); | ||
| 639 | + z-index: 999; | ||
| 640 | +} | ||
| 641 | +.compile-reslut, .re-reslut{ | ||
| 634 | position: absolute; | 642 | position: absolute; |
| 635 | height: 200px; | 643 | height: 200px; |
| 636 | width: 400px; | 644 | width: 400px; |