Show messages while uploading recorded audio - refs BT#13610

main/inc/ajax/record_audio_rtc.ajax.php

@@ -10,20 +10,30 @@ api_protect_course_script();
 api_block_anonymous_users();
 
 $courseInfo = api_get_course_info();
+/** @var string $tool document or exercise */
+$tool = isset($_REQUEST['tool']) ? $_REQUEST['tool'] : '';
+$userId = api_get_user_id();
 
 if (!isset($_FILES['audio_blob'], $_REQUEST['audio_dir'])) {
-    api_not_allowed();
-}
-
-$file = $_FILES['audio_blob'];
-$audioDir = Security::remove_XSS($_REQUEST['audio_dir']);
-$userId = api_get_user_id();
+    if ($tool === 'exercise') {
+        header('Content-Type: application/json');
+        echo json_encode([
+            'error' => true,
+            'message' => Display::return_message(get_lang('UploadError'), 'error')
+        ]);
+
+        Display::cleanFlashMessages();
+        exit;
+    }
 
-if (empty($userId)) {
-    api_not_allowed();
+    Display::addFlash(
+        Display::return_message(get_lang('UploadError'), 'error')
+    );
+    exit;
 }
 
-$audioDir = Security::remove_XSS($audioDir);
+$file = isset($_FILES['audio_blob']) ? $_FILES['audio_blob'] : [];
+$audioDir = Security::remove_XSS($_REQUEST['audio_dir']);
 
 $dirBaseDocuments = api_get_path(SYS_COURSE_PATH).$courseInfo['path'].'/document';
 $saveDir = $dirBaseDocuments.$audioDir;
@@ -34,7 +44,7 @@ if (!is_dir($saveDir)) {
 
 $file['file'] = $file;
 
-$result = DocumentManager::upload_document(
+$uploadedDocument = DocumentManager::upload_document(
     $file,
     $audioDir,
     $file['name'],
@@ -42,12 +52,14 @@ $result = DocumentManager::upload_document(
     0,
     'overwrite',
     false,
-    false
+    in_array($tool, ['document', 'exercise'])
 );
 
-if (!empty($result) && is_array($result)) {
-    $newDocId = $result['id'];
-    $courseId = $result['c_id'];
+$error = empty($uploadedDocument) || !is_array($uploadedDocument);
+
+if (!$error) {
+    $newDocId = $uploadedDocument['id'];
+    $courseId = $uploadedDocument['c_id'];
 
     /** @var learnpath $lp */
     $lp = Session::read('oLP');
@@ -61,10 +73,17 @@ if (!empty($result) && is_array($result)) {
 
     $data = DocumentManager::get_document_data_by_id($newDocId, $courseInfo['code']);
 
-    Display::addFlash(
-        Display::return_message(get_lang('DocumentCreated'), 'success')
-    );
+    if ($tool === 'exercise') {
+        header('Content-Type: application/json');
+        echo json_encode([
+            'error' => $error,
+            'message' => Display::getFlashToString(),
+            'fileUrl' => $data['document_url']
+        ]);
+
+        Display::cleanFlashMessages();
+        exit;
+    }
 
     echo $data['document_url'];
-    exit;
 }

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

@@ -5,6 +5,7 @@ window.RecordAudio = (function () {
 
         var mediaConstraints = {audio: true},
             recordRTC = null,
+            txtName = $('#audio-title-rtc'),
             btnStart = $(rtcInfo.btnStartId),
             btnPause = $(rtcInfo.btnPauseId),
             btnPlay = $(rtcInfo.btnPlayId),
@@ -14,7 +15,7 @@ window.RecordAudio = (function () {
 
         btnStart.on('click', function () {
             if (!fileName) {
-                fileName = $('#audio-title-rtc').val();
+                fileName = txtName.val();
 
                 if (!$.trim(fileName)) {
                     return;
@@ -30,7 +31,7 @@ window.RecordAudio = (function () {
                 });
                 recordRTC.startRecording();
 
-                $('#audio-title-rtc').prop('readonly', true);
+                txtName.prop('readonly', true);
                 btnSave.prop('disabled', true).addClass('hidden');
                 btnStop.prop('disabled', false).removeClass('hidden');
                 btnStart.prop('disabled', true).addClass('hidden');
@@ -110,7 +111,7 @@ window.RecordAudio = (function () {
             formData.append('audio_dir', rtcInfo.directory);
 
             $.ajax({
-                url: _p.web_ajax + 'record_audio_rtc.ajax.php',
+                url: _p.web_ajax + 'record_audio_rtc.ajax.php?tool=' + (!!txtName.length ? 'document' : 'exercise'),
                 data: formData,
                 processData: false,
                 contentType: false,
@@ -122,23 +123,19 @@ window.RecordAudio = (function () {
                     btnStop.prop('disabled', true);
                     btnSave.prop('disabled', true).text(btnSave.data('loadingtext'));
                 }
-            }).done(function (fileUrl) {
-                if (!fileUrl) {
+            }).done(function (response) {
+                if (!!txtName.length) {
+                    window.location.reload();
                     return;
                 }
 
-                if ($('#audio-title-rtc').length) {
-                    $('#audio-title-rtc').prop('readonly', false);
-
-                    window.location.reload();
-                }
-            }).fail(function () {
-                alert(btnSave.data('errortext'));
+                $(response.message).insertAfter($(rtcInfo.blockId).find('.well'));
             }).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');
+                txtName.prop('readonly', false);
             });
         });
     }

main/template/default/document/record_audio.tpl

@@ -20,12 +20,11 @@
                 <button class="btn btn-primary" type="button" id="btn-start-record">
                     <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
                 </button>
-                <button class="btn btn-danger" type="button" id="btn-stop-record" disabled>
+                <button class="btn btn-danger hidden" 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"
-                    data-loadingtext="{{ 'Uploading'|get_lang }}" data-errortext="{{ 'TheFileIsNotUploaded'|get_lang }}"
-                    disabled>
+                <button class="btn btn-success hidden" type="button" id="btn-save-record"
+                    data-loadingtext="{{ 'Uploading'|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

@@ -1,12 +1,12 @@
-<div id="record-audio-recordrtc-{{ question_id }}" class="row text-center">
+<div id="record-audio-recordrtc-{{ question_id }}" class="row">
     <div class="col-sm-4 col-sm-offset-4">
-        <div class="form-group">
+        <div class="form-group text-center">
             <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
             <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
         </div>
     </div>
     <div class="col-sm-12">
-        <div class="form-group">
+        <div class="form-group text-center">
             <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>
@@ -20,7 +20,7 @@
                 <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 }}"
-                data-loadingtext="{{ 'Uploading'|get_lang }}" data-errortext="{{ 'TheFileIsNotUploaded'|get_lang }}"
+                data-loadingtext="{{ 'Uploading'|get_lang }}"
                 disabled>
                 <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
             </button>
@@ -28,12 +28,13 @@
                 <em class="fa fa-bars"></em> {{ 'AddText' | get_lang }}
             </button>
         </div>
-        <div class="form-group">
+        <div class="form-group text-center">
             <audio class="skip hidden center-block" controls id="record-preview-{{ question_id }}"></audio>
         </div>
         <div class="well">
             {{ 'OralExpressionHelpText' | get_lang }}
         </div>
+        <div class="record-message"></div>
     </div>
 </div>