From 91853ed538ddd1be0ec8cd22ec3799b343be8f9f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 23 Sep 2024 20:30:34 +0100 Subject: [PATCH 01/15] [Video] Flush low quality segments once focused (#5430) * Update VideoEmbedInnerWeb.tsx * keep proper track and flush properly * consistent current * use current in listener * manually loop --- .../VideoEmbedInner/VideoEmbedInnerWeb.tsx | 77 +++++++++++++++++-- 1 file changed, 69 insertions(+), 8 deletions(-) diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx index fa577fb509..82b2503eb1 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useId, useRef, useState} from 'react' import {View} from 'react-native' import {AppBskyEmbedVideo} from '@atproto/api' -import Hls from 'hls.js' +import Hls, {Events, FragChangedData, Fragment} from 'hls.js' import {atoms as a} from '#/alf' import {MediaInsetBorder} from '#/components/MediaInsetBorder' @@ -19,7 +19,7 @@ export function VideoEmbedInnerWeb({ onScreen: boolean }) { const containerRef = useRef(null) - const ref = useRef(null) + const videoRef = useRef(null) const [focused, setFocused] = useState(false) const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false) const figId = useId() @@ -31,13 +31,13 @@ export function VideoEmbedInnerWeb({ } const hlsRef = useRef(undefined) + const [lowQualityFragments, setLowQualityFragments] = useState([]) useEffect(() => { - if (!ref.current) return + if (!videoRef.current) return if (!Hls.isSupported()) throw new HLSUnsupportedError() const hls = new Hls({ - capLevelToPlayerSize: true, maxMaxBufferLength: 10, // only load 10s ahead // note: the amount buffered is affected by both maxBufferLength and maxBufferSize // it will buffer until it it's greater than *both* of those values @@ -45,18 +45,36 @@ export function VideoEmbedInnerWeb({ }) hlsRef.current = hls - hls.attachMedia(ref.current) + hls.attachMedia(videoRef.current) hls.loadSource(embed.playlist) // initial value, later on it's managed by Controls hls.autoLevelCapping = 0 + // manually loop, so if we've flushed the first buffer it doesn't get confused + const abortController = new AbortController() + const {signal} = abortController + videoRef.current.addEventListener( + 'ended', + function () { + this.currentTime = 0 + this.play() + }, + {signal}, + ) + hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_event, data) => { if (data.subtitleTracks.length > 0) { setHasSubtitleTrack(true) } }) + hls.on(Hls.Events.FRAG_BUFFERED, (_event, {frag}) => { + if (frag.level === 0) { + setLowQualityFragments(prev => [...prev, frag]) + } + }) + hls.on(Hls.Events.ERROR, (_event, data) => { if (data.fatal) { if ( @@ -67,6 +85,8 @@ export function VideoEmbedInnerWeb({ } else { setError(data.error) } + } else { + console.error(data.error) } }) @@ -74,20 +94,61 @@ export function VideoEmbedInnerWeb({ hlsRef.current = undefined hls.detachMedia() hls.destroy() + abortController.abort() } }, [embed.playlist]) + // purge low quality segments from buffer on next frag change + useEffect(() => { + if (!hlsRef.current) return + + const current = hlsRef.current + + if (focused) { + function fragChanged( + _event: Events.FRAG_CHANGED, + {frag}: FragChangedData, + ) { + // if the current quality level goes above 0, flush the low quality segments + if (current.nextAutoLevel > 0) { + const flushed: Fragment[] = [] + + for (const lowQualFrag of lowQualityFragments) { + // avoid if close to the current fragment + if (Math.abs(frag.start - lowQualFrag.start) < 0.1) { + return + } + + current.trigger(Hls.Events.BUFFER_FLUSHING, { + startOffset: lowQualFrag.start, + endOffset: lowQualFrag.end, + type: 'video', + }) + + flushed.push(lowQualFrag) + } + + setLowQualityFragments(prev => prev.filter(f => !flushed.includes(f))) + } + } + current.on(Hls.Events.FRAG_CHANGED, fragChanged) + + return () => { + current.off(Hls.Events.FRAG_CHANGED, fragChanged) + } + } + }, [focused, lowQualityFragments]) + return (
Date: Mon, 23 Sep 2024 21:05:23 +0100 Subject: [PATCH 02/15] add sideborders to (#4995) --- src/view/screens/Profile.tsx | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 5ef6459810..879632e9ef 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -16,9 +16,18 @@ import { useQueryClient, } from '@tanstack/react-query' +import {useAnalytics} from '#/lib/analytics/analytics' +import {useSetTitle} from '#/lib/hooks/useSetTitle' +import {ComposeIcon2} from '#/lib/icons' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {combinedDisplayName} from '#/lib/strings/display-names' import {cleanError} from '#/lib/strings/errors' +import {isInvalidHandle} from '#/lib/strings/handles' +import {colors, s} from '#/lib/styles' import {useProfileShadow} from '#/state/cache/profile-shadow' +import {listenSoftReset} from '#/state/events' import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {useActorStarterPacksQuery} from '#/state/queries/actor-starter-packs' import {useLabelerInfoQuery} from '#/state/queries/labeler' import {resetProfilePostsQueries} from '#/state/queries/post-feed' import {useProfileQuery} from '#/state/queries/profile' @@ -26,29 +35,21 @@ import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {useAgent, useSession} from '#/state/session' import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' -import {useAnalytics} from 'lib/analytics/analytics' -import {useSetTitle} from 'lib/hooks/useSetTitle' -import {ComposeIcon2} from 'lib/icons' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {combinedDisplayName} from 'lib/strings/display-names' -import {isInvalidHandle} from 'lib/strings/handles' -import {colors, s} from 'lib/styles' -import {listenSoftReset} from 'state/events' -import {useActorStarterPacksQuery} from 'state/queries/actor-starter-packs' +import {ProfileFeedgens} from '#/view/com/feeds/ProfileFeedgens' +import {ProfileLists} from '#/view/com/lists/ProfileLists' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {FAB} from '#/view/com/util/fab/FAB' +import {ListRef} from '#/view/com/util/List' +import {CenteredView} from '#/view/com/util/Views' import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' +import {web} from '#/alf' import {ScreenHider} from '#/components/moderation/ScreenHider' import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks' import {navigate} from '#/Navigation' import {ExpoScrollForwarderView} from '../../../modules/expo-scroll-forwarder' -import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens' -import {ProfileLists} from '../com/lists/ProfileLists' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {FAB} from '../com/util/fab/FAB' -import {ListRef} from '../com/util/List' -import {CenteredView} from '../com/util/Views' interface SectionRef { scrollToTop: () => void @@ -107,7 +108,7 @@ export function ProfileScreen({route}: Props) { // Most pushes will happen here, since we will have only placeholder data if (isLoadingDid || isLoadingProfile || starterPacksQuery.isLoading) { return ( - + ) From b77031a074161f8c6cd7e666db324eea81a38af1 Mon Sep 17 00:00:00 2001 From: Hailey Date: Mon, 23 Sep 2024 13:06:22 -0700 Subject: [PATCH 03/15] invert the fab animation, play a haptic (#4309) --- src/lib/haptics.ts | 24 +++++++++++--------- src/view/com/util/fab/FABInner.tsx | 36 +++++++++++++++++++++++++----- 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/src/lib/haptics.ts b/src/lib/haptics.ts index 02940f793d..390b76a0e7 100644 --- a/src/lib/haptics.ts +++ b/src/lib/haptics.ts @@ -4,17 +4,21 @@ import {impactAsync, ImpactFeedbackStyle} from 'expo-haptics' import {isIOS, isWeb} from 'platform/detection' import {useHapticsDisabled} from 'state/preferences/disable-haptics' -const hapticImpact: ImpactFeedbackStyle = isIOS - ? ImpactFeedbackStyle.Medium - : ImpactFeedbackStyle.Light // Users said the medium impact was too strong on Android; see APP-537s - export function useHaptics() { const isHapticsDisabled = useHapticsDisabled() - return React.useCallback(() => { - if (isHapticsDisabled || isWeb) { - return - } - impactAsync(hapticImpact) - }, [isHapticsDisabled]) + return React.useCallback( + (strength: 'Light' | 'Medium' | 'Heavy' = 'Medium') => { + if (isHapticsDisabled || isWeb) { + return + } + + // Users said the medium impact was too strong on Android; see APP-537s + const style = isIOS + ? ImpactFeedbackStyle[strength] + : ImpactFeedbackStyle.Light + impactAsync(style) + }, + [isHapticsDisabled], + ) } diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index ee8e1f47a2..d1675b428c 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -1,6 +1,10 @@ import React, {ComponentProps} from 'react' import {StyleSheet, TouchableWithoutFeedback} from 'react-native' -import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated' +import Animated, { + Easing, + useAnimatedStyle, + withTiming, +} from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {LinearGradient} from 'expo-linear-gradient' @@ -9,6 +13,8 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {clamp} from '#/lib/numbers' import {gradients} from '#/lib/styles' import {isWeb} from '#/platform/detection' +import {useHaptics} from 'lib/haptics' +import {useHapticsDisabled} from 'state/preferences' import {useInteractionState} from '#/components/hooks/useInteractionState' export interface FABProps @@ -17,15 +23,17 @@ export interface FABProps icon: JSX.Element } -export function FABInner({testID, icon, ...props}: FABProps) { +export function FABInner({testID, icon, onPress, ...props}: FABProps) { const insets = useSafeAreaInsets() const {isMobile, isTablet} = useWebMediaQueries() const fabMinimalShellTransform = useMinimalShellFabTransform() const { - state: pressed, + state: isPressed, onIn: onPressIn, onOut: onPressOut, } = useInteractionState() + const playHaptic = useHaptics() + const isHapticsDisabled = useHapticsDisabled() const size = isTablet ? styles.sizeLarge : styles.sizeRegular @@ -33,13 +41,29 @@ export function FABInner({testID, icon, ...props}: FABProps) { ? {right: 50, bottom: 50} : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15} - const scale = useAnimatedStyle(() => ({ - transform: [{scale: withTiming(pressed ? 0.95 : 1)}], + const animatedStyle = useAnimatedStyle(() => ({ + transform: [ + { + scale: withTiming(isPressed ? 1.1 : 1, { + duration: 250, + easing: Easing.out(Easing.quad), + }), + }, + ], })) return ( { + playHaptic() + setTimeout( + () => { + onPress?.(e) + }, + isHapticsDisabled ? 0 : 75, + ) + }} onPressIn={onPressIn} onPressOut={onPressOut} {...props}> @@ -50,7 +74,7 @@ export function FABInner({testID, icon, ...props}: FABProps) { tabletSpacing, isMobile && fabMinimalShellTransform, ]}> - + Date: Mon, 23 Sep 2024 15:21:32 -0500 Subject: [PATCH 04/15] Fix web splash (#5456) * Fix web splash * Untangle base styles * Fix id name, remove log --- bskyweb/templates/base.html | 49 ++++++++++++++- src/style.css | 122 ++++++++++++------------------------ web/index.html | 49 ++++++++++++++- 3 files changed, 135 insertions(+), 85 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index eaa31aa4a3..03686ef5c4 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -32,6 +32,53 @@ --> + + {% include "scripts.html" %} @@ -48,7 +95,7 @@ {%- block body_all %}
-
+
diff --git a/src/style.css b/src/style.css index ebb0471584..980d92ef77 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,11 @@ +/** + * IMPORTANT + * + * Some of these styles are duplicated in the `web/index.html` and + * `bskyweb/templates/base.html` files. Depending on what you're updating, you + * may need to touch all three. Ask Eric if you aren't sure. + */ + @font-face { font-family: 'Inter-Regular'; src: local('Inter-Regular'), @@ -96,46 +104,43 @@ */ /** - * Extend the react-native-web reset: - * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js + * BEGIN STYLES + * + * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html` */ -html, -body, -#root { - width: 100%; - /* To smooth any scrolling behavior */ - -webkit-overflow-scrolling: touch; - margin: 0px; - padding: 0px; - /* Allows content to fill the viewport and go beyond the bottom */ - min-height: 100%; +:root { + --text: black; + --background: white; + --backgroundLight: hsl(211, 20%, 95%); } -#root { - flex-shrink: 0; - flex-basis: auto; - flex-grow: 1; - display: flex; - flex: 1; +@media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --text: white; + --background: black; + --backgroundLight: hsl(211, 20%, 20%); + } } -html { - /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ - -webkit-text-size-adjust: 100%; - height: calc(100% + env(safe-area-inset-top)); - scrollbar-gutter: stable both-edges; +html.theme--light { + --text: black; + --background: white; + --backgroundLight: hsl(211, 20%, 95%); + background-color: white; } -html, -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Liberation Sans', Helvetica, Arial, sans-serif; +html.theme--dark { + color-scheme: dark; + background-color: black; + --text: white; + --background: black; + --backgroundLight: hsl(211, 20%, 20%); } - -#preload { - width: 100px; - position: fixed; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); +html.theme--dim { + color-scheme: dark; + background-color: hsl(211, 28%, 12%); + --text: white; + --background: hsl(211, 20%, 4%); + --backgroundLight: hsl(211, 20%, 10%); } /* Buttons and inputs have a font set by UA, so we'll have to reset that */ @@ -146,42 +151,6 @@ textarea { line-height: inherit; } -/* Color theming */ -/* Default will always be white */ -:root { - --text: black; - --background: white; - --backgroundLight: hsl(211, 20%, 95%); -} -/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */ -@media (prefers-color-scheme: dark) { - :root { - --text: white; - --background: black; - --backgroundLight: hsl(211, 20%, 20%); - color-scheme: dark; - } -} - -/* Overwrite those preferences with the selected theme */ -html.theme--light { - --text: black; - --background: white; - --backgroundLight: hsl(211, 20%, 95%); -} -html.theme--dark { - --text: white; - --background: black; - --backgroundLight: hsl(211, 20%, 20%); - color-scheme: dark; -} -html.theme--dim { - --text: white; - --background: hsl(211, 20%, 4%); - --backgroundLight: hsl(211, 20%, 10%); - color-scheme: dark; -} - /* Remove autofill styles on Webkit */ input:autofill, input:-webkit-autofill, @@ -200,19 +169,6 @@ input::-webkit-date-and-time-value { text-align: left; } -body { - display: flex; - /* Allows you to scroll below the viewport; default value is visible */ - overflow-y: auto; - overscroll-behavior-y: none; - text-rendering: optimizeLegibility; - background-color: var(--background); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -ms-overflow-style: scrollbar; - font-synthesis-weight: none; -} - /* Remove default link styling */ a { color: inherit; diff --git a/web/index.html b/web/index.html index 512178327f..71e5ac0892 100644 --- a/web/index.html +++ b/web/index.html @@ -36,6 +36,53 @@ --> + + @@ -90,7 +137,7 @@
-
+
From e93cbbd56a70ab3fd44866009400c7b3df24286b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 23 Sep 2024 16:34:59 -0500 Subject: [PATCH 05/15] Don't use flex on inputs (#5458) --- src/components/dialogs/Embed.tsx | 22 ++++++++++++---------- src/components/forms/TextField.tsx | 4 ++-- src/view/screens/Storybook/Forms.tsx | 21 +++++++++++++++++++++ src/view/screens/Storybook/index.tsx | 10 +++++----- 4 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx index 73ecf6616b..ca75b01390 100644 --- a/src/components/dialogs/Embed.tsx +++ b/src/components/dialogs/Embed.tsx @@ -106,16 +106,18 @@ function EmbedDialogInner({ - - - - + + + + + + + + - + - @@ -93,16 +92,17 @@ function StorybookInner() { + - + - ) - })} - - {!isMobile ? ( - - Transformations - - ) : null} - - {adjustments.map(({label, icon, onPress}) => ( - - ))} - - - - - - Accessibility - - setAltText(enforceLen(text, MAX_ALT_TEXT))} - accessibilityLabel={_(msg`Alt text`)} - accessibilityHint="" - accessibilityLabelledBy="alt-text" - /> - - - - - Cancel - - - - - - Done - - - - - - ) -}) - -const styles = StyleSheet.create({ - container: { - gap: 18, - height: '100%', - width: '100%', - }, - subsection: {marginTop: 12}, - gap18: {gap: 18}, - title: { - fontWeight: '600', - fontSize: 24, - }, - btns: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - }, - btn: { - borderRadius: 4, - paddingVertical: 8, - paddingHorizontal: 24, - }, - imgEditor: { - maxWidth: '100%', - }, - imgContainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - borderWidth: 1, - borderStyle: 'solid', - marginBottom: 4, - }, - flipVertical: { - transform: [{rotate: '90deg'}], - }, - flipBtn: { - paddingHorizontal: 4, - paddingVertical: 8, - }, - textArea: { - borderWidth: 1, - borderRadius: 6, - paddingTop: 10, - paddingHorizontal: 12, - fontSize: 16, - height: 100, - textAlignVertical: 'top', - }, - bottomSection: { - borderTopWidth: 1, - paddingTop: 18, - }, -}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 3455e1cdf8..fd881ebc4b 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -9,7 +9,6 @@ import {FullWindowOverlay} from '#/components/FullWindowOverlay' import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' import * as AddAppPassword from './AddAppPasswords' import * as AltImageModal from './AltImage' -import * as EditImageModal from './AltImage' import * as ChangeEmailModal from './ChangeEmail' import * as ChangeHandleModal from './ChangeHandle' import * as ChangePasswordModal from './ChangePassword' @@ -78,9 +77,6 @@ export function ModalsContainer() { } else if (activeModal?.name === 'alt-text-image') { snapPoints = AltImageModal.snapPoints element = - } else if (activeModal?.name === 'edit-image') { - snapPoints = AltImageModal.snapPoints - element = } else if (activeModal?.name === 'change-handle') { snapPoints = ChangeHandleModal.snapPoints element = diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index c4bab6fb18..fe24695d2c 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -15,7 +15,6 @@ import * as ChangePasswordModal from './ChangePassword' import * as CreateOrEditListModal from './CreateOrEditList' import * as CropImageModal from './crop-image/CropImage.web' import * as DeleteAccountModal from './DeleteAccount' -import * as EditImageModal from './EditImage' import * as EditProfileModal from './EditProfile' import * as InviteCodesModal from './InviteCodes' import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' @@ -54,11 +53,7 @@ function Modal({modal}: {modal: ModalIface}) { } const onPressMask = () => { - if ( - modal.name === 'crop-image' || - modal.name === 'edit-image' || - modal.name === 'alt-text-image' - ) { + if (modal.name === 'crop-image' || modal.name === 'alt-text-image') { return // dont close on mask presses during crop } closeModal() @@ -95,8 +90,6 @@ function Modal({modal}: {modal: ModalIface}) { element = } else if (modal.name === 'alt-text-image') { element = - } else if (modal.name === 'edit-image') { - element = } else if (modal.name === 'verify-email') { element = } else if (modal.name === 'change-email') { diff --git a/src/view/shell/Composer.ios.tsx b/src/view/shell/Composer.ios.tsx index 7d3780801a..bbb837f1fe 100644 --- a/src/view/shell/Composer.ios.tsx +++ b/src/view/shell/Composer.ios.tsx @@ -2,16 +2,13 @@ import React, {useLayoutEffect} from 'react' import {Modal, View} from 'react-native' import {StatusBar} from 'expo-status-bar' import * as SystemUI from 'expo-system-ui' -import {observer} from 'mobx-react-lite' import {useComposerState} from '#/state/shell/composer' import {atoms as a, useTheme} from '#/alf' import {getBackgroundColor, useThemeName} from '#/alf/util/useColorModeTheme' import {ComposePost, useComposerCancelRef} from '../com/composer/Composer' -export const Composer = observer(function ComposerImpl({}: { - winHeight: number -}) { +export function Composer({}: {winHeight: number}) { const t = useTheme() const state = useComposerState() const ref = useComposerCancelRef() @@ -42,7 +39,7 @@ export const Composer = observer(function ComposerImpl({}: { ) -}) +} function Providers({ children, diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx index 1c97df9c39..049f35d35d 100644 --- a/src/view/shell/Composer.tsx +++ b/src/view/shell/Composer.tsx @@ -1,17 +1,12 @@ import React, {useEffect} from 'react' import {Animated, Easing, StyleSheet, View} from 'react-native' -import {observer} from 'mobx-react-lite' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {usePalette} from 'lib/hooks/usePalette' -import {useComposerState} from 'state/shell/composer' +import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue' +import {usePalette} from '#/lib/hooks/usePalette' +import {useComposerState} from '#/state/shell/composer' import {ComposePost} from '../com/composer/Composer' -export const Composer = observer(function ComposerImpl({ - winHeight, -}: { - winHeight: number -}) { +export function Composer({winHeight}: {winHeight: number}) { const state = useComposerState() const pal = usePalette('default') const initInterp = useAnimatedValue(0) @@ -62,7 +57,7 @@ export const Composer = observer(function ComposerImpl({ /> ) -}) +} const styles = StyleSheet.create({ wrapper: { diff --git a/yarn.lock b/yarn.lock index 65b24915dc..860b49daec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16760,21 +16760,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mobx-react-lite@^3.4.0: - version "3.4.3" - resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz#3a4c22c30bfaa8b1b2aa48d12b2ba811c0947ab7" - integrity sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg== - -mobx-utils@^6.0.6: - version "6.0.8" - resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-6.0.8.tgz#843e222c7694050c2e42842682fd24a84fdb7024" - integrity sha512-fPNt0vJnHwbQx9MojJFEnJLfM3EMGTtpy4/qOOW6xueh1mPofMajrbYAUvByMYAvCJnpy1A5L0t+ZVB5niKO4g== - -mobx@^6.6.1: - version "6.10.0" - resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.10.0.tgz#3537680fe98d45232cc19cc8f76280bd8bb6b0b7" - integrity sha512-WMbVpCMFtolbB8swQ5E2YRrU+Yu8iLozCVx3CdGjbBKlP7dFiCSuiG06uea3JCFN5DnvtAX7+G5Bp82e2xu0ww== - moo@^0.5.1: version "0.5.2" resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c" From ed512d6dc5390555232bb4ac3f96f477751c33b1 Mon Sep 17 00:00:00 2001 From: Mary <148872143+mary-ext@users.noreply.github.com> Date: Tue, 24 Sep 2024 23:21:06 +0700 Subject: [PATCH 12/15] Revamp edit image alt text dialog (#5461) * revamp alt dialog * readd the limit check don't trim with enforceLen, it ruins copy-pasting long text and it's overall annoying behavior * Update src/view/com/composer/photos/ImageAltTextDialog.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --- src/state/modals/index.tsx | 8 - src/view/com/composer/photos/Gallery.tsx | 14 +- .../composer/photos/ImageAltTextDialog.tsx | 121 +++++++++++ src/view/com/modals/AltImage.tsx | 189 ------------------ src/view/com/modals/Modal.tsx | 6 +- src/view/com/modals/Modal.web.tsx | 9 +- 6 files changed, 136 insertions(+), 211 deletions(-) create mode 100644 src/view/com/composer/photos/ImageAltTextDialog.tsx delete mode 100644 src/view/com/modals/AltImage.tsx diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 467853a258..9bc96cf5e4 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -3,7 +3,6 @@ import {Image as RNImage} from 'react-native-image-crop-picker' import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {ComposerImage} from '../gallery' export interface EditProfileModal { name: 'edit-profile' @@ -43,12 +42,6 @@ export interface CropImageModal { onSelect: (img?: RNImage) => void } -export interface AltTextImageModal { - name: 'alt-text-image' - image: ComposerImage - onChange: (next: ComposerImage) => void -} - export interface DeleteAccountModal { name: 'delete-account' } @@ -131,7 +124,6 @@ export type Modal = | ListAddRemoveUsersModal // Posts - | AltTextImageModal | CropImageModal | SelfLabelModal diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 775413e817..83c1e3c809 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -18,9 +18,10 @@ import {Dimensions} from '#/lib/media/types' import {colors, s} from '#/lib/styles' import {isNative} from '#/platform/detection' import {ComposerImage, cropImage} from '#/state/gallery' -import {useModalControls} from '#/state/modals' import {Text} from '#/view/com/util/text/Text' import {useTheme} from '#/alf' +import * as Dialog from '#/components/Dialog' +import {ImageAltTextDialog} from './ImageAltTextDialog' const IMAGE_GAP = 8 @@ -141,7 +142,8 @@ const GalleryItem = ({ }: GalleryItemProps): React.ReactNode => { const {_} = useLingui() const t = useTheme() - const {openModal} = useModalControls() + + const altTextControl = Dialog.useDialogControl() const onImageEdit = () => { if (isNative) { @@ -153,7 +155,7 @@ const GalleryItem = ({ const onAltTextEdit = () => { Keyboard.dismiss() - openModal({name: 'alt-text-image', image, onChange}) + altTextControl.open() } return ( @@ -229,6 +231,12 @@ const GalleryItem = ({ accessible={true} accessibilityIgnoresInvertColors /> + + ) } diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx new file mode 100644 index 0000000000..123e1066a5 --- /dev/null +++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx @@ -0,0 +1,121 @@ +import React from 'react' +import {ImageStyle, useWindowDimensions, View} from 'react-native' +import {Image} from 'expo-image' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {MAX_ALT_TEXT} from '#/lib/constants' +import {isWeb} from '#/platform/detection' +import {ComposerImage} from '#/state/gallery' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import * as TextField from '#/components/forms/TextField' +import {Text} from '#/components/Typography' + +type Props = { + control: Dialog.DialogOuterProps['control'] + image: ComposerImage + onChange: (next: ComposerImage) => void +} + +export const ImageAltTextDialog = (props: Props): React.ReactNode => { + return ( + + + + + + ) +} + +const ImageAltTextInner = ({ + control, + image, + onChange, +}: Props): React.ReactNode => { + const {_} = useLingui() + const t = useTheme() + + const windim = useWindowDimensions() + + const [altText, setAltText] = React.useState(image.alt) + + const onPressSubmit = React.useCallback(() => { + control.close() + onChange({...image, alt: altText.trim()}) + }, [control, image, altText, onChange]) + + const imageStyle = React.useMemo(() => { + const maxWidth = isWeb ? 450 : windim.width + const source = image.transformed ?? image.source + + if (source.height > source.width) { + return { + resizeMode: 'contain', + width: '100%', + aspectRatio: 1, + borderRadius: 8, + } + } + return { + width: '100%', + height: (maxWidth / source.width) * source.height, + borderRadius: 8, + } + }, [image, windim]) + + return ( + + + + + + Add alt text + + + + + + + + + + + Descriptive alt text + + + setAltText(text)} + value={altText} + multiline + numberOfLines={3} + autoFocus + /> + + + + + + ) +} diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx deleted file mode 100644 index c711f73a57..0000000000 --- a/src/view/com/modals/AltImage.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import React, {useCallback, useMemo, useState} from 'react' -import { - ImageStyle, - ScrollView as RNScrollView, - StyleSheet, - TextInput as RNTextInput, - TouchableOpacity, - useWindowDimensions, - View, -} from 'react-native' -import {Image} from 'expo-image' -import {LinearGradient} from 'expo-linear-gradient' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {ComposerImage} from '#/state/gallery' -import {useModalControls} from '#/state/modals' -import {MAX_ALT_TEXT} from 'lib/constants' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {usePalette} from 'lib/hooks/usePalette' -import {enforceLen} from 'lib/strings/helpers' -import {gradients, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isAndroid, isWeb} from 'platform/detection' -import {Text} from '../util/text/Text' -import {ScrollView, TextInput} from './util' - -export const snapPoints = ['100%'] - -interface Props { - image: ComposerImage - onChange: (next: ComposerImage) => void -} - -export function Component({image, onChange}: Props) { - const pal = usePalette('default') - const theme = useTheme() - const {_} = useLingui() - const [altText, setAltText] = useState(image.alt) - const windim = useWindowDimensions() - const {closeModal} = useModalControls() - const inputRef = React.useRef(null) - const scrollViewRef = React.useRef(null) - const keyboardShown = useIsKeyboardVisible() - - // Autofocus hack when we open the modal. We have to wait for the animation to complete first - React.useEffect(() => { - if (isAndroid) return - setTimeout(() => { - inputRef.current?.focus() - }, 500) - }, []) - - // We'd rather be at the bottom here so that we can easily dismiss the modal instead of having to scroll - // (especially on android, it acts weird) - React.useEffect(() => { - if (keyboardShown[0]) { - scrollViewRef.current?.scrollToEnd() - } - }, [keyboardShown]) - - const imageStyles = useMemo(() => { - const maxWidth = isWeb ? 450 : windim.width - const media = image.transformed ?? image.source - if (media.height > media.width) { - return { - resizeMode: 'contain', - width: '100%', - aspectRatio: 1, - borderRadius: 8, - } - } - return { - width: '100%', - height: (maxWidth / media.width) * media.height, - borderRadius: 8, - } - }, [image, windim]) - - const onUpdate = useCallback( - (v: string) => { - v = enforceLen(v, MAX_ALT_TEXT) - setAltText(v) - }, - [setAltText], - ) - - const onPressSave = useCallback(() => { - onChange({ - ...image, - alt: altText, - }) - - closeModal() - }, [closeModal, image, altText, onChange]) - - return ( - - - - - - - - - - - Done - - - - - - - ) -} - -const styles = StyleSheet.create({ - scrollContainer: { - flex: 1, - height: '100%', - paddingHorizontal: isWeb ? 0 : 12, - paddingVertical: isWeb ? 0 : 24, - }, - scrollInner: { - gap: 12, - paddingTop: isWeb ? 0 : 12, - }, - imageContainer: { - borderRadius: 8, - }, - textArea: { - borderWidth: 1, - borderRadius: 6, - paddingTop: 10, - paddingHorizontal: 12, - fontSize: 16, - height: 100, - textAlignVertical: 'top', - }, - button: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - borderRadius: 32, - padding: 10, - }, - buttonControls: { - gap: 8, - paddingBottom: isWeb ? 0 : 50, - }, -}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index fd881ebc4b..90e93821c5 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -3,12 +3,11 @@ import {StyleSheet} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' import BottomSheet from '@discord/bottom-sheet/src' +import {usePalette} from '#/lib/hooks/usePalette' import {useModalControls, useModals} from '#/state/modals' -import {usePalette} from 'lib/hooks/usePalette' import {FullWindowOverlay} from '#/components/FullWindowOverlay' import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' import * as AddAppPassword from './AddAppPasswords' -import * as AltImageModal from './AltImage' import * as ChangeEmailModal from './ChangeEmail' import * as ChangeHandleModal from './ChangeHandle' import * as ChangePasswordModal from './ChangePassword' @@ -74,9 +73,6 @@ export function ModalsContainer() { } else if (activeModal?.name === 'self-label') { snapPoints = SelfLabelModal.snapPoints element = - } else if (activeModal?.name === 'alt-text-image') { - snapPoints = AltImageModal.snapPoints - element = } else if (activeModal?.name === 'change-handle') { snapPoints = ChangeHandleModal.snapPoints element = diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index fe24695d2c..c1024751f8 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -2,13 +2,12 @@ import React from 'react' import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' +import {usePalette} from '#/lib/hooks/usePalette' import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import type {Modal as ModalIface} from '#/state/modals' import {useModalControls, useModals} from '#/state/modals' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import * as AddAppPassword from './AddAppPasswords' -import * as AltTextImageModal from './AltImage' import * as ChangeEmailModal from './ChangeEmail' import * as ChangeHandleModal from './ChangeHandle' import * as ChangePasswordModal from './ChangePassword' @@ -53,7 +52,7 @@ function Modal({modal}: {modal: ModalIface}) { } const onPressMask = () => { - if (modal.name === 'crop-image' || modal.name === 'alt-text-image') { + if (modal.name === 'crop-image') { return // dont close on mask presses during crop } closeModal() @@ -88,8 +87,6 @@ function Modal({modal}: {modal: ModalIface}) { element = } else if (modal.name === 'post-languages-settings') { element = - } else if (modal.name === 'alt-text-image') { - element = } else if (modal.name === 'verify-email') { element = } else if (modal.name === 'change-email') { From b9516202fa17325a3d54e54372ddd56149be129c Mon Sep 17 00:00:00 2001 From: Mary <148872143+mary-ext@users.noreply.github.com> Date: Tue, 24 Sep 2024 23:27:40 +0700 Subject: [PATCH 13/15] Revamp image editor (#5462) * new image editor * Rm react-avatar-editor --------- Co-authored-by: Dan Abramov --- package.json | 3 +- src/lib/media/picker.web.tsx | 4 +- src/lib/media/types.ts | 5 +- src/state/modals/index.tsx | 2 + .../com/composer/photos/EditImageDialog.tsx | 14 ++ .../composer/photos/EditImageDialog.web.tsx | 105 ++++++++ src/view/com/composer/photos/Gallery.tsx | 34 +-- src/view/com/modals/CropImage.web.tsx | 145 +++++++++++ src/view/com/modals/Modal.web.tsx | 2 +- .../com/modals/crop-image/CropImage.web.tsx | 228 ------------------ .../com/modals/crop-image/cropImageUtil.ts | 13 - src/view/com/util/UserAvatar.tsx | 18 +- src/view/com/util/UserBanner.tsx | 15 +- yarn.lock | 23 +- 14 files changed, 318 insertions(+), 293 deletions(-) create mode 100644 src/view/com/composer/photos/EditImageDialog.tsx create mode 100644 src/view/com/composer/photos/EditImageDialog.web.tsx create mode 100644 src/view/com/modals/CropImage.web.tsx delete mode 100644 src/view/com/modals/crop-image/CropImage.web.tsx delete mode 100644 src/view/com/modals/crop-image/cropImageUtil.ts diff --git a/package.json b/package.json index 117fc0b190..e1c0f99d8e 100644 --- a/package.json +++ b/package.json @@ -167,9 +167,9 @@ "postinstall-postinstall": "^2.1.0", "psl": "^1.9.0", "react": "18.2.0", - "react-avatar-editor": "^13.0.0", "react-compiler-runtime": "file:./lib/react-compiler-runtime", "react-dom": "^18.2.0", + "react-image-crop": "^11.0.7", "react-keyed-flatten-children": "^3.0.0", "react-native": "0.74.1", "react-native-compressor": "^1.8.24", @@ -236,7 +236,6 @@ "@types/lodash.set": "^4.3.7", "@types/lodash.shuffle": "^4.2.7", "@types/psl": "^1.1.1", - "@types/react-avatar-editor": "^13.0.0", "@types/react-dom": "^18.2.18", "@types/react-responsive": "^8.0.5", "@types/react-test-renderer": "^17.0.1", diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx index 8782e14570..a53ffc9614 100644 --- a/src/lib/media/picker.web.tsx +++ b/src/lib/media/picker.web.tsx @@ -18,9 +18,11 @@ export async function openCropper(opts: CropperOptions): Promise { name: 'crop-image', uri: opts.path, dimensions: - opts.height && opts.width + opts.width && opts.height ? {width: opts.width, height: opts.height} : undefined, + aspect: opts.webAspectRatio, + circular: opts.webCircularCrop, onSelect: (img?: RNImage) => { if (img) { resolve(img) diff --git a/src/lib/media/types.ts b/src/lib/media/types.ts index e6f442759f..ec94256ea1 100644 --- a/src/lib/media/types.ts +++ b/src/lib/media/types.ts @@ -18,4 +18,7 @@ export interface CameraOpts { cropperCircleOverlay?: boolean } -export type CropperOptions = Parameters[0] +export type CropperOptions = Parameters[0] & { + webAspectRatio?: number + webCircularCrop?: boolean +} diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 9bc96cf5e4..5be21dfd39 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -39,6 +39,8 @@ export interface CropImageModal { name: 'crop-image' uri: string dimensions?: {width: number; height: number} + aspect?: number + circular?: boolean onSelect: (img?: RNImage) => void } diff --git a/src/view/com/composer/photos/EditImageDialog.tsx b/src/view/com/composer/photos/EditImageDialog.tsx new file mode 100644 index 0000000000..4263587fd4 --- /dev/null +++ b/src/view/com/composer/photos/EditImageDialog.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import {ComposerImage} from '#/state/gallery' +import * as Dialog from '#/components/Dialog' + +export type EditImageDialogProps = { + control: Dialog.DialogOuterProps['control'] + image: ComposerImage + onChange: (next: ComposerImage) => void +} + +export const EditImageDialog = ({}: EditImageDialogProps): React.ReactNode => { + return null +} diff --git a/src/view/com/composer/photos/EditImageDialog.web.tsx b/src/view/com/composer/photos/EditImageDialog.web.tsx new file mode 100644 index 0000000000..0afb83ed96 --- /dev/null +++ b/src/view/com/composer/photos/EditImageDialog.web.tsx @@ -0,0 +1,105 @@ +import 'react-image-crop/dist/ReactCrop.css' + +import React from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import ReactCrop, {PercentCrop} from 'react-image-crop' + +import { + ImageSource, + ImageTransformation, + manipulateImage, +} from '#/state/gallery' +import {atoms as a} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {Text} from '#/components/Typography' +import {EditImageDialogProps} from './EditImageDialog' + +export const EditImageDialog = (props: EditImageDialogProps) => { + return ( + + + + ) +} + +const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => { + const {_} = useLingui() + + const source = image.source + + const initialCrop = getInitialCrop(source, image.manips) + const [crop, setCrop] = React.useState(initialCrop) + + const isEmpty = !crop || (crop.width || crop.height) === 0 + const isNew = initialCrop ? true : !isEmpty + + const onPressSubmit = React.useCallback(async () => { + const result = await manipulateImage(image, { + crop: + crop && (crop.width || crop.height) !== 0 + ? { + originX: (crop.x * source.width) / 100, + originY: (crop.y * source.height) / 100, + width: (crop.width * source.width) / 100, + height: (crop.height * source.height) / 100, + } + : undefined, + }) + + onChange(result) + control.close() + }, [crop, image, source, control, onChange]) + + return ( + + + + + Edit image + + + + setCrop(percentCrop)} + className="ReactCrop--no-animate"> + + + + + + + + + ) +} + +const getInitialCrop = ( + source: ImageSource, + manips: ImageTransformation | undefined, +): PercentCrop | undefined => { + const initialArea = manips?.crop + + if (initialArea) { + return { + unit: '%', + x: (initialArea.originX / source.width) * 100, + y: (initialArea.originY / source.height) * 100, + width: (initialArea.width / source.width) * 100, + height: (initialArea.height / source.height) * 100, + } + } +} diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 83c1e3c809..369f08d745 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -21,6 +21,7 @@ import {ComposerImage, cropImage} from '#/state/gallery' import {Text} from '#/view/com/util/text/Text' import {useTheme} from '#/alf' import * as Dialog from '#/components/Dialog' +import {EditImageDialog} from './EditImageDialog' import {ImageAltTextDialog} from './ImageAltTextDialog' const IMAGE_GAP = 8 @@ -144,12 +145,15 @@ const GalleryItem = ({ const t = useTheme() const altTextControl = Dialog.useDialogControl() + const editControl = Dialog.useDialogControl() const onImageEdit = () => { if (isNative) { cropImage(image).then(next => { onChange(next) }) + } else { + editControl.open() } } @@ -185,21 +189,15 @@ const GalleryItem = ({ - {isNative && ( - - - - )} + + + + + ) } diff --git a/src/view/com/modals/CropImage.web.tsx b/src/view/com/modals/CropImage.web.tsx new file mode 100644 index 0000000000..41ca306573 --- /dev/null +++ b/src/view/com/modals/CropImage.web.tsx @@ -0,0 +1,145 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {Image as RNImage} from 'react-native-image-crop-picker' +import {manipulateAsync, SaveFormat} from 'expo-image-manipulator' +import {LinearGradient} from 'expo-linear-gradient' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import ReactCrop, {PercentCrop} from 'react-image-crop' + +import {usePalette} from '#/lib/hooks/usePalette' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {getDataUriSize} from '#/lib/media/util' +import {gradients, s} from '#/lib/styles' +import {useModalControls} from '#/state/modals' +import {Text} from '#/view/com/util/text/Text' + +export const snapPoints = ['0%'] + +export function Component({ + uri, + aspect, + circular, + onSelect, +}: { + uri: string + aspect?: number + circular?: boolean + onSelect: (img?: RNImage) => void +}) { + const pal = usePalette('default') + const {_} = useLingui() + + const {closeModal} = useModalControls() + const {isMobile} = useWebMediaQueries() + + const imageRef = React.useRef(null) + const [crop, setCrop] = React.useState() + + const isEmpty = !crop || (crop.width || crop.height) === 0 + + const onPressCancel = () => { + onSelect(undefined) + closeModal() + } + const onPressDone = async () => { + const img = imageRef.current! + + const result = await manipulateAsync( + uri, + isEmpty + ? [] + : [ + { + crop: { + originX: (crop.x * img.naturalWidth) / 100, + originY: (crop.y * img.naturalHeight) / 100, + width: (crop.width * img.naturalWidth) / 100, + height: (crop.height * img.naturalHeight) / 100, + }, + }, + ], + { + base64: true, + format: SaveFormat.JPEG, + }, + ) + + onSelect({ + path: result.uri, + mime: 'image/jpeg', + size: result.base64 !== undefined ? getDataUriSize(result.base64) : 0, + width: result.width, + height: result.height, + }) + + closeModal() + } + + return ( + + + setCrop(percentCrop)} + circularCrop={circular}> + + + + + + + Cancel + + + + + + + Done + + + + + + ) +} + +const styles = StyleSheet.create({ + cropper: { + marginLeft: 'auto', + marginRight: 'auto', + borderWidth: 1, + borderRadius: 4, + overflow: 'hidden', + alignItems: 'center', + }, + ctrls: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 10, + }, + btns: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 10, + }, + btn: { + borderRadius: 4, + paddingVertical: 8, + paddingHorizontal: 24, + }, +}) diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index c1024751f8..a2acc23bb9 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -12,7 +12,7 @@ import * as ChangeEmailModal from './ChangeEmail' import * as ChangeHandleModal from './ChangeHandle' import * as ChangePasswordModal from './ChangePassword' import * as CreateOrEditListModal from './CreateOrEditList' -import * as CropImageModal from './crop-image/CropImage.web' +import * as CropImageModal from './CropImage.web' import * as DeleteAccountModal from './DeleteAccount' import * as EditProfileModal from './EditProfile' import * as InviteCodesModal from './InviteCodes' diff --git a/src/view/com/modals/crop-image/CropImage.web.tsx b/src/view/com/modals/crop-image/CropImage.web.tsx deleted file mode 100644 index 10cae2f174..0000000000 --- a/src/view/com/modals/crop-image/CropImage.web.tsx +++ /dev/null @@ -1,228 +0,0 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {Image as RNImage} from 'react-native-image-crop-picker' -import {LinearGradient} from 'expo-linear-gradient' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Slider} from '@miblanchard/react-native-slider' -import ImageEditor from 'react-avatar-editor' - -import {useModalControls} from '#/state/modals' -import {usePalette} from 'lib/hooks/usePalette' -import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' -import {Dimensions} from 'lib/media/types' -import {getDataUriSize} from 'lib/media/util' -import {gradients, s} from 'lib/styles' -import {Text} from 'view/com/util/text/Text' -import {calculateDimensions} from './cropImageUtil' - -enum AspectRatio { - Square = 'square', - Wide = 'wide', - Tall = 'tall', - Custom = 'custom', -} - -const DIMS: Record = { - [AspectRatio.Square]: {width: 1000, height: 1000}, - [AspectRatio.Wide]: {width: 1000, height: 750}, - [AspectRatio.Tall]: {width: 750, height: 1000}, -} - -export const snapPoints = ['0%'] - -export function Component({ - uri, - dimensions, - onSelect, -}: { - uri: string - dimensions?: Dimensions - onSelect: (img?: RNImage) => void -}) { - const {closeModal} = useModalControls() - const pal = usePalette('default') - const {_} = useLingui() - const defaultAspectStyle = dimensions - ? AspectRatio.Custom - : AspectRatio.Square - const [as, setAs] = React.useState(defaultAspectStyle) - const [scale, setScale] = React.useState(1) - const editorRef = React.useRef(null) - const imageEditorWidth = dimensions ? dimensions.width : DIMS[as].width - const imageEditorHeight = dimensions ? dimensions.height : DIMS[as].height - - const doSetAs = (v: AspectRatio) => () => setAs(v) - - const onPressCancel = () => { - onSelect(undefined) - closeModal() - } - const onPressDone = () => { - const canvas = editorRef.current?.getImageScaledToCanvas() - if (canvas) { - const dataUri = canvas.toDataURL('image/jpeg') - onSelect({ - path: dataUri, - mime: 'image/jpeg', - size: getDataUriSize(dataUri), - width: imageEditorWidth, - height: imageEditorHeight, - }) - } else { - onSelect(undefined) - } - closeModal() - } - - let cropperStyle - if (as === AspectRatio.Square) { - cropperStyle = styles.cropperSquare - } else if (as === AspectRatio.Wide) { - cropperStyle = styles.cropperWide - } else if (as === AspectRatio.Tall) { - cropperStyle = styles.cropperTall - } else if (as === AspectRatio.Custom) { - const cropperDimensions = calculateDimensions( - 550, - imageEditorHeight, - imageEditorWidth, - ) - cropperStyle = { - width: cropperDimensions.width, - height: cropperDimensions.height, - } - } - - return ( - - - - - - - setScale(Array.isArray(v) ? v[0] : v) - } - minimumValue={1} - maximumValue={3} - containerStyle={styles.slider} - /> - {as === AspectRatio.Custom ? null : ( - <> - - - - - - - - - - - )} - - - - - Cancel - - - - - - - Done - - - - - - ) -} - -const styles = StyleSheet.create({ - cropper: { - marginLeft: 'auto', - marginRight: 'auto', - borderWidth: 1, - borderRadius: 4, - overflow: 'hidden', - }, - cropperSquare: { - width: 400, - height: 400, - }, - cropperWide: { - width: 400, - height: 300, - }, - cropperTall: { - width: 300, - height: 400, - }, - imageEditor: { - maxWidth: '100%', - }, - ctrls: { - flexDirection: 'row', - alignItems: 'center', - marginTop: 10, - }, - slider: { - flex: 1, - marginRight: 10, - }, - btns: { - flexDirection: 'row', - alignItems: 'center', - marginTop: 10, - }, - btn: { - borderRadius: 4, - paddingVertical: 8, - paddingHorizontal: 24, - }, -}) diff --git a/src/view/com/modals/crop-image/cropImageUtil.ts b/src/view/com/modals/crop-image/cropImageUtil.ts deleted file mode 100644 index 303d15ba5b..0000000000 --- a/src/view/com/modals/crop-image/cropImageUtil.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const calculateDimensions = ( - maxWidth: number, - originalHeight: number, - originalWidth: number, -) => { - const aspectRatio = originalWidth / originalHeight - const newHeight = maxWidth / aspectRatio - const newWidth = maxWidth - return { - width: newWidth, - height: newHeight, - } -} diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index b2f56c1385..76d9d1503e 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -8,17 +8,17 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' -import {logger} from '#/logger' -import {usePalette} from 'lib/hooks/usePalette' +import {usePalette} from '#/lib/hooks/usePalette' import { useCameraPermission, usePhotoLibraryPermission, -} from 'lib/hooks/usePermissions' -import {makeProfileLink} from 'lib/routes/links' -import {colors} from 'lib/styles' -import {isAndroid, isNative, isWeb} from 'platform/detection' -import {precacheProfile} from 'state/queries/profile' -import {HighPriorityImage} from 'view/com/util/images/Image' +} from '#/lib/hooks/usePermissions' +import {makeProfileLink} from '#/lib/routes/links' +import {colors} from '#/lib/styles' +import {logger} from '#/logger' +import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {precacheProfile} from '#/state/queries/profile' +import {HighPriorityImage} from '#/view/com/util/images/Image' import {tokens, useTheme} from '#/alf' import { Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, @@ -321,6 +321,8 @@ let EditableUserAvatar = ({ height: 1000, width: 1000, path: item.path, + webAspectRatio: 1, + webCircularCrop: true, }) onSelectNewAvatar(croppedImage) diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index 93ea32750d..13f4081fce 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner.tsx @@ -6,16 +6,16 @@ import {ModerationUI} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {logger} from '#/logger' -import {usePalette} from 'lib/hooks/usePalette' +import {usePalette} from '#/lib/hooks/usePalette' import { useCameraPermission, usePhotoLibraryPermission, -} from 'lib/hooks/usePermissions' -import {colors} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isAndroid, isNative} from 'platform/detection' -import {EventStopper} from 'view/com/util/EventStopper' +} from '#/lib/hooks/usePermissions' +import {colors} from '#/lib/styles' +import {useTheme} from '#/lib/ThemeContext' +import {logger} from '#/logger' +import {isAndroid, isNative} from '#/platform/detection' +import {EventStopper} from '#/view/com/util/EventStopper' import {tokens, useTheme as useAlfTheme} from '#/alf' import { Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, @@ -72,6 +72,7 @@ export function UserBanner({ path: items[0].path, width: 3000, height: 1000, + webAspectRatio: 3, }), ) } catch (e: any) { diff --git a/yarn.lock b/yarn.lock index 860b49daec..f3d6ae5fd3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2570,7 +2570,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.12.1", "@babel/plugin-transform-runtime@^7.16.4": +"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.16.4": version "7.22.10" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.10.tgz#89eda6daf1d3af6f36fb368766553054c8d7cd46" integrity sha512-RchI7HePu1eu0CYNKHHHQdfenZcM4nz8rew5B1VWqeRKdcwW5aQ5HeG9eTUbWiAS1UrmHVLmoxTWHt3iLD/NhA== @@ -8262,13 +8262,6 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-avatar-editor@^13.0.0": - version "13.0.0" - resolved "https://registry.yarnpkg.com/@types/react-avatar-editor/-/react-avatar-editor-13.0.0.tgz#5963e16c931746c47e478d669dd72d388b427393" - integrity sha512-5ymOayy6mfT35xTqzni7UjXvCNEg8/pH4pI5RenITp9PBc02KGTYjSV1WboXiQDYSh5KomLT0ngBLEAIhV1QoQ== - dependencies: - "@types/react" "*" - "@types/react-dom@^18.2.18": version "18.2.18" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd" @@ -18935,15 +18928,6 @@ react-app-polyfill@^3.0.0: regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" -react-avatar-editor@^13.0.0: - version "13.0.0" - resolved "https://registry.yarnpkg.com/react-avatar-editor/-/react-avatar-editor-13.0.0.tgz#55013625ee9ae715c1fe2dc553b8079994d8a5f2" - integrity sha512-0xw63MbRRQdDy7YI1IXU9+7tTFxYEFLV8CABvryYOGjZmXRTH2/UA0mafe57ns62uaEFX181kA4XlGlxCaeXKA== - dependencies: - "@babel/plugin-transform-runtime" "^7.12.1" - "@babel/runtime" "^7.12.5" - prop-types "^15.7.2" - "react-compiler-runtime@file:./lib/react-compiler-runtime": version "0.0.1" @@ -19003,6 +18987,11 @@ react-freeze@^1.0.0: resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d" integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g== +react-image-crop@^11.0.7: + version "11.0.7" + resolved "https://registry.yarnpkg.com/react-image-crop/-/react-image-crop-11.0.7.tgz#25f3d37ccbb65a05d19d23b4740a5912835c741e" + integrity sha512-ZciKWHDYzmm366JDL18CbrVyjnjH0ojufGDmScfS4ZUqLHg4nm6ATY+K62C75W4ZRNt4Ii+tX0bSjNk9LQ2xzQ== + "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" From d2fae81b33ae0a73d0b9f87700365d60bc51f094 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 24 Sep 2024 09:28:12 -0700 Subject: [PATCH 14/15] Remove `react-native-fs` (#5463) * remove rnfs * tweak e2e * log * use `safeDeleteAsync` --- package.json | 1 - src/lib/api/upload-blob.ts | 8 +++++--- src/lib/media/picker.e2e.tsx | 34 +++++++++++++++++++++++----------- yarn.lock | 15 +-------------- 4 files changed, 29 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index e1c0f99d8e..5b2369d2a1 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,6 @@ "react-native-compressor": "^1.8.24", "react-native-date-picker": "^4.4.2", "react-native-drawer-layout": "^4.0.0-alpha.3", - "react-native-fs": "^2.20.0", "react-native-gesture-handler": "~2.16.2", "react-native-get-random-values": "~1.11.0", "react-native-image-crop-picker": "0.41.2", diff --git a/src/lib/api/upload-blob.ts b/src/lib/api/upload-blob.ts index 0814d5185b..07aeaf1a7e 100644 --- a/src/lib/api/upload-blob.ts +++ b/src/lib/api/upload-blob.ts @@ -1,6 +1,8 @@ -import RNFS from 'react-native-fs' +import {copyAsync} from 'expo-file-system' import {BskyAgent, ComAtprotoRepoUploadBlob} from '@atproto/api' +import {safeDeleteAsync} from '#/lib/media/manip' + /** * @param encoding Allows overriding the blob's type */ @@ -65,7 +67,7 @@ async function withSafeFile( // temporary file). const newPath = uri.replace(/\.jpe?g$/, '.bin') try { - await RNFS.copyFile(uri, newPath) + await copyAsync({from: uri, to: newPath}) } catch { // Failed to copy the file, just use the original return await fn(uri) @@ -74,7 +76,7 @@ async function withSafeFile( return await fn(newPath) } finally { // Remove the temporary file - await RNFS.unlink(newPath) + await safeDeleteAsync(newPath) } } else { return fn(uri) diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx index e6b46ba774..fc6fcde45e 100644 --- a/src/lib/media/picker.e2e.tsx +++ b/src/lib/media/picker.e2e.tsx @@ -1,25 +1,37 @@ -import RNFS from 'react-native-fs' import { Image as RNImage, openCropper as openCropperFn, } from 'react-native-image-crop-picker' +import { + documentDirectory, + getInfoAsync, + readDirectoryAsync, +} from 'expo-file-system' import {compressIfNeeded} from './manip' import {CropperOptions} from './types' async function getFile() { - let files = await RNFS.readDir( - RNFS.LibraryDirectoryPath.split('/') - .slice(0, -5) - .concat(['Media', 'DCIM', '100APPLE']) - .join('/'), - ) - files = files.filter(file => file.path.endsWith('.JPG')) - const file = files[0] + const imagesDir = documentDirectory! + .split('/') + .slice(0, -6) + .concat(['Media', 'DCIM', '100APPLE']) + .join('/') + + let files = await readDirectoryAsync(imagesDir) + files = files.filter(file => file.endsWith('.JPG')) + const file = `${imagesDir}/${files[0]}` + + const fileInfo = await getInfoAsync(file) + + if (!fileInfo.exists) { + throw new Error('Failed to get file info') + } + return await compressIfNeeded({ - path: file.path, + path: file, mime: 'image/jpeg', - size: file.size, + size: fileInfo.size, width: 4288, height: 2848, }) diff --git a/yarn.lock b/yarn.lock index f3d6ae5fd3..225f109f74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9540,7 +9540,7 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== -base-64@0.1.0, base-64@^0.1.0: +base-64@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb" integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA== @@ -19038,14 +19038,6 @@ react-native-drawer-layout@^4.0.0-alpha.3: dependencies: use-latest-callback "^0.1.9" -react-native-fs@^2.20.0: - version "2.20.0" - resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6" - integrity sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ== - dependencies: - base-64 "^0.1.0" - utf8 "^3.0.0" - react-native-gesture-handler@~2.16.2: version "2.16.2" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d" @@ -21830,11 +21822,6 @@ use-sidecar@^1.1.2: detect-node-es "^1.1.0" tslib "^2.0.0" -utf8@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" - integrity sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ== - util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From ea43d20c61547523e34ae864ca4ddffdedd8dfb1 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 24 Sep 2024 10:15:33 -0700 Subject: [PATCH 15/15] Remove image resizer (#5464) --- __tests__/lib/images.test.ts | 128 +++++++++--------- jest/jestSetup.js | 12 +- package.json | 1 - src/lib/media/manip.ts | 74 +++++++--- src/view/com/composer/useExternalLinkFetch.ts | 26 ++-- yarn.lock | 5 - 6 files changed, 147 insertions(+), 99 deletions(-) diff --git a/__tests__/lib/images.test.ts b/__tests__/lib/images.test.ts index 595f566c47..a5acad25f6 100644 --- a/__tests__/lib/images.test.ts +++ b/__tests__/lib/images.test.ts @@ -1,26 +1,30 @@ -import ImageResizer from '@bam.tech/react-native-image-resizer' +import {deleteAsync} from 'expo-file-system' +import {manipulateAsync, SaveFormat} from 'expo-image-manipulator' import RNFetchBlob from 'rn-fetch-blob' import { downloadAndResize, DownloadAndResizeOpts, + getResizedDimensions, } from '../../src/lib/media/manip' +const mockResizedImage = { + path: 'file://resized-image.jpg', + size: 100, + width: 100, + height: 100, + mime: 'image/jpeg', +} + describe('downloadAndResize', () => { const errorSpy = jest.spyOn(global.console, 'error') - const mockResizedImage = { - path: jest.fn().mockReturnValue('file://resized-image.jpg'), - size: 100, - width: 50, - height: 50, - mime: 'image/jpeg', - } - beforeEach(() => { - const mockedCreateResizedImage = - ImageResizer.createResizedImage as jest.Mock - mockedCreateResizedImage.mockResolvedValue(mockResizedImage) + const mockedCreateResizedImage = manipulateAsync as jest.Mock + mockedCreateResizedImage.mockResolvedValue({ + uri: 'file://resized-image.jpg', + ...mockResizedImage, + }) }) afterEach(() => { @@ -54,17 +58,17 @@ describe('downloadAndResize', () => { 'GET', 'https://example.com/image.jpg', ) - expect(ImageResizer.createResizedImage).toHaveBeenCalledWith( - 'file://downloaded-image.jpg', - 100, - 100, - 'JPEG', - 100, - undefined, - undefined, - undefined, - {mode: 'cover'}, + + // First time it gets called is to get dimensions + expect(manipulateAsync).toHaveBeenCalledWith(expect.any(String), [], {}) + expect(manipulateAsync).toHaveBeenCalledWith( + expect.any(String), + [{resize: {height: opts.height, width: opts.width}}], + {format: SaveFormat.JPEG, compress: 1.0}, ) + expect(deleteAsync).toHaveBeenCalledWith(expect.any(String), { + idempotent: true, + }) }) it('should return undefined for invalid URI', async () => { @@ -82,46 +86,6 @@ describe('downloadAndResize', () => { expect(result).toBeUndefined() }) - it('should return undefined for unsupported file type', async () => { - const mockedFetch = RNFetchBlob.fetch as jest.Mock - mockedFetch.mockResolvedValueOnce({ - path: jest.fn().mockReturnValue('file://downloaded-image'), - info: jest.fn().mockReturnValue({status: 200}), - flush: jest.fn(), - }) - - const opts: DownloadAndResizeOpts = { - uri: 'https://example.com/image', - width: 100, - height: 100, - maxSize: 500000, - mode: 'cover', - timeout: 10000, - } - - const result = await downloadAndResize(opts) - expect(result).toEqual(mockResizedImage) - expect(RNFetchBlob.config).toHaveBeenCalledWith({ - fileCache: true, - appendExt: 'jpeg', - }) - expect(RNFetchBlob.fetch).toHaveBeenCalledWith( - 'GET', - 'https://example.com/image', - ) - expect(ImageResizer.createResizedImage).toHaveBeenCalledWith( - 'file://downloaded-image', - 100, - 100, - 'JPEG', - 100, - undefined, - undefined, - undefined, - {mode: 'cover'}, - ) - }) - it('should return undefined for non-200 response', async () => { const mockedFetch = RNFetchBlob.fetch as jest.Mock mockedFetch.mockResolvedValueOnce({ @@ -143,4 +107,44 @@ describe('downloadAndResize', () => { expect(errorSpy).not.toHaveBeenCalled() expect(result).toBeUndefined() }) + + it('should not downsize whenever dimensions are below the max dimensions', () => { + const initialDimensionsOne = { + width: 1200, + height: 1000, + } + const resizedDimensionsOne = getResizedDimensions(initialDimensionsOne) + + const initialDimensionsTwo = { + width: 1000, + height: 1200, + } + const resizedDimensionsTwo = getResizedDimensions(initialDimensionsTwo) + + expect(resizedDimensionsOne).toEqual(initialDimensionsOne) + expect(resizedDimensionsTwo).toEqual(initialDimensionsTwo) + }) + + it('should resize dimensions and maintain aspect ratio if they are above the max dimensons', () => { + const initialDimensionsOne = { + width: 3000, + height: 1500, + } + const resizedDimensionsOne = getResizedDimensions(initialDimensionsOne) + + const initialDimensionsTwo = { + width: 2000, + height: 4000, + } + const resizedDimensionsTwo = getResizedDimensions(initialDimensionsTwo) + + expect(resizedDimensionsOne).toEqual({ + width: 2000, + height: 1000, + }) + expect(resizedDimensionsTwo).toEqual({ + width: 1000, + height: 2000, + }) + }) }) diff --git a/jest/jestSetup.js b/jest/jestSetup.js index a68c1dc4bf..50a33589ea 100644 --- a/jest/jestSetup.js +++ b/jest/jestSetup.js @@ -42,8 +42,16 @@ jest.mock('rn-fetch-blob', () => ({ fetch: jest.fn(), })) -jest.mock('@bam.tech/react-native-image-resizer', () => ({ - createResizedImage: jest.fn(), +jest.mock('expo-file-system', () => ({ + getInfoAsync: jest.fn().mockResolvedValue({exists: true, size: 100}), + deleteAsync: jest.fn(), +})) + +jest.mock('expo-image-manipulator', () => ({ + manipulateAsync: jest.fn().mockResolvedValue({ + uri: 'file://resized-image', + }), + SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat, })) jest.mock('@segment/analytics-react-native', () => ({ diff --git a/package.json b/package.json index 5b2369d2a1..4b3486545e 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,6 @@ }, "dependencies": { "@atproto/api": "^0.13.7", - "@bam.tech/react-native-image-resizer": "^3.0.4", "@braintree/sanitize-url": "^6.0.2", "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet", "@emoji-mart/react": "^1.1.1", diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts index 3f01e98c5e..e75f13755f 100644 --- a/src/lib/media/manip.ts +++ b/src/lib/media/manip.ts @@ -6,18 +6,20 @@ import { copyAsync, deleteAsync, EncodingType, + getInfoAsync, makeDirectoryAsync, StorageAccessFramework, writeAsStringAsync, } from 'expo-file-system' +import {manipulateAsync, SaveFormat} from 'expo-image-manipulator' import * as MediaLibrary from 'expo-media-library' import * as Sharing from 'expo-sharing' -import ImageResizer from '@bam.tech/react-native-image-resizer' import {Buffer} from 'buffer' import RNFetchBlob from 'rn-fetch-blob' +import {POST_IMG_MAX} from '#/lib/constants' import {logger} from '#/logger' -import {isAndroid, isIOS} from 'platform/detection' +import {isAndroid, isIOS} from '#/platform/detection' import {Dimensions} from './types' export async function compressIfNeeded( @@ -165,29 +167,47 @@ interface DoResizeOpts { } async function doResize(localUri: string, opts: DoResizeOpts): Promise { + // We need to get the dimensions of the image before we resize it. Previously, the library we used allowed us to enter + // a "max size", and it would do the "best possible size" calculation for us. + // Now instead, we have to supply the final dimensions to the manipulation function instead. + // Performing an "empty" manipulation lets us get the dimensions of the original image. React Native's Image.getSize() + // does not work for local files... + const imageRes = await manipulateAsync(localUri, [], {}) + const newDimensions = getResizedDimensions({ + width: imageRes.width, + height: imageRes.height, + }) + for (let i = 0; i < 9; i++) { - const quality = 100 - i * 10 - const resizeRes = await ImageResizer.createResizedImage( + // nearest 10th + const quality = Math.round((1 - 0.1 * i) * 10) / 10 + const resizeRes = await manipulateAsync( localUri, - opts.width, - opts.height, - 'JPEG', - quality, - undefined, - undefined, - undefined, - {mode: opts.mode}, + [{resize: newDimensions}], + { + format: SaveFormat.JPEG, + compress: quality, + }, ) - if (resizeRes.size < opts.maxSize) { + + const fileInfo = await getInfoAsync(resizeRes.uri) + if (!fileInfo.exists) { + throw new Error( + 'The image manipulation library failed to create a new image.', + ) + } + + if (fileInfo.size < opts.maxSize) { + safeDeleteAsync(imageRes.uri) return { - path: normalizePath(resizeRes.path), + path: normalizePath(resizeRes.uri), mime: 'image/jpeg', - size: resizeRes.size, + size: fileInfo.size, width: resizeRes.width, height: resizeRes.height, } } else { - safeDeleteAsync(resizeRes.path) + safeDeleteAsync(resizeRes.uri) } } throw new Error( @@ -311,3 +331,25 @@ async function withTempFile( safeDeleteAsync(tmpDirUri) } } + +export function getResizedDimensions(originalDims: { + width: number + height: number +}) { + if ( + originalDims.width <= POST_IMG_MAX.width && + originalDims.height <= POST_IMG_MAX.height + ) { + return originalDims + } + + const ratio = Math.min( + POST_IMG_MAX.width / originalDims.width, + POST_IMG_MAX.height / originalDims.height, + ) + + return { + width: Math.round(originalDims.width * ratio), + height: Math.round(originalDims.height * ratio), + } +} diff --git a/src/view/com/composer/useExternalLinkFetch.ts b/src/view/com/composer/useExternalLinkFetch.ts index 1a36b50348..60afadefea 100644 --- a/src/view/com/composer/useExternalLinkFetch.ts +++ b/src/view/com/composer/useExternalLinkFetch.ts @@ -2,23 +2,18 @@ import {useEffect, useState} from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {logger} from '#/logger' -import {createComposerImage} from '#/state/gallery' -import {useFetchDid} from '#/state/queries/handle' -import {useGetPost} from '#/state/queries/post' -import {useAgent} from '#/state/session' -import * as apilib from 'lib/api/index' -import {POST_IMG_MAX} from 'lib/constants' +import * as apilib from '#/lib/api/index' +import {POST_IMG_MAX} from '#/lib/constants' import { EmbeddingDisabledError, getFeedAsEmbed, getListAsEmbed, getPostAsQuote, getStarterPackAsEmbed, -} from 'lib/link-meta/bsky' -import {getLinkMeta} from 'lib/link-meta/link-meta' -import {resolveShortLink} from 'lib/link-meta/resolve-short-link' -import {downloadAndResize} from 'lib/media/manip' +} from '#/lib/link-meta/bsky' +import {getLinkMeta} from '#/lib/link-meta/link-meta' +import {resolveShortLink} from '#/lib/link-meta/resolve-short-link' +import {downloadAndResize} from '#/lib/media/manip' import { isBskyCustomFeedUrl, isBskyListUrl, @@ -26,8 +21,13 @@ import { isBskyStarterPackUrl, isBskyStartUrl, isShortLink, -} from 'lib/strings/url-helpers' -import {ComposerOpts} from 'state/shell/composer' +} from '#/lib/strings/url-helpers' +import {logger} from '#/logger' +import {createComposerImage} from '#/state/gallery' +import {useFetchDid} from '#/state/queries/handle' +import {useGetPost} from '#/state/queries/post' +import {useAgent} from '#/state/session' +import {ComposerOpts} from '#/state/shell/composer' export function useExternalLinkFetch({ setQuote, diff --git a/yarn.lock b/yarn.lock index 225f109f74..17fe862372 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2983,11 +2983,6 @@ "@babel/helper-validator-identifier" "^7.24.6" to-fast-properties "^2.0.0" -"@bam.tech/react-native-image-resizer@^3.0.4": - version "3.0.5" - resolved "https://registry.yarnpkg.com/@bam.tech/react-native-image-resizer/-/react-native-image-resizer-3.0.5.tgz#6661ba020de156268f73bdc92fbb93ef86f88a13" - integrity sha512-u5QGUQGGVZiVCJ786k9/kd7pPRZ6eYfJCYO18myVCH8FbVI7J8b5GT2Svjj2x808DlWeqfaZOOzxPqo27XYvrQ== - "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"