Improve record audio when saving file - refs BT#13610

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

@@ -102,6 +102,7 @@ window.RecordAudio = (function () {
                 return;
             }
 
+            var btnSaveText = btnSave.html();
             var fileExtension = '.' + recordedBlob.type.split('/')[1];
 
             var formData = new FormData();
@@ -113,21 +114,31 @@ window.RecordAudio = (function () {
                 data: formData,
                 processData: false,
                 contentType: false,
-                type: 'POST'
-            }).then(function (fileUrl) {
+                type: 'POST',
+                beforeSend: function () {
+                    btnStart.prop('disabled', true);
+                    btnPause.prop('disabled', true);
+                    btnPlay.prop('disabled', true);
+                    btnStop.prop('disabled', true);
+                    btnSave.prop('disabled', true).text(btnSave.data('loadingtext'));
+                }
+            }).done(function (fileUrl) {
                 if (!fileUrl) {
                     return;
                 }
 
-                btnSave.prop('disabled', true).addClass('hidden');
-                btnStop.prop('disabled', true).addClass('hidden');
-                btnStart.prop('disabled', false).removeClass('hidden');
-
                 if ($('#audio-title-rtc').length) {
                     $('#audio-title-rtc').prop('readonly', false);
 
                     window.location.reload();
                 }
+            }).fail(function () {
+                alert(btnSave.data('errortext'));
+            }).always(function () {
+                btnSave.prop('disabled', true).addClass('hidden').html(btnSaveText);
+                btnStop.prop('disabled', true).addClass('hidden');
+                btnPause.prop('disabled', true).addClass('hidden');
+                btnStart.prop('disabled', false).removeClass('hidden');
             });
         });
     }

main/template/default/document/record_audio.tpl

@@ -23,7 +23,9 @@
                 <button class="btn btn-danger" type="button" id="btn-stop-record" disabled>
                     <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
                 </button>
-                <button class="btn btn-success" type="button" id="btn-save-record" disabled>
+                <button class="btn btn-success" type="button" id="btn-save-record"
+                    data-loadingtext="{{ 'Uploading'|get_lang }}" data-errortext="{{ 'TheFileIsNotUploaded'|get_lang }}"
+                    disabled>
                     <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
                 </button>
             </div>

main/template/default/exercise/oral_expression.tpl

@@ -19,7 +19,9 @@
             <button class="btn btn-danger hidden" type="button" id="btn-stop-record-{{ question_id }}" disabled>
                 <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
             </button>
-            <button class="btn btn-success hidden" type="button" id="btn-save-record-{{ question_id }}" disabled>
+            <button class="btn btn-success hidden" type="button" id="btn-save-record-{{ question_id }}"
+                data-loadingtext="{{ 'Uploading'|get_lang }}" data-errortext="{{ 'TheFileIsNotUploaded'|get_lang }}"
+                disabled>
                 <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
             </button>
             <button id="hide_description_{{ question_id }}" type="button" class="btn btn-default advanced_options" data-toggle="button" aria-pressed="false" autocomplete="off">