From 1227b69cdcd449bc5cfdb430f97b74f5162ea317 Mon Sep 17 00:00:00 2001 From: laineyhm Date: Fri, 23 Sep 2022 16:18:13 +0700 Subject: [PATCH] Sanitizing shell args in all places; making code Prettier --- .../Lexicon/Command/LexUploadCommands.php | 8 +- .../audio-recorder.component.ts | 148 ++++++++++-------- 2 files changed, 85 insertions(+), 71 deletions(-) diff --git a/src/Api/Model/Languageforge/Lexicon/Command/LexUploadCommands.php b/src/Api/Model/Languageforge/Lexicon/Command/LexUploadCommands.php index 88589c2667..6558796400 100644 --- a/src/Api/Model/Languageforge/Lexicon/Command/LexUploadCommands.php +++ b/src/Api/Model/Languageforge/Lexicon/Command/LexUploadCommands.php @@ -115,14 +115,14 @@ public static function uploadAudioFile($projectId, $mediaType, $tmpFilePath) $extensionlessFileName = substr($fileName, 0, strrpos($fileName, strtolower($fileExt))); if($audioDuration < 6){ - `ffmpeg -i $tmpFilePath -b:a 165K -maxrate 165K -bufsize 80K $extensionlessTmpFilePath.wav 2> /dev/null')`; - `mv $tmpFilePath $extensionlessTmpFilePath.wav 2> /dev/null`; + `ffmpeg -i $sanitizedTmpFilePath -b:a 165K -maxrate 165K -bufsize 80K $extensionlessTmpFilePath.wav 2> /dev/null')`; + `mv $sanitizedTmpFilePath $extensionlessTmpFilePath.wav 2> /dev/null`; $fileName = $extensionlessFileName . '.wav'; $tmpFilePath = $extensionlessTmpFilePath. '.wav'; } else{ - `ffmpeg -i $tmpFilePath -b:a 165K -maxrate 165K -bufsize 80K $extensionlessTmpFilePath.mp3 2> /dev/null')`; - `mv $tmpFilePath $extensionlessTmpFilePath.mp3 2> /dev/null`; + `ffmpeg -i $sanitizedTmpFilePath -b:a 165K -maxrate 165K -bufsize 80K $extensionlessTmpFilePath.mp3 2> /dev/null')`; + `mv $sanitizedTmpFilePath $extensionlessTmpFilePath.mp3 2> /dev/null`; $fileName = $extensionlessFileName . '.mp3'; $tmpFilePath = $extensionlessTmpFilePath . '.mp3'; } diff --git a/src/angular-app/bellows/shared/audio-recorder/audio-recorder.component.ts b/src/angular-app/bellows/shared/audio-recorder/audio-recorder.component.ts index 412ea77621..ac268dab40 100644 --- a/src/angular-app/bellows/shared/audio-recorder/audio-recorder.component.ts +++ b/src/angular-app/bellows/shared/audio-recorder/audio-recorder.component.ts @@ -1,85 +1,96 @@ -import { webmFixDuration } from 'webm-fix-duration'; -import * as angular from 'angular'; +import { webmFixDuration } from "webm-fix-duration"; +import * as angular from "angular"; export class AudioRecorderController implements angular.IController { - - static $inject = ['$interval', '$scope']; + static $inject = ["$interval", "$scope"]; mediaRecorder: MediaRecorder; - chunks: any = []; + chunks: string[] = []; isRecording = false; hasRecorded = false; recordingStartTime: Date; audioSrc: string; - blob: any; + blob: Blob; recordingTime: string; errorMessage: string; callback: (blob: Blob) => void; durationInMilliseconds: number; interval: angular.IPromise; - constructor(private $interval: angular.IIntervalService, private $scope: angular.IScope) {} + constructor( + private $interval: angular.IIntervalService, + private $scope: angular.IScope + ) {} private startRecording() { - - this.recordingTime = '0:00'; - - navigator.mediaDevices.getUserMedia({audio: true}) - .then(stream => { - - this.mediaRecorder = new MediaRecorder(stream); - - this.$scope.$apply(() => { - this.hasRecorded = true; - this.errorMessage = null; - this.isRecording = true; - }); - - - this.mediaRecorder.addEventListener('dataavailable', async (e: { data: any; }) => { - this.chunks.push(e.data); - var roughBlob = new Blob(this.chunks, {type: 'audio/webm; codecs=opus'}); - //In some browsers (Chrome, Edge, ...) navigator.mediaDevices.getUserMedia with MediaRecorder creates WEBM files without duration metadata //2022-09 - //webmFixDuration appends missing duration metadata to a WEBM file blob. - this.blob = await webmFixDuration(roughBlob, this.durationInMilliseconds, 'audio/webm; codecs=opus'); - this.chunks = []; - this.audioSrc = window.URL.createObjectURL(this.blob); - this.$scope.$digest(); - }); - - this.recordingStartTime = new Date(); - - this.interval = this.$interval(() => { - const seconds = Math.floor((new Date().getTime() - this.recordingStartTime.getTime()) / 1000); - this.recordingTime = Math.floor(seconds / 60) + ':' + (seconds % 60 < 10 ? '0' : '') + seconds % 60; - }, 1000); - - - this.mediaRecorder.start(); - - }, err => { - - this.$scope.$apply(() => { - this.errorMessage = 'Unable to record audio from your microphone.'; - this.isRecording = false; - this.hasRecorded = false; - }); - - console.error(err); - - }); //END call to getUserMedia() - - + this.recordingTime = "0:00"; + + navigator.mediaDevices.getUserMedia({ audio: true }).then( + (stream) => { + this.mediaRecorder = new MediaRecorder(stream); + + this.$scope.$apply(() => { + this.hasRecorded = true; + this.errorMessage = null; + this.isRecording = true; + }); + + this.mediaRecorder.addEventListener( + "dataavailable", + async (e: { data: any }) => { + this.chunks.push(e.data); + var roughBlob = new Blob(this.chunks, { + type: "audio/webm; codecs=opus", + }); + //In some browsers (Chrome, Edge, ...) navigator.mediaDevices.getUserMedia with MediaRecorder creates WEBM files without duration metadata //2022-09 + //webmFixDuration appends missing duration metadata to a WEBM file blob. + this.blob = await webmFixDuration( + roughBlob, + this.durationInMilliseconds, + "audio/webm; codecs=opus" + ); + this.chunks = []; + this.audioSrc = window.URL.createObjectURL(this.blob); + this.$scope.$digest(); + } + ); + + this.recordingStartTime = new Date(); + + this.interval = this.$interval(() => { + const seconds = Math.floor( + (new Date().getTime() - this.recordingStartTime.getTime()) / 1000 + ); + this.recordingTime = + Math.floor(seconds / 60) + + ":" + + (seconds % 60 < 10 ? "0" : "") + + (seconds % 60); + }, 1000); + + this.mediaRecorder.start(); + }, + (err) => { + this.$scope.$apply(() => { + this.errorMessage = "Unable to record audio from your microphone."; + this.isRecording = false; + this.hasRecorded = false; + }); + + console.error(err); + } + ); } private stopRecording() { - this.durationInMilliseconds = Math.floor(new Date().getTime() - this.recordingStartTime.getTime()); + this.durationInMilliseconds = Math.floor( + new Date().getTime() - this.recordingStartTime.getTime() + ); this.mediaRecorder.stop(); - if (this.interval){ + if (this.interval) { this.$interval.cancel(this.interval); - } } @@ -90,7 +101,7 @@ export class AudioRecorderController implements angular.IController { } close() { - if (this.isRecording){ + if (this.isRecording) { this.stopRecording(); } this.callback(null); @@ -101,23 +112,26 @@ export class AudioRecorderController implements angular.IController { } recordingSupported() { - return navigator.mediaDevices && navigator.mediaDevices.enumerateDevices && navigator.mediaDevices.getUserMedia && - ((window as any).AudioContext || (window as any).webkitAudioContext); + return ( + navigator.mediaDevices && + navigator.mediaDevices.enumerateDevices && + navigator.mediaDevices.getUserMedia && + ((window as any).AudioContext || (window as any).webkitAudioContext) + ); } $onDestroy() { - if(this.isRecording){ + if (this.isRecording) { this.stopRecording(); } } - } - export const AudioRecorderComponent: angular.IComponentOptions = { bindings: { - callback: '<' + callback: "<", }, controller: AudioRecorderController, - templateUrl: '/angular-app/bellows/shared/audio-recorder/audio-recorder.component.html' + templateUrl: + "/angular-app/bellows/shared/audio-recorder/audio-recorder.component.html", };