Merge pull request #3564 from NoelDeMartin/MOBILE-2314

MOBILE-2314: Audio recorder improvements

Author: dpalou

config.xml

@@ -198,6 +198,7 @@
         </config-file>
         <config-file parent="/*" target="AndroidManifest.xml">
             <uses-feature android:name="android.hardware.bluetooth" android:required="false" />
+            <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
         </config-file>
         <config-file parent="/*" target="AndroidManifest.xml">
             <queries>

src/core/components/sheet-modal/sheet-modal.scss

@@ -7,6 +7,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: flex-end;
     isolation: isolate;
 
@@ -23,6 +24,8 @@
         z-index: 3; // ion-backdrop has z-index 2
         transform: translateY(100%);
         transition: transform 300ms ease-in;
+        width: 100%;
+        max-width: 500px;
     }
 
     &.active {

src/core/components/sheet-modal/sheet-modal.ts

@@ -34,6 +34,7 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
 
     private element: HTMLElement;
     private wrapperElement = new CorePromisedValue<HTMLElement>();
+    private content?: HTMLElement;
 
     constructor({ nativeElement: element }: ElementRef<HTMLElement>) {
         this.element = element;
@@ -61,7 +62,7 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
      */
     async show(): Promise<T> {
         const wrapper = await this.wrapperElement;
-        const element = await AngularFrameworkDelegate.attachViewToDom(wrapper, this.component, this.componentProps ?? {});
+        this.content = await AngularFrameworkDelegate.attachViewToDom(wrapper, this.component, this.componentProps ?? {});
 
         await CoreUtils.nextTick();
 
@@ -71,7 +72,7 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
         await CoreUtils.nextTick();
         await CoreUtils.wait(300);
 
-        const instance = CoreDirectivesRegistry.resolve(element, this.component);
+        const instance = CoreDirectivesRegistry.resolve(this.content, this.component);
 
         if (!instance) {
             throw new Error('Modal not mounted properly');
@@ -84,10 +85,13 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
      * Hide modal.
      */
     async hide(): Promise<void> {
+        const wrapper = await this.wrapperElement;
+
         this.element.classList.remove('active');
 
         await CoreUtils.nextTick();
         await CoreUtils.wait(300);
+        await AngularFrameworkDelegate.removeViewFromDom(wrapper, this.content);
     }
 
 }

src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss

@@ -2,7 +2,12 @@
     --background-color: var(--ion-background-color, #fff);
     --bars-color: var(--ion-text-color, #000);
 
+    position: relative;
+
     canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
     }

src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts

@@ -48,17 +48,7 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O
         this.context = this.canvas?.getContext('2d');
         this.buffer = new Uint8Array(this.analyser.fftSize);
 
-        if (this.context && this.canvas) {
-            const styles = getComputedStyle(this.element);
-
-            this.canvas.width = this.canvas.clientWidth;
-            this.canvas.height = this.canvas.clientHeight;
-            this.context.fillStyle = styles.getPropertyValue('--background-color');
-            this.context.lineCap = 'round';
-            this.context.lineWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH;
-            this.context.strokeStyle = styles.getPropertyValue('--bars-color');
-        }
-
+        this.updateCanvas(this.element.clientWidth, this.element.clientHeight);
         this.draw();
     }
 
@@ -77,6 +67,10 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O
             return;
         }
 
+        if (this.canvas.width !== this.element.clientWidth || this.canvas.height !== this.element.clientHeight) {
+            this.updateCanvas(this.element.clientWidth, this.element.clientHeight);
+        }
+
         const width = this.canvas.width;
         const height = this.canvas.height;
         const barsWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH;
@@ -157,4 +151,25 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O
         }
     }
 
+    /**
+     * Set canvas element dimensions and configure styles.
+     *
+     * @param width Canvas width.
+     * @param height Canvas height.
+     */
+    private updateCanvas(width: number, height: number): void {
+        if (!this.canvas || !this.context) {
+            return;
+        }
+
+        const styles = getComputedStyle(this.element);
+
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.context.fillStyle = styles.getPropertyValue('--background-color');
+        this.context.lineCap = 'round';
+        this.context.lineWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH;
+        this.context.strokeStyle = styles.getPropertyValue('--bars-color');
+    }
+
 }

src/core/features/fileuploader/components/audio-recorder/audio-recorder.component.ts

@@ -86,7 +86,11 @@ export class CoreFileUploaderAudioRecorderComponent extends CoreModalComponent<C
      * @inheritdoc
      */
     ngOnDestroy(): void {
-        this.media$.value?.recorder.stop();
+        const recorder = this.media$.value?.recorder;
+
+        if (recorder && recorder.state !== 'inactive') {
+            recorder.stop();
+        }
     }
 
     /**

src/core/services/modals.ts

@@ -76,8 +76,8 @@ export class CoreModalsService {
 
         modal.result.finally(async () => {
             await sheetModal.hide();
+            await AngularFrameworkDelegate.removeViewFromDom(container, element);
 
-            element.remove();
             viewContainer?.removeAttribute('aria-hidden');
         });