Courseware: Im »Audio«-Block »Audio-Aufnahmen zulassen« ist kaputt

Merge request studip/studip!4017

1 files changed, 23 insertions, 10 deletions

diff --git a/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue b/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue
index 4789c9f..9696cf1 100644
--- a/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue
@@ -195,13 +195,18 @@
                 <div v-if="showRecorder && canGetMediaDevices" class="cw-call-to-action">
                     <button
                         v-if="!userRecorderEnabled"
+                        class="action-button"
                         :title="enableRecorderTitle"
                         @click.prevent="enableRecorder"
                     >
                         <studip-icon shape="microphone" :size="48"/>
                         {{ $gettext('Aufnahme aktivieren') }}
                     </button>
-                    <button v-else  @click.prevent="resetRecorder">
+                    <button
+                        v-else
+                        class="action-button"
+                        @click.prevent="resetRecorder"
+                    >
                         <studip-icon shape="decline" :size="48"/>
                         {{ $gettext('Aufnahme abbrechen') }}
                     </button>
@@ -298,7 +303,7 @@
                         {{ $gettext('Audio-Aufnahmen zulassen') }}
                         <span
                             class="tooltip tooltip-icon"
-                            :data-tooltip="$gettext('Um Aufnahmen zu ermöglichen, muss ein Ordner ausgewählt werden.')"
+                            :data-tooltip="$gettext('Um Aufnahmen zu ermöglichen, muss ein Ordner ausgewählt werden. Der Safari-Browser unterstützt das genutze Audioformat nicht. Bitte verwenden Sie Firefox, Chrome oder einen ähnlichen Browser.')"
                         ></span>
                         <select v-model="currentRecorderEnabled" :disabled="!folderSelected">
                             <option :value="true">{{ $gettext('Ja') }}</option>
@@ -422,7 +427,7 @@ export default {
             if (this.durationSeconds > 0) {
                 return this.seconds2time(this.durationSeconds);
             }
-            return false;
+            return '-:--';
         },
         title() {
             return this.block?.attributes?.payload?.title;
@@ -556,6 +561,10 @@ export default {
         canEditFile() {
             return this.hasMP3Tags && this.activeFileRef.attributes['is-editable'];
         },
+
+        isOpusSupported() {
+            return MediaRecorder.isTypeSupported('audio/webm;codecs=opus');
+},
     },
     async mounted() {
         this.initCurrentData();
@@ -813,11 +822,11 @@ export default {
             let view = this;
             navigator.mediaDevices
                 .getUserMedia({ audio: true })
-                .then(function (stream) {
-                    view.recorder = new MediaRecorder(stream, { type: 'audio/webm; codecs:vp9' });
-                    view.userRecorderEnabled = true;
-                    view.recorder.ondataavailable = (e) => {
-                        view.chunks.push(e.data);
+                .then((stream) => {
+                    this.recorder = new MediaRecorder(stream, { type: 'audio/webm;codecs:opus' });
+                    this.userRecorderEnabled = true;
+                    this.recorder.ondataavailable = (e) => {
+                        this.chunks.push(e.data);
                     };
 
                     view.recorderAudioCtx = new AudioContext();
@@ -872,9 +881,8 @@ export default {
             }
         },
         async storeRecording() {
-            let view = this;
             let user = this.usersById({ id: this.userId });
-            let blob = new Blob(view.chunks, { type: 'audio/webm; codecs:vp9' });
+            let blob = new Blob(this.chunks, { type: 'audio/webm;codecs:opus' });
 
             let file = {
                 attributes: {
@@ -1004,6 +1012,11 @@ export default {
             setTimeout(() => {
                 this.loadingCover = false;
             }, 200);
+            if (!this.isOpusSupported) {
+                this.companionWarning({
+                    info: this.$gettext('Ihr Browser unterstützt das Audioformat leider nicht.'),
+                });
+            }
         },
         isRecording(newState) {
             if (newState) {