jollywhoppers.com
Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
Drafts (#9691)
* Add drafts functionality to composer
- Add local storage layer for drafts (filesystem on native, IndexedDB on web)
- Add "Drafts" button to composer top bar showing badge with draft count
- Modify discard prompt to offer "Save Draft" option
- Add `restore_from_draft` action to composer reducer
- Support saving/restoring: text, facets, images, labels, threadgate, quote/link embeds
- Add placeholder hooks for future server API integration
- Add unit tests for draft serialization
Note: Video/GIF restoration marked as TODO for future implementation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix drafts button: always visible, adjacent to post button
- Make drafts button always visible (not just when drafts exist)
- Move button to be adjacent to the publish button
- If composer is empty: opens drafts list directly
- If composer has content: shows prompt to save/discard before viewing drafts
- Add badge showing draft count when drafts exist
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Update drafts button: text-only, ghost/primary style
- Show "Drafts" or "Drafts (N)" as text, no icon
- Use ghost variant with primary color
- Match Cancel button styling
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Remove draft count from button, just show "Drafts"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Increase drafts button horizontal padding and gap
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Use InnerFlatList and Dialog.Header for drafts dialog
- Switch from ScrollableInner to InnerFlatList
- Add Dialog.Header with back button in left slot
- Use sticky header
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Track draft ID in composer state machine
Adds draftId to ComposerState so that editing an existing draft and
saving it again updates the draft rather than creating a new one.
- Add draftId?: string to ComposerState type
- Set draftId when restoring from draft via restore_from_draft action
- Pass existingDraftId to save functions from composerState.draftId
- Add PageX icon for empty drafts state
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Add clear action to discard composer content
When pressing the Drafts button with content in the composer, the user
can choose to discard. This now properly clears the composer by
dispatching a 'clear' action that resets to an empty state.
- Add 'clear' action type to ComposerAction
- Implement clear case in composerReducer (resets to single empty post)
- Add handleClearComposer callback in Composer.tsx
- Pass onDiscard prop through ComposerTopBar to DraftsButton
- Call onDiscard before opening drafts dialog on discard
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Track dirty state to skip discard prompt for unchanged drafts
When a draft is loaded and the user hasn't made any changes, closing
the composer should not show the discard prompt since nothing would
be lost.
- Add isDirty field to ComposerState
- Set isDirty: true on all content-modifying actions
- Set isDirty: false on restore_from_draft, clear, and initial state
- Update onPressCancel to only show prompt if no draft or isDirty
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Redesign drafts list to show full thread preview
- Display all posts in a draft thread, not just the first
- First post uses larger avatar (42px), subsequent posts nested with
smaller avatar (32px) and thread connector line
- Show author avatar, display name, handle, and relative timestamp
- Add overflow menu button (placeholder) on first post
- Display full text instead of truncated preview
- Add media preview component for images, GIFs, and videos
- Card layout with rounded corners and proper spacing
- Add gap separators between draft cards in list
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix draft item styling based on feedback
- Add border and shadow to draft cards
- Remove trash button, move delete to overflow menu prompt
- Remove size differences for thread posts (same avatar/text size)
- Add spacing between header and first draft item
- Change prompt wording to "Discard draft"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Use real image embed components for draft preview
Replace custom image preview with AutoSizedImage for single images
and ImageLayoutGrid for multiple images. This gives drafts the same
polished image display as regular posts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Improve drafts dialog platform handling
- Render header outside FlatList on native, inside on web
- Use web() helper for conditional web-only props
- Replace ItemSeparatorComponent with mt_lg margin on items
- Add minHeight on web for better dialog sizing
- Simplify header structure
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Mark composer as clean after saving draft
Add mark_saved action that resets isDirty to false and updates the
draftId. This is dispatched after successfully saving a draft, allowing
the user to close the composer without a discard prompt since their
changes have been saved.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Apply dirty tracking to Drafts button prompt
Only show the save/discard prompt when pressing the Drafts button if
the composer has unsaved changes (isDirty). If the content is unchanged
from a loaded draft or was just saved, go directly to the drafts list.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix re-saving drafts with existing media
When re-saving a draft, the code was trying to copy media files that
were already in drafts storage to new locations, causing copy errors.
Changes:
- Add extractLocalIdFromPath() to detect if a path is already in drafts
- Track loadedMediaMap in ComposerState for identifying reusable media
- Only delete old media that wasn't reused during re-save
- Pass loadedMediaMap when saving to enable media reuse detection
- Disable pointer events on draft media preview
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* add vertical option to prompt, change copy
* fix import
* fix import
* Migrate drafts from local storage to server API
Replace local-only draft storage with the new `app.bsky.draft.*` server API:
- getDrafts, createDraft, updateDraft, deleteDraft endpoints
Key changes:
- Add api.ts with type converters (ComposerState <-> server Draft)
- Update hooks.ts to use server API instead of local storage
- Simplify storage.ts/storage.web.ts for local media caching only
- Media stored locally via localRef pattern (filepath in server draft)
- GIFs stored as external embeds with Tenor URL + dimensions
- Hide drafts button when replying (reply drafts not supported)
- Show "different device" note when media is missing locally
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* attempt to fix blob mangement
* Migrate storage.ts from expo-file-system/legacy to expo-file-system
Use the new object-based expo-file-system API (SDK 54+) with Directory
and File classes instead of the legacy function-based API. The new API
provides synchronous operations for file/directory existence checks,
creation, copying, deletion, and listing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* feat: add drafts-specific logger
Add a Drafts context to the logger system for better log categorization
and debugging of draft-related operations.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* refactor: use drafts-specific logger in hooks and storage
Switch from the generic logger to the new drafts-specific logger
for better log categorization.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: ensure media cache is populated before checking exists
On iOS (and web), the media cache wasn't populated before the drafts
query ran, causing drafts with local media to incorrectly show as
"missing media" on app restart. The issue would resolve itself after
closing and reopening the composer because by then the cache was ready.
This fix adds ensureMediaCachePopulated() and awaits it in useDrafts
before checking which media exists locally.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: complete Gif object reconstruction for draft rehydration
Fix "Cannot read property 'url' of undefined" error when rehydrating
drafts with GIFs. The Gif object was missing required properties like
url, content_description, and media_formats.preview that are needed
by useResolveGifQuery and other components.
Also preserve alt text through serialization by storing it in URL
query params alongside dimensions.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: load draft preview images and get dimensions
Fix draft preview images not showing on web and add proper aspect
ratio support:
1. Try to load all images regardless of the exists cache flag, which
may be stale due to async cache population timing
2. Use Image.loadAsync() from expo-image to get image dimensions
3. Pass dimensions to viewImages for proper aspect ratio in previews
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: update save prompt copy when editing existing draft
When editing an existing draft (vs creating a new one), use "Save
changes" instead of "Save draft" in the save/discard prompts. This
provides clearer context to the user about what action they're taking.
Add isEditingDraft prop to DraftsButton and ComposerTopBar, and
update both prompts (in DraftsButton and Composer) with conditional
copy based on whether we're editing an existing draft.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* style: add bottom padding to drafts list
Add pb_xl padding to the drafts list content container for better
visual spacing at the bottom of the list.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* refactor: use typed error check for draft limit
Replace manual error object inspection with the proper
AppBskyDraftCreateDraft.DraftLimitReachedError type check for
cleaner and more reliable error handling.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* make storage functions async to match web
* log unknown errors
* delete left-over file
* move state to colo with composer
* fix: handle invalid GIF dimensions gracefully
Fix NaN aspectRatio when rehydrating GIFs from drafts by:
1. Adding validation in parseTenorGif to reject invalid dimensions
(NaN, zero, or negative values)
2. Adding defensive checks in GifEmbed to fallback to 1:1 aspect
ratio if dimensions are invalid
3. Adding defensive checks in composer ExternalEmbedGif to fallback
to 16:9 if gif.media_formats.gif.dims is missing or invalid
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: prevent double query string in GIF draft hydration
When loading a GIF from a draft, the URL was being corrupted with
double query strings like:
`?ww=498&hh=498?hh=498&ww=498`
This happened because:
1. serializeGif() adds ?ww=X&hh=Y&alt=Z to the Tenor URL
2. parseGifFromUrl() returned the full URL including our params
3. resolveGif() in resolve.ts then appends MORE params via string
concatenation, creating a second ?
Fix: Strip our custom params (ww, hh, alt) from the URL in
parseGifFromUrl() before returning it, so the reconstructed GIF
has a clean base URL.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix draft button behaviour when publishing, tweak buttons
* ensure media unavaiable message is contrasty enough
* infinite query, rename file to queries
* simplify threadgate/postgate handling
* refactor: pass full draft data instead of re-fetching
The useLoadDraft and useDeleteDraftMutation hooks were fetching drafts
via getDrafts() to look up a draft by ID. This was problematic because
getDrafts is paginated, so drafts not on the first page wouldn't be
found.
Changes:
- Add full Draft object to DraftSummary type
- useLoadDraft now takes Draft directly (only loads local media)
- useDeleteDraftMutation now takes {draftId, draft} to avoid re-fetch
- Update DraftItem and DraftsListDialog to pass full draft data
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix type errors
* docs: add notes on platform files and paginated APIs
- Platform-specific files (.web.ts, .native.ts) are resolved by the
bundler automatically - just import normally, don't use require()
- Paginated APIs should use useInfiniteQuery, not useQuery
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* More CLAUDE.md updates
* Delete PLAN.md
* Use minimal media mode for draft display - REVERT IF NEEDED
* Enable pagination
* Add comment about headers
* remove extraneous comments
* Prevent runaway pagination
* fix detection rebase change
* use border_transparent
* Replace idb with idb-keyval for draft media storage
Simplifies web IndexedDB storage by using idb-keyval instead of the
full idb library. This reduces bundle size and aligns with the pattern
used in src/storage/archive/db/index.web.ts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix native draft media filename encoding
The previous approach replaced both / and : with _, but the reverse
transformation couldn't distinguish between them. This caused cache
misses for paths containing both characters.
Use encodeURIComponent/decodeURIComponent for a proper reversible
encoding.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* convert useLoadDraft() hook to regular async function
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* update atproto api
* clean up orphaned media
* restore videos
* save/restore captions
* restore postgates
* Copy updates from Darrin
* Ope fix missed vertical props
* get image aspect ratio when restoring
* get videos working on native
* get video restoration working on native
* sanitize handles properly in draftitem
* fix yarn.lock
* Swap console logs
---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Eric Bailey <git@esb.lol>
authored by
Claude Opus 4.5
Eric Bailey
and committed by
GitHub
d13df6c7
a18f1b68
+52
-8
CLAUDE.md
+52
-8
CLAUDE.md
···
29
yarn typecheck # Run TypeScript type checking
30
31
# Internationalization
32
-
yarn intl:extract # Extract translation strings
33
yarn intl:compile # Compile translations for runtime
34
35
# Build
···
119
120
### Naming Conventions
121
122
-
- Spacing: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl` (t-shirt sizes)
123
- Text: `text_xs`, `text_sm`, `text_md`, `text_lg`, `text_xl`
124
- Gaps/Padding: `gap_sm`, `p_md`, `px_lg`, `py_xl`
125
- Flex: `flex_row`, `flex_1`, `align_center`, `justify_between`
···
144
</Button>
145
146
<Dialog.Outer control={control}>
147
-
<Dialog.Handle /> {/* Native drag handle */}
148
<Dialog.ScrollableInner label={_(msg`My Dialog`)}>
149
<Dialog.Header>
150
<Dialog.HeaderText>Title</Dialog.HeaderText>
···
152
153
<Text>Dialog content here</Text>
154
155
-
<Button label="Close" onPress={() => control.close()}>
156
-
<ButtonText>Close</ButtonText>
157
</Button>
158
</Dialog.ScrollableInner>
159
</Dialog.Outer>
160
</>
···
215
216
// Icon-only button
217
<Button label="Close" onPress={handleClose} color="secondary" size="small" shape="round">
218
-
<ButtonIcon icon={X} />
219
</Button>
220
221
// Ghost variant (deprecated - use color prop)
···
225
```
226
227
**Button Props:**
228
-
- `color`: `'primary'` | `'secondary'` | `'negative'` | `'primary_subtle'` | `'negative_subtle'`
229
- `size`: `'tiny'` | `'small'` | `'large'`
230
- `shape`: `'default'` (pill) | `'round'` | `'square'` | `'rectangular'`
231
- `variant`: `'solid'` | `'outline'` | `'ghost'` (deprecated, use `color`)
···
339
onSuccess: (_, variables) => {
340
queryClient.invalidateQueries({queryKey: RQKEY(variables.did)})
341
},
342
})
343
}
344
```
···
352
STALE.INFINITY // Never stale
353
```
354
355
### Preferences (React Context)
356
357
```tsx
···
437
- `src/components/Dialog/index.tsx` - Native (uses BottomSheet)
438
- `src/components/Dialog/index.web.tsx` - Web (uses modal with Radix primitives)
439
440
-
Platform detection:
441
```tsx
442
import {IS_WEB, IS_NATIVE, IS_IOS, IS_ANDROID} from '#/env'
443
···
29
yarn typecheck # Run TypeScript type checking
30
31
# Internationalization
32
+
yarn intl:extract # Extract translation strings (you don't typically need to run this manually, we have CI for it)
33
yarn intl:compile # Compile translations for runtime
34
35
# Build
···
119
120
### Naming Conventions
121
122
+
- Spacing: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl` (t-shirt sizes)
123
- Text: `text_xs`, `text_sm`, `text_md`, `text_lg`, `text_xl`
124
- Gaps/Padding: `gap_sm`, `p_md`, `px_lg`, `py_xl`
125
- Flex: `flex_row`, `flex_1`, `align_center`, `justify_between`
···
144
</Button>
145
146
<Dialog.Outer control={control}>
147
+
{/* Typically the inner part is in its own component */}
148
+
<Dialog.Handle /> {/* Native-only drag handle */}
149
<Dialog.ScrollableInner label={_(msg`My Dialog`)}>
150
<Dialog.Header>
151
<Dialog.HeaderText>Title</Dialog.HeaderText>
···
153
154
<Text>Dialog content here</Text>
155
156
+
<Button label="Done" onPress={() => control.close()}>
157
+
<ButtonText>Done</ButtonText>
158
</Button>
159
+
<Dialog.Close /> {/* Web-only X button in top left */}
160
</Dialog.ScrollableInner>
161
</Dialog.Outer>
162
</>
···
217
218
// Icon-only button
219
<Button label="Close" onPress={handleClose} color="secondary" size="small" shape="round">
220
+
<ButtonIcon icon={XIcon} />
221
</Button>
222
223
// Ghost variant (deprecated - use color prop)
···
227
```
228
229
**Button Props:**
230
+
- `color`: `'primary'` | `'secondary'` | `'negative'` | `'primary_subtle'` | `'negative_subtle'` | `'secondary_inverted'`
231
- `size`: `'tiny'` | `'small'` | `'large'`
232
- `shape`: `'default'` (pill) | `'round'` | `'square'` | `'rectangular'`
233
- `variant`: `'solid'` | `'outline'` | `'ghost'` (deprecated, use `color`)
···
341
onSuccess: (_, variables) => {
342
queryClient.invalidateQueries({queryKey: RQKEY(variables.did)})
343
},
344
+
onError: (error) => {
345
+
if (isNetworkError(error)) {
346
+
// don't log, but inform user
347
+
} else if (error instanceof AppBskyExampleProcedure.ExampleError) {
348
+
// XRPC APIs often have typed errors, allows nicer handling
349
+
} else {
350
+
// Log unexpected errors to Sentry
351
+
logger.error('Error updating profile', {safeMessage: error})
352
+
}
353
+
}
354
})
355
}
356
```
···
364
STALE.INFINITY // Never stale
365
```
366
367
+
**Paginated APIs:** Many atproto APIs return paginated results with a `cursor`. Use `useInfiniteQuery` for these:
368
+
369
+
```tsx
370
+
export function useDraftsQuery() {
371
+
const agent = useAgent()
372
+
373
+
return useInfiniteQuery({
374
+
queryKey: ['drafts'],
375
+
queryFn: async ({pageParam}) => {
376
+
const res = await agent.app.bsky.draft.getDrafts({cursor: pageParam})
377
+
return res.data
378
+
},
379
+
initialPageParam: undefined as string | undefined,
380
+
getNextPageParam: page => page.cursor,
381
+
})
382
+
}
383
+
```
384
+
385
+
To get all items from pages: `data?.pages.flatMap(page => page.items) ?? []`
386
+
387
### Preferences (React Context)
388
389
```tsx
···
469
- `src/components/Dialog/index.tsx` - Native (uses BottomSheet)
470
- `src/components/Dialog/index.web.tsx` - Web (uses modal with Radix primitives)
471
472
+
**Important:** The bundler automatically resolves platform-specific files. Just import normally:
473
+
474
+
```tsx
475
+
// CORRECT - bundler picks storage.ts or storage.web.ts automatically
476
+
import * as storage from '#/state/drafts/storage'
477
+
478
+
// WRONG - don't use require() or conditional imports for platform files
479
+
const storage = IS_NATIVE
480
+
? require('#/state/drafts/storage')
481
+
: require('#/state/drafts/storage.web')
482
+
```
483
+
484
+
Platform detection (for runtime logic, not imports):
485
```tsx
486
import {IS_WEB, IS_NATIVE, IS_IOS, IS_ANDROID} from '#/env'
487
+1
assets/icons/pageX_stroke2_corner0_rounded_large.svg
+1
assets/icons/pageX_stroke2_corner0_rounded_large.svg
···
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64"><path fill="#000" d="M32.457 7c1.68 0 3.29.668 4.478 1.855L49.813 21.73a6.33 6.33 0 0 1 1.854 4.479v24.458A6.333 6.333 0 0 1 45.333 57H18.666a6.334 6.334 0 0 1-6.333-6.333V13.333A6.334 6.334 0 0 1 18.666 7h13.791ZM18.666 9a4.334 4.334 0 0 0-4.333 4.333v37.334A4.334 4.334 0 0 0 18.666 55h26.667a4.333 4.333 0 0 0 4.333-4.333V26.209c0-.418-.061-.829-.177-1.223a1 1 0 0 1-.155.014H40a6.334 6.334 0 0 1-6.325-6.008l-.008-.326V9.333q0-.08.013-.156A4.3 4.3 0 0 0 32.457 9H18.666Zm18.627 22.293a1 1 0 1 1 1.414 1.414L33.414 38l5.293 5.293a1 1 0 1 1-1.414 1.414L32 39.414l-5.293 5.293a1 1 0 1 1-1.414-1.414L30.586 38l-5.293-5.293a1 1 0 1 1 1.414-1.414L32 36.586l5.293-5.293Zm-1.626-12.627.006.224A4.333 4.333 0 0 0 40 23h8.253L35.667 10.414v8.252Z"/></svg>
+1
package.json
+1
package.json
+1
src/components/MediaPreview.tsx
+1
src/components/MediaPreview.tsx
+4
-5
src/components/Post/Embed/ExternalEmbed/Gif.tsx
+4
-5
src/components/Post/Embed/ExternalEmbed/Gif.tsx
+6
src/components/icons/PageX.tsx
+6
src/components/icons/PageX.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const PageX_Stroke2_Corner0_Rounded_Large = createSinglePathSVG({
4
+
viewBox: '0 0 64 64',
5
+
path: 'M32.457 7c1.68 0 3.29.668 4.478 1.855L49.813 21.73a6.33 6.33 0 0 1 1.854 4.479v24.458A6.333 6.333 0 0 1 45.333 57H18.666a6.334 6.334 0 0 1-6.333-6.333V13.333A6.334 6.334 0 0 1 18.666 7h13.791ZM18.666 9a4.334 4.334 0 0 0-4.333 4.333v37.334A4.334 4.334 0 0 0 18.666 55h26.667a4.333 4.333 0 0 0 4.333-4.333V26.209c0-.418-.061-.829-.177-1.223a1 1 0 0 1-.155.014H40a6.334 6.334 0 0 1-6.325-6.008l-.008-.326V9.333q0-.08.013-.156A4.3 4.3 0 0 0 32.457 9H18.666Zm18.627 22.293a1 1 0 1 1 1.414 1.414L33.414 38l5.293 5.293a1 1 0 1 1-1.414 1.414L32 39.414l-5.293 5.293a1 1 0 1 1-1.414-1.414L30.586 38l-5.293-5.293a1 1 0 1 1 1.414-1.414L32 36.586l5.293-5.293Zm-1.626-12.627.006.224A4.333 4.333 0 0 0 40 23h8.253L35.667 10.414v8.252Z',
6
+
})
+6
-2
src/components/moderation/ContentHider.tsx
+6
-2
src/components/moderation/ContentHider.tsx
···
4
import {msg, Trans} from '@lingui/macro'
5
import {useLingui} from '@lingui/react'
6
7
-
import {ADULT_CONTENT_LABELS, isJustAMute} from '#/lib/moderation'
8
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
9
import {getDefinition, getLabelStrings} from '#/lib/moderation/useLabelInfo'
10
import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
···
101
if (cause.source.type !== 'user') {
102
return false
103
}
104
-
if (ADULT_CONTENT_LABELS.includes(cause.label.val)) {
105
if (hasAdultContentLabel) {
106
return false
107
}
···
4
import {msg, Trans} from '@lingui/macro'
5
import {useLingui} from '@lingui/react'
6
7
+
import {
8
+
ADULT_CONTENT_LABELS,
9
+
type AdultSelfLabel,
10
+
isJustAMute,
11
+
} from '#/lib/moderation'
12
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
13
import {getDefinition, getLabelStrings} from '#/lib/moderation/useLabelInfo'
14
import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
···
105
if (cause.source.type !== 'user') {
106
return false
107
}
108
+
if (ADULT_CONTENT_LABELS.includes(cause.label.val as AdultSelfLabel)) {
109
if (hasAdultContentLabel) {
110
return false
111
}
+6
-3
src/lib/moderation.ts
+6
-3
src/lib/moderation.ts
···
14
import {sanitizeHandle} from '#/lib/strings/handles'
15
import {type AppModerationCause} from '#/components/Pills'
16
17
-
export const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
18
-
export const OTHER_SELF_LABELS = ['graphic-media']
19
-
export const SELF_LABELS = [...ADULT_CONTENT_LABELS, ...OTHER_SELF_LABELS]
20
21
export type AdultSelfLabel = (typeof ADULT_CONTENT_LABELS)[number]
22
export type OtherSelfLabel = (typeof OTHER_SELF_LABELS)[number]
···
14
import {sanitizeHandle} from '#/lib/strings/handles'
15
import {type AppModerationCause} from '#/components/Pills'
16
17
+
export const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn'] as const
18
+
export const OTHER_SELF_LABELS = ['graphic-media'] as const
19
+
export const SELF_LABELS = [
20
+
...ADULT_CONTENT_LABELS,
21
+
...OTHER_SELF_LABELS,
22
+
] as const
23
24
export type AdultSelfLabel = (typeof ADULT_CONTENT_LABELS)[number]
25
export type OtherSelfLabel = (typeof OTHER_SELF_LABELS)[number]
+10
src/lib/strings/embed-player.ts
+10
src/lib/strings/embed-player.ts
···
558
width: Number(w),
559
}
560
561
+
// Validate dimensions are valid positive numbers
562
+
if (
563
+
isNaN(dimensions.height) ||
564
+
isNaN(dimensions.width) ||
565
+
dimensions.height <= 0 ||
566
+
dimensions.width <= 0
567
+
) {
568
+
return {success: false}
569
+
}
570
+
571
if (IS_WEB) {
572
if (IS_WEB_SAFARI) {
573
id = id.replace('AAAAC', 'AAAP1')
+1
src/logger/types.ts
+1
src/logger/types.ts
+70
-2
src/state/gallery.ts
+70
-2
src/state/gallery.ts
···
1
import {
2
cacheDirectory,
3
deleteAsync,
4
makeDirectoryAsync,
5
moveAsync,
···
18
import {type PickerImage} from '#/lib/media/picker.shared'
19
import {getDataUriSize} from '#/lib/media/util'
20
import {isCancelledError} from '#/lib/strings/errors'
21
-
import {IS_NATIVE} from '#/env'
22
23
export type ImageTransformation = {
24
crop?: ActionCrop['crop']
···
38
type ComposerImageBase = {
39
alt: string
40
source: ImageSource
41
}
42
type ComposerImageWithoutTransformation = ComposerImageBase & {
43
transformed?: undefined
···
69
alt: '',
70
source: {
71
id: nanoid(),
72
-
path: await moveIfNecessary(raw.path),
73
width: raw.width,
74
height: raw.height,
75
mime: raw.mime,
···
256
}
257
258
return from
259
}
260
261
/** Purge files that were created to accomodate image manipulation */
···
1
import {
2
cacheDirectory,
3
+
copyAsync,
4
deleteAsync,
5
makeDirectoryAsync,
6
moveAsync,
···
19
import {type PickerImage} from '#/lib/media/picker.shared'
20
import {getDataUriSize} from '#/lib/media/util'
21
import {isCancelledError} from '#/lib/strings/errors'
22
+
import {IS_NATIVE, IS_WEB} from '#/env'
23
24
export type ImageTransformation = {
25
crop?: ActionCrop['crop']
···
39
type ComposerImageBase = {
40
alt: string
41
source: ImageSource
42
+
/** Original localRef path from draft, if editing an existing draft. Used to reuse the same storage key. */
43
+
localRefPath?: string
44
}
45
type ComposerImageWithoutTransformation = ComposerImageBase & {
46
transformed?: undefined
···
72
alt: '',
73
source: {
74
id: nanoid(),
75
+
// Copy to cache to ensure file survives OS temporary file cleanup
76
+
path: await copyToCache(raw.path),
77
width: raw.width,
78
height: raw.height,
79
mime: raw.mime,
···
260
}
261
262
return from
263
+
}
264
+
265
+
/**
266
+
* Copy a file from a potentially temporary location to our cache directory.
267
+
* This ensures picker files are available for draft saving even if the original
268
+
* temporary files are cleaned up by the OS.
269
+
*
270
+
* On web, converts blob URLs to data URIs immediately to prevent revocation issues.
271
+
*/
272
+
async function copyToCache(from: string): Promise<string> {
273
+
// Handle web blob URLs - convert to data URI immediately before they can be revoked
274
+
if (IS_WEB && from.startsWith('blob:')) {
275
+
try {
276
+
const response = await fetch(from)
277
+
const blob = await response.blob()
278
+
return await blobToDataUri(blob)
279
+
} catch (e) {
280
+
// If fetch fails, the blob URL was likely already revoked
281
+
// Return as-is and let downstream code handle the error
282
+
return from
283
+
}
284
+
}
285
+
286
+
// Data URIs don't need any conversion
287
+
if (from.startsWith('data:')) {
288
+
return from
289
+
}
290
+
291
+
const cacheDir = IS_WEB && getImageCacheDirectory()
292
+
293
+
// On web (non-blob URLs) or if already in cache dir, no need to copy
294
+
if (!cacheDir || from.startsWith(cacheDir)) {
295
+
return from
296
+
}
297
+
298
+
const to = joinPath(cacheDir, nanoid(36))
299
+
await makeDirectoryAsync(cacheDir, {intermediates: true})
300
+
301
+
// Normalize the source path for expo-file-system
302
+
let normalizedFrom = from
303
+
if (!from.startsWith('file://') && from.startsWith('/')) {
304
+
normalizedFrom = `file://${from}`
305
+
}
306
+
307
+
await copyAsync({from: normalizedFrom, to})
308
+
return to
309
+
}
310
+
311
+
/**
312
+
* Convert a Blob to a data URI
313
+
*/
314
+
function blobToDataUri(blob: Blob): Promise<string> {
315
+
return new Promise((resolve, reject) => {
316
+
const reader = new FileReader()
317
+
reader.onloadend = () => {
318
+
if (typeof reader.result === 'string') {
319
+
resolve(reader.result)
320
+
} else {
321
+
reject(new Error('Failed to convert blob to data URI'))
322
+
}
323
+
}
324
+
reader.onerror = () => reject(reader.error)
325
+
reader.readAsDataURL(blob)
326
+
})
327
}
328
329
/** Purge files that were created to accomodate image manipulation */
+5
-6
src/state/queries/resolve-link.ts
+5
-6
src/state/queries/resolve-link.ts
···
1
import {type QueryClient, useQuery} from '@tanstack/react-query'
2
3
import {STALE} from '#/state/queries/index'
4
-
import {useAgent} from '../session'
5
6
const RQKEY_LINK_ROOT = 'resolve-link'
7
export const RQKEY_LINK = (url: string) => [RQKEY_LINK_ROOT, url]
···
9
const RQKEY_GIF_ROOT = 'resolve-gif'
10
export const RQKEY_GIF = (url: string) => [RQKEY_GIF_ROOT, url]
11
12
-
import {type BskyAgent} from '@atproto/api'
13
-
14
-
import {type ResolvedLink, resolveGif, resolveLink} from '#/lib/api/resolve'
15
-
import {type Gif} from './tenor'
16
-
17
export function useResolveLinkQuery(url: string) {
18
const agent = useAgent()
19
return useQuery({
20
staleTime: STALE.HOURS.ONE,
21
queryKey: RQKEY_LINK(url),
···
1
+
import {type BskyAgent} from '@atproto/api'
2
import {type QueryClient, useQuery} from '@tanstack/react-query'
3
4
+
import {type ResolvedLink, resolveGif, resolveLink} from '#/lib/api/resolve'
5
import {STALE} from '#/state/queries/index'
6
+
import {useAgent} from '#/state/session'
7
+
import {type Gif} from './tenor'
8
9
const RQKEY_LINK_ROOT = 'resolve-link'
10
export const RQKEY_LINK = (url: string) => [RQKEY_LINK_ROOT, url]
···
12
const RQKEY_GIF_ROOT = 'resolve-gif'
13
export const RQKEY_GIF = (url: string) => [RQKEY_GIF_ROOT, url]
14
15
export function useResolveLinkQuery(url: string) {
16
const agent = useAgent()
17
+
18
return useQuery({
19
staleTime: STALE.HOURS.ONE,
20
queryKey: RQKEY_LINK(url),
+399
-98
src/view/com/composer/Composer.tsx
+399
-98
src/view/com/composer/Composer.tsx
···
42
ZoomOut,
43
} from 'react-native-reanimated'
44
import {useSafeAreaInsets} from 'react-native-safe-area-context'
45
import {type ImagePickerAsset} from 'expo-image-picker'
46
import {
47
AppBskyUnspeccedDefs,
···
50
type BskyAgent,
51
type RichText,
52
} from '@atproto/api'
53
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
54
import {msg, plural, Trans} from '@lingui/macro'
55
import {useLingui} from '@lingui/react'
56
import {useNavigation} from '@react-navigation/native'
···
68
} from '#/lib/constants'
69
import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
70
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
71
-
import {usePalette} from '#/lib/hooks/usePalette'
72
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
73
import {mimeToExt} from '#/lib/media/video/util'
74
import {type NavigationProp} from '#/lib/routes/types'
···
98
import {type ComposerOpts, type OnPostSuccessData} from '#/state/shell/composer'
99
import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
100
import {ComposerReplyTo} from '#/view/com/composer/ComposerReplyTo'
101
import {
102
ExternalEmbedGif,
103
ExternalEmbedLink,
···
116
import {SubtitleDialogBtn} from '#/view/com/composer/videos/SubtitleDialog'
117
import {VideoPreview} from '#/view/com/composer/videos/VideoPreview'
118
import {VideoTranscodeProgress} from '#/view/com/composer/videos/VideoTranscodeProgress'
119
-
import {Text} from '#/view/com/util/text/Text'
120
import {UserAvatar} from '#/view/com/util/UserAvatar'
121
import {atoms as a, native, useTheme, web} from '#/alf'
122
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
123
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
124
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmileIcon} from '#/components/icons/Emoji'
···
127
import {LazyQuoteEmbed} from '#/components/Post/Embed/LazyQuoteEmbed'
128
import * as Prompt from '#/components/Prompt'
129
import * as Toast from '#/components/Toast'
130
-
import {Text as NewText} from '#/components/Typography'
131
import {useAnalytics} from '#/analytics'
132
import {IS_ANDROID, IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
133
import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
134
import {PostLanguageSelect} from './select-language/PostLanguageSelect'
135
import {
136
type AssetType,
···
189
const setLangPrefs = useLanguagePrefsApi()
190
const textInput = useRef<TextInputRef>(null)
191
const discardPromptControl = Prompt.usePromptControl()
192
const {closeAllDialogs} = useDialogStateControlContext()
193
const {closeAllModals} = useModalControls()
194
const {data: preferences} = usePreferencesQuery()
···
307
onInitVideo()
308
}, [onInitVideo])
309
310
-
const clearVideo = React.useCallback(
311
(postId: string) => {
312
composerDispatch({
313
type: 'update_post',
···
320
[composerDispatch],
321
)
322
323
const [publishOnUpload, setPublishOnUpload] = useState(false)
324
325
const onClose = useCallback(() => {
···
327
clearThumbnailCache(queryClient)
328
}, [closeComposer, queryClient])
329
330
const insets = useSafeAreaInsets()
331
const viewStyles = useMemo(
332
() => ({
···
347
const onPressCancel = useCallback(() => {
348
if (textInput.current?.maybeClosePopup()) {
349
return
350
-
} else if (
351
-
thread.posts.some(
352
-
post =>
353
-
post.shortenedGraphemeLength > 0 ||
354
-
post.embed.media ||
355
-
post.embed.link,
356
-
)
357
-
) {
358
closeAllDialogs()
359
Keyboard.dismiss()
360
discardPromptControl.open()
361
} else {
362
onClose()
363
}
364
-
}, [thread, closeAllDialogs, discardPromptControl, onClose])
365
366
useImperativeHandle(cancelRef, () => ({onPressCancel}))
367
···
546
if (postUri && !replyTo) {
547
emitPostCreated()
548
}
549
setLangPrefs.savePostLanguageToHistory()
550
if (initQuote) {
551
// We want to wait for the quote count to update before we call `onPost`, which will refetch data
···
609
setLangPrefs,
610
queryClient,
611
navigation,
612
])
613
614
// Preserves the referential identity passed to each post item.
···
750
publishingStage={publishingStage}
751
topBarAnimatedStyle={topBarAnimatedStyle}
752
onCancel={onPressCancel}
753
-
onPublish={onPressPublish}>
754
{missingAltError && <AltTextReminder error={missingAltError} />}
755
<ErrorBanner
756
error={error}
···
801
{!IS_WEBFooterSticky && footer}
802
</View>
803
804
-
<Prompt.Basic
805
-
control={discardPromptControl}
806
-
title={_(msg`Discard draft?`)}
807
-
description={_(msg`Are you sure you'd like to discard this draft?`)}
808
-
onConfirm={onClose}
809
-
confirmButtonCta={_(msg`Discard`)}
810
-
confirmButtonColor="negative"
811
-
/>
812
</KeyboardAvoidingView>
813
</BottomSheetPortalProvider>
814
)
···
923
a.mb_sm,
924
!isActive && isLastPost && a.mb_lg,
925
!isActive && styles.inactivePost,
926
-
isTextOnly && IS_NATIVE && a.flex_grow,
927
]}>
928
<View style={[a.flex_row, IS_NATIVE && a.flex_1]}>
929
<UserAvatar
···
1027
publishingStage,
1028
onCancel,
1029
onPublish,
1030
topBarAnimatedStyle,
1031
children,
1032
}: {
···
1038
isThread: boolean
1039
onCancel: () => void
1040
onPublish: () => void
1041
topBarAnimatedStyle: StyleProp<ViewStyle>
1042
children?: React.ReactNode
1043
}) {
1044
-
const pal = usePalette('default')
1045
const {_} = useLingui()
1046
return (
1047
<Animated.View
···
1054
color="primary"
1055
shape="default"
1056
size="small"
1057
-
style={[a.rounded_full, a.py_sm, {paddingLeft: 7, paddingRight: 7}]}
1058
onPress={onCancel}
1059
accessibilityHint={_(
1060
msg`Closes post composer and discards post draft`,
···
1066
<View style={a.flex_1} />
1067
{isPublishing ? (
1068
<>
1069
-
<Text style={pal.textLight}>{publishingStage}</Text>
1070
<View style={styles.postBtn}>
1071
<ActivityIndicator />
1072
</View>
1073
</>
1074
) : (
1075
-
<Button
1076
-
testID="composerPublishBtn"
1077
-
label={
1078
-
isReply
1079
-
? isThread
1080
-
? _(
1081
-
msg({
1082
-
message: 'Publish replies',
1083
-
comment:
1084
-
'Accessibility label for button to publish multiple replies in a thread',
1085
-
}),
1086
-
)
1087
-
: _(
1088
-
msg({
1089
-
message: 'Publish reply',
1090
-
comment:
1091
-
'Accessibility label for button to publish a single reply',
1092
-
}),
1093
-
)
1094
-
: isThread
1095
-
? _(
1096
-
msg({
1097
-
message: 'Publish posts',
1098
-
comment:
1099
-
'Accessibility label for button to publish multiple posts in a thread',
1100
-
}),
1101
-
)
1102
-
: _(
1103
-
msg({
1104
-
message: 'Publish post',
1105
-
comment:
1106
-
'Accessibility label for button to publish a single post',
1107
-
}),
1108
-
)
1109
-
}
1110
-
variant="solid"
1111
-
color="primary"
1112
-
shape="default"
1113
-
size="small"
1114
-
style={[a.rounded_full, a.py_sm]}
1115
-
onPress={onPublish}
1116
-
disabled={!canPost || isPublishQueued}>
1117
-
<ButtonText style={[a.text_md]}>
1118
-
{isReply ? (
1119
-
<Trans context="action">Reply</Trans>
1120
-
) : isThread ? (
1121
-
<Trans context="action">Post All</Trans>
1122
-
) : (
1123
-
<Trans context="action">Post</Trans>
1124
-
)}
1125
-
</ButtonText>
1126
-
</Button>
1127
)}
1128
</View>
1129
{children}
···
1132
}
1133
1134
function AltTextReminder({error}: {error: string}) {
1135
-
const pal = usePalette('default')
1136
return (
1137
-
<View style={[styles.reminderLine, pal.viewLight]}>
1138
-
<View style={styles.errorIcon}>
1139
-
<FontAwesomeIcon
1140
-
icon="exclamation"
1141
-
style={{color: colors.red4}}
1142
-
size={10}
1143
-
/>
1144
-
</View>
1145
-
<Text style={[pal.text, a.flex_1]}>{error}</Text>
1146
-
</View>
1147
)
1148
}
1149
···
1411
1412
if (assets.length) {
1413
if (type === 'image') {
1414
-
const images: ComposerImage[] = []
1415
1416
await Promise.all(
1417
assets.map(async image => {
···
1421
height: image.height,
1422
mime: image.mimeType!,
1423
})
1424
-
images.push(composerImage)
1425
}),
1426
).catch(e => {
1427
logger.error(`createComposerImage failed`, {
···
1429
})
1430
})
1431
1432
-
onImageAdd(images)
1433
} else if (type === 'video') {
1434
onSelectVideo(post.id, assets[0])
1435
} else if (type === 'gif') {
···
1810
]}>
1811
<View style={[a.relative, a.flex_row, a.gap_sm, {paddingRight: 48}]}>
1812
<CircleInfoIcon fill={t.palette.negative_400} />
1813
-
<NewText style={[a.flex_1, a.leading_snug, {paddingTop: 1}]}>
1814
{error}
1815
-
</NewText>
1816
<Button
1817
label={_(msg`Dismiss error`)}
1818
size="tiny"
···
1825
</Button>
1826
</View>
1827
{videoError && videoState.jobId && (
1828
-
<NewText
1829
style={[
1830
{paddingLeft: 28},
1831
a.text_xs,
···
1834
t.atoms.text_contrast_low,
1835
]}>
1836
<Trans>Job ID: {videoState.jobId}</Trans>
1837
-
</NewText>
1838
)}
1839
</View>
1840
</Animated.View>
···
1922
progress={wheelProgress}
1923
/>
1924
</Animated.View>
1925
-
<NewText style={[a.font_semi_bold, a.ml_sm]}>{text}</NewText>
1926
</ToolbarWrapper>
1927
)
1928
}
···
42
ZoomOut,
43
} from 'react-native-reanimated'
44
import {useSafeAreaInsets} from 'react-native-safe-area-context'
45
+
import * as FileSystem from 'expo-file-system'
46
import {type ImagePickerAsset} from 'expo-image-picker'
47
import {
48
AppBskyUnspeccedDefs,
···
51
type BskyAgent,
52
type RichText,
53
} from '@atproto/api'
54
import {msg, plural, Trans} from '@lingui/macro'
55
import {useLingui} from '@lingui/react'
56
import {useNavigation} from '@react-navigation/native'
···
68
} from '#/lib/constants'
69
import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
70
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
71
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
72
import {mimeToExt} from '#/lib/media/video/util'
73
import {type NavigationProp} from '#/lib/routes/types'
···
97
import {type ComposerOpts, type OnPostSuccessData} from '#/state/shell/composer'
98
import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
99
import {ComposerReplyTo} from '#/view/com/composer/ComposerReplyTo'
100
+
import {DraftsButton} from '#/view/com/composer/drafts/DraftsButton'
101
import {
102
ExternalEmbedGif,
103
ExternalEmbedLink,
···
116
import {SubtitleDialogBtn} from '#/view/com/composer/videos/SubtitleDialog'
117
import {VideoPreview} from '#/view/com/composer/videos/VideoPreview'
118
import {VideoTranscodeProgress} from '#/view/com/composer/videos/VideoTranscodeProgress'
119
import {UserAvatar} from '#/view/com/util/UserAvatar'
120
import {atoms as a, native, useTheme, web} from '#/alf'
121
+
import {Admonition} from '#/components/Admonition'
122
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
123
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
124
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmileIcon} from '#/components/icons/Emoji'
···
127
import {LazyQuoteEmbed} from '#/components/Post/Embed/LazyQuoteEmbed'
128
import * as Prompt from '#/components/Prompt'
129
import * as Toast from '#/components/Toast'
130
+
import {Text} from '#/components/Typography'
131
import {useAnalytics} from '#/analytics'
132
import {IS_ANDROID, IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
133
import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
134
+
import {
135
+
draftToComposerPosts,
136
+
extractLocalRefs,
137
+
type RestoredVideo,
138
+
} from './drafts/state/api'
139
+
import {
140
+
loadDraft,
141
+
useCleanupPublishedDraftMutation,
142
+
useSaveDraftMutation,
143
+
} from './drafts/state/queries'
144
+
import {type DraftSummary} from './drafts/state/schema'
145
import {PostLanguageSelect} from './select-language/PostLanguageSelect'
146
import {
147
type AssetType,
···
200
const setLangPrefs = useLanguagePrefsApi()
201
const textInput = useRef<TextInputRef>(null)
202
const discardPromptControl = Prompt.usePromptControl()
203
+
const {mutateAsync: saveDraft, isPending: _isSavingDraft} =
204
+
useSaveDraftMutation()
205
+
const {mutate: cleanupPublishedDraft} = useCleanupPublishedDraftMutation()
206
const {closeAllDialogs} = useDialogStateControlContext()
207
const {closeAllModals} = useModalControls()
208
const {data: preferences} = usePreferencesQuery()
···
321
onInitVideo()
322
}, [onInitVideo])
323
324
+
const clearVideo = useCallback(
325
(postId: string) => {
326
composerDispatch({
327
type: 'update_post',
···
334
[composerDispatch],
335
)
336
337
+
const restoreVideo = useCallback(
338
+
async (postId: string, videoInfo: RestoredVideo) => {
339
+
try {
340
+
logger.debug('restoring video from draft', {
341
+
postId,
342
+
videoUri: videoInfo.uri,
343
+
altText: videoInfo.altText,
344
+
captionCount: videoInfo.captions.length,
345
+
})
346
+
347
+
let asset: ImagePickerAsset
348
+
349
+
if (IS_WEB) {
350
+
// Web: Convert blob URL to a File, then get video metadata (returns data URL)
351
+
const response = await fetch(videoInfo.uri)
352
+
const blob = await response.blob()
353
+
const file = new File([blob], 'restored-video', {
354
+
type: videoInfo.mimeType,
355
+
})
356
+
asset = await getVideoMetadata(file)
357
+
} else {
358
+
let uri = videoInfo.uri
359
+
if (IS_ANDROID) {
360
+
// Android: expo-file-system double-encodes filenames with special chars.
361
+
// The file exists, but react-native-compressor's MediaMetadataRetriever
362
+
// can't handle the double-encoded URI. Copy to a temp file with a simple name.
363
+
const sourceFile = new FileSystem.File(videoInfo.uri)
364
+
const tempFileName = `draft-video-${Date.now()}.${mimeToExt(videoInfo.mimeType)}`
365
+
const tempFile = new FileSystem.File(
366
+
FileSystem.Paths.cache,
367
+
tempFileName,
368
+
)
369
+
sourceFile.copy(tempFile)
370
+
logger.debug('restoreVideo: copied to temp file', {
371
+
source: videoInfo.uri,
372
+
temp: tempFile.uri,
373
+
})
374
+
uri = tempFile.uri
375
+
}
376
+
asset = await getVideoMetadata(uri)
377
+
}
378
+
379
+
// Start video processing using existing flow
380
+
const abortController = new AbortController()
381
+
composerDispatch({
382
+
type: 'update_post',
383
+
postId,
384
+
postAction: {
385
+
type: 'embed_add_video',
386
+
asset,
387
+
abortController,
388
+
},
389
+
})
390
+
391
+
// Restore alt text immediately
392
+
if (videoInfo.altText) {
393
+
composerDispatch({
394
+
type: 'update_post',
395
+
postId,
396
+
postAction: {
397
+
type: 'embed_update_video',
398
+
videoAction: {
399
+
type: 'update_alt_text',
400
+
altText: videoInfo.altText,
401
+
signal: abortController.signal,
402
+
},
403
+
},
404
+
})
405
+
}
406
+
407
+
// Restore captions (web only - captions use File objects)
408
+
if (IS_WEB && videoInfo.captions.length > 0) {
409
+
const captionTracks = videoInfo.captions.map(c => ({
410
+
lang: c.lang,
411
+
file: new File([c.content], `caption-${c.lang}.vtt`, {
412
+
type: 'text/vtt',
413
+
}),
414
+
}))
415
+
composerDispatch({
416
+
type: 'update_post',
417
+
postId,
418
+
postAction: {
419
+
type: 'embed_update_video',
420
+
videoAction: {
421
+
type: 'update_captions',
422
+
updater: () => captionTracks,
423
+
signal: abortController.signal,
424
+
},
425
+
},
426
+
})
427
+
}
428
+
429
+
// Start video compression and upload
430
+
processVideo(
431
+
asset,
432
+
videoAction => {
433
+
composerDispatch({
434
+
type: 'update_post',
435
+
postId,
436
+
postAction: {
437
+
type: 'embed_update_video',
438
+
videoAction,
439
+
},
440
+
})
441
+
},
442
+
agent,
443
+
currentDid,
444
+
abortController.signal,
445
+
_,
446
+
)
447
+
} catch (e) {
448
+
logger.error('Failed to restore video from draft', {
449
+
postId,
450
+
error: e,
451
+
})
452
+
}
453
+
},
454
+
[_, agent, currentDid, composerDispatch],
455
+
)
456
+
457
+
const handleSelectDraft = React.useCallback(
458
+
async (draftSummary: DraftSummary) => {
459
+
logger.debug('loading draft for editing', {
460
+
draftId: draftSummary.id,
461
+
})
462
+
463
+
// Load local media files for the draft
464
+
const {loadedMedia} = await loadDraft(draftSummary.draft)
465
+
466
+
// Extract original localRefs for orphan detection on save
467
+
const originalLocalRefs = extractLocalRefs(draftSummary.draft)
468
+
469
+
logger.debug('draft loaded', {
470
+
draftId: draftSummary.id,
471
+
loadedMediaCount: loadedMedia.size,
472
+
originalLocalRefCount: originalLocalRefs.size,
473
+
})
474
+
475
+
// Convert server draft to composer posts (videos returned separately)
476
+
const {posts, restoredVideos} = await draftToComposerPosts(
477
+
draftSummary.draft,
478
+
loadedMedia,
479
+
)
480
+
481
+
// Dispatch restore action (this also sets draftId in state)
482
+
composerDispatch({
483
+
type: 'restore_from_draft',
484
+
draftId: draftSummary.id,
485
+
posts,
486
+
threadgateAllow: draftSummary.draft.threadgateAllow,
487
+
postgateEmbeddingRules: draftSummary.draft.postgateEmbeddingRules,
488
+
loadedMedia,
489
+
originalLocalRefs,
490
+
})
491
+
492
+
// Initiate video processing for any restored videos
493
+
// This is async but we don't await - videos process in the background
494
+
for (const [postIndex, videoInfo] of restoredVideos) {
495
+
const postId = posts[postIndex].id
496
+
restoreVideo(postId, videoInfo)
497
+
}
498
+
},
499
+
[composerDispatch, restoreVideo],
500
+
)
501
+
502
const [publishOnUpload, setPublishOnUpload] = useState(false)
503
504
const onClose = useCallback(() => {
···
506
clearThumbnailCache(queryClient)
507
}, [closeComposer, queryClient])
508
509
+
const handleSaveDraft = React.useCallback(async () => {
510
+
try {
511
+
const result = await saveDraft({
512
+
composerState,
513
+
existingDraftId: composerState.draftId,
514
+
})
515
+
composerDispatch({type: 'mark_saved', draftId: result.draftId})
516
+
onClose()
517
+
} catch (e) {
518
+
logger.error('Failed to save draft', {error: e})
519
+
setError(_(msg`Failed to save draft`))
520
+
}
521
+
}, [saveDraft, composerState, composerDispatch, onClose, _])
522
+
523
+
// Save without closing - for use by DraftsButton
524
+
const saveCurrentDraft = React.useCallback(async () => {
525
+
const result = await saveDraft({
526
+
composerState,
527
+
existingDraftId: composerState.draftId,
528
+
})
529
+
composerDispatch({type: 'mark_saved', draftId: result.draftId})
530
+
}, [saveDraft, composerState, composerDispatch])
531
+
532
+
// Check if composer is empty (no content to save)
533
+
const isComposerEmpty = React.useMemo(() => {
534
+
// Has multiple posts means it's not empty
535
+
if (thread.posts.length > 1) return false
536
+
537
+
const firstPost = thread.posts[0]
538
+
// Has text
539
+
if (firstPost.richtext.text.trim().length > 0) return false
540
+
// Has media
541
+
if (firstPost.embed.media) return false
542
+
// Has quote
543
+
if (firstPost.embed.quote) return false
544
+
// Has link
545
+
if (firstPost.embed.link) return false
546
+
547
+
return true
548
+
}, [thread.posts])
549
+
550
+
// Clear the composer (discard current content)
551
+
const handleClearComposer = React.useCallback(() => {
552
+
composerDispatch({
553
+
type: 'clear',
554
+
initInteractionSettings: preferences?.postInteractionSettings,
555
+
})
556
+
}, [composerDispatch, preferences?.postInteractionSettings])
557
+
558
const insets = useSafeAreaInsets()
559
const viewStyles = useMemo(
560
() => ({
···
575
const onPressCancel = useCallback(() => {
576
if (textInput.current?.maybeClosePopup()) {
577
return
578
+
}
579
+
580
+
const hasContent = thread.posts.some(
581
+
post =>
582
+
post.shortenedGraphemeLength > 0 || post.embed.media || post.embed.link,
583
+
)
584
+
585
+
// Show discard prompt if there's content AND either:
586
+
// - No draft is loaded (new composition)
587
+
// - Draft is loaded but has been modified
588
+
if (hasContent && (!composerState.draftId || composerState.isDirty)) {
589
closeAllDialogs()
590
Keyboard.dismiss()
591
discardPromptControl.open()
592
} else {
593
onClose()
594
}
595
+
}, [
596
+
thread,
597
+
composerState.draftId,
598
+
composerState.isDirty,
599
+
closeAllDialogs,
600
+
discardPromptControl,
601
+
onClose,
602
+
])
603
604
useImperativeHandle(cancelRef, () => ({onPressCancel}))
605
···
784
if (postUri && !replyTo) {
785
emitPostCreated()
786
}
787
+
// Clean up draft and its media after successful publish
788
+
if (composerState.draftId && composerState.originalLocalRefs) {
789
+
logger.debug('post published, cleaning up draft', {
790
+
draftId: composerState.draftId,
791
+
mediaFileCount: composerState.originalLocalRefs.size,
792
+
})
793
+
cleanupPublishedDraft({
794
+
draftId: composerState.draftId,
795
+
originalLocalRefs: composerState.originalLocalRefs,
796
+
})
797
+
}
798
setLangPrefs.savePostLanguageToHistory()
799
if (initQuote) {
800
// We want to wait for the quote count to update before we call `onPost`, which will refetch data
···
858
setLangPrefs,
859
queryClient,
860
navigation,
861
+
composerState.draftId,
862
+
composerState.originalLocalRefs,
863
+
cleanupPublishedDraft,
864
])
865
866
// Preserves the referential identity passed to each post item.
···
1002
publishingStage={publishingStage}
1003
topBarAnimatedStyle={topBarAnimatedStyle}
1004
onCancel={onPressCancel}
1005
+
onPublish={onPressPublish}
1006
+
onSelectDraft={handleSelectDraft}
1007
+
onSaveDraft={saveCurrentDraft}
1008
+
onDiscard={handleClearComposer}
1009
+
isEmpty={isComposerEmpty}
1010
+
isDirty={composerState.isDirty}
1011
+
isEditingDraft={!!composerState.draftId}>
1012
{missingAltError && <AltTextReminder error={missingAltError} />}
1013
<ErrorBanner
1014
error={error}
···
1059
{!IS_WEBFooterSticky && footer}
1060
</View>
1061
1062
+
<Prompt.Outer control={discardPromptControl}>
1063
+
<Prompt.Content>
1064
+
<Prompt.TitleText>
1065
+
{composerState.draftId ? (
1066
+
<Trans>Save changes?</Trans>
1067
+
) : (
1068
+
<Trans>Save draft?</Trans>
1069
+
)}
1070
+
</Prompt.TitleText>
1071
+
<Prompt.DescriptionText>
1072
+
{composerState.draftId
1073
+
? _(
1074
+
msg`You have unsaved changes to this draft, would you like to save them?`,
1075
+
)
1076
+
: _(msg`Would you like to save this as a draft to edit later?`)}
1077
+
</Prompt.DescriptionText>
1078
+
</Prompt.Content>
1079
+
<Prompt.Actions>
1080
+
<Prompt.Action
1081
+
cta={
1082
+
composerState.draftId
1083
+
? _(msg`Save changes`)
1084
+
: _(msg`Save draft`)
1085
+
}
1086
+
onPress={handleSaveDraft}
1087
+
color="primary"
1088
+
/>
1089
+
<Prompt.Action
1090
+
cta={_(msg`Discard`)}
1091
+
onPress={onClose}
1092
+
color="negative_subtle"
1093
+
/>
1094
+
<Prompt.Cancel />
1095
+
</Prompt.Actions>
1096
+
</Prompt.Outer>
1097
</KeyboardAvoidingView>
1098
</BottomSheetPortalProvider>
1099
)
···
1208
a.mb_sm,
1209
!isActive && isLastPost && a.mb_lg,
1210
!isActive && styles.inactivePost,
1211
+
isTextOnly && isLastPost && IS_NATIVE && a.flex_grow,
1212
]}>
1213
<View style={[a.flex_row, IS_NATIVE && a.flex_1]}>
1214
<UserAvatar
···
1312
publishingStage,
1313
onCancel,
1314
onPublish,
1315
+
onSelectDraft,
1316
+
onSaveDraft,
1317
+
onDiscard,
1318
+
isEmpty,
1319
+
isDirty,
1320
+
isEditingDraft,
1321
topBarAnimatedStyle,
1322
children,
1323
}: {
···
1329
isThread: boolean
1330
onCancel: () => void
1331
onPublish: () => void
1332
+
onSelectDraft: (draft: DraftSummary) => void
1333
+
onSaveDraft: () => Promise<void>
1334
+
onDiscard: () => void
1335
+
isEmpty: boolean
1336
+
isDirty: boolean
1337
+
isEditingDraft: boolean
1338
topBarAnimatedStyle: StyleProp<ViewStyle>
1339
children?: React.ReactNode
1340
}) {
1341
+
const t = useTheme()
1342
const {_} = useLingui()
1343
return (
1344
<Animated.View
···
1351
color="primary"
1352
shape="default"
1353
size="small"
1354
+
style={[{paddingLeft: 7, paddingRight: 7}]}
1355
+
hoverStyle={[a.bg_transparent, {opacity: 0.5}]}
1356
onPress={onCancel}
1357
accessibilityHint={_(
1358
msg`Closes post composer and discards post draft`,
···
1364
<View style={a.flex_1} />
1365
{isPublishing ? (
1366
<>
1367
+
<Text style={[t.atoms.text_contrast_medium]}>
1368
+
{publishingStage}
1369
+
</Text>
1370
<View style={styles.postBtn}>
1371
<ActivityIndicator />
1372
</View>
1373
</>
1374
) : (
1375
+
<>
1376
+
{!isReply && (
1377
+
<DraftsButton
1378
+
onSelectDraft={onSelectDraft}
1379
+
onSaveDraft={onSaveDraft}
1380
+
onDiscard={onDiscard}
1381
+
isEmpty={isEmpty}
1382
+
isDirty={isDirty}
1383
+
isEditingDraft={isEditingDraft}
1384
+
/>
1385
+
)}
1386
+
<Button
1387
+
testID="composerPublishBtn"
1388
+
label={
1389
+
isReply
1390
+
? isThread
1391
+
? _(
1392
+
msg({
1393
+
message: 'Publish replies',
1394
+
comment:
1395
+
'Accessibility label for button to publish multiple replies in a thread',
1396
+
}),
1397
+
)
1398
+
: _(
1399
+
msg({
1400
+
message: 'Publish reply',
1401
+
comment:
1402
+
'Accessibility label for button to publish a single reply',
1403
+
}),
1404
+
)
1405
+
: isThread
1406
+
? _(
1407
+
msg({
1408
+
message: 'Publish posts',
1409
+
comment:
1410
+
'Accessibility label for button to publish multiple posts in a thread',
1411
+
}),
1412
+
)
1413
+
: _(
1414
+
msg({
1415
+
message: 'Publish post',
1416
+
comment:
1417
+
'Accessibility label for button to publish a single post',
1418
+
}),
1419
+
)
1420
+
}
1421
+
color="primary"
1422
+
size="small"
1423
+
onPress={onPublish}
1424
+
disabled={!canPost || isPublishQueued}>
1425
+
<ButtonText style={[a.text_md]}>
1426
+
{isReply ? (
1427
+
<Trans context="action">Reply</Trans>
1428
+
) : isThread ? (
1429
+
<Trans context="action">Post All</Trans>
1430
+
) : (
1431
+
<Trans context="action">Post</Trans>
1432
+
)}
1433
+
</ButtonText>
1434
+
</Button>
1435
+
</>
1436
)}
1437
</View>
1438
{children}
···
1441
}
1442
1443
function AltTextReminder({error}: {error: string}) {
1444
return (
1445
+
<Admonition type="error" style={[a.mt_2xs, a.mb_sm, a.mx_lg]}>
1446
+
{error}
1447
+
</Admonition>
1448
)
1449
}
1450
···
1712
1713
if (assets.length) {
1714
if (type === 'image') {
1715
+
const selectedImages: ComposerImage[] = []
1716
1717
await Promise.all(
1718
assets.map(async image => {
···
1722
height: image.height,
1723
mime: image.mimeType!,
1724
})
1725
+
selectedImages.push(composerImage)
1726
}),
1727
).catch(e => {
1728
logger.error(`createComposerImage failed`, {
···
1730
})
1731
})
1732
1733
+
onImageAdd(selectedImages)
1734
} else if (type === 'video') {
1735
onSelectVideo(post.id, assets[0])
1736
} else if (type === 'gif') {
···
2111
]}>
2112
<View style={[a.relative, a.flex_row, a.gap_sm, {paddingRight: 48}]}>
2113
<CircleInfoIcon fill={t.palette.negative_400} />
2114
+
<Text style={[a.flex_1, a.leading_snug, {paddingTop: 1}]}>
2115
{error}
2116
+
</Text>
2117
<Button
2118
label={_(msg`Dismiss error`)}
2119
size="tiny"
···
2126
</Button>
2127
</View>
2128
{videoError && videoState.jobId && (
2129
+
<Text
2130
style={[
2131
{paddingLeft: 28},
2132
a.text_xs,
···
2135
t.atoms.text_contrast_low,
2136
]}>
2137
<Trans>Job ID: {videoState.jobId}</Trans>
2138
+
</Text>
2139
)}
2140
</View>
2141
</Animated.View>
···
2223
progress={wheelProgress}
2224
/>
2225
</Animated.View>
2226
+
<Text style={[a.font_semi_bold, a.ml_sm]}>{text}</Text>
2227
</ToolbarWrapper>
2228
)
2229
}
+7
-1
src/view/com/composer/ExternalEmbed.tsx
+7
-1
src/view/com/composer/ExternalEmbed.tsx
+289
src/view/com/composer/drafts/DraftItem.tsx
+289
src/view/com/composer/drafts/DraftItem.tsx
···
···
1
+
import {useCallback, useEffect, useState} from 'react'
2
+
import {Pressable, View} from 'react-native'
3
+
import * as VideoThumbnails from 'expo-video-thumbnails'
4
+
import {msg, Trans} from '@lingui/macro'
5
+
import {useLingui} from '@lingui/react'
6
+
7
+
import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
8
+
import {sanitizeHandle} from '#/lib/strings/handles'
9
+
import {useCurrentAccountProfile} from '#/state/queries/useCurrentAccountProfile'
10
+
import {logger} from '#/view/com/composer/drafts/state/logger'
11
+
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
12
+
import {UserAvatar} from '#/view/com/util/UserAvatar'
13
+
import {atoms as a, useTheme} from '#/alf'
14
+
import {Button, ButtonIcon} from '#/components/Button'
15
+
import {DotGrid_Stroke2_Corner0_Rounded as DotsIcon} from '#/components/icons/DotGrid'
16
+
import * as MediaPreview from '#/components/MediaPreview'
17
+
import * as Prompt from '#/components/Prompt'
18
+
import {Text} from '#/components/Typography'
19
+
import {IS_WEB} from '#/env'
20
+
import {type DraftPostDisplay, type DraftSummary} from './state/schema'
21
+
import * as storage from './state/storage'
22
+
23
+
export function DraftItem({
24
+
draft,
25
+
onSelect,
26
+
onDelete,
27
+
}: {
28
+
draft: DraftSummary
29
+
onSelect: (draft: DraftSummary) => void
30
+
onDelete: (draft: DraftSummary) => void
31
+
}) {
32
+
const {_} = useLingui()
33
+
const t = useTheme()
34
+
const discardPromptControl = Prompt.usePromptControl()
35
+
36
+
const handleDelete = useCallback(() => {
37
+
onDelete(draft)
38
+
}, [onDelete, draft])
39
+
40
+
return (
41
+
<>
42
+
<Pressable
43
+
accessibilityRole="button"
44
+
accessibilityLabel={_(msg`Open draft`)}
45
+
accessibilityHint={_(msg`Opens this draft in the composer`)}
46
+
onPress={() => onSelect(draft)}
47
+
style={({pressed, hovered}) => [
48
+
a.rounded_md,
49
+
a.overflow_hidden,
50
+
a.border,
51
+
t.atoms.bg,
52
+
t.atoms.border_contrast_low,
53
+
t.atoms.shadow_sm,
54
+
(pressed || hovered) && t.atoms.bg_contrast_25,
55
+
]}>
56
+
<View style={[a.p_md, a.gap_sm]}>
57
+
{draft.hasMissingMedia && (
58
+
<View
59
+
style={[
60
+
a.rounded_sm,
61
+
a.px_sm,
62
+
a.py_xs,
63
+
a.mb_xs,
64
+
t.atoms.bg_contrast_50,
65
+
]}>
66
+
<Text style={[a.text_xs, t.atoms.text_contrast_medium]}>
67
+
<Trans>Some media unavailable (saved on another device)</Trans>
68
+
</Text>
69
+
</View>
70
+
)}
71
+
72
+
{draft.posts.map((post, index) => (
73
+
<DraftPostRow
74
+
key={post.id}
75
+
post={post}
76
+
isFirst={index === 0}
77
+
isLast={index === draft.posts.length - 1}
78
+
timestamp={draft.updatedAt}
79
+
discardPromptControl={discardPromptControl}
80
+
/>
81
+
))}
82
+
</View>
83
+
</Pressable>
84
+
85
+
<Prompt.Basic
86
+
control={discardPromptControl}
87
+
title={_(msg`Discard draft?`)}
88
+
description={_(msg`This draft will be permanently deleted.`)}
89
+
onConfirm={handleDelete}
90
+
confirmButtonCta={_(msg`Discard`)}
91
+
confirmButtonColor="negative"
92
+
/>
93
+
</>
94
+
)
95
+
}
96
+
97
+
function DraftPostRow({
98
+
post,
99
+
isFirst,
100
+
isLast,
101
+
timestamp,
102
+
discardPromptControl,
103
+
}: {
104
+
post: DraftPostDisplay
105
+
isFirst: boolean
106
+
isLast: boolean
107
+
timestamp: string
108
+
discardPromptControl: Prompt.PromptControlProps
109
+
}) {
110
+
const {_} = useLingui()
111
+
const t = useTheme()
112
+
const profile = useCurrentAccountProfile()
113
+
114
+
return (
115
+
<View style={[a.flex_row, a.gap_sm]}>
116
+
<View style={[a.align_center]}>
117
+
<UserAvatar type="user" size={42} avatar={profile?.avatar} />
118
+
{!isLast && (
119
+
<View
120
+
style={[
121
+
a.flex_1,
122
+
a.mt_xs,
123
+
{
124
+
width: 2,
125
+
backgroundColor: t.palette.contrast_100,
126
+
minHeight: 8,
127
+
},
128
+
]}
129
+
/>
130
+
)}
131
+
</View>
132
+
133
+
<View style={[a.flex_1, a.gap_2xs]}>
134
+
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
135
+
<View style={[a.flex_row, a.align_center, a.flex_1, a.gap_xs]}>
136
+
{profile && (
137
+
<>
138
+
<Text
139
+
style={[
140
+
a.text_md,
141
+
a.font_semi_bold,
142
+
t.atoms.text,
143
+
a.leading_snug,
144
+
]}
145
+
numberOfLines={1}>
146
+
{createSanitizedDisplayName(profile)}
147
+
</Text>
148
+
<Text
149
+
style={[
150
+
a.text_md,
151
+
t.atoms.text_contrast_medium,
152
+
a.leading_snug,
153
+
]}
154
+
numberOfLines={1}>
155
+
{sanitizeHandle(profile.handle)}
156
+
</Text>
157
+
<Text
158
+
style={[
159
+
a.text_md,
160
+
t.atoms.text_contrast_medium,
161
+
a.leading_snug,
162
+
]}>
163
+
·
164
+
</Text>
165
+
</>
166
+
)}
167
+
<TimeElapsed timestamp={timestamp}>
168
+
{({timeElapsed}) => (
169
+
<Text
170
+
style={[
171
+
a.text_md,
172
+
t.atoms.text_contrast_medium,
173
+
a.leading_snug,
174
+
]}
175
+
numberOfLines={1}>
176
+
{timeElapsed}
177
+
</Text>
178
+
)}
179
+
</TimeElapsed>
180
+
</View>
181
+
182
+
{isFirst && (
183
+
<Button
184
+
label={_(msg`More options`)}
185
+
variant="ghost"
186
+
color="secondary"
187
+
shape="round"
188
+
size="tiny"
189
+
onPress={e => {
190
+
e.stopPropagation()
191
+
discardPromptControl.open()
192
+
}}>
193
+
<ButtonIcon icon={DotsIcon} />
194
+
</Button>
195
+
)}
196
+
</View>
197
+
198
+
{post.text ? (
199
+
<Text style={[a.text_md, a.leading_snug, t.atoms.text]}>
200
+
{post.text}
201
+
</Text>
202
+
) : (
203
+
<Text
204
+
style={[
205
+
a.text_md,
206
+
a.leading_snug,
207
+
t.atoms.text_contrast_medium,
208
+
a.italic,
209
+
]}>
210
+
<Trans>(No text)</Trans>
211
+
</Text>
212
+
)}
213
+
214
+
<DraftMediaPreview post={post} />
215
+
</View>
216
+
</View>
217
+
)
218
+
}
219
+
220
+
type LoadedImage = {
221
+
url: string
222
+
alt: string
223
+
}
224
+
225
+
function DraftMediaPreview({post}: {post: DraftPostDisplay}) {
226
+
const [loadedImages, setLoadedImages] = useState<LoadedImage[]>([])
227
+
const [videoThumbnail, setVideoThumbnail] = useState<string | undefined>()
228
+
229
+
useEffect(() => {
230
+
async function loadMedia() {
231
+
if (post.images && post.images.length > 0) {
232
+
const loaded: LoadedImage[] = []
233
+
for (const image of post.images) {
234
+
try {
235
+
const url = await storage.loadMediaFromLocal(image.localPath)
236
+
loaded.push({url, alt: image.altText || ''})
237
+
} catch (e) {
238
+
// Image doesn't exist locally, skip it
239
+
}
240
+
}
241
+
setLoadedImages(loaded)
242
+
}
243
+
244
+
if (post.video?.exists && post.video.localPath) {
245
+
try {
246
+
const url = await storage.loadMediaFromLocal(post.video.localPath)
247
+
if (IS_WEB) {
248
+
// can't generate thumbnails on web
249
+
setVideoThumbnail("yep, there's a video")
250
+
} else {
251
+
logger.debug('generating thumbnail of ', {url})
252
+
const thumbnail = await VideoThumbnails.getThumbnailAsync(url, {
253
+
time: 0,
254
+
quality: 0.2,
255
+
})
256
+
logger.debug('thumbnail generated', {thumbnail})
257
+
setVideoThumbnail(thumbnail.uri)
258
+
}
259
+
} catch (e) {
260
+
// Video doesn't exist locally
261
+
}
262
+
}
263
+
}
264
+
265
+
void loadMedia()
266
+
}, [post.images, post.video])
267
+
268
+
// Nothing to show
269
+
if (loadedImages.length === 0 && !post.gif && !post.video) {
270
+
return null
271
+
}
272
+
273
+
return (
274
+
<MediaPreview.Outer style={[a.pt_xs]}>
275
+
{loadedImages.map((image, i) => (
276
+
<MediaPreview.ImageItem key={i} thumbnail={image.url} alt={image.alt} />
277
+
))}
278
+
{post.gif && (
279
+
<MediaPreview.GifItem thumbnail={post.gif.url} alt={post.gif.alt} />
280
+
)}
281
+
{post.video && videoThumbnail && (
282
+
<MediaPreview.VideoItem
283
+
thumbnail={IS_WEB ? undefined : videoThumbnail}
284
+
alt={post.video.altText}
285
+
/>
286
+
)}
287
+
</MediaPreview.Outer>
288
+
)
289
+
}
+111
src/view/com/composer/drafts/DraftsButton.tsx
+111
src/view/com/composer/drafts/DraftsButton.tsx
···
···
1
+
import {msg, Trans} from '@lingui/macro'
2
+
import {useLingui} from '@lingui/react'
3
+
4
+
import {atoms as a} from '#/alf'
5
+
import {Button, ButtonText} from '#/components/Button'
6
+
import * as Dialog from '#/components/Dialog'
7
+
import * as Prompt from '#/components/Prompt'
8
+
import {DraftsListDialog} from './DraftsListDialog'
9
+
import {useSaveDraftMutation} from './state/queries'
10
+
import {type DraftSummary} from './state/schema'
11
+
12
+
export function DraftsButton({
13
+
onSelectDraft,
14
+
onSaveDraft,
15
+
onDiscard,
16
+
isEmpty,
17
+
isDirty,
18
+
isEditingDraft,
19
+
}: {
20
+
onSelectDraft: (draft: DraftSummary) => void
21
+
onSaveDraft: () => Promise<void>
22
+
onDiscard: () => void
23
+
isEmpty: boolean
24
+
isDirty: boolean
25
+
isEditingDraft: boolean
26
+
}) {
27
+
const {_} = useLingui()
28
+
const draftsDialogControl = Dialog.useDialogControl()
29
+
const savePromptControl = Prompt.usePromptControl()
30
+
const {isPending: isSaving} = useSaveDraftMutation()
31
+
32
+
const handlePress = () => {
33
+
if (isEmpty || !isDirty) {
34
+
// Composer is empty or has no unsaved changes, go directly to drafts list
35
+
draftsDialogControl.open()
36
+
} else {
37
+
// Composer has unsaved changes, ask what to do
38
+
savePromptControl.open()
39
+
}
40
+
}
41
+
42
+
const handleSaveAndOpen = async () => {
43
+
await onSaveDraft()
44
+
draftsDialogControl.open()
45
+
}
46
+
47
+
const handleDiscardAndOpen = () => {
48
+
onDiscard()
49
+
draftsDialogControl.open()
50
+
}
51
+
52
+
return (
53
+
<>
54
+
<Button
55
+
label={_(msg`Drafts`)}
56
+
variant="ghost"
57
+
color="primary"
58
+
shape="default"
59
+
size="small"
60
+
style={[a.rounded_full, a.py_sm, a.px_md, a.mx_xs]}
61
+
disabled={isSaving}
62
+
onPress={handlePress}>
63
+
<ButtonText style={[a.text_md]}>
64
+
<Trans>Drafts</Trans>
65
+
</ButtonText>
66
+
</Button>
67
+
68
+
<DraftsListDialog
69
+
control={draftsDialogControl}
70
+
onSelectDraft={onSelectDraft}
71
+
/>
72
+
73
+
<Prompt.Outer control={savePromptControl}>
74
+
<Prompt.Content>
75
+
<Prompt.TitleText>
76
+
{isEditingDraft ? (
77
+
<Trans>Save changes?</Trans>
78
+
) : (
79
+
<Trans>Save draft?</Trans>
80
+
)}
81
+
</Prompt.TitleText>
82
+
</Prompt.Content>
83
+
<Prompt.DescriptionText>
84
+
{isEditingDraft ? (
85
+
<Trans>
86
+
You have unsaved changes. Would you like to save them before
87
+
viewing your drafts?
88
+
</Trans>
89
+
) : (
90
+
<Trans>
91
+
Would you like to save this as a draft before viewing your drafts?
92
+
</Trans>
93
+
)}
94
+
</Prompt.DescriptionText>
95
+
<Prompt.Actions>
96
+
<Prompt.Action
97
+
cta={isEditingDraft ? _(msg`Save changes`) : _(msg`Save draft`)}
98
+
onPress={handleSaveAndOpen}
99
+
color="primary"
100
+
/>
101
+
<Prompt.Action
102
+
cta={_(msg`Discard`)}
103
+
onPress={handleDiscardAndOpen}
104
+
color="negative_subtle"
105
+
/>
106
+
<Prompt.Cancel />
107
+
</Prompt.Actions>
108
+
</Prompt.Outer>
109
+
</>
110
+
)
111
+
}
+148
src/view/com/composer/drafts/DraftsListDialog.tsx
+148
src/view/com/composer/drafts/DraftsListDialog.tsx
···
···
1
+
import {useCallback, useMemo} from 'react'
2
+
import {View} from 'react-native'
3
+
import {msg, Trans} from '@lingui/macro'
4
+
import {useLingui} from '@lingui/react'
5
+
6
+
import {EmptyState} from '#/view/com/util/EmptyState'
7
+
import {atoms as a, useTheme, web} from '#/alf'
8
+
import {Button, ButtonText} from '#/components/Button'
9
+
import * as Dialog from '#/components/Dialog'
10
+
import {PageX_Stroke2_Corner0_Rounded_Large as PageXIcon} from '#/components/icons/PageX'
11
+
import {ListFooter} from '#/components/Lists'
12
+
import {Loader} from '#/components/Loader'
13
+
import {IS_NATIVE} from '#/env'
14
+
import {DraftItem} from './DraftItem'
15
+
import {useDeleteDraftMutation, useDraftsQuery} from './state/queries'
16
+
import {type DraftSummary} from './state/schema'
17
+
18
+
export function DraftsListDialog({
19
+
control,
20
+
onSelectDraft,
21
+
}: {
22
+
control: Dialog.DialogControlProps
23
+
onSelectDraft: (draft: DraftSummary) => void
24
+
}) {
25
+
const {_} = useLingui()
26
+
const t = useTheme()
27
+
const {data, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage} =
28
+
useDraftsQuery()
29
+
const {mutate: deleteDraft} = useDeleteDraftMutation()
30
+
31
+
const drafts = useMemo(
32
+
() => data?.pages.flatMap(page => page.drafts) ?? [],
33
+
[data],
34
+
)
35
+
36
+
const handleSelectDraft = useCallback(
37
+
(summary: DraftSummary) => {
38
+
control.close(() => {
39
+
onSelectDraft(summary)
40
+
})
41
+
},
42
+
[control, onSelectDraft],
43
+
)
44
+
45
+
const handleDeleteDraft = useCallback(
46
+
(draftSummary: DraftSummary) => {
47
+
deleteDraft({draftId: draftSummary.id, draft: draftSummary.draft})
48
+
},
49
+
[deleteDraft],
50
+
)
51
+
52
+
const backButton = useCallback(
53
+
() => (
54
+
<Button
55
+
label={_(msg`Back`)}
56
+
onPress={() => control.close()}
57
+
size="small"
58
+
color="primary"
59
+
variant="ghost">
60
+
<ButtonText style={[a.text_md]}>
61
+
<Trans>Back</Trans>
62
+
</ButtonText>
63
+
</Button>
64
+
),
65
+
[control, _],
66
+
)
67
+
68
+
const renderItem = useCallback(
69
+
({item}: {item: DraftSummary}) => {
70
+
return (
71
+
<View style={[a.px_lg, a.mt_lg]}>
72
+
<DraftItem
73
+
draft={item}
74
+
onSelect={handleSelectDraft}
75
+
onDelete={handleDeleteDraft}
76
+
/>
77
+
</View>
78
+
)
79
+
},
80
+
[handleSelectDraft, handleDeleteDraft],
81
+
)
82
+
83
+
const header = useMemo(
84
+
() => (
85
+
<Dialog.Header renderLeft={backButton}>
86
+
<Dialog.HeaderText>
87
+
<Trans>Drafts</Trans>
88
+
</Dialog.HeaderText>
89
+
</Dialog.Header>
90
+
),
91
+
[backButton],
92
+
)
93
+
94
+
const onEndReached = useCallback(() => {
95
+
if (hasNextPage && !isFetchingNextPage) {
96
+
fetchNextPage()
97
+
}
98
+
}, [hasNextPage, isFetchingNextPage, fetchNextPage])
99
+
100
+
const emptyComponent = useMemo(() => {
101
+
if (isLoading) {
102
+
return (
103
+
<View style={[a.py_xl, a.align_center]}>
104
+
<Loader size="lg" />
105
+
</View>
106
+
)
107
+
}
108
+
return (
109
+
<EmptyState
110
+
icon={PageXIcon}
111
+
message={_(msg`No drafts yet`)}
112
+
style={[a.justify_center, {minHeight: 500}]}
113
+
/>
114
+
)
115
+
}, [isLoading, _])
116
+
117
+
const footerComponent = useMemo(
118
+
() => (
119
+
<ListFooter
120
+
isFetchingNextPage={isFetchingNextPage}
121
+
hasNextPage={hasNextPage}
122
+
style={[a.border_transparent]}
123
+
/>
124
+
),
125
+
[isFetchingNextPage, hasNextPage],
126
+
)
127
+
128
+
return (
129
+
<Dialog.Outer control={control}>
130
+
{/* We really really need to figure out a nice, consistent API for doing a header cross-platform -sfn */}
131
+
{IS_NATIVE && header}
132
+
<Dialog.InnerFlatList
133
+
data={drafts}
134
+
renderItem={renderItem}
135
+
keyExtractor={item => item.id}
136
+
ListHeaderComponent={web(header)}
137
+
stickyHeaderIndices={web([0])}
138
+
ListEmptyComponent={emptyComponent}
139
+
ListFooterComponent={footerComponent}
140
+
onEndReached={onEndReached}
141
+
onEndReachedThreshold={0.5}
142
+
style={[t.atoms.bg_contrast_50, a.px_0, web({minHeight: 500})]}
143
+
webInnerContentContainerStyle={[a.py_0]}
144
+
contentContainerStyle={[a.pb_xl]}
145
+
/>
146
+
</Dialog.Outer>
147
+
)
148
+
}
+630
src/view/com/composer/drafts/state/api.ts
+630
src/view/com/composer/drafts/state/api.ts
···
···
1
+
/**
2
+
* Type converters for Draft API - convert between ComposerState and server Draft types.
3
+
*/
4
+
import {type AppBskyDraftDefs, RichText} from '@atproto/api'
5
+
import {nanoid} from 'nanoid/non-secure'
6
+
7
+
import {getImageDim} from '#/lib/media/manip'
8
+
import {mimeToExt} from '#/lib/media/video/util'
9
+
import {type ComposerImage} from '#/state/gallery'
10
+
import {type Gif} from '#/state/queries/tenor'
11
+
import {
12
+
type ComposerState,
13
+
type EmbedDraft,
14
+
type PostDraft,
15
+
} from '#/view/com/composer/state/composer'
16
+
import {type VideoState} from '#/view/com/composer/state/video'
17
+
import {logger} from './logger'
18
+
import {type DraftPostDisplay, type DraftSummary} from './schema'
19
+
20
+
const TENOR_HOSTNAME = 'media.tenor.com'
21
+
22
+
/**
23
+
* Video data from a draft that needs to be restored by re-processing.
24
+
* Contains the local file URI, alt text, mime type, and captions to restore.
25
+
*/
26
+
export type RestoredVideo = {
27
+
uri: string
28
+
altText: string
29
+
mimeType: string
30
+
localRefPath: string
31
+
captions: Array<{lang: string; content: string}>
32
+
}
33
+
34
+
/**
35
+
* Parse mime type from video localRefPath.
36
+
* Format: `video:${mimeType}:${nanoid()}` (new) or `video:${nanoid()}` (legacy)
37
+
*/
38
+
function parseVideoMimeType(localRefPath: string): string {
39
+
const parts = localRefPath.split(':')
40
+
// New format: video:video/mp4:abc123 -> parts[1] is mime type
41
+
// Legacy format: video:abc123 -> no mime type, default to video/mp4
42
+
if (parts.length >= 3 && parts[1].includes('/')) {
43
+
return parts[1]
44
+
}
45
+
return 'video/mp4' // Default for legacy drafts
46
+
}
47
+
48
+
/**
49
+
* Convert ComposerState to server Draft format for saving.
50
+
* Returns both the draft and a map of localRef paths to their source paths.
51
+
*/
52
+
export async function composerStateToDraft(state: ComposerState): Promise<{
53
+
draft: AppBskyDraftDefs.Draft
54
+
localRefPaths: Map<string, string>
55
+
}> {
56
+
const localRefPaths = new Map<string, string>()
57
+
58
+
const posts: AppBskyDraftDefs.DraftPost[] = await Promise.all(
59
+
state.thread.posts.map(post => {
60
+
return postDraftToServerPost(post, localRefPaths)
61
+
}),
62
+
)
63
+
64
+
// Convert threadgate settings to server format
65
+
const threadgateAllow: AppBskyDraftDefs.Draft['threadgateAllow'] = []
66
+
for (const setting of state.thread.threadgate) {
67
+
if (setting.type === 'mention') {
68
+
threadgateAllow.push({
69
+
$type: 'app.bsky.feed.threadgate#mentionRule' as const,
70
+
})
71
+
} else if (setting.type === 'following') {
72
+
threadgateAllow.push({
73
+
$type: 'app.bsky.feed.threadgate#followingRule' as const,
74
+
})
75
+
} else if (setting.type === 'followers') {
76
+
threadgateAllow.push({
77
+
$type: 'app.bsky.feed.threadgate#followerRule' as const,
78
+
})
79
+
} else if (setting.type === 'list') {
80
+
threadgateAllow.push({
81
+
$type: 'app.bsky.feed.threadgate#listRule' as const,
82
+
list: setting.list,
83
+
})
84
+
}
85
+
}
86
+
87
+
const draft: AppBskyDraftDefs.Draft = {
88
+
$type: 'app.bsky.draft.defs#draft',
89
+
posts,
90
+
threadgateAllow: threadgateAllow.length > 0 ? threadgateAllow : undefined,
91
+
postgateEmbeddingRules:
92
+
state.thread.postgate.embeddingRules &&
93
+
state.thread.postgate.embeddingRules.length > 0
94
+
? state.thread.postgate.embeddingRules
95
+
: undefined,
96
+
}
97
+
98
+
return {draft, localRefPaths}
99
+
}
100
+
101
+
/**
102
+
* Convert a single PostDraft to server DraftPost format.
103
+
*/
104
+
async function postDraftToServerPost(
105
+
post: PostDraft,
106
+
localRefPaths: Map<string, string>,
107
+
): Promise<AppBskyDraftDefs.DraftPost> {
108
+
const draftPost: AppBskyDraftDefs.DraftPost = {
109
+
$type: 'app.bsky.draft.defs#draftPost',
110
+
text: post.richtext.text,
111
+
}
112
+
113
+
// Add labels if present
114
+
if (post.labels.length > 0) {
115
+
draftPost.labels = {
116
+
$type: 'com.atproto.label.defs#selfLabels',
117
+
values: post.labels.map(label => ({val: label})),
118
+
}
119
+
}
120
+
121
+
// Add embeds
122
+
if (post.embed.media) {
123
+
if (post.embed.media.type === 'images') {
124
+
draftPost.embedImages = serializeImages(
125
+
post.embed.media.images,
126
+
localRefPaths,
127
+
)
128
+
} else if (post.embed.media.type === 'video') {
129
+
const video = await serializeVideo(post.embed.media.video, localRefPaths)
130
+
if (video) {
131
+
draftPost.embedVideos = [video]
132
+
}
133
+
} else if (post.embed.media.type === 'gif') {
134
+
const external = serializeGif(post.embed.media)
135
+
if (external) {
136
+
draftPost.embedExternals = [external]
137
+
}
138
+
}
139
+
}
140
+
141
+
// Add quote record embed
142
+
if (post.embed.quote) {
143
+
draftPost.embedRecords = [
144
+
{
145
+
$type: 'app.bsky.draft.defs#draftEmbedRecord',
146
+
record: {
147
+
uri: post.embed.quote.uri,
148
+
cid: '', // We don't have the CID at draft time
149
+
},
150
+
},
151
+
]
152
+
}
153
+
154
+
// Add external link embed (only if no media, otherwise it's ignored)
155
+
if (post.embed.link && !post.embed.media) {
156
+
draftPost.embedExternals = [
157
+
{
158
+
$type: 'app.bsky.draft.defs#draftEmbedExternal',
159
+
uri: post.embed.link.uri,
160
+
},
161
+
]
162
+
}
163
+
164
+
return draftPost
165
+
}
166
+
167
+
/**
168
+
* Serialize images to server format with localRef paths.
169
+
* Reuses existing localRefPath if present (when editing a draft),
170
+
* otherwise generates a new one.
171
+
*/
172
+
function serializeImages(
173
+
images: ComposerImage[],
174
+
localRefPaths: Map<string, string>,
175
+
): AppBskyDraftDefs.DraftEmbedImage[] {
176
+
return images.map(image => {
177
+
const sourcePath = image.transformed?.path || image.source.path
178
+
// Reuse existing localRefPath if present (editing draft), otherwise generate new
179
+
const isReusing = !!image.localRefPath
180
+
const localRefPath = image.localRefPath || `image:${nanoid()}`
181
+
localRefPaths.set(localRefPath, sourcePath)
182
+
183
+
logger.debug('serializing image', {
184
+
localRefPath,
185
+
isReusing,
186
+
sourcePath,
187
+
})
188
+
189
+
return {
190
+
$type: 'app.bsky.draft.defs#draftEmbedImage',
191
+
localRef: {
192
+
$type: 'app.bsky.draft.defs#draftEmbedLocalRef',
193
+
path: localRefPath,
194
+
},
195
+
alt: image.alt || undefined,
196
+
}
197
+
})
198
+
}
199
+
200
+
/**
201
+
* Serialize video to server format with localRef path.
202
+
* The localRef path encodes the mime type: `video:${mimeType}:${nanoid()}`
203
+
*/
204
+
async function serializeVideo(
205
+
videoState: VideoState,
206
+
localRefPaths: Map<string, string>,
207
+
): Promise<AppBskyDraftDefs.DraftEmbedVideo | undefined> {
208
+
// Only save videos that have been compressed (have a video file)
209
+
if (!videoState.video) {
210
+
return undefined
211
+
}
212
+
213
+
// Encode mime type in the path for restoration
214
+
const mimeType = videoState.video.mimeType || 'video/mp4'
215
+
const ext = mimeToExt(mimeType)
216
+
const localRefPath = `video:${mimeType}:${nanoid()}.${ext}`
217
+
localRefPaths.set(localRefPath, videoState.video.uri)
218
+
219
+
// Read caption file contents as text
220
+
const captions: AppBskyDraftDefs.DraftEmbedCaption[] = []
221
+
for (const caption of videoState.captions) {
222
+
if (caption.lang) {
223
+
const content = await caption.file.text()
224
+
captions.push({
225
+
$type: 'app.bsky.draft.defs#draftEmbedCaption',
226
+
lang: caption.lang,
227
+
content,
228
+
})
229
+
}
230
+
}
231
+
232
+
return {
233
+
$type: 'app.bsky.draft.defs#draftEmbedVideo',
234
+
localRef: {
235
+
$type: 'app.bsky.draft.defs#draftEmbedLocalRef',
236
+
path: localRefPath,
237
+
},
238
+
alt: videoState.altText || undefined,
239
+
captions: captions.length > 0 ? captions : undefined,
240
+
}
241
+
}
242
+
243
+
/**
244
+
* Serialize GIF to server format as external embed.
245
+
* URL format: https://media.tenor.com/{id}/{filename}.gif?hh=HEIGHT&ww=WIDTH&alt=ALT_TEXT
246
+
*/
247
+
function serializeGif(gifMedia: {
248
+
type: 'gif'
249
+
gif: Gif
250
+
alt: string
251
+
}): AppBskyDraftDefs.DraftEmbedExternal | undefined {
252
+
const gif = gifMedia.gif
253
+
const gifFormat = gif.media_formats.gif || gif.media_formats.tinygif
254
+
255
+
if (!gifFormat?.url) {
256
+
return undefined
257
+
}
258
+
259
+
// Build URL with dimensions and alt text in query params
260
+
const url = new URL(gifFormat.url)
261
+
if (gifFormat.dims) {
262
+
url.searchParams.set('ww', String(gifFormat.dims[0]))
263
+
url.searchParams.set('hh', String(gifFormat.dims[1]))
264
+
}
265
+
// Store alt text if present
266
+
if (gifMedia.alt) {
267
+
url.searchParams.set('alt', gifMedia.alt)
268
+
}
269
+
270
+
return {
271
+
$type: 'app.bsky.draft.defs#draftEmbedExternal',
272
+
uri: url.toString(),
273
+
}
274
+
}
275
+
276
+
/**
277
+
* Convert server DraftView to DraftSummary for list display.
278
+
* Also checks which media files exist locally.
279
+
*/
280
+
export function draftViewToSummary(
281
+
view: AppBskyDraftDefs.DraftView,
282
+
localMediaExists: (path: string) => boolean,
283
+
): DraftSummary {
284
+
const firstPost = view.draft.posts[0]
285
+
const previewText = firstPost?.text?.slice(0, 100) || ''
286
+
287
+
let mediaCount = 0
288
+
let hasMedia = false
289
+
let hasMissingMedia = false
290
+
291
+
const posts: DraftPostDisplay[] = view.draft.posts.map((post, index) => {
292
+
const images: DraftPostDisplay['images'] = []
293
+
const videos: DraftPostDisplay['video'][] = []
294
+
let gif: DraftPostDisplay['gif']
295
+
296
+
// Process images
297
+
if (post.embedImages) {
298
+
for (const img of post.embedImages) {
299
+
mediaCount++
300
+
hasMedia = true
301
+
const exists = localMediaExists(img.localRef.path)
302
+
if (!exists) {
303
+
hasMissingMedia = true
304
+
}
305
+
images.push({
306
+
localPath: img.localRef.path,
307
+
altText: img.alt || '',
308
+
exists,
309
+
})
310
+
}
311
+
}
312
+
313
+
// Process videos
314
+
if (post.embedVideos) {
315
+
for (const vid of post.embedVideos) {
316
+
mediaCount++
317
+
hasMedia = true
318
+
const exists = localMediaExists(vid.localRef.path)
319
+
if (!exists) {
320
+
hasMissingMedia = true
321
+
}
322
+
videos.push({
323
+
localPath: vid.localRef.path,
324
+
altText: vid.alt || '',
325
+
exists,
326
+
})
327
+
}
328
+
}
329
+
330
+
// Process externals (check for GIFs)
331
+
if (post.embedExternals) {
332
+
for (const ext of post.embedExternals) {
333
+
const gifData = parseGifFromUrl(ext.uri)
334
+
if (gifData) {
335
+
mediaCount++
336
+
hasMedia = true
337
+
gif = gifData
338
+
}
339
+
}
340
+
}
341
+
342
+
return {
343
+
id: `post-${index}`,
344
+
text: post.text || '',
345
+
images: images.length > 0 ? images : undefined,
346
+
video: videos[0], // Only one video per post
347
+
gif,
348
+
}
349
+
})
350
+
351
+
return {
352
+
id: view.id,
353
+
draft: view.draft,
354
+
previewText,
355
+
hasMedia,
356
+
hasMissingMedia,
357
+
mediaCount,
358
+
postCount: view.draft.posts.length,
359
+
updatedAt: view.updatedAt,
360
+
posts,
361
+
}
362
+
}
363
+
364
+
/**
365
+
* Parse GIF data from a Tenor URL.
366
+
* URL format: https://media.tenor.com/{id}/{filename}.gif?hh=HEIGHT&ww=WIDTH&alt=ALT_TEXT
367
+
*/
368
+
function parseGifFromUrl(
369
+
uri: string,
370
+
): {url: string; width: number; height: number; alt: string} | undefined {
371
+
try {
372
+
const url = new URL(uri)
373
+
if (url.hostname !== TENOR_HOSTNAME) {
374
+
return undefined
375
+
}
376
+
377
+
const height = parseInt(url.searchParams.get('hh') || '', 10)
378
+
const width = parseInt(url.searchParams.get('ww') || '', 10)
379
+
const alt = url.searchParams.get('alt') || ''
380
+
381
+
if (!height || !width) {
382
+
return undefined
383
+
}
384
+
385
+
// Strip our custom params to get clean base URL
386
+
// This prevents double query strings when resolveGif() adds params again
387
+
url.searchParams.delete('ww')
388
+
url.searchParams.delete('hh')
389
+
url.searchParams.delete('alt')
390
+
391
+
return {url: url.toString(), width, height, alt}
392
+
} catch {
393
+
return undefined
394
+
}
395
+
}
396
+
397
+
/**
398
+
* Convert server Draft back to composer-compatible format for restoration.
399
+
* Returns posts and a map of videos that need to be restored by re-processing.
400
+
*
401
+
* Videos cannot be restored synchronously like images because they need to go through
402
+
* the compression and upload pipeline. The caller should handle the restoredVideos
403
+
* by initiating video processing for each entry.
404
+
*/
405
+
export async function draftToComposerPosts(
406
+
draft: AppBskyDraftDefs.Draft,
407
+
loadedMedia: Map<string, string>,
408
+
): Promise<{posts: PostDraft[]; restoredVideos: Map<number, RestoredVideo>}> {
409
+
const restoredVideos = new Map<number, RestoredVideo>()
410
+
411
+
const posts = await Promise.all(
412
+
draft.posts.map(async (post, index) => {
413
+
const richtext = new RichText({text: post.text || ''})
414
+
richtext.detectFacetsWithoutResolution()
415
+
416
+
const embed: EmbedDraft = {
417
+
quote: undefined,
418
+
link: undefined,
419
+
media: undefined,
420
+
}
421
+
422
+
// Restore images
423
+
if (post.embedImages && post.embedImages.length > 0) {
424
+
const imagePromises = post.embedImages.map(async img => {
425
+
const path = loadedMedia.get(img.localRef.path)
426
+
if (!path) {
427
+
return null
428
+
}
429
+
430
+
let width = 0
431
+
let height = 0
432
+
try {
433
+
const dims = await getImageDim(path)
434
+
width = dims.width
435
+
height = dims.height
436
+
} catch (e) {
437
+
logger.warn('Failed to get image dimensions', {
438
+
path,
439
+
error: e,
440
+
})
441
+
}
442
+
443
+
logger.debug('restoring image with localRefPath', {
444
+
localRefPath: img.localRef.path,
445
+
loadedPath: path,
446
+
width,
447
+
height,
448
+
})
449
+
450
+
return {
451
+
alt: img.alt || '',
452
+
// Preserve the original localRefPath for reuse when saving
453
+
localRefPath: img.localRef.path,
454
+
source: {
455
+
id: nanoid(),
456
+
path,
457
+
width,
458
+
height,
459
+
mime: 'image/jpeg',
460
+
},
461
+
} as ComposerImage
462
+
})
463
+
464
+
const images = (await Promise.all(imagePromises)).filter(
465
+
(img): img is ComposerImage => img !== null,
466
+
)
467
+
if (images.length > 0) {
468
+
embed.media = {type: 'images', images}
469
+
}
470
+
}
471
+
472
+
// Restore GIF from external embed
473
+
if (post.embedExternals) {
474
+
for (const ext of post.embedExternals) {
475
+
const gifData = parseGifFromUrl(ext.uri)
476
+
if (gifData) {
477
+
// Reconstruct a Gif object with all required properties
478
+
const mediaObject = {
479
+
url: gifData.url,
480
+
dims: [gifData.width, gifData.height] as [number, number],
481
+
duration: 0,
482
+
size: 0,
483
+
}
484
+
embed.media = {
485
+
type: 'gif',
486
+
gif: {
487
+
id: '',
488
+
created: 0,
489
+
hasaudio: false,
490
+
hascaption: false,
491
+
flags: '',
492
+
tags: [],
493
+
title: '',
494
+
content_description: gifData.alt || '',
495
+
itemurl: '',
496
+
url: gifData.url, // Required for useResolveGifQuery
497
+
media_formats: {
498
+
gif: mediaObject,
499
+
tinygif: mediaObject,
500
+
preview: mediaObject,
501
+
},
502
+
} as Gif,
503
+
alt: gifData.alt,
504
+
}
505
+
break
506
+
}
507
+
}
508
+
}
509
+
510
+
// Collect video for restoration (processed async by caller)
511
+
if (post.embedVideos && post.embedVideos.length > 0) {
512
+
const vid = post.embedVideos[0]
513
+
const videoUri = loadedMedia.get(vid.localRef.path)
514
+
if (videoUri) {
515
+
const mimeType = parseVideoMimeType(vid.localRef.path)
516
+
logger.debug('found video to restore', {
517
+
localRefPath: vid.localRef.path,
518
+
videoUri,
519
+
altText: vid.alt,
520
+
mimeType,
521
+
captionCount: vid.captions?.length ?? 0,
522
+
})
523
+
restoredVideos.set(index, {
524
+
uri: videoUri,
525
+
altText: vid.alt || '',
526
+
mimeType,
527
+
localRefPath: vid.localRef.path,
528
+
captions:
529
+
vid.captions?.map(c => ({lang: c.lang, content: c.content})) ??
530
+
[],
531
+
})
532
+
}
533
+
}
534
+
535
+
// Restore quote embed
536
+
if (post.embedRecords && post.embedRecords.length > 0) {
537
+
const record = post.embedRecords[0]
538
+
embed.quote = {type: 'link', uri: record.record.uri}
539
+
}
540
+
541
+
// Restore link embed (only if not a GIF)
542
+
if (post.embedExternals && !embed.media) {
543
+
for (const ext of post.embedExternals) {
544
+
const gifData = parseGifFromUrl(ext.uri)
545
+
if (!gifData) {
546
+
embed.link = {type: 'link', uri: ext.uri}
547
+
break
548
+
}
549
+
}
550
+
}
551
+
552
+
// Parse labels
553
+
const labels: string[] = []
554
+
if (post.labels && 'values' in post.labels) {
555
+
for (const val of post.labels.values) {
556
+
labels.push(val.val)
557
+
}
558
+
}
559
+
560
+
return {
561
+
id: `draft-post-${index}`,
562
+
richtext,
563
+
shortenedGraphemeLength: richtext.graphemeLength,
564
+
labels,
565
+
embed,
566
+
} as PostDraft
567
+
}),
568
+
)
569
+
570
+
return {posts, restoredVideos}
571
+
}
572
+
573
+
/**
574
+
* Convert server threadgate rules back to UI settings.
575
+
*/
576
+
export function threadgateToUISettings(
577
+
threadgateAllow?: AppBskyDraftDefs.Draft['threadgateAllow'],
578
+
): Array<{type: string; list?: string}> {
579
+
if (!threadgateAllow) {
580
+
return []
581
+
}
582
+
583
+
return threadgateAllow
584
+
.map(rule => {
585
+
if ('$type' in rule) {
586
+
if (rule.$type === 'app.bsky.feed.threadgate#mentionRule') {
587
+
return {type: 'mention'}
588
+
}
589
+
if (rule.$type === 'app.bsky.feed.threadgate#followingRule') {
590
+
return {type: 'following'}
591
+
}
592
+
if (rule.$type === 'app.bsky.feed.threadgate#followerRule') {
593
+
return {type: 'followers'}
594
+
}
595
+
if (
596
+
rule.$type === 'app.bsky.feed.threadgate#listRule' &&
597
+
'list' in rule
598
+
) {
599
+
return {type: 'list', list: (rule as {list: string}).list}
600
+
}
601
+
}
602
+
return null
603
+
})
604
+
.filter((s): s is {type: string; list?: string} => s !== null)
605
+
}
606
+
607
+
/**
608
+
* Extract all localRef paths from a draft.
609
+
* Used to identify which media files belong to a draft for cleanup.
610
+
*/
611
+
export function extractLocalRefs(draft: AppBskyDraftDefs.Draft): Set<string> {
612
+
const refs = new Set<string>()
613
+
for (const post of draft.posts) {
614
+
if (post.embedImages) {
615
+
for (const img of post.embedImages) {
616
+
refs.add(img.localRef.path)
617
+
}
618
+
}
619
+
if (post.embedVideos) {
620
+
for (const vid of post.embedVideos) {
621
+
refs.add(vid.localRef.path)
622
+
}
623
+
}
624
+
}
625
+
logger.debug('extracted localRefs from draft', {
626
+
count: refs.size,
627
+
refs: Array.from(refs),
628
+
})
629
+
return refs
630
+
}
+3
src/view/com/composer/drafts/state/logger.ts
+3
src/view/com/composer/drafts/state/logger.ts
+271
src/view/com/composer/drafts/state/queries.ts
+271
src/view/com/composer/drafts/state/queries.ts
···
···
1
+
import {AppBskyDraftCreateDraft, type AppBskyDraftDefs} from '@atproto/api'
2
+
import {
3
+
useInfiniteQuery,
4
+
useMutation,
5
+
useQueryClient,
6
+
} from '@tanstack/react-query'
7
+
8
+
import {isNetworkError} from '#/lib/strings/errors'
9
+
import {useAgent} from '#/state/session'
10
+
import {type ComposerState} from '#/view/com/composer/state/composer'
11
+
import {composerStateToDraft, draftViewToSummary} from './api'
12
+
import {logger} from './logger'
13
+
import * as storage from './storage'
14
+
15
+
const DRAFTS_QUERY_KEY = ['drafts']
16
+
17
+
/**
18
+
* Hook to list all drafts for the current account
19
+
*/
20
+
export function useDraftsQuery() {
21
+
const agent = useAgent()
22
+
23
+
return useInfiniteQuery({
24
+
queryKey: DRAFTS_QUERY_KEY,
25
+
queryFn: async ({pageParam}) => {
26
+
// Ensure media cache is populated before checking which media exists
27
+
await storage.ensureMediaCachePopulated()
28
+
const res = await agent.app.bsky.draft.getDrafts({cursor: pageParam})
29
+
return {
30
+
cursor: res.data.cursor,
31
+
drafts: res.data.drafts.map(view =>
32
+
draftViewToSummary(view, path => storage.mediaExists(path)),
33
+
),
34
+
}
35
+
},
36
+
initialPageParam: undefined as string | undefined,
37
+
getNextPageParam: page => page.cursor || undefined,
38
+
})
39
+
}
40
+
41
+
/**
42
+
* Load a draft's local media for editing.
43
+
* Takes the full Draft object (from DraftSummary) to avoid re-fetching.
44
+
*/
45
+
export async function loadDraft(draft: AppBskyDraftDefs.Draft): Promise<{
46
+
loadedMedia: Map<string, string>
47
+
}> {
48
+
// Load local media files
49
+
const loadedMedia = new Map<string, string>()
50
+
for (const post of draft.posts) {
51
+
// Load images
52
+
if (post.embedImages) {
53
+
for (const img of post.embedImages) {
54
+
try {
55
+
const url = await storage.loadMediaFromLocal(img.localRef.path)
56
+
loadedMedia.set(img.localRef.path, url)
57
+
} catch (e) {
58
+
logger.warn('Failed to load draft image', {
59
+
path: img.localRef.path,
60
+
error: e,
61
+
})
62
+
}
63
+
}
64
+
}
65
+
// Load videos
66
+
if (post.embedVideos) {
67
+
for (const vid of post.embedVideos) {
68
+
try {
69
+
const url = await storage.loadMediaFromLocal(vid.localRef.path)
70
+
loadedMedia.set(vid.localRef.path, url)
71
+
} catch (e) {
72
+
logger.warn('Failed to load draft video', {
73
+
path: vid.localRef.path,
74
+
error: e,
75
+
})
76
+
}
77
+
}
78
+
}
79
+
}
80
+
81
+
return {loadedMedia}
82
+
}
83
+
84
+
/**
85
+
* Hook to save a draft.
86
+
*
87
+
* IMPORTANT: Network operations happen first in mutationFn.
88
+
* Local storage operations (save new media, delete orphaned media) happen in onSuccess.
89
+
* This ensures we don't lose data if the network request fails.
90
+
*/
91
+
export function useSaveDraftMutation() {
92
+
const agent = useAgent()
93
+
const queryClient = useQueryClient()
94
+
95
+
return useMutation({
96
+
mutationFn: async ({
97
+
composerState,
98
+
existingDraftId,
99
+
}: {
100
+
composerState: ComposerState
101
+
existingDraftId?: string
102
+
}): Promise<{
103
+
draftId: string
104
+
localRefPaths: Map<string, string>
105
+
originalLocalRefs: Set<string> | undefined
106
+
}> => {
107
+
// Convert composer state to server draft format
108
+
const {draft, localRefPaths} = await composerStateToDraft(composerState)
109
+
110
+
logger.debug('saving draft', {
111
+
existingDraftId,
112
+
localRefPathCount: localRefPaths.size,
113
+
originalLocalRefCount: composerState.originalLocalRefs?.size ?? 0,
114
+
})
115
+
116
+
// 1. NETWORK FIRST - Update/create server draft
117
+
let draftId: string
118
+
if (existingDraftId) {
119
+
// Update existing draft
120
+
logger.debug('updating existing draft on server', {
121
+
draftId: existingDraftId,
122
+
})
123
+
await agent.app.bsky.draft.updateDraft({
124
+
draft: {
125
+
id: existingDraftId,
126
+
draft,
127
+
},
128
+
})
129
+
draftId = existingDraftId
130
+
} else {
131
+
// Create new draft
132
+
logger.debug('creating new draft on server')
133
+
const res = await agent.app.bsky.draft.createDraft({draft})
134
+
draftId = res.data.id
135
+
logger.debug('created new draft', {draftId})
136
+
}
137
+
138
+
// Return data needed for onSuccess
139
+
return {
140
+
draftId,
141
+
localRefPaths,
142
+
originalLocalRefs: composerState.originalLocalRefs,
143
+
}
144
+
},
145
+
onSuccess: async ({draftId, localRefPaths, originalLocalRefs}) => {
146
+
// 2. LOCAL STORAGE ONLY AFTER NETWORK SUCCEEDS
147
+
logger.debug('network save succeeded, processing local storage', {
148
+
draftId,
149
+
})
150
+
151
+
// Save new/changed media files
152
+
for (const [localRefPath, sourcePath] of localRefPaths) {
153
+
// Only save if this media doesn't already exist (reusing localRefPath)
154
+
if (!storage.mediaExists(localRefPath)) {
155
+
logger.debug('saving new media file', {localRefPath})
156
+
await storage.saveMediaToLocal(localRefPath, sourcePath)
157
+
} else {
158
+
logger.debug('skipping existing media file', {localRefPath})
159
+
}
160
+
}
161
+
162
+
// Delete orphaned media (old refs not in new)
163
+
if (originalLocalRefs) {
164
+
const newLocalRefs = new Set(localRefPaths.keys())
165
+
for (const oldRef of originalLocalRefs) {
166
+
if (!newLocalRefs.has(oldRef)) {
167
+
logger.debug('deleting orphaned media file', {
168
+
localRefPath: oldRef,
169
+
})
170
+
await storage.deleteMediaFromLocal(oldRef)
171
+
}
172
+
}
173
+
}
174
+
175
+
queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
176
+
},
177
+
onError: error => {
178
+
// Check for draft limit error
179
+
if (error instanceof AppBskyDraftCreateDraft.DraftLimitReachedError) {
180
+
logger.error('Draft limit reached', {safeMessage: error.message})
181
+
// Error will be handled by caller
182
+
} else if (!isNetworkError(error)) {
183
+
logger.error('Could not create draft (reason unknown)', {
184
+
safeMessage: error.message,
185
+
})
186
+
}
187
+
},
188
+
})
189
+
}
190
+
191
+
/**
192
+
* Hook to delete a draft.
193
+
* Takes the full draft data to avoid re-fetching for media cleanup.
194
+
*/
195
+
export function useDeleteDraftMutation() {
196
+
const agent = useAgent()
197
+
const queryClient = useQueryClient()
198
+
199
+
return useMutation({
200
+
mutationFn: async ({
201
+
draftId,
202
+
}: {
203
+
draftId: string
204
+
draft: AppBskyDraftDefs.Draft
205
+
}) => {
206
+
// Delete from server first - if this fails, we keep local media for retry
207
+
await agent.app.bsky.draft.deleteDraft({id: draftId})
208
+
},
209
+
onSuccess: async (_, {draft}) => {
210
+
// Only delete local media after server deletion succeeds
211
+
for (const post of draft.posts) {
212
+
if (post.embedImages) {
213
+
for (const img of post.embedImages) {
214
+
await storage.deleteMediaFromLocal(img.localRef.path)
215
+
}
216
+
}
217
+
if (post.embedVideos) {
218
+
for (const vid of post.embedVideos) {
219
+
await storage.deleteMediaFromLocal(vid.localRef.path)
220
+
}
221
+
}
222
+
}
223
+
queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
224
+
},
225
+
})
226
+
}
227
+
228
+
/**
229
+
* Hook to clean up a draft after it has been published.
230
+
* Deletes the draft from server and all associated local media.
231
+
* Takes draftId and originalLocalRefs from composer state.
232
+
*/
233
+
export function useCleanupPublishedDraftMutation() {
234
+
const agent = useAgent()
235
+
const queryClient = useQueryClient()
236
+
237
+
return useMutation({
238
+
mutationFn: async ({
239
+
draftId,
240
+
originalLocalRefs,
241
+
}: {
242
+
draftId: string
243
+
originalLocalRefs: Set<string>
244
+
}) => {
245
+
logger.debug('cleaning up published draft', {
246
+
draftId,
247
+
mediaFileCount: originalLocalRefs.size,
248
+
})
249
+
// Delete from server first
250
+
await agent.app.bsky.draft.deleteDraft({id: draftId})
251
+
logger.debug('deleted draft from server', {draftId})
252
+
},
253
+
onSuccess: async (_, {originalLocalRefs}) => {
254
+
// Delete all local media files for this draft
255
+
for (const localRef of originalLocalRefs) {
256
+
logger.debug('deleting media file after publish', {
257
+
localRefPath: localRef,
258
+
})
259
+
await storage.deleteMediaFromLocal(localRef)
260
+
}
261
+
queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
262
+
logger.debug('cleanup after publish complete')
263
+
},
264
+
onError: error => {
265
+
// Log but don't throw - the post was already published successfully
266
+
logger.warn('Failed to clean up published draft', {
267
+
safeMessage: error instanceof Error ? error.message : String(error),
268
+
})
269
+
},
270
+
})
271
+
}
+69
src/view/com/composer/drafts/state/schema.ts
+69
src/view/com/composer/drafts/state/schema.ts
···
···
1
+
/**
2
+
* Types for draft display and local media tracking.
3
+
* Server draft types come from @atproto/api.
4
+
*/
5
+
import {type AppBskyDraftDefs} from '@atproto/api'
6
+
7
+
/**
8
+
* Reference to locally cached media file for display
9
+
*/
10
+
export type LocalMediaDisplay = {
11
+
/** Path stored in server draft (used as key for local lookup) */
12
+
localPath: string
13
+
/** Alt text */
14
+
altText: string
15
+
/** Whether the local file exists on this device */
16
+
exists: boolean
17
+
}
18
+
19
+
/**
20
+
* GIF display data (parsed from external embed URL)
21
+
*/
22
+
export type GifDisplay = {
23
+
/** Full URL with dimensions */
24
+
url: string
25
+
/** Width */
26
+
width: number
27
+
/** Height */
28
+
height: number
29
+
/** Alt text */
30
+
alt: string
31
+
}
32
+
33
+
/**
34
+
* Post content for display in draft list
35
+
*/
36
+
export type DraftPostDisplay = {
37
+
id: string
38
+
/** Full text content */
39
+
text: string
40
+
/** Image references for display */
41
+
images?: LocalMediaDisplay[]
42
+
/** Video reference */
43
+
video?: LocalMediaDisplay
44
+
/** GIF data (from URL) */
45
+
gif?: GifDisplay
46
+
}
47
+
48
+
/**
49
+
* Draft summary for list display
50
+
*/
51
+
export type DraftSummary = {
52
+
id: string
53
+
/** The full draft data from the server */
54
+
draft: AppBskyDraftDefs.Draft
55
+
/** First ~100 chars of first post */
56
+
previewText: string
57
+
/** Whether the draft has media */
58
+
hasMedia: boolean
59
+
/** Whether some media is missing (saved on another device) */
60
+
hasMissingMedia?: boolean
61
+
/** Number of media items */
62
+
mediaCount: number
63
+
/** Number of posts in thread */
64
+
postCount: number
65
+
/** ISO timestamp of last update */
66
+
updatedAt: string
67
+
/** All posts in the draft for full display */
68
+
posts: DraftPostDisplay[]
69
+
}
+156
src/view/com/composer/drafts/state/storage.ts
+156
src/view/com/composer/drafts/state/storage.ts
···
···
1
+
/**
2
+
* Native file system storage for draft media.
3
+
* Media is stored by localRefPath key (unique identifier stored in server draft).
4
+
*/
5
+
import {Directory, File, Paths} from 'expo-file-system'
6
+
7
+
import {logger} from './logger'
8
+
9
+
const MEDIA_DIR = 'bsky-draft-media'
10
+
11
+
function getMediaDirectory(): Directory {
12
+
return new Directory(Paths.document, MEDIA_DIR)
13
+
}
14
+
15
+
function getMediaFile(localRefPath: string): File {
16
+
const safeFilename = encodeURIComponent(localRefPath)
17
+
return new File(getMediaDirectory(), safeFilename)
18
+
}
19
+
20
+
let dirCreated = false
21
+
22
+
/**
23
+
* Ensure the media directory exists
24
+
*/
25
+
function ensureDirectory(): void {
26
+
if (dirCreated) return
27
+
const dir = getMediaDirectory()
28
+
if (!dir.exists) {
29
+
dir.create()
30
+
}
31
+
dirCreated = true
32
+
}
33
+
34
+
/**
35
+
* Save a media file to local storage by localRefPath key
36
+
*/
37
+
export async function saveMediaToLocal(
38
+
localRefPath: string,
39
+
sourcePath: string,
40
+
): Promise<void> {
41
+
ensureDirectory()
42
+
43
+
const destFile = getMediaFile(localRefPath)
44
+
45
+
// Ensure source path has file:// prefix for expo-file-system
46
+
let normalizedSource = sourcePath
47
+
if (!sourcePath.startsWith('file://') && sourcePath.startsWith('/')) {
48
+
normalizedSource = `file://${sourcePath}`
49
+
}
50
+
51
+
try {
52
+
const sourceFile = new File(normalizedSource)
53
+
sourceFile.copy(destFile)
54
+
// Update cache after successful save
55
+
mediaExistsCache.set(localRefPath, true)
56
+
} catch (error) {
57
+
logger.error('Failed to save media to drafts storage', {
58
+
error,
59
+
localRefPath,
60
+
sourcePath: normalizedSource,
61
+
destPath: destFile.uri,
62
+
})
63
+
throw error
64
+
}
65
+
}
66
+
67
+
/**
68
+
* Load a media file path from local storage
69
+
* @returns The file URI for the saved media
70
+
*/
71
+
export async function loadMediaFromLocal(
72
+
localRefPath: string,
73
+
): Promise<string> {
74
+
const file = getMediaFile(localRefPath)
75
+
76
+
if (!file.exists) {
77
+
throw new Error(`Media file not found: ${localRefPath}`)
78
+
}
79
+
80
+
return file.uri
81
+
}
82
+
83
+
/**
84
+
* Delete a media file from local storage
85
+
*/
86
+
export async function deleteMediaFromLocal(
87
+
localRefPath: string,
88
+
): Promise<void> {
89
+
const file = getMediaFile(localRefPath)
90
+
// Idempotent: only delete if file exists
91
+
if (file.exists) {
92
+
file.delete()
93
+
}
94
+
}
95
+
96
+
/**
97
+
* Check if a media file exists in local storage (synchronous check using cache)
98
+
* Note: This uses a cached directory listing for performance
99
+
*/
100
+
const mediaExistsCache = new Map<string, boolean>()
101
+
let cachePopulated = false
102
+
103
+
export function mediaExists(localRefPath: string): boolean {
104
+
// For native, we need an async check but the API requires sync
105
+
// Use cached result if available, otherwise assume doesn't exist
106
+
if (mediaExistsCache.has(localRefPath)) {
107
+
return mediaExistsCache.get(localRefPath)!
108
+
}
109
+
// If cache not populated yet, trigger async population
110
+
if (!cachePopulated && !populateCachePromise) {
111
+
populateCachePromise = populateCacheInternal()
112
+
}
113
+
return false // Conservative: assume doesn't exist if not in cache
114
+
}
115
+
116
+
let populateCachePromise: Promise<void> | null = null
117
+
118
+
function populateCacheInternal(): Promise<void> {
119
+
return new Promise(resolve => {
120
+
try {
121
+
const dir = getMediaDirectory()
122
+
if (dir.exists) {
123
+
const items = dir.list()
124
+
for (const item of items) {
125
+
// Reverse the URL encoding to get the original localRefPath
126
+
const localRefPath = decodeURIComponent(item.name)
127
+
mediaExistsCache.set(localRefPath, true)
128
+
}
129
+
}
130
+
cachePopulated = true
131
+
} catch (e) {
132
+
logger.warn('Failed to populate media cache', {error: e})
133
+
}
134
+
resolve()
135
+
})
136
+
}
137
+
138
+
/**
139
+
* Ensure the media cache is populated. Call this before checking mediaExists.
140
+
*/
141
+
export async function ensureMediaCachePopulated(): Promise<void> {
142
+
if (cachePopulated) return
143
+
if (!populateCachePromise) {
144
+
populateCachePromise = populateCacheInternal()
145
+
}
146
+
await populateCachePromise
147
+
}
148
+
149
+
/**
150
+
* Clear the media exists cache (call when media is added/deleted)
151
+
*/
152
+
export function clearMediaCache(): void {
153
+
mediaExistsCache.clear()
154
+
cachePopulated = false
155
+
populateCachePromise = null
156
+
}
+170
src/view/com/composer/drafts/state/storage.web.ts
+170
src/view/com/composer/drafts/state/storage.web.ts
···
···
1
+
/**
2
+
* Web IndexedDB storage for draft media.
3
+
* Media is stored by localRefPath key (unique identifier stored in server draft).
4
+
*/
5
+
import {createStore, del, get, keys, set} from 'idb-keyval'
6
+
7
+
import {logger} from './logger'
8
+
9
+
const DB_NAME = 'bsky-draft-media'
10
+
const STORE_NAME = 'media'
11
+
12
+
type MediaRecord = {
13
+
blob: Blob
14
+
createdAt: string
15
+
}
16
+
17
+
const store = createStore(DB_NAME, STORE_NAME)
18
+
19
+
/**
20
+
* Convert a path/URL to a Blob
21
+
*/
22
+
async function toBlob(sourcePath: string): Promise<Blob> {
23
+
// Handle data URIs directly
24
+
if (sourcePath.startsWith('data:')) {
25
+
const response = await fetch(sourcePath)
26
+
return response.blob()
27
+
}
28
+
29
+
// Handle blob URLs
30
+
if (sourcePath.startsWith('blob:')) {
31
+
try {
32
+
const response = await fetch(sourcePath)
33
+
return response.blob()
34
+
} catch (e) {
35
+
logger.error('Failed to fetch blob URL - it may have been revoked', {
36
+
error: e,
37
+
sourcePath,
38
+
})
39
+
throw e
40
+
}
41
+
}
42
+
43
+
// Handle regular URLs
44
+
const response = await fetch(sourcePath)
45
+
if (!response.ok) {
46
+
throw new Error(`Failed to fetch media: ${response.status}`)
47
+
}
48
+
return response.blob()
49
+
}
50
+
51
+
/**
52
+
* Save a media file to IndexedDB by localRefPath key
53
+
*/
54
+
export async function saveMediaToLocal(
55
+
localRefPath: string,
56
+
sourcePath: string,
57
+
): Promise<void> {
58
+
let blob: Blob
59
+
try {
60
+
blob = await toBlob(sourcePath)
61
+
} catch (error) {
62
+
logger.error('Failed to convert source to blob', {
63
+
error,
64
+
localRefPath,
65
+
sourcePath,
66
+
})
67
+
throw error
68
+
}
69
+
70
+
try {
71
+
await set(
72
+
localRefPath,
73
+
{
74
+
blob,
75
+
createdAt: new Date().toISOString(),
76
+
},
77
+
store,
78
+
)
79
+
// Update cache
80
+
mediaExistsCache.set(localRefPath, true)
81
+
} catch (error) {
82
+
logger.error('Failed to save media to IndexedDB', {error, localRefPath})
83
+
throw error
84
+
}
85
+
}
86
+
87
+
/**
88
+
* Load a media file from IndexedDB
89
+
* @returns A blob URL for the saved media
90
+
*/
91
+
export async function loadMediaFromLocal(
92
+
localRefPath: string,
93
+
): Promise<string> {
94
+
const record = await get<MediaRecord>(localRefPath, store)
95
+
96
+
if (!record) {
97
+
throw new Error(`Media file not found: ${localRefPath}`)
98
+
}
99
+
100
+
return URL.createObjectURL(record.blob)
101
+
}
102
+
103
+
/**
104
+
* Delete a media file from IndexedDB
105
+
*/
106
+
export async function deleteMediaFromLocal(
107
+
localRefPath: string,
108
+
): Promise<void> {
109
+
await del(localRefPath, store)
110
+
mediaExistsCache.delete(localRefPath)
111
+
}
112
+
113
+
/**
114
+
* Check if a media file exists in IndexedDB (synchronous check using cache)
115
+
*/
116
+
const mediaExistsCache = new Map<string, boolean>()
117
+
let cachePopulated = false
118
+
let populateCachePromise: Promise<void> | null = null
119
+
120
+
export function mediaExists(localRefPath: string): boolean {
121
+
if (mediaExistsCache.has(localRefPath)) {
122
+
return mediaExistsCache.get(localRefPath)!
123
+
}
124
+
// If cache not populated yet, trigger async population
125
+
if (!cachePopulated && !populateCachePromise) {
126
+
populateCachePromise = populateCacheInternal()
127
+
}
128
+
return false // Conservative: assume doesn't exist if not in cache
129
+
}
130
+
131
+
async function populateCacheInternal(): Promise<void> {
132
+
try {
133
+
const allKeys = await keys(store)
134
+
for (const key of allKeys) {
135
+
mediaExistsCache.set(key as string, true)
136
+
}
137
+
cachePopulated = true
138
+
} catch (e) {
139
+
logger.warn('Failed to populate media cache', {error: e})
140
+
}
141
+
}
142
+
143
+
/**
144
+
* Ensure the media cache is populated. Call this before checking mediaExists.
145
+
*/
146
+
export async function ensureMediaCachePopulated(): Promise<void> {
147
+
if (cachePopulated) return
148
+
if (!populateCachePromise) {
149
+
populateCachePromise = populateCacheInternal()
150
+
}
151
+
await populateCachePromise
152
+
}
153
+
154
+
/**
155
+
* Clear the media exists cache (call when media is added/deleted)
156
+
*/
157
+
export function clearMediaCache(): void {
158
+
mediaExistsCache.clear()
159
+
cachePopulated = false
160
+
populateCachePromise = null
161
+
}
162
+
163
+
/**
164
+
* Revoke a blob URL when done with it (to prevent memory leaks)
165
+
*/
166
+
export function revokeMediaUrl(url: string): void {
167
+
if (url.startsWith('blob:')) {
168
+
URL.revokeObjectURL(url)
169
+
}
170
+
}
+6
-2
src/view/com/composer/labels/LabelsBtn.tsx
+6
-2
src/view/com/composer/labels/LabelsBtn.tsx
···
33
34
const updateAdultLabels = (newLabels: AdultSelfLabel[]) => {
35
const newLabel = newLabels[newLabels.length - 1]
36
-
const filtered = labels.filter(l => !ADULT_CONTENT_LABELS.includes(l))
37
onChange([
38
...new Set([...filtered, newLabel].filter(Boolean) as SelfLabel[]),
39
])
···
41
42
const updateOtherLabels = (newLabels: OtherSelfLabel[]) => {
43
const newLabel = newLabels[newLabels.length - 1]
44
-
const filtered = labels.filter(l => !OTHER_SELF_LABELS.includes(l))
45
onChange([
46
...new Set([...filtered, newLabel].filter(Boolean) as SelfLabel[]),
47
])
···
33
34
const updateAdultLabels = (newLabels: AdultSelfLabel[]) => {
35
const newLabel = newLabels[newLabels.length - 1]
36
+
const filtered = labels.filter(
37
+
l => !ADULT_CONTENT_LABELS.includes(l as AdultSelfLabel),
38
+
)
39
onChange([
40
...new Set([...filtered, newLabel].filter(Boolean) as SelfLabel[]),
41
])
···
43
44
const updateOtherLabels = (newLabels: OtherSelfLabel[]) => {
45
const newLabel = newLabels[newLabels.length - 1]
46
+
const filtered = labels.filter(
47
+
l => !OTHER_SELF_LABELS.includes(l as OtherSelfLabel),
48
+
)
49
onChange([
50
...new Set([...filtered, newLabel].filter(Boolean) as SelfLabel[]),
51
])
+87
-2
src/view/com/composer/state/composer.ts
+87
-2
src/view/com/composer/state/composer.ts
···
1
import {type ImagePickerAsset} from 'expo-image-picker'
2
import {
3
type AppBskyFeedPostgate,
4
AppBskyRichtextFacet,
5
-
type BskyPreferences,
6
RichText,
7
} from '@atproto/api'
8
import {nanoid} from 'nanoid/non-secure'
···
101
thread: ThreadDraft
102
activePostIndex: number
103
mutableNeedsFocusActive: boolean
104
}
105
106
export type ComposerAction =
···
122
type: 'focus_post'
123
postId: string
124
}
125
126
export const MAX_IMAGES = 4
127
···
133
case 'update_postgate': {
134
return {
135
...state,
136
thread: {
137
...state.thread,
138
postgate: action.postgate,
···
142
case 'update_threadgate': {
143
return {
144
...state,
145
thread: {
146
...state.thread,
147
threadgate: action.threadgate,
···
162
}
163
return {
164
...state,
165
thread: {
166
...state.thread,
167
posts: nextPosts,
···
184
})
185
return {
186
...state,
187
thread: {
188
...state.thread,
189
posts: nextPosts,
···
209
}
210
return {
211
...state,
212
activePostIndex: nextActivePostIndex,
213
mutableNeedsFocusActive: true,
214
thread: {
···
229
activePostIndex: nextActivePostIndex,
230
}
231
}
232
}
233
}
234
···
494
initImageUris: ComposerOpts['imageUris']
495
initQuoteUri: string | undefined
496
initInteractionSettings:
497
-
| BskyPreferences['postInteractionSettings']
498
| undefined
499
}): ComposerState {
500
let media: ImagesMedia | undefined
···
591
return {
592
activePostIndex: 0,
593
mutableNeedsFocusActive: false,
594
thread: {
595
posts: [
596
{
···
1
import {type ImagePickerAsset} from 'expo-image-picker'
2
import {
3
+
type AppBskyActorDefs,
4
+
type AppBskyDraftDefs,
5
type AppBskyFeedPostgate,
6
AppBskyRichtextFacet,
7
RichText,
8
} from '@atproto/api'
9
import {nanoid} from 'nanoid/non-secure'
···
102
thread: ThreadDraft
103
activePostIndex: number
104
mutableNeedsFocusActive: boolean
105
+
/** ID of the draft being edited, if any. Used to update existing draft on save. */
106
+
draftId?: string
107
+
/** Whether the composer has been modified since loading a draft. */
108
+
isDirty: boolean
109
+
/** Map of localId -> loaded media path/URL for the current draft. Used for re-saving without re-copying media. */
110
+
loadedMediaMap?: Map<string, string>
111
+
/** Set of original localRef paths from the draft being edited. Used to identify orphaned media on save. */
112
+
originalLocalRefs?: Set<string>
113
}
114
115
export type ComposerAction =
···
131
type: 'focus_post'
132
postId: string
133
}
134
+
| {
135
+
type: 'restore_from_draft'
136
+
draftId: string
137
+
posts: PostDraft[]
138
+
threadgateAllow: AppBskyDraftDefs.Draft['threadgateAllow']
139
+
postgateEmbeddingRules: AppBskyDraftDefs.Draft['postgateEmbeddingRules']
140
+
141
+
/** Map of localRefPath -> loaded media path/URL */
142
+
loadedMedia: Map<string, string>
143
+
/** Set of original localRef paths from the draft. Used to identify orphaned media on save. */
144
+
originalLocalRefs: Set<string>
145
+
}
146
+
| {
147
+
type: 'clear'
148
+
initInteractionSettings:
149
+
| AppBskyActorDefs.PostInteractionSettingsPref
150
+
| undefined
151
+
}
152
+
| {
153
+
type: 'mark_saved'
154
+
draftId: string
155
+
}
156
157
export const MAX_IMAGES = 4
158
···
164
case 'update_postgate': {
165
return {
166
...state,
167
+
isDirty: true,
168
thread: {
169
...state.thread,
170
postgate: action.postgate,
···
174
case 'update_threadgate': {
175
return {
176
...state,
177
+
isDirty: true,
178
thread: {
179
...state.thread,
180
threadgate: action.threadgate,
···
195
}
196
return {
197
...state,
198
+
isDirty: true,
199
thread: {
200
...state.thread,
201
posts: nextPosts,
···
218
})
219
return {
220
...state,
221
+
isDirty: true,
222
thread: {
223
...state.thread,
224
posts: nextPosts,
···
244
}
245
return {
246
...state,
247
+
isDirty: true,
248
activePostIndex: nextActivePostIndex,
249
mutableNeedsFocusActive: true,
250
thread: {
···
265
activePostIndex: nextActivePostIndex,
266
}
267
}
268
+
case 'restore_from_draft': {
269
+
const {
270
+
draftId,
271
+
posts,
272
+
threadgateAllow,
273
+
postgateEmbeddingRules,
274
+
loadedMedia,
275
+
originalLocalRefs,
276
+
} = action
277
+
278
+
return {
279
+
activePostIndex: 0,
280
+
mutableNeedsFocusActive: true,
281
+
draftId,
282
+
isDirty: false,
283
+
loadedMediaMap: loadedMedia,
284
+
originalLocalRefs,
285
+
thread: {
286
+
posts,
287
+
postgate: createPostgateRecord({
288
+
post: '',
289
+
embeddingRules: postgateEmbeddingRules,
290
+
}),
291
+
threadgate: threadgateRecordToAllowUISetting({
292
+
$type: 'app.bsky.feed.threadgate',
293
+
post: '',
294
+
createdAt: new Date().toString(),
295
+
allow: threadgateAllow,
296
+
}),
297
+
},
298
+
}
299
+
}
300
+
case 'clear': {
301
+
return createComposerState({
302
+
initText: undefined,
303
+
initMention: undefined,
304
+
initImageUris: [],
305
+
initQuoteUri: undefined,
306
+
initInteractionSettings: action.initInteractionSettings,
307
+
})
308
+
}
309
+
case 'mark_saved': {
310
+
return {
311
+
...state,
312
+
isDirty: false,
313
+
draftId: action.draftId,
314
+
}
315
+
}
316
}
317
}
318
···
578
initImageUris: ComposerOpts['imageUris']
579
initQuoteUri: string | undefined
580
initInteractionSettings:
581
+
| AppBskyActorDefs.PostInteractionSettingsPref
582
| undefined
583
}): ComposerState {
584
let media: ImagesMedia | undefined
···
675
return {
676
activePostIndex: 0,
677
mutableNeedsFocusActive: false,
678
+
isDirty: false,
679
thread: {
680
posts: [
681
{
+22
-2
src/view/com/composer/videos/pickVideo.ts
+22
-2
src/view/com/composer/videos/pickVideo.ts
···
1
import {
2
type ImagePickerAsset,
3
launchImageLibraryAsync,
···
5
} from 'expo-image-picker'
6
7
import {VIDEO_MAX_DURATION_MS} from '#/lib/constants'
8
9
export async function pickVideo() {
10
return await launchImageLibraryAsync({
···
18
})
19
}
20
21
-
export const getVideoMetadata = (_file: File): Promise<ImagePickerAsset> => {
22
-
throw new Error('getVideoMetadata is web only')
23
}
···
1
+
import {getVideoMetaData} from 'react-native-compressor'
2
import {
3
type ImagePickerAsset,
4
launchImageLibraryAsync,
···
6
} from 'expo-image-picker'
7
8
import {VIDEO_MAX_DURATION_MS} from '#/lib/constants'
9
+
import {extToMime} from '#/lib/media/video/util'
10
11
export async function pickVideo() {
12
return await launchImageLibraryAsync({
···
20
})
21
}
22
23
+
/**
24
+
* Gets video metadata from a file or uri, depending on the platform
25
+
*
26
+
* @param file File on web, uri on native
27
+
*/
28
+
export async function getVideoMetadata(
29
+
file: File | string,
30
+
): Promise<ImagePickerAsset> {
31
+
if (typeof file !== 'string')
32
+
throw new Error(
33
+
'getVideoMetadata was passed a File, when on native it should be a uri',
34
+
)
35
+
const metadata = await getVideoMetaData(file)
36
+
return {
37
+
uri: file,
38
+
mimeType: extToMime(metadata.extension),
39
+
width: metadata.width,
40
+
height: metadata.height,
41
+
duration: metadata.duration,
42
+
}
43
}
+7
-1
src/view/com/composer/videos/pickVideo.web.ts
+7
-1
src/view/com/composer/videos/pickVideo.web.ts
···
39
// lets us use the ImagePickerAsset type, which the rest of the code expects.
40
// We should unwind this and just pass the ArrayBuffer/objectUrl through the system
41
// instead of a string -sfn
42
-
export const getVideoMetadata = (file: File): Promise<ImagePickerAsset> => {
43
return new Promise((resolve, reject) => {
44
const reader = new FileReader()
45
reader.onload = () => {
···
39
// lets us use the ImagePickerAsset type, which the rest of the code expects.
40
// We should unwind this and just pass the ArrayBuffer/objectUrl through the system
41
// instead of a string -sfn
42
+
export function getVideoMetadata(
43
+
file: File | string,
44
+
): Promise<ImagePickerAsset> {
45
+
if (typeof file === 'string')
46
+
throw new Error(
47
+
'getVideoMetadata was passed a uri, when on web it should be a File',
48
+
)
49
return new Promise((resolve, reject) => {
50
const reader = new FileReader()
51
reader.onload = () => {
+2
-1
src/view/com/util/EmptyState.tsx
+2
-1
src/view/com/util/EmptyState.tsx
···
95
a.leading_snug,
96
a.text_center,
97
a.self_center,
98
+
!button && a.mb_5xl,
99
textStyle,
100
]}>
101
{message}
102
</Text>
103
{button && (
104
+
<View style={[a.flex_shrink, a.mt_xl, a.self_center, a.mb_5xl]}>
105
<Button {...button}>
106
<ButtonText>{button.text}</ButtonText>
107
</Button>
+1
-3
src/view/com/util/fab/FABInner.tsx
+1
-3
src/view/com/util/fab/FABInner.tsx
···
12
import {useHaptics} from '#/lib/haptics'
13
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
14
import {clamp} from '#/lib/numbers'
15
-
import {ios, useBreakpoints, useTheme} from '#/alf'
16
-
import {atoms as a} from '#/alf'
17
import {IS_WEB} from '#/env'
18
19
export interface FABProps extends ComponentProps<typeof Pressable> {
···
61
{backgroundColor: t.palette.primary_500},
62
a.align_center,
63
a.justify_center,
64
-
a.shadow_sm,
65
style,
66
]}
67
{...props}>
···
12
import {useHaptics} from '#/lib/haptics'
13
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
14
import {clamp} from '#/lib/numbers'
15
+
import {atoms as a, ios, useBreakpoints, useTheme} from '#/alf'
16
import {IS_WEB} from '#/env'
17
18
export interface FABProps extends ComponentProps<typeof Pressable> {
···
60
{backgroundColor: t.palette.primary_500},
61
a.align_center,
62
a.justify_center,
63
style,
64
]}
65
{...props}>
+5
yarn.lock
+5
yarn.lock
···
11687
ignore "^5.3.1"
11688
resolve-from "^5.0.0"
11689
11690
+
expo-video-thumbnails@^10.0.8:
11691
+
version "10.0.8"
11692
+
resolved "https://registry.yarnpkg.com/expo-video-thumbnails/-/expo-video-thumbnails-10.0.8.tgz#a6313cea8e58dd0d5041d389a4fe4fa182eab176"
11693
+
integrity sha512-nPUtP7ERLf5DY5V2A6gquRP5rP3Uvq6+FVkDwG9R3KKhFeTYkWZ5Ce1iQ7Yt5qDNQqcUcgEqmRpGCbJmn9ckKA==
11694
+
11695
expo-video@~3.0.15:
11696
version "3.0.15"
11697
resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-3.0.15.tgz#38921dab5bc877572b64728acb58097716239aa7"