summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorkenianbei2016-02-10 02:22:58 (GMT)
committerNorman Kerr 柯念北2016-02-10 02:22:58 (GMT)
commita3e8bdb1e90ec8d266f548b335e5f1cc4bf7883c (patch)
tree73d8f22d9340202ba57234b97d235341baf2755a
parent8deff210d9e282d6faaf52d5bb8534f5efa9e701 (diff)
Issue #2409521 by kenianbei: Add a progress bar displaying amount of time left to record7.x-1.0-alpha9
-rw-r--r--css/media-recorder.css18
-rw-r--r--js/media-recorder-api.js16
-rw-r--r--js/media-recorder-flash.js16
-rw-r--r--js/media-recorder-html5.js15
-rw-r--r--theme/media-recorder.tpl.php3
5 files changed, 68 insertions, 0 deletions
diff --git a/css/media-recorder.css b/css/media-recorder.css
index b9aebc1..bb36953 100644
--- a/css/media-recorder.css
+++ b/css/media-recorder.css
@@ -38,6 +38,24 @@
vertical-align: bottom;
}
+.media-recorder-progress {
+ height: 20px;
+ overflow: hidden;
+ background: #222222;
+ box-shadow: inset 0 0 10px #000000;
+}
+
+.media-recorder-progress .progress-bar {
+ float: left;
+ width: 0;
+ height: 100%;
+ font-size: 12px;
+ line-height: 20px;
+ color: #fff;
+ text-align: center;
+ background-color: #337ab7;
+}
+
.media-recorder-video {
width: 100%;
padding: 5px 0;
diff --git a/js/media-recorder-api.js b/js/media-recorder-api.js
index 095bf53..c3f439b 100644
--- a/js/media-recorder-api.js
+++ b/js/media-recorder-api.js
@@ -14,6 +14,7 @@
var $inputFid = $('#' + id + '-fid');
var $statusWrapper = $element.find('.media-recorder-status');
var $previewWrapper = $element.find('.media-recorder-preview');
+ var $progressWrapper = $element.find('.media-recorder-progress');
var $video = $element.find('.media-recorder-video');
var $audio = $element.find('.media-recorder-audio');
var $meter = $element.find('.media-recorder-meter');
@@ -58,6 +59,7 @@
$videoButton.hide();
$audioButton.hide();
$previewWrapper.hide();
+ $progressWrapper.hide();
// Set constraints.
constraints.audio = true;
@@ -497,10 +499,23 @@
recordingPreview();
setStatus('Recording 00:00 (Time Limit: ' + timeLimitFormatted + ')');
+ $progressWrapper.show();
+ var $progress = $progressWrapper.children('.progress-bar');
+ $progress.css({
+ width: '0%'
+ });
+
+ currentSeconds = 0;
statusInterval = setInterval(function () {
currentSeconds = currentSeconds + 1;
var currentMilliSeconds = new Date(currentSeconds * 1000);
var time = millisecondsToTime(currentMilliSeconds);
+ var timePercentage = currentSeconds / settings.time_limit * 100;
+
+ $progress.css({
+ width: timePercentage + '%'
+ });
+
setStatus('Recording ' + time + ' (Time Limit: ' + timeLimitFormatted + ')');
if (currentSeconds >= settings.time_limit) {
@@ -512,6 +527,7 @@
// Listen for the stop event.
$element.bind('recordStop', function (event) {
clearInterval(statusInterval);
+ $progressWrapper.hide();
setStatus('Please wait while the recording finishes uploading...');
});
diff --git a/js/media-recorder-flash.js b/js/media-recorder-flash.js
index dce8dbf..f628e55 100644
--- a/js/media-recorder-flash.js
+++ b/js/media-recorder-flash.js
@@ -14,6 +14,7 @@
var $inputFid = $('#' + id + '-fid');
var $statusWrapper = $element.find('.media-recorder-status');
var $previewWrapper = $element.find('.media-recorder-preview');
+ var $progressWrapper = $element.find('.media-recorder-progress');
var $video = $element.find('.media-recorder-video');
var $audio = $element.find('.media-recorder-audio');
var $meter = $element.find('.media-recorder-meter');
@@ -62,6 +63,7 @@
$meter.hide();
$videoButton.hide();
$audioButton.hide();
+ $progressWrapper.hide();
// Show file preview if file exists.
if (Drupal.settings.mediaRecorder.file) {
@@ -289,11 +291,24 @@
var currentSeconds = 0;
var timeLimitFormatted = millisecondsToTime(new Date(parseInt(settings.time_limit, 10) * 1000));
+ $progressWrapper.show();
+ var $progress = $progressWrapper.children('.progress-bar');
+ $progress.css({
+ width: '0%'
+ });
+
setStatus('Recording 00:00 (Time Limit: ' + timeLimitFormatted + ')');
+
statusInterval = setInterval(function () {
currentSeconds = currentSeconds + 1;
var currentMilliSeconds = new Date(currentSeconds * 1000);
var time = millisecondsToTime(currentMilliSeconds);
+ var timePercentage = currentSeconds / settings.time_limit * 100;
+
+ $progress.css({
+ width: timePercentage + '%'
+ });
+
setStatus('Recording ' + time + ' (Time Limit: ' + timeLimitFormatted + ')');
if (currentSeconds >= settings.time_limit) {
@@ -305,6 +320,7 @@
// FWRecorder recording_stopped event.
$element.bind('recording_stopped', function (event) {
var blob = FWRecorder.getBlob(recordingName);
+ $progressWrapper.hide();
clearInterval(statusInterval);
sendBlob(blob);
});
diff --git a/js/media-recorder-html5.js b/js/media-recorder-html5.js
index da557d2..06855b4 100644
--- a/js/media-recorder-html5.js
+++ b/js/media-recorder-html5.js
@@ -14,6 +14,7 @@
var $inputFid = $('#' + id + '-fid');
var $statusWrapper = $element.find('.media-recorder-status');
var $previewWrapper = $element.find('.media-recorder-preview');
+ var $progressWrapper = $element.find('.media-recorder-progress');
var $video = $element.find('.media-recorder-video');
var $audio = $element.find('.media-recorder-audio');
var $meter = $element.find('.media-recorder-meter');
@@ -55,6 +56,7 @@
$videoButton.hide();
$audioButton.hide();
$previewWrapper.hide();
+ $progressWrapper.hide();
// Show file preview if file exists.
if (conf.file) {
@@ -357,11 +359,23 @@
recordingPreview();
setStatus('Recording 00:00 (Time Limit: ' + timeLimitFormatted + ')');
+ $progressWrapper.show();
+ var $progress = $progressWrapper.children('.progress-bar');
+ $progress.css({
+ width: '0%'
+ });
+
currentSeconds = 0;
statusInterval = setInterval(function () {
currentSeconds = currentSeconds + 1;
var currentMilliSeconds = new Date(currentSeconds * 1000);
var time = millisecondsToTime(currentMilliSeconds);
+ var timePercentage = currentSeconds / settings.time_limit * 100;
+
+ $progress.css({
+ width: timePercentage + '%'
+ });
+
setStatus('Recording ' + time + ' (Time Limit: ' + timeLimitFormatted + ')');
if (currentSeconds >= settings.time_limit) {
@@ -372,6 +386,7 @@
// Listen for the stop event.
$element.bind('recordStop', function (event) {
+ $progressWrapper.hide();
clearInterval(statusInterval);
setStatus('Uploading, please wait...');
});
diff --git a/theme/media-recorder.tpl.php b/theme/media-recorder.tpl.php
index e9236d8..8a1596d 100644
--- a/theme/media-recorder.tpl.php
+++ b/theme/media-recorder.tpl.php
@@ -18,6 +18,9 @@
<audio class="media-recorder-audio" controls></audio>
</div>
<div class="media-recorder-status"></div>
+ <div class="media-recorder-progress progress">
+ <div class="progress-bar" role="progressbar"></div>
+ </div>
<div class="media-recorder-controls">
<button class="media-recorder-enable" title="Click to enable your mic & camera.">Start</button>
<button class="media-recorder-record" title="Click to start recording.">Record</button>