Add “download image” option to web, simplify downloads (#10025)

+14 -7

src/lib/media/manip.ts

··· 22 22 import {IS_ANDROID, IS_IOS} from '#/env' 23 23 import {type PickerImage} from './picker.shared' 24 24 import {type Dimensions} from './types' 25 + import {convertCdnPreset} from './util' 25 26 26 27 export async function compressIfNeeded( 27 28 img: PickerImage, ··· 94 95 95 96 const ALBUM_NAME = 'Bluesky' 96 97 98 + /** 99 + * Saves an image to the user's device. Uses the CDN's `download` preset 100 + * which uses the JPEG version with the Content-Disposition header set to 101 + * `attachment; filename=<filename>`. On native this saves to the media library; 102 + * on web it triggers a browser download. 103 + */ 97 104 export async function saveImageToMediaLibrary({uri}: {uri: string}) { 98 - const downloadedPath = await downloadImage(uri, String(uuid.v4()), 15e3) 99 - const {uri: jpegUri} = await manipulateAsync(downloadedPath, [], { 100 - format: SaveFormat.JPEG, 101 - compress: 1.0, 102 - }) 103 - void safeDeleteAsync(downloadedPath) 104 - const imagePath = await moveToPermanentPath(jpegUri, '.jpg') 105 + const downloadUri = convertCdnPreset(uri, 'download') 106 + const downloadedPath = await downloadImage( 107 + downloadUri, 108 + String(uuid.v4()), 109 + 20e3, 110 + ) 111 + const imagePath = await moveToPermanentPath(downloadedPath, '.jpg') 105 112 106 113 // save 107 114 try {

+17 -8

src/lib/media/manip.web.ts

··· 1 - /// <reference lib="dom" /> 2 - 3 1 import {type PickerImage} from './picker.shared' 4 2 import {type Dimensions} from './types' 5 - import {blobToDataUri, getDataUriSize} from './util' 3 + import {blobToDataUri, convertCdnPreset, getDataUriSize} from './util' 6 4 7 5 export async function compressIfNeeded( 8 6 img: PickerImage, ··· 44 42 throw new Error('TODO') 45 43 } 46 44 47 - export async function saveImageToMediaLibrary(_opts: {uri: string}) { 48 - // TODO 49 - throw new Error('TODO') 45 + /** 46 + * Saves an image to the user's device. Uses the CDN's `download` preset 47 + * which uses the JPEG version with the Content-Disposition header set to 48 + * `attachment; filename=<filename>`. On native this saves to the media library; 49 + * on web it triggers a browser download. 50 + */ 51 + export async function saveImageToMediaLibrary({uri}: {uri: string}) { 52 + const downloadUri = convertCdnPreset(uri, 'download') 53 + const segments = downloadUri.split('/') 54 + const filename = `bluesky-${segments.at(-1)}.jpg` 55 + downloadUrl(downloadUri, filename) 50 56 } 51 57 52 58 export async function getImageDim(path: string): Promise<Dimensions> { ··· 162 168 ) { 163 169 const blob = new Blob([bytes], {type}) 164 170 const url = URL.createObjectURL(blob) 165 - await downloadUrl(url, filename) 171 + downloadUrl(url, filename) 166 172 // Firefox requires a small delay 167 173 setTimeout(() => URL.revokeObjectURL(url), 100) 168 174 return true 169 175 } 170 176 171 - async function downloadUrl(href: string, filename: string) { 177 + function downloadUrl(href: string, filename: string) { 172 178 const a = document.createElement('a') 173 179 a.href = href 174 180 a.download = filename 181 + a.style.display = 'none' 182 + document.body.appendChild(a) 175 183 a.click() 184 + document.body.removeChild(a) 176 185 } 177 186 178 187 export async function safeDeleteAsync() {

+19

src/lib/media/util.ts

··· 26 26 reader.readAsDataURL(blob) 27 27 }) 28 28 } 29 + 30 + export type ImgproxyPreset = 31 + | 'default' 32 + | 'avatar_thumbnail' 33 + | 'avatar' 34 + | 'banner' 35 + | 'feed_fullsize' 36 + | 'feed_thumbnail' 37 + | 'download' 38 + 39 + const IMGPROXY_PRESET_RE = 40 + /(?<=\/img\/)(default|avatar_thumbnail|avatar|banner|feed_fullsize|feed_thumbnail|download)(?=\/)/ 41 + 42 + /** 43 + * Replaces any imgproxy preset in a CDN URI with the given preset. 44 + */ 45 + export function convertCdnPreset(uri: string, preset: ImgproxyPreset): string { 46 + return uri.replace(IMGPROXY_PRESET_RE, preset) 47 + }

+56

src/view/com/lightbox/Lightbox.web.tsx

············

+2 -3

src/view/com/util/UserAvatar.tsx

··· 24 24 import {compressIfNeeded} from '#/lib/media/manip' 25 25 import {openCamera, openCropper, openPicker} from '#/lib/media/picker' 26 26 import {type PickerImage} from '#/lib/media/picker.shared' 27 + import {convertCdnPreset} from '#/lib/media/util' 27 28 import {makeProfileLink} from '#/lib/routes/links' 28 29 import {sanitizeDisplayName} from '#/lib/strings/display-names' 29 30 import {isCancelledError} from '#/lib/strings/errors' ··· 616 617 // manually string-replace to use the smaller ones 617 618 // -prf 618 619 function hackModifyThumbnailPath(uri: string, isEnabled: boolean): string { 619 - return isEnabled 620 - ? uri.replace('/img/avatar/plain/', '/img/avatar_thumbnail/plain/') 621 - : uri 620 + return isEnabled ? convertCdnPreset(uri, 'avatar_thumbnail') : uri 622 621 } 623 622 624 623 const styles = StyleSheet.create({

Configure Feed

Configure Feed