martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 18:15:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

render asset upload progress

Browse Source
This commit is contained in:
Roland Osborne 2024-12-16 09:53:22 -08:00
parent 6b487f926e
commit 968bf983ee
5 changed files with 5400 additions and 8025 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/web/src/conversation/Conversation.module.css
View File

@ -34,13 +34,27 @@
width: 100%;
}
.divider {
width: calc(100% - 32px);
.progressDivider {
position: relative;
margin-left: 16px;
margin-right: 16px;
width: calc(100% - 32px);
height: 2px;
}
.divider {
width: 100%;
border-top: 1px solid var(--mantine-color-text-7);
border-bottom: 1px solid var(--mantine-color-text-7);
}
.progress {
position: absolute;
top: 0;
border-top: 1px solid var(--mantine-color-dbgreen-1);
border-bottom: 1px solid var(--mantine-color-dbgreen-1);
}
.topSpinner {
top: 64px;
position: absolute;

10
app/client/web/src/conversation/Conversation.tsx
View File

@ -141,6 +141,9 @@ export function Conversation() {
}
});
console.log("SEND? ", sending, state.progress);
return (
<div className={classes.conversation}>
<div className={classes.header}>
@ -198,7 +201,12 @@ export function Conversation() {
</div>
)}
</div>
<div className={classes.divider} />
<div className={classes.progressDivider}>
<div className={classes.divider} />
{ sending && (
<div className={classes.progress} style={{ width: `${state.progress}%` }}/>
)}
</div>
<div className={classes.add}>
<input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => addImage(e.target?.files?.[0])} style={{display: 'none'}}/>
<input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => addVideo(e.target?.files?.[0])} style={{display: 'none'}}/>

7
app/client/web/src/conversation/useConversation.hook.ts
View File

@ -103,6 +103,7 @@ export function useConversation() {
textColorSet: false,
textSize: 16,
textSizeSet: false,
progress: 0,
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -317,9 +318,9 @@ export function useConversation() {
});
return { text: state.message, textColor: state.textColorSet ? state.textColor : null, textSize: state.textSizeSet ? state.textSize : null, assets };
}
const progress = (precent: number) => {};
await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, progress);
updateState({ message: '', assets: [] });
const upload = (progress: number) => { updateState({ progress }) };
await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, upload);
updateState({ message: '', assets: [], progress: 0 });
}
},
addImage: (file: File) => {

13365
app/client/web/yarn.lock
View File

File diff suppressed because it is too large Load Diff

25
app/sdk/src/focus.ts
View File

@ -281,7 +281,7 @@ export class FocusModule implements Focus {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress(0) };
xhr.upload.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress((ev.loaded * 100) / ev.total) };
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
try {
@ -314,7 +314,7 @@ export class FocusModule implements Focus {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress(0) };
xhr.upload.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress((ev.loaded * 100) / ev.total) };
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
try {
@ -347,7 +347,7 @@ export class FocusModule implements Focus {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress(0) };
xhr.upload.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress((ev.loaded * 100) / ev.total) };
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
try {
@ -389,6 +389,12 @@ export class FocusModule implements Focus {
return await this.addRemoteChannelTopic(type, data, true);
}
} else {
let uploadCount = 0;
const assetProgress = (percent: number) => {
progress(Math.floor((uploadCount * 100 + percent) / files.length));
}
const topicId = await this.addRemoteChannelTopic(type, {}, false);
try {
const appAsset = [] as {assetId: string, appId: string}[];
@ -419,9 +425,13 @@ export class FocusModule implements Focus {
const base64Data = await mediaFile.getData(i * ENCRYPT_BLOCK_SIZE, length);
const { ivHex } = await crypto.aesIv();
const { encryptedDataB64 } = await crypto.aesEncrypt(base64Data, ivHex, channelKey);
const partId = await this.uploadBlock(encryptedDataB64, topicId, progress);
const partId = await this.uploadBlock(encryptedDataB64, topicId, (percent: number) => {
const count = Math.ceil(mediaFile.size / ENCRYPT_BLOCK_SIZE);
assetProgress(Math.floor((i * 100 + percent) / count));
});
split.push({ partId, blockIv: ivHex });
}
uploadCount += 1;
const assetItem = {
assetId: `${assetItems.length}`,
encrypted: true,
@ -466,7 +476,8 @@ export class FocusModule implements Focus {
transforms.push('acopy;audio');
transformMap.set('acopy;audio', transform.appId);
} else if (transform.type === TransformType.Copy && asset.type === AssetType.Binary) {
const assetId = await this.mirrorFile(asset.source, topicId, progress);
const assetId = await this.mirrorFile(asset.source, topicId, assetProgress);
uploadCount += 1;
const assetItem = {
assetId: `${assetItems.length}`,
hosting: HostingMode.Basic,
@ -479,7 +490,9 @@ export class FocusModule implements Focus {
}
}
if (transforms.length > 0) {
const transformAssets = await this.transformFile(asset.source, topicId, transforms, progress);
const transformAssets = await this.transformFile(asset.source, topicId, transforms, assetProgress);
uploadCount += 1;
for (let transformAsset of transformAssets) {
const assetItem = {
assetId: `${assetItems.length}`,