Whispeak: Add timer when recording voice - refs BT#17415

chamilo · Nov 23, 2020 · 295472c · 295472c
1 parent 5dbbc73
commit 295472c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 0 deletions.
diff --git a/plugin/whispeakauth/Controller/AuthenticationController.php b/plugin/whispeakauth/Controller/AuthenticationController.php
@@ -348,6 +348,7 @@ protected function displayPage($isFullPage, array $variables)
 
         $htmlHeadXtra[] = api_get_js('rtc/RecordRTC.js');
         $htmlHeadXtra[] = api_get_js_simple(api_get_path(WEB_PLUGIN_PATH).'whispeakauth/assets/js/RecordAudio.js');
+        $htmlHeadXtra[] = api_get_js('epiclock/javascript/jquery.epiclock.min.js');
 
         $pageTitle = $this->plugin->get_title();
 

diff --git a/plugin/whispeakauth/Controller/EnrollmentController.php b/plugin/whispeakauth/Controller/EnrollmentController.php
@@ -98,6 +98,7 @@ protected function displayPage($isFullPage, array $variables)
 
         $htmlHeadXtra[] = api_get_js('rtc/RecordRTC.js');
         $htmlHeadXtra[] = api_get_js_simple(api_get_path(WEB_PLUGIN_PATH).'whispeakauth/assets/js/RecordAudio.js');
+        $htmlHeadXtra[] = api_get_js('epiclock/javascript/jquery.epiclock.min.js');
 
         $pageTitle = $this->plugin->get_lang('EnrollmentTitle');
 

diff --git a/plugin/whispeakauth/assets/js/RecordAudio.js b/plugin/whispeakauth/assets/js/RecordAudio.js
@@ -85,6 +85,9 @@ window.RecordAudio = (function () {
                 btnStop.prop('disabled', false).parent().removeClass('hidden');
                 btnStart.prop('disabled', true).parent().addClass('hidden');
                 tagAudio.removeClass('show').parents('#audio-wrapper').addClass('hidden');
+
+                $('.fa-microphone').addClass('text-danger');
+                $('#txt-timer').epiclock({mode: $.epiclock.modes.countup, format: 'e:s'});
             }
 
             function errorCallback(error) {
@@ -111,6 +114,9 @@ window.RecordAudio = (function () {
                 return;
             }
 
+            $('.fa-microphone').removeClass('text-danger');
+            $('#txt-timer').text('');
+
             recordRTC.stopRecording(function (audioURL) {
                 tagAudio.prop('src', audioURL);
 

diff --git a/plugin/whispeakauth/view/record_audio.html.twig b/plugin/whispeakauth/view/record_audio.html.twig
@@ -6,6 +6,7 @@
                 <div class="row">
                     <div class="col-sm-3 text-center">
                         <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
+                        <span id="txt-timer" class="text-danger h3 show"></span>
                     </div>
                     <div class="col-sm-9 text-center">
                         <p class="lead" id="txt-sample-text">{{ sample_text }}</p>