2aae37d67b
* Refactor `useOnMainScroll` function to use responsive device detection - Replace static `isDesktopWeb` with `useWebMediaQueries` hook to enable dynamic device type detection. - Create `useDeviceLimits` hook to dynamically determine `DY_LIMIT_UP` and `DY_LIMIT_DOWN` based on device type. - Update dependency arrays for the `useCallback` hooks to include new dynamic variables. * Refactor styles to be responsive to device type - Create `useStyles` hook that generates styles object based on device type detected from `useWebMediaQueries`. - Replace static styles object with dynamic styles object generated from `useStyles` hook in components. - This allows `paddingLeft` values for 'ul' and 'ol' styles to adapt to device type dynamically. - This allows `maxWidth` values for 'metaItem'' styles to adapt to device type dynamically. * Remove `isDesktopWeb` in favor of `useWebMediaQueries().isDesktop` * Refactor `SplashScreen` component for responsive design * Revision based on review results * Fix isNative check --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import React, {useCallback} from 'react'
|
|
import {TouchableOpacity, StyleSheet} from 'react-native'
|
|
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconStyle,
|
|
} from '@fortawesome/react-native-fontawesome'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useAnalytics} from 'lib/analytics/analytics'
|
|
import {useStores} from 'state/index'
|
|
import {openCamera} from 'lib/media/picker'
|
|
import {useCameraPermission} from 'lib/hooks/usePermissions'
|
|
import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants'
|
|
import {GalleryModel} from 'state/models/media/gallery'
|
|
import {isMobileWeb, isNative} from 'platform/detection'
|
|
|
|
type Props = {
|
|
gallery: GalleryModel
|
|
}
|
|
|
|
export function OpenCameraBtn({gallery}: Props) {
|
|
const pal = usePalette('default')
|
|
const {track} = useAnalytics()
|
|
const store = useStores()
|
|
const {requestCameraAccessIfNeeded} = useCameraPermission()
|
|
|
|
const onPressTakePicture = useCallback(async () => {
|
|
track('Composer:CameraOpened')
|
|
try {
|
|
if (!(await requestCameraAccessIfNeeded())) {
|
|
return
|
|
}
|
|
|
|
const img = await openCamera(store, {
|
|
width: POST_IMG_MAX.width,
|
|
height: POST_IMG_MAX.height,
|
|
freeStyleCropEnabled: true,
|
|
})
|
|
|
|
gallery.add(img)
|
|
} catch (err: any) {
|
|
// ignore
|
|
store.log.warn('Error using camera', err)
|
|
}
|
|
}, [gallery, track, store, requestCameraAccessIfNeeded])
|
|
|
|
const shouldShowCameraButton = isNative || isMobileWeb
|
|
if (!shouldShowCameraButton) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
testID="openCameraButton"
|
|
onPress={onPressTakePicture}
|
|
style={styles.button}
|
|
hitSlop={HITSLOP_10}
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Camera"
|
|
accessibilityHint="Opens camera on device">
|
|
<FontAwesomeIcon
|
|
icon="camera"
|
|
style={pal.link as FontAwesomeIconStyle}
|
|
size={24}
|
|
/>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingHorizontal: 15,
|
|
},
|
|
})
|