bugfix

bricks/imgs/mic.svg

@@ -0,0 +1 @@
+<svg t="1759153280754" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4711" width="100%" height="100%"><path d="M480 704H640a64.810667 64.810667 0 0 0 64-64v-32h-96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h96V448h-96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h96V288h-96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h96V192A64.810667 64.810667 0 0 0 640 128H384a64.810667 64.810667 0 0 0-64 64v32h96a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H320V384h96a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H320v96h96a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H320V640A64.810667 64.810667 0 0 0 384 704h96z m64 64v128h192a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H288a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04 31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h192v-128H384c-36.010667-0.64-66.176-13.141333-90.496-37.504-24.32-24.32-36.821333-54.485333-37.504-90.496V192c0.682667-36.010667 13.184-66.176 37.504-90.496 24.32-24.32 54.485333-36.821333 90.496-37.504h256c36.010667 0.682667 66.176 13.141333 90.496 37.504 24.32 24.32 36.821333 54.485333 37.504 90.496V640c-0.64 36.010667-13.141333 66.176-37.504 90.496-24.32 24.32-54.485333 36.821333-90.496 37.504h-96z" fill="${color}" fill-opacity=".96" p-id="4712"></path></svg>

bricks/input.js

@@ -481,7 +481,6 @@ bricks.UiFile = class extends bricks.VBox {
 		if (opts.accept) this.input.accept = opts.accept;
 		if (opts.multiple) this.input.multiple = true;
 		this.input.addEventListener('change', this.handleFileSelect.bind(this));
-		// this.bind('click', this.handleClick.bind(this));
 		this.add_widget(new bricks.Text({text:'drop in or click to choose file'}));
 		this.dom_element.appendChild(this.input);
 	}
@@ -553,9 +552,81 @@ bricks.UiFile = class extends bricks.VBox {
 	}
 }
 
+bricks.UiAudio =class extends bricks.UiFile {
+	constructor(opts){
+		opts.name = opts.name || 'audio_file';
+		opts.width = opts.width || '100%';
+		opts.accept = 'audio/';
+		super(opts);
+		this.uitype='video';
+		this.camera_w = new bricks.Svg({
+				url:bricks_resource('imgs/mic.svg'),
+				tip:'use mic to record audio',
+				rate:2});
+		this.add_widget(this.camera_w);
+		this.camera_w.bind('click', this.open_recorder.bind(this));
+		this.preview = new bricks.VBox({width: '100%'});
+		this.add_widget(this.preview);
+		this.bind('changed', this.show_audio.bind(this));
+	}
+	open_recorder(event){
+		event.stopPropagation();
+		var recorder = new bricks.SysAudioRecorder({
+			"archor":"cc",
+			"auto_open":true,
+			"type": "recorder",
+			"cheight":3,
+			"cwidth":20
+		});
+		recorder.bring_to_top();
+		recorder.bind('record_end', this.accept_audio.bind(this, recorder));
+	}
+	accept_audio(recorder, event){
+		recorder.dismiss();
+		this.value = event.params.file
+		console.log('record finished, value=', this.value);
+		this.dispatch('changed', event.params.url);
+	}
+	show_audio(event){
+		var params = event.params;
+		if (params instanceof File){
+			params = [ params ];
+		}
+		if (typeof params == 'string'){
+			params = [ params ];
+		}
+		this.preview.clear_widgets();
+		params.forEach( f => {
+			this._show_audio(f);
+		});
+	}
+
+	_show_audio(file) {
+		if (typeof file == 'string'){
+			var vw = new bricks.AudioPlayer({
+				url:file,
+				audoplay: true,
+				width:'100%'
+			});
+			this.preview.add_widget(vw);
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			var imgw = new bricks.AudioPlayer({
+				url:e.target.result,
+				autoplay: true,
+				width:'100%'
+			});
+			console.log('show audio', e.target.result);
+			this.preview.add_widget(imgw);
+		};
+		reader.readAsDataURL(file);
+	}
+}
 bricks.UiVideo =class extends bricks.UiFile {
 	constructor(opts){
-		opts.name = opts.name || 'image';
+		opts.name = opts.name || 'video_file';
 		opts.width = opts.width || '100%';
 		opts.accept = 'video/';
 		super(opts);
@@ -1176,31 +1247,6 @@ bricks._Input = class {
 	}
 }
 
-bricks.UiAudio =class extends bricks.UiFile {
-	constructor(opts){
-		super(opts);
-		this.uitype = 'audio';
-		this.autoplay = opts.autoplay;
-		this.readonly = opts.readonly;
-		this.icon = new bricks.Svg({
-			url: bricks_resource('imgs/right_arrow.svg')});
-		this.add_widget(this.icon);
-		this.icon.bind('click', this.play_audio.bind(this));
-		this.player = new bricks.AudioPlayer({
-			url:this.value
-			});
-		if (this.autoplay){
-			schedule_once(this.autoplay_audio.bind(this), 1);
-		}
-
-	}
-	autoplay_audio(){
-		this.icon.dispatch('click');
-	}
-	play_audio(){
-		this.player.toggle_play();
-	}
-}
 var Input = new bricks._Input();
 Input.register('UiAudioRecorder', 'audiorecorder', bricks.UiAudioRecorder);
 Input.register('UiStr', 'str', bricks.UiStr);

bricks/recorder.js

@@ -77,8 +77,13 @@ bricks.MediaRecorder = class extends bricks.Popup {
 			// 1. 在本地播放
 			const url = URL.createObjectURL(blob);
 			// 2. 转成 File 对象
+			if (this.mimetype == 'video/mp4'){
+				filename = 'recorded_video.mp4';
+			} else {
+				filename = 'recorded_audio.wav'
+			}
 			const file = new Fil e([blob], 
-						"recorded_video.webm", 
+						filename, 
 						{ type: this.mimetype });
 			var data = {
 				url: url,
@@ -94,7 +99,9 @@ bricks.MediaRecorder = class extends bricks.Popup {
 		this.dispatch('record_started')
 		console.log("Recording started...");
 	}
-
+	file_name(){
+		return 'noname';
+	}
 	stop_recorder(){
 		this.normal_stop = true;
 		this.time_diff = bricks.timeDiff(this.start_time);