added video download button (#31) · bas.sh/witchsky.app@2a4eb5c

+22

src/lib/media/manip.ts

··· 21 import {logger} from '#/logger' 22 import {isAndroid, isIOS} from '#/platform/detection' 23 import {Dimensions} from './types' 24 25 export async function compressIfNeeded( 26 img: Image, ··· 142 // save 143 await MediaLibrary.createAssetAsync(imagePath) 144 safeDeleteAsync(imagePath) 145 } 146 147 export function getImageDim(path: string): Promise<Dimensions> {

··· 21 import {logger} from '#/logger' 22 import {isAndroid, isIOS} from '#/platform/detection' 23 import {Dimensions} from './types' 24 + import {mimeToExt} from './video/util' 25 26 export async function compressIfNeeded( 27 img: Image, ··· 143 // save 144 await MediaLibrary.createAssetAsync(imagePath) 145 safeDeleteAsync(imagePath) 146 + } 147 + 148 + export async function saveVideoToMediaLibrary({uri}: {uri: string}) { 149 + // download the file to cache 150 + const downloadResponse = await RNFetchBlob.config({ 151 + fileCache: true, 152 + }) 153 + .fetch('GET', uri) 154 + .catch(() => null) 155 + if (downloadResponse == null) return false 156 + let videoPath = downloadResponse.path() 157 + let extension = mimeToExt(downloadResponse.respInfo.headers['content-type']) 158 + videoPath = normalizePath( 159 + await moveToPermanentPath(videoPath, '.' + extension), 160 + true, 161 + ) 162 + 163 + // save 164 + await MediaLibrary.createAssetAsync(videoPath) 165 + safeDeleteAsync(videoPath) 166 + return true 167 } 168 169 export function getImageDim(path: string): Promise<Dimensions> {

+17

src/lib/media/manip.web.ts

··· 2 3 import {Dimensions} from './types' 4 import {blobToDataUri, getDataUriSize} from './util' 5 6 export async function compressIfNeeded( 7 img: RNImage, ··· 46 export async function saveImageToAlbum(_opts: {uri: string; album: string}) { 47 // TODO 48 throw new Error('TODO') 49 } 50 51 export async function getImageDim(path: string): Promise<Dimensions> {

··· 2 3 import {Dimensions} from './types' 4 import {blobToDataUri, getDataUriSize} from './util' 5 + import {mimeToExt} from './video/util' 6 7 export async function compressIfNeeded( 8 img: RNImage, ··· 47 export async function saveImageToAlbum(_opts: {uri: string; album: string}) { 48 // TODO 49 throw new Error('TODO') 50 + } 51 + 52 + export async function downloadVideoWeb({uri}: {uri: string}) { 53 + // download the file to cache 54 + const downloadResponse = await fetch(uri) 55 + .then(res => res.blob()) 56 + .catch(() => null) 57 + if (downloadResponse == null) return false 58 + const extension = mimeToExt(downloadResponse.type) 59 + 60 + const blobUrl = URL.createObjectURL(downloadResponse) 61 + const link = document.createElement('a') 62 + link.setAttribute('download', uri.slice(-10) + '.' + extension) 63 + link.setAttribute('href', blobUrl) 64 + link.click() 65 + return true 66 } 67 68 export async function getImageDim(path: string): Promise<Dimensions> {

+74

src/view/com/util/forms/PostDropdownBtnMenuItems.tsx

··· 7 } from 'react-native' 8 import * as Clipboard from 'expo-clipboard' 9 import { 10 type AppBskyFeedDefs, 11 AppBskyFeedPost, 12 type AppBskyFeedThreadgate, ··· 18 import {useNavigation} from '@react-navigation/native' 19 20 import {useOpenLink} from '#/lib/hooks/useOpenLink' 21 import {getCurrentRoute} from '#/lib/routes/helpers' 22 import {makeProfileLink} from '#/lib/routes/links' 23 import { ··· 64 import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble' 65 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' 66 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets' 67 import { 68 EmojiSad_Stroke2_Corner0_Rounded as EmojiSad, 69 EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile, ··· 386 }) 387 }, [isPinned, pinPostMutate, postCid, postUri]) 388 389 const onBlockAuthor = useCallback(async () => { 390 try { 391 await queueBlock() ··· 454 icon={isPinPending ? Loader : PinIcon} 455 position="right" 456 /> 457 </Menu.Item> 458 </Menu.Group> 459 <Menu.Divider />

··· 7 } from 'react-native' 8 import * as Clipboard from 'expo-clipboard' 9 import { 10 + type AppBskyEmbedExternal, 11 + type AppBskyEmbedVideo, 12 type AppBskyFeedDefs, 13 AppBskyFeedPost, 14 type AppBskyFeedThreadgate, ··· 20 import {useNavigation} from '@react-navigation/native' 21 22 import {useOpenLink} from '#/lib/hooks/useOpenLink' 23 + import {saveVideoToMediaLibrary} from '#/lib/media/manip' 24 + import {downloadVideoWeb} from '#/lib/media/manip.web' 25 import {getCurrentRoute} from '#/lib/routes/helpers' 26 import {makeProfileLink} from '#/lib/routes/links' 27 import { ··· 68 import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble' 69 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' 70 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets' 71 + import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/Download' 72 import { 73 EmojiSad_Stroke2_Corner0_Rounded as EmojiSad, 74 EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile, ··· 391 }) 392 }, [isPinned, pinPostMutate, postCid, postUri]) 393 394 + const onPressDownloadVideo = useCallback(async () => { 395 + if (post.embed?.$type !== 'app.bsky.embed.video#view') return 396 + const video = post.embed as AppBskyEmbedVideo.View 397 + const did = post.author.did 398 + const cid = video.cid 399 + const uri = `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}` 400 + 401 + Toast.show('Downloading video...', 'download') 402 + 403 + let success 404 + if (isWeb) success = await downloadVideoWeb({uri: uri}) 405 + else success = await saveVideoToMediaLibrary({uri: uri}) 406 + 407 + if (success) Toast.show('Video downloaded', 'check') 408 + else Toast.show('Failed to download video', 'xmark') 409 + }, [post]) 410 + 411 + const onPressDownloadGif = useCallback(async () => { 412 + if (post.embed?.$type !== 'app.bsky.embed.external#view') return 413 + const media = post.embed as AppBskyEmbedExternal.View 414 + 415 + Toast.show('Downloading GIF...', 'download') 416 + 417 + let success 418 + if (isWeb) success = await downloadVideoWeb({uri: media.external.uri}) 419 + else success = await saveVideoToMediaLibrary({uri: media.external.uri}) 420 + 421 + if (success) Toast.show('GIF downloaded', 'check') 422 + else Toast.show('Failed to download GIF', 'xmark') 423 + }, [post]) 424 + 425 + const isEmbedGif = useCallback(() => { 426 + if (post.embed?.$type !== 'app.bsky.embed.external#view') return false 427 + const embed = post.embed as AppBskyEmbedExternal.View 428 + // Janky workaround by checking if the domain is tenor.com 429 + const url = new URL(embed.external.uri) 430 + return url.host == 'media.tenor.com' 431 + }, [post]) 432 + 433 const onBlockAuthor = useCallback(async () => { 434 try { 435 await queueBlock() ··· 498 icon={isPinPending ? Loader : PinIcon} 499 position="right" 500 /> 501 + </Menu.Item> 502 + </Menu.Group> 503 + <Menu.Divider /> 504 + </> 505 + )} 506 + 507 + {post.embed?.$type === 'app.bsky.embed.video#view' && ( 508 + <> 509 + <Menu.Group> 510 + <Menu.Item 511 + testID="postDropdownDownloadVideoBtn" 512 + label={_(msg`Download Video`)} 513 + onPress={onPressDownloadVideo}> 514 + <Menu.ItemText>{_(msg`Download Video`)}</Menu.ItemText> 515 + <Menu.ItemIcon icon={Download} position="right" /> 516 + </Menu.Item> 517 + </Menu.Group> 518 + <Menu.Divider /> 519 + </> 520 + )} 521 + 522 + {isEmbedGif() && ( 523 + <> 524 + <Menu.Group> 525 + <Menu.Item 526 + testID="postDropdownDownloadGifBtn" 527 + label={_(msg`Download GIF`)} 528 + onPress={onPressDownloadGif}> 529 + <Menu.ItemText>{_(msg`Download GIF`)}</Menu.ItemText> 530 + <Menu.ItemIcon icon={Download} position="right" /> 531 </Menu.Item> 532 </Menu.Group> 533 <Menu.Divider />