Audio Recorder: Add timer when recording a message see BT#17833

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

@@ -37,6 +37,10 @@ window.RecordAudio = (function () {
         $("#timer").hide();
     }
 
+    function pauseTimer() {
+        clearInterval(window.timerInterval);
+    }
+
     function useRecordRTC(rtcInfo, fileName) {
         $(rtcInfo.blockId).show();
 
@@ -155,6 +159,7 @@ window.RecordAudio = (function () {
             if (!recordRTC) {
                 return;
             }
+            pauseTimer();
 
             btnPause.prop('disabled', true).addClass('hidden');
             btnPlay.prop('disabled', false).removeClass('hidden');
@@ -171,6 +176,7 @@ window.RecordAudio = (function () {
             btnPause.prop('disabled', false).removeClass('hidden');
             btnStop.prop('disabled', false).removeClass('hidden');
             recordRTC.resumeRecording();
+            startTimer();
         });
 
         btnStop.on('click', function () {

main/messages/new_message.php

@@ -1,4 +1,5 @@
 <?php
+
 /* For licensing terms, see /license.txt */
 
 /**
@@ -134,7 +135,10 @@ function manageForm($default, $select_from_user_list = null, $sent_to = '', $tpl
                 ]
             );
             $form->addRule('id_text_name', get_lang('ThisFieldIsRequired'), 'required');
-            $form->addElement('html', '<div id="id_div_search" style="padding:0px" class="message-select-box" >&nbsp;</div>');
+            $form->addElement(
+                'html',
+                '<div id="id_div_search" style="padding:0px" class="message-select-box" >&nbsp;</div>'
+            );
             $form->addElement('hidden', 'user_list', 0, ['id' => 'user_list']);
         } else {
             if (!empty($sent_to)) {
@@ -232,7 +236,8 @@ function manageForm($default, $select_from_user_list = null, $sent_to = '', $tpl
 
         $form->addLabel(
             '',
-            '<span id="link-more-attach"><a class="btn btn-default" href="javascript://" onclick="return add_image_form()">'.
+            '<span id="link-more-attach">
+              <a class="btn btn-default" href="javascript://" onclick="return add_image_form()">'.
             get_lang('AddOneMoreFile').'</a></span>&nbsp;('.
             sprintf(
                 get_lang('MaximunFileSizeX'),

main/template/default/exercise/oral_expression.tpl

@@ -8,6 +8,19 @@
     </div>
     <div class="col-sm-12">
         <div class="form-group text-center">
+            <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>
+                <br />
+            </div>
+
             <button class="btn btn-primary" type="button" id="btn-start-record-{{ question_id }}">
                 <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
             </button>

main/template/default/message/record_audio.tpl

@@ -5,6 +5,18 @@
                 <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>
                 <input type="hidden" name="audio_title" id="audio-title-rtc" value="{{ audio_title }}">
             </div>