mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-22 12:32:00 +08:00
Xuan4781
aa48c1c18b
Fixes #13399 ### Issue When viewing an audio attachment card in horizontal view, the waveform was being clipped and not fully visible. In vertical view it displayed correctly. ### Fix - `audio-waveform` and `progressContainer` flex children were missing `minWidth: 0` and `flex: 1`, causing container overflow - `.affine-attachment-container` had a fixed height with `overflow: hidden` that cut off the waveform row ### Screenshot Verification **Before** <img width="1661" height="935" alt="image" src="https://github.com/user-attachments/assets/b2f0908b-94fe-4869-bdfb-cc6a757e703d" /> **After** <img width="750" height="182" alt="image" src="https://github.com/user-attachments/assets/63caac69-f37b-4894-80de-806b691581c8" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit **New Features** - Introduced audio embed card functionality allowing users to embed and display audio content directly in documents with standardized dimensions and improved responsive layout styling for better visual presentation and integration. **Improvements** - Enhanced styling and layout handling for audio player components to ensure proper display and optimal rendering in various container sizes and space constraints. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import {
|
|
type EmbedCardStyle,
|
|
EmbedFigmaModel,
|
|
EmbedGithubModel,
|
|
EmbedHtmlModel,
|
|
EmbedLinkedDocModel,
|
|
EmbedLoomModel,
|
|
EmbedSyncedDocModel,
|
|
EmbedYoutubeModel,
|
|
SYNCED_DEFAULT_WIDTH,
|
|
} from '@blocksuite/affine-model';
|
|
|
|
export const BLOCK_CHILDREN_CONTAINER_PADDING_LEFT = 24;
|
|
export const EDGELESS_BLOCK_CHILD_PADDING = 24;
|
|
export const EDGELESS_BLOCK_CHILD_BORDER_WIDTH = 2;
|
|
|
|
// The height of the header, which is used to calculate the scroll offset
|
|
// In AFFiNE, to avoid the option element to be covered by the header, we need to reserve the space for the header
|
|
export const PAGE_HEADER_HEIGHT = 53;
|
|
|
|
export const EMBED_CARD_MIN_WIDTH = 450;
|
|
|
|
export const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number> = {
|
|
horizontal: 752,
|
|
horizontalThin: 752,
|
|
list: 752,
|
|
vertical: 364,
|
|
cube: 170,
|
|
cubeThick: 170,
|
|
video: 752,
|
|
figma: 752,
|
|
html: 752,
|
|
syncedDoc: SYNCED_DEFAULT_WIDTH,
|
|
pdf: 537 + 24 + 2,
|
|
citation: 752,
|
|
audio: 116,
|
|
};
|
|
|
|
export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
|
|
horizontal: 116,
|
|
horizontalThin: 80,
|
|
list: 46,
|
|
vertical: 390,
|
|
cube: 114,
|
|
cubeThick: 132,
|
|
video: 544,
|
|
figma: 544,
|
|
html: 544,
|
|
syncedDoc: 455,
|
|
pdf: 759 + 46 + 24 + 2,
|
|
citation: 52,
|
|
audio: 116,
|
|
};
|
|
|
|
export const EMBED_BLOCK_FLAVOUR_LIST = [
|
|
'affine:embed-github',
|
|
'affine:embed-youtube',
|
|
'affine:embed-figma',
|
|
'affine:embed-linked-doc',
|
|
'affine:embed-synced-doc',
|
|
'affine:embed-html',
|
|
'affine:embed-loom',
|
|
] as const;
|
|
|
|
export const EMBED_BLOCK_MODEL_LIST = [
|
|
EmbedGithubModel,
|
|
EmbedYoutubeModel,
|
|
EmbedFigmaModel,
|
|
EmbedLinkedDocModel,
|
|
EmbedSyncedDocModel,
|
|
EmbedHtmlModel,
|
|
EmbedLoomModel,
|
|
] as const;
|
|
|
|
export const DEFAULT_IMAGE_PROXY_ENDPOINT =
|
|
'https://affine-worker.toeverything.workers.dev/api/worker/image-proxy';
|
|
|
|
// https://github.com/toeverything/affine-workers/tree/main/packages/link-preview
|
|
export const DEFAULT_LINK_PREVIEW_ENDPOINT =
|
|
'https://affine-worker.toeverything.workers.dev/api/worker/link-preview';
|
|
|
|
// This constant is used to ignore tags when exporting using html2canvas
|
|
export const CANVAS_EXPORT_IGNORE_TAGS = [
|
|
'EDGELESS-TOOLBAR-WIDGET',
|
|
'AFFINE-DRAG-HANDLE-WIDGET',
|
|
'AFFINE-TOOLBAR-WIDGET',
|
|
'AFFINE-BLOCK-SELECTION',
|
|
];
|
|
|
|
export * from './bracket-pairs.js';
|
|
export * from './note.js';
|
|
export * from './text.js';
|