zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Merge branch 'main' into inherit_system_theme

Browse source
This commit is contained in:
Jaz 2023-05-30 18:25:29 -07:00 • committed by GitHub
commit 09ade363fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
136 changed files with 5771 additions and 2428 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/Navigation.tsx
View file

@ -14,6 +14,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {
HomeTabNavigatorParams,
SearchTabNavigatorParams,
FeedsTabNavigatorParams,
NotificationsTabNavigatorParams,
FlatNavigatorParams,
AllNavigatorParams,
@ -32,14 +33,18 @@ import {useStores} from './state'
import {HomeScreen} from './view/screens/Home'
import {SearchScreen} from './view/screens/Search'
import {FeedsScreen} from './view/screens/Feeds'
import {NotificationsScreen} from './view/screens/Notifications'
import {ModerationScreen} from './view/screens/Moderation'
import {ModerationMuteListsScreen} from './view/screens/ModerationMuteLists'
import {DiscoverFeedsScreen} from 'view/screens/DiscoverFeeds'
import {NotFoundScreen} from './view/screens/NotFound'
import {SettingsScreen} from './view/screens/Settings'
import {ProfileScreen} from './view/screens/Profile'
import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
import {ProfileFollowsScreen} from './view/screens/ProfileFollows'
import {CustomFeedScreen} from './view/screens/CustomFeed'
import {CustomFeedLikedByScreen} from './view/screens/CustomFeedLikedBy'
import {ProfileListScreen} from './view/screens/ProfileList'
import {PostThreadScreen} from './view/screens/PostThread'
import {PostLikedByScreen} from './view/screens/PostLikedBy'
@ -54,6 +59,7 @@ import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
import {AppPasswords} from 'view/screens/AppPasswords'
import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts'
import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts'
import {SavedFeeds} from 'view/screens/SavedFeeds'
import {getRoutingInstrumentation} from 'lib/sentry'
import {bskyTitle} from 'lib/strings/headings'
@ -61,6 +67,7 @@ const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
const HomeTab = createNativeStackNavigator<HomeTabNavigatorParams>()
const SearchTab = createNativeStackNavigator<SearchTabNavigatorParams>()
const FeedsTab = createNativeStackNavigator<FeedsTabNavigatorParams>()
const NotificationsTab =
createNativeStackNavigator<NotificationsTabNavigatorParams>()
const MyProfileTab = createNativeStackNavigator<MyProfileTabNavigatorParams>()
@ -100,6 +107,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
component={ModerationBlockedAccounts}
options={{title: title('Blocked Accounts')}}
/>
<Stack.Screen
name="DiscoverFeeds"
component={DiscoverFeedsScreen}
options={{title: title('Discover Feeds')}}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
@ -144,6 +156,16 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
component={PostRepostedByScreen}
options={({route}) => ({title: title(`Post by @${route.params.name}`)})}
/>
<Stack.Screen
name="CustomFeed"
component={CustomFeedScreen}
options={{title: title('Feed')}}
/>
<Stack.Screen
name="CustomFeedLikedBy"
component={CustomFeedLikedByScreen}
options={{title: title('Liked by')}}
/>
<Stack.Screen
name="Debug"
component={DebugScreen}
@ -184,6 +206,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
component={AppPasswords}
options={{title: title('App Passwords')}}
/>
<Stack.Screen
name="SavedFeeds"
component={SavedFeeds}
options={{title: title('Edit My Feeds')}}
/>
</>
)
}
@ -198,14 +225,15 @@ function TabsNavigator() {
<Tab.Navigator
initialRouteName="HomeTab"
backBehavior="initialRoute"
screenOptions={{headerShown: false}}
screenOptions={{headerShown: false, lazy: true}}
tabBar={tabBar}>
<Tab.Screen name="HomeTab" component={HomeTabNavigator} />
<Tab.Screen name="SearchTab" component={SearchTabNavigator} />
<Tab.Screen name="FeedsTab" component={FeedsTabNavigator} />
<Tab.Screen
name="NotificationsTab"
component={NotificationsTabNavigator}
/>
<Tab.Screen name="SearchTab" component={SearchTabNavigator} />
<Tab.Screen name="MyProfileTab" component={MyProfileTabNavigator} />
</Tab.Navigator>
)
@ -245,6 +273,23 @@ function SearchTabNavigator() {
)
}
function FeedsTabNavigator() {
const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
return (
<FeedsTab.Navigator
screenOptions={{
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
animationDuration: 250,
contentStyle,
}}>
<FeedsTab.Screen name="Feeds" component={FeedsScreen} />
{commonScreens(FeedsTab as typeof HomeTab)}
</FeedsTab.Navigator>
)
}
function NotificationsTabNavigator() {
const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
return (
@ -318,6 +363,11 @@ const FlatNavigator = observer(() => {
component={SearchScreen}
options={{title: title('Search')}}
/>
<Flat.Screen
name="Feeds"
component={FeedsScreen}
options={{title: title('Feeds')}}
/>
<Flat.Screen
name="Notifications"
component={NotificationsScreen}

3
src/lib/api/feed-manip.ts
View file

@ -143,9 +143,6 @@ export class FeedTuner {
}
}
// sort by slice roots' timestamps
slices.sort((a, b) => b.ts.localeCompare(a.ts))
for (const slice of slices) {
for (const item of slice.items) {
this.seenUris.add(item.post.uri)

94
src/lib/api/index.ts
View file

@ -18,6 +18,7 @@ export interface ExternalEmbedDraft {
uri: string
isLoading: boolean
meta?: LinkMeta
embed?: AppBskyEmbedRecord.Main
localThumb?: ImageModel
}
@ -109,6 +110,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
const images: AppBskyEmbedImages.Image[] = []
for (const image of opts.images) {
opts.onStateChange?.(`Uploading image #${images.length + 1}...`)
await image.compress()
const path = image.compressed?.path ?? image.path
const res = await uploadBlob(store, path, 'image/jpeg')
images.push({
@ -135,40 +137,54 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
}
if (opts.extLink && !opts.images?.length) {
let thumb
if (opts.extLink.localThumb) {
opts.onStateChange?.('Uploading link thumbnail...')
let encoding
if (opts.extLink.localThumb.mime) {
encoding = opts.extLink.localThumb.mime
} else if (opts.extLink.localThumb.path.endsWith('.png')) {
encoding = 'image/png'
} else if (
opts.extLink.localThumb.path.endsWith('.jpeg') ||
opts.extLink.localThumb.path.endsWith('.jpg')
) {
encoding = 'image/jpeg'
} else {
store.log.warn(
'Unexpected image format for thumbnail, skipping',
opts.extLink.localThumb.path,
)
if (opts.extLink.embed) {
embed = opts.extLink.embed
} else {
let thumb
if (opts.extLink.localThumb) {
opts.onStateChange?.('Uploading link thumbnail...')
let encoding
if (opts.extLink.localThumb.mime) {
encoding = opts.extLink.localThumb.mime
} else if (opts.extLink.localThumb.path.endsWith('.png')) {
encoding = 'image/png'
} else if (
opts.extLink.localThumb.path.endsWith('.jpeg') ||
opts.extLink.localThumb.path.endsWith('.jpg')
) {
encoding = 'image/jpeg'
} else {
store.log.warn(
'Unexpected image format for thumbnail, skipping',
opts.extLink.localThumb.path,
)
}
if (encoding) {
const thumbUploadRes = await uploadBlob(
store,
opts.extLink.localThumb.path,
encoding,
)
thumb = thumbUploadRes.data.blob
}
}
if (encoding) {
const thumbUploadRes = await uploadBlob(
store,
opts.extLink.localThumb.path,
encoding,
)
thumb = thumbUploadRes.data.blob
}
}
if (opts.quote) {
embed = {
$type: 'app.bsky.embed.recordWithMedia',
record: embed,
media: {
if (opts.quote) {
embed = {
$type: 'app.bsky.embed.recordWithMedia',
record: embed,
media: {
$type: 'app.bsky.embed.external',
external: {
uri: opts.extLink.uri,
title: opts.extLink.meta?.title || '',
description: opts.extLink.meta?.description || '',
thumb,
},
} as AppBskyEmbedExternal.Main,
} as AppBskyEmbedRecordWithMedia.Main
} else {
embed = {
$type: 'app.bsky.embed.external',
external: {
uri: opts.extLink.uri,
@ -176,18 +192,8 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
description: opts.extLink.meta?.description || '',
thumb,
},
} as AppBskyEmbedExternal.Main,
} as AppBskyEmbedRecordWithMedia.Main
} else {
embed = {
$type: 'app.bsky.embed.external',
external: {
uri: opts.extLink.uri,
title: opts.extLink.meta?.title || '',
description: opts.extLink.meta?.description || '',
thumb,
},
} as AppBskyEmbedExternal.Main
} as AppBskyEmbedExternal.Main
}
}
}

4
src/lib/app-info.ts
View file

@ -1,4 +1,2 @@
import VersionNumber from 'react-native-version-number'
export const appVersion = VersionNumber.appVersion
export const buildVersion = VersionNumber.buildVersion
export const appVersion = `${VersionNumber.appVersion} (${VersionNumber.buildVersion})`

5
src/lib/app-info.web.ts
View file

@ -1,3 +1,2 @@
// TODO
export const appVersion = 'TODO'
export const buildVersion = 'TODO'
import {version} from '../../package.json'
export const appVersion = version

16
src/lib/async/revertible.ts
View file

@ -4,6 +4,22 @@ import set from 'lodash.set'
const ongoingActions = new Set<any>()
/**
* This is a TypeScript function that optimistically updates data on the client-side before sending a
* request to the server and rolling back changes if the request fails.
* @param {T} model - The object or record that needs to be updated optimistically.
* @param preUpdate - `preUpdate` is a function that is called before the server update is executed. It
* can be used to perform any necessary actions or updates on the model or UI before the server update
* is initiated.
* @param serverUpdate - `serverUpdate` is a function that returns a Promise representing the server
* update operation. This function is called after the previous state of the model has been recorded
* and the `preUpdate` function has been executed. If the server update is successful, the `postUpdate`
* function is called with the result
* @param [postUpdate] - `postUpdate` is an optional callback function that will be called after the
* server update is successful. It takes in the response from the server update as its parameter. If
* this parameter is not provided, nothing will happen after the server update.
* @returns A Promise that resolves to `void`.
*/
export const updateDataOptimistically = async <
T extends Record<string, any>,
U,

60
src/lib/constants.ts
View file

@ -4,6 +4,8 @@ export const FEEDBACK_FORM_URL =
export const MAX_DISPLAY_NAME = 64
export const MAX_DESCRIPTION = 256
export const MAX_GRAPHEME_LENGTH = 300
// Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html
// but increasing limit per user feedback
export const MAX_ALT_TEXT = 1000
@ -94,8 +96,66 @@ export function SUGGESTED_FOLLOWS(serviceUrl: string) {
}
}
export const STAGING_DEFAULT_FEED = (rkey: string) =>
`at://did:plc:wqzurwm3kmaig6e6hnc2gqwo/app.bsky.feed.generator/${rkey}`
export const PROD_DEFAULT_FEED = (rkey: string) =>
`at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/${rkey}`
export async function DEFAULT_FEEDS(
serviceUrl: string,
resolveHandle: (name: string) => Promise<string>,
) {
if (serviceUrl.includes('localhost')) {
// local dev
const aliceDid = await resolveHandle('alice.test')
return {
pinned: [`at://${aliceDid}/app.bsky.feed.generator/alice-favs`],
saved: [`at://${aliceDid}/app.bsky.feed.generator/alice-favs`],
}
} else if (serviceUrl.includes('staging')) {
// staging
return {
pinned: [STAGING_DEFAULT_FEED('whats-hot')],
saved: [
STAGING_DEFAULT_FEED('bsky-team'),
STAGING_DEFAULT_FEED('with-friends'),
STAGING_DEFAULT_FEED('whats-hot'),
STAGING_DEFAULT_FEED('hot-classic'),
],
}
} else {
// production
return {
pinned: [
PROD_DEFAULT_FEED('whats-hot'),
PROD_DEFAULT_FEED('with-friends'),
],
saved: [
PROD_DEFAULT_FEED('bsky-team'),
PROD_DEFAULT_FEED('with-friends'),
PROD_DEFAULT_FEED('whats-hot'),
PROD_DEFAULT_FEED('hot-classic'),
],
}
}
}
export const POST_IMG_MAX = {
width: 2000,
height: 2000,
size: 1000000,
}
export const STAGING_LINK_META_PROXY =
'https://cardyb.staging.bsky.dev/v1/extract?url='
export const PROD_LINK_META_PROXY = 'https://cardyb.bsky.app/v1/extract?url='
export function LINK_META_PROXY(serviceUrl: string) {
if (serviceUrl.includes('localhost')) {
return STAGING_LINK_META_PROXY
} else if (serviceUrl.includes('staging')) {
return STAGING_LINK_META_PROXY
} else {
return PROD_LINK_META_PROXY
}
}

40
src/lib/haptics.ts Normal file
View file

@ -0,0 +1,40 @@
import {isIOS, isWeb} from 'platform/detection'
import ReactNativeHapticFeedback, {
HapticFeedbackTypes,
} from 'react-native-haptic-feedback'
const hapticImpact: HapticFeedbackTypes = isIOS ? 'impactMedium' : 'impactLight' // Users said the medium impact was too strong on Android; see APP-537s
export class Haptics {
static default() {
if (isWeb) {
return
}
ReactNativeHapticFeedback.trigger(hapticImpact)
}
static impact(type: HapticFeedbackTypes = hapticImpact) {
if (isWeb) {
return
}
ReactNativeHapticFeedback.trigger(type)
}
static selection() {
if (isWeb) {
return
}
ReactNativeHapticFeedback.trigger('selection')
}
static notification = (type: 'success' | 'warning' | 'error') => {
if (isWeb) {
return
}
switch (type) {
case 'success':
return ReactNativeHapticFeedback.trigger('notificationSuccess')
case 'warning':
return ReactNativeHapticFeedback.trigger('notificationWarning')
case 'error':
return ReactNativeHapticFeedback.trigger('notificationError')
}
}
}

27
src/lib/hooks/useCustomFeed.ts Normal file
View file

@ -0,0 +1,27 @@
import {useEffect, useState} from 'react'
import {useStores} from 'state/index'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
export function useCustomFeed(uri: string): CustomFeedModel | undefined {
const store = useStores()
const [item, setItem] = useState<CustomFeedModel | undefined>()
useEffect(() => {
async function fetchView() {
const res = await store.agent.app.bsky.feed.getFeedGenerator({
feed: uri,
})
const view = res.data.view
return view
}
async function buildFeedItem() {
const view = await fetchView()
if (view) {
const temp = new CustomFeedModel(store, view)
setItem(temp)
}
}
buildFeedItem()
}, [store, uri])
return item
}

84
src/lib/hooks/useDraggableScrollView.ts Normal file
View file

@ -0,0 +1,84 @@
import {useEffect, useRef, useMemo, ForwardedRef} from 'react'
import {Platform, findNodeHandle} from 'react-native'
import type {ScrollView} from 'react-native'
import {mergeRefs} from 'lib/merge-refs'
type Props<Scrollable extends ScrollView = ScrollView> = {
cursor?: string
outerRef?: ForwardedRef<Scrollable>
}
export function useDraggableScroll<Scrollable extends ScrollView = ScrollView>({
outerRef,
cursor = 'grab',
}: Props<Scrollable> = {}) {
const ref = useRef<Scrollable>(null)
useEffect(() => {
if (Platform.OS !== 'web' || !ref.current) {
return
}
const slider = findNodeHandle(ref.current) as unknown as HTMLDivElement
if (!slider) {
return
}
let isDragging = false
let isMouseDown = false
let startX = 0
let scrollLeft = 0
const mouseDown = (e: MouseEvent) => {
isMouseDown = true
startX = e.pageX - slider.offsetLeft
scrollLeft = slider.scrollLeft
slider.style.cursor = cursor
}
const mouseUp = () => {
if (isDragging) {
slider.addEventListener('click', e => e.stopPropagation(), {once: true})
}
isMouseDown = false
isDragging = false
slider.style.cursor = 'default'
}
const mouseMove = (e: MouseEvent) => {
if (!isMouseDown) {
return
}
// Require n pixels momement before start of drag (3 in this case )
const x = e.pageX - slider.offsetLeft
if (Math.abs(x - startX) < 3) {
return
}
isDragging = true
e.preventDefault()
const walk = x - startX
slider.scrollLeft = scrollLeft - walk
}
slider.addEventListener('mousedown', mouseDown)
window.addEventListener('mouseup', mouseUp)
window.addEventListener('mousemove', mouseMove)
return () => {
slider.removeEventListener('mousedown', mouseDown)
window.removeEventListener('mouseup', mouseUp)
window.removeEventListener('mousemove', mouseMove)
}
}, [cursor])
const refs = useMemo(
() => mergeRefs(outerRef ? [ref, outerRef] : [ref]),
[ref, outerRef],
)
return {
refs,
}
}

4
src/lib/hooks/useNavigationTabState.ts
View file

@ -6,14 +6,16 @@ export function useNavigationTabState() {
const res = {
isAtHome: getTabState(state, 'Home') !== TabState.Outside,
isAtSearch: getTabState(state, 'Search') !== TabState.Outside,
isAtFeeds: getTabState(state, 'Feeds') !== TabState.Outside,
isAtNotifications:
getTabState(state, 'Notifications') !== TabState.Outside,
isAtMyProfile: getTabState(state, 'MyProfile') !== TabState.Outside,
}
if (
!res.isAtHome &&
!res.isAtNotifications &&
!res.isAtSearch &&
!res.isAtFeeds &&
!res.isAtNotifications &&
!res.isAtMyProfile
) {
// HACK for some reason useNavigationState will give us pre-hydration results

61
src/lib/hooks/useOnMainScroll.ts
View file

@ -1,25 +1,56 @@
import {useState} from 'react'
import {useState, useCallback, useRef} from 'react'
import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
import {RootStoreModel} from 'state/index'
import {s} from 'lib/styles'
import {isDesktopWeb} from 'platform/detection'
const DY_LIMIT = isDesktopWeb ? 30 : 10
export type OnScrollCb = (
event: NativeSyntheticEvent<NativeScrollEvent>,
) => void
export type ResetCb = () => void
export function useOnMainScroll(store: RootStoreModel) {
let [lastY, setLastY] = useState(0)
let isMinimal = store.shell.minimalShellMode
return function onMainScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
const y = event.nativeEvent.contentOffset.y
const dy = y - (lastY || 0)
setLastY(y)
export function useOnMainScroll(
store: RootStoreModel,
): [OnScrollCb, boolean, ResetCb] {
let lastY = useRef(0)
let [isScrolledDown, setIsScrolledDown] = useState(false)
return [
useCallback(
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
const y = event.nativeEvent.contentOffset.y
const dy = y - (lastY.current || 0)
lastY.current = y
if (!isMinimal && y > 10 && dy > 10) {
store.shell.setMinimalShellMode(true)
isMinimal = true
} else if (isMinimal && (y <= 10 || dy < -10)) {
if (!store.shell.minimalShellMode && y > 10 && dy > DY_LIMIT) {
store.shell.setMinimalShellMode(true)
} else if (
store.shell.minimalShellMode &&
(y <= 10 || dy < DY_LIMIT * -1)
) {
store.shell.setMinimalShellMode(false)
}
if (
!isScrolledDown &&
event.nativeEvent.contentOffset.y > s.window.height
) {
setIsScrolledDown(true)
} else if (
isScrolledDown &&
event.nativeEvent.contentOffset.y < s.window.height
) {
setIsScrolledDown(false)
}
},
[store, isScrolledDown],
),
isScrolledDown,
useCallback(() => {
setIsScrolledDown(false)
store.shell.setMinimalShellMode(false)
isMinimal = false
}
}
lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf
}, [store, setIsScrolledDown]),
]
}

82
src/lib/icons.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import {StyleProp, TextStyle, ViewStyle} from 'react-native'
import Svg, {Path, Rect, Line, Ellipse} from 'react-native-svg'
import Svg, {Path, Rect, Line, Ellipse, Circle} from 'react-native-svg'
export function GridIcon({
style,
@ -88,7 +88,7 @@ export function HomeIconSolid({
<Path
fill="currentColor"
strokeWidth={strokeWidth}
d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
d="m 23.951,2 c -0.32,0.011 -0.628,0.124 -0.879,0.322 L 8.859,13.52 C 7.055,14.941 6,17.114 6,19.41 V 38.5 C 6,39.864 7.136,41 8.5,41 h 8 c 1.364,0 2.5,-1.136 2.5,-2.5 v -12 C 19,26.205 19.205,26 19.5,26 h 9 c 0.295,0 0.5,0.205 0.5,0.5 v 12 c 0,1.364 1.136,2.5 2.5,2.5 h 8 C 40.864,41 42,39.864 42,38.5 V 19.41 c 0,-2.296 -1.055,-4.469 -2.859,-5.89 L 24.928,2.322 C 24.65,2.103 24.304,1.989 23.951,2 Z"
/>
</Svg>
)
@ -472,7 +472,7 @@ export function HeartIcon({
size = 24,
strokeWidth = 1.5,
}: {
style?: StyleProp<ViewStyle>
style?: StyleProp<TextStyle>
size?: string | number
strokeWidth: number
}) {
@ -493,7 +493,7 @@ export function HeartIconSolid({
style,
size = 24,
}: {
style?: StyleProp<ViewStyle>
style?: StyleProp<TextStyle>
size?: string | number
}) {
return (
@ -883,3 +883,77 @@ export function HandIcon({
</Svg>
)
}
export function SatelliteDishIconSolid({
style,
size,
strokeWidth = 1.5,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
strokeWidth?: number
}) {
return (
<Svg
width={size || 24}
height={size || 24}
viewBox="0 0 22 22"
style={style}
fill="none"
stroke="none">
<Path
d="M16 19.6622C14.5291 20.513 12.8214 21 11 21C5.47715 21 1 16.5229 1 11C1 9.17858 1.48697 7.47088 2.33782 6.00002C3.18867 4.52915 6 7.66219 6 7.66219L14.5 16.1622C14.5 16.1622 17.4709 18.8113 16 19.6622Z"
fill="currentColor"
/>
<Path
d="M8 1.62961C9.04899 1.22255 10.1847 1 11.3704 1C16.6887 1 21 5.47715 21 11C21 12.0452 20.8456 13.053 20.5592 14"
stroke="currentColor"
strokeWidth={strokeWidth}
strokeLinecap="round"
/>
<Path
d="M9 5.38745C9.64553 5.13695 10.3444 5 11.0741 5C14.3469 5 17 7.75517 17 11.1538C17 11.797 16.905 12.4172 16.7287 13"
stroke="currentColor"
strokeWidth={strokeWidth}
strokeLinecap="round"
/>
<Circle cx="10" cy="12" r="2" fill="currentColor" />
</Svg>
)
}
export function SatelliteDishIcon({
style,
size,
strokeWidth = 1.5,
}: {
style?: StyleProp<TextStyle>
size?: string | number
strokeWidth?: number
}) {
return (
<Svg
fill="none"
viewBox="0 0 22 22"
strokeWidth={strokeWidth}
stroke="currentColor"
width={size}
height={size}
style={style}>
<Path d="M5.25593 8.3303L5.25609 8.33047L5.25616 8.33056L5.25621 8.33061L5.27377 8.35018L5.29289 8.3693L13.7929 16.8693L13.8131 16.8895L13.8338 16.908L13.834 16.9081L13.8342 16.9083L13.8342 16.9083L13.8345 16.9086L13.8381 16.9118L13.8574 16.9294C13.8752 16.9458 13.9026 16.9711 13.9377 17.0043C14.0081 17.0708 14.1088 17.1683 14.2258 17.2881C14.4635 17.5315 14.7526 17.8509 14.9928 18.1812C15.2067 18.4755 15.3299 18.7087 15.3817 18.8634C14.0859 19.5872 12.5926 20 11 20C6.02944 20 2 15.9706 2 11C2 9.4151 2.40883 7.9285 3.12619 6.63699C3.304 6.69748 3.56745 6.84213 3.89275 7.08309C4.24679 7.34534 4.58866 7.65673 4.84827 7.9106C4.97633 8.03583 5.08062 8.14337 5.152 8.21863C5.18763 8.25619 5.21487 8.28551 5.23257 8.30473L5.25178 8.32572L5.25571 8.33006L5.25593 8.3303ZM3.00217 6.60712C3.00217 6.6071 3.00267 6.6071 3.00372 6.60715C3.00271 6.60716 3.00218 6.60714 3.00217 6.60712Z" />
<Path
d="M8 1.62961C9.04899 1.22255 10.1847 1 11.3704 1C16.6887 1 21 5.47715 21 11C21 12.0452 20.8456 13.053 20.5592 14"
stroke-linecap="round"
/>
<Path
d="M9 5.38745C9.64553 5.13695 10.3444 5 11.0741 5C14.3469 5 17 7.75517 17 11.1538C17 11.797 16.905 12.4172 16.7287 13"
stroke-linecap="round"
/>
<Path
d="M12 12C12 12.7403 11.5978 13.3866 11 13.7324L8.26756 11C8.61337 10.4022 9.25972 10 10 10C11.1046 10 12 10.8954 12 12Z"
fill="currentColor"
stroke="none"
/>
</Svg>
)
}

2
src/lib/labeling/const.ts
View file

@ -62,7 +62,7 @@ export const CONFIGURABLE_LABEL_GROUPS: Record<
title: 'Violent / Bloody',
subtitle: 'Gore, self-harm, torture',
warning: 'Violence',
values: ['gore', 'self-harm', 'torture', 'nsfl'],
values: ['gore', 'self-harm', 'torture', 'nsfl', 'corpse'],
isAdultImagery: true,
},
hate: {

27
src/lib/link-meta/bsky.ts
View file

@ -1,3 +1,4 @@
import * as apilib from 'lib/api/index'
import {LikelyType, LinkMeta} from './link-meta'
// import {match as matchRoute} from 'view/routes'
import {convertBskyAppUrlIfNeeded, makeRecordUri} from '../strings/url-helpers'
@ -128,3 +129,29 @@ export async function getPostAsQuote(
},
}
}
export async function getFeedAsEmbed(
store: RootStoreModel,
url: string,
): Promise<apilib.ExternalEmbedDraft> {
url = convertBskyAppUrlIfNeeded(url)
const [_0, user, _1, rkey] = url.split('/').filter(Boolean)
const feed = makeRecordUri(user, 'app.bsky.feed.generator', rkey)
const res = await store.agent.app.bsky.feed.getFeedGenerator({feed})
return {
isLoading: false,
uri: feed,
meta: {
url: feed,
likelyType: LikelyType.AtpData,
title: res.data.view.displayName,
},
embed: {
$type: 'app.bsky.embed.record',
record: {
uri: res.data.view.uri,
cid: res.data.view.cid,
},
},
}
}

38
src/lib/link-meta/link-meta.ts
View file

@ -1,8 +1,7 @@
import he from 'he'
import {isBskyAppUrl} from '../strings/url-helpers'
import {RootStoreModel} from 'state/index'
import {extractBskyMeta} from './bsky'
import {extractHtmlMeta} from './html'
import {LINK_META_PROXY} from 'lib/constants'
export enum LikelyType {
HTML,
@ -54,26 +53,29 @@ export async function getLinkMeta(
try {
const controller = new AbortController()
const to = setTimeout(() => controller.abort(), timeout || 5e3)
const httpRes = await fetch(url, {
headers: {accept: 'text/html'},
signal: controller.signal,
})
const httpResBody = await httpRes.text()
const response = await fetch(
`${LINK_META_PROXY(
store.session.currentSession?.service || '',
)}${encodeURIComponent(url)}`,
)
const body = await response.json()
clearTimeout(to)
const httpResMeta = extractHtmlMeta({
html: httpResBody,
hostname: urlp?.hostname,
pathname: urlp?.pathname,
})
meta.title = httpResMeta.title ? he.decode(httpResMeta.title) : undefined
meta.description = httpResMeta.description
? he.decode(httpResMeta.description)
: undefined
meta.image = httpResMeta.image
const {description, error, image, title} = body
if (error !== '') {
throw new Error(error)
}
meta.description = description
meta.image = image
meta.title = title
} catch (e) {
// failed
console.error(e)
meta.error = 'Failed to fetch link'
meta.error = e instanceof Error ? e.toString() : 'Failed to fetch link'
}
return meta

44
src/lib/media/manip.ts
View file

@ -6,52 +6,8 @@ import * as RNFS from 'react-native-fs'
import uuid from 'react-native-uuid'
import * as Sharing from 'expo-sharing'
import {Dimensions} from './types'
import {POST_IMG_MAX} from 'lib/constants'
import {isAndroid, isIOS} from 'platform/detection'
export async function compressAndResizeImageForPost(
image: Image,
): Promise<Image> {
const uri = `file://${image.path}`
let resized: Omit<Image, 'mime'>
for (let i = 0; i < 9; i++) {
const quality = 100 - i * 10
try {
resized = await ImageResizer.createResizedImage(
uri,
POST_IMG_MAX.width,
POST_IMG_MAX.height,
'JPEG',
quality,
undefined,
undefined,
undefined,
{mode: 'cover'},
)
} catch (err) {
throw new Error(`Failed to resize: ${err}`)
}
if (resized.size < POST_IMG_MAX.size) {
const path = await moveToPermanentPath(resized.path)
return {
path,
mime: 'image/jpeg',
size: resized.size,
height: resized.height,
width: resized.width,
}
}
}
throw new Error(
`This image is too big! We couldn't compress it down to ${POST_IMG_MAX.size} bytes`,
)
}
export async function compressIfNeeded(
img: Image,
maxSize: number = 1000000,

19
src/lib/media/manip.web.ts
View file

@ -1,25 +1,6 @@
import {Dimensions} from './types'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {getDataUriSize, blobToDataUri} from './util'
import {POST_IMG_MAX} from 'lib/constants'
export async function compressAndResizeImageForPost({
path,
width,
height,
}: {
path: string
width: number
height: number
}): Promise<RNImage> {
// Compression is handled in `doResize` via `quality`
return await doResize(path, {
width,
height,
maxSize: POST_IMG_MAX.size,
mode: 'stretch',
})
}
export async function compressIfNeeded(
img: RNImage,

4
src/lib/media/picker.e2e.tsx
View file

@ -2,7 +2,7 @@ import {RootStoreModel} from 'state/index'
import {Image as RNImage} from 'react-native-image-crop-picker'
import RNFS from 'react-native-fs'
import {CropperOptions} from './types'
import {compressAndResizeImageForPost} from './manip'
import {compressIfNeeded} from './manip'
let _imageCounter = 0
async function getFile() {
@ -13,7 +13,7 @@ async function getFile() {
.join('/'),
)
const file = files[_imageCounter++ % files.length]
return await compressAndResizeImageForPost({
return await compressIfNeeded({
path: file.path,
mime: 'image/jpeg',
size: file.size,

17
src/lib/media/util.ts
View file

@ -1,5 +1,3 @@
import {Dimensions} from './types'
export function extractDataUriMime(uri: string): string {
return uri.substring(uri.indexOf(':') + 1, uri.indexOf(';'))
}
@ -10,21 +8,6 @@ export function getDataUriSize(uri: string): number {
return Math.round((uri.length * 3) / 4)
}
export function scaleDownDimensions(
dim: Dimensions,
max: Dimensions,
): Dimensions {
if (dim.width < max.width && dim.height < max.height) {
return dim
}
const wScale = dim.width > max.width ? max.width / dim.width : 1
const hScale = dim.height > max.height ? max.height / dim.height : 1
if (wScale < hScale) {
return {width: dim.width * wScale, height: dim.height * wScale}
}
return {width: dim.width * hScale, height: dim.height * hScale}
}
export function isUriImage(uri: string) {
return /\.(jpg|jpeg|png).*$/.test(uri)
}

27
src/lib/merge-refs.ts Normal file
View file

@ -0,0 +1,27 @@
/**
* This TypeScript function merges multiple React refs into a single ref callback.
* When developing low level UI components, it is common to have to use a local ref
* but also support an external one using React.forwardRef.
* Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
* Today a ref can be a function or an object, tomorrow it could be another thing, who knows.
* This utility handles compatibility for you.
* This function is inspired by https://github.com/gregberge/react-merge-refs
* @param refs - An array of React refs, which can be either `React.MutableRefObject<T>` or
* `React.LegacyRef<T>`. These refs are used to store references to DOM elements or React components.
* The `mergeRefs` function takes in an array of these refs and returns a callback function that
* @returns The function `mergeRefs` is being returned. It takes an array of mutable or legacy refs and
* returns a ref callback function that can be used to merge multiple refs into a single ref.
*/
export function mergeRefs<T = any>(
refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
): React.RefCallback<T> {
return value => {
refs.forEach(ref => {
if (typeof ref === 'function') {
ref(value)
} else if (ref != null) {
;(ref as React.MutableRefObject<T | null>).current = value
}
})
}
}

30
src/lib/notifee.ts
View file

@ -41,26 +41,26 @@ export function displayNotification(
}
export function displayNotificationFromModel(
notif: NotificationsFeedItemModel,
notification: NotificationsFeedItemModel,
) {
let author = sanitizeDisplayName(
notif.author.displayName || notif.author.handle,
notification.author.displayName || notification.author.handle,
)
let title: string
let body: string = ''
if (notif.isLike) {
if (notification.isLike) {
title = `${author} liked your post`
body = notif.additionalPost?.thread?.postRecord?.text || ''
} else if (notif.isRepost) {
body = notification.additionalPost?.thread?.postRecord?.text || ''
} else if (notification.isRepost) {
title = `${author} reposted your post`
body = notif.additionalPost?.thread?.postRecord?.text || ''
} else if (notif.isMention) {
body = notification.additionalPost?.thread?.postRecord?.text || ''
} else if (notification.isMention) {
title = `${author} mentioned you`
body = notif.additionalPost?.thread?.postRecord?.text || ''
} else if (notif.isReply) {
body = notification.additionalPost?.thread?.postRecord?.text || ''
} else if (notification.isReply) {
title = `${author} replied to your post`
body = notif.additionalPost?.thread?.postRecord?.text || ''
} else if (notif.isFollow) {
body = notification.additionalPost?.thread?.postRecord?.text || ''
} else if (notification.isFollow) {
title = 'New follower!'
body = `${author} has followed you`
} else {
@ -68,10 +68,12 @@ export function displayNotificationFromModel(
}
let image
if (
AppBskyEmbedImages.isView(notif.additionalPost?.thread?.post.embed) &&
notif.additionalPost?.thread?.post.embed.images[0]?.thumb
AppBskyEmbedImages.isView(
notification.additionalPost?.thread?.post.embed,
) &&
notification.additionalPost?.thread?.post.embed.images[0]?.thumb
) {
image = notif.additionalPost.thread.post.embed.images[0].thumb
image = notification.additionalPost.thread.post.embed.images[0].thumb
}
return displayNotification(title, body, image)
}

2
src/lib/routes/helpers.ts
View file

@ -11,7 +11,7 @@ export function getCurrentRoute(state: State) {
export function isStateAtTabRoot(state: State | undefined) {
if (!state) {
// NOTE
// if state is not defined it's because init is occuring
// if state is not defined it's because init is occurring
// and therefore we can safely assume we're at root
// -prf
return true

12
src/lib/routes/types.ts
View file

@ -9,6 +9,7 @@ export type CommonNavigatorParams = {
ModerationMuteLists: undefined
ModerationMutedAccounts: undefined
ModerationBlockedAccounts: undefined
DiscoverFeeds: undefined
Settings: undefined
Profile: {name: string; hideBackButton?: boolean}
ProfileFollowers: {name: string}
@ -17,6 +18,8 @@ export type CommonNavigatorParams = {
PostThread: {name: string; rkey: string}
PostLikedBy: {name: string; rkey: string}
PostRepostedBy: {name: string; rkey: string}
CustomFeed: {name: string; rkey: string}
CustomFeedLikedBy: {name: string; rkey: string}
Debug: undefined
Log: undefined
Support: undefined
@ -25,11 +28,13 @@ export type CommonNavigatorParams = {
CommunityGuidelines: undefined
CopyrightPolicy: undefined
AppPasswords: undefined
SavedFeeds: undefined
}
export type BottomTabNavigatorParams = CommonNavigatorParams & {
HomeTab: undefined
SearchTab: undefined
FeedsTab: undefined
NotificationsTab: undefined
MyProfileTab: undefined
}
@ -42,6 +47,10 @@ export type SearchTabNavigatorParams = CommonNavigatorParams & {
Search: {q?: string}
}
export type FeedsTabNavigatorParams = CommonNavigatorParams & {
Feeds: undefined
}
export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
Notifications: undefined
}
@ -53,6 +62,7 @@ export type MyProfileTabNavigatorParams = CommonNavigatorParams & {
export type FlatNavigatorParams = CommonNavigatorParams & {
Home: undefined
Search: {q?: string}
Feeds: undefined
Notifications: undefined
}
@ -61,6 +71,8 @@ export type AllNavigatorParams = CommonNavigatorParams & {
Home: undefined
SearchTab: undefined
Search: {q?: string}
FeedsTab: undefined
Feeds: undefined
NotificationsTab: undefined
Notifications: undefined
MyProfileTab: undefined

2
src/lib/strings/rich-text-detection.ts
View file

@ -27,7 +27,7 @@ export function detectLinkables(text: string): DetectedLinkable[] {
matchValue = matchValue.slice(1)
}
// strip ending puncuation
// strip ending punctuation
if (/[.,;!?]$/.test(matchValue)) {
matchValue = matchValue.slice(0, -1)
}

14
src/lib/strings/time.ts
View file

@ -1,8 +1,8 @@
const MINUTE = 60
const HOUR = MINUTE * 60
const DAY = HOUR * 24
const MONTH = DAY * 28
const YEAR = DAY * 365
const WEEK = DAY * 7
export function ago(date: number | string | Date): string {
let ts: number
if (typeof date === 'string') {
@ -19,12 +19,14 @@ export function ago(date: number | string | Date): string {
return `${Math.floor(diffSeconds / MINUTE)}m`
} else if (diffSeconds < DAY) {
return `${Math.floor(diffSeconds / HOUR)}h`
} else if (diffSeconds < MONTH) {
} else if (diffSeconds < WEEK) {
return `${Math.floor(diffSeconds / DAY)}d`
} else if (diffSeconds < YEAR) {
return `${Math.floor(diffSeconds / MONTH)}mo`
} else {
return new Date(ts).toLocaleDateString()
return new Date(ts).toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})
}
}

12
src/lib/strings/url-helpers.ts
View file

@ -82,6 +82,18 @@ export function isBskyPostUrl(url: string): boolean {
return false
}
export function isBskyCustomFeedUrl(url: string): boolean {
if (isBskyAppUrl(url)) {
try {
const urlp = new URL(url)
return /profile\/(?<name>[^/]+)\/feed\/(?<rkey>[^/]+)/i.test(
urlp.pathname,
)
} catch {}
}
return false
}
export function convertBskyAppUrlIfNeeded(url: string): string {
if (isBskyAppUrl(url)) {
try {

9
src/lib/styles.ts
View file

@ -1,4 +1,4 @@
import {StyleProp, StyleSheet, TextStyle} from 'react-native'
import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
import {Theme, TypographyVariant} from './ThemeContext'
import {isMobileWeb} from 'platform/detection'
@ -52,6 +52,7 @@ export const colors = {
green5: '#082b03',
unreadNotifBg: '#ebf6ff',
brandBlue: '#0066FF',
}
export const gradients = {
@ -169,6 +170,10 @@ export const s = StyleSheet.create({
w100pct: {width: '100%'},
h100pct: {height: '100%'},
hContentRegion: isMobileWeb ? {flex: 1} : {height: '100%'},
window: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
// text align
textLeft: {textAlign: 'left'},
@ -214,6 +219,8 @@ export const s = StyleSheet.create({
green3: {color: colors.green3},
green4: {color: colors.green4},
green5: {color: colors.green5},
brandBlue: {color: colors.brandBlue},
})
export function lh(

2
src/locale/en/community-guidelines.tsx
View file

@ -4,7 +4,7 @@ import {H3, H4, P, UL, LI, A, EM, OL} from 'view/com/util/Html'
export default function () {
return (
<>
<H4>Last Updated:&nbsp;2023/04/06</H4>
<H4>Last Updated:&nbsp;April 6, 2023</H4>
<P>
The Bluesky app is built on a decentralized social networking protocol,
the AT Protocol (atproto). Atproto is an open protocol that supports

2
src/locale/en/copyright-policy.tsx
View file

@ -4,7 +4,7 @@ import {H3, H4, P, UL, LI, A} from 'view/com/util/Html'
export default function () {
return (
<>
<H4>Last Updated:&nbsp;2023/04/06</H4>
<H4>Last Updated:&nbsp;April 6, 2023</H4>
<P>Notification of Copyright Infringement</P>
<P>
Bluesky, PBLLC d.b.a. Bluesky (&ldquo;Bluesky&rdquo;) respects the

2
src/locale/en/privacy-policy.tsx
View file

@ -4,7 +4,7 @@ import {H2, H4, P, UL, LI, A} from 'view/com/util/Html'
export default function () {
return (
<>
<H4>Last Updated:&nbsp;2023/02/02</H4>
<H4>Last Updated:&nbsp;February 2, 2023</H4>
<P>
This Privacy Policy is designed to help you understand how Bluesky,
PBLLC d.b.a. Bluesky (“Bluesky,” &nbsp;“we,” “us,” or&nbsp;“our”)

2
src/locale/en/terms-of-service.tsx
View file

@ -4,7 +4,7 @@ import {H4, P, OL, LI, A, STRONG, EM, UL} from 'view/com/util/Html'
export default function () {
return (
<>
<H4>Last Updated:&nbsp;2023/04/06</H4>
<H4>Last Updated:&nbsp;April 6, 2023</H4>
<P>
Welcome to the Bluesky, PBLLC d.b.a. Bluesky (&ldquo;Bluesky&rdquo;,
&ldquo;we&rdquo;, or &ldquo;us&rdquo;) website located at{' '}

2
src/platform/polyfills.ts
View file

@ -23,7 +23,7 @@ globalThis.atob = (str: string): string => {
)
}
// Adding the padding if missing, for semplicity
// Adding the padding if missing, for simplicity
str += '=='.slice(2 - (str.length & 3))
var bitmap,
result = '',

5
src/routes.ts
View file

@ -3,6 +3,8 @@ import {Router} from 'lib/routes/router'
export const router = new Router({
Home: '/',
Search: '/search',
Feeds: '/feeds',
DiscoverFeeds: '/search/feeds',
Notifications: '/notifications',
Settings: '/settings',
Moderation: '/moderation',
@ -16,9 +18,12 @@ export const router = new Router({
PostThread: '/profile/:name/post/:rkey',
PostLikedBy: '/profile/:name/post/:rkey/liked-by',
PostRepostedBy: '/profile/:name/post/:rkey/reposted-by',
CustomFeed: '/profile/:name/feed/:rkey',
CustomFeedLikedBy: '/profile/:name/feed/:rkey/liked-by',
Debug: '/sys/debug',
Log: '/sys/log',
AppPasswords: '/settings/app-passwords',
SavedFeeds: '/settings/saved-feeds',
Support: '/support',
PrivacyPolicy: '/support/privacy',
TermsOfService: '/support/tos',

1
src/state/models/cache/image-sizes.ts vendored
View file

@ -16,6 +16,7 @@ export class ImageSizesCache {
if (Dimensions) {
return Dimensions
}
const prom =
this.activeRequests.get(uri) ||
new Promise<Dimensions>(resolve => {

13
src/state/models/content/post-thread.ts
View file

@ -118,7 +118,7 @@ export class PostThreadItemModel {
assignTreeModels(
v: AppBskyFeedDefs.ThreadViewPost,
higlightedPostUri: string,
highlightedPostUri: string,
includeParent = true,
includeChildren = true,
) {
@ -130,7 +130,12 @@ export class PostThreadItemModel {
parentModel._showChildReplyLine = true
if (v.parent.parent) {
parentModel._showParentReplyLine = true
parentModel.assignTreeModels(v.parent, higlightedPostUri, true, false)
parentModel.assignTreeModels(
v.parent,
highlightedPostUri,
true,
false,
)
}
this.parent = parentModel
} else if (AppBskyFeedDefs.isNotFoundPost(v.parent)) {
@ -147,10 +152,10 @@ export class PostThreadItemModel {
const itemModel = new PostThreadItemModel(this.rootStore, item)
itemModel._depth = this._depth + 1
itemModel._showParentReplyLine =
itemModel.parentUri !== higlightedPostUri && replies.length === 0
itemModel.parentUri !== highlightedPostUri && replies.length === 0
if (item.replies?.length) {
itemModel._showChildReplyLine = true
itemModel.assignTreeModels(item, higlightedPostUri, false, true)
itemModel.assignTreeModels(item, highlightedPostUri, false, true)
}
replies.push(itemModel)
} else if (AppBskyFeedDefs.isNotFoundPost(item)) {

97
src/state/models/discovery/feeds.ts Normal file
View file

@ -0,0 +1,97 @@
import {makeAutoObservable} from 'mobx'
import {AppBskyUnspeccedGetPopularFeedGenerators} from '@atproto/api'
import {RootStoreModel} from '../root-store'
import {bundleAsync} from 'lib/async/bundle'
import {cleanError} from 'lib/strings/errors'
import {CustomFeedModel} from '../feeds/custom-feed'
export class FeedsDiscoveryModel {
// state
isLoading = false
isRefreshing = false
hasLoaded = false
error = ''
// data
feeds: CustomFeedModel[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(
this,
{
rootStore: false,
},
{autoBind: true},
)
}
get hasMore() {
return false
}
get hasContent() {
return this.feeds.length > 0
}
get hasError() {
return this.error !== ''
}
get isEmpty() {
return this.hasLoaded && !this.hasContent
}
// public api
// =
refresh = bundleAsync(async () => {
this._xLoading()
try {
const res =
await this.rootStore.agent.app.bsky.unspecced.getPopularFeedGenerators(
{},
)
this._replaceAll(res)
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
})
clear() {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = false
this.error = ''
this.feeds = []
}
// state transitions
// =
_xLoading() {
this.isLoading = true
this.isRefreshing = true
this.error = ''
}
_xIdle(err?: any) {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = true
this.error = cleanError(err)
if (err) {
this.rootStore.log.error('Failed to fetch popular feeds', err)
}
}
// helper functions
// =
_replaceAll(res: AppBskyUnspeccedGetPopularFeedGenerators.Response) {
this.feeds = []
for (const f of res.data.feeds) {
this.feeds.push(new CustomFeedModel(this.rootStore, f))
}
}
}

120
src/state/models/feeds/custom-feed.ts Normal file
View file

@ -0,0 +1,120 @@
import {AppBskyFeedDefs} from '@atproto/api'
import {makeAutoObservable, runInAction} from 'mobx'
import {RootStoreModel} from 'state/models/root-store'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {updateDataOptimistically} from 'lib/async/revertible'
export class CustomFeedModel {
// data
_reactKey: string
data: AppBskyFeedDefs.GeneratorView
isOnline: boolean
isValid: boolean
constructor(
public rootStore: RootStoreModel,
view: AppBskyFeedDefs.GeneratorView,
isOnline?: boolean,
isValid?: boolean,
) {
this._reactKey = view.uri
this.data = view
this.isOnline = isOnline ?? true
this.isValid = isValid ?? true
makeAutoObservable(
this,
{
rootStore: false,
},
{autoBind: true},
)
}
// local actions
// =
get uri() {
return this.data.uri
}
get displayName() {
if (this.data.displayName) {
return sanitizeDisplayName(this.data.displayName)
}
return `Feed by @${this.data.creator.handle}`
}
get isSaved() {
return this.rootStore.preferences.savedFeeds.includes(this.uri)
}
get isLiked() {
return this.data.viewer?.like
}
// public apis
// =
async save() {
await this.rootStore.preferences.addSavedFeed(this.uri)
}
async unsave() {
await this.rootStore.preferences.removeSavedFeed(this.uri)
}
async like() {
try {
await updateDataOptimistically(
this.data,
() => {
this.data.viewer = this.data.viewer || {}
this.data.viewer.like = 'pending'
this.data.likeCount = (this.data.likeCount || 0) + 1
},
() => this.rootStore.agent.like(this.data.uri, this.data.cid),
res => {
this.data.viewer = this.data.viewer || {}
this.data.viewer.like = res.uri
},
)
} catch (e: any) {
this.rootStore.log.error('Failed to like feed', e)
}
}
async unlike() {
if (!this.data.viewer?.like) {
return
}
try {
const likeUri = this.data.viewer.like
await updateDataOptimistically(
this.data,
() => {
this.data.viewer = this.data.viewer || {}
this.data.viewer.like = undefined
this.data.likeCount = (this.data.likeCount || 1) - 1
},
() => this.rootStore.agent.deleteLike(likeUri),
)
} catch (e: any) {
this.rootStore.log.error('Failed to unlike feed', e)
}
}
async reload() {
const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
feed: this.data.uri,
})
runInAction(() => {
this.data = res.data.view
this.isOnline = res.data.isOnline
this.isValid = res.data.isValid
})
}
serialize() {
return JSON.stringify(this.data)
}
}

216
src/state/models/feeds/multi-feed.ts Normal file
View file

@ -0,0 +1,216 @@
import {makeAutoObservable, runInAction} from 'mobx'
import {AtUri} from '@atproto/api'
import {bundleAsync} from 'lib/async/bundle'
import {RootStoreModel} from '../root-store'
import {CustomFeedModel} from './custom-feed'
import {PostsFeedModel} from './posts'
import {PostsFeedSliceModel} from './post'
const FEED_PAGE_SIZE = 5
const FEEDS_PAGE_SIZE = 3
export type MultiFeedItem =
| {
_reactKey: string
type: 'header'
}
| {
_reactKey: string
type: 'feed-header'
avatar: string | undefined
title: string
}
| {
_reactKey: string
type: 'feed-slice'
slice: PostsFeedSliceModel
}
| {
_reactKey: string
type: 'feed-loading'
}
| {
_reactKey: string
type: 'feed-error'
error: string
}
| {
_reactKey: string
type: 'feed-footer'
title: string
uri: string
}
| {
_reactKey: string
type: 'footer'
}
export class PostsMultiFeedModel {
// state
isLoading = false
isRefreshing = false
hasLoaded = false
hasMore = true
// data
feedInfos: CustomFeedModel[] = []
feeds: PostsFeedModel[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, {rootStore: false}, {autoBind: true})
}
get hasContent() {
return this.feeds.length !== 0
}
get isEmpty() {
return this.hasLoaded && !this.hasContent
}
get items() {
const items: MultiFeedItem[] = [{_reactKey: '__header__', type: 'header'}]
for (let i = 0; i < this.feedInfos.length; i++) {
if (!this.feeds[i]) {
break
}
const feed = this.feeds[i]
const feedInfo = this.feedInfos[i]
const urip = new AtUri(feedInfo.uri)
items.push({
_reactKey: `__feed_header_${i}__`,
type: 'feed-header',
avatar: feedInfo.data.avatar,
title: feedInfo.displayName,
})
if (feed.isLoading) {
items.push({
_reactKey: `__feed_loading_${i}__`,
type: 'feed-loading',
})
} else if (feed.hasError) {
items.push({
_reactKey: `__feed_error_${i}__`,
type: 'feed-error',
error: feed.error,
})
} else {
for (let j = 0; j < feed.slices.length; j++) {
items.push({
_reactKey: `__feed_slice_${i}_${j}__`,
type: 'feed-slice',
slice: feed.slices[j],
})
}
}
items.push({
_reactKey: `__feed_footer_${i}__`,
type: 'feed-footer',
title: feedInfo.displayName,
uri: `/profile/${feedInfo.data.creator.did}/feed/${urip.rkey}`,
})
}
if (!this.hasMore) {
items.push({_reactKey: '__footer__', type: 'footer'})
}
return items
}
// public api
// =
/**
* Nuke all data
*/
clear() {
this.rootStore.log.debug('MultiFeedModel:clear')
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = false
this.hasMore = true
this.feeds = []
}
/**
* Register any event listeners. Returns a cleanup function.
*/
registerListeners() {
const sub = this.rootStore.onPostDeleted(this.onPostDeleted.bind(this))
return () => sub.remove()
}
/**
* Reset and load
*/
async refresh() {
this.feedInfos = this.rootStore.me.savedFeeds.all.slice() // capture current feeds
await this.loadMore(true)
}
/**
* Load more posts to the end of the feed
*/
loadMore = bundleAsync(async (isRefreshing: boolean = false) => {
if (!isRefreshing && !this.hasMore) {
return
}
if (isRefreshing) {
this.isRefreshing = true // set optimistically for UI
this.feeds = []
}
this._xLoading(isRefreshing)
const start = this.feeds.length
const newFeeds: PostsFeedModel[] = []
for (
let i = start;
i < start + FEEDS_PAGE_SIZE && i < this.feedInfos.length;
i++
) {
const feed = new PostsFeedModel(this.rootStore, 'custom', {
feed: this.feedInfos[i].uri,
})
feed.pageSize = FEED_PAGE_SIZE
await feed.setup()
newFeeds.push(feed)
}
runInAction(() => {
this.feeds = this.feeds.concat(newFeeds)
this.hasMore = this.feeds.length < this.feedInfos.length
})
this._xIdle()
})
/**
* Attempt to load more again after a failure
*/
async retryLoadMore() {
this.hasMore = true
return this.loadMore()
}
/**
* Removes posts from the feed upon deletion.
*/
onPostDeleted(uri: string) {
for (const f of this.feeds) {
f.onPostDeleted(uri)
}
}
// state transitions
// =
_xLoading(isRefreshing = false) {
this.isLoading = true
this.isRefreshing = isRefreshing
}
_xIdle() {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = true
}
// helper functions
// =
}

10
src/state/models/feeds/notifications.ts
View file

@ -181,7 +181,7 @@ export class NotificationsFeedItemModel {
return false
}
get additionaDataUri(): string | undefined {
get additionalDataUri(): string | undefined {
if (this.isReply || this.isQuote || this.isMention) {
return this.uri
} else if (this.isLike || this.isRepost) {
@ -290,7 +290,9 @@ export class NotificationsFeedModel {
}
get hasNewLatest() {
return this.queuedNotifications && this.queuedNotifications?.length > 0
return Boolean(
this.queuedNotifications && this.queuedNotifications?.length > 0,
)
}
get unreadCountLabel(): string {
@ -490,7 +492,7 @@ export class NotificationsFeedModel {
'mostRecent',
res.data.notifications[0],
)
const addedUri = notif.additionaDataUri
const addedUri = notif.additionalDataUri
if (addedUri) {
const postsRes = await this.rootStore.agent.app.bsky.feed.getPosts({
uris: [addedUri],
@ -583,7 +585,7 @@ export class NotificationsFeedModel {
`item-${_idCounter++}`,
item,
)
const uri = itemModel.additionaDataUri
const uri = itemModel.additionalDataUri
if (uri) {
const models = addedPostMap.get(uri) || []
models.push(itemModel)

265
src/state/models/feeds/post.ts Normal file
View file

@ -0,0 +1,265 @@
import {makeAutoObservable} from 'mobx'
import {AppBskyFeedDefs, AppBskyFeedPost, RichText} from '@atproto/api'
import {RootStoreModel} from '../root-store'
import {updateDataOptimistically} from 'lib/async/revertible'
import {PostLabelInfo, PostModeration} from 'lib/labeling/types'
import {FeedViewPostsSlice} from 'lib/api/feed-manip'
import {
getEmbedLabels,
getEmbedMuted,
getEmbedMutedByList,
getEmbedBlocking,
getEmbedBlockedBy,
getPostModeration,
filterAccountLabels,
filterProfileLabels,
mergePostModerations,
} from 'lib/labeling/helpers'
type FeedViewPost = AppBskyFeedDefs.FeedViewPost
type ReasonRepost = AppBskyFeedDefs.ReasonRepost
type PostView = AppBskyFeedDefs.PostView
let _idCounter = 0
export class PostsFeedItemModel {
// ui state
_reactKey: string = ''
// data
post: PostView
postRecord?: AppBskyFeedPost.Record
reply?: FeedViewPost['reply']
reason?: FeedViewPost['reason']
richText?: RichText
constructor(
public rootStore: RootStoreModel,
reactKey: string,
v: FeedViewPost,
) {
this._reactKey = reactKey
this.post = v.post
if (AppBskyFeedPost.isRecord(this.post.record)) {
const valid = AppBskyFeedPost.validateRecord(this.post.record)
if (valid.success) {
this.postRecord = this.post.record
this.richText = new RichText(this.postRecord, {cleanNewlines: true})
} else {
this.postRecord = undefined
this.richText = undefined
rootStore.log.warn(
'Received an invalid app.bsky.feed.post record',
valid.error,
)
}
} else {
this.postRecord = undefined
this.richText = undefined
rootStore.log.warn(
'app.bsky.feed.getTimeline or app.bsky.feed.getAuthorFeed served an unexpected record type',
this.post.record,
)
}
this.reply = v.reply
this.reason = v.reason
makeAutoObservable(this, {rootStore: false})
}
get rootUri(): string {
if (this.reply?.root.uri) {
return this.reply.root.uri
}
return this.post.uri
}
get isThreadMuted() {
return this.rootStore.mutedThreads.uris.has(this.rootUri)
}
get labelInfo(): PostLabelInfo {
return {
postLabels: (this.post.labels || []).concat(
getEmbedLabels(this.post.embed),
),
accountLabels: filterAccountLabels(this.post.author.labels),
profileLabels: filterProfileLabels(this.post.author.labels),
isMuted:
this.post.author.viewer?.muted ||
getEmbedMuted(this.post.embed) ||
false,
mutedByList:
this.post.author.viewer?.mutedByList ||
getEmbedMutedByList(this.post.embed),
isBlocking:
!!this.post.author.viewer?.blocking ||
getEmbedBlocking(this.post.embed) ||
false,
isBlockedBy:
!!this.post.author.viewer?.blockedBy ||
getEmbedBlockedBy(this.post.embed) ||
false,
}
}
get moderation(): PostModeration {
return getPostModeration(this.rootStore, this.labelInfo)
}
copy(v: FeedViewPost) {
this.post = v.post
this.reply = v.reply
this.reason = v.reason
}
copyMetrics(v: FeedViewPost) {
this.post.replyCount = v.post.replyCount
this.post.repostCount = v.post.repostCount
this.post.likeCount = v.post.likeCount
this.post.viewer = v.post.viewer
}
get reasonRepost(): ReasonRepost | undefined {
if (this.reason?.$type === 'app.bsky.feed.defs#reasonRepost') {
return this.reason as ReasonRepost
}
}
async toggleLike() {
this.post.viewer = this.post.viewer || {}
if (this.post.viewer.like) {
const url = this.post.viewer.like
await updateDataOptimistically(
this.post,
() => {
this.post.likeCount = (this.post.likeCount || 0) - 1
this.post.viewer!.like = undefined
},
() => this.rootStore.agent.deleteLike(url),
)
} else {
await updateDataOptimistically(
this.post,
() => {
this.post.likeCount = (this.post.likeCount || 0) + 1
this.post.viewer!.like = 'pending'
},
() => this.rootStore.agent.like(this.post.uri, this.post.cid),
res => {
this.post.viewer!.like = res.uri
},
)
}
}
async toggleRepost() {
this.post.viewer = this.post.viewer || {}
if (this.post.viewer?.repost) {
const url = this.post.viewer.repost
await updateDataOptimistically(
this.post,
() => {
this.post.repostCount = (this.post.repostCount || 0) - 1
this.post.viewer!.repost = undefined
},
() => this.rootStore.agent.deleteRepost(url),
)
} else {
await updateDataOptimistically(
this.post,
() => {
this.post.repostCount = (this.post.repostCount || 0) + 1
this.post.viewer!.repost = 'pending'
},
() => this.rootStore.agent.repost(this.post.uri, this.post.cid),
res => {
this.post.viewer!.repost = res.uri
},
)
}
}
async toggleThreadMute() {
if (this.isThreadMuted) {
this.rootStore.mutedThreads.uris.delete(this.rootUri)
} else {
this.rootStore.mutedThreads.uris.add(this.rootUri)
}
}
async delete() {
await this.rootStore.agent.deletePost(this.post.uri)
this.rootStore.emitPostDeleted(this.post.uri)
}
}
export class PostsFeedSliceModel {
// ui state
_reactKey: string = ''
// data
items: PostsFeedItemModel[] = []
constructor(
public rootStore: RootStoreModel,
reactKey: string,
slice: FeedViewPostsSlice,
) {
this._reactKey = reactKey
for (const item of slice.items) {
this.items.push(
new PostsFeedItemModel(rootStore, `slice-${_idCounter++}`, item),
)
}
makeAutoObservable(this, {rootStore: false})
}
get uri() {
if (this.isReply) {
return this.items[1].post.uri
}
return this.items[0].post.uri
}
get isThread() {
return (
this.items.length > 1 &&
this.items.every(
item => item.post.author.did === this.items[0].post.author.did,
)
)
}
get isReply() {
return this.items.length > 1 && !this.isThread
}
get rootItem() {
if (this.isReply) {
return this.items[1]
}
return this.items[0]
}
get moderation() {
return mergePostModerations(this.items.map(item => item.moderation))
}
containsUri(uri: string) {
return !!this.items.find(item => item.post.uri === uri)
}
isThreadParentAt(i: number) {
if (this.items.length === 1) {
return false
}
return i < this.items.length - 1
}
isThreadChildAt(i: number) {
if (this.items.length === 1) {
return false
}
return i > 0
}
}

363
src/state/models/feeds/posts.ts
View file

@ -1,11 +1,8 @@
import {makeAutoObservable, runInAction} from 'mobx'
import {
AppBskyFeedGetTimeline as GetTimeline,
AppBskyFeedDefs,
AppBskyFeedPost,
AppBskyFeedGetAuthorFeed as GetAuthorFeed,
RichText,
jsonToLex,
AppBskyFeedGetFeed as GetCustomFeed,
} from '@atproto/api'
import AwaitLock from 'await-lock'
import {bundleAsync} from 'lib/async/bundle'
@ -19,269 +16,11 @@ import {
mergePosts,
} from 'lib/api/build-suggested-posts'
import {FeedTuner, FeedViewPostsSlice} from 'lib/api/feed-manip'
import {updateDataOptimistically} from 'lib/async/revertible'
import {PostLabelInfo, PostModeration} from 'lib/labeling/types'
import {
getEmbedLabels,
getEmbedMuted,
getEmbedMutedByList,
getEmbedBlocking,
getEmbedBlockedBy,
getPostModeration,
mergePostModerations,
filterAccountLabels,
filterProfileLabels,
} from 'lib/labeling/helpers'
type FeedViewPost = AppBskyFeedDefs.FeedViewPost
type ReasonRepost = AppBskyFeedDefs.ReasonRepost
type PostView = AppBskyFeedDefs.PostView
import {PostsFeedSliceModel} from './post'
const PAGE_SIZE = 30
let _idCounter = 0
export class PostsFeedItemModel {
// ui state
_reactKey: string = ''
// data
post: PostView
postRecord?: AppBskyFeedPost.Record
reply?: FeedViewPost['reply']
reason?: FeedViewPost['reason']
richText?: RichText
constructor(
public rootStore: RootStoreModel,
reactKey: string,
v: FeedViewPost,
) {
this._reactKey = reactKey
this.post = v.post
if (AppBskyFeedPost.isRecord(this.post.record)) {
const valid = AppBskyFeedPost.validateRecord(this.post.record)
if (valid.success) {
this.postRecord = this.post.record
this.richText = new RichText(this.postRecord, {cleanNewlines: true})
} else {
this.postRecord = undefined
this.richText = undefined
rootStore.log.warn(
'Received an invalid app.bsky.feed.post record',
valid.error,
)
}
} else {
this.postRecord = undefined
this.richText = undefined
rootStore.log.warn(
'app.bsky.feed.getTimeline or app.bsky.feed.getAuthorFeed served an unexpected record type',
this.post.record,
)
}
this.reply = v.reply
this.reason = v.reason
makeAutoObservable(this, {rootStore: false})
}
get rootUri(): string {
if (this.reply?.root.uri) {
return this.reply.root.uri
}
return this.post.uri
}
get isThreadMuted() {
return this.rootStore.mutedThreads.uris.has(this.rootUri)
}
get labelInfo(): PostLabelInfo {
return {
postLabels: (this.post.labels || []).concat(
getEmbedLabels(this.post.embed),
),
accountLabels: filterAccountLabels(this.post.author.labels),
profileLabels: filterProfileLabels(this.post.author.labels),
isMuted:
this.post.author.viewer?.muted ||
getEmbedMuted(this.post.embed) ||
false,
mutedByList:
this.post.author.viewer?.mutedByList ||
getEmbedMutedByList(this.post.embed),
isBlocking:
!!this.post.author.viewer?.blocking ||
getEmbedBlocking(this.post.embed) ||
false,
isBlockedBy:
!!this.post.author.viewer?.blockedBy ||
getEmbedBlockedBy(this.post.embed) ||
false,
}
}
get moderation(): PostModeration {
return getPostModeration(this.rootStore, this.labelInfo)
}
copy(v: FeedViewPost) {
this.post = v.post
this.reply = v.reply
this.reason = v.reason
}
copyMetrics(v: FeedViewPost) {
this.post.replyCount = v.post.replyCount
this.post.repostCount = v.post.repostCount
this.post.likeCount = v.post.likeCount
this.post.viewer = v.post.viewer
}
get reasonRepost(): ReasonRepost | undefined {
if (this.reason?.$type === 'app.bsky.feed.defs#reasonRepost') {
return this.reason as ReasonRepost
}
}
async toggleLike() {
this.post.viewer = this.post.viewer || {}
if (this.post.viewer.like) {
const url = this.post.viewer.like
await updateDataOptimistically(
this.post,
() => {
this.post.likeCount = (this.post.likeCount || 0) - 1
this.post.viewer!.like = undefined
},
() => this.rootStore.agent.deleteLike(url),
)
} else {
await updateDataOptimistically(
this.post,
() => {
this.post.likeCount = (this.post.likeCount || 0) + 1
this.post.viewer!.like = 'pending'
},
() => this.rootStore.agent.like(this.post.uri, this.post.cid),
res => {
this.post.viewer!.like = res.uri
},
)
}
}
async toggleRepost() {
this.post.viewer = this.post.viewer || {}
if (this.post.viewer?.repost) {
const url = this.post.viewer.repost
await updateDataOptimistically(
this.post,
() => {
this.post.repostCount = (this.post.repostCount || 0) - 1
this.post.viewer!.repost = undefined
},
() => this.rootStore.agent.deleteRepost(url),
)
} else {
await updateDataOptimistically(
this.post,
() => {
this.post.repostCount = (this.post.repostCount || 0) + 1
this.post.viewer!.repost = 'pending'
},
() => this.rootStore.agent.repost(this.post.uri, this.post.cid),
res => {
this.post.viewer!.repost = res.uri
},
)
}
}
async toggleThreadMute() {
if (this.isThreadMuted) {
this.rootStore.mutedThreads.uris.delete(this.rootUri)
} else {
this.rootStore.mutedThreads.uris.add(this.rootUri)
}
}
async delete() {
await this.rootStore.agent.deletePost(this.post.uri)
this.rootStore.emitPostDeleted(this.post.uri)
}
}
export class PostsFeedSliceModel {
// ui state
_reactKey: string = ''
// data
items: PostsFeedItemModel[] = []
constructor(
public rootStore: RootStoreModel,
reactKey: string,
slice: FeedViewPostsSlice,
) {
this._reactKey = reactKey
for (const item of slice.items) {
this.items.push(
new PostsFeedItemModel(rootStore, `item-${_idCounter++}`, item),
)
}
makeAutoObservable(this, {rootStore: false})
}
get uri() {
if (this.isReply) {
return this.items[1].post.uri
}
return this.items[0].post.uri
}
get isThread() {
return (
this.items.length > 1 &&
this.items.every(
item => item.post.author.did === this.items[0].post.author.did,
)
)
}
get isReply() {
return this.items.length > 1 && !this.isThread
}
get rootItem() {
if (this.isReply) {
return this.items[1]
}
return this.items[0]
}
get moderation() {
return mergePostModerations(this.items.map(item => item.moderation))
}
containsUri(uri: string) {
return !!this.items.find(item => item.post.uri === uri)
}
isThreadParentAt(i: number) {
if (this.items.length === 1) {
return false
}
return i < this.items.length - 1
}
isThreadChildAt(i: number) {
if (this.items.length === 1) {
return false
}
return i > 0
}
}
export class PostsFeedModel {
// state
isLoading = false
@ -297,6 +36,7 @@ export class PostsFeedModel {
loadMoreCursor: string | undefined
pollCursor: string | undefined
tuner = new FeedTuner()
pageSize = PAGE_SIZE
// used to linearize async modifications to state
lock = new AwaitLock()
@ -309,8 +49,11 @@ export class PostsFeedModel {
constructor(
public rootStore: RootStoreModel,
public feedType: 'home' | 'author' | 'suggested' | 'goodstuff',
params: GetTimeline.QueryParams | GetAuthorFeed.QueryParams,
public feedType: 'home' | 'author' | 'suggested' | 'custom',
params:
| GetTimeline.QueryParams
| GetAuthorFeed.QueryParams
| GetCustomFeed.QueryParams,
) {
makeAutoObservable(
this,
@ -387,10 +130,9 @@ export class PostsFeedModel {
}
get feedTuners() {
if (this.feedType === 'goodstuff') {
if (this.feedType === 'custom') {
return [
FeedTuner.dedupReposts,
FeedTuner.likedRepliesOnly,
FeedTuner.preferredLangOnly(
this.rootStore.preferences.contentLanguages,
),
@ -416,7 +158,7 @@ export class PostsFeedModel {
this.tuner.reset()
this._xLoading(isRefreshing)
try {
const res = await this._getFeed({limit: PAGE_SIZE})
const res = await this._getFeed({limit: this.pageSize})
await this._replaceAll(res)
this._xIdle()
} catch (e: any) {
@ -455,7 +197,7 @@ export class PostsFeedModel {
try {
const res = await this._getFeed({
cursor: this.loadMoreCursor,
limit: PAGE_SIZE,
limit: this.pageSize,
})
await this._appendAll(res)
this._xIdle()
@ -524,7 +266,7 @@ export class PostsFeedModel {
if (this.hasNewLatest || this.feedType === 'suggested') {
return
}
const res = await this._getFeed({limit: PAGE_SIZE})
const res = await this._getFeed({limit: this.pageSize})
const tuner = new FeedTuner()
const slices = tuner.tune(res.data.feed, this.feedTuners)
this.setHasNewLatest(slices[0]?.uri !== this.slices[0]?.uri)
@ -599,13 +341,15 @@ export class PostsFeedModel {
// helper functions
// =
async _replaceAll(res: GetTimeline.Response | GetAuthorFeed.Response) {
async _replaceAll(
res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
) {
this.pollCursor = res.data.feed[0]?.post.uri
return this._appendAll(res, true)
}
async _appendAll(
res: GetTimeline.Response | GetAuthorFeed.Response,
res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
replace = false,
) {
this.loadMoreCursor = res.data.cursor
@ -644,7 +388,9 @@ export class PostsFeedModel {
})
}
_updateAll(res: GetTimeline.Response | GetAuthorFeed.Response) {
_updateAll(
res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
) {
for (const item of res.data.feed) {
const existingSlice = this.slices.find(slice =>
slice.containsUri(item.post.uri),
@ -661,8 +407,13 @@ export class PostsFeedModel {
}
protected async _getFeed(
params: GetTimeline.QueryParams | GetAuthorFeed.QueryParams = {},
): Promise<GetTimeline.Response | GetAuthorFeed.Response> {
params:
| GetTimeline.QueryParams
| GetAuthorFeed.QueryParams
| GetCustomFeed.QueryParams,
): Promise<
GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response
> {
params = Object.assign({}, this.params, params)
if (this.feedType === 'suggested') {
const responses = await getMultipleAuthorsPosts(
@ -684,61 +435,31 @@ export class PostsFeedModel {
}
} else if (this.feedType === 'home') {
return this.rootStore.agent.getTimeline(params as GetTimeline.QueryParams)
} else if (this.feedType === 'goodstuff') {
const res = await getGoodStuff(
this.rootStore.session.currentSession?.accessJwt || '',
params as GetTimeline.QueryParams,
} else if (this.feedType === 'custom') {
this.checkIfCustomFeedIsOnlineAndValid(
params as GetCustomFeed.QueryParams,
)
res.data.feed = (res.data.feed || []).filter(
item => !item.post.author.viewer?.muted,
return this.rootStore.agent.app.bsky.feed.getFeed(
params as GetCustomFeed.QueryParams,
)
return res
} else {
return this.rootStore.agent.getAuthorFeed(
params as GetAuthorFeed.QueryParams,
)
}
}
}
// HACK
// temporary off-spec route to get the good stuff
// -prf
async function getGoodStuff(
accessJwt: string,
params: GetTimeline.QueryParams,
): Promise<GetTimeline.Response> {
const controller = new AbortController()
const to = setTimeout(() => controller.abort(), 15e3)
const uri = new URL('https://bsky.social/xrpc/app.bsky.unspecced.getPopular')
let k: keyof GetTimeline.QueryParams
for (k in params) {
if (typeof params[k] !== 'undefined') {
uri.searchParams.set(k, String(params[k]))
private async checkIfCustomFeedIsOnlineAndValid(
params: GetCustomFeed.QueryParams,
) {
const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
feed: params.feed,
})
if (!res.data.isOnline || !res.data.isValid) {
runInAction(() => {
this.error =
'This custom feed is not online or may be experiencing issues.'
})
}
}
const res = await fetch(String(uri), {
method: 'get',
headers: {
accept: 'application/json',
authorization: `Bearer ${accessJwt}`,
},
signal: controller.signal,
})
const resHeaders: Record<string, string> = {}
res.headers.forEach((value: string, key: string) => {
resHeaders[key] = value
})
let resBody = await res.json()
clearTimeout(to)
return {
success: res.status === 200,
headers: resHeaders,
data: jsonToLex(resBody),
}
}

120
src/state/models/lists/actor-feeds.ts Normal file
View file

@ -0,0 +1,120 @@
import {makeAutoObservable} from 'mobx'
import {AppBskyFeedGetActorFeeds as GetActorFeeds} from '@atproto/api'
import {RootStoreModel} from '../root-store'
import {bundleAsync} from 'lib/async/bundle'
import {cleanError} from 'lib/strings/errors'
import {CustomFeedModel} from '../feeds/custom-feed'
const PAGE_SIZE = 30
export class ActorFeedsModel {
// state
isLoading = false
isRefreshing = false
hasLoaded = false
error = ''
hasMore = true
loadMoreCursor?: string
// data
feeds: CustomFeedModel[] = []
constructor(
public rootStore: RootStoreModel,
public params: GetActorFeeds.QueryParams,
) {
makeAutoObservable(
this,
{
rootStore: false,
},
{autoBind: true},
)
}
get hasContent() {
return this.feeds.length > 0
}
get hasError() {
return this.error !== ''
}
get isEmpty() {
return this.hasLoaded && !this.hasContent
}
// public api
// =
async refresh() {
return this.loadMore(true)
}
clear() {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = false
this.error = ''
this.hasMore = true
this.loadMoreCursor = undefined
this.feeds = []
}
loadMore = bundleAsync(async (replace: boolean = false) => {
if (!replace && !this.hasMore) {
return
}
this._xLoading(replace)
try {
const res = await this.rootStore.agent.app.bsky.feed.getActorFeeds({
actor: this.params.actor,
limit: PAGE_SIZE,
cursor: replace ? undefined : this.loadMoreCursor,
})
if (replace) {
this._replaceAll(res)
} else {
this._appendAll(res)
}
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
})
// state transitions
// =
_xLoading(isRefreshing = false) {
this.isLoading = true
this.isRefreshing = isRefreshing
this.error = ''
}
_xIdle(err?: any) {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = true
this.error = cleanError(err)
if (err) {
this.rootStore.log.error('Failed to fetch user followers', err)
}
}
// helper functions
// =
_replaceAll(res: GetActorFeeds.Response) {
this.feeds = []
this._appendAll(res)
}
_appendAll(res: GetActorFeeds.Response) {
this.loadMoreCursor = res.data.cursor
this.hasMore = !!this.loadMoreCursor
for (const f of res.data.feeds) {
this.feeds.push(new CustomFeedModel(this.rootStore, f))
}
}
}

16
src/state/models/log.ts
View file

@ -27,6 +27,7 @@ function genId(): string {
export class LogModel {
entries: LogEntry[] = []
timers = new Map<string, number>()
constructor() {
makeAutoObservable(this)
@ -74,6 +75,21 @@ export class LogModel {
ts: Date.now(),
})
}
time = (label = 'default') => {
this.timers.set(label, performance.now())
}
timeEnd = (label = 'default', warn = false) => {
const endTime = performance.now()
if (this.timers.has(label)) {
const elapsedTime = endTime - this.timers.get(label)!
console.log(`${label}: ${elapsedTime.toFixed(3)}ms`)
this.timers.delete(label)
} else {
warn && console.warn(`Timer with label '${label}' does not exist.`)
}
}
}
function detailsToStr(details?: any) {

6
src/state/models/me.ts
View file

@ -8,6 +8,7 @@ import {PostsFeedModel} from './feeds/posts'
import {NotificationsFeedModel} from './feeds/notifications'
import {MyFollowsCache} from './cache/my-follows'
import {isObj, hasProp} from 'lib/type-guards'
import {SavedFeedsModel} from './ui/saved-feeds'
const PROFILE_UPDATE_INTERVAL = 10 * 60 * 1e3 // 10min
const NOTIFS_UPDATE_INTERVAL = 30 * 1e3 // 30sec
@ -21,6 +22,7 @@ export class MeModel {
followsCount: number | undefined
followersCount: number | undefined
mainFeed: PostsFeedModel
savedFeeds: SavedFeedsModel
notifications: NotificationsFeedModel
follows: MyFollowsCache
invites: ComAtprotoServerDefs.InviteCode[] = []
@ -43,12 +45,14 @@ export class MeModel {
})
this.notifications = new NotificationsFeedModel(this.rootStore)
this.follows = new MyFollowsCache(this.rootStore)
this.savedFeeds = new SavedFeedsModel(this.rootStore)
}
clear() {
this.mainFeed.clear()
this.notifications.clear()
this.follows.clear()
this.savedFeeds.clear()
this.did = ''
this.handle = ''
this.displayName = ''
@ -110,6 +114,7 @@ export class MeModel {
/* dont await */ this.notifications.setup().catch(e => {
this.rootStore.log.error('Failed to setup notifications model', e)
})
/* dont await */ this.savedFeeds.refresh(true)
this.rootStore.emitSessionLoaded()
await this.fetchInviteCodes()
await this.fetchAppPasswords()
@ -119,6 +124,7 @@ export class MeModel {
}
async updateIfNeeded() {
/* dont await */ this.savedFeeds.refresh(true)
if (Date.now() - this.lastProfileStateUpdate > PROFILE_UPDATE_INTERVAL) {
this.rootStore.log.debug('Updating me profile information')
this.lastProfileStateUpdate = Date.now()

24
src/state/models/media/gallery.ts
View file

@ -4,7 +4,6 @@ import {ImageModel} from './image'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {openPicker} from 'lib/media/picker'
import {getImageDim} from 'lib/media/manip'
import {getDataUriSize} from 'lib/media/util'
import {isNative} from 'platform/detection'
export class GalleryModel {
@ -24,13 +23,7 @@ export class GalleryModel {
return this.images.length
}
get paths() {
return this.images.map(image =>
image.compressed === undefined ? image.path : image.compressed.path,
)
}
async add(image_: RNImage) {
async add(image_: Omit<RNImage, 'size'>) {
if (this.size >= 4) {
return
}
@ -39,15 +32,9 @@ export class GalleryModel {
if (!this.images.some(i => i.path === image_.path)) {
const image = new ImageModel(this.rootStore, image_)
if (!isNative) {
await image.manipulate({})
} else {
await image.compress()
}
runInAction(() => {
this.images.push(image)
})
// Initial resize
image.manipulate({})
this.images.push(image)
}
}
@ -70,11 +57,10 @@ export class GalleryModel {
const {width, height} = await getImageDim(uri)
const image: RNImage = {
const image = {
path: uri,
height,
width,
size: getDataUriSize(uri),
mime: 'image/jpeg',
}

179
src/state/models/media/image.ts
View file

@ -3,14 +3,11 @@ import {RootStoreModel} from 'state/index'
import {makeAutoObservable, runInAction} from 'mobx'
import {POST_IMG_MAX} from 'lib/constants'
import * as ImageManipulator from 'expo-image-manipulator'
import {getDataUriSize, scaleDownDimensions} from 'lib/media/util'
import {getDataUriSize} from 'lib/media/util'
import {openCropper} from 'lib/media/picker'
import {ActionCrop, FlipType, SaveFormat} from 'expo-image-manipulator'
import {Position} from 'react-avatar-editor'
import {compressAndResizeImageForPost} from 'lib/media/manip'
// TODO: EXIF embed
// Cases to consider: ExternalEmbed
import {Dimensions} from 'lib/media/types'
export interface ImageManipulationAttributes {
aspectRatio?: '4:3' | '1:1' | '3:4' | 'None'
@ -21,17 +18,16 @@ export interface ImageManipulationAttributes {
flipVertical?: boolean
}
export class ImageModel implements RNImage {
const MAX_IMAGE_SIZE_IN_BYTES = 976560
export class ImageModel implements Omit<RNImage, 'size'> {
path: string
mime = 'image/jpeg'
width: number
height: number
size: number
altText = ''
cropped?: RNImage = undefined
compressed?: RNImage = undefined
scaledWidth: number = POST_IMG_MAX.width
scaledHeight: number = POST_IMG_MAX.height
// Web manipulation
prev?: RNImage
@ -44,7 +40,7 @@ export class ImageModel implements RNImage {
}
prevAttributes: ImageManipulationAttributes = {}
constructor(public rootStore: RootStoreModel, image: RNImage) {
constructor(public rootStore: RootStoreModel, image: Omit<RNImage, 'size'>) {
makeAutoObservable(this, {
rootStore: false,
})
@ -52,19 +48,8 @@ export class ImageModel implements RNImage {
this.path = image.path
this.width = image.width
this.height = image.height
this.size = image.size
this.calcScaledDimensions()
}
// TODO: Revisit compression factor due to updated sizing with zoom
// get compressionFactor() {
// const MAX_IMAGE_SIZE_IN_BYTES = 976560
// return this.size < MAX_IMAGE_SIZE_IN_BYTES
// ? 1
// : MAX_IMAGE_SIZE_IN_BYTES / this.size
// }
setRatio(aspectRatio: ImageManipulationAttributes['aspectRatio']) {
this.attributes.aspectRatio = aspectRatio
}
@ -93,8 +78,24 @@ export class ImageModel implements RNImage {
}
}
getDisplayDimensions(
as: ImageManipulationAttributes['aspectRatio'] = '1:1',
getUploadDimensions(
dimensions: Dimensions,
maxDimensions: Dimensions = POST_IMG_MAX,
as: ImageManipulationAttributes['aspectRatio'] = 'None',
) {
const {width, height} = dimensions
const {width: maxWidth, height: maxHeight} = maxDimensions
return width < maxWidth && height < maxHeight
? {
width,
height,
}
: this.getResizedDimensions(as, POST_IMG_MAX.width)
}
getResizedDimensions(
as: ImageManipulationAttributes['aspectRatio'] = 'None',
maxSide: number,
) {
const ratioMultiplier = this.ratioMultipliers[as]
@ -119,59 +120,70 @@ export class ImageModel implements RNImage {
}
}
calcScaledDimensions() {
const {width, height} = scaleDownDimensions(
{width: this.width, height: this.height},
POST_IMG_MAX,
)
this.scaledWidth = width
this.scaledHeight = height
}
async setAltText(altText: string) {
this.altText = altText
}
// Only for mobile
// Only compress prior to upload
async compress() {
for (let i = 10; i > 0; i--) {
// Float precision
const factor = Math.round(i) / 10
const compressed = await ImageManipulator.manipulateAsync(
this.cropped?.path ?? this.path,
undefined,
{
compress: factor,
base64: true,
format: SaveFormat.JPEG,
},
)
if (compressed.base64 !== undefined) {
const size = getDataUriSize(compressed.base64)
if (size < MAX_IMAGE_SIZE_IN_BYTES) {
runInAction(() => {
this.compressed = {
mime: 'image/jpeg',
path: compressed.uri,
size,
...compressed,
}
})
return
}
}
}
// Compression fails when removing redundant information is not possible.
// This can be tested with images that have high variance in noise.
throw new Error('Failed to compress image')
}
// Mobile
async crop() {
try {
const cropped = await openCropper({
// openCropper requires an output width and height hence
// getting upload dimensions before cropping is necessary.
const {width, height} = this.getUploadDimensions({
width: this.width,
height: this.height,
})
const cropped = await openCropper(this.rootStore, {
mediaType: 'photo',
path: this.path,
freeStyleCropEnabled: true,
width: this.scaledWidth,
height: this.scaledHeight,
})
runInAction(() => {
this.cropped = cropped
this.compress()
})
} catch (err) {
this.rootStore.log.error('Failed to crop photo', err)
}
}
async compress() {
try {
const {width, height} = scaleDownDimensions(
this.cropped
? {width: this.cropped.width, height: this.cropped.height}
: {width: this.width, height: this.height},
POST_IMG_MAX,
)
// TODO: Revisit this - currently iOS uses this as well
const compressed = await compressAndResizeImageForPost({
...(this.cropped === undefined ? this : this.cropped),
width,
height,
})
runInAction(() => {
this.compressed = compressed
this.cropped = cropped
})
} catch (err) {
this.rootStore.log.error('Failed to compress photo', err)
this.rootStore.log.error('Failed to crop photo', err)
}
}
@ -181,6 +193,9 @@ export class ImageModel implements RNImage {
crop?: ActionCrop['crop']
} & ImageManipulationAttributes,
) {
let uploadWidth: number | undefined
let uploadHeight: number | undefined
const {aspectRatio, crop, position, scale} = attributes
const modifiers = []
@ -197,14 +212,34 @@ export class ImageModel implements RNImage {
}
if (crop !== undefined) {
const croppedHeight = crop.height * this.height
const croppedWidth = crop.width * this.width
modifiers.push({
crop: {
originX: crop.originX * this.width,
originY: crop.originY * this.height,
height: crop.height * this.height,
width: crop.width * this.width,
height: croppedHeight,
width: croppedWidth,
},
})
const uploadDimensions = this.getUploadDimensions(
{width: croppedWidth, height: croppedHeight},
POST_IMG_MAX,
aspectRatio,
)
uploadWidth = uploadDimensions.width
uploadHeight = uploadDimensions.height
} else {
const uploadDimensions = this.getUploadDimensions(
{width: this.width, height: this.height},
POST_IMG_MAX,
aspectRatio,
)
uploadWidth = uploadDimensions.width
uploadHeight = uploadDimensions.height
}
if (scale !== undefined) {
@ -222,36 +257,40 @@ export class ImageModel implements RNImage {
const ratioMultiplier =
this.ratioMultipliers[this.attributes.aspectRatio ?? '1:1']
const MAX_SIDE = 2000
const result = await ImageManipulator.manipulateAsync(
this.path,
[
...modifiers,
{resize: ratioMultiplier > 1 ? {width: MAX_SIDE} : {height: MAX_SIDE}},
{
resize:
ratioMultiplier > 1 ? {width: uploadWidth} : {height: uploadHeight},
},
],
{
compress: 0.9,
base64: true,
format: SaveFormat.JPEG,
},
)
runInAction(() => {
this.compressed = {
this.cropped = {
mime: 'image/jpeg',
path: result.uri,
size: getDataUriSize(result.uri),
size:
result.base64 !== undefined
? getDataUriSize(result.base64)
: MAX_IMAGE_SIZE_IN_BYTES + 999, // shouldn't hit this unless manipulation fails
...result,
}
})
}
resetCompressed() {
resetCropped() {
this.manipulate({})
}
previous() {
this.compressed = this.prev
this.cropped = this.prev
this.attributes = this.prevAttributes
}
}

4
src/state/models/session.ts
View file

@ -187,7 +187,7 @@ export class SessionModel {
account => account.service === service && account.did === did,
)
// fall back to any pre-existing access tokens
// fall back to any preexisting access tokens
let refreshJwt = session?.refreshJwt || existingAccount?.refreshJwt
let accessJwt = session?.accessJwt || existingAccount?.accessJwt
if (event === 'expired') {
@ -247,7 +247,7 @@ export class SessionModel {
const res = await agent.getProfile({actor: did}).catch(_e => undefined)
if (res) {
return {
dispayName: res.data.displayName,
displayName: res.data.displayName,
aviUrl: res.data.avatar,
}
}

157
src/state/models/ui/preferences.ts
View file

@ -11,6 +11,7 @@ import {
ALWAYS_FILTER_LABEL_GROUP,
ALWAYS_WARN_LABEL_GROUP,
} from 'lib/labeling/const'
import {DEFAULT_FEEDS} from 'lib/constants'
import {isIOS} from 'platform/detection'
const deviceLocales = getLocales()
@ -25,6 +26,7 @@ const LABEL_GROUPS = [
'spam',
'impersonation',
]
const VISIBILITY_VALUES = ['show', 'warn', 'hide']
export class LabelPreferencesModel {
nsfw: LabelPreference = 'hide'
@ -45,6 +47,8 @@ export class PreferencesModel {
contentLanguages: string[] =
deviceLocales?.map?.(locale => locale.languageCode) || []
contentLabels = new LabelPreferencesModel()
savedFeeds: string[] = []
pinnedFeeds: string[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, {}, {autoBind: true})
@ -54,9 +58,16 @@ export class PreferencesModel {
return {
contentLanguages: this.contentLanguages,
contentLabels: this.contentLabels,
savedFeeds: this.savedFeeds,
pinnedFeeds: this.pinnedFeeds,
}
}
/**
* The function hydrates an object with properties related to content languages, labels, saved feeds,
* and pinned feeds that it gets from the parameter `v` (probably local storage)
* @param {unknown} v - the data object to hydrate from
*/
hydrate(v: unknown) {
if (isObj(v)) {
if (
@ -72,10 +83,29 @@ export class PreferencesModel {
// default to the device languages
this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
}
if (
hasProp(v, 'savedFeeds') &&
Array.isArray(v.savedFeeds) &&
typeof v.savedFeeds.every(item => typeof item === 'string')
) {
this.savedFeeds = v.savedFeeds
}
if (
hasProp(v, 'pinnedFeeds') &&
Array.isArray(v.pinnedFeeds) &&
typeof v.pinnedFeeds.every(item => typeof item === 'string')
) {
this.pinnedFeeds = v.pinnedFeeds
}
}
}
/**
* This function fetches preferences and sets defaults for missing items.
*/
async sync() {
// fetch preferences
let hasSavedFeedsPref = false
const res = await this.rootStore.agent.app.bsky.actor.getPreferences({})
runInAction(() => {
for (const pref of res.data.preferences) {
@ -88,22 +118,83 @@ export class PreferencesModel {
AppBskyActorDefs.isContentLabelPref(pref) &&
AppBskyActorDefs.validateAdultContentPref(pref).success
) {
if (LABEL_GROUPS.includes(pref.label)) {
this.contentLabels[pref.label] = pref.visibility
if (
LABEL_GROUPS.includes(pref.label) &&
VISIBILITY_VALUES.includes(pref.visibility)
) {
this.contentLabels[pref.label as keyof LabelPreferencesModel] =
pref.visibility as LabelPreference
}
} else if (
AppBskyActorDefs.isSavedFeedsPref(pref) &&
AppBskyActorDefs.validateSavedFeedsPref(pref).success
) {
this.savedFeeds = pref.saved
this.pinnedFeeds = pref.pinned
hasSavedFeedsPref = true
}
}
})
// set defaults on missing items
if (!hasSavedFeedsPref) {
const {saved, pinned} = await DEFAULT_FEEDS(
this.rootStore.agent.service.toString(),
(handle: string) =>
this.rootStore.agent
.resolveHandle({handle})
.then(({data}) => data.did),
)
runInAction(() => {
this.savedFeeds = saved
this.pinnedFeeds = pinned
})
res.data.preferences.push({
$type: 'app.bsky.actor.defs#savedFeedsPref',
saved,
pinned,
})
await this.rootStore.agent.app.bsky.actor.putPreferences({
preferences: res.data.preferences,
})
/* dont await */ this.rootStore.me.savedFeeds.refresh()
}
}
async update(cb: (prefs: AppBskyActorDefs.Preferences) => void) {
/**
* This function updates the preferences of a user and allows for a callback function to be executed
* before the update.
* @param cb - cb is a callback function that takes in a single parameter of type
* AppBskyActorDefs.Preferences and returns either a boolean or void. This callback function is used to
* update the preferences of the user. The function is called with the current preferences as an
* argument and if the callback returns false, the preferences are not updated.
* @returns void
*/
async update(cb: (prefs: AppBskyActorDefs.Preferences) => boolean | void) {
const res = await this.rootStore.agent.app.bsky.actor.getPreferences({})
cb(res.data.preferences)
if (cb(res.data.preferences) === false) {
return
}
await this.rootStore.agent.app.bsky.actor.putPreferences({
preferences: res.data.preferences,
})
}
/**
* This function resets the preferences to an empty array of no preferences.
*/
async reset() {
runInAction(() => {
this.contentLabels = new LabelPreferencesModel()
this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
this.savedFeeds = []
this.pinnedFeeds = []
})
await this.rootStore.agent.app.bsky.actor.putPreferences({
preferences: [],
})
}
hasContentLanguage(code2: string) {
return this.contentLanguages.includes(code2)
}
@ -200,4 +291,62 @@ export class PreferencesModel {
}
return res
}
setFeeds(saved: string[], pinned: string[]) {
this.savedFeeds = saved
this.pinnedFeeds = pinned
}
async setSavedFeeds(saved: string[], pinned: string[]) {
const oldSaved = this.savedFeeds
const oldPinned = this.pinnedFeeds
this.setFeeds(saved, pinned)
try {
await this.update((prefs: AppBskyActorDefs.Preferences) => {
const existing = prefs.find(
pref =>
AppBskyActorDefs.isSavedFeedsPref(pref) &&
AppBskyActorDefs.validateSavedFeedsPref(pref).success,
)
if (existing) {
existing.saved = saved
existing.pinned = pinned
} else {
prefs.push({
$type: 'app.bsky.actor.defs#savedFeedsPref',
saved,
pinned,
})
}
})
} catch (e) {
runInAction(() => {
this.savedFeeds = oldSaved
this.pinnedFeeds = oldPinned
})
throw e
}
}
async addSavedFeed(v: string) {
return this.setSavedFeeds([...this.savedFeeds, v], this.pinnedFeeds)
}
async removeSavedFeed(v: string) {
return this.setSavedFeeds(
this.savedFeeds.filter(uri => uri !== v),
this.pinnedFeeds.filter(uri => uri !== v),
)
}
async addPinnedFeed(v: string) {
return this.setSavedFeeds(this.savedFeeds, [...this.pinnedFeeds, v])
}
async removePinnedFeed(v: string) {
return this.setSavedFeeds(
this.savedFeeds,
this.pinnedFeeds.filter(uri => uri !== v),
)
}
}

36
src/state/models/ui/profile.ts
View file

@ -2,20 +2,16 @@ import {makeAutoObservable} from 'mobx'
import {RootStoreModel} from '../root-store'
import {ProfileModel} from '../content/profile'
import {PostsFeedModel} from '../feeds/posts'
import {ActorFeedsModel} from '../lists/actor-feeds'
import {ListsListModel} from '../lists/lists-list'
export enum Sections {
Posts = 'Posts',
PostsWithReplies = 'Posts & replies',
CustomAlgorithms = 'Feeds',
Lists = 'Lists',
}
const USER_SELECTOR_ITEMS = [
Sections.Posts,
Sections.PostsWithReplies,
Sections.Lists,
]
export interface ProfileUiParams {
user: string
}
@ -28,6 +24,7 @@ export class ProfileUiModel {
// data
profile: ProfileModel
feed: PostsFeedModel
algos: ActorFeedsModel
lists: ListsListModel
// ui state
@ -50,10 +47,11 @@ export class ProfileUiModel {
actor: params.user,
limit: 10,
})
this.algos = new ActorFeedsModel(rootStore, {actor: params.user})
this.lists = new ListsListModel(rootStore, params.user)
}
get currentView(): PostsFeedModel | ListsListModel {
get currentView(): PostsFeedModel | ActorFeedsModel | ListsListModel {
if (
this.selectedView === Sections.Posts ||
this.selectedView === Sections.PostsWithReplies
@ -62,6 +60,9 @@ export class ProfileUiModel {
} else if (this.selectedView === Sections.Lists) {
return this.lists
}
if (this.selectedView === Sections.CustomAlgorithms) {
return this.algos
}
throw new Error(`Invalid selector value: ${this.selectedViewIndex}`)
}
@ -75,7 +76,14 @@ export class ProfileUiModel {
}
get selectorItems() {
return USER_SELECTOR_ITEMS
const items = [Sections.Posts, Sections.PostsWithReplies]
if (this.algos.hasLoaded && !this.algos.isEmpty) {
items.push(Sections.CustomAlgorithms)
}
if (this.lists.hasLoaded && !this.lists.isEmpty) {
items.push(Sections.Lists)
}
return items
}
get selectedView() {
@ -84,9 +92,11 @@ export class ProfileUiModel {
get uiItems() {
let arr: any[] = []
// if loading, return loading item to show loading spinner
if (this.isInitialLoading) {
arr = arr.concat([ProfileUiModel.LOADING_ITEM])
} else if (this.currentView.hasError) {
// if error, return error item to show error message
arr = arr.concat([
{
_reactKey: '__error__',
@ -94,12 +104,16 @@ export class ProfileUiModel {
},
])
} else {
// not loading, no error, show content
if (
this.selectedView === Sections.Posts ||
this.selectedView === Sections.PostsWithReplies
this.selectedView === Sections.PostsWithReplies ||
this.selectedView === Sections.CustomAlgorithms
) {
if (this.feed.hasContent) {
if (this.selectedView === Sections.Posts) {
if (this.selectedView === Sections.CustomAlgorithms) {
arr = this.algos.feeds
} else if (this.selectedView === Sections.Posts) {
arr = this.feed.nonReplyFeed
} else {
arr = this.feed.slices.slice()
@ -117,6 +131,7 @@ export class ProfileUiModel {
arr = arr.concat([ProfileUiModel.EMPTY_ITEM])
}
} else {
// fallback, add empty item, to show empty message
arr = arr.concat([ProfileUiModel.EMPTY_ITEM])
}
}
@ -151,6 +166,7 @@ export class ProfileUiModel {
.setup()
.catch(err => this.rootStore.log.error('Failed to fetch feed', err)),
])
this.algos.refresh()
// HACK: need to use the DID as a param, not the username -prf
this.lists.source = this.profile.did
this.lists

185
src/state/models/ui/saved-feeds.ts Normal file
View file

@ -0,0 +1,185 @@
import {makeAutoObservable, runInAction} from 'mobx'
import {AppBskyFeedDefs} from '@atproto/api'
import {RootStoreModel} from '../root-store'
import {bundleAsync} from 'lib/async/bundle'
import {cleanError} from 'lib/strings/errors'
import {CustomFeedModel} from '../feeds/custom-feed'
export class SavedFeedsModel {
// state
isLoading = false
isRefreshing = false
hasLoaded = false
error = ''
// data
feeds: CustomFeedModel[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(
this,
{
rootStore: false,
},
{autoBind: true},
)
}
get hasContent() {
return this.feeds.length > 0
}
get hasError() {
return this.error !== ''
}
get isEmpty() {
return this.hasLoaded && !this.hasContent
}
get pinned() {
return this.rootStore.preferences.pinnedFeeds
.map(uri => this.feeds.find(f => f.uri === uri) as CustomFeedModel)
.filter(Boolean)
}
get unpinned() {
return this.feeds.filter(f => !this.isPinned(f))
}
get all() {
return this.pinned.concat(this.unpinned)
}
get pinnedFeedNames() {
return this.pinned.map(f => f.displayName)
}
// public api
// =
clear() {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = false
this.error = ''
this.feeds = []
}
refresh = bundleAsync(async (quietRefresh = false) => {
this._xLoading(!quietRefresh)
try {
let feeds: AppBskyFeedDefs.GeneratorView[] = []
for (
let i = 0;
i < this.rootStore.preferences.savedFeeds.length;
i += 25
) {
const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerators({
feeds: this.rootStore.preferences.savedFeeds.slice(i, 25),
})
feeds = feeds.concat(res.data.feeds)
}
runInAction(() => {
this.feeds = feeds.map(f => new CustomFeedModel(this.rootStore, f))
})
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
})
async save(feed: CustomFeedModel) {
try {
await feed.save()
runInAction(() => {
this.feeds = [
...this.feeds,
new CustomFeedModel(this.rootStore, feed.data),
]
})
} catch (e: any) {
this.rootStore.log.error('Failed to save feed', e)
}
}
async unsave(feed: CustomFeedModel) {
const uri = feed.uri
try {
if (this.isPinned(feed)) {
await this.rootStore.preferences.removePinnedFeed(uri)
}
await feed.unsave()
runInAction(() => {
this.feeds = this.feeds.filter(f => f.data.uri !== uri)
})
} catch (e: any) {
this.rootStore.log.error('Failed to unsave feed', e)
}
}
async togglePinnedFeed(feed: CustomFeedModel) {
if (!this.isPinned(feed)) {
return this.rootStore.preferences.addPinnedFeed(feed.uri)
} else {
return this.rootStore.preferences.removePinnedFeed(feed.uri)
}
}
async reorderPinnedFeeds(feeds: CustomFeedModel[]) {
return this.rootStore.preferences.setSavedFeeds(
this.rootStore.preferences.savedFeeds,
feeds.filter(feed => this.isPinned(feed)).map(feed => feed.uri),
)
}
isPinned(feedOrUri: CustomFeedModel | string) {
let uri: string
if (typeof feedOrUri === 'string') {
uri = feedOrUri
} else {
uri = feedOrUri.uri
}
return this.rootStore.preferences.pinnedFeeds.includes(uri)
}
async movePinnedFeed(item: CustomFeedModel, direction: 'up' | 'down') {
const pinned = this.rootStore.preferences.pinnedFeeds.slice()
const index = pinned.indexOf(item.uri)
if (index === -1) {
return
}
if (direction === 'up' && index !== 0) {
const temp = pinned[index]
pinned[index] = pinned[index - 1]
pinned[index - 1] = temp
} else if (direction === 'down' && index < pinned.length - 1) {
const temp = pinned[index]
pinned[index] = pinned[index + 1]
pinned[index + 1] = temp
}
await this.rootStore.preferences.setSavedFeeds(
this.rootStore.preferences.savedFeeds,
pinned,
)
}
// state transitions
// =
_xLoading(isRefreshing = false) {
this.isLoading = true
this.isRefreshing = isRefreshing
this.error = ''
}
_xIdle(err?: any) {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = true
this.error = cleanError(err)
if (err) {
this.rootStore.log.error('Failed to fetch user feeds', err)
}
}
}

2
src/state/models/ui/shell.ts
View file

@ -119,7 +119,7 @@ export type Modal =
// Moderation
| ReportAccountModal
| ReportPostModal
| CreateMuteListModal
| CreateOrEditMuteListModal
| ListAddRemoveUserModal
// Posts

6
src/view/com/auth/create/Step1.tsx
View file

@ -32,7 +32,7 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
model.setServiceDescription(undefined)
}, [setIsDefaultSelected, model])
const fetchServiceDesription = React.useMemo(
const fetchServiceDescription = React.useMemo(
() => debounce(() => model.fetchServiceDescription(), 1e3),
[model],
)
@ -40,9 +40,9 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
const onChangeServiceUrl = React.useCallback(
(v: string) => {
model.setServiceUrl(v)
fetchServiceDesription()
fetchServiceDescription()
},
[model, fetchServiceDesription],
[model, fetchServiceDescription],
)
const onDebugChangeServiceUrl = React.useCallback(

1
src/view/com/auth/login/Login.tsx
View file

@ -420,6 +420,7 @@ const LoginForm = ({
textContentType="oneTimeCode"
value={password}
onChangeText={setPassword}
onSubmitEditing={onPressNext}
editable={!isProcessing}
accessibilityLabel="Password"
accessibilityHint={

5
src/view/com/composer/Composer.tsx
View file

@ -37,8 +37,7 @@ import {useExternalLinkFetch} from './useExternalLinkFetch'
import {isDesktopWeb, isAndroid} from 'platform/detection'
import {GalleryModel} from 'state/models/media/gallery'
import {Gallery} from './photos/Gallery'
const MAX_GRAPHEME_LENGTH = 300
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
type Props = ComposerOpts & {
onClose: () => void
@ -310,7 +309,7 @@ export const ComposePost = observer(function ComposePost({
onError={setError}
accessible={true}
accessibilityLabel="Write post"
accessibilityHint="Compose posts up to 300 characters in length"
accessibilityHint={`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`}
/>
</View>

15
src/view/com/composer/char-progress/CharProgress.tsx
View file

@ -7,9 +7,9 @@ import ProgressCircle from 'react-native-progress/Circle'
import ProgressPie from 'react-native-progress/Pie'
import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
const MAX_LENGTH = 300
const DANGER_LENGTH = MAX_LENGTH
const DANGER_LENGTH = MAX_GRAPHEME_LENGTH
export function CharProgress({count}: {count: number}) {
const pal = usePalette('default')
@ -17,7 +17,9 @@ export function CharProgress({count}: {count: number}) {
const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
return (
<>
<Text style={[s.mr10, {color: textColor}]}>{MAX_LENGTH - count}</Text>
<Text style={[s.mr10, {color: textColor}]}>
{MAX_GRAPHEME_LENGTH - count}
</Text>
<View>
{count > DANGER_LENGTH ? (
<ProgressPie
@ -25,7 +27,10 @@ export function CharProgress({count}: {count: number}) {
borderWidth={4}
borderColor={circleColor}
color={circleColor}
progress={Math.min((count - MAX_LENGTH) / MAX_LENGTH, 1)}
progress={Math.min(
(count - MAX_GRAPHEME_LENGTH) / MAX_GRAPHEME_LENGTH,
1,
)}
/>
) : (
<ProgressCircle
@ -33,7 +38,7 @@ export function CharProgress({count}: {count: number}) {
borderWidth={1}
borderColor={pal.colors.border}
color={circleColor}
progress={count / MAX_LENGTH}
progress={count / MAX_GRAPHEME_LENGTH}
/>
)}
</View>

98
src/view/com/composer/photos/Gallery.tsx
View file

@ -104,63 +104,61 @@ export const Gallery = observer(function ({gallery}: Props) {
return !gallery.isEmpty ? (
<View testID="selectedPhotosView" style={styles.gallery}>
{gallery.images.map(image =>
image.compressed !== undefined ? (
<View key={`selected-image-${image.path}`} style={[imageStyle]}>
{gallery.images.map(image => (
<View key={`selected-image-${image.path}`} style={[imageStyle]}>
<TouchableOpacity
testID="altTextButton"
accessibilityRole="button"
accessibilityLabel="Add alt text"
accessibilityHint=""
onPress={() => {
handleAddImageAltText(image)
}}
style={imageControlLabelStyle}>
<Text style={styles.imageControlTextContent}>ALT</Text>
</TouchableOpacity>
<View style={imageControlsSubgroupStyle}>
<TouchableOpacity
testID="altTextButton"
testID="editPhotoButton"
accessibilityRole="button"
accessibilityLabel="Add alt text"
accessibilityLabel="Edit image"
accessibilityHint=""
onPress={() => {
handleAddImageAltText(image)
handleEditPhoto(image)
}}
style={imageControlLabelStyle}>
<Text style={styles.imageControlTextContent}>ALT</Text>
style={styles.imageControl}>
<FontAwesomeIcon
icon="pen"
size={12}
style={{color: colors.white}}
/>
</TouchableOpacity>
<TouchableOpacity
testID="removePhotoButton"
accessibilityRole="button"
accessibilityLabel="Remove image"
accessibilityHint=""
onPress={() => handleRemovePhoto(image)}
style={styles.imageControl}>
<FontAwesomeIcon
icon="xmark"
size={16}
style={{color: colors.white}}
/>
</TouchableOpacity>
<View style={imageControlsSubgroupStyle}>
<TouchableOpacity
testID="editPhotoButton"
accessibilityRole="button"
accessibilityLabel="Edit image"
accessibilityHint=""
onPress={() => {
handleEditPhoto(image)
}}
style={styles.imageControl}>
<FontAwesomeIcon
icon="pen"
size={12}
style={{color: colors.white}}
/>
</TouchableOpacity>
<TouchableOpacity
testID="removePhotoButton"
accessibilityRole="button"
accessibilityLabel="Remove image"
accessibilityHint=""
onPress={() => handleRemovePhoto(image)}
style={styles.imageControl}>
<FontAwesomeIcon
icon="xmark"
size={16}
style={{color: colors.white}}
/>
</TouchableOpacity>
</View>
<Image
testID="selectedPhotoImage"
style={[styles.image, imageStyle] as ImageStyle}
source={{
uri: image.compressed.path,
}}
accessible={true}
accessibilityIgnoresInvertColors
/>
</View>
) : null,
)}
<Image
testID="selectedPhotoImage"
style={[styles.image, imageStyle] as ImageStyle}
source={{
uri: image.cropped?.path ?? image.path,
}}
accessible={true}
accessibilityIgnoresInvertColors
/>
</View>
))}
</View>
) : null
})

22
src/view/com/composer/useExternalLinkFetch.ts
View file

@ -2,9 +2,9 @@ import {useState, useEffect} from 'react'
import {useStores} from 'state/index'
import * as apilib from 'lib/api/index'
import {getLinkMeta} from 'lib/link-meta/link-meta'
import {getPostAsQuote} from 'lib/link-meta/bsky'
import {getPostAsQuote, getFeedAsEmbed} from 'lib/link-meta/bsky'
import {downloadAndResize} from 'lib/media/manip'
import {isBskyPostUrl} from 'lib/strings/url-helpers'
import {isBskyPostUrl, isBskyCustomFeedUrl} from 'lib/strings/url-helpers'
import {ComposerOpts} from 'state/models/ui/shell'
import {POST_IMG_MAX} from 'lib/constants'
@ -41,6 +41,24 @@ export function useExternalLinkFetch({
setExtLink(undefined)
},
)
} else if (isBskyCustomFeedUrl(extLink.uri)) {
getFeedAsEmbed(store, extLink.uri).then(
({embed, meta}) => {
if (aborted) {
return
}
setExtLink({
uri: extLink.uri,
isLoading: false,
meta,
embed,
})
},
err => {
store.log.error('Failed to fetch feed for embedding', {err})
setExtLink(undefined)
},
)
} else {
getLinkMeta(store, extLink.uri).then(meta => {
if (aborted) {

162
src/view/com/feeds/CustomFeed.tsx Normal file
View file

@ -0,0 +1,162 @@
import React from 'react'
import {
Pressable,
StyleProp,
StyleSheet,
View,
ViewStyle,
TouchableOpacity,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {UserAvatar} from '../util/UserAvatar'
import {observer} from 'mobx-react-lite'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
import {useStores} from 'state/index'
import {pluralize} from 'lib/strings/helpers'
import {AtUri} from '@atproto/api'
import * as Toast from 'view/com/util/Toast'
export const CustomFeed = observer(
({
item,
style,
showSaveBtn = false,
showDescription = false,
showLikes = false,
}: {
item: CustomFeedModel
style?: StyleProp<ViewStyle>
showSaveBtn?: boolean
showDescription?: boolean
showLikes?: boolean
}) => {
const store = useStores()
const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>()
const onToggleSaved = React.useCallback(async () => {
if (item.isSaved) {
store.shell.openModal({
name: 'confirm',
title: 'Remove from my feeds',
message: `Remove ${item.displayName} from my feeds?`,
onPressConfirm: async () => {
try {
await store.me.savedFeeds.unsave(item)
Toast.show('Removed from my feeds')
} catch (e) {
Toast.show('There was an issue contacting your server')
store.log.error('Failed to unsave feed', {e})
}
},
})
} else {
try {
await store.me.savedFeeds.save(item)
Toast.show('Added to my feeds')
} catch (e) {
Toast.show('There was an issue contacting your server')
store.log.error('Failed to save feed', {e})
}
}
}, [store, item])
return (
<TouchableOpacity
accessibilityRole="button"
style={[styles.container, pal.border, style]}
onPress={() => {
navigation.navigate('CustomFeed', {
name: item.data.creator.did,
rkey: new AtUri(item.data.uri).rkey,
})
}}
key={item.data.uri}>
<View style={[styles.headerContainer]}>
<View style={[s.mr10]}>
<UserAvatar type="algo" size={36} avatar={item.data.avatar} />
</View>
<View style={[styles.headerTextContainer]}>
<Text style={[pal.text, s.bold]} numberOfLines={3}>
{item.displayName}
</Text>
<Text style={[pal.textLight]} numberOfLines={3}>
by @{item.data.creator.handle}
</Text>
</View>
{showSaveBtn && (
<View>
<Pressable
accessibilityRole="button"
accessibilityLabel={
item.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
}
accessibilityHint=""
onPress={onToggleSaved}
hitSlop={15}
style={styles.btn}>
{item.isSaved ? (
<FontAwesomeIcon
icon={['far', 'trash-can']}
size={19}
color={pal.colors.icon}
/>
) : (
<FontAwesomeIcon
icon="plus"
size={18}
color={pal.colors.link}
/>
)}
</Pressable>
</View>
)}
</View>
{showDescription && item.data.description ? (
<Text style={[pal.textLight, styles.description]} numberOfLines={3}>
{item.data.description}
</Text>
) : null}
{showLikes ? (
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
Liked by {item.data.likeCount || 0}{' '}
{pluralize(item.data.likeCount || 0, 'user')}
</Text>
) : null}
</TouchableOpacity>
)
},
)
const styles = StyleSheet.create({
container: {
paddingHorizontal: 18,
paddingVertical: 20,
flexDirection: 'column',
flex: 1,
borderTopWidth: 1,
gap: 14,
},
headerContainer: {
flexDirection: 'row',
},
headerTextContainer: {
flexDirection: 'column',
columnGap: 4,
flex: 1,
},
description: {
flex: 1,
flexWrap: 'wrap',
},
btn: {
paddingVertical: 6,
},
})

22
src/view/com/lightbox/Lightbox.web.tsx
View file

@ -65,30 +65,34 @@ function LightboxInner({
const canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1
const onPressLeft = () => {
const onPressLeft = useCallback(() => {
if (canGoLeft) {
setIndex(index - 1)
}
}
const onPressRight = () => {
}, [index, canGoLeft])
const onPressRight = useCallback(() => {
if (canGoRight) {
setIndex(index + 1)
}
}
}, [index, canGoRight])
const onEscape = useCallback(
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose()
} else if (e.key === 'ArrowLeft') {
onPressLeft()
} else if (e.key === 'ArrowRight') {
onPressRight()
}
},
[onClose],
[onClose, onPressLeft, onPressRight],
)
useEffect(() => {
window.addEventListener('keydown', onEscape)
return () => window.removeEventListener('keydown', onEscape)
}, [onEscape])
window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown)
}, [onKeyDown])
return (
<View style={styles.mask}>

2
src/view/com/lists/ListCard.tsx
View file

@ -60,7 +60,7 @@ export const ListCard = ({
anchorNoUnderline>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar size={40} avatar={list.avatar} />
<UserAvatar type="list" size={40} avatar={list.avatar} />
</View>
<View style={styles.layoutContent}>
<Text

2
src/view/com/lists/ListItems.tsx
View file

@ -341,7 +341,7 @@ const ListHeader = observer(
)}
</View>
<View>
<UserAvatar avatar={list.avatar} size={64} />
<UserAvatar type="list" avatar={list.avatar} size={64} />
</View>
</View>
<View style={[styles.fakeSelector, pal.border]}>

4
src/view/com/modals/ContentFilteringSettings.tsx
View file

@ -52,8 +52,8 @@ export const Component = observer(({}: {}) => {
Adult content can only be enabled via the Web at{' '}
<TextLink
style={pal.link}
href="https://staging.bsky.app"
text="staging.bsky.app"
href="https://bsky.app"
text="bsky.app"
/>
.
</Text>

4
src/view/com/modals/ContentLanguagesSettings.tsx
View file

@ -41,8 +41,8 @@ export function Component({}: {}) {
<View testID="contentLanguagesModal" style={[pal.view, styles.container]}>
<Text style={[pal.text, styles.title]}>Content Languages</Text>
<Text style={[pal.text, styles.description]}>
Which languages would you like to see in the What's Hot feed? (Leave
them all unchecked to see any language.)
Which languages would you like to see in the your feed? (Leave them all
unchecked to see any language.)
</Text>
<ScrollView style={styles.scrollContainer}>
{languages.map(lang => (

1
src/view/com/modals/CreateOrEditMuteList.tsx
View file

@ -143,6 +143,7 @@ export function Component({
<Text style={[styles.label, pal.text]}>List Avatar</Text>
<View style={[styles.avi, {borderColor: pal.colors.background}]}>
<UserAvatar
type="list"
size={80}
avatar={avatar}
onSelectNewAvatar={onSelectNewAvatar}

13
src/view/com/modals/EditImage.tsx
View file

@ -118,9 +118,9 @@ export const Component = observer(function ({image, gallery}: Props) {
)
useEffect(() => {
image.prev = image.compressed
image.prev = image.cropped
image.prevAttributes = image.attributes
image.resetCompressed()
image.resetCropped()
}, [image])
const onCloseModal = useCallback(() => {
@ -152,7 +152,7 @@ export const Component = observer(function ({image, gallery}: Props) {
: {}),
})
image.prev = image.compressed
image.prev = image.cropped
image.prevAttributes = image.attributes
onCloseModal()
}, [altText, image, position, scale, onCloseModal])
@ -168,8 +168,7 @@ export const Component = observer(function ({image, gallery}: Props) {
}
}, [])
// Prevents preliminary flash when transformations are being applied
if (image.compressed === undefined) {
if (image.cropped === undefined) {
return null
}
@ -177,7 +176,7 @@ export const Component = observer(function ({image, gallery}: Props) {
windowDimensions.width > 500 ? 410 : windowDimensions.width - 80
const sideLength = isDesktopWeb ? 300 : computedWidth
const dimensions = image.getDisplayDimensions(aspectRatio, sideLength)
const dimensions = image.getResizedDimensions(aspectRatio, sideLength)
const imgContainerStyles = {width: sideLength, height: sideLength}
const imgControlStyles = {
@ -196,7 +195,7 @@ export const Component = observer(function ({image, gallery}: Props) {
<ImageEditor
ref={editorRef}
style={styles.imgEditor}
image={image.compressed.path}
image={image.cropped.path}
scale={scale}
border={0}
position={position}

6
src/view/com/modals/Modal.tsx
View file

@ -15,6 +15,7 @@ import * as RepostModal from './Repost'
import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
import * as ListAddRemoveUserModal from './ListAddRemoveUser'
import * as AltImageModal from './AltImage'
import * as EditImageModal from './AltImage'
import * as ReportAccountModal from './ReportAccount'
import * as DeleteAccountModal from './DeleteAccount'
import * as ChangeHandleModal from './ChangeHandle'
@ -83,6 +84,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
} else if (activeModal?.name === 'alt-text-image') {
snapPoints = AltImageModal.snapPoints
element = <AltImageModal.Component {...activeModal} />
} else if (activeModal?.name === 'edit-image') {
snapPoints = AltImageModal.snapPoints
element = <EditImageModal.Component {...activeModal} />
} else if (activeModal?.name === 'change-handle') {
snapPoints = ChangeHandleModal.snapPoints
element = <ChangeHandleModal.Component {...activeModal} />
@ -119,7 +123,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
snapPoints={snapPoints}
index={store.shell.isModalActive ? 0 : -1}
enablePanDownToClose
keyboardBehavior="extend"
android_keyboardInputMode="adjustResize"
keyboardBlurBehavior="restore"
backdropComponent={
store.shell.isModalActive ? createCustomBackdrop(onClose) : undefined

11
src/view/com/modals/crop-image/CropImage.tsx
View file

@ -1,11 +0,0 @@
/**
* NOTE
* This modal is used only in the web build
* Native uses a third-party library
*/
export const snapPoints = ['0%']
export function Component() {
return null
}

1
src/view/com/notifications/Feed.tsx
View file

@ -154,6 +154,7 @@ export const Feed = observer(function Feed({
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
onScroll={onScroll}
scrollEventThrottle={100}
contentContainerStyle={s.contentContainer}
/>
) : null}

15
src/view/com/pager/DraggableScrollView.tsx Normal file
View file

@ -0,0 +1,15 @@
import {useDraggableScroll} from 'lib/hooks/useDraggableScrollView'
import React, {ComponentProps} from 'react'
import {ScrollView} from 'react-native'
export const DraggableScrollView = React.forwardRef<
ScrollView,
ComponentProps<typeof ScrollView>
>(function DraggableScrollView(props, ref) {
const {refs} = useDraggableScroll<ScrollView>({
outerRef: ref,
cursor: 'grab', // optional, default
})
return <ScrollView ref={refs} horizontal {...props} />
})

11
src/view/com/pager/FeedsTabBar.web.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'
import React, {useMemo} from 'react'
import {Animated, StyleSheet} from 'react-native'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/pager/TabBar'
@ -27,6 +27,10 @@ const FeedsTabBarDesktop = observer(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
const store = useStores()
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
const pal = usePalette('default')
const interp = useAnimatedValue(0)
@ -44,13 +48,14 @@ const FeedsTabBarDesktop = observer(
{translateY: Animated.multiply(interp, -100)},
],
}
return (
// @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
<Animated.View style={[pal.view, styles.tabBar, transform]}>
<TabBar
key={items.join(',')}
{...props}
items={['Following', "What's hot"]}
indicatorPosition="bottom"
items={items}
indicatorColor={pal.colors.link}
/>
</Animated.View>

76
src/view/com/pager/FeedsTabBarMobile.tsx
View file

@ -1,12 +1,17 @@
import React from 'react'
import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
import React, {useMemo} from 'react'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/pager/TabBar'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {CogIcon} from 'lib/icons'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {s} from 'lib/styles'
export const FeedsTabBar = observer(
(
@ -28,25 +33,51 @@ export const FeedsTabBar = observer(
transform: [{translateY: Animated.multiply(interp, -100)}],
}
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
const onPressAvi = React.useCallback(() => {
store.shell.openDrawer()
}, [store])
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
return (
<Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
style={styles.tabBarAvi}
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links">
<UserAvatar avatar={store.me.avatar} size={30} />
</TouchableOpacity>
<View style={[pal.view, styles.topBar]}>
<View style={[pal.view]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links"
hitSlop={10}>
<FontAwesomeIcon
icon="bars"
size={18}
color={pal.colors.textLight}
/>
</TouchableOpacity>
</View>
<Text style={[brandBlue, s.bold, styles.title]}>Bluesky</Text>
<View style={[pal.view]}>
<Link
href="/settings/saved-feeds"
hitSlop={10}
accessibilityRole="button"
accessibilityLabel="Edit Saved Feeds"
accessibilityHint="Opens screen to edit Saved Feeds">
<CogIcon size={21} strokeWidth={2} style={pal.textLight} />
</Link>
</View>
</View>
<TabBar
key={items.join(',')}
{...props}
items={['Following', "What's hot"]}
indicatorPosition="bottom"
items={items}
indicatorColor={pal.colors.link}
/>
</Animated.View>
@ -61,13 +92,20 @@ const styles = StyleSheet.create({
left: 0,
right: 0,
top: 0,
flexDirection: 'row',
flexDirection: 'column',
alignItems: 'center',
paddingHorizontal: 18,
borderBottomWidth: 1,
},
tabBarAvi: {
marginTop: 1,
marginRight: 18,
topBar: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 18,
paddingTop: 8,
paddingBottom: 2,
width: '100%',
},
title: {
fontSize: 21,
},
})

125
src/view/com/pager/Pager.tsx
View file

@ -1,16 +1,17 @@
import React from 'react'
import React, {forwardRef} from 'react'
import {Animated, View} from 'react-native'
import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {s} from 'lib/styles'
export type PageSelectedEvent = PagerViewOnPageSelectedEvent
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
export interface PagerRef {
setPage: (index: number) => void
}
export interface RenderTabBarFnProps {
selectedPage: number
position: Animated.Value
offset: Animated.Value
onSelect?: (index: number) => void
}
export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@ -22,68 +23,60 @@ interface Props {
onPageSelected?: (index: number) => void
testID?: string
}
export const Pager = ({
children,
tabBarPosition = 'top',
initialPage = 0,
renderTabBar,
onPageSelected,
testID,
}: React.PropsWithChildren<Props>) => {
const [selectedPage, setSelectedPage] = React.useState(0)
const position = useAnimatedValue(0)
const offset = useAnimatedValue(0)
const pagerView = React.useRef<PagerView>()
export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
(
{
children,
tabBarPosition = 'top',
initialPage = 0,
renderTabBar,
onPageSelected,
testID,
}: React.PropsWithChildren<Props>,
ref,
) => {
const [selectedPage, setSelectedPage] = React.useState(0)
const pagerView = React.useRef<PagerView>()
const onPageSelectedInner = React.useCallback(
(e: PageSelectedEvent) => {
setSelectedPage(e.nativeEvent.position)
onPageSelected?.(e.nativeEvent.position)
},
[setSelectedPage, onPageSelected],
)
React.useImperativeHandle(ref, () => ({
setPage: (index: number) => pagerView.current?.setPage(index),
}))
const onTabBarSelect = React.useCallback(
(index: number) => {
pagerView.current?.setPage(index)
},
[pagerView],
)
const onPageSelectedInner = React.useCallback(
(e: PageSelectedEvent) => {
setSelectedPage(e.nativeEvent.position)
onPageSelected?.(e.nativeEvent.position)
},
[setSelectedPage, onPageSelected],
)
return (
<View testID={testID}>
{tabBarPosition === 'top' &&
renderTabBar({
selectedPage,
position,
offset,
onSelect: onTabBarSelect,
})}
<AnimatedPagerView
ref={pagerView}
style={s.h100pct}
initialPage={initialPage}
onPageSelected={onPageSelectedInner}
onPageScroll={Animated.event(
[
{
nativeEvent: {
position: position,
offset: offset,
},
},
],
{useNativeDriver: true},
)}>
{children}
</AnimatedPagerView>
{tabBarPosition === 'bottom' &&
renderTabBar({
selectedPage,
position,
offset,
onSelect: onTabBarSelect,
})}
</View>
)
}
const onTabBarSelect = React.useCallback(
(index: number) => {
pagerView.current?.setPage(index)
},
[pagerView],
)
return (
<View testID={testID}>
{tabBarPosition === 'top' &&
renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
})}
<AnimatedPagerView
ref={pagerView}
style={s.h100pct}
initialPage={initialPage}
onPageSelected={onPageSelectedInner}>
{children}
</AnimatedPagerView>
{tabBarPosition === 'bottom' &&
renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
})}
</View>
)
},
)

99
src/view/com/pager/Pager.web.tsx
View file

@ -1,12 +1,9 @@
import React from 'react'
import {Animated, View} from 'react-native'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {View} from 'react-native'
import {s} from 'lib/styles'
export interface RenderTabBarFnProps {
selectedPage: number
position: Animated.Value
offset: Animated.Value
onSelect?: (index: number) => void
}
export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@ -17,53 +14,51 @@ interface Props {
renderTabBar: RenderTabBarFn
onPageSelected?: (index: number) => void
}
export const Pager = ({
children,
tabBarPosition = 'top',
initialPage = 0,
renderTabBar,
onPageSelected,
}: React.PropsWithChildren<Props>) => {
const [selectedPage, setSelectedPage] = React.useState(initialPage)
const position = useAnimatedValue(0)
const offset = useAnimatedValue(0)
export const Pager = React.forwardRef(
(
{
children,
tabBarPosition = 'top',
initialPage = 0,
renderTabBar,
onPageSelected,
}: React.PropsWithChildren<Props>,
ref,
) => {
const [selectedPage, setSelectedPage] = React.useState(initialPage)
const onTabBarSelect = React.useCallback(
(index: number) => {
setSelectedPage(index)
onPageSelected?.(index)
Animated.timing(position, {
toValue: index,
duration: 200,
useNativeDriver: true,
}).start()
},
[setSelectedPage, onPageSelected, position],
)
React.useImperativeHandle(ref, () => ({
setPage: (index: number) => setSelectedPage(index),
}))
return (
<View>
{tabBarPosition === 'top' &&
renderTabBar({
selectedPage,
position,
offset,
onSelect: onTabBarSelect,
})}
{React.Children.map(children, (child, i) => (
<View
style={selectedPage === i ? undefined : s.hidden}
key={`page-${i}`}>
{child}
</View>
))}
{tabBarPosition === 'bottom' &&
renderTabBar({
selectedPage,
position,
offset,
onSelect: onTabBarSelect,
})}
</View>
)
}
const onTabBarSelect = React.useCallback(
(index: number) => {
setSelectedPage(index)
onPageSelected?.(index)
},
[setSelectedPage, onPageSelected],
)
return (
<View>
{tabBarPosition === 'top' &&
renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
})}
{React.Children.map(children, (child, i) => (
<View
style={selectedPage === i ? undefined : s.hidden}
key={`page-${i}`}>
{child}
</View>
))}
{tabBarPosition === 'bottom' &&
renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
})}
</View>
)
},
)

206
src/view/com/pager/TabBar.tsx
View file

@ -1,22 +1,22 @@
import React, {createRef, useState, useMemo, useRef} from 'react'
import {Animated, StyleSheet, View} from 'react-native'
import React, {
useRef,
createRef,
useMemo,
useEffect,
useState,
useCallback,
} from 'react'
import {StyleSheet, View, ScrollView} from 'react-native'
import {Text} from '../util/text/Text'
import {PressableWithHover} from '../util/PressableWithHover'
import {usePalette} from 'lib/hooks/usePalette'
import {isDesktopWeb} from 'platform/detection'
interface Layout {
x: number
width: number
}
import {isDesktopWeb, isMobileWeb} from 'platform/detection'
import {DraggableScrollView} from './DraggableScrollView'
export interface TabBarProps {
testID?: string
selectedPage: number
items: string[]
position: Animated.Value
offset: Animated.Value
indicatorPosition?: 'top' | 'bottom'
indicatorColor?: string
onSelect?: (index: number) => void
onPressSelected?: () => void
@ -26,69 +26,27 @@ export function TabBar({
testID,
selectedPage,
items,
position,
offset,
indicatorPosition = 'bottom',
indicatorColor,
onSelect,
onPressSelected,
}: TabBarProps) {
const pal = usePalette('default')
const [itemLayouts, setItemLayouts] = useState<Layout[]>(
items.map(() => ({x: 0, width: 0})),
)
const scrollElRef = useRef<ScrollView>(null)
const [itemXs, setItemXs] = useState<number[]>([])
const itemRefs = useMemo(
() => Array.from({length: items.length}).map(() => createRef<View>()),
[items.length],
)
const panX = Animated.add(position, offset)
const containerRef = useRef<View>(null)
const indicatorStyle = useMemo(
() => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal],
)
const indicatorStyle = {
backgroundColor: indicatorColor || pal.colors.link,
bottom:
indicatorPosition === 'bottom' ? (isDesktopWeb ? 0 : -1) : undefined,
top: indicatorPosition === 'top' ? (isDesktopWeb ? 0 : -1) : undefined,
transform: [
{
translateX: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.x + l.width / 2),
}),
},
{
scaleX: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.width),
}),
},
],
}
useEffect(() => {
scrollElRef.current?.scrollTo({x: itemXs[selectedPage] || 0})
}, [scrollElRef, itemXs, selectedPage])
const onLayout = React.useCallback(() => {
const promises = []
for (let i = 0; i < items.length; i++) {
promises.push(
new Promise<Layout>(resolve => {
if (!containerRef.current || !itemRefs[i].current) {
return resolve({x: 0, width: 0})
}
itemRefs[i].current?.measureLayout(
containerRef.current,
(x: number, _y: number, width: number) => {
resolve({x, width})
},
)
}),
)
}
Promise.all(promises).then((layouts: Layout[]) => {
setItemLayouts(layouts)
})
}, [containerRef, itemRefs, setItemLayouts, items.length])
const onPressItem = React.useCallback(
const onPressItem = useCallback(
(index: number) => {
onSelect?.(index)
if (index === selectedPage) {
@ -98,33 +56,51 @@ export function TabBar({
[onSelect, onPressSelected, selectedPage],
)
const onLayout = React.useCallback(() => {
const promises = []
for (let i = 0; i < items.length; i++) {
promises.push(
new Promise<number>(resolve => {
if (!itemRefs[i].current) {
return resolve(0)
}
itemRefs[i].current?.measure((x: number) => resolve(x))
}),
)
}
Promise.all(promises).then((Xs: number[]) => {
setItemXs(Xs)
})
}, [itemRefs, setItemXs, items.length])
return (
<View
testID={testID}
style={[pal.view, styles.outer]}
onLayout={onLayout}
ref={containerRef}>
<Animated.View style={[styles.indicator, indicatorStyle]} />
{items.map((item, i) => {
const selected = i === selectedPage
return (
<PressableWithHover
ref={itemRefs[i]}
key={item}
style={
indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom
}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}>
<Text
type="xl-bold"
testID={testID ? `${testID}-${item}` : undefined}
style={selected ? pal.text : pal.textLight}>
{item}
</Text>
</PressableWithHover>
)
})}
<View testID={testID} style={[pal.view, styles.outer]}>
<DraggableScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
ref={scrollElRef}
contentContainerStyle={styles.contentContainer}
onLayout={onLayout}>
{items.map((item, i) => {
const selected = i === selectedPage
return (
<PressableWithHover
ref={itemRefs[i]}
key={item}
style={[styles.item, selected && indicatorStyle]}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}>
<Text
type={isDesktopWeb ? 'xl-bold' : 'lg-bold'}
testID={testID ? `${testID}-${item}` : undefined}
style={selected ? pal.text : pal.textLight}>
{item}
</Text>
</PressableWithHover>
)
})}
</DraggableScrollView>
</View>
)
}
@ -133,45 +109,39 @@ const styles = isDesktopWeb
? StyleSheet.create({
outer: {
flexDirection: 'row',
paddingHorizontal: 18,
width: 598,
},
itemTop: {
paddingTop: 16,
paddingBottom: 14,
paddingHorizontal: 12,
contentContainer: {
columnGap: 8,
marginLeft: 14,
paddingRight: 14,
backgroundColor: 'transparent',
},
itemBottom: {
item: {
paddingTop: 14,
paddingBottom: 16,
paddingHorizontal: 12,
},
indicator: {
position: 'absolute',
left: 0,
width: 1,
height: 3,
zIndex: 1,
paddingBottom: 12,
paddingHorizontal: 10,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},
})
: StyleSheet.create({
outer: {
flex: 1,
flexDirection: 'row',
paddingHorizontal: 14,
backgroundColor: 'transparent',
},
itemTop: {
contentContainer: {
columnGap: isMobileWeb ? 0 : 20,
marginLeft: isMobileWeb ? 0 : 18,
paddingRight: isMobileWeb ? 0 : 36,
backgroundColor: 'transparent',
},
item: {
paddingTop: 10,
paddingBottom: 10,
marginRight: 24,
},
itemBottom: {
paddingTop: 8,
paddingBottom: 12,
marginRight: 24,
},
indicator: {
position: 'absolute',
left: 0,
width: 1,
height: 3,
paddingHorizontal: isMobileWeb ? 8 : 0,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},
})

50
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'
import React, {useCallback, useMemo} from 'react'
import {observer} from 'mobx-react-lite'
import {Linking, StyleSheet, View} from 'react-native'
import Clipboard from '@react-native-clipboard/clipboard'
@ -99,7 +99,11 @@ export const PostThreadItem = observer(function PostThreadItem({
const onOpenTranslate = React.useCallback(() => {
Linking.openURL(
encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
encodeURI(
`https://translate.google.com/?sl=auto&tl=en&text=${
record?.text || ''
}`,
),
)
}, [record])
@ -129,6 +133,40 @@ export const PostThreadItem = observer(function PostThreadItem({
)
}, [item, store])
const accessibilityActions = useMemo(
() => [
{
name: 'reply',
label: 'Reply',
},
{
name: 'repost',
label: item.post.viewer?.repost ? 'Undo repost' : 'Repost',
},
{name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'},
],
[item.post.viewer?.like, item.post.viewer?.repost],
)
const onAccessibilityAction = useCallback(
event => {
switch (event.nativeEvent.actionName) {
case 'like':
onPressToggleLike()
break
case 'reply':
onPressReply()
break
case 'repost':
onPressToggleRepost()
break
default:
break
}
},
[onPressReply, onPressToggleLike, onPressToggleRepost],
)
if (!record) {
return <ErrorMessage message="Invalid or unsupported post record" />
}
@ -150,7 +188,9 @@ export const PostThreadItem = observer(function PostThreadItem({
<PostHider
testID={`postThreadItem-by-${item.post.author.handle}`}
style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
moderation={item.moderation.thread}>
moderation={item.moderation.thread}
accessibilityActions={accessibilityActions}
onAccessibilityAction={onAccessibilityAction}>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link
@ -320,7 +360,9 @@ export const PostThreadItem = observer(function PostThreadItem({
pal.view,
item._showParentReplyLine && styles.noTopBorder,
]}
moderation={item.moderation.thread}>
moderation={item.moderation.thread}
accessibilityActions={accessibilityActions}
onAccessibilityAction={onAccessibilityAction}>
{item._showParentReplyLine && (
<View
style={[

44
src/view/com/post/Post.tsx
View file

@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react'
import React, {useCallback, useEffect, useMemo, useState} from 'react'
import {
ActivityIndicator,
Linking,
@ -170,7 +170,9 @@ const PostLoaded = observer(
const onOpenTranslate = React.useCallback(() => {
Linking.openURL(
encodeURI(
`https://translate.google.com/#auto|en|${record?.text || ''}`,
`https://translate.google.com/?sl=auto&tl=en&text=${
record?.text || ''
}`,
),
)
}, [record])
@ -203,11 +205,47 @@ const PostLoaded = observer(
)
}, [item, setDeleted, store])
const accessibilityActions = useMemo(
() => [
{
name: 'reply',
label: 'Reply',
},
{
name: 'repost',
label: item.post.viewer?.repost ? 'Undo repost' : 'Repost',
},
{name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'},
],
[item.post.viewer?.like, item.post.viewer?.repost],
)
const onAccessibilityAction = useCallback(
event => {
switch (event.nativeEvent.actionName) {
case 'like':
onPressToggleLike()
break
case 'reply':
onPressReply()
break
case 'repost':
onPressToggleRepost()
break
default:
break
}
},
[onPressReply, onPressToggleLike, onPressToggleRepost],
)
return (
<PostHider
href={itemHref}
style={[styles.outer, pal.view, pal.border, style]}
moderation={item.moderation.list}>
moderation={item.moderation.list}
accessibilityActions={accessibilityActions}
onAccessibilityAction={onAccessibilityAction}>
{showReplyLine && <View style={styles.replyLine} />}
<View style={styles.layout}>
<View style={styles.layoutAvi}>

30
src/view/com/posts/WhatsHotEmptyState.tsx → src/view/com/posts/CustomFeedEmptyState.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
@ -7,18 +8,24 @@ import {
import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import {MagnifyingGlassIcon} from 'lib/icons'
import {useStores} from 'state/index'
import {NavigationProp} from 'lib/routes/types'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {isWeb} from 'platform/detection'
export function WhatsHotEmptyState() {
export function CustomFeedEmptyState() {
const pal = usePalette('default')
const palInverted = usePalette('inverted')
const store = useStores()
const navigation = useNavigation<NavigationProp>()
const onPressSettings = React.useCallback(() => {
store.shell.openModal({name: 'content-languages-settings'})
}, [store])
const onPressFindAccounts = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Search', {})
} else {
navigation.navigate('SearchTab')
navigation.popToTop()
}
}, [navigation])
return (
<View style={styles.emptyContainer}>
@ -26,12 +33,15 @@ export function WhatsHotEmptyState() {
<MagnifyingGlassIcon style={[styles.emptyIcon, pal.text]} size={62} />
</View>
<Text type="xl-medium" style={[s.textCenter, pal.text]}>
Your What's Hot feed is empty! This is because there aren't enough users
posting in your selected language.
This feed is empty! You may need to follow more users or tune your
language settings.
</Text>
<Button type="inverted" style={styles.emptyBtn} onPress={onPressSettings}>
<Button
type="inverted"
style={styles.emptyBtn}
onPress={onPressFindAccounts}>
<Text type="lg-medium" style={palInverted.text}>
Update my settings
Find accounts to follow
</Text>
<FontAwesomeIcon
icon="angle-right"

12
src/view/com/posts/Feed.tsx
View file

@ -18,6 +18,7 @@ import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {s} from 'lib/styles'
import {useAnalytics} from 'lib/analytics'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
const LOADING_ITEM = {_reactKey: '__loading__'}
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
@ -31,9 +32,12 @@ export const Feed = observer(function Feed({
scrollElRef,
onPressTryAgain,
onScroll,
scrollEventThrottle,
renderEmptyState,
testID,
headerOffset = 0,
ListHeaderComponent,
extraData,
}: {
feed: PostsFeedModel
style?: StyleProp<ViewStyle>
@ -41,11 +45,15 @@ export const Feed = observer(function Feed({
scrollElRef?: MutableRefObject<FlatList<any> | null>
onPressTryAgain?: () => void
onScroll?: OnScrollCb
scrollEventThrottle?: number
renderEmptyState?: () => JSX.Element
testID?: string
headerOffset?: number
ListHeaderComponent?: () => JSX.Element
extraData?: any
}) {
const pal = usePalette('default')
const theme = useTheme()
const {track} = useAnalytics()
const [isRefreshing, setIsRefreshing] = React.useState(false)
@ -163,6 +171,7 @@ export const Feed = observer(function Feed({
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={FeedFooter}
ListHeaderComponent={ListHeaderComponent}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
@ -175,10 +184,13 @@ export const Feed = observer(function Feed({
contentContainerStyle={s.contentContainer}
style={{paddingTop: headerOffset}}
onScroll={onScroll}
scrollEventThrottle={scrollEventThrottle}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
extraData={extraData}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>

46
src/view/com/posts/FeedItem.tsx
View file

@ -1,4 +1,4 @@
import React, {useMemo, useState} from 'react'
import React, {useCallback, useMemo, useState} from 'react'
import {observer} from 'mobx-react-lite'
import {Linking, StyleSheet, View} from 'react-native'
import Clipboard from '@react-native-clipboard/clipboard'
@ -99,7 +99,11 @@ export const FeedItem = observer(function ({
const onOpenTranslate = React.useCallback(() => {
Linking.openURL(
encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
encodeURI(
`https://translate.google.com/?sl=auto&tl=en&text=${
record?.text || ''
}`,
),
)
}, [record])
@ -154,12 +158,48 @@ export const FeedItem = observer(function ({
moderation = {behavior: ModerationBehaviorCode.Show}
}
const accessibilityActions = useMemo(
() => [
{
name: 'reply',
label: 'Reply',
},
{
name: 'repost',
label: item.post.viewer?.repost ? 'Undo repost' : 'Repost',
},
{name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'},
],
[item.post.viewer?.like, item.post.viewer?.repost],
)
const onAccessibilityAction = useCallback(
event => {
switch (event.nativeEvent.actionName) {
case 'like':
onPressToggleLike()
break
case 'reply':
onPressReply()
break
case 'repost':
onPressToggleRepost()
break
default:
break
}
},
[onPressReply, onPressToggleLike, onPressToggleRepost],
)
return (
<PostHider
testID={`feedItem-by-${item.post.author.handle}`}
style={outerStyles}
href={itemHref}
moderation={moderation}>
moderation={moderation}
accessibilityActions={accessibilityActions}
onAccessibilityAction={onAccessibilityAction}>
{isThreadChild && (
<View
style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}

2
src/view/com/posts/FeedSlice.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {PostsFeedSliceModel} from 'state/models/feeds/posts'
import {PostsFeedSliceModel} from 'state/models/feeds/post'
import {AtUri} from '@atproto/api'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'

9
src/view/com/posts/FollowingEmptyState.tsx
View file

@ -11,6 +11,7 @@ import {MagnifyingGlassIcon} from 'lib/icons'
import {NavigationProp} from 'lib/routes/types'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {isWeb} from 'platform/detection'
export function FollowingEmptyState() {
const pal = usePalette('default')
@ -18,8 +19,12 @@ export function FollowingEmptyState() {
const navigation = useNavigation<NavigationProp>()
const onPressFindAccounts = React.useCallback(() => {
navigation.navigate('SearchTab')
navigation.popToTop()
if (isWeb) {
navigation.navigate('Search', {})
} else {
navigation.navigate('SearchTab')
navigation.popToTop()
}
}, [navigation])
return (

246
src/view/com/posts/MultiFeed.tsx Normal file
View file

@ -0,0 +1,246 @@
import React, {MutableRefObject} from 'react'
import {observer} from 'mobx-react-lite'
import {
ActivityIndicator,
RefreshControl,
StyleProp,
StyleSheet,
View,
ViewStyle,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FlatList} from '../util/Views'
import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {PostsMultiFeedModel, MultiFeedItem} from 'state/models/feeds/multi-feed'
import {FeedSlice} from './FeedSlice'
import {Text} from '../util/text/Text'
import {Link} from '../util/Link'
import {UserAvatar} from '../util/UserAvatar'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {s} from 'lib/styles'
import {useAnalytics} from 'lib/analytics'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {isDesktopWeb} from 'platform/detection'
import {CogIcon} from 'lib/icons'
export const MultiFeed = observer(function Feed({
multifeed,
style,
showPostFollowBtn,
scrollElRef,
onScroll,
scrollEventThrottle,
testID,
headerOffset = 0,
extraData,
}: {
multifeed: PostsMultiFeedModel
style?: StyleProp<ViewStyle>
showPostFollowBtn?: boolean
scrollElRef?: MutableRefObject<FlatList<any> | null>
onPressTryAgain?: () => void
onScroll?: OnScrollCb
scrollEventThrottle?: number
renderEmptyState?: () => JSX.Element
testID?: string
headerOffset?: number
extraData?: any
}) {
const pal = usePalette('default')
const theme = useTheme()
const {track} = useAnalytics()
const [isRefreshing, setIsRefreshing] = React.useState(false)
// events
// =
const onRefresh = React.useCallback(async () => {
track('MultiFeed:onRefresh')
setIsRefreshing(true)
try {
await multifeed.refresh()
} catch (err) {
multifeed.rootStore.log.error('Failed to refresh posts feed', err)
}
setIsRefreshing(false)
}, [multifeed, track, setIsRefreshing])
const onEndReached = React.useCallback(async () => {
track('MultiFeed:onEndReached')
try {
await multifeed.loadMore()
} catch (err) {
multifeed.rootStore.log.error('Failed to load more posts', err)
}
}, [multifeed, track])
// rendering
// =
const renderItem = React.useCallback(
({item}: {item: MultiFeedItem}) => {
if (item.type === 'header') {
if (isDesktopWeb) {
return (
<View style={[pal.view, pal.border, styles.headerDesktop]}>
<Text type="2xl-bold" style={pal.text}>
My Feeds
</Text>
<Link href="/settings/saved-feeds">
<CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
</Link>
</View>
)
}
return <View style={[styles.header, pal.border]} />
} else if (item.type === 'feed-header') {
return (
<View style={styles.feedHeader}>
<UserAvatar type="algo" avatar={item.avatar} size={28} />
<Text type="title-lg" style={[pal.text, styles.feedHeaderTitle]}>
{item.title}
</Text>
</View>
)
} else if (item.type === 'feed-slice') {
return (
<FeedSlice slice={item.slice} showFollowBtn={showPostFollowBtn} />
)
} else if (item.type === 'feed-loading') {
return <PostFeedLoadingPlaceholder />
} else if (item.type === 'feed-error') {
return <ErrorMessage message={item.error} />
} else if (item.type === 'feed-footer') {
return (
<Link
href={item.uri}
style={[styles.feedFooter, pal.border, pal.view]}>
<Text type="lg" style={pal.link}>
See more from {item.title}
</Text>
<FontAwesomeIcon
icon="angle-right"
size={18}
color={pal.colors.link}
/>
</Link>
)
} else if (item.type === 'footer') {
return (
<Link style={[styles.footerLink, pal.viewLight]} href="/search/feeds">
<FontAwesomeIcon icon="search" size={18} color={pal.colors.text} />
<Text type="xl-medium" style={pal.text}>
Discover new feeds
</Text>
</Link>
)
}
return null
},
[showPostFollowBtn, pal],
)
const FeedFooter = React.useCallback(
() =>
multifeed.isLoading && !isRefreshing ? (
<View style={styles.loadMore}>
<ActivityIndicator color={pal.colors.text} />
</View>
) : (
<View />
),
[multifeed.isLoading, isRefreshing, pal],
)
return (
<View testID={testID} style={style}>
{multifeed.items.length > 0 && (
<FlatList
testID={testID ? `${testID}-flatlist` : undefined}
ref={scrollElRef}
data={multifeed.items}
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={FeedFooter}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
contentContainerStyle={s.contentContainer}
style={[{paddingTop: headerOffset}, pal.view, styles.container]}
onScroll={onScroll}
scrollEventThrottle={scrollEventThrottle}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
extraData={extraData}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
)}
</View>
)
})
const styles = StyleSheet.create({
container: {
height: '100%',
},
header: {
borderTopWidth: 1,
marginBottom: 4,
},
headerDesktop: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
borderBottomWidth: 1,
marginBottom: 4,
paddingHorizontal: 16,
paddingVertical: 8,
},
feedHeader: {
flexDirection: 'row',
gap: 8,
alignItems: 'center',
paddingHorizontal: 16,
paddingBottom: 8,
marginTop: 12,
},
feedHeaderTitle: {
fontWeight: 'bold',
},
feedFooter: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 16,
marginBottom: 12,
borderTopWidth: 1,
borderBottomWidth: 1,
},
footerLink: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
paddingHorizontal: 14,
paddingVertical: 12,
marginHorizontal: 8,
marginBottom: 8,
gap: 8,
},
loadMore: {
paddingTop: 10,
},
})

4
src/view/com/profile/FollowButton.tsx
View file

@ -33,7 +33,7 @@ export const FollowButton = observer(
store.me.follows.removeFollow(did)
onToggleFollow?.(false)
} catch (e: any) {
store.log.error('Failed fo delete follow', e)
store.log.error('Failed to delete follow', e)
Toast.show('An issue occurred, please try again.')
}
} else if (updatedFollowState === FollowState.NotFollowing) {
@ -42,7 +42,7 @@ export const FollowButton = observer(
store.me.follows.addFollow(did, res.uri)
onToggleFollow?.(true)
} catch (e: any) {
store.log.error('Failed fo create follow', e)
store.log.error('Failed to create follow', e)
Toast.show('An issue occurred, please try again.')
}
}

19
src/view/com/profile/ProfileHeader.tsx
View file

@ -218,7 +218,7 @@ const ProfileHeaderLoaded = observer(
onRefreshAll()
Toast.show('Account unblocked')
} catch (e: any) {
store.log.error('Failed to block unaccount', e)
store.log.error('Failed to unblock account', e)
Toast.show(`There was an issue! ${e.toString()}`)
}
},
@ -289,6 +289,9 @@ const ProfileHeaderLoaded = observer(
])
const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy)
const following = formatCount(view.followsCount)
const followers = formatCount(view.followersCount)
const pluralizedFollowers = pluralize(view.followersCount, 'follower')
return (
<View style={pal.view}>
@ -394,13 +397,13 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}
accessibilityRole="button"
accessibilityLabel={`Show ${view.handle}'s followers`}
accessibilityHint={`Shows folks following ${view.handle}`}>
accessibilityLabel={`${followers} ${pluralizedFollowers}`}
accessibilityHint={'Opens followers list'}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{formatCount(view.followersCount)}
{followers}
</Text>
<Text type="md" style={[pal.textLight]}>
{pluralize(view.followersCount, 'follower')}
{pluralizedFollowers}
</Text>
</TouchableOpacity>
<TouchableOpacity
@ -408,10 +411,10 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}
accessibilityRole="button"
accessibilityLabel={`Show ${view.handle}'s follows`}
accessibilityHint={`Shows folks followed by ${view.handle}`}>
accessibilityLabel={`${following} following`}
accessibilityHint={'Opens following list'}>
<Text type="md" style={[s.bold, s.mr2, pal.text]}>
{formatCount(view.followsCount)}
{following}
</Text>
<Text type="md" style={[pal.textLight]}>
following

15
src/view/com/search/HeaderWithInput.tsx
View file

@ -4,7 +4,6 @@ import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {Text} from 'view/com/util/text/Text'
import {MagnifyingGlassIcon} from 'lib/icons'
import {useTheme} from 'lib/ThemeContext'
@ -56,9 +55,9 @@ export function HeaderWithInput({
hitSlop={MENU_HITSLOP}
style={styles.headerMenuBtn}
accessibilityRole="button"
accessibilityLabel="Back"
accessibilityHint="">
<UserAvatar size={30} avatar={store.me.avatar} />
accessibilityLabel="Menu"
accessibilityHint="Access navigation links and settings">
<FontAwesomeIcon icon="bars" size={18} color={pal.colors.textLight} />
</TouchableOpacity>
<View
style={[
@ -87,6 +86,8 @@ export function HeaderWithInput({
accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
autoCorrect={false}
autoCapitalize="none"
/>
{query ? (
<TouchableOpacity
@ -119,6 +120,7 @@ const styles = StyleSheet.create({
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 12,
paddingVertical: 4,
},
@ -126,7 +128,10 @@ const styles = StyleSheet.create({
width: 30,
height: 30,
borderRadius: 30,
marginHorizontal: 6,
marginRight: 6,
paddingBottom: 2,
alignItems: 'center',
justifyContent: 'center',
},
headerSearchContainer: {
flex: 1,

87
src/view/com/util/UserAvatar.tsx
View file

@ -1,6 +1,6 @@
import React, {useMemo} from 'react'
import {StyleSheet, View} from 'react-native'
import Svg, {Circle, Path} from 'react-native-svg'
import Svg, {Circle, Rect, Path} from 'react-native-svg'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {HighPriorityImage} from 'view/com/util/images/Image'
@ -17,9 +17,54 @@ import {isWeb, isAndroid} from 'platform/detection'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {AvatarModeration} from 'lib/labeling/types'
type Type = 'user' | 'algo' | 'list'
const BLUR_AMOUNT = isWeb ? 5 : 100
function DefaultAvatar({size}: {size: number}) {
function DefaultAvatar({type, size}: {type: Type; size: number}) {
if (type === 'algo') {
// Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
return (
<Svg
testID="userAvatarFallback"
width={size}
height={size}
viewBox="0 0 32 32"
fill="none"
stroke="none">
<Rect width="32" height="32" rx="4" fill="#0070FF" />
<Path
d="M13.5 7.25C13.5 6.55859 14.0586 6 14.75 6C20.9648 6 26 11.0352 26 17.25C26 17.9414 25.4414 18.5 24.75 18.5C24.0586 18.5 23.5 17.9414 23.5 17.25C23.5 12.418 19.582 8.5 14.75 8.5C14.0586 8.5 13.5 7.94141 13.5 7.25ZM8.36719 14.6172L12.4336 18.6836L13.543 17.5742C13.5156 17.4727 13.5 17.3633 13.5 17.25C13.5 16.5586 14.0586 16 14.75 16C15.4414 16 16 16.5586 16 17.25C16 17.9414 15.4414 18.5 14.75 18.5C14.6367 18.5 14.5312 18.4844 14.4258 18.457L13.3164 19.5664L17.3828 23.6328C17.9492 24.1992 17.8438 25.1484 17.0977 25.4414C16.1758 25.8008 15.1758 26 14.125 26C9.63672 26 6 22.3633 6 17.875C6 16.8242 6.19922 15.8242 6.5625 14.9023C6.85547 14.1602 7.80469 14.0508 8.37109 14.6172H8.36719ZM14.75 9.75C18.8906 9.75 22.25 13.1094 22.25 17.25C22.25 17.9414 21.6914 18.5 21 18.5C20.3086 18.5 19.75 17.9414 19.75 17.25C19.75 14.4883 17.5117 12.25 14.75 12.25C14.0586 12.25 13.5 11.6914 13.5 11C13.5 10.3086 14.0586 9.75 14.75 9.75Z"
fill="white"
/>
</Svg>
)
}
if (type === 'list') {
// Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
return (
<Svg
testID="userAvatarFallback"
width={size}
height={size}
viewBox="0 0 32 32"
fill="none"
stroke="none">
<Path
d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z"
fill="#0070FF"
/>
<Path
d="M22.1529 22.3542C23.4522 22.4603 24.7593 22.293 25.9899 21.8629C26.0369 21.2838 25.919 20.7032 25.6497 20.1884C25.3805 19.6735 24.9711 19.2454 24.4687 18.9535C23.9663 18.6617 23.3916 18.518 22.8109 18.5392C22.2303 18.5603 21.6676 18.7454 21.1878 19.0731M22.1529 22.3542C22.1489 21.1917 21.8142 20.0534 21.1878 19.0741ZM10.8111 19.0741C10.3313 18.7468 9.7687 18.5619 9.18826 18.5409C8.60781 18.5199 8.03327 18.6636 7.53107 18.9554C7.02888 19.2472 6.61953 19.6752 6.35036 20.1899C6.08119 20.7046 5.96319 21.285 6.01001 21.8639C7.23969 22.2964 8.5461 22.4632 9.84497 22.3531M10.8111 19.0741C10.1851 20.0535 9.84865 21.1908 9.84497 22.3531ZM19.0759 10.077C19.0759 10.8931 18.7518 11.6757 18.1747 12.2527C17.5977 12.8298 16.815 13.154 15.9989 13.154C15.1829 13.154 14.4002 12.8298 13.8232 12.2527C13.2461 11.6757 12.922 10.8931 12.922 10.077C12.922 9.26092 13.2461 8.47828 13.8232 7.90123C14.4002 7.32418 15.1829 7 15.9989 7C16.815 7 17.5977 7.32418 18.1747 7.90123C18.7518 8.47828 19.0759 9.26092 19.0759 10.077ZM25.2299 13.154C25.2299 13.457 25.1702 13.7571 25.0542 14.0371C24.9383 14.3171 24.7683 14.5715 24.554 14.7858C24.3397 15.0001 24.0853 15.1701 23.8053 15.2861C23.5253 15.402 23.2252 15.4617 22.9222 15.4617C22.6191 15.4617 22.319 15.402 22.039 15.2861C21.759 15.1701 21.5046 15.0001 21.2903 14.7858C21.0761 14.5715 20.9061 14.3171 20.7901 14.0371C20.6741 13.7571 20.6144 13.457 20.6144 13.154C20.6144 12.5419 20.8576 11.9549 21.2903 11.5222C21.7231 11.0894 22.3101 10.8462 22.9222 10.8462C23.5342 10.8462 24.1212 11.0894 24.554 11.5222C24.9868 11.9549 25.2299 12.5419 25.2299 13.154ZM11.3835 13.154C11.3835 13.457 11.3238 13.7571 11.2078 14.0371C11.0918 14.3171 10.9218 14.5715 10.7075 14.7858C10.4932 15.0001 10.2388 15.1701 9.95886 15.2861C9.67887 15.402 9.37878 15.4617 9.07572 15.4617C8.77266 15.4617 8.47257 15.402 8.19259 15.2861C7.9126 15.1701 7.6582 15.0001 7.4439 14.7858C7.22961 14.5715 7.05962 14.3171 6.94365 14.0371C6.82767 13.7571 6.76798 13.457 6.76798 13.154C6.76798 12.5419 7.01112 11.9549 7.4439 11.5222C7.87669 11.0894 8.46367 10.8462 9.07572 10.8462C9.68777 10.8462 10.2748 11.0894 10.7075 11.5222C11.1403 11.9549 11.3835 12.5419 11.3835 13.154Z"
fill="white"
/>
<Path
d="M22 22C22 25.3137 19.3137 25.5 16 25.5C12.6863 25.5 10 25.3137 10 22C10 18.6863 12.6863 16 16 16C19.3137 16 22 18.6863 22 22Z"
fill="white"
/>
</Svg>
)
}
return (
<Svg
testID="userAvatarFallback"
@ -41,11 +86,13 @@ function DefaultAvatar({size}: {size: number}) {
}
export function UserAvatar({
type = 'user',
size,
avatar,
moderation,
onSelectNewAvatar,
}: {
type?: Type
size: number
avatar?: string | null
moderation?: AvatarModeration
@ -56,6 +103,21 @@ export function UserAvatar({
const {requestCameraAccessIfNeeded} = useCameraPermission()
const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
const aviStyle = useMemo(() => {
if (type === 'algo' || type === 'list') {
return {
width: size,
height: size,
borderRadius: 8,
}
}
return {
width: size,
height: size,
borderRadius: Math.floor(size / 2),
}
}, [type, size])
const dropdownItems = useMemo(
() => [
!isWeb && {
@ -146,16 +208,12 @@ export function UserAvatar({
{avatar ? (
<HighPriorityImage
testID="userAvatarImage"
style={{
width: size,
height: size,
borderRadius: Math.floor(size / 2),
}}
style={aviStyle}
source={{uri: avatar}}
accessibilityRole="image"
/>
) : (
<DefaultAvatar size={size} />
<DefaultAvatar type={type} size={size} />
)}
<View style={[styles.editButtonContainer, pal.btn]}>
<FontAwesomeIcon
@ -170,11 +228,7 @@ export function UserAvatar({
<View style={{width: size, height: size}}>
<HighPriorityImage
testID="userAvatarImage"
style={{
width: size,
height: size,
borderRadius: Math.floor(size / 2),
}}
style={aviStyle}
contentFit="cover"
source={{uri: avatar}}
blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
@ -183,7 +237,7 @@ export function UserAvatar({
</View>
) : (
<View style={{width: size, height: size}}>
<DefaultAvatar size={size} />
<DefaultAvatar type={type} size={size} />
{warning}
</View>
)
@ -201,11 +255,6 @@ const styles = StyleSheet.create({
justifyContent: 'center',
backgroundColor: colors.gray5,
},
avatarImage: {
width: 80,
height: 80,
borderRadius: 40,
},
warningIconContainer: {
position: 'absolute',
right: 0,

41
src/view/com/util/ViewHeader.tsx
View file

@ -4,7 +4,6 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native'
import {CenteredView} from './Views'
import {UserAvatar} from './UserAvatar'
import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
@ -20,12 +19,14 @@ export const ViewHeader = observer(function ({
canGoBack,
hideOnScroll,
showOnDesktop,
showBorder,
renderButton,
}: {
title: string
canGoBack?: boolean
hideOnScroll?: boolean
showOnDesktop?: boolean
showBorder?: boolean
renderButton?: () => JSX.Element
}) {
const pal = usePalette('default')
@ -57,7 +58,7 @@ export const ViewHeader = observer(function ({
}
return (
<Container hideOnScroll={hideOnScroll || false}>
<Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={canGoBack ? onPressBack : onPressMenu}
@ -65,7 +66,9 @@ export const ViewHeader = observer(function ({
style={canGoBack ? styles.backBtn : styles.backBtnWide}
accessibilityRole="button"
accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
accessibilityHint="">
accessibilityHint={
canGoBack ? '' : 'Access navigation links and settings'
}>
{canGoBack ? (
<FontAwesomeIcon
size={18}
@ -73,7 +76,11 @@ export const ViewHeader = observer(function ({
style={[styles.backIcon, pal.text]}
/>
) : (
<UserAvatar size={30} avatar={store.me.avatar} />
<FontAwesomeIcon
size={18}
icon="bars"
style={[styles.backIcon, pal.textLight]}
/>
)}
</TouchableOpacity>
<View style={styles.titleContainer} pointerEvents="none">
@ -115,9 +122,11 @@ const Container = observer(
({
children,
hideOnScroll,
showBorder,
}: {
children: React.ReactNode
hideOnScroll: boolean
showBorder?: boolean
}) => {
const store = useStores()
const pal = usePalette('default')
@ -145,11 +154,28 @@ const Container = observer(
}
if (!hideOnScroll) {
return <View style={[styles.header, pal.view]}>{children}</View>
return (
<View
style={[
styles.header,
pal.view,
pal.border,
showBorder && styles.border,
]}>
{children}
</View>
)
}
return (
<Animated.View
style={[styles.header, pal.view, styles.headerFloating, transform]}>
style={[
styles.header,
pal.view,
pal.border,
styles.headerFloating,
transform,
showBorder && styles.border,
]}>
{children}
</Animated.View>
)
@ -172,6 +198,9 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
paddingVertical: 12,
},
border: {
borderBottomWidth: 1,
},
titleContainer: {
marginLeft: 'auto',

12
src/view/com/util/ViewSelector.tsx
View file

@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react'
import {Pressable, StyleSheet, View} from 'react-native'
import {Pressable, RefreshControl, StyleSheet, View} from 'react-native'
import {FlatList} from './Views'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
@ -41,6 +41,7 @@ export function ViewSelector({
onRefresh?: () => void
onEndReached?: (info: {distanceFromEnd: number}) => void
}) {
const pal = usePalette('default')
const [selectedIndex, setSelectedIndex] = useState<number>(0)
// events
@ -93,10 +94,15 @@ export function ViewSelector({
ListFooterComponent={ListFooterComponent}
// NOTE sticky header disabled on android due to major performance issues -prf
stickyHeaderIndices={isAndroid ? undefined : STICKY_HEADER_INDICES}
refreshing={refreshing}
onScroll={onScroll}
onRefresh={onRefresh}
onEndReached={onEndReached}
refreshControl={
<RefreshControl
refreshing={refreshing!}
onRefresh={onRefresh}
tintColor={pal.colors.text}
/>
}
onEndReachedThreshold={0.6}
contentContainerStyle={s.contentContainer}
removeClippedSubviews={true}

1
src/view/com/util/Views.web.tsx
View file

@ -126,5 +126,6 @@ const styles = StyleSheet.create({
},
fixedHeight: {
height: '100vh',
scrollbarGutter: 'stable both-edges',
},
})

2
src/view/com/util/fab/FABInner.tsx
View file

@ -47,7 +47,7 @@ const styles = StyleSheet.create({
outer: {
position: 'absolute',
zIndex: 1,
right: 28,
right: 24,
bottom: 94,
width: 60,
height: 60,

7
src/view/com/util/forms/DropdownButton.tsx
View file

@ -136,7 +136,12 @@ export function DropdownButton({
}
return (
<View ref={ref2}>
<Button testID={testID} onPress={onPress} style={style} label={label}>
<Button
type={type}
testID={testID}
onPress={onPress}
style={style}
label={label}>
{children}
</Button>
</View>

94
src/view/com/util/load-latest/LoadLatestBtn.web.tsx
View file

@ -1,8 +1,8 @@
import React from 'react'
import {StyleSheet, TouchableOpacity} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {UpIcon} from 'lib/icons'
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
import {isMobileWeb} from 'platform/detection'
@ -11,51 +11,97 @@ const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = ({
onPress,
label,
showIndicator,
minimalShellMode,
}: {
onPress: () => void
label: string
showIndicator: boolean
minimalShellMode?: boolean
}) => {
const pal = usePalette('default')
if (isMobileWeb) {
return <LoadLatestBtnMobile onPress={onPress} label={label} />
return (
<LoadLatestBtnMobile
onPress={onPress}
label={label}
showIndicator={showIndicator}
/>
)
}
return (
<TouchableOpacity
style={[pal.view, pal.borderDark, styles.loadLatest]}
onPress={onPress}
hitSlop={HITSLOP}
accessibilityRole="button"
accessibilityLabel={`Load new ${label}`}
accessibilityHint="">
<Text type="md-bold" style={pal.text}>
<UpIcon size={16} strokeWidth={1} style={[pal.text, styles.icon]} />
Load new {label}
</Text>
</TouchableOpacity>
<>
{showIndicator && (
<TouchableOpacity
style={[
pal.view,
pal.borderDark,
styles.loadLatestCentered,
minimalShellMode && styles.loadLatestCenteredMinimal,
]}
onPress={onPress}
hitSlop={HITSLOP}
accessibilityRole="button"
accessibilityLabel={label}
accessibilityHint="">
<Text type="md-bold" style={pal.text}>
{label}
</Text>
</TouchableOpacity>
)}
<TouchableOpacity
style={[pal.view, pal.borderDark, styles.loadLatest]}
onPress={onPress}
hitSlop={HITSLOP}
accessibilityRole="button"
accessibilityLabel={label}
accessibilityHint="">
<Text type="md-bold" style={pal.text}>
<FontAwesomeIcon
icon="angle-up"
size={21}
style={[pal.text, styles.icon]}
/>
</Text>
</TouchableOpacity>
</>
)
}
const styles = StyleSheet.create({
loadLatest: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
left: '50vw',
// @ts-ignore web only -prf
transform: 'translateX(-50%)',
top: 60,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: {width: 0, height: 2},
shadowRadius: 4,
paddingLeft: 20,
paddingRight: 24,
paddingVertical: 10,
transform: 'translateX(-282px)',
bottom: 40,
width: 54,
height: 54,
borderRadius: 30,
borderWidth: 1,
},
icon: {
position: 'relative',
top: 2,
marginRight: 5,
},
loadLatestCentered: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
left: '50vw',
// @ts-ignore web only -prf
transform: 'translateX(-50%)',
top: 60,
paddingHorizontal: 24,
paddingVertical: 14,
borderRadius: 30,
borderWidth: 1,
},
loadLatestCenteredMinimal: {
top: 20,
},
})

64
src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
View file

@ -1,23 +1,35 @@
import React from 'react'
import {StyleSheet, TouchableOpacity} from 'react-native'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import LinearGradient from 'react-native-linear-gradient'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {Text} from '../text/Text'
import {colors, gradients} from 'lib/styles'
import {clamp} from 'lodash'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {colors} from 'lib/styles'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = observer(
({onPress, label}: {onPress: () => void; label: string}) => {
({
onPress,
label,
showIndicator,
}: {
onPress: () => void
label: string
showIndicator: boolean
minimalShellMode?: boolean // NOTE not used on mobile -prf
}) => {
const store = useStores()
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
return (
<TouchableOpacity
style={[
styles.loadLatest,
pal.borderDark,
pal.view,
!store.shell.minimalShellMode && {
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
},
@ -25,17 +37,10 @@ export const LoadLatestBtn = observer(
onPress={onPress}
hitSlop={HITSLOP}
accessibilityRole="button"
accessibilityLabel={`Load new ${label}`}
accessibilityHint={`Loads new ${label}`}>
<LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={styles.loadLatestInner}>
<Text type="md-bold" style={styles.loadLatestText}>
Load new {label}
</Text>
</LinearGradient>
accessibilityLabel={label}
accessibilityHint="">
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
</TouchableOpacity>
)
},
@ -44,19 +49,24 @@ export const LoadLatestBtn = observer(
const styles = StyleSheet.create({
loadLatest: {
position: 'absolute',
left: 20,
left: 18,
bottom: 35,
shadowColor: '#000',
shadowOpacity: 0.3,
shadowOffset: {width: 0, height: 1},
},
loadLatestInner: {
borderWidth: 1,
width: 52,
height: 52,
borderRadius: 26,
flexDirection: 'row',
paddingHorizontal: 14,
paddingVertical: 10,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
},
loadLatestText: {
color: colors.white,
indicator: {
position: 'absolute',
top: 3,
right: 3,
backgroundColor: colors.blue3,
width: 12,
height: 12,
borderRadius: 6,
borderWidth: 1,
},
})

8
src/view/com/util/moderation/ImageHider.tsx
View file

@ -27,6 +27,10 @@ export function ImageHider({
setOverride(false)
}, [setOverride])
if (moderation.behavior === ModerationBehaviorCode.Hide) {
return null
}
if (moderation.behavior !== ModerationBehaviorCode.WarnImages) {
return (
<View testID={testID} style={style}>
@ -35,10 +39,6 @@ export function ImageHider({
)
}
if (moderation.behavior === ModerationBehaviorCode.Hide) {
return null
}
return (
<View style={[styles.container, containerStyle]}>
<View testID={testID} style={style}>

34
src/view/com/util/moderation/PostHider.tsx
View file

@ -1,11 +1,5 @@
import React from 'react'
import {
StyleProp,
StyleSheet,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native'
import React, {ComponentProps} from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {Link} from '../Link'
@ -13,18 +7,21 @@ import {Text} from '../text/Text'
import {addStyle} from 'lib/styles'
import {ModerationBehaviorCode, ModerationBehavior} from 'lib/labeling/types'
interface Props extends ComponentProps<typeof Link> {
// testID?: string
// href?: string
// style: StyleProp<ViewStyle>
moderation: ModerationBehavior
}
export function PostHider({
testID,
href,
moderation,
style,
children,
}: React.PropsWithChildren<{
testID?: string
href?: string
moderation: ModerationBehavior
style: StyleProp<ViewStyle>
}>) {
...props
}: Props) {
const pal = usePalette('default')
const [override, setOverride] = React.useState(false)
const bg = override ? pal.viewLight : pal.view
@ -70,7 +67,14 @@ export function PostHider({
// NOTE: any further label enforcement should occur in ContentContainer
return (
<Link testID={testID} style={style} href={href} noFeedback>
<Link
testID={testID}
style={style}
href={href}
noFeedback
accessible={true}
accessibilityRole="none"
{...props}>
{children}
</Link>
)

10
src/view/com/util/numeric/format.ts
View file

@ -3,3 +3,13 @@ export const formatCount = (num: number) =>
notation: 'compact',
maximumFractionDigits: 1,
}).format(num)
export function formatCountShortOnly(num: number): string {
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M'
}
if (num >= 1000) {
return (num / 1000).toFixed(1) + 'K'
}
return String(num)
}

23
src/view/com/util/post-ctrls/PostCtrls.tsx
View file

@ -10,9 +10,6 @@ import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import ReactNativeHapticFeedback, {
HapticFeedbackTypes,
} from 'react-native-haptic-feedback'
// DISABLED see #135
// import {
// TriggerableAnimated,
@ -24,8 +21,8 @@ import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons'
import {s, colors} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {useStores} from 'state/index'
import {isIOS, isNative} from 'platform/detection'
import {RepostButton} from './RepostButton'
import {Haptics} from 'lib/haptics'
interface PostCtrlsOpts {
itemUri: string
@ -58,7 +55,6 @@ interface PostCtrlsOpts {
}
const HITSLOP = {top: 5, left: 5, bottom: 5, right: 5}
const hapticImpact: HapticFeedbackTypes = isIOS ? 'impactMedium' : 'impactLight' // Users said the medium impact was too strong on Android; see APP-537
// DISABLED see #135
/*
@ -111,9 +107,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
const onRepost = useCallback(() => {
store.shell.closeModal()
if (!opts.isReposted) {
if (isNative) {
ReactNativeHapticFeedback.trigger(hapticImpact)
}
Haptics.default()
opts.onPressToggleRepost().catch(_e => undefined)
// DISABLED see #135
// repostRef.current?.trigger(
@ -139,10 +133,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
indexedAt: opts.indexedAt,
},
})
if (isNative) {
ReactNativeHapticFeedback.trigger(hapticImpact)
}
Haptics.default()
}, [
opts.author,
opts.indexedAt,
@ -154,7 +145,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
const onPressToggleLikeWrapper = async () => {
if (!opts.isLiked) {
ReactNativeHapticFeedback.trigger(hapticImpact)
Haptics.default()
await opts.onPressToggleLike().catch(_e => undefined)
// DISABLED see #135
// likeRef.current?.trigger(
@ -200,12 +191,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
onPress={onPressToggleLikeWrapper}
accessibilityRole="button"
accessibilityLabel={opts.isLiked ? 'Unlike' : 'Like'}
accessibilityHint={
opts.isReposted ? `Removes like from the post` : `Like the post`
}>
accessibilityHint="">
{opts.isLiked ? (
<HeartIconSolid
style={styles.ctrlIconLiked as StyleProp<ViewStyle>}
style={styles.ctrlIconLiked}
size={opts.big ? 22 : 16}
/>
) : (

6
src/view/com/util/post-ctrls/RepostButton.tsx
View file

@ -50,11 +50,7 @@ export const RepostButton = ({
style={styles.control}
accessibilityRole="button"
accessibilityLabel={isReposted ? 'Undo repost' : 'Repost'}
accessibilityHint={
isReposted
? `Remove your repost of the post`
: `Repost or quote post the post`
}>
accessibilityHint="">
<RepostIcon
style={
isReposted

47
src/view/com/util/post-embeds/index.tsx
View file

@ -13,6 +13,7 @@ import {
AppBskyEmbedRecord,
AppBskyEmbedRecordWithMedia,
AppBskyFeedPost,
AppBskyFeedDefs,
} from '@atproto/api'
import {Link} from '../Link'
import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
@ -24,6 +25,8 @@ import {ExternalLinkEmbed} from './ExternalLinkEmbed'
import {getYoutubeVideoId} from 'lib/strings/url-helpers'
import QuoteEmbed from './QuoteEmbed'
import {AutoSizedImage} from '../images/AutoSizedImage'
import {CustomFeed} from 'view/com/feeds/CustomFeed'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
type Embed =
| AppBskyEmbedRecord.View
@ -42,6 +45,8 @@ export function PostEmbeds({
const pal = usePalette('default')
const store = useStores()
// quote post with media
// =
if (
AppBskyEmbedRecordWithMedia.isView(embed) &&
AppBskyEmbedRecord.isViewRecord(embed.record.record) &&
@ -65,6 +70,8 @@ export function PostEmbeds({
)
}
// quote post
// =
if (AppBskyEmbedRecord.isView(embed)) {
if (
AppBskyEmbedRecord.isViewRecord(embed.record) &&
@ -87,6 +94,8 @@ export function PostEmbeds({
}
}
// image embed
// =
if (AppBskyEmbedImages.isView(embed)) {
const {images} = embed
@ -100,7 +109,7 @@ export function PostEmbeds({
RNImage.prefetch(firstImageToShow)
items.forEach(item => {
if (firstImageToShow !== item.uri) {
// First image already prefeched above
// First image already prefetched above
RNImage.prefetch(item.uri)
}
})
@ -132,10 +141,11 @@ export function PostEmbeds({
/>
</View>
)
// }
}
}
// external link embed
// =
if (AppBskyEmbedExternal.isView(embed)) {
const link = embed.external
const youtubeVideoId = getYoutubeVideoId(link.uri)
@ -153,9 +163,35 @@ export function PostEmbeds({
</Link>
)
}
// custom feed embed (i.e. generator view)
// =
if (
AppBskyEmbedRecord.isView(embed) &&
AppBskyFeedDefs.isGeneratorView(embed.record)
) {
return <CustomFeedEmbed record={embed.record} />
}
return <View />
}
function CustomFeedEmbed({record}: {record: AppBskyFeedDefs.GeneratorView}) {
const pal = usePalette('default')
const store = useStores()
const item = React.useMemo(
() => new CustomFeedModel(store, record),
[store, record],
)
return (
<CustomFeed
item={item}
style={[pal.view, pal.border, styles.customFeedOuter]}
showLikes
/>
)
}
const styles = StyleSheet.create({
stackContainer: {
gap: 6,
@ -172,6 +208,13 @@ const styles = StyleSheet.create({
borderRadius: 8,
marginTop: 4,
},
customFeedOuter: {
borderWidth: 1,
borderRadius: 8,
marginTop: 4,
paddingHorizontal: 12,
paddingVertical: 12,
},
alt: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
borderRadius: 6,

Some files were not shown because too many files have changed in this diff Show more