EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2314 fileuploader: Improve recorder styles

main
Noel De Martin 2023-02-23 13:50:45 +01:00
parent 5ddcd6cfc4
commit c74a4952ee
3 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/core/components/sheet-modal/sheet-modal.scss
View File

@ -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 {

5
src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss
View File

@ -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%;
}

37
src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts
View File

@ -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');
}
}