acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge remote-tracking branch 'origin' into eric/app-864-integrate-post-tags-into-app

Browse Source 
* origin:
  Disable events on hidden bars (#1686)
  Fix profile layout shift (#1690)
  Don't re-render bars when showing/hiding them (#1691)
  Fix crash when scrolling down on the web (#1684)
  Make shell hide/show animation smoother (#1683)
  Fix layout shift for multi-image posts (#1673)
  bskyweb: add rate limiting to reduce DoSability
  use new zeed-dom version (#1671)
  1.53
This commit is contained in:
Eric Bailey
2023-10-13 09:38:53 -05:00
parent 0dbf8f1b18 d5ccbd76d5
commit 85481ef897
14 changed files with 187 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.config.js
+3 -3
View File
@@ -6,7 +6,7 @@ module.exports = function () {
slug: 'bluesky',
scheme: 'bluesky',
owner: 'blueskysocial',
version: '1.52.0',
version: '1.53.0',
runtimeVersion: {
policy: 'appVersion',
},
@@ -19,7 +19,7 @@ module.exports = function () {
backgroundColor: '#ffffff',
},
ios: {
buildNumber: '2',
buildNumber: '1',
supportsTablet: false,
bundleIdentifier: 'xyz.blueskyweb.app',
config: {
@@ -43,7 +43,7 @@ module.exports = function () {
backgroundColor: '#ffffff',
},
android: {
versionCode: 41,
versionCode: 42,
adaptiveIcon: {
foregroundImage: './assets/adaptive-icon.png',
backgroundColor: '#ffffff',
bskyweb/cmd/bskyweb/server.go
+22 -2
View File
@@ -91,6 +91,11 @@ func serve(cctx *cli.Context) error {
}
e.HideBanner = true
e.Renderer = NewRenderer("templates/", &bskyweb.TemplateFS, debug)
e.HTTPErrorHandler = server.errorHandler
e.IPExtractor = echo.ExtractIPFromXFFHeader()
// SECURITY: Do not modify without due consideration.
e.Use(middleware.SecureWithConfig(middleware.SecureConfig{
ContentTypeNosniff: "nosniff",
@@ -106,8 +111,23 @@ func serve(cctx *cli.Context) error {
return strings.HasPrefix(c.Request().URL.Path, "/static")
},
}))
e.Renderer = NewRenderer("templates/", &bskyweb.TemplateFS, debug)
e.HTTPErrorHandler = server.errorHandler
e.Use(middleware.RateLimiterWithConfig(middleware.RateLimiterConfig{
Skipper: middleware.DefaultSkipper,
Store: middleware.NewRateLimiterMemoryStoreWithConfig(
middleware.RateLimiterMemoryStoreConfig{
Rate: 10, // requests per second
Burst: 30, // allow bursts
ExpiresIn: 3 * time.Minute, // garbage collect entries older than 3 minutes
},
),
IdentifierExtractor: func(ctx echo.Context) (string, error) {
id := ctx.RealIP()
return id, nil
},
DenyHandler: func(c echo.Context, identifier string, err error) error {
return c.String(http.StatusTooManyRequests, "Your request has been rate limited. Please try again later. Contact security@bsky.app if you believe this was a mistake.\n")
},
}))
// redirect trailing slash to non-trailing slash.
// all of our current endpoints have no trailing slash.
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "bsky.app",
"version": "1.52.0",
"version": "1.53.0",
"private": true,
"scripts": {
"prepare": "is-ci || husky install",
@@ -217,7 +217,7 @@
},
"resolutions": {
"@types/react": "^18",
"**/zeed-dom": "estrattonbailey/zeed-dom#publish"
"**/zeed-dom": "0.10.9"
},
"jest": {
"preset": "jest-expo/ios",
src/lib/hooks/useMinimalShellMode.tsx
+21 -17
View File
@@ -1,4 +1,5 @@
import React from 'react'
import {autorun} from 'mobx'
import {useStores} from 'state/index'
import {Animated} from 'react-native'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
@@ -7,26 +8,29 @@ export function useMinimalShellMode() {
const store = useStores()
const minimalShellInterp = useAnimatedValue(0)
const footerMinimalShellTransform = {
transform: [{translateY: Animated.multiply(minimalShellInterp, 100)}],
opacity: Animated.subtract(1, minimalShellInterp),
transform: [{translateY: Animated.multiply(minimalShellInterp, 50)}],
}
React.useEffect(() => {
if (store.shell.minimalShellMode) {
Animated.timing(minimalShellInterp, {
toValue: 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
} else {
Animated.timing(minimalShellInterp, {
toValue: 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}
}, [minimalShellInterp, store.shell.minimalShellMode])
return autorun(() => {
if (store.shell.minimalShellMode) {
Animated.timing(minimalShellInterp, {
toValue: 1,
duration: 150,
useNativeDriver: true,
isInteraction: false,
}).start()
} else {
Animated.timing(minimalShellInterp, {
toValue: 0,
duration: 150,
useNativeDriver: true,
isInteraction: false,
}).start()
}
})
}, [minimalShellInterp, store])
return {footerMinimalShellTransform}
}
src/view/com/pager/FeedsTabBarMobile.tsx
+23 -9
View File
@@ -1,6 +1,7 @@
import React, {useMemo} from 'react'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {autorun} from 'mobx'
import {TabBar} from 'view/com/pager/TabBar'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
import {useStores} from 'state/index'
@@ -22,15 +23,18 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
const interp = useAnimatedValue(0)
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
return autorun(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 150,
useNativeDriver: true,
isInteraction: false,
}).start()
})
}, [interp, store])
const transform = {
transform: [{translateY: Animated.multiply(interp, -100)}],
opacity: Animated.subtract(1, interp),
transform: [{translateY: Animated.multiply(interp, -50)}],
}
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
@@ -45,7 +49,14 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
)
return (
<Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
<Animated.View
style={[
pal.view,
pal.border,
styles.tabBar,
transform,
store.shell.minimalShellMode && styles.disabled,
]}>
<View style={[pal.view, styles.topBar]}>
<View style={[pal.view]}>
<TouchableOpacity
@@ -113,4 +124,7 @@ const styles = StyleSheet.create({
title: {
fontSize: 21,
},
disabled: {
pointerEvents: 'none',
},
})
src/view/com/util/ViewHeader.tsx
+19 -16
View File
@@ -1,5 +1,6 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {autorun} from 'mobx'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native'
@@ -154,22 +155,24 @@ const Container = observer(function ContainerImpl({
const interp = useAnimatedValue(0)
React.useEffect(() => {
if (store.shell.minimalShellMode) {
Animated.timing(interp, {
toValue: 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
} else {
Animated.timing(interp, {
toValue: 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}
}, [interp, store.shell.minimalShellMode])
return autorun(() => {
if (store.shell.minimalShellMode) {
Animated.timing(interp, {
toValue: 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
} else {
Animated.timing(interp, {
toValue: 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}
})
}, [interp, store])
const transform = {
transform: [{translateY: Animated.multiply(interp, -100)}],
}
src/view/com/util/ViewSelector.tsx
+2 -13
View File
@@ -144,8 +144,6 @@ export function Selector({
items: string[]
onSelect?: (index: number) => void
}) {
const [height, setHeight] = useState(0)
const pal = usePalette('default')
const borderColor = useColorSchemeStyle(
{borderColor: colors.black},
@@ -160,22 +158,13 @@ export function Selector({
<View
style={{
width: '100%',
position: 'relative',
overflow: 'hidden',
height,
backgroundColor: pal.colors.background,
}}>
<ScrollView
testID="selector"
horizontal
showsHorizontalScrollIndicator={false}
style={{position: 'absolute'}}>
<View
style={[pal.view, styles.outer]}
onLayout={e => {
const {height: layoutHeight} = e.nativeEvent.layout
setHeight(layoutHeight || 60)
}}>
showsHorizontalScrollIndicator={false}>
<View style={[pal.view, styles.outer]}>
{items.map((item, i) => {
const selected = i === selectedIndex
return (
src/view/com/util/fab/FABInner.tsx
+10 -7
View File
@@ -1,5 +1,6 @@
import React, {ComponentProps} from 'react'
import {observer} from 'mobx-react-lite'
import {autorun} from 'mobx'
import {Animated, StyleSheet, TouchableWithoutFeedback} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {gradients} from 'lib/styles'
@@ -25,13 +26,15 @@ export const FABInner = observer(function FABInnerImpl({
const store = useStores()
const interp = useAnimatedValue(0)
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 0 : 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
return autorun(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 0 : 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
})
}, [interp, store])
const transform = isTablet
? undefined
: {
src/view/com/util/images/Gallery.tsx
+12 -5
View File
@@ -23,19 +23,19 @@ export const GalleryItem: FC<GalleryItemProps> = ({
onLongPress,
}) => {
const image = images[index]
return (
<View>
<View style={styles.fullWidth}>
<Pressable
onPress={onPress ? () => onPress(index) : undefined}
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
onLongPress={onLongPress ? () => onLongPress(index) : undefined}
style={styles.fullWidth}
accessibilityRole="button"
accessibilityLabel={image.alt || 'Image'}
accessibilityHint="">
<Image
source={{uri: image.thumb}}
style={imageStyle}
style={[styles.image, imageStyle]}
accessible={true}
accessibilityLabel={image.alt}
accessibilityHint=""
@@ -54,14 +54,21 @@ export const GalleryItem: FC<GalleryItemProps> = ({
}
const styles = StyleSheet.create({
fullWidth: {
flex: 1,
},
image: {
flex: 1,
borderRadius: 4,
},
altContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
borderRadius: 6,
paddingHorizontal: 6,
paddingVertical: 3,
position: 'absolute',
left: 6,
bottom: 6,
left: 8,
bottom: 8,
},
alt: {
color: 'white',
src/view/com/util/images/ImageLayoutGrid.tsx
+53 -61
View File
@@ -1,13 +1,5 @@
import React, {useMemo, useState} from 'react'
import {
LayoutChangeEvent,
StyleProp,
StyleSheet,
View,
ViewStyle,
} from 'react-native'
import {ImageStyle} from 'expo-image'
import {Dimensions} from 'lib/media/types'
import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {AppBskyEmbedImages} from '@atproto/api'
import {GalleryItem} from './Gallery'
@@ -20,21 +12,11 @@ interface ImageLayoutGridProps {
}
export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
const [containerInfo, setContainerInfo] = useState<Dimensions | undefined>()
const onLayout = (evt: LayoutChangeEvent) => {
const {width, height} = evt.nativeEvent.layout
setContainerInfo({
width,
height,
})
}
return (
<View style={style} onLayout={onLayout}>
{containerInfo ? (
<ImageLayoutGridInner {...props} containerInfo={containerInfo} />
) : undefined}
<View style={style}>
<View style={styles.container}>
<ImageLayoutGridInner {...props} />
</View>
</View>
)
}
@@ -44,70 +26,80 @@ interface ImageLayoutGridInnerProps {
onPress?: (index: number) => void
onLongPress?: (index: number) => void
onPressIn?: (index: number) => void
containerInfo: Dimensions
}
function ImageLayoutGridInner({
containerInfo,
...props
}: ImageLayoutGridInnerProps) {
function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
const count = props.images.length
const size1 = useMemo<ImageStyle>(() => {
if (count === 3) {
const size = (containerInfo.width - 10) / 3
return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
} else {
const size = (containerInfo.width - 5) / 2
return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
}
}, [count, containerInfo])
const size2 = React.useMemo<ImageStyle>(() => {
if (count === 3) {
const size = ((containerInfo.width - 10) / 3) * 2 + 5
return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
} else {
const size = (containerInfo.width - 5) / 2
return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
}
}, [count, containerInfo])
switch (count) {
case 2:
return (
<View style={styles.flexRow}>
<GalleryItem index={0} {...props} imageStyle={size1} />
<GalleryItem index={1} {...props} imageStyle={size1} />
<View style={styles.smallItem}>
<GalleryItem {...props} index={0} imageStyle={styles.image} />
</View>
<View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} />
</View>
</View>
)
case 3:
return (
<View style={styles.flexRow}>
<GalleryItem index={0} {...props} imageStyle={size2} />
<View style={styles.flexColumn}>
<GalleryItem index={1} {...props} imageStyle={size1} />
<GalleryItem index={2} {...props} imageStyle={size1} />
<View style={{flex: 2, aspectRatio: 1}}>
<GalleryItem {...props} index={0} imageStyle={styles.image} />
</View>
<View style={{flex: 1}}>
<View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} />
</View>
<View style={styles.smallItem}>
<GalleryItem {...props} index={2} imageStyle={styles.image} />
</View>
</View>
</View>
)
case 4:
return (
<View style={styles.flexRow}>
<View style={styles.flexColumn}>
<GalleryItem index={0} {...props} imageStyle={size1} />
<GalleryItem index={2} {...props} imageStyle={size1} />
<View style={{flex: 1}}>
<View style={styles.smallItem}>
<GalleryItem {...props} index={0} imageStyle={styles.image} />
</View>
<View style={styles.smallItem}>
<GalleryItem {...props} index={2} imageStyle={styles.image} />
</View>
</View>
<View style={styles.flexColumn}>
<GalleryItem index={1} {...props} imageStyle={size1} />
<GalleryItem index={3} {...props} imageStyle={size1} />
<View style={{flex: 1}}>
<View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} />
</View>
<View style={styles.smallItem}>
<GalleryItem {...props} index={3} imageStyle={styles.image} />
</View>
</View>
</View>
)
default:
return null
}
}
// This is used to compute margins (rather than flexbox gap) due to Yoga bugs:
// https://github.com/facebook/yoga/issues/1418
const IMAGE_GAP = 5
const styles = StyleSheet.create({
flexRow: {flexDirection: 'row', gap: 5},
flexColumn: {flexDirection: 'column', gap: 5},
container: {
marginHorizontal: -IMAGE_GAP / 2,
marginVertical: -IMAGE_GAP / 2,
},
flexRow: {flexDirection: 'row'},
smallItem: {flex: 1, aspectRatio: 1},
image: {
margin: IMAGE_GAP / 2,
},
})
src/view/com/util/load-latest/LoadLatestBtn.tsx
+12 -7
View File
@@ -10,6 +10,10 @@ import {colors} from 'lib/styles'
import {HITSLOP_20} from 'lib/constants'
import {isWeb} from 'platform/detection'
import {clamp} from 'lib/numbers'
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
onPress,
@@ -30,15 +34,18 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
? 50
: (minMode || isDesktop ? 16 : 60) +
(isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60))
const animatedStyle = useAnimatedStyle(() => ({
bottom: withTiming(bottom, {duration: 150}),
}))
return (
<TouchableOpacity
<AnimatedTouchableOpacity
style={[
styles.loadLatest,
isDesktop && styles.loadLatestDesktop,
isTablet && styles.loadLatestTablet,
pal.borderDark,
pal.view,
{bottom},
animatedStyle,
]}
onPress={onPress}
hitSlop={HITSLOP_20}
@@ -47,7 +54,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
accessibilityHint="">
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
</TouchableOpacity>
</AnimatedTouchableOpacity>
)
})
@@ -67,14 +74,12 @@ const styles = StyleSheet.create({
loadLatestTablet: {
// @ts-ignore web only
left: '50vw',
// @ts-ignore web only -prf
transform: 'translateX(-282px)',
transform: [{translateX: -282}],
},
loadLatestDesktop: {
// @ts-ignore web only
left: '50vw',
// @ts-ignore web only -prf
transform: 'translateX(-382px)',
transform: [{translateX: -382}],
},
indicator: {
position: 'absolute',
src/view/shell/bottom-bar/BottomBar.tsx
+1
View File
@@ -87,6 +87,7 @@ export const BottomBar = observer(function BottomBarImpl({
pal.border,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
footerMinimalShellTransform,
store.shell.minimalShellMode && styles.disabled,
]}>
<Btn
testID="bottomBarHomeBtn"
src/view/shell/bottom-bar/BottomBarStyles.tsx
+3
View File
@@ -65,4 +65,7 @@ export const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 100,
},
disabled: {
pointerEvents: 'none',
},
})
yarn.lock
+4 -3
View File
@@ -19218,9 +19218,10 @@ yocto-queue@^1.0.0:
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
zeed-dom@^0.9.19, zeed-dom@estrattonbailey/zeed-dom#publish:
version "0.10.8"
resolved "https://codeload.github.com/estrattonbailey/zeed-dom/tar.gz/aad32339dc2473b75aa0a90d8baee21c40a1e914"
zeed-dom@0.10.9, zeed-dom@^0.9.19:
version "0.10.9"
resolved "https://registry.yarnpkg.com/zeed-dom/-/zeed-dom-0.10.9.tgz#b3eb5d9b7cf1be17e1fb3a708379df5edce195be"
integrity sha512-qQQ7Wu7IJ3Vo/LjeKWj97A2Hi17di4ZdmgNZj6AWbDbpt3hvO4EMfjYVA2/2unLYT+XpmMq5fqaLqCeU7Im83A==
dependencies:
css-what "^6.1.0"