From 6d5e9472365fb9e2e635e4872c935e689bc85976 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Tue, 18 Mar 2025 14:37:38 +0000
Subject: =?UTF-8?q?Courseware:=20Im=20=C2=BBAudio=C2=AB-Block=20=C2=BBAudi?=
 =?UTF-8?q?o-Aufnahmen=20zulassen=C2=AB=20ist=20kaputt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Merge request studip/studip!4017
---
 .../courseware/blocks/CoursewareAudioBlock.vue     | 33 +++++++++++++++-------
 1 file 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) {
-- 
cgit v1.0