Documents: Add timer when recording a voice message BT#17833

main/document/record_audio.php

@@ -22,6 +22,9 @@ $document_data = DocumentManager::get_document_data_by_id(
     api_get_course_id(),
     true
 );
+
+$dir = '/';
+$document_id = 0;
 if (empty($document_data)) {
     if (api_is_in_group()) {
         $group_properties = GroupManager::get_group_properties(api_get_group_id());
@@ -34,11 +37,11 @@ if (empty($document_data)) {
             api_get_course_id()
         );
     }
+} else {
+    $document_id = $document_data['id'];
+    $dir = $document_data['path'];
 }
 
-$document_id = $document_data['id'];
-$dir = $document_data['path'];
-
 //make some vars
 $wamidir = $dir;
 if ($wamidir === "/") {

main/inc/lib/javascript/record_audio/record_audio.js

@@ -1,5 +1,42 @@
 /* For licensing terms, see /license.txt */
+
 window.RecordAudio = (function () {
+    function startTimer() {
+        $("#timer").show();
+        var timerData = {
+            hour: parseInt($("#hour").text()),
+            minute: parseInt($("#minute").text()),
+            second: parseInt($("#second").text())
+        };
+
+        clearInterval(window.timerInterval);
+        window.timerInterval = setInterval(function(){
+            // Seconds
+            timerData.second++;
+            if (timerData.second >= 60) {
+                timerData.second = 0;
+                timerData.minute++;
+            }
+
+            // Minutes
+            if (timerData.minute >= 60) {
+                timerData.minute = 0;
+                timerData.hour++;
+            }
+
+            $("#hour").text(timerData.hour < 10 ? '0' + timerData.hour : timerData.hour);
+            $("#minute").text(timerData.minute < 10 ? '0' + timerData.minute : timerData.minute);
+            $("#second").text(timerData.second < 10 ? '0' + timerData.second : timerData.second);
+        }, 1000);
+    }
+
+    function stopTimer() {
+        $("#hour").text('00');
+        $("#minute").text('00');
+        $("#second").text('00');
+        $("#timer").hide();
+    }
+
     function useRecordRTC(rtcInfo, fileName) {
         $(rtcInfo.blockId).show();
 
@@ -82,6 +119,8 @@ window.RecordAudio = (function () {
             navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
 
             function successCallback(stream) {
+                stopTimer();
+                startTimer();
                 recordRTC = RecordRTC(stream, {
                     numberOfAudioChannels: 1,
                     type: 'audio'
@@ -99,6 +138,7 @@ window.RecordAudio = (function () {
             }
 
             function errorCallback(error) {
+                stopTimer();
                 alert(error.message);
             }
 
@@ -138,6 +178,7 @@ window.RecordAudio = (function () {
                 return;
             }
 
+            stopTimer();
             recordRTC.stopRecording(function (audioURL) {
                 btnStart.prop('disabled', false).removeClass('hidden');
                 btnPause.prop('disabled', true).addClass('hidden');

main/template/default/document/record_audio.tpl

@@ -9,6 +9,17 @@
                 <div class="form-group">
                     <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
                     <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
+                    <div id="timer" style="display: none">
+                        <h2>
+                            <div class="label label-danger">
+                                <span id="hour">00</span>
+                                <span class="divider">:</span>
+                                <span id="minute">00</span>
+                                <span class="divider">:</span>
+                                <span id="second">00</span>
+                            </div>
+                        </h2>
+                    </div>
                 </div>
                 <div class="form-group">
                     <input type="text" name="audio_title" id="audio-title-rtc" class="form-control" placeholder="{{ 'InputNameHere'|get_lang }}">