Fix remaining issues from final logical evaluation

- Add CSS styles for audio visualizer (.pid and .pids-wrapper)
- Fix audio MIME type from video/mp4 to audio/mp4 in audioRecordAudioTask
- Make video recordings include audio by default with opt-out via disableAudio flag
- Add URL cleanup to prevent memory leaks (track and revoke blob URLs)
- Add beforeDestroy lifecycle hook to clean up resources

Author: yibeichan

src/components/InputSelector/InputSelector.vue

@@ -37,7 +37,7 @@
         :constraints="valueConstraints"
         :selected_language="selected_language"
         :init="init"
-        :audio="false"
+        :audio="getVideoAudioSetting('videoCheck')"
         :visualizer="false"
         v-on:valueChanged="sendData"/>
     </div>
@@ -59,7 +59,7 @@
         :constraints="valueConstraints"
         :selected_language="selected_language"
         :init="init"
-        :audio="false"
+        :audio="getVideoAudioSetting(inputType)"
         :visualizer="false"
         :mode="inputType"
         :fieldData="fieldData"
@@ -333,6 +333,15 @@ export default {
     };
   },
   methods: {
+    getVideoAudioSetting(inputType) {
+      // Check if there's a specific setting to disable audio for video recording
+      // Look in valueConstraints for a disableAudio flag
+      if (this.valueConstraints && this.valueConstraints['http://schema.repronim.org/disableAudio']) {
+        return !this.valueConstraints['http://schema.repronim.org/disableAudio'][0]['@value'];
+      }
+      // Default: include audio for all video recordings
+      return true;
+    },
     skip() {
       this.$emit('skip');
     },

src/components/Inputs/MediaRecord/MediaRecord.vue

@@ -28,7 +28,7 @@
       </div>
       <div v-if="mode==='audioRecordAudioTask' || mode==='videoRecordAudioTask'" class="mb-3">
         <audio controls>
-          <source :src="getAudioSource" type="video/mp4">
+          <source :src="getAudioSource" type="audio/mp4">
           Your browser does not support the audio element.
         </audio>
       </div>
@@ -74,6 +74,7 @@ function handleInit(newInit) {
       this.hasRecording = true;
     } else if (newInit instanceof Blob) {
       const blobURL = URL.createObjectURL(newInit);
+      this.blobURLs.push(blobURL); // Track for cleanup
       if (this.video) {
         this.recording.src = blobURL;
       } else {
@@ -128,6 +129,7 @@ export default {
       hasError: false,
       devices: [],
       tempDeviceName: null,
+      blobURLs: [], // Track blob URLs for cleanup
     };
   },
   computed: {
@@ -180,6 +182,14 @@ export default {
     }
     handleInit.call(this, this.init);
   },
+  beforeDestroy() {
+    // Clean up blob URLs when component is destroyed
+    this.cleanupBlobURLs();
+    // Stop any active media streams
+    if (this.mediaRecorder && this.mediaRecorder.stream) {
+      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+    }
+  },
   methods: {
     getDevices() {
       navigator.mediaDevices.enumerateDevices().then((devices) => {
@@ -236,10 +246,18 @@ export default {
       clearInterval(this.interval);
     },
     reset() {
+      this.cleanupBlobURLs();
       this.hasRecording = false;
       this.isRecording = false;
       this.initializeMedia();
     },
+    cleanupBlobURLs() {
+      // Clean up all blob URLs to prevent memory leaks
+      this.blobURLs.forEach(url => {
+        URL.revokeObjectURL(url);
+      });
+      this.blobURLs = [];
+    },
     initializeMedia() {
       navigator.mediaDevices.getUserMedia(this.mediaConstraints).then(this.initializeRecorder).catch(() => {
         this.hasError = true;
@@ -260,6 +278,7 @@ export default {
       this.timeRemaining = this.recordingTime / 1000;
       this.mediaRecorder.ondataavailable = (e) => {
         const blobURL = URL.createObjectURL(e);
+        this.blobURLs.push(blobURL); // Track for cleanup
         if (this.video) {
           this.recording.src = blobURL;
         } else {
@@ -312,3 +331,20 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.pids-wrapper {
+  width: 100%;
+  background-color: white;
+  padding: 10px 0;
+}
+
+.pid {
+  width: calc(8% - 10px);
+  height: 10px;
+  display: inline-block;
+  margin: 5px;
+  background-color: #e6e7e8;
+  transition: background-color 0.1s ease;
+}
+</style>