yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: multi-file preview in UiFile, multi video/audio in UserInputView, concat assign in LlmOut

Browse Source
This commit is contained in:
yumoqing 2026-07-16 11:40:44 +08:00
parent 1d177f163b
commit f732d631e3
2 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
bricks/input.js
View File

@ -379,16 +379,20 @@ bricks.UiFile = class extends bricks.VBox {
/*
accept:
multiple:
preview: true to show file previews after selection
*/
constructor(opts){
opts.width = opts.width || '100%';
super(opts);
this.set_css('droparea');
this.accept = opts.accept || '';
this._preview = opts.preview !== undefined ? opts.preview : true;
this.preview_box = null;
this.bind('dragover', (event) => {
event.preventDefault();
});
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
this.bind(eventName, (e) => e.preventDefault(), false);
this.bind(eventName, (e) => e.preventDefault(), false);
});
this.bind('dragenter', () => {
this.set_css('hover');
@ -409,6 +413,7 @@ bricks.UiFile = class extends bricks.VBox {
var v = this.opts.value || this.opts.defaultvalue||'';
this.value = '';
this.input.value = '';
this._clearPreview();
}
handleFileSelect(event){
var files = [];
@ -423,6 +428,7 @@ bricks.UiFile = class extends bricks.VBox {
} else {
this.value = files[0];
}
this._renderPreview(this.opts.multiple ? files : [files[0]]);
console.log('"changed" fired', this.value);
this.dispatch('changed', this.getValue());
}
@ -458,9 +464,41 @@ bricks.UiFile = class extends bricks.VBox {
this.value = files[0];
this.set_input_file([this.value]);
}
this._renderPreview(this.opts.multiple ? files : [files[0]]);
this.dispatch('changed', this.getValue());
console.log('"changed" fired', this.getValue());
}
_clearPreview(){
if (this.preview_box){
this.remove_widget(this.preview_box);
this.preview_box = null;
}
}
_renderPreview(files){
if (!this._preview) return;
this._clearPreview();
if (!files || files.length === 0) return;
this.preview_box = new bricks.HBox({width:'100%', css:'filler'});
files.forEach(f => {
var url = URL.createObjectURL(f);
var typ = f.type.split('/')[0];
if (typ === 'image'){
var w = new bricks.Image({url:url, cheight:10, flexShrink:0, css:'card'});
this.preview_box.add_widget(w);
} else if (typ === 'video'){
var w = new bricks.VideoPlayer({url:url, width:'100%', autoplay:false});
this.preview_box.add_widget(w);
} else if (typ === 'audio'){
var w = new bricks.AudioPlayer({url:url, width:'100%', autoplay:false});
this.preview_box.add_widget(w);
}
});
if (this.preview_box._widgets && this.preview_box._widgets.length > 0){
this.add_widget(this.preview_box);
} else {
this.preview_box = null;
}
}
set_formdata(fd){
var v = this.resultValue();
if (this.opts.multiple && Array.isArray(v)){

35
bricks/llmout.js
View File

@ -7,29 +7,30 @@ bricks.UserInputView
bricks.UserInputView = class extends bricks.VBox {
constructor(opts){
super(opts);
this.v_w = null;
this.a_v = null;
this.v_ws = [];
this.a_ws = [];
this.show_input(this.data);
}
show_input(data){
var mdtext = '';
this.v_ws = [];
this.a_ws = [];
this.input_fields.forEach(f =>{
if (data[f.name]){
if (f.name.startsWith('video')){
var url = URL.createObjectURL(data[f.name]);
this.v_w = new bricks.VideoPlayer({
this.v_ws.push(new bricks.VideoPlayer({
url:url,
autoplay:true,
autoplay:false,
width: '100%'
});
}));
} else if (f.name.startsWith('audio')){
var url = URL.createObjectURL(data[f.name]);
console.log('audio:', f.name, data[f.name]);
this.a_w = new bricks.AudioPlayer({
this.a_ws.push(new bricks.AudioPlayer({
url:url,
autoplay:true,
autoplay:false,
width: '100%'
});
}));
} else if (f.name.startsWith('image')){
var url = URL.createObjectURL(data[f.name]);
mdtext += `
@ -53,12 +54,8 @@ ${data[f.name]}
});
console.log('mdtext=', mdtext);
this.add_widget(w);
if (this.v_w){
this.add_widget(this.v_w);
}
if (this.a_w){
this.add_widget(this.a_w);
}
this.v_ws.forEach(v => this.add_widget(v));
this.a_ws.forEach(a => this.add_widget(a));
}
}
/*
@ -134,28 +131,28 @@ bricks.LlmOut = class extends bricks.VBox {
}
if (data.audio){
if (Array.isArray(data.audio)){
this.audios.concat(data.audio);
this.audios = this.audios.concat(data.audio);
} else {
this.audios.push(data.audio);
}
}
if (data.glb){
if (Array.isArray(data.glb)){
this.glbs.concat(data.glb);
this.glbs = this.glbs.concat(data.glb);
} else {
this.glbs.push(data.glb);
}
}
if (data.video){
if (Array.isArray(data.video)){
this.videos.concat(data.video);
this.videos = this.videos.concat(data.video);
} else {
this.videos.push(data.video);
}
}
if (data.image){
if (Array.isArray(data.image)){
this.images.concat(data.image);
this.images = this.images.concat(data.image);
} else {
this.images.push(data.image);
}