Files
AFFiNE-Mirror/blocksuite/framework/sync/src/blob/engine.ts
T
fundon 5590cdd8f1 fix(editor): improve status display of attachments and images (#12573)
Closes: [BS-3564](https://linear.app/affine-design/issue/BS-3564/ui-embed-view-报错-ui-加-title)
Closes: [BS-3454](https://linear.app/affine-design/issue/BS-3454/点击-reload-后应该隐藏-attachment-embed-view-左下角-status(待新状态))

<img width="807" alt="Screenshot 2025-05-28 at 17 23 26" src="https://github.com/user-attachments/assets/9ecc29f8-73c6-4441-bc38-dfe9bd876542" />

<img width="820" alt="Screenshot 2025-05-28 at 17 45 37" src="https://github.com/user-attachments/assets/68e6db17-a814-4df4-a9fa-067ca03dec30" />

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added support for retrying failed uploads of attachments and images, allowing users to re-upload files directly from the error status interface.
  - The error status dialog now dynamically displays "Retry" for upload failures and "Reload" for download failures, with appropriate actions for each.
- **Enhancements**
  - Improved clarity and consistency in file type display and icon usage for attachments and citations.
  - Button labels in the attachment interface now have capitalized text for better readability.
- **Bug Fixes**
  - Streamlined error handling and status updates for attachment and image uploads/downloads, reducing redundant UI elements.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-29 02:18:51 +00:00

206 lines
4.9 KiB
TypeScript

import { type Logger, sha } from '@blocksuite/global/utils';
import type { BlobSource } from './source.js';
export interface BlobStatus {
isStorageOverCapacity: boolean;
}
/**
* # BlobEngine
*
* sync blobs between storages in background.
*
* all operations priority use main, then use shadows.
*/
export class BlobEngine {
private _abort: AbortController | null = null;
get sources() {
return [this.main, ...this.shadows];
}
constructor(
readonly main: BlobSource,
readonly shadows: BlobSource[],
readonly logger: Logger
) {}
async delete(_key: string) {
this.logger.error(
'You are trying to delete a blob. We do not support this feature yet. We need to wait until we implement the indexer, which will inform us which doc is using a particular blob so that we can safely delete it.'
);
}
async get(key: string) {
this.logger.debug('get blob', key);
for (const source of this.sources) {
const data = await source.get(key);
if (data) {
return data;
}
}
return null;
}
async list() {
const blobIdSet = new Set<string>();
for (const source of this.sources) {
const blobs = await source.list();
for (const blob of blobs) {
blobIdSet.add(blob);
}
}
return Array.from(blobIdSet);
}
async set(value: Blob): Promise<string>;
async set(key: string, value: Blob): Promise<string>;
async set(valueOrKey: string | Blob, _value?: Blob) {
if (this.main.readonly) {
throw new Error('main peer is readonly');
}
const key =
typeof valueOrKey === 'string'
? valueOrKey
: await sha(await valueOrKey.arrayBuffer());
const value = typeof valueOrKey === 'string' ? _value : valueOrKey;
if (!value) {
throw new Error('value is empty');
}
// await upload to the main peer
await this.main.set(key, value);
// uploads to other peers in the background
Promise.allSettled(
this.shadows
.filter(r => !r.readonly)
.map(peer =>
peer.set(key, value).catch(err => {
this.logger.error('Error when uploading to peer', err);
})
)
)
.then(result => {
if (result.some(({ status }) => status === 'rejected')) {
this.logger.error(
`blob ${key} update finish, but some peers failed to update`
);
} else {
this.logger.debug(`blob ${key} update finish`);
}
})
.catch(() => {
// Promise.allSettled never reject
});
return key;
}
blobState$(key: string) {
return this.main.blobState$?.(key) ?? null;
}
upload(key: string) {
return this.main.upload?.(key) ?? null;
}
start() {
if (this._abort) {
return;
}
this._abort = new AbortController();
const abortSignal = this._abort.signal;
const sync = () => {
if (abortSignal.aborted) {
return;
}
this.sync()
.catch(error => {
this.logger.error('sync blob error', error);
})
.finally(() => {
// sync every 1 minute
setTimeout(sync, 60000);
});
};
sync();
}
stop() {
this._abort?.abort();
this._abort = null;
}
async sync() {
if (this.main.readonly) {
return;
}
this.logger.debug('start syncing blob...');
for (const shadow of this.shadows) {
let mainList: string[] = [];
let shadowList: string[] = [];
if (!shadow.readonly) {
try {
mainList = await this.main.list();
shadowList = await shadow.list();
} catch (err) {
this.logger.error(`error when sync`, err);
continue;
}
const needUpload = mainList.filter(key => !shadowList.includes(key));
for (const key of needUpload) {
try {
const data = await this.main.get(key);
if (data) {
await shadow.set(key, data);
} else {
this.logger.error(
'data not found when trying upload from main to shadow'
);
}
} catch (err) {
this.logger.error(
`error when sync ${key} from [${this.main.name}] to [${shadow.name}]`,
err
);
}
}
}
const needDownload = shadowList.filter(key => !mainList.includes(key));
for (const key of needDownload) {
try {
const data = await shadow.get(key);
if (data) {
await this.main.set(key, data);
} else {
this.logger.error(
'data not found when trying download from shadow to main'
);
}
} catch (err) {
this.logger.error(
`error when sync ${key} from [${shadow.name}] to [${this.main.name}]`,
err
);
}
}
}
this.logger.debug('finish syncing blob');
}
}