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

Squashed commit of the following:

Browse Source 
commit af5262682e
Author: Minseo Lee <itoupluk427@gmail.com>
Date:   Thu Aug 8 21:12:23 2024 +0900

    Added trans (#4890)

commit a864f69849
Author: dan <dan.abramov@gmail.com>
Date:   Thu Aug 8 06:20:24 2024 +0100

    Keep interstitial fresh on refresh (#4888)

commit 00fea10782
Author: dan <dan.abramov@gmail.com>
Date:   Thu Aug 8 05:56:22 2024 +0100

    Include popcluster in suggestion ranking (#4887)

commit b3092413dd
Author: Hailey <me@haileyok.com>
Date:   Wed Aug 7 17:13:29 2024 -0700

    Add logging of selected feed preference when displaying the following feed (#4789)

commit 1b02f81cb8
Author: Hailey <me@haileyok.com>
Date:   Wed Aug 7 14:45:06 2024 -0700

    [Video] Visibility detection view (#4741)

    Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>

commit fff2c079c2
Author: Samuel Newman <mozzius@protonmail.com>
Date:   Wed Aug 7 18:47:51 2024 +0100

    [Videos] Video player - PR #2 - better web support (#4732)

    * attempt some sort of "usurping" system

    * polling-based active video approach

    * split into inner component again

    * click to steal active video

    * disable findAndActivateVideo on native

    * new intersectionobserver approach - wip

    * fix types

    * disable perf optimisation to allow overflow

    * make active player indicator subtler, clean up video utils

    * partially fix double-playing

    * start working on controls

    * fullscreen API

    * get buttons working somewhat

    * rm source from where it shouldn't be

    * use video elem as source of truth

    * fix keyboard nav + mute state

    * new icons, add fullscreen + time + fix play

    * unmount when far offscreen + round 2dp

    * listen globally to clicks rather than blur event

    * move controls to new file

    * reduce quality when not active

    * add hover state to buttons

    * stop propagation of videoplayer click

    * move around autoplay effects

    * increase background contrast

    * add subtitles button

    * add stopPropagation to root of video player

    * clean up VideoWebControls

    * fix chrome

    * change quality based on focused state

    * use autoLevelCapping instead of nextLevel

    * get subtitle track from stream

    * always use hlsjs

    * rework hls into a ref

    * render player earlier, allowing preload

    * add error boundary

    * clean up component structure and organisation

    * rework fullscreen API

    * disable fullscreen on iPhone

    * don't play when ready on pause

    * debounce buffering

    * simplify giant list of event listeners

    * update pref

    * reduce prop drilling

    * minimise rerenders in `ActiveViewContext`

    * restore prop drilling

    ---------

    Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
    Co-authored-by: Hailey <me@haileyok.com>

commit b701e8c68c
Author: Samuel Newman <mozzius@protonmail.com>
Date:   Wed Aug 7 16:56:12 2024 +0100

    [Video] Authed video upload (#4885)

    * add service auth call

    * update API package

    ---------

    Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>

commit 753a233408
Author: Hailey <me@haileyok.com>
Date:   Tue Aug 6 11:21:59 2024 -0700

    Tweak feed manip to show cases of A -> B without further children (#4883)

commit 5845e08eee
Author: dan <dan.abramov@gmail.com>
Date:   Tue Aug 6 17:12:27 2024 +0100

    Show own replies before follows' replies in threads (#4882)

commit b291a1ed8a
Author: dan <dan.abramov@gmail.com>
Date:   Tue Aug 6 16:42:42 2024 +0100

    Show more replies in Following (different heuristic) (#4880)

commit 686d5ebb53
Author: dan <dan.abramov@gmail.com>
Date:   Tue Aug 6 01:30:52 2024 +0100

    [Persisted] Make broadcast subscriptions granular by key (#4874)

    * Add fast path for guaranteed noop updates

    * Change persisted.onUpdate() API to take a key

    * Implement granular broadcast listeners

commit 966f6c511f
Author: dan <dan.abramov@gmail.com>
Date:   Tue Aug 6 01:03:27 2024 +0100

    [Persisted] Fix the race condition causing clobbered writes between tabs (#4873)

    * Broadcast the update in the same tick

    The motivation for the original code is unclear. I was not able to reproduce the described behavior and have not seen it mentioned on the web. I'll assume that this was a misunderstanding.

    * Remove defensive programming

    The only places in this code that we can expect to throw are schema.parse(), JSON.parse(), JSON.stringify(), and localStorage.getItem/setItem/removeItem. Let's push try/catch'es where we expect them to be necessary.

    * Don't write or clobber defaults

    Writing defaults to local storage is unnecessary. We would write them as a part of next update anyway. So I'm removing that to reduce the number of moving pieces.

    However, we do need to be wary of _state being set to defaults. Because _state gets mutated on write. We don't want to mutate the defaults object. To avoid having to think about this, let's copy on write. We don't write to this object very often.

    * Refactor: extract tryParse

    * Refactor: move string parsing into tryParse

    * Extract tryStringify, split logging by platform

    Shared data parsing/stringification errors are always logged. Storage errors are only logged on native because we trust the web APIs to work.

    * Add a layer of caching to readFromStorage to web

    We're going to be doing a read on every write so let's add a fast path that avoids parsing and validating.

    * Fix the race condition causing clobbered writes between tabs

commit 5bf7f3769d
Author: dan <dan.abramov@gmail.com>
Date:   Tue Aug 6 00:30:58 2024 +0100

    [Persisted] Fork web and native, make it synchronous on the web (#4872)

    * Delete logic for legacy storage

    * Delete superfluous tests

    At this point these tests aren't testing anything useful, let's just get rid of them.

    * Inline store.ts methods into persisted/index.ts

    * Fork persisted/index.ts into index.web.ts

    * Remove non-essential code and comments from both forks

    * Remove async/await from web fork of persisted/index.ts

    * Remove unused return

    * Enforce that forked types match

commit 74b0318d89
Author: dan <dan.abramov@gmail.com>
Date:   Mon Aug 5 20:51:41 2024 +0100

    Show replies in context of their threads (#4871)

    * Don't reconstruct threads from separate posts

    * Remove post-level dedupe for now

    * Change repost dedupe condition to look just at length

    * Delete unused isThread

    * Delete another isThread field

    It is now meaningless because there's nothing special about author threads.

    * Narrow down slice item shape so it does not need reply

    * Consolidate slice validation criteria in one place

    * Show replies in context

    * Make fallback marker work

    * Remove misleading and now-unused property

    It was called rootUri but it was actually the leaf URI. Regardless, it's not used anymore.

    * Add by-thread dedupe to non-author feeds

    * Add post-level dedupe

    * Always count from the start

    This is easier to think about.

    * Only tuner state need to be untouched on dry run

    * Account for threads in reply filtering

    * Remove repost deduping

    This is already being taken care of by item-level deduping. It's also now wrong and removing too much (since it wasn't filtering for reposts directly).

    * Calculate rootUri correctly

    * Apply Following settings to all lists

    * Don't dedupe intentional reposts by thread

    * Show reply parent when ambiguous

    * Explicitly remove orphaned replies from following/lists

    * Fix thread dedupe to work across pages

    * Mark grandparent-blocked as orphaned

    * Guard tuner state change by dryRun

    * Remove dead code

    * Don't dedupe feedgen threads

    * Revert "Apply Following settings to all lists"

    This reverts commit aff86be6d37b60cc5d0ac38f22c31a4808342cf4.

    Let's not do this yet and have a bit more discussion. This is a chunky change already.

    * Reason belongs to a slice, not item

    * Logically feedContext belongs to the slice

    * Update comment to reflect latest behavior

commit 18b423396b
Author: Hailey <me@haileyok.com>
Date:   Mon Aug 5 12:21:34 2024 -0700

    Add `PlatformInfo` module (#4877)

commit fb278384c6
Author: bnewbold <bnewbold@robocracy.org>
Date:   Fri Aug 2 15:57:50 2024 -0700

    bskyweb: optional basic auth password middleware (#4759)

commit 6298e6897f
Author: Samuel Newman <mozzius@protonmail.com>
Date:   Sat Aug 3 00:33:45 2024 +0200

    tweak list header (#4870)

    Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>

commit c3d8beee6d
Author: Eric Bailey <git@esb.lol>
Date:   Fri Aug 2 13:05:33 2024 -0500

    Respect labels on feeds and lists (#4818)

    * Prep

    * Pass in optional moderation to FeedCard

    * Compute moderation decision, filter contentList contexts, pass into card

    * Let's go a different route

    * Filter from within search queries

    * Use same search query for starter packs

    * Filter lists from profile tabs

    * Cleanup

    * Filter from profile feeds

    * Moderate post embeds

    * Memoize

    * Use ScreenHider on lists

    * Hide both list types

    * Fix crash on iOS in screen hider, fix lineheight

    * Memoize renderItem

    * Reuse objects to prevent re-renders

commit 293ac6fab2
Author: dan <dan.abramov@gmail.com>
Date:   Fri Aug 2 17:13:31 2024 +0100

    Only show replies in Following if following all involved actors (#4869)

    * Only show replies in Following for followed root and grandparent

    * Remove now-unnecessary check

    * Simplify condition

commit 7f292abf51
Author: dan <dan.abramov@gmail.com>
Date:   Thu Aug 1 22:05:40 2024 +0100

    Always limit Following replies to the people you follow (#4868)

    * Limit feed replies to people you follow

    * Remove dead code

commit f056cb646e
Author: Hailey <me@haileyok.com>
Date:   Thu Aug 1 10:32:36 2024 -0700

    Fix missing header on Likes/Reposted By, add missing perf optimizations (#4867)

    * fix liked by list

    * fix lists

    * tweaks to style

    * change string

commit c78e9e3147
Author: Samuel Newman <mozzius@protonmail.com>
Date:   Thu Aug 1 19:14:32 2024 +0200

    Move theme controls to its own screen (#4866)

commit 388c157c36
Author: dan <dan.abramov@gmail.com>
Date:   Thu Aug 1 17:49:43 2024 +0100

    Display second-to-last rather than second post in a slice (#4864)

commit b0e130a4d8
Author: Eric Bailey <git@esb.lol>
Date:   Thu Aug 1 10:29:27 2024 -0500

    Update muted words dialog with `expiresAt` and `actorTarget` (#4801)

    * WIP not working dropdown

    * Update MutedWords dialog

    * Add i18n formatDistance

    * Comments

    * Handle text wrapping

    * Update label copy

    Co-authored-by: Hailey <me@haileyok.com>

    * Fix alignment

    * Improve translation output

    * Revert toggle changes

    * Better types for useFormatDistance

    * Tweaks

    * Integrate new sdk version into TagMenu

    * Use ampersand

    Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

    * Bump SDK

    ---------

    Co-authored-by: Hailey <me@haileyok.com>
    Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

commit d2e88cc623
Author: dan <dan.abramov@gmail.com>
Date:   Thu Aug 1 02:27:25 2024 +0100

    Fetch enough pages to fill a page's worth of items (#4863)

    * Fetch enough pages to fill a page's worth of items

    * Add failsafe in case of appview bug

commit 70ffd387e3
Author: Hailey <me@haileyok.com>
Date:   Wed Jul 31 11:16:14 2024 -0700

    Only show "followed you back" when appropriate (#4849)

    * only show followed back when we should

    * try/catch

    * log

    * Update FeedItem.tsx

    * tweak

commit 576cef88b5
Author: dan <dan.abramov@gmail.com>
Date:   Wed Jul 31 19:10:24 2024 +0100

    [Web] Retrigger onEndReached if needed when content height changes (#4859)

    * Extract EdgeVisibility

    * Key Visibility by container height instead of item count

commit c75bb65bef
Author: dan <dan.abramov@gmail.com>
Date:   Wed Jul 31 13:00:22 2024 +0100

    Remove unused NoopFeedTuner (#4856)

commit c3e77b56ff
Author: GSMT <samaritanojr006@gmail.com>
Date:   Wed Jul 31 00:19:23 2024 +0200

    useDedupe callback (#4855)

commit 8ddb28d3c5
Author: Hailey <me@haileyok.com>
Date:   Tue Jul 30 08:25:31 2024 -0700

    [Video] Uploads (#4754)

    * state for video uploads

    * get upload working

    * add a debug log

    * add post progress

    * progress

    * fetch data

    * add some progress info, web uploads

    * post on finished uploading (wip)

    * add a note

    * add some todos

    * clear video

    * merge some stuff

    * convert to `createUploadTask`

    * patch expo modules core

    * working native upload progress

    * platform fork

    * upload progress for web

    * cleanup

    * cleanup

    * more tweaks

    * simplify

    * fix type errors

    ---------

    Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Merge remote-tracking branch 'upstream/main' into Improve-notification-localization
This commit is contained in:
Minseo Lee
2024-08-08 22:19:44 +09:00
parent a1e99a031a af5262682e
commit ed084b7a80
152 changed files with 4308 additions and 1996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+9
View File
@@ -44,6 +44,7 @@ import HashtagScreen from '#/screens/Hashtag'
import {ModerationScreen} from '#/screens/Moderation'
import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
import {
StarterPackScreen,
StarterPackScreenShort,
@@ -310,6 +311,14 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
requireAuth: true,
}}
/>
<Stack.Screen
name="AppearanceSettings"
getComponent={() => AppearanceSettingsScreen}
options={{
title: title(msg`Appearance Settings`),
requireAuth: true,
}}
/>
<Stack.Screen
name="Hashtag"
getComponent={() => HashtagScreen}
src/components/FeedInterstitials.tsx
+6 -4
View File
@@ -92,14 +92,16 @@ function getRank(seenPost: SeenPost): string {
tier = 'a'
} else if (seenPost.feedContext?.startsWith('cluster')) {
tier = 'b'
} else if (seenPost.feedContext?.startsWith('ntpc')) {
} else if (seenPost.feedContext === 'popcluster') {
tier = 'c'
} else if (seenPost.feedContext?.startsWith('t-')) {
} else if (seenPost.feedContext?.startsWith('ntpc')) {
tier = 'd'
} else if (seenPost.feedContext === 'nettop') {
} else if (seenPost.feedContext?.startsWith('t-')) {
tier = 'e'
} else {
} else if (seenPost.feedContext === 'nettop') {
tier = 'f'
} else {
tier = 'g'
}
let score = Math.round(
Math.log(
src/components/Lists.tsx
+10 -2
View File
@@ -122,8 +122,16 @@ export function ListHeaderDesktop({
if (!gtTablet) return null
return (
<View style={[a.w_full, a.py_lg, a.px_xl, a.gap_xs]}>
<Text style={[a.text_3xl, a.font_bold]}>{title}</Text>
<View
style={[
a.w_full,
a.py_sm,
a.px_xl,
a.gap_xs,
a.justify_center,
{minHeight: 50},
]}>
<Text style={[a.text_2xl, a.font_bold]}>{title}</Text>
{subtitle ? (
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
{subtitle}
src/components/TagMenu/index.tsx
+35 -21
View File
@@ -1,27 +1,27 @@
import React from 'react'
import {View} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import {useLingui} from '@lingui/react'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {atoms as a, native, useTheme} from '#/alf'
import * as Dialog from '#/components/Dialog'
import {Text} from '#/components/Typography'
import {Button, ButtonText} from '#/components/Button'
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
import {Divider} from '#/components/Divider'
import {Link} from '#/components/Link'
import {makeSearchLink} from '#/lib/routes/links'
import {NavigationProp} from '#/lib/routes/types'
import {isInvalidHandle} from '#/lib/strings/handles'
import {
usePreferencesQuery,
useRemoveMutedWordsMutation,
useUpsertMutedWordsMutation,
useRemoveMutedWordMutation,
} from '#/state/queries/preferences'
import {atoms as a, native, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Divider} from '#/components/Divider'
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
import {Link} from '#/components/Link'
import {Loader} from '#/components/Loader'
import {isInvalidHandle} from '#/lib/strings/handles'
import {Text} from '#/components/Typography'
export function useTagMenuControl() {
return Dialog.useDialogControl()
@@ -52,10 +52,10 @@ export function TagMenu({
reset: resetUpsert,
} = useUpsertMutedWordsMutation()
const {
mutateAsync: removeMutedWord,
mutateAsync: removeMutedWords,
variables: optimisticRemove,
reset: resetRemove,
} = useRemoveMutedWordMutation()
} = useRemoveMutedWordsMutation()
const displayTag = '#' + tag
const isMuted = Boolean(
@@ -65,9 +65,20 @@ export function TagMenu({
optimisticUpsert?.find(
m => m.value === tag && m.targets.includes('tag'),
)) &&
!(optimisticRemove?.value === tag),
!optimisticRemove?.find(m => m?.value === tag),
)
/*
* Mute word records that exactly match the tag in question.
*/
const removeableMuteWords = React.useMemo(() => {
return (
preferences?.moderationPrefs.mutedWords?.filter(word => {
return word.value === tag
}) || []
)
}, [tag, preferences?.moderationPrefs?.mutedWords])
return (
<>
{children}
@@ -212,13 +223,16 @@ export function TagMenu({
control.close(() => {
if (isMuted) {
resetUpsert()
removeMutedWord({
value: tag,
targets: ['tag'],
})
removeMutedWords(removeableMuteWords)
} else {
resetRemove()
upsertMutedWord([{value: tag, targets: ['tag']}])
upsertMutedWord([
{
value: tag,
targets: ['tag'],
actorTarget: 'all',
},
])
}
})
}}>
src/components/TagMenu/index.web.tsx
+25 -11
View File
@@ -3,16 +3,16 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {isInvalidHandle} from '#/lib/strings/handles'
import {EventStopper} from '#/view/com/util/EventStopper'
import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown'
import {NavigationProp} from '#/lib/routes/types'
import {isInvalidHandle} from '#/lib/strings/handles'
import {enforceLen} from '#/lib/strings/helpers'
import {
usePreferencesQuery,
useRemoveMutedWordsMutation,
useUpsertMutedWordsMutation,
useRemoveMutedWordMutation,
} from '#/state/queries/preferences'
import {enforceLen} from '#/lib/strings/helpers'
import {EventStopper} from '#/view/com/util/EventStopper'
import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown'
import {web} from '#/alf'
import * as Dialog from '#/components/Dialog'
@@ -47,8 +47,8 @@ export function TagMenu({
const {data: preferences} = usePreferencesQuery()
const {mutateAsync: upsertMutedWord, variables: optimisticUpsert} =
useUpsertMutedWordsMutation()
const {mutateAsync: removeMutedWord, variables: optimisticRemove} =
useRemoveMutedWordMutation()
const {mutateAsync: removeMutedWords, variables: optimisticRemove} =
useRemoveMutedWordsMutation()
const isMuted = Boolean(
(preferences?.moderationPrefs.mutedWords?.find(
m => m.value === tag && m.targets.includes('tag'),
@@ -56,10 +56,21 @@ export function TagMenu({
optimisticUpsert?.find(
m => m.value === tag && m.targets.includes('tag'),
)) &&
!(optimisticRemove?.value === tag),
!optimisticRemove?.find(m => m?.value === tag),
)
const truncatedTag = '#' + enforceLen(tag, 15, true, 'middle')
/*
* Mute word records that exactly match the tag in question.
*/
const removeableMuteWords = React.useMemo(() => {
return (
preferences?.moderationPrefs.mutedWords?.filter(word => {
return word.value === tag
}) || []
)
}, [tag, preferences?.moderationPrefs?.mutedWords])
const dropdownItems = React.useMemo(() => {
return [
{
@@ -105,9 +116,11 @@ export function TagMenu({
: _(msg`Mute ${truncatedTag}`),
onPress() {
if (isMuted) {
removeMutedWord({value: tag, targets: ['tag']})
removeMutedWords(removeableMuteWords)
} else {
upsertMutedWord([{value: tag, targets: ['tag']}])
upsertMutedWord([
{value: tag, targets: ['tag'], actorTarget: 'all'},
])
}
},
testID: 'tagMenuMute',
@@ -129,7 +142,8 @@ export function TagMenu({
tag,
truncatedTag,
upsertMutedWord,
removeMutedWord,
removeMutedWords,
removeableMuteWords,
])
return (
src/components/dialogs/MutedWords.tsx
+283 -90
View File
@@ -1,5 +1,5 @@
import React from 'react'
import {Keyboard, View} from 'react-native'
import {View} from 'react-native'
import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -24,6 +24,7 @@ import * as Dialog from '#/components/Dialog'
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
import {Divider} from '#/components/Divider'
import * as Toggle from '#/components/forms/Toggle'
import {useFormatDistance} from '#/components/hooks/dates'
import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
@@ -32,6 +33,8 @@ import {Loader} from '#/components/Loader'
import * as Prompt from '#/components/Prompt'
import {Text} from '#/components/Typography'
const ONE_DAY = 24 * 60 * 60 * 1000
export function MutedWordsDialog() {
const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
return (
@@ -53,16 +56,32 @@ function MutedWordsInner() {
} = usePreferencesQuery()
const {isPending, mutateAsync: addMutedWord} = useUpsertMutedWordsMutation()
const [field, setField] = React.useState('')
const [options, setOptions] = React.useState(['content'])
const [targets, setTargets] = React.useState(['content'])
const [error, setError] = React.useState('')
const [durations, setDurations] = React.useState(['forever'])
const [excludeFollowing, setExcludeFollowing] = React.useState(false)
const submit = React.useCallback(async () => {
const sanitizedValue = sanitizeMutedWordValue(field)
const targets = ['tag', options.includes('content') && 'content'].filter(
const surfaces = ['tag', targets.includes('content') && 'content'].filter(
Boolean,
) as AppBskyActorDefs.MutedWord['targets']
const actorTarget = excludeFollowing ? 'exclude-following' : 'all'
if (!sanitizedValue || !targets.length) {
const now = Date.now()
const rawDuration = durations.at(0)
// undefined evaluates to 'forever'
let duration: string | undefined
if (rawDuration === '24_hours') {
duration = new Date(now + ONE_DAY).toISOString()
} else if (rawDuration === '7_days') {
duration = new Date(now + 7 * ONE_DAY).toISOString()
} else if (rawDuration === '30_days') {
duration = new Date(now + 30 * ONE_DAY).toISOString()
}
if (!sanitizedValue || !surfaces.length) {
setField('')
setError(_(msg`Please enter a valid word, tag, or phrase to mute`))
return
@@ -70,28 +89,37 @@ function MutedWordsInner() {
try {
// send raw value and rely on SDK as sanitization source of truth
await addMutedWord([{value: field, targets}])
await addMutedWord([
{
value: field,
targets: surfaces,
actorTarget,
expiresAt: duration,
},
])
setField('')
} catch (e: any) {
logger.error(`Failed to save muted word`, {message: e.message})
setError(e.message)
}
}, [_, field, options, addMutedWord, setField])
}, [_, field, targets, addMutedWord, setField, durations, excludeFollowing])
return (
<Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
<View onTouchStart={Keyboard.dismiss}>
<View>
<Text
style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
<Trans>Add muted words and tags</Trans>
</Text>
<Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
<Trans>
Posts can be muted based on their text, their tags, or both.
Posts can be muted based on their text, their tags, or both. We
recommend avoiding common words that appear in many posts, since it
can result in no posts being shown.
</Trans>
</Text>
<View style={[a.pb_lg]}>
<View style={[a.pb_sm]}>
<Dialog.Input
autoCorrect={false}
autoCapitalize="none"
@@ -107,30 +135,135 @@ function MutedWordsInner() {
}}
onSubmitEditing={submit}
/>
</View>
<View style={[a.pb_xl, a.gap_sm]}>
<Toggle.Group
label={_(msg`Toggle between muted word options.`)}
label={_(msg`Select how long to mute this word for.`)}
type="radio"
values={options}
onChange={setOptions}>
values={durations}
onChange={setDurations}>
<Text
style={[
a.pb_xs,
a.text_sm,
a.font_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Duration:</Trans>
</Text>
<View
style={[
a.pt_sm,
a.py_sm,
a.flex_row,
a.align_center,
gtMobile && [a.flex_row, a.align_center, a.justify_start],
a.gap_sm,
a.flex_wrap,
]}>
<View
style={[
a.flex_1,
a.flex_row,
a.justify_start,
a.align_center,
a.gap_sm,
]}>
<Toggle.Item
label={_(msg`Mute this word until you unmute it`)}
name="forever"
style={[a.flex_1]}>
<TargetToggle>
<View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Radio />
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>Forever</Trans>
</Toggle.LabelText>
</View>
</TargetToggle>
</Toggle.Item>
<Toggle.Item
label={_(msg`Mute this word for 24 hours`)}
name="24_hours"
style={[a.flex_1]}>
<TargetToggle>
<View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Radio />
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>24 hours</Trans>
</Toggle.LabelText>
</View>
</TargetToggle>
</Toggle.Item>
</View>
<View
style={[
a.flex_1,
a.flex_row,
a.justify_start,
a.align_center,
a.gap_sm,
]}>
<Toggle.Item
label={_(msg`Mute this word for 7 days`)}
name="7_days"
style={[a.flex_1]}>
<TargetToggle>
<View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Radio />
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>7 days</Trans>
</Toggle.LabelText>
</View>
</TargetToggle>
</Toggle.Item>
<Toggle.Item
label={_(msg`Mute this word for 30 days`)}
name="30_days"
style={[a.flex_1]}>
<TargetToggle>
<View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Radio />
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>30 days</Trans>
</Toggle.LabelText>
</View>
</TargetToggle>
</Toggle.Item>
</View>
</View>
</Toggle.Group>
<Toggle.Group
label={_(msg`Select what content this mute word should apply to.`)}
type="radio"
values={targets}
onChange={setTargets}>
<Text
style={[
a.pb_xs,
a.text_sm,
a.font_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Mute in:</Trans>
</Text>
<View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}>
<Toggle.Item
label={_(msg`Mute this word in post text and tags`)}
name="content"
style={[a.flex_1, !gtMobile && [a.w_full, a.flex_0]]}>
style={[a.flex_1]}>
<TargetToggle>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Radio />
<Toggle.LabelText>
<Trans>Mute in text & tags</Trans>
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>Text & tags</Trans>
</Toggle.LabelText>
</View>
<PageText size="sm" />
@@ -140,34 +273,64 @@ function MutedWordsInner() {
<Toggle.Item
label={_(msg`Mute this word in tags only`)}
name="tag"
style={[a.flex_1, !gtMobile && [a.w_full, a.flex_0]]}>
style={[a.flex_1]}>
<TargetToggle>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Radio />
<Toggle.LabelText>
<Trans>Mute in tags only</Trans>
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>Tags only</Trans>
</Toggle.LabelText>
</View>
<Hashtag size="sm" />
</TargetToggle>
</Toggle.Item>
<Button
disabled={isPending || !field}
label={_(msg`Add mute word for configured settings`)}
size="small"
color="primary"
variant="solid"
style={[!gtMobile && [a.w_full, a.flex_0]]}
onPress={submit}>
<ButtonText>
<Trans>Add</Trans>
</ButtonText>
<ButtonIcon icon={isPending ? Loader : Plus} />
</Button>
</View>
</Toggle.Group>
<View>
<Text
style={[
a.pb_xs,
a.text_sm,
a.font_bold,
t.atoms.text_contrast_medium,
]}>
<Trans>Options:</Trans>
</Text>
<Toggle.Item
label={_(msg`Do not apply this mute word to users you follow`)}
name="exclude_following"
style={[a.flex_row, a.justify_between]}
value={excludeFollowing}
onChange={setExcludeFollowing}>
<TargetToggle>
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Checkbox />
<Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
<Trans>Exclude users you follow</Trans>
</Toggle.LabelText>
</View>
</TargetToggle>
</Toggle.Item>
</View>
<View style={[a.pt_xs]}>
<Button
disabled={isPending || !field}
label={_(msg`Add mute word for configured settings`)}
size="medium"
color="primary"
variant="solid"
style={[]}
onPress={submit}>
<ButtonText>
<Trans>Add</Trans>
</ButtonText>
<ButtonIcon icon={isPending ? Loader : Plus} position="right" />
</Button>
</View>
{error && (
<View
style={[
@@ -191,20 +354,6 @@ function MutedWordsInner() {
</Text>
</View>
)}
<Text
style={[
a.pt_xs,
a.text_sm,
a.italic,
a.leading_snug,
t.atoms.text_contrast_medium,
]}>
<Trans>
We recommend avoiding common words that appear in many posts,
since it can result in no posts being shown.
</Trans>
</Text>
</View>
<Divider />
@@ -268,6 +417,9 @@ function MutedWordRow({
const {_} = useLingui()
const {isPending, mutateAsync: removeMutedWord} = useRemoveMutedWordMutation()
const control = Prompt.usePromptControl()
const expiryDate = word.expiresAt ? new Date(word.expiresAt) : undefined
const isExpired = expiryDate && expiryDate < new Date()
const formatDistance = useFormatDistance()
const remove = React.useCallback(async () => {
control.close()
@@ -280,7 +432,7 @@ function MutedWordRow({
control={control}
title={_(msg`Are you sure?`)}
description={_(
msg`This will delete ${word.value} from your muted words. You can always add it back later.`,
msg`This will delete "${word.value}" from your muted words. You can always add it back later.`,
)}
onConfirm={remove}
confirmButtonCta={_(msg`Remove`)}
@@ -289,53 +441,94 @@ function MutedWordRow({
<View
style={[
a.flex_row,
a.justify_between,
a.py_md,
a.px_lg,
a.flex_row,
a.align_center,
a.justify_between,
a.rounded_md,
a.gap_md,
style,
]}>
<Text
style={[
a.flex_1,
a.leading_snug,
a.w_full,
a.font_bold,
t.atoms.text_contrast_high,
web({
overflowWrap: 'break-word',
wordBreak: 'break-word',
}),
]}>
{word.value}
</Text>
<View style={[a.flex_1, a.gap_xs]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Text
style={[
a.flex_1,
a.leading_snug,
a.font_bold,
web({
overflowWrap: 'break-word',
wordBreak: 'break-word',
}),
]}>
{word.targets.find(t => t === 'content') ? (
<Trans comment="Pattern: {wordValue} in text, tags">
{word.value}{' '}
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
in{' '}
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
text & tags
</Text>
</Text>
</Trans>
) : (
<Trans comment="Pattern: {wordValue} in tags">
{word.value}{' '}
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
in{' '}
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
tags
</Text>
</Text>
</Trans>
)}
</Text>
</View>
<View style={[a.flex_row, a.align_center, a.justify_end, a.gap_sm]}>
{word.targets.map(target => (
<View
key={target}
style={[a.py_xs, a.px_sm, a.rounded_sm, t.atoms.bg_contrast_100]}>
{(expiryDate || word.actorTarget === 'exclude-following') && (
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Text
style={[a.text_xs, a.font_bold, t.atoms.text_contrast_medium]}>
{target === 'content' ? _(msg`text`) : _(msg`tag`)}
style={[
a.flex_1,
a.text_xs,
a.leading_snug,
t.atoms.text_contrast_medium,
]}>
{expiryDate && (
<>
{isExpired ? (
<Trans>Expired</Trans>
) : (
<Trans>
Expires{' '}
{formatDistance(expiryDate, new Date(), {
addSuffix: true,
})}
</Trans>
)}
</>
)}
{word.actorTarget === 'exclude-following' && (
<>
{' • '}
<Trans>Excludes users you follow</Trans>
</>
)}
</Text>
</View>
))}
<Button
label={_(msg`Remove mute word from your list`)}
size="tiny"
shape="round"
variant="ghost"
color="secondary"
onPress={() => control.open()}
style={[a.ml_sm]}>
<ButtonIcon icon={isPending ? Loader : X} />
</Button>
)}
</View>
<Button
label={_(msg`Remove mute word from your list`)}
size="tiny"
shape="round"
variant="outline"
color="secondary"
onPress={() => control.open()}
style={[a.ml_sm]}>
<ButtonIcon icon={isPending ? Loader : X} />
</Button>
</View>
</>
)
src/components/forms/ToggleButton.tsx
+1 -1
View File
@@ -23,10 +23,10 @@ export function Group({children, multiple, ...props}: GroupProps) {
style={[
a.w_full,
a.flex_row,
a.border,
a.rounded_sm,
a.overflow_hidden,
t.atoms.border_contrast_low,
{borderWidth: 1},
]}>
{children}
</View>
src/components/hooks/dates.ts
+69
View File
@@ -0,0 +1,69 @@
/**
* Hooks for date-fns localized formatters.
*
* Our app supports some languages that are not included in date-fns by
* default, in which case it will fall back to English.
*
* {@link https://github.com/date-fns/date-fns/blob/main/docs/i18n.md}
*/
import React from 'react'
import {formatDistance, Locale} from 'date-fns'
import {
ca,
de,
es,
fi,
fr,
hi,
id,
it,
ja,
ko,
ptBR,
tr,
uk,
zhCN,
zhTW,
} from 'date-fns/locale'
import {AppLanguage} from '#/locale/languages'
import {useLanguagePrefs} from '#/state/preferences'
/**
* {@link AppLanguage}
*/
const locales: Record<AppLanguage, Locale | undefined> = {
en: undefined,
ca,
de,
es,
fi,
fr,
ga: undefined,
hi,
id,
it,
ja,
ko,
['pt-BR']: ptBR,
tr,
uk,
['zh-CN']: zhCN,
['zh-TW']: zhTW,
}
/**
* Returns a localized `formatDistance` function.
* {@link formatDistance}
*/
export function useFormatDistance() {
const {appLanguage} = useLanguagePrefs()
return React.useCallback<typeof formatDistance>(
(date, baseDate, options) => {
const locale = locales[appLanguage as AppLanguage]
return formatDistance(date, baseDate, {...options, locale: locale})
},
[appLanguage],
)
}
src/components/icons/ArrowsDiagonal.tsx
+17
View File
@@ -0,0 +1,17 @@
import {createSinglePathSVG} from './TEMPLATE'
export const ArrowsDiagonalOut_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM4 13a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z',
})
export const ArrowsDiagonalIn_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z',
})
export const ArrowsDiagonalOut_Stroke2_Corner2_Rounded = createSinglePathSVG({
path: 'M13 4a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14a1 1 0 0 1-1-1Zm-9 9a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2v-5a1 1 0 0 1 1-1Z',
})
export const ArrowsDiagonalIn_Stroke2_Corner2_Rounded = createSinglePathSVG({
path: 'M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-5a2 2 0 0 1-2-2V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z',
})
src/components/icons/CC.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const CC_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Zm10.957 6.293a1 1 0 1 0 0 1.414 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414Zm-6.331-.22a1 1 0 1 0 .331 1.634 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414.994.994 0 0 0-.331-.22Z',
})
export const CC_Filled_Corner0_Rounded = createSinglePathSVG({
path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm11.543 7.293a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.242 1 1 0 0 0-1.414-1.414 1 1 0 0 1-1.414-1.414Zm-6 0a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.243 1 1 0 0 0-1.414-1.415 1 1 0 0 1-1.414-1.414Z',
})
src/components/icons/Moon.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Moon_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12.097 2.53a1 1 0 0 1-.041 1.07 6 6 0 0 0 8.345 8.344 1 1 0 0 1 1.563.908c-.434 5.122-4.728 9.144-9.962 9.144-5.522 0-9.998-4.476-9.998-9.998 0-5.234 4.021-9.528 9.144-9.962a1 1 0 0 1 .949.494ZM9.424 4.424a7.998 7.998 0 1 0 10.152 10.152A8 8 0 0 1 9.424 4.424Z',
})
src/components/icons/Pause.tsx
+17
View File
@@ -0,0 +1,17 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Pause_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4Zm2 1v14h2V5H6Zm8-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Zm2 1v14h2V5h-2Z',
})
export const Pause_Filled_Corner0_Rounded = createSinglePathSVG({
path: 'M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4ZM14 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z',
})
export const Pause_Stroke2_Corner2_Rounded = createSinglePathSVG({
path: 'M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm7 1a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z',
})
export const Pause_Filled_Corner2_Rounded = createSinglePathSVG({
path: 'M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6ZM14 6a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Z',
})
src/components/icons/Phone.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Phone_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M5 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H8Zm2 2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z',
})
src/components/icons/Play.tsx
+8
View File
@@ -1,5 +1,13 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Play_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M5.507 2.13a1 1 0 0 1 1.008.013l15 9a1 1 0 0 1 0 1.714l-15 9A1 1 0 0 1 5 21V3a1 1 0 0 1 .507-.87ZM7 4.766v14.468L19.056 12 7 4.766Z',
})
export const Play_Filled_Corner0_Rounded = createSinglePathSVG({
path: 'M6.514 2.143A1 1 0 0 0 5 3v18a1 1 0 0 0 1.514.858l15-9a1 1 0 0 0 0-1.716l-15-9Z',
})
export const Play_Stroke2_Corner2_Rounded = createSinglePathSVG({
path: 'M5 5.086C5 2.736 7.578 1.3 9.576 2.534L20.77 9.448c1.899 1.172 1.899 3.932 0 5.104L9.576 21.466C7.578 22.701 5 21.263 5 18.914V5.086Zm3.525-.85A1 1 0 0 0 7 5.085v13.828a1 1 0 0 0 1.525.85l11.194-6.913a1 1 0 0 0 0-1.702L8.525 4.235Z',
})
src/components/moderation/ScreenHider.tsx
+15 -6
View File
@@ -14,7 +14,7 @@ import {useModerationCauseDescription} from '#/lib/moderation/useModerationCause
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {NavigationProp} from 'lib/routes/types'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useTheme, web} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {
ModerationDetailsDialog,
@@ -105,6 +105,7 @@ export function ScreenHider({
a.mb_md,
a.px_lg,
a.text_center,
a.leading_snug,
t.atoms.text_contrast_medium,
]}>
{isNoPwi ? (
@@ -113,8 +114,15 @@ export function ScreenHider({
</Trans>
) : (
<>
<Trans>This {screenDescription} has been flagged:</Trans>
<Text style={[a.text_lg, a.font_semibold, t.atoms.text, a.ml_xs]}>
<Trans>This {screenDescription} has been flagged:</Trans>{' '}
<Text
style={[
a.text_lg,
a.font_semibold,
a.leading_snug,
t.atoms.text,
a.ml_xs,
]}>
{desc.name}.{' '}
</Text>
<TouchableWithoutFeedback
@@ -127,16 +135,17 @@ export function ScreenHider({
<Text
style={[
a.text_lg,
a.leading_snug,
{
color: t.palette.primary_500,
// @ts-ignore web only -prf
cursor: 'pointer',
},
web({
cursor: 'pointer',
}),
]}>
<Trans>Learn More</Trans>
</Text>
</TouchableWithoutFeedback>
<ModerationDetailsDialog control={control} modcause={blur} />
</>
)}{' '}
src/lib/api/feed-manip.ts
+306 -240
View File
@@ -1,4 +1,5 @@
import {
AppBskyActorDefs,
AppBskyEmbedRecord,
AppBskyEmbedRecordWithMedia,
AppBskyFeedDefs,
@@ -6,50 +7,125 @@ import {
} from '@atproto/api'
import {isPostInLanguage} from '../../locale/helpers'
import {FALLBACK_MARKER_POST} from './feed/home'
import {ReasonFeedSource} from './feed/types'
type FeedViewPost = AppBskyFeedDefs.FeedViewPost
export type FeedTunerFn = (
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
dryRun: boolean,
) => FeedViewPostsSlice[]
type FeedSliceItem = {
post: AppBskyFeedDefs.PostView
reply?: AppBskyFeedDefs.ReplyRef
record: AppBskyFeedPost.Record
parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
isParentBlocked: boolean
}
function toSliceItem(feedViewPost: FeedViewPost): FeedSliceItem {
return {
post: feedViewPost.post,
reply: feedViewPost.reply,
}
type AuthorContext = {
author: AppBskyActorDefs.ProfileViewBasic
parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
grandparentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
rootAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
}
export class FeedViewPostsSlice {
_reactKey: string
_feedPost: FeedViewPost
items: FeedSliceItem[]
isIncompleteThread: boolean
isFallbackMarker: boolean
isOrphan: boolean
rootUri: string
constructor(feedPost: FeedViewPost) {
const {post, reply, reason} = feedPost
this.items = []
this.isIncompleteThread = false
this.isFallbackMarker = false
this.isOrphan = false
if (AppBskyFeedDefs.isPostView(reply?.root)) {
this.rootUri = reply.root.uri
} else {
this.rootUri = post.uri
}
this._feedPost = feedPost
this._reactKey = `slice-${feedPost.post.uri}-${
feedPost.reason?.indexedAt || feedPost.post.indexedAt
this._reactKey = `slice-${post.uri}-${
feedPost.reason?.indexedAt || post.indexedAt
}`
this.items = [toSliceItem(feedPost)]
}
get uri() {
return this._feedPost.post.uri
}
get isThread() {
return (
this.items.length > 1 &&
this.items.every(
item => item.post.author.did === this.items[0].post.author.did,
)
if (feedPost.post.uri === FALLBACK_MARKER_POST.post.uri) {
this.isFallbackMarker = true
return
}
if (
!AppBskyFeedPost.isRecord(post.record) ||
!AppBskyFeedPost.validateRecord(post.record).success
) {
return
}
const parent = reply?.parent
const isParentBlocked = AppBskyFeedDefs.isBlockedPost(parent)
let parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
if (AppBskyFeedDefs.isPostView(parent)) {
parentAuthor = parent.author
}
this.items.push({
post,
record: post.record,
parentAuthor,
isParentBlocked,
})
if (!reply || reason) {
return
}
if (
!AppBskyFeedDefs.isPostView(parent) ||
!AppBskyFeedPost.isRecord(parent.record) ||
!AppBskyFeedPost.validateRecord(parent.record).success
) {
this.isOrphan = true
return
}
const grandparentAuthor = reply.grandparentAuthor
const isGrandparentBlocked = Boolean(
grandparentAuthor?.viewer?.blockedBy ||
grandparentAuthor?.viewer?.blocking ||
grandparentAuthor?.viewer?.blockingByList,
)
this.items.unshift({
post: parent,
record: parent.record,
parentAuthor: grandparentAuthor,
isParentBlocked: isGrandparentBlocked,
})
if (isGrandparentBlocked) {
this.isOrphan = true
// Keep going, it might still have a root.
}
const root = reply.root
if (
!AppBskyFeedDefs.isPostView(root) ||
!AppBskyFeedPost.isRecord(root.record) ||
!AppBskyFeedPost.validateRecord(root.record).success
) {
this.isOrphan = true
return
}
if (root.uri === parent.uri) {
return
}
this.items.unshift({
post: root,
record: root.record,
isParentBlocked: false,
parentAuthor: undefined,
})
if (parent.record.reply?.parent.uri !== root.uri) {
this.isIncompleteThread = true
}
}
get isQuotePost() {
@@ -82,10 +158,6 @@ export class FeedViewPostsSlice {
return AppBskyFeedDefs.isReasonRepost(reason)
}
get includesThreadRoot() {
return !this.items[0].reply
}
get likeCount() {
return this._feedPost.post.likeCount ?? 0
}
@@ -94,249 +166,192 @@ export class FeedViewPostsSlice {
return !!this.items.find(item => item.post.uri === uri)
}
isNextInThread(uri: string) {
return this.items[this.items.length - 1].post.uri === uri
}
insert(item: FeedViewPost) {
const selfReplyUri = getSelfReplyUri(item)
const i = this.items.findIndex(item2 => item2.post.uri === selfReplyUri)
if (i !== -1) {
this.items.splice(i + 1, 0, item)
} else {
this.items.push(item)
}
}
flattenReplyParent() {
if (this.items[0].reply) {
const reply = this.items[0].reply
if (AppBskyFeedDefs.isPostView(reply.parent)) {
this.items.splice(0, 0, {post: reply.parent})
}
}
}
isFollowingAllAuthors(userDid: string) {
getAuthors(): AuthorContext {
const feedPost = this._feedPost
if (feedPost.post.author.did === userDid) {
return true
}
if (AppBskyFeedDefs.isPostView(feedPost.reply?.parent)) {
const parent = feedPost.reply?.parent
if (parent?.author.did === userDid) {
return true
let author: AppBskyActorDefs.ProfileViewBasic = feedPost.post.author
let parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
let grandparentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
let rootAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
if (feedPost.reply) {
if (AppBskyFeedDefs.isPostView(feedPost.reply.parent)) {
parentAuthor = feedPost.reply.parent.author
}
if (feedPost.reply.grandparentAuthor) {
grandparentAuthor = feedPost.reply.grandparentAuthor
}
if (AppBskyFeedDefs.isPostView(feedPost.reply.root)) {
rootAuthor = feedPost.reply.root.author
}
return (
parent?.author.viewer?.following &&
feedPost.post.author.viewer?.following
)
}
return false
}
}
export class NoopFeedTuner {
reset() {}
tune(
feed: FeedViewPost[],
_opts?: {dryRun: boolean; maintainOrder: boolean},
): FeedViewPostsSlice[] {
return feed.map(item => new FeedViewPostsSlice(item))
return {
author,
parentAuthor,
grandparentAuthor,
rootAuthor,
}
}
}
export class FeedTuner {
seenKeys: Set<string> = new Set()
seenUris: Set<string> = new Set()
seenRootUris: Set<string> = new Set()
constructor(public tunerFns: FeedTunerFn[]) {}
reset() {
this.seenKeys.clear()
this.seenUris.clear()
}
tune(
feed: FeedViewPost[],
{dryRun, maintainOrder}: {dryRun: boolean; maintainOrder: boolean} = {
{dryRun}: {dryRun: boolean} = {
dryRun: false,
maintainOrder: false,
},
): FeedViewPostsSlice[] {
let slices: FeedViewPostsSlice[] = []
let slices: FeedViewPostsSlice[] = feed
.map(item => new FeedViewPostsSlice(item))
.filter(s => s.items.length > 0 || s.isFallbackMarker)
// remove posts that are replies, but which don't have the parent
// hydrated. this means the parent was either deleted or blocked
feed = feed.filter(item => {
if (
AppBskyFeedPost.isRecord(item.post.record) &&
item.post.record.reply &&
!item.reply
) {
// run the custom tuners
for (const tunerFn of this.tunerFns) {
slices = tunerFn(this, slices.slice(), dryRun)
}
slices = slices.filter(slice => {
if (this.seenKeys.has(slice._reactKey)) {
return false
}
// Some feeds, like Following, dedupe by thread, so you only see the most recent reply.
// However, we don't want per-thread dedupe for author feeds (where we need to show every post)
// or for feedgens (where we want to let the feed serve multiple replies if it chooses to).
// To avoid showing the same context (root and/or parent) more than once, we do last resort
// per-post deduplication. It hides already seen posts as long as this doesn't break the thread.
for (let i = 0; i < slice.items.length; i++) {
const item = slice.items[i]
if (this.seenUris.has(item.post.uri)) {
if (i === 0) {
// Omit contiguous seen leading items.
// For example, [A -> B -> C], [A -> D -> E], [A -> D -> F]
// would turn into [A -> B -> C], [D -> E], [F].
slice.items.splice(0, 1)
i--
}
if (i === slice.items.length - 1) {
// If the last item in the slice was already seen, omit the whole slice.
// This means we'd miss its parents, but the user can "show more" to see them.
// For example, [A ... E -> F], [A ... D -> E], [A ... C -> D], [A -> B -> C]
// would get collapsed into [A ... E -> F], with B/C/D considered seen.
return false
}
} else {
if (!dryRun) {
this.seenUris.add(item.post.uri)
}
}
}
if (!dryRun) {
this.seenKeys.add(slice._reactKey)
}
return true
})
if (maintainOrder) {
slices = feed.map(item => new FeedViewPostsSlice(item))
} else {
// arrange the posts into thread slices
for (let i = feed.length - 1; i >= 0; i--) {
const item = feed[i]
const selfReplyUri = getSelfReplyUri(item)
if (selfReplyUri) {
const index = slices.findIndex(slice =>
slice.isNextInThread(selfReplyUri),
)
if (index !== -1) {
const parent = slices[index]
parent.insert(item)
// If our slice isn't currently on the top, reinsert it to the top.
if (index !== 0) {
slices.splice(index, 1)
slices.unshift(parent)
}
continue
}
}
slices.unshift(new FeedViewPostsSlice(item))
}
}
// run the custom tuners
for (const tunerFn of this.tunerFns) {
slices = tunerFn(this, slices.slice())
}
// remove any items already "seen"
const soonToBeSeenUris: Set<string> = new Set()
for (let i = slices.length - 1; i >= 0; i--) {
if (!slices[i].isThread && this.seenUris.has(slices[i].uri)) {
slices.splice(i, 1)
} else {
for (const item of slices[i].items) {
soonToBeSeenUris.add(item.post.uri)
}
}
}
// turn non-threads with reply parents into threads
for (const slice of slices) {
if (!slice.isThread && !slice.reason && slice.items[0].reply) {
const reply = slice.items[0].reply
if (
AppBskyFeedDefs.isPostView(reply.parent) &&
!this.seenUris.has(reply.parent.uri) &&
!soonToBeSeenUris.has(reply.parent.uri)
) {
const uri = reply.parent.uri
slice.flattenReplyParent()
soonToBeSeenUris.add(uri)
}
}
}
if (!dryRun) {
slices = slices.filter(slice => {
if (this.seenKeys.has(slice._reactKey)) {
return false
}
for (const item of slice.items) {
this.seenUris.add(item.post.uri)
}
this.seenKeys.add(slice._reactKey)
return true
})
}
return slices
}
static removeReplies(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
for (let i = slices.length - 1; i >= 0; i--) {
if (slices[i].isReply) {
slices.splice(i, 1)
}
}
return slices
}
static removeReposts(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
for (let i = slices.length - 1; i >= 0; i--) {
if (slices[i].isRepost) {
slices.splice(i, 1)
}
}
return slices
}
static removeQuotePosts(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
for (let i = slices.length - 1; i >= 0; i--) {
if (slices[i].isQuotePost) {
slices.splice(i, 1)
}
}
return slices
}
static dedupReposts(
static removeReplies(
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
): FeedViewPostsSlice[] {
// remove duplicates caused by reposts
_dryRun: boolean,
) {
for (let i = 0; i < slices.length; i++) {
const item1 = slices[i]
for (let j = i + 1; j < slices.length; j++) {
const item2 = slices[j]
if (item2.isThread) {
// dont dedup items that are rendering in a thread as this can cause rendering errors
continue
}
if (item1.containsUri(item2.items[0].post.uri)) {
slices.splice(j, 1)
j--
const slice = slices[i]
if (
slice.isReply &&
!slice.isRepost &&
// This is not perfect but it's close as we can get to
// detecting threads without having to peek ahead.
!areSameAuthor(slice.getAuthors())
) {
slices.splice(i, 1)
i--
}
}
return slices
}
static removeReposts(
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
_dryRun: boolean,
) {
for (let i = 0; i < slices.length; i++) {
if (slices[i].isRepost) {
slices.splice(i, 1)
i--
}
}
return slices
}
static removeQuotePosts(
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
_dryRun: boolean,
) {
for (let i = 0; i < slices.length; i++) {
if (slices[i].isQuotePost) {
slices.splice(i, 1)
i--
}
}
return slices
}
static removeOrphans(
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
_dryRun: boolean,
) {
for (let i = 0; i < slices.length; i++) {
if (slices[i].isOrphan) {
slices.splice(i, 1)
i--
}
}
return slices
}
static dedupThreads(
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
dryRun: boolean,
): FeedViewPostsSlice[] {
for (let i = 0; i < slices.length; i++) {
const rootUri = slices[i].rootUri
if (!slices[i].isRepost && tuner.seenRootUris.has(rootUri)) {
slices.splice(i, 1)
i--
} else {
if (!dryRun) {
tuner.seenRootUris.add(rootUri)
}
}
}
return slices
}
static thresholdRepliesOnly({
userDid,
minLikes,
followedOnly,
}: {
userDid: string
minLikes: number
followedOnly: boolean
}) {
static followedRepliesOnly({userDid}: {userDid: string}) {
return (
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
_dryRun: boolean,
): FeedViewPostsSlice[] => {
// remove any replies without at least minLikes likes
for (let i = slices.length - 1; i >= 0; i--) {
for (let i = 0; i < slices.length; i++) {
const slice = slices[i]
if (slice.isReply) {
if (slice.isThread && slice.includesThreadRoot) {
continue
}
if (slice.isRepost) {
continue
}
if (slice.likeCount < minLikes) {
slices.splice(i, 1)
} else if (followedOnly && !slice.isFollowingAllAuthors(userDid)) {
slices.splice(i, 1)
}
if (
slice.isReply &&
!slice.isRepost &&
!shouldDisplayReplyInFollowing(slice.getAuthors(), userDid)
) {
slices.splice(i, 1)
i--
}
}
return slices
@@ -354,6 +369,7 @@ export class FeedTuner {
return (
tuner: FeedTuner,
slices: FeedViewPostsSlice[],
_dryRun: boolean,
): FeedViewPostsSlice[] => {
const candidateSlices = slices.slice()
@@ -362,7 +378,7 @@ export class FeedTuner {
return slices
}
for (let i = slices.length - 1; i >= 0; i--) {
for (let i = 0; i < slices.length; i++) {
let hasPreferredLang = false
for (const item of slices[i].items) {
if (isPostInLanguage(item.post, preferredLangsCode2)) {
@@ -388,16 +404,66 @@ export class FeedTuner {
}
}
function getSelfReplyUri(item: FeedViewPost): string | undefined {
if (item.reply) {
if (
AppBskyFeedDefs.isPostView(item.reply.parent) &&
!AppBskyFeedDefs.isReasonRepost(item.reason) // don't thread reposted self-replies
) {
return item.reply.parent.author.did === item.post.author.did
? item.reply.parent.uri
: undefined
}
function areSameAuthor(authors: AuthorContext): boolean {
const {author, parentAuthor, grandparentAuthor, rootAuthor} = authors
const authorDid = author.did
if (parentAuthor && parentAuthor.did !== authorDid) {
return false
}
return undefined
if (grandparentAuthor && grandparentAuthor.did !== authorDid) {
return false
}
if (rootAuthor && rootAuthor.did !== authorDid) {
return false
}
return true
}
function shouldDisplayReplyInFollowing(
authors: AuthorContext,
userDid: string,
): boolean {
const {author, parentAuthor, grandparentAuthor, rootAuthor} = authors
if (!isSelfOrFollowing(author, userDid)) {
// Only show replies from self or people you follow.
return false
}
if (
(!parentAuthor || parentAuthor.did === author.did) &&
(!rootAuthor || rootAuthor.did === author.did) &&
(!grandparentAuthor || grandparentAuthor.did === author.did)
) {
// Always show self-threads.
return true
}
// From this point on we need at least one more reason to show it.
if (
parentAuthor &&
parentAuthor.did !== author.did &&
isSelfOrFollowing(parentAuthor, userDid)
) {
return true
}
if (
grandparentAuthor &&
grandparentAuthor.did !== author.did &&
isSelfOrFollowing(grandparentAuthor, userDid)
) {
return true
}
if (
rootAuthor &&
rootAuthor.did !== author.did &&
isSelfOrFollowing(rootAuthor, userDid)
) {
return true
}
return false
}
function isSelfOrFollowing(
profile: AppBskyActorDefs.ProfileViewBasic,
userDid: string,
) {
return Boolean(profile.did === userDid || profile.viewer?.following)
}
src/lib/api/feed/merge.ts
-12
View File
@@ -193,12 +193,6 @@ class MergeFeedSource {
return this.hasMore && this.queue.length === 0
}
reset() {
this.cursor = undefined
this.queue = []
this.hasMore = true
}
take(n: number): AppBskyFeedDefs.FeedViewPost[] {
return this.queue.splice(0, n)
}
@@ -232,11 +226,6 @@ class MergeFeedSource {
class MergeFeedSource_Following extends MergeFeedSource {
tuner = new FeedTuner(this.feedTuners)
reset() {
super.reset()
this.tuner.reset()
}
async fetchNext(n: number) {
return this._fetchNextInner(n)
}
@@ -249,7 +238,6 @@ class MergeFeedSource_Following extends MergeFeedSource {
// run the tuner pre-emptively to ensure better mixing
const slices = this.tuner.tune(res.data.feed, {
dryRun: false,
maintainOrder: true,
})
res.data.feed = slices.map(slice => slice._feedPost)
return res
src/lib/api/index.ts
+4
View File
@@ -54,6 +54,10 @@ interface PostOpts {
uri: string
cid: string
}
video?: {
uri: string
cid: string
}
extLink?: ExternalEmbedDraft
images?: ImageModel[]
labels?: string[]
src/lib/hooks/useDedupe.ts
+2 -2
View File
@@ -3,7 +3,7 @@ import React from 'react'
export const useDedupe = () => {
const canDo = React.useRef(true)
return React.useRef((cb: () => unknown) => {
return React.useCallback((cb: () => unknown) => {
if (canDo.current) {
canDo.current = false
setTimeout(() => {
@@ -13,5 +13,5 @@ export const useDedupe = () => {
return true
}
return false
}).current
}, [])
}
src/lib/media/video/types.ts
+36
View File
@@ -0,0 +1,36 @@
/**
* TEMPORARY: THIS IS A TEMPORARY PLACEHOLDER. THAT MEANS IT IS TEMPORARY. I.E. WILL BE REMOVED. NOT TO USE IN PRODUCTION.
* @temporary
* PS: This is a temporary placeholder for the video types. It will be removed once the actual types are implemented.
* Not joking, this is temporary.
*/
export interface JobStatus {
jobId: string
did: string
cid: string
state: JobState
progress?: number
errorHuman?: string
errorMachine?: string
}
export enum JobState {
JOB_STATE_UNSPECIFIED = 'JOB_STATE_UNSPECIFIED',
JOB_STATE_CREATED = 'JOB_STATE_CREATED',
JOB_STATE_ENCODING = 'JOB_STATE_ENCODING',
JOB_STATE_ENCODED = 'JOB_STATE_ENCODED',
JOB_STATE_UPLOADING = 'JOB_STATE_UPLOADING',
JOB_STATE_UPLOADED = 'JOB_STATE_UPLOADED',
JOB_STATE_CDN_PROCESSING = 'JOB_STATE_CDN_PROCESSING',
JOB_STATE_CDN_PROCESSED = 'JOB_STATE_CDN_PROCESSED',
JOB_STATE_FAILED = 'JOB_STATE_FAILED',
JOB_STATE_COMPLETED = 'JOB_STATE_COMPLETED',
}
export interface UploadVideoResponse {
job_id: string
did: string
cid: string
state: JobState
}
src/lib/moderation/useModerationCauseDescription.ts
+1 -1
View File
@@ -126,7 +126,7 @@ export function useModerationCauseDescription(
}
}
if (def.identifier === 'porn' || def.identifier === 'sexual') {
strings.name = 'Adult Content'
strings.name = _(msg`Adult Content`)
}
return {
src/lib/routes/types.ts
+1
View File
@@ -38,6 +38,7 @@ export type CommonNavigatorParams = {
PreferencesThreads: undefined
PreferencesExternalEmbeds: undefined
AccessibilitySettings: undefined
AppearanceSettings: undefined
Search: {q?: string}
Hashtag: {tag: string; author?: string}
MessagesConversation: {conversation: string; embed?: string}
src/lib/statsig/events.ts
+6
View File
@@ -211,6 +211,12 @@ export type LogEvents = {
'feed:interstitial:profileCard:press': {}
'feed:interstitial:feedCard:press': {}
'debug:followingPrefs': {
followingShowRepliesFromPref: 'all' | 'following' | 'off'
followingRepliesMinLikePref: number
}
'debug:followingDisplayed': {}
'test:all:always': {}
'test:all:sometimes': {}
'test:all:boosted_by_gate1': {reason: 'base' | 'gate1'}
src/lib/statsig/gates.ts
+1
View File
@@ -13,5 +13,6 @@ export type Gate =
| 'suggested_feeds_interstitial'
| 'suggested_follows_interstitial'
| 'ungroup_follow_backs'
| 'video_debug'
| 'videos'
| 'small_avi_thumb'
src/platform/detection.ts
+1 -3
View File
@@ -1,5 +1,4 @@
import {Platform} from 'react-native'
import {isReducedMotion} from 'react-native-reanimated'
import {getLocales} from 'expo-localization'
import {fixLegacyLanguageCode} from '#/locale/helpers'
@@ -15,11 +14,10 @@ export const isMobileWeb =
isWeb &&
// @ts-ignore we know window exists -prf
global.window.matchMedia(isMobileWebMediaQuery)?.matches
export const isIPhoneWeb = isWeb && /iPhone/.test(navigator.userAgent)
export const deviceLocales = dedupArray(
getLocales?.()
.map?.(locale => fixLegacyLanguageCode(locale.languageCode))
.filter(code => typeof code === 'string'),
) as string[]
export const prefersReducedMotion = isReducedMotion()
src/routes.ts
+1
View File
@@ -32,6 +32,7 @@ export const router = new Router({
PreferencesThreads: '/settings/threads',
PreferencesExternalEmbeds: '/settings/external-embeds',
AccessibilitySettings: '/settings/accessibility',
AppearanceSettings: '/settings/appearance',
SavedFeeds: '/settings/saved-feeds',
Support: '/support',
PrivacyPolicy: '/support/privacy',
src/screens/Messages/Conversation/MessagesList.tsx
-3
View File
@@ -387,9 +387,6 @@ export function MessagesList({
renderItem={renderItem}
keyExtractor={keyExtractor}
disableFullWindowScroll={true}
// Prevents wrong position in Firefox when sending a message
// as well as scroll getting stuck on Chome when scrolling upwards.
disableContainStyle={true}
disableVirtualization={true}
style={animatedListStyle}
// The extra two items account for the header and the footer components
src/screens/Profile/Sections/Feed.tsx
+1
View File
@@ -79,6 +79,7 @@ export const ProfileFeedSection = React.forwardRef<
headerOffset={headerHeight}
renderEndOfFeed={ProfileEndOfFeed}
ignoreFilterFor={ignoreFilterFor}
outsideHeaderOffset={headerHeight}
/>
{(isScrolledDown || hasNew) && (
<LoadLatestBtn
src/screens/Settings/AppearanceSettings.tsx
+135
View File
@@ -0,0 +1,135 @@
import React, {useCallback} from 'react'
import {View} from 'react-native'
import Animated, {
FadeInDown,
FadeOutDown,
LayoutAnimationConfig,
} from 'react-native-reanimated'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
import {s} from '#/lib/styles'
import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
import {ScrollView} from '#/view/com/util/Views'
import {atoms as a, native, useTheme} from '#/alf'
import * as ToggleButton from '#/components/forms/ToggleButton'
import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
import {Text} from '#/components/Typography'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppearanceSettings'>
export function AppearanceSettingsScreen({}: Props) {
const {_} = useLingui()
const t = useTheme()
const {isTabletOrMobile} = useWebMediaQueries()
const {colorMode, darkTheme} = useThemePrefs()
const {setColorMode, setDarkTheme} = useSetThemePrefs()
const onChangeAppearance = useCallback(
(keys: string[]) => {
const appearance = keys.find(key => key !== colorMode) as
| 'system'
| 'light'
| 'dark'
| undefined
if (!appearance) return
setColorMode(appearance)
},
[setColorMode, colorMode],
)
const onChangeDarkTheme = useCallback(
(keys: string[]) => {
const theme = keys.find(key => key !== darkTheme) as
| 'dim'
| 'dark'
| undefined
if (!theme) return
setDarkTheme(theme)
},
[setDarkTheme, darkTheme],
)
return (
<LayoutAnimationConfig skipExiting skipEntering>
<View testID="preferencesThreadsScreen" style={s.hContentRegion}>
<ScrollView
// @ts-ignore web only -prf
dataSet={{'stable-gutters': 1}}
contentContainerStyle={{paddingBottom: 75}}>
<SimpleViewHeader
showBackButton={isTabletOrMobile}
style={[t.atoms.border_contrast_medium, a.border_b]}>
<View style={a.flex_1}>
<Text style={[a.text_2xl, a.font_bold]}>
<Trans>Appearance</Trans>
</Text>
</View>
</SimpleViewHeader>
<View style={[a.p_xl, a.gap_lg]}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<PhoneIcon style={t.atoms.text} />
<Text style={a.text_md}>
<Trans>Mode</Trans>
</Text>
</View>
<ToggleButton.Group
label={_(msg`Dark mode`)}
values={[colorMode]}
onChange={onChangeAppearance}>
<ToggleButton.Button label={_(msg`System`)} name="system">
<ToggleButton.ButtonText>
<Trans>System</Trans>
</ToggleButton.ButtonText>
</ToggleButton.Button>
<ToggleButton.Button label={_(msg`Light`)} name="light">
<ToggleButton.ButtonText>
<Trans>Light</Trans>
</ToggleButton.ButtonText>
</ToggleButton.Button>
<ToggleButton.Button label={_(msg`Dark`)} name="dark">
<ToggleButton.ButtonText>
<Trans>Dark</Trans>
</ToggleButton.ButtonText>
</ToggleButton.Button>
</ToggleButton.Group>
{colorMode !== 'light' && (
<Animated.View
entering={native(FadeInDown)}
exiting={native(FadeOutDown)}
style={[a.mt_md, a.gap_lg]}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<MoonIcon style={t.atoms.text} />
<Text style={a.text_md}>
<Trans>Dark theme</Trans>
</Text>
</View>
<ToggleButton.Group
label={_(msg`Dark theme`)}
values={[darkTheme ?? 'dim']}
onChange={onChangeDarkTheme}>
<ToggleButton.Button label={_(msg`Dim`)} name="dim">
<ToggleButton.ButtonText>
<Trans>Dim</Trans>
</ToggleButton.ButtonText>
</ToggleButton.Button>
<ToggleButton.Button label={_(msg`Dark`)} name="dark">
<ToggleButton.ButtonText>
<Trans>Dark</Trans>
</ToggleButton.ButtonText>
</ToggleButton.Button>
</ToggleButton.Group>
</Animated.View>
)}
</View>
</ScrollView>
</View>
</LayoutAnimationConfig>
)
}
src/screens/StarterPack/Wizard/StepFeeds.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ import {useA11y} from '#/state/a11y'
import {DISCOVER_FEED_URI} from 'lib/constants'
import {
useGetPopularFeedsQuery,
usePopularFeedsSearch,
useSavedFeeds,
useSearchPopularFeedsQuery,
} from 'state/queries/feed'
import {SearchInput} from 'view/com/util/forms/SearchInput'
import {List} from 'view/com/util/List'
@@ -59,7 +59,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
: undefined
const {data: searchedFeeds, isFetching: isFetchingSearchedFeeds} =
useSearchPopularFeedsQuery({q: throttledQuery})
usePopularFeedsSearch({query: throttledQuery})
const isLoading =
!isFetchedSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds
src/state/a11y.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import React from 'react'
import {AccessibilityInfo} from 'react-native'
import {isReducedMotion} from 'react-native-reanimated'
import {isWeb} from '#/platform/detection'
import {PlatformInfo} from '../../modules/expo-bluesky-swiss-army'
const Context = React.createContext({
reduceMotionEnabled: false,
@@ -15,7 +15,7 @@ export function useA11y() {
export function Provider({children}: React.PropsWithChildren<{}>) {
const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(() =>
isReducedMotion(),
PlatformInfo.getIsReducedMotionEnabled(),
)
const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
src/state/feed-feedback.tsx
+1 -1
View File
@@ -123,7 +123,7 @@ export function useFeedFeedback(feed: FeedDescriptor, hasSession: boolean) {
toString({
item: postItem.uri,
event: 'app.bsky.feed.defs#interactionSeen',
feedContext: postItem.feedContext,
feedContext: slice.feedContext,
}),
)
sendToFeed()
src/state/invites.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react'
import * as persisted from '#/state/persisted'
type StateContext = persisted.Schema['invites']
@@ -35,8 +36,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('invites'))
return persisted.onUpdate('invites', nextInvites => {
setState(nextInvites)
})
}, [setState])
src/state/persisted/__tests__/fixtures.ts
-67
View File
@@ -1,67 +0,0 @@
import type {LegacySchema} from '#/state/persisted/legacy'
export const ALICE_DID = 'did:plc:ALICE_DID'
export const BOB_DID = 'did:plc:BOB_DID'
export const LEGACY_DATA_DUMP: LegacySchema = {
session: {
data: {
service: 'https://bsky.social/',
did: ALICE_DID,
},
accounts: [
{
service: 'https://bsky.social',
did: ALICE_DID,
refreshJwt: 'refreshJwt',
accessJwt: 'accessJwt',
handle: 'alice.test',
email: 'alice@bsky.test',
displayName: 'Alice',
aviUrl: 'avi',
emailConfirmed: true,
},
{
service: 'https://bsky.social',
did: BOB_DID,
refreshJwt: 'refreshJwt',
accessJwt: 'accessJwt',
handle: 'bob.test',
email: 'bob@bsky.test',
displayName: 'Bob',
aviUrl: 'avi',
emailConfirmed: true,
},
],
},
me: {
did: ALICE_DID,
handle: 'alice.test',
displayName: 'Alice',
description: '',
avatar: 'avi',
},
onboarding: {step: 'Home'},
shell: {colorMode: 'system'},
preferences: {
primaryLanguage: 'en',
contentLanguages: ['en'],
postLanguage: 'en',
postLanguageHistory: ['en', 'en', 'ja', 'pt', 'de', 'en'],
contentLabels: {
nsfw: 'warn',
nudity: 'warn',
suggestive: 'warn',
gore: 'warn',
hate: 'hide',
spam: 'hide',
impersonation: 'warn',
},
savedFeeds: ['feed_a', 'feed_b', 'feed_c'],
pinnedFeeds: ['feed_a', 'feed_b'],
requireAltTextEnabled: false,
},
invitedUsers: {seenDids: [], copiedInvites: []},
mutedThreads: {uris: []},
reminders: {},
}
src/state/persisted/__tests__/index.test.ts
-49
View File
@@ -1,49 +0,0 @@
import {jest, expect, test, afterEach} from '@jest/globals'
import AsyncStorage from '@react-native-async-storage/async-storage'
import {defaults} from '#/state/persisted/schema'
import {migrate} from '#/state/persisted/legacy'
import * as store from '#/state/persisted/store'
import * as persisted from '#/state/persisted'
const write = jest.mocked(store.write)
const read = jest.mocked(store.read)
jest.mock('#/logger')
jest.mock('#/state/persisted/legacy', () => ({
migrate: jest.fn(),
}))
jest.mock('#/state/persisted/store', () => ({
write: jest.fn(),
read: jest.fn(),
}))
afterEach(() => {
jest.useFakeTimers()
jest.clearAllMocks()
AsyncStorage.clear()
})
test('init: fresh install, no migration', async () => {
await persisted.init()
expect(migrate).toHaveBeenCalledTimes(1)
expect(read).toHaveBeenCalledTimes(1)
expect(write).toHaveBeenCalledWith(defaults)
// default value
expect(persisted.get('colorMode')).toBe('system')
})
test('init: fresh install, migration ran', async () => {
read.mockResolvedValueOnce(defaults)
await persisted.init()
expect(migrate).toHaveBeenCalledTimes(1)
expect(read).toHaveBeenCalledTimes(1)
expect(write).not.toHaveBeenCalled()
// default value
expect(persisted.get('colorMode')).toBe('system')
})
src/state/persisted/__tests__/migrate.test.ts
-93
View File
@@ -1,93 +0,0 @@
import {jest, expect, test, afterEach} from '@jest/globals'
import AsyncStorage from '@react-native-async-storage/async-storage'
import {defaults, schema} from '#/state/persisted/schema'
import {transform, migrate} from '#/state/persisted/legacy'
import * as store from '#/state/persisted/store'
import {logger} from '#/logger'
import * as fixtures from '#/state/persisted/__tests__/fixtures'
const write = jest.mocked(store.write)
const read = jest.mocked(store.read)
jest.mock('#/logger')
jest.mock('#/state/persisted/store', () => ({
write: jest.fn(),
read: jest.fn(),
}))
afterEach(() => {
jest.clearAllMocks()
AsyncStorage.clear()
})
test('migrate: fresh install', async () => {
await migrate()
expect(AsyncStorage.getItem).toHaveBeenCalledWith('root')
expect(read).toHaveBeenCalledTimes(1)
expect(logger.debug).toHaveBeenCalledWith(
'persisted state: no migration needed',
)
})
test('migrate: fresh install, existing new storage', async () => {
read.mockResolvedValueOnce(defaults)
await migrate()
expect(AsyncStorage.getItem).toHaveBeenCalledWith('root')
expect(read).toHaveBeenCalledTimes(1)
expect(logger.debug).toHaveBeenCalledWith(
'persisted state: no migration needed',
)
})
test('migrate: fresh install, AsyncStorage error', async () => {
const prevGetItem = AsyncStorage.getItem
const error = new Error('test error')
AsyncStorage.getItem = jest.fn(() => {
throw error
})
await migrate()
expect(AsyncStorage.getItem).toHaveBeenCalledWith('root')
expect(logger.error).toHaveBeenCalledWith(error, {
message: 'persisted state: error migrating legacy storage',
})
AsyncStorage.getItem = prevGetItem
})
test('migrate: has legacy data', async () => {
await AsyncStorage.setItem('root', JSON.stringify(fixtures.LEGACY_DATA_DUMP))
await migrate()
expect(write).toHaveBeenCalledWith(transform(fixtures.LEGACY_DATA_DUMP))
expect(logger.debug).toHaveBeenCalledWith(
'persisted state: migrated legacy storage',
)
})
test('migrate: has legacy data, fails validation', async () => {
const legacy = fixtures.LEGACY_DATA_DUMP
// @ts-ignore
legacy.shell.colorMode = 'invalid'
await AsyncStorage.setItem('root', JSON.stringify(legacy))
await migrate()
const transformed = transform(legacy)
const validate = schema.safeParse(transformed)
expect(write).not.toHaveBeenCalled()
expect(logger.error).toHaveBeenCalledWith(
'persisted state: legacy data failed validation',
// @ts-ignore
{message: validate.error},
)
})
src/state/persisted/__tests__/schema.test.ts
-21
View File
@@ -1,21 +0,0 @@
import {expect, test} from '@jest/globals'
import {transform} from '#/state/persisted/legacy'
import {defaults, schema} from '#/state/persisted/schema'
import * as fixtures from '#/state/persisted/__tests__/fixtures'
test('defaults', () => {
expect(() => schema.parse(defaults)).not.toThrow()
})
test('transform', () => {
const data = transform({})
expect(() => schema.parse(data)).not.toThrow()
})
test('transform: legacy fixture', () => {
const data = transform(fixtures.LEGACY_DATA_DUMP)
expect(() => schema.parse(data)).not.toThrow()
expect(data.session.currentAccount?.did).toEqual(fixtures.ALICE_DID)
expect(data.session.accounts.length).toEqual(2)
})
src/state/persisted/index.ts
+57 -68
View File
@@ -1,97 +1,86 @@
import EventEmitter from 'eventemitter3'
import AsyncStorage from '@react-native-async-storage/async-storage'
import BroadcastChannel from '#/lib/broadcast'
import {logger} from '#/logger'
import {migrate} from '#/state/persisted/legacy'
import {defaults, Schema} from '#/state/persisted/schema'
import * as store from '#/state/persisted/store'
import {
defaults,
Schema,
tryParse,
tryStringify,
} from '#/state/persisted/schema'
import {PersistedApi} from './types'
export type {PersistedAccount, Schema} from '#/state/persisted/schema'
export {defaults} from '#/state/persisted/schema'
const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL')
const UPDATE_EVENT = 'BSKY_UPDATE'
const BSKY_STORAGE = 'BSKY_STORAGE'
let _state: Schema = defaults
const _emitter = new EventEmitter()
/**
* Initializes and returns persisted data state, so that it can be passed to
* the Provider.
*/
export async function init() {
logger.debug('persisted state: initializing')
broadcast.onmessage = onBroadcastMessage
try {
await migrate() // migrate old store
const stored = await store.read() // check for new store
if (!stored) {
logger.debug('persisted state: initializing default storage')
await store.write(defaults) // opt: init new store
}
_state = stored || defaults // return new store
logger.debug('persisted state: initialized')
} catch (e) {
logger.error('persisted state: failed to load root state from storage', {
message: e,
})
// AsyncStorage failure, but we can still continue in memory
return defaults
const stored = await readFromStorage()
if (stored) {
_state = stored
}
}
init satisfies PersistedApi['init']
export function get<K extends keyof Schema>(key: K): Schema[K] {
return _state[key]
}
get satisfies PersistedApi['get']
export async function write<K extends keyof Schema>(
key: K,
value: Schema[K],
): Promise<void> {
_state = {
..._state,
[key]: value,
}
await writeToStorage(_state)
}
write satisfies PersistedApi['write']
export function onUpdate<K extends keyof Schema>(
_key: K,
_cb: (v: Schema[K]) => void,
): () => void {
return () => {}
}
onUpdate satisfies PersistedApi['onUpdate']
export async function clearStorage() {
try {
_state[key] = value
await store.write(_state)
// must happen on next tick, otherwise the tab will read stale storage data
setTimeout(() => broadcast.postMessage({event: UPDATE_EVENT}), 0)
logger.debug(`persisted state: wrote root state to storage`, {
updatedKey: key,
})
} catch (e) {
logger.error(`persisted state: failed writing root state to storage`, {
message: e,
})
await AsyncStorage.removeItem(BSKY_STORAGE)
} catch (e: any) {
logger.error(`persisted store: failed to clear`, {message: e.toString()})
}
}
clearStorage satisfies PersistedApi['clearStorage']
export function onUpdate(cb: () => void): () => void {
_emitter.addListener('update', cb)
return () => _emitter.removeListener('update', cb)
}
async function onBroadcastMessage({data}: MessageEvent) {
// validate event
if (typeof data === 'object' && data.event === UPDATE_EVENT) {
async function writeToStorage(value: Schema) {
const rawData = tryStringify(value)
if (rawData) {
try {
// read next state, possibly updated by another tab
const next = await store.read()
if (next) {
logger.debug(`persisted state: handling update from broadcast channel`)
_state = next
_emitter.emit('update')
} else {
logger.error(
`persisted state: handled update update from broadcast channel, but found no data`,
)
}
await AsyncStorage.setItem(BSKY_STORAGE, rawData)
} catch (e) {
logger.error(
`persisted state: failed handling update from broadcast channel`,
{
message: e,
},
)
logger.error(`persisted state: failed writing root state to storage`, {
message: e,
})
}
}
}
async function readFromStorage(): Promise<Schema | undefined> {
let rawData: string | null = null
try {
rawData = await AsyncStorage.getItem(BSKY_STORAGE)
} catch (e) {
logger.error(`persisted state: failed reading root state from storage`, {
message: e,
})
}
if (rawData) {
return tryParse(rawData)
}
}
src/state/persisted/index.web.ts
+148
View File
@@ -0,0 +1,148 @@
import EventEmitter from 'eventemitter3'
import BroadcastChannel from '#/lib/broadcast'
import {logger} from '#/logger'
import {
defaults,
Schema,
tryParse,
tryStringify,
} from '#/state/persisted/schema'
import {PersistedApi} from './types'
export type {PersistedAccount, Schema} from '#/state/persisted/schema'
export {defaults} from '#/state/persisted/schema'
const BSKY_STORAGE = 'BSKY_STORAGE'
const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL')
const UPDATE_EVENT = 'BSKY_UPDATE'
let _state: Schema = defaults
const _emitter = new EventEmitter()
export async function init() {
broadcast.onmessage = onBroadcastMessage
const stored = readFromStorage()
if (stored) {
_state = stored
}
}
init satisfies PersistedApi['init']
export function get<K extends keyof Schema>(key: K): Schema[K] {
return _state[key]
}
get satisfies PersistedApi['get']
export async function write<K extends keyof Schema>(
key: K,
value: Schema[K],
): Promise<void> {
const next = readFromStorage()
if (next) {
// The storage could have been updated by a different tab before this tab is notified.
// Make sure this write is applied on top of the latest data in the storage as long as it's valid.
_state = next
// Don't fire the update listeners yet to avoid a loop.
// If there was a change, we'll receive the broadcast event soon enough which will do that.
}
try {
if (JSON.stringify({v: _state[key]}) === JSON.stringify({v: value})) {
// Fast path for updates that are guaranteed to be noops.
// This is good mostly because it avoids useless broadcasts to other tabs.
return
}
} catch (e) {
// Ignore and go through the normal path.
}
_state = {
..._state,
[key]: value,
}
writeToStorage(_state)
broadcast.postMessage({event: {type: UPDATE_EVENT, key}})
broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading
}
write satisfies PersistedApi['write']
export function onUpdate<K extends keyof Schema>(
key: K,
cb: (v: Schema[K]) => void,
): () => void {
const listener = () => cb(get(key))
_emitter.addListener('update', listener) // Backcompat while upgrading
_emitter.addListener('update:' + key, listener)
return () => {
_emitter.removeListener('update', listener) // Backcompat while upgrading
_emitter.removeListener('update:' + key, listener)
}
}
onUpdate satisfies PersistedApi['onUpdate']
export async function clearStorage() {
try {
localStorage.removeItem(BSKY_STORAGE)
} catch (e: any) {
// Expected on the web in private mode.
}
}
clearStorage satisfies PersistedApi['clearStorage']
async function onBroadcastMessage({data}: MessageEvent) {
if (
typeof data === 'object' &&
(data.event === UPDATE_EVENT || // Backcompat while upgrading
data.event?.type === UPDATE_EVENT)
) {
// read next state, possibly updated by another tab
const next = readFromStorage()
if (next === _state) {
return
}
if (next) {
_state = next
if (typeof data.event.key === 'string') {
_emitter.emit('update:' + data.event.key)
} else {
_emitter.emit('update') // Backcompat while upgrading
}
} else {
logger.error(
`persisted state: handled update update from broadcast channel, but found no data`,
)
}
}
}
function writeToStorage(value: Schema) {
const rawData = tryStringify(value)
if (rawData) {
try {
localStorage.setItem(BSKY_STORAGE, rawData)
} catch (e) {
// Expected on the web in private mode.
}
}
}
let lastRawData: string | undefined
let lastResult: Schema | undefined
function readFromStorage(): Schema | undefined {
let rawData: string | null = null
try {
rawData = localStorage.getItem(BSKY_STORAGE)
} catch (e) {
// Expected on the web in private mode.
}
if (rawData) {
if (rawData === lastRawData) {
return lastResult
} else {
const result = tryParse(rawData)
lastRawData = rawData
lastResult = result
return result
}
}
}
src/state/persisted/legacy.ts
-167
View File
@@ -1,167 +0,0 @@
import AsyncStorage from '@react-native-async-storage/async-storage'
import {logger} from '#/logger'
import {defaults, Schema, schema} from '#/state/persisted/schema'
import {read, write} from '#/state/persisted/store'
/**
* The shape of the serialized data from our legacy Mobx store.
*/
export type LegacySchema = {
shell: {
colorMode: 'system' | 'light' | 'dark'
}
session: {
data: {
service: string
did: `did:plc:${string}`
} | null
accounts: {
service: string
did: `did:plc:${string}`
refreshJwt: string
accessJwt: string
handle: string
email: string
displayName: string
aviUrl: string
emailConfirmed: boolean
}[]
}
me: {
did: `did:plc:${string}`
handle: string
displayName: string
description: string
avatar: string
}
onboarding: {
step: string
}
preferences: {
primaryLanguage: string
contentLanguages: string[]
postLanguage: string
postLanguageHistory: string[]
contentLabels: {
nsfw: string
nudity: string
suggestive: string
gore: string
hate: string
spam: string
impersonation: string
}
savedFeeds: string[]
pinnedFeeds: string[]
requireAltTextEnabled: boolean
}
invitedUsers: {
seenDids: string[]
copiedInvites: string[]
}
mutedThreads: {uris: string[]}
reminders: {lastEmailConfirm?: string}
}
const DEPRECATED_ROOT_STATE_STORAGE_KEY = 'root'
export function transform(legacy: Partial<LegacySchema>): Schema {
return {
colorMode: legacy.shell?.colorMode || defaults.colorMode,
darkTheme: defaults.darkTheme,
session: {
accounts: legacy.session?.accounts || defaults.session.accounts,
currentAccount:
legacy.session?.accounts?.find(
a => a.did === legacy.session?.data?.did,
) || defaults.session.currentAccount,
},
reminders: {
lastEmailConfirm:
legacy.reminders?.lastEmailConfirm ||
defaults.reminders.lastEmailConfirm,
},
languagePrefs: {
primaryLanguage:
legacy.preferences?.primaryLanguage ||
defaults.languagePrefs.primaryLanguage,
contentLanguages:
legacy.preferences?.contentLanguages ||
defaults.languagePrefs.contentLanguages,
postLanguage:
legacy.preferences?.postLanguage || defaults.languagePrefs.postLanguage,
postLanguageHistory:
legacy.preferences?.postLanguageHistory ||
defaults.languagePrefs.postLanguageHistory,
appLanguage:
legacy.preferences?.primaryLanguage ||
defaults.languagePrefs.appLanguage,
},
requireAltTextEnabled:
legacy.preferences?.requireAltTextEnabled ||
defaults.requireAltTextEnabled,
mutedThreads: legacy.mutedThreads?.uris || defaults.mutedThreads,
invites: {
copiedInvites:
legacy.invitedUsers?.copiedInvites || defaults.invites.copiedInvites,
},
onboarding: {
step: legacy.onboarding?.step || defaults.onboarding.step,
},
hiddenPosts: defaults.hiddenPosts,
externalEmbeds: defaults.externalEmbeds,
lastSelectedHomeFeed: defaults.lastSelectedHomeFeed,
pdsAddressHistory: defaults.pdsAddressHistory,
disableHaptics: defaults.disableHaptics,
}
}
/**
* Migrates legacy persisted state to new store if new store doesn't exist in
* local storage AND old storage exists.
*/
export async function migrate() {
logger.debug('persisted state: check need to migrate')
try {
const rawLegacyData = await AsyncStorage.getItem(
DEPRECATED_ROOT_STATE_STORAGE_KEY,
)
const newData = await read()
const alreadyMigrated = Boolean(newData)
if (!alreadyMigrated && rawLegacyData) {
logger.debug('persisted state: migrating legacy storage')
const legacyData = JSON.parse(rawLegacyData)
const newData = transform(legacyData)
const validate = schema.safeParse(newData)
if (validate.success) {
await write(newData)
logger.debug('persisted state: migrated legacy storage')
} else {
logger.error('persisted state: legacy data failed validation', {
message: validate.error,
})
}
} else {
logger.debug('persisted state: no migration needed')
}
} catch (e: any) {
logger.error(e, {
message: 'persisted state: error migrating legacy storage',
})
}
}
export async function clearLegacyStorage() {
try {
await AsyncStorage.removeItem(DEPRECATED_ROOT_STATE_STORAGE_KEY)
} catch (e: any) {
logger.error(`persisted legacy store: failed to clear`, {
message: e.toString(),
})
}
}
src/state/persisted/schema.ts
+47 -3
View File
@@ -1,6 +1,8 @@
import {z} from 'zod'
import {deviceLocales, prefersReducedMotion} from '#/platform/detection'
import {logger} from '#/logger'
import {deviceLocales} from '#/platform/detection'
import {PlatformInfo} from '../../../modules/expo-bluesky-swiss-army'
const externalEmbedOptions = ['show', 'hide'] as const
@@ -42,7 +44,7 @@ const currentAccountSchema = accountSchema.extend({
})
export type PersistedCurrentAccount = z.infer<typeof currentAccountSchema>
export const schema = z.object({
const schema = z.object({
colorMode: z.enum(['system', 'light', 'dark']),
darkTheme: z.enum(['dim', 'dark']).optional(),
session: z.object({
@@ -89,6 +91,7 @@ export const schema = z.object({
disableAutoplay: z.boolean().optional(),
kawaii: z.boolean().optional(),
hasCheckedForStarterPack: z.boolean().optional(),
subtitlesEnabled: z.boolean().optional(),
/** @deprecated */
mutedThreads: z.array(z.string()),
})
@@ -128,7 +131,48 @@ export const defaults: Schema = {
lastSelectedHomeFeed: undefined,
pdsAddressHistory: [],
disableHaptics: false,
disableAutoplay: prefersReducedMotion,
disableAutoplay: PlatformInfo.getIsReducedMotionEnabled(),
kawaii: false,
hasCheckedForStarterPack: false,
subtitlesEnabled: true,
}
export function tryParse(rawData: string): Schema | undefined {
let objData
try {
objData = JSON.parse(rawData)
} catch (e) {
logger.error('persisted state: failed to parse root state from storage', {
message: e,
})
}
if (!objData) {
return undefined
}
const parsed = schema.safeParse(objData)
if (parsed.success) {
return objData
} else {
const errors =
parsed.error?.errors?.map(e => ({
code: e.code,
// @ts-ignore exists on some types
expected: e?.expected,
path: e.path?.join('.'),
})) || []
logger.error(`persisted store: data failed validation on read`, {errors})
return undefined
}
}
export function tryStringify(value: Schema): string | undefined {
try {
schema.parse(value)
return JSON.stringify(value)
} catch (e) {
logger.error(`persisted state: failed stringifying root state`, {
message: e,
})
return undefined
}
}
src/state/persisted/store.ts
-44
View File
@@ -1,44 +0,0 @@
import AsyncStorage from '@react-native-async-storage/async-storage'
import {logger} from '#/logger'
import {Schema, schema} from '#/state/persisted/schema'
const BSKY_STORAGE = 'BSKY_STORAGE'
export async function write(value: Schema) {
schema.parse(value)
await AsyncStorage.setItem(BSKY_STORAGE, JSON.stringify(value))
}
export async function read(): Promise<Schema | undefined> {
const rawData = await AsyncStorage.getItem(BSKY_STORAGE)
const objData = rawData ? JSON.parse(rawData) : undefined
// new user
if (!objData) return undefined
// existing user, validate
const parsed = schema.safeParse(objData)
if (parsed.success) {
return objData
} else {
const errors =
parsed.error?.errors?.map(e => ({
code: e.code,
// @ts-ignore exists on some types
expected: e?.expected,
path: e.path?.join('.'),
})) || []
logger.error(`persisted store: data failed validation on read`, {errors})
return undefined
}
}
export async function clear() {
try {
await AsyncStorage.removeItem(BSKY_STORAGE)
} catch (e: any) {
logger.error(`persisted store: failed to clear`, {message: e.toString()})
}
}
src/state/persisted/types.ts
+12
View File
@@ -0,0 +1,12 @@
import type {Schema} from './schema'
export type PersistedApi = {
init(): Promise<void>
get<K extends keyof Schema>(key: K): Schema[K]
write<K extends keyof Schema>(key: K, value: Schema[K]): Promise<void>
onUpdate<K extends keyof Schema>(
key: K,
cb: (v: Schema[K]) => void,
): () => void
clearStorage: () => Promise<void>
}
src/state/preferences/alt-text-required.tsx
+6 -3
View File
@@ -26,9 +26,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('requireAltTextEnabled'))
})
return persisted.onUpdate(
'requireAltTextEnabled',
nextRequireAltTextEnabled => {
setState(nextRequireAltTextEnabled)
},
)
}, [setStateWrapped])
return (
src/state/preferences/autoplay.tsx
+2 -2
View File
@@ -24,8 +24,8 @@ export function Provider({children}: {children: React.ReactNode}) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(Boolean(persisted.get('disableAutoplay')))
return persisted.onUpdate('disableAutoplay', nextDisableAutoplay => {
setState(Boolean(nextDisableAutoplay))
})
}, [setStateWrapped])
src/state/preferences/disable-haptics.tsx
+2 -2
View File
@@ -24,8 +24,8 @@ export function Provider({children}: {children: React.ReactNode}) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(Boolean(persisted.get('disableHaptics')))
return persisted.onUpdate('disableHaptics', nextDisableHaptics => {
setState(Boolean(nextDisableHaptics))
})
}, [setStateWrapped])
src/state/preferences/external-embeds-prefs.tsx
+2 -2
View File
@@ -35,8 +35,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('externalEmbeds'))
return persisted.onUpdate('externalEmbeds', nextExternalEmbeds => {
setState(nextExternalEmbeds)
})
}, [setStateWrapped])
src/state/preferences/feed-tuners.tsx
+8 -20
View File
@@ -19,63 +19,51 @@ export function useFeedTuners(feedDesc: FeedDescriptor) {
}
}
if (feedDesc.startsWith('feedgen')) {
return [
FeedTuner.dedupReposts,
FeedTuner.preferredLangOnly(langPrefs.contentLanguages),
]
return [FeedTuner.preferredLangOnly(langPrefs.contentLanguages)]
}
if (feedDesc.startsWith('list')) {
const feedTuners = []
let feedTuners = []
if (feedDesc.endsWith('|as_following')) {
// Same as Following tuners below, copypaste for now.
feedTuners.push(FeedTuner.removeOrphans)
if (preferences?.feedViewPrefs.hideReposts) {
feedTuners.push(FeedTuner.removeReposts)
} else {
feedTuners.push(FeedTuner.dedupReposts)
}
if (preferences?.feedViewPrefs.hideReplies) {
feedTuners.push(FeedTuner.removeReplies)
} else {
feedTuners.push(
FeedTuner.thresholdRepliesOnly({
FeedTuner.followedRepliesOnly({
userDid: currentAccount?.did || '',
minLikes: preferences?.feedViewPrefs.hideRepliesByLikeCount || 0,
followedOnly:
!!preferences?.feedViewPrefs.hideRepliesByUnfollowed,
}),
)
}
if (preferences?.feedViewPrefs.hideQuotePosts) {
feedTuners.push(FeedTuner.removeQuotePosts)
}
} else {
feedTuners.push(FeedTuner.dedupReposts)
feedTuners.push(FeedTuner.dedupThreads)
}
return feedTuners
}
if (feedDesc === 'following') {
const feedTuners = []
const feedTuners = [FeedTuner.removeOrphans]
if (preferences?.feedViewPrefs.hideReposts) {
feedTuners.push(FeedTuner.removeReposts)
} else {
feedTuners.push(FeedTuner.dedupReposts)
}
if (preferences?.feedViewPrefs.hideReplies) {
feedTuners.push(FeedTuner.removeReplies)
} else {
feedTuners.push(
FeedTuner.thresholdRepliesOnly({
FeedTuner.followedRepliesOnly({
userDid: currentAccount?.did || '',
minLikes: preferences?.feedViewPrefs.hideRepliesByLikeCount || 0,
followedOnly: !!preferences?.feedViewPrefs.hideRepliesByUnfollowed,
}),
)
}
if (preferences?.feedViewPrefs.hideQuotePosts) {
feedTuners.push(FeedTuner.removeQuotePosts)
}
feedTuners.push(FeedTuner.dedupThreads)
return feedTuners
}
src/state/preferences/hidden-posts.tsx
+2 -2
View File
@@ -44,8 +44,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('hiddenPosts'))
return persisted.onUpdate('hiddenPosts', nextHiddenPosts => {
setState(nextHiddenPosts)
})
}, [setStateWrapped])
src/state/preferences/in-app-browser.tsx
+2 -2
View File
@@ -34,8 +34,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('useInAppBrowser'))
return persisted.onUpdate('useInAppBrowser', nextUseInAppBrowser => {
setState(nextUseInAppBrowser)
})
}, [setStateWrapped])
src/state/preferences/index.tsx
+5 -1
View File
@@ -9,6 +9,7 @@ import {Provider as InAppBrowserProvider} from './in-app-browser'
import {Provider as KawaiiProvider} from './kawaii'
import {Provider as LanguagesProvider} from './languages'
import {Provider as LargeAltBadgeProvider} from './large-alt-badge'
import {Provider as SubtitlesProvider} from './subtitles'
import {Provider as UsedStarterPacksProvider} from './used-starter-packs'
export {
@@ -24,6 +25,7 @@ export {
export * from './hidden-posts'
export {useLabelDefinitions} from './label-defs'
export {useLanguagePrefs, useLanguagePrefsApi} from './languages'
export {useSetSubtitlesEnabled, useSubtitlesEnabled} from './subtitles'
export function Provider({children}: React.PropsWithChildren<{}>) {
return (
@@ -36,7 +38,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
<DisableHapticsProvider>
<AutoplayProvider>
<UsedStarterPacksProvider>
<KawaiiProvider>{children}</KawaiiProvider>
<SubtitlesProvider>
<KawaiiProvider>{children}</KawaiiProvider>
</SubtitlesProvider>
</UsedStarterPacksProvider>
</AutoplayProvider>
</DisableHapticsProvider>
src/state/preferences/kawaii.tsx
+2 -2
View File
@@ -21,8 +21,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('kawaii'))
return persisted.onUpdate('kawaii', nextKawaii => {
setState(nextKawaii)
})
}, [setStateWrapped])
src/state/preferences/languages.tsx
+2 -2
View File
@@ -43,8 +43,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('languagePrefs'))
return persisted.onUpdate('languagePrefs', nextLanguagePrefs => {
setState(nextLanguagePrefs)
})
}, [setStateWrapped])
src/state/preferences/large-alt-badge.tsx
+6 -3
View File
@@ -26,9 +26,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('largeAltBadgeEnabled'))
})
return persisted.onUpdate(
'largeAltBadgeEnabled',
nextLargeAltBadgeEnabled => {
setState(nextLargeAltBadgeEnabled)
},
)
}, [setStateWrapped])
return (
src/state/preferences/subtitles.tsx
+42
View File
@@ -0,0 +1,42 @@
import React from 'react'
import * as persisted from '#/state/persisted'
type StateContext = boolean
type SetContext = (v: boolean) => void
const stateContext = React.createContext<StateContext>(
Boolean(persisted.defaults.subtitlesEnabled),
)
const setContext = React.createContext<SetContext>((_: boolean) => {})
export function Provider({children}: {children: React.ReactNode}) {
const [state, setState] = React.useState(
Boolean(persisted.get('subtitlesEnabled')),
)
const setStateWrapped = React.useCallback(
(subtitlesEnabled: persisted.Schema['subtitlesEnabled']) => {
setState(Boolean(subtitlesEnabled))
persisted.write('subtitlesEnabled', subtitlesEnabled)
},
[setState],
)
React.useEffect(() => {
return persisted.onUpdate('subtitlesEnabled', nextSubtitlesEnabled => {
setState(Boolean(nextSubtitlesEnabled))
})
}, [setStateWrapped])
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setStateWrapped}>
{children}
</setContext.Provider>
</stateContext.Provider>
)
}
export const useSubtitlesEnabled = () => React.useContext(stateContext)
export const useSetSubtitlesEnabled = () => React.useContext(setContext)
src/state/preferences/used-starter-packs.tsx
+6 -3
View File
@@ -19,9 +19,12 @@ export function Provider({children}: {children: React.ReactNode}) {
}
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('hasCheckedForStarterPack'))
})
return persisted.onUpdate(
'hasCheckedForStarterPack',
nextHasCheckedForStarterPack => {
setState(nextHasCheckedForStarterPack)
},
)
}, [])
return (
src/state/queries/feed.ts
+33 -20
View File
@@ -5,6 +5,7 @@ import {
AppBskyGraphDefs,
AppBskyUnspeccedGetPopularFeedGenerators,
AtUri,
moderateFeedGenerator,
RichText,
} from '@atproto/api'
import {
@@ -26,6 +27,7 @@ import {RQKEY as listQueryKey} from '#/state/queries/list'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {useAgent, useSession} from '#/state/session'
import {router} from '#/routes'
import {useModerationOpts} from '../preferences/moderation-opts'
import {FeedDescriptor} from './post-feed'
import {precacheResolvedUri} from './resolve-uri'
@@ -207,14 +209,16 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) {
const limit = options?.limit || 10
const {data: preferences} = usePreferencesQuery()
const queryClient = useQueryClient()
const moderationOpts = useModerationOpts()
// Make sure this doesn't invalidate unless really needed.
const selectArgs = useMemo(
() => ({
hasSession,
savedFeeds: preferences?.savedFeeds || [],
moderationOpts,
}),
[hasSession, preferences?.savedFeeds],
[hasSession, preferences?.savedFeeds, moderationOpts],
)
const lastPageCountRef = useRef(0)
@@ -225,6 +229,7 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) {
QueryKey,
string | undefined
>({
enabled: Boolean(moderationOpts),
queryKey: createGetPopularFeedsQueryKey(options),
queryFn: async ({pageParam}) => {
const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({
@@ -246,7 +251,11 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) {
(
data: InfiniteData<AppBskyUnspeccedGetPopularFeedGenerators.OutputSchema>,
) => {
const {savedFeeds, hasSession: hasSessionInner} = selectArgs
const {
savedFeeds,
hasSession: hasSessionInner,
moderationOpts,
} = selectArgs
return {
...data,
pages: data.pages.map(page => {
@@ -264,7 +273,8 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) {
return f.value === feed.uri
}),
)
return !alreadySaved
const decision = moderateFeedGenerator(feed, moderationOpts!)
return !alreadySaved && !decision.ui('contentList').filter
}),
}
}),
@@ -304,6 +314,8 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) {
export function useSearchPopularFeedsMutation() {
const agent = useAgent()
const moderationOpts = useModerationOpts()
return useMutation({
mutationFn: async (query: string) => {
const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({
@@ -311,24 +323,15 @@ export function useSearchPopularFeedsMutation() {
query: query,
})
return res.data.feeds
},
})
}
export function useSearchPopularFeedsQuery({q}: {q: string}) {
const agent = useAgent()
return useQuery({
queryKey: ['searchPopularFeeds', q],
queryFn: async () => {
const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({
limit: 15,
query: q,
})
if (moderationOpts) {
return res.data.feeds.filter(feed => {
const decision = moderateFeedGenerator(feed, moderationOpts)
return !decision.ui('contentList').filter
})
}
return res.data.feeds
},
placeholderData: keepPreviousData,
})
}
@@ -346,17 +349,27 @@ export function usePopularFeedsSearch({
enabled?: boolean
}) {
const agent = useAgent()
const moderationOpts = useModerationOpts()
const enabledInner = enabled ?? Boolean(moderationOpts)
return useQuery({
enabled,
enabled: enabledInner,
queryKey: createPopularFeedsSearchQueryKey(query),
queryFn: async () => {
const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({
limit: 10,
limit: 15,
query: query,
})
return res.data.feeds
},
placeholderData: keepPreviousData,
select(data) {
return data.filter(feed => {
const decision = moderateFeedGenerator(feed, moderationOpts!)
return !decision.ui('contentList').filter
})
},
})
}
src/state/queries/notifications/feed.ts
+43 -20
View File
@@ -59,7 +59,6 @@ export function useNotificationFeedQuery(opts?: {
const moderationOpts = useModerationOpts()
const unreads = useUnreadNotificationsApi()
const enabled = opts?.enabled !== false
const lastPageCountRef = useRef(0)
const gate = useGate()
// false: force showing all notifications
@@ -121,28 +120,52 @@ export function useNotificationFeedQuery(opts?: {
},
})
// The server may end up returning an empty page, a page with too few items,
// or a page with items that end up getting filtered out. When we fetch pages,
// we'll keep track of how many items we actually hope to see. If the server
// doesn't return enough items, we're going to continue asking for more items.
const lastItemCount = useRef(0)
const wantedItemCount = useRef(0)
const autoPaginationAttemptCount = useRef(0)
useEffect(() => {
const {isFetching, hasNextPage, data} = query
if (isFetching || !hasNextPage) {
return
}
// avoid double-fires of fetchNextPage()
if (
lastPageCountRef.current !== 0 &&
lastPageCountRef.current === data?.pages?.length
) {
return
}
// fetch next page if we haven't gotten a full page of content
let count = 0
const {data, isLoading, isRefetching, isFetchingNextPage, hasNextPage} =
query
// Count the items that we already have.
let itemCount = 0
for (const page of data?.pages || []) {
count += page.items.length
itemCount += page.items.length
}
if (count < PAGE_SIZE && (data?.pages.length || 0) < 6) {
query.fetchNextPage()
lastPageCountRef.current = data?.pages?.length || 0
// If items got truncated, reset the state we're tracking below.
if (itemCount !== lastItemCount.current) {
if (itemCount < lastItemCount.current) {
wantedItemCount.current = itemCount
}
lastItemCount.current = itemCount
}
// Now track how many items we really want, and fetch more if needed.
if (isLoading || isRefetching) {
// During the initial fetch, we want to get an entire page's worth of items.
wantedItemCount.current = PAGE_SIZE
} else if (isFetchingNextPage) {
if (itemCount > wantedItemCount.current) {
// We have more items than wantedItemCount, so wantedItemCount must be out of date.
// Some other code must have called fetchNextPage(), for example, from onEndReached.
// Adjust the wantedItemCount to reflect that we want one more full page of items.
wantedItemCount.current = itemCount + PAGE_SIZE
}
} else if (hasNextPage) {
// At this point we're not fetching anymore, so it's time to make a decision.
// If we didn't receive enough items from the server, paginate again until we do.
if (itemCount < wantedItemCount.current) {
autoPaginationAttemptCount.current++
if (autoPaginationAttemptCount.current < 50 /* failsafe */) {
query.fetchNextPage()
}
} else {
autoPaginationAttemptCount.current = 0
}
}
}, [query])
src/state/queries/post-feed.ts
+72 -96
View File
@@ -31,7 +31,7 @@ import {LikesFeedAPI} from 'lib/api/feed/likes'
import {ListFeedAPI} from 'lib/api/feed/list'
import {MergeFeedAPI} from 'lib/api/feed/merge'
import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types'
import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip'
import {FeedTuner, FeedTunerFn} from 'lib/api/feed-manip'
import {BSKY_FEED_OWNER_DIDS} from 'lib/constants'
import {KnownError} from '#/view/com/posts/FeedErrorMessage'
import {useFeedTuners} from '../preferences/feed-tuners'
@@ -61,7 +61,6 @@ export type FeedDescriptor =
| `list|${ListUri}`
| `list|${ListUri}|${ListFilter}`
export interface FeedParams {
disableTuner?: boolean
mergeFeedEnabled?: boolean
mergeFeedSources?: string[]
}
@@ -78,11 +77,6 @@ export interface FeedPostSliceItem {
uri: string
post: AppBskyFeedDefs.PostView
record: AppBskyFeedPost.Record
reason?:
| AppBskyFeedDefs.ReasonRepost
| ReasonFeedSource
| {[k: string]: unknown; $type: string}
feedContext: string | undefined
moderation: ModerationDecision
parentAuthor?: AppBskyActorDefs.ProfileViewBasic
isParentBlocked?: boolean
@@ -91,9 +85,14 @@ export interface FeedPostSliceItem {
export interface FeedPostSlice {
_isFeedPostSlice: boolean
_reactKey: string
rootUri: string
isThread: boolean
items: FeedPostSliceItem[]
isIncompleteThread: boolean
isFallbackMarker: boolean
feedContext: string | undefined
reason?:
| AppBskyFeedDefs.ReasonRepost
| ReasonFeedSource
| {[k: string]: unknown; $type: string}
}
export interface FeedPageUnselected {
@@ -105,7 +104,7 @@ export interface FeedPageUnselected {
export interface FeedPage {
api: FeedAPI
tuner: FeedTuner | NoopFeedTuner
tuner: FeedTuner
cursor: string | undefined
slices: FeedPostSlice[]
fetchedAt: number
@@ -135,25 +134,17 @@ export function usePostFeedQuery(
args: typeof selectArgs
result: InfiniteData<FeedPage>
} | null>(null)
const lastPageCountRef = useRef(0)
const isDiscover = feedDesc.includes(DISCOVER_FEED_URI)
// Make sure this doesn't invalidate unless really needed.
const selectArgs = React.useMemo(
() => ({
feedTuners,
disableTuner: params?.disableTuner,
moderationOpts,
ignoreFilterFor: opts?.ignoreFilterFor,
isDiscover,
}),
[
feedTuners,
params?.disableTuner,
moderationOpts,
opts?.ignoreFilterFor,
isDiscover,
],
[feedTuners, moderationOpts, opts?.ignoreFilterFor, isDiscover],
)
const query = useInfiniteQuery<
@@ -232,17 +223,10 @@ export function usePostFeedQuery(
(data: InfiniteData<FeedPageUnselected, RQPageParam>) => {
// If the selection depends on some data, that data should
// be included in the selectArgs object and read here.
const {
feedTuners,
disableTuner,
moderationOpts,
ignoreFilterFor,
isDiscover,
} = selectArgs
const {feedTuners, moderationOpts, ignoreFilterFor, isDiscover} =
selectArgs
const tuner = disableTuner
? new NoopFeedTuner()
: new FeedTuner(feedTuners)
const tuner = new FeedTuner(feedTuners)
// Keep track of the last run and whether we can reuse
// some already selected pages from there.
@@ -329,53 +313,22 @@ export function usePostFeedQuery(
const feedPostSlice: FeedPostSlice = {
_reactKey: slice._reactKey,
_isFeedPostSlice: true,
rootUri: slice.uri,
isThread:
slice.items.length > 1 &&
slice.items.every(
item =>
item.post.author.did ===
slice.items[0].post.author.did,
),
items: slice.items
.map((item, i) => {
if (
AppBskyFeedPost.isRecord(item.post.record) &&
AppBskyFeedPost.validateRecord(item.post.record)
.success
) {
const parent = item.reply?.parent
let parentAuthor:
| AppBskyActorDefs.ProfileViewBasic
| undefined
if (AppBskyFeedDefs.isPostView(parent)) {
parentAuthor = parent.author
}
if (!parentAuthor) {
parentAuthor =
slice.items[i + 1]?.reply?.grandparentAuthor
}
const replyRef = item.reply
const isParentBlocked = AppBskyFeedDefs.isBlockedPost(
replyRef?.parent,
)
const feedPostSliceItem: FeedPostSliceItem = {
_reactKey: `${slice._reactKey}-${i}-${item.post.uri}`,
uri: item.post.uri,
post: item.post,
record: item.post.record,
reason: slice.reason,
feedContext: slice.feedContext,
moderation: moderations[i],
parentAuthor,
isParentBlocked,
}
return feedPostSliceItem
}
return undefined
})
.filter(n => !!n),
isIncompleteThread: slice.isIncompleteThread,
isFallbackMarker: slice.isFallbackMarker,
feedContext: slice.feedContext,
reason: slice.reason,
items: slice.items.map((item, i) => {
const feedPostSliceItem: FeedPostSliceItem = {
_reactKey: `${slice._reactKey}-${i}-${item.post.uri}`,
uri: item.post.uri,
post: item.post,
record: item.record,
moderation: moderations[i],
parentAuthor: item.parentAuthor,
isParentBlocked: item.isParentBlocked,
}
return feedPostSliceItem
}),
}
return feedPostSlice
})
@@ -391,30 +344,54 @@ export function usePostFeedQuery(
),
})
// The server may end up returning an empty page, a page with too few items,
// or a page with items that end up getting filtered out. When we fetch pages,
// we'll keep track of how many items we actually hope to see. If the server
// doesn't return enough items, we're going to continue asking for more items.
const lastItemCount = useRef(0)
const wantedItemCount = useRef(0)
const autoPaginationAttemptCount = useRef(0)
useEffect(() => {
const {isFetching, hasNextPage, data} = query
if (isFetching || !hasNextPage) {
return
}
// avoid double-fires of fetchNextPage()
if (
lastPageCountRef.current !== 0 &&
lastPageCountRef.current === data?.pages?.length
) {
return
}
// fetch next page if we haven't gotten a full page of content
let count = 0
const {data, isLoading, isRefetching, isFetchingNextPage, hasNextPage} =
query
// Count the items that we already have.
let itemCount = 0
for (const page of data?.pages || []) {
for (const slice of page.slices) {
count += slice.items.length
itemCount += slice.items.length
}
}
if (count < PAGE_SIZE && (data?.pages.length || 0) < 6) {
query.fetchNextPage()
lastPageCountRef.current = data?.pages?.length || 0
// If items got truncated, reset the state we're tracking below.
if (itemCount !== lastItemCount.current) {
if (itemCount < lastItemCount.current) {
wantedItemCount.current = itemCount
}
lastItemCount.current = itemCount
}
// Now track how many items we really want, and fetch more if needed.
if (isLoading || isRefetching) {
// During the initial fetch, we want to get an entire page's worth of items.
wantedItemCount.current = PAGE_SIZE
} else if (isFetchingNextPage) {
if (itemCount > wantedItemCount.current) {
// We have more items than wantedItemCount, so wantedItemCount must be out of date.
// Some other code must have called fetchNextPage(), for example, from onEndReached.
// Adjust the wantedItemCount to reflect that we want one more full page of items.
wantedItemCount.current = itemCount + PAGE_SIZE
}
} else if (hasNextPage) {
// At this point we're not fetching anymore, so it's time to make a decision.
// If we didn't receive enough items from the server, paginate again until we do.
if (itemCount < wantedItemCount.current) {
autoPaginationAttemptCount.current++
if (autoPaginationAttemptCount.current < 50 /* failsafe */) {
query.fetchNextPage()
}
} else {
autoPaginationAttemptCount.current = 0
}
}
}, [query])
@@ -434,7 +411,6 @@ export async function pollLatest(page: FeedPage | undefined) {
if (post) {
const slices = page.tuner.tune([post], {
dryRun: true,
maintainOrder: true,
})
if (slices[0]) {
return true
src/state/queries/post-thread.ts
+12 -1
View File
@@ -136,6 +136,7 @@ export function sortThread(
node: ThreadNode,
opts: UsePreferencesQueryResponse['threadViewPrefs'],
modCache: ThreadModerationCache,
currentDid: string | undefined,
): ThreadNode {
if (node.type !== 'post') {
return node
@@ -159,6 +160,16 @@ export function sortThread(
return 1 // op's own reply
}
const aIsBySelf = a.post.author.did === currentDid
const bIsBySelf = b.post.author.did === currentDid
if (aIsBySelf && bIsBySelf) {
return a.post.indexedAt.localeCompare(b.post.indexedAt) // oldest
} else if (aIsBySelf) {
return -1 // current account's reply
} else if (bIsBySelf) {
return 1 // current account's reply
}
const aBlur = Boolean(modCache.get(a)?.ui('contentList').blur)
const bBlur = Boolean(modCache.get(b)?.ui('contentList').blur)
if (aBlur !== bBlur) {
@@ -195,7 +206,7 @@ export function sortThread(
}
return b.post.indexedAt.localeCompare(a.post.indexedAt)
})
node.replies.forEach(reply => sortThread(reply, opts, modCache))
node.replies.forEach(reply => sortThread(reply, opts, modCache, currentDid))
}
return node
}
src/state/queries/preferences/const.ts
+2 -2
View File
@@ -7,8 +7,8 @@ import {
export const DEFAULT_HOME_FEED_PREFS: UsePreferencesQueryResponse['feedViewPrefs'] =
{
hideReplies: false,
hideRepliesByUnfollowed: true,
hideRepliesByLikeCount: 0,
hideRepliesByUnfollowed: true, // Legacy, ignored
hideRepliesByLikeCount: 0, // Legacy, ignored
hideReposts: false,
hideQuotePosts: false,
lab_mergeFeedEnabled: false, // experimental
src/state/queries/preferences/index.ts
+15
View File
@@ -343,6 +343,21 @@ export function useRemoveMutedWordMutation() {
})
}
export function useRemoveMutedWordsMutation() {
const queryClient = useQueryClient()
const agent = useAgent()
return useMutation({
mutationFn: async (mutedWords: AppBskyActorDefs.MutedWord[]) => {
await agent.removeMutedWords(mutedWords)
// triggers a refetch
await queryClient.invalidateQueries({
queryKey: preferencesQueryKey,
})
},
})
}
export function useQueueNudgesMutation() {
const queryClient = useQueryClient()
const agent = useAgent()
src/state/queries/profile-feedgens.ts
+20 -2
View File
@@ -1,7 +1,8 @@
import {AppBskyFeedGetActorFeeds} from '@atproto/api'
import {AppBskyFeedGetActorFeeds, moderateFeedGenerator} from '@atproto/api'
import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query'
import {useAgent} from '#/state/session'
import {useModerationOpts} from '../preferences/moderation-opts'
const PAGE_SIZE = 50
type RQPageParam = string | undefined
@@ -14,7 +15,8 @@ export function useProfileFeedgensQuery(
did: string,
opts?: {enabled?: boolean},
) {
const enabled = opts?.enabled !== false
const moderationOpts = useModerationOpts()
const enabled = opts?.enabled !== false && Boolean(moderationOpts)
const agent = useAgent()
return useInfiniteQuery<
AppBskyFeedGetActorFeeds.OutputSchema,
@@ -38,5 +40,21 @@ export function useProfileFeedgensQuery(
initialPageParam: undefined,
getNextPageParam: lastPage => lastPage.cursor,
enabled,
select(data) {
return {
...data,
pages: data.pages.map(page => {
return {
...page,
feeds: page.feeds
// filter by labels
.filter(list => {
const decision = moderateFeedGenerator(list, moderationOpts!)
return !decision.ui('contentList').filter
}),
}
}),
}
},
})
}
src/state/queries/profile-lists.ts
+27 -10
View File
@@ -1,7 +1,8 @@
import {AppBskyGraphGetLists} from '@atproto/api'
import {AppBskyGraphGetLists, moderateUserList} from '@atproto/api'
import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query'
import {useAgent} from '#/state/session'
import {useModerationOpts} from '../preferences/moderation-opts'
const PAGE_SIZE = 30
type RQPageParam = string | undefined
@@ -10,7 +11,8 @@ const RQKEY_ROOT = 'profile-lists'
export const RQKEY = (did: string) => [RQKEY_ROOT, did]
export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) {
const enabled = opts?.enabled !== false
const moderationOpts = useModerationOpts()
const enabled = opts?.enabled !== false && Boolean(moderationOpts)
const agent = useAgent()
return useInfiniteQuery<
AppBskyGraphGetLists.OutputSchema,
@@ -27,17 +29,32 @@ export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) {
cursor: pageParam,
})
// Starter packs use a reference list, which we do not want to show on profiles. At some point we could probably
// just filter this out on the backend instead of in the client.
return {
...res.data,
lists: res.data.lists.filter(
l => l.purpose !== 'app.bsky.graph.defs#referencelist',
),
}
return res.data
},
initialPageParam: undefined,
getNextPageParam: lastPage => lastPage.cursor,
enabled,
select(data) {
return {
...data,
pages: data.pages.map(page => {
return {
...page,
lists: page.lists
/*
* Starter packs use a reference list, which we do not want to
* show on profiles. At some point we could probably just filter
* this out on the backend instead of in the client.
*/
.filter(l => l.purpose !== 'app.bsky.graph.defs#referencelist')
// filter by labels
.filter(list => {
const decision = moderateUserList(list, moderationOpts!)
return !decision.ui('contentList').filter
}),
}
}),
}
},
})
}
src/state/queries/video/compress-video.ts
+31
View File
@@ -0,0 +1,31 @@
import {ImagePickerAsset} from 'expo-image-picker'
import {useMutation} from '@tanstack/react-query'
import {CompressedVideo, compressVideo} from 'lib/media/video/compress'
export function useCompressVideoMutation({
onProgress,
onSuccess,
onError,
}: {
onProgress: (progress: number) => void
onError: (e: any) => void
onSuccess: (video: CompressedVideo) => void
}) {
return useMutation({
mutationFn: async (asset: ImagePickerAsset) => {
return await compressVideo(asset.uri, {
onProgress: num => onProgress(trunc2dp(num)),
})
},
onError,
onSuccess,
onMutate: () => {
onProgress(0)
},
})
}
function trunc2dp(num: number) {
return Math.trunc(num * 100) / 100
}
src/state/queries/video/util.ts
+15
View File
@@ -0,0 +1,15 @@
const UPLOAD_ENDPOINT = process.env.EXPO_PUBLIC_VIDEO_ROOT_ENDPOINT ?? ''
export const createVideoEndpointUrl = (
route: string,
params?: Record<string, string>,
) => {
const url = new URL(`${UPLOAD_ENDPOINT}`)
url.pathname = route
if (params) {
for (const key in params) {
url.searchParams.set(key, params[key])
}
}
return url.href
}
src/state/queries/video/video-upload.ts
+71
View File
@@ -0,0 +1,71 @@
import {createUploadTask, FileSystemUploadType} from 'expo-file-system'
import {useMutation} from '@tanstack/react-query'
import {nanoid} from 'nanoid/non-secure'
import {CompressedVideo} from '#/lib/media/video/compress'
import {UploadVideoResponse} from '#/lib/media/video/types'
import {createVideoEndpointUrl} from '#/state/queries/video/util'
import {useAgent, useSession} from '#/state/session'
const UPLOAD_HEADER = process.env.EXPO_PUBLIC_VIDEO_HEADER ?? ''
export const useUploadVideoMutation = ({
onSuccess,
onError,
setProgress,
}: {
onSuccess: (response: UploadVideoResponse) => void
onError: (e: any) => void
setProgress: (progress: number) => void
}) => {
const {currentAccount} = useSession()
const agent = useAgent()
return useMutation({
mutationFn: async (video: CompressedVideo) => {
const uri = createVideoEndpointUrl('/upload', {
did: currentAccount!.did,
name: `${nanoid(12)}.mp4`, // @TODO what are we limiting this to?
})
// a logged-in agent should have this set, but we'll check just in case
if (!agent.pdsUrl) {
throw new Error('Agent does not have a PDS URL')
}
const {data: serviceAuth} =
await agent.api.com.atproto.server.getServiceAuth({
aud: `did:web:${agent.pdsUrl.hostname}`,
lxm: 'com.atproto.repo.uploadBlob',
})
const uploadTask = createUploadTask(
uri,
video.uri,
{
headers: {
'dev-key': UPLOAD_HEADER,
'content-type': 'video/mp4', // @TODO same question here. does the compression step always output mp4?
Authorization: `Bearer ${serviceAuth.token}`,
},
httpMethod: 'POST',
uploadType: FileSystemUploadType.BINARY_CONTENT,
},
p => setProgress(p.totalBytesSent / p.totalBytesExpectedToSend),
)
const res = await uploadTask.uploadAsync()
if (!res?.body) {
throw new Error('No response')
}
// @TODO rm, useful for debugging/getting video cid
console.log('[VIDEO]', res.body)
const responseBody = JSON.parse(res.body) as UploadVideoResponse
onSuccess(responseBody)
return responseBody
},
onError,
onSuccess,
})
}
src/state/queries/video/video-upload.web.ts
+80
View File
@@ -0,0 +1,80 @@
import {useMutation} from '@tanstack/react-query'
import {nanoid} from 'nanoid/non-secure'
import {CompressedVideo} from '#/lib/media/video/compress'
import {UploadVideoResponse} from '#/lib/media/video/types'
import {createVideoEndpointUrl} from '#/state/queries/video/util'
import {useAgent, useSession} from '#/state/session'
const UPLOAD_HEADER = process.env.EXPO_PUBLIC_VIDEO_HEADER ?? ''
export const useUploadVideoMutation = ({
onSuccess,
onError,
setProgress,
}: {
onSuccess: (response: UploadVideoResponse) => void
onError: (e: any) => void
setProgress: (progress: number) => void
}) => {
const {currentAccount} = useSession()
const agent = useAgent()
return useMutation({
mutationFn: async (video: CompressedVideo) => {
const uri = createVideoEndpointUrl('/upload', {
did: currentAccount!.did,
name: `${nanoid(12)}.mp4`, // @TODO what are we limiting this to?
})
// a logged-in agent should have this set, but we'll check just in case
if (!agent.pdsUrl) {
throw new Error('Agent does not have a PDS URL')
}
const {data: serviceAuth} =
await agent.api.com.atproto.server.getServiceAuth({
aud: `did:web:${agent.pdsUrl.hostname}`,
lxm: 'com.atproto.repo.uploadBlob',
})
const bytes = await fetch(video.uri).then(res => res.arrayBuffer())
const xhr = new XMLHttpRequest()
const res = (await new Promise((resolve, reject) => {
xhr.upload.addEventListener('progress', e => {
const progress = e.loaded / e.total
setProgress(progress)
})
xhr.onloadend = () => {
if (xhr.readyState === 4) {
const uploadRes = JSON.parse(
xhr.responseText,
) as UploadVideoResponse
resolve(uploadRes)
onSuccess(uploadRes)
} else {
reject()
onError(new Error('Failed to upload video'))
}
}
xhr.onerror = () => {
reject()
onError(new Error('Failed to upload video'))
}
xhr.open('POST', uri)
xhr.setRequestHeader('Content-Type', 'video/mp4') // @TODO how we we set the proper content type?
// @TODO remove this header for prod
xhr.setRequestHeader('dev-key', UPLOAD_HEADER)
xhr.setRequestHeader('Authorization', `Bearer ${serviceAuth.token}`)
xhr.send(bytes)
})) as UploadVideoResponse
// @TODO rm for prod
console.log('[VIDEO]', res)
return res
},
onError,
onSuccess,
})
}
src/state/queries/video/video.ts
+212
View File
@@ -0,0 +1,212 @@
import React from 'react'
import {ImagePickerAsset} from 'expo-image-picker'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQuery} from '@tanstack/react-query'
import {logger} from '#/logger'
import {CompressedVideo} from 'lib/media/video/compress'
import {VideoTooLargeError} from 'lib/media/video/errors'
import {JobState, JobStatus} from 'lib/media/video/types'
import {useCompressVideoMutation} from 'state/queries/video/compress-video'
import {createVideoEndpointUrl} from 'state/queries/video/util'
import {useUploadVideoMutation} from 'state/queries/video/video-upload'
type Status = 'idle' | 'compressing' | 'processing' | 'uploading' | 'done'
type Action =
| {
type: 'SetStatus'
status: Status
}
| {
type: 'SetProgress'
progress: number
}
| {
type: 'SetError'
error: string | undefined
}
| {type: 'Reset'}
| {type: 'SetAsset'; asset: ImagePickerAsset}
| {type: 'SetVideo'; video: CompressedVideo}
| {type: 'SetJobStatus'; jobStatus: JobStatus}
export interface State {
status: Status
progress: number
asset?: ImagePickerAsset
video: CompressedVideo | null
jobStatus?: JobStatus
error?: string
}
function reducer(state: State, action: Action): State {
let updatedState = state
if (action.type === 'SetStatus') {
updatedState = {...state, status: action.status}
} else if (action.type === 'SetProgress') {
updatedState = {...state, progress: action.progress}
} else if (action.type === 'SetError') {
updatedState = {...state, error: action.error}
} else if (action.type === 'Reset') {
updatedState = {
status: 'idle',
progress: 0,
video: null,
}
} else if (action.type === 'SetAsset') {
updatedState = {...state, asset: action.asset}
} else if (action.type === 'SetVideo') {
updatedState = {...state, video: action.video}
} else if (action.type === 'SetJobStatus') {
updatedState = {...state, jobStatus: action.jobStatus}
}
return updatedState
}
export function useUploadVideo({
setStatus,
onSuccess,
}: {
setStatus: (status: string) => void
onSuccess: () => void
}) {
const {_} = useLingui()
const [state, dispatch] = React.useReducer(reducer, {
status: 'idle',
progress: 0,
video: null,
})
const {setJobId} = useUploadStatusQuery({
onStatusChange: (status: JobStatus) => {
// This might prove unuseful, most of the job status steps happen too quickly to even be displayed to the user
// Leaving it for now though
dispatch({
type: 'SetJobStatus',
jobStatus: status,
})
setStatus(status.state.toString())
},
onSuccess: () => {
dispatch({
type: 'SetStatus',
status: 'idle',
})
onSuccess()
},
})
const {mutate: onVideoCompressed} = useUploadVideoMutation({
onSuccess: response => {
dispatch({
type: 'SetStatus',
status: 'processing',
})
setJobId(response.job_id)
},
onError: e => {
dispatch({
type: 'SetError',
error: _(msg`An error occurred while uploading the video.`),
})
logger.error('Error uploading video', {safeMessage: e})
},
setProgress: p => {
dispatch({type: 'SetProgress', progress: p})
},
})
const {mutate: onSelectVideo} = useCompressVideoMutation({
onProgress: p => {
dispatch({type: 'SetProgress', progress: p})
},
onError: e => {
if (e instanceof VideoTooLargeError) {
dispatch({
type: 'SetError',
error: _(msg`The selected video is larger than 100MB.`),
})
} else {
dispatch({
type: 'SetError',
// @TODO better error message from server, left untranslated on purpose
error: 'An error occurred while compressing the video.',
})
logger.error('Error compressing video', {safeMessage: e})
}
},
onSuccess: (video: CompressedVideo) => {
dispatch({
type: 'SetVideo',
video,
})
dispatch({
type: 'SetStatus',
status: 'uploading',
})
onVideoCompressed(video)
},
})
const selectVideo = (asset: ImagePickerAsset) => {
dispatch({
type: 'SetAsset',
asset,
})
dispatch({
type: 'SetStatus',
status: 'compressing',
})
onSelectVideo(asset)
}
const clearVideo = () => {
// @TODO cancel any running jobs
dispatch({type: 'Reset'})
}
return {
state,
dispatch,
selectVideo,
clearVideo,
}
}
const useUploadStatusQuery = ({
onStatusChange,
onSuccess,
}: {
onStatusChange: (status: JobStatus) => void
onSuccess: () => void
}) => {
const [enabled, setEnabled] = React.useState(true)
const [jobId, setJobId] = React.useState<string>()
const {isLoading, isError} = useQuery({
queryKey: ['video-upload'],
queryFn: async () => {
const url = createVideoEndpointUrl(`/job/${jobId}/status`)
const res = await fetch(url)
const status = (await res.json()) as JobStatus
if (status.state === JobState.JOB_STATE_COMPLETED) {
setEnabled(false)
onSuccess()
}
onStatusChange(status)
return status
},
enabled: Boolean(jobId && enabled),
refetchInterval: 1500,
})
return {
isLoading,
isError,
setJobId: (_jobId: string) => {
setJobId(_jobId)
},
}
}
src/state/session/index.tsx
+2 -2
View File
@@ -185,8 +185,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
}, [state])
React.useEffect(() => {
return persisted.onUpdate(() => {
const synced = persisted.get('session')
return persisted.onUpdate('session', nextSession => {
const synced = nextSession
addSessionDebugLog({type: 'persisted:receive', data: synced})
dispatch({
type: 'synced-accounts',
src/state/shell/color-mode.tsx
+10 -3
View File
@@ -1,4 +1,5 @@
import React from 'react'
import * as persisted from '#/state/persisted'
type StateContext = {
@@ -43,10 +44,16 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setColorMode(persisted.get('colorMode'))
setDarkTheme(persisted.get('darkTheme'))
const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
setDarkTheme(nextDarkTheme)
})
const unsub2 = persisted.onUpdate('colorMode', nextColorMode => {
setColorMode(nextColorMode)
})
return () => {
unsub1()
unsub2()
}
}, [])
return (
src/state/shell/onboarding.tsx
+5 -4
View File
@@ -1,6 +1,7 @@
import React from 'react'
import * as persisted from '#/state/persisted'
import {track} from '#/lib/analytics/analytics'
import * as persisted from '#/state/persisted'
export const OnboardingScreenSteps = {
Welcome: 'Welcome',
@@ -81,13 +82,13 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
)
React.useEffect(() => {
return persisted.onUpdate(() => {
const next = persisted.get('onboarding').step
return persisted.onUpdate('onboarding', nextOnboarding => {
const next = nextOnboarding.step
// TODO we've introduced a footgun
if (state.step !== next) {
dispatch({
type: 'set',
step: persisted.get('onboarding').step as OnboardingStep,
step: nextOnboarding.step as OnboardingStep,
})
}
})
src/state/shell/post-progress.tsx
+18
View File
@@ -0,0 +1,18 @@
import React from 'react'
interface PostProgressState {
progress: number
status: 'pending' | 'success' | 'error' | 'idle'
error?: string
}
const PostProgressContext = React.createContext<PostProgressState>({
progress: 0,
status: 'idle',
})
export function Provider() {}
export function usePostProgress() {
return React.useContext(PostProgressContext)
}
src/view/com/composer/Composer.tsx
+136 -57
View File
@@ -13,10 +13,16 @@ import {
Keyboard,
KeyboardAvoidingView,
LayoutChangeEvent,
StyleProp,
StyleSheet,
View,
ViewStyle,
} from 'react-native'
// @ts-expect-error no type definition
import ProgressCircle from 'react-native-progress/Circle'
import Animated, {
FadeIn,
FadeOut,
interpolateColor,
useAnimatedStyle,
useSharedValue,
@@ -55,6 +61,7 @@ import {
import {useProfileQuery} from '#/state/queries/profile'
import {Gif} from '#/state/queries/tenor'
import {ThreadgateSetting} from '#/state/queries/threadgate'
import {useUploadVideo} from '#/state/queries/video/video'
import {useAgent, useSession} from '#/state/session'
import {useComposerControls} from '#/state/shell/composer'
import {useAnalytics} from 'lib/analytics/analytics'
@@ -70,6 +77,7 @@ import {colors, s} from 'lib/styles'
import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
import {useDialogStateControlContext} from 'state/dialogs'
import {GalleryModel} from 'state/models/media/gallery'
import {State as VideoUploadState} from 'state/queries/video/video'
import {ComposerOpts} from 'state/shell/composer'
import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
import {atoms as a, useTheme} from '#/alf'
@@ -96,7 +104,6 @@ import {TextInput, TextInputRef} from './text-input/TextInput'
import {ThreadgateBtn} from './threadgate/ThreadgateBtn'
import {useExternalLinkFetch} from './useExternalLinkFetch'
import {SelectVideoBtn} from './videos/SelectVideoBtn'
import {useVideoState} from './videos/state'
import {VideoPreview} from './videos/VideoPreview'
import {VideoTranscodeProgress} from './videos/VideoTranscodeProgress'
@@ -159,14 +166,21 @@ export const ComposePost = observer(function ComposePost({
const [quote, setQuote] = useState<ComposerOpts['quote'] | undefined>(
initQuote,
)
const {
video,
onSelectVideo,
videoPending,
videoProcessingData,
selectVideo,
clearVideo,
videoProcessingProgress,
} = useVideoState({setError})
state: videoUploadState,
} = useUploadVideo({
setStatus: (status: string) => setProcessingState(status),
onSuccess: () => {
if (publishOnUpload) {
onPressPublish(true)
}
},
})
const [publishOnUpload, setPublishOnUpload] = useState(false)
const {extLink, setExtLink} = useExternalLinkFetch({setQuote})
const [extGif, setExtGif] = useState<Gif>()
const [labels, setLabels] = useState<string[]>([])
@@ -274,7 +288,7 @@ export const ComposePost = observer(function ComposePost({
return false
}, [gallery.needsAltText, extLink, extGif, requireAltTextEnabled])
const onPressPublish = async () => {
const onPressPublish = async (finishedUploading?: boolean) => {
if (isProcessing || graphemeLength > MAX_GRAPHEME_LENGTH) {
return
}
@@ -283,6 +297,15 @@ export const ComposePost = observer(function ComposePost({
return
}
if (
!finishedUploading &&
videoUploadState.status !== 'idle' &&
videoUploadState.asset
) {
setPublishOnUpload(true)
return
}
setError('')
if (
@@ -387,8 +410,12 @@ export const ComposePost = observer(function ComposePost({
: _(msg`What's up?`)
const canSelectImages =
gallery.size < 4 && !extLink && !video && !videoPending
const hasMedia = gallery.size > 0 || Boolean(extLink) || Boolean(video)
gallery.size < 4 &&
!extLink &&
videoUploadState.status === 'idle' &&
!videoUploadState.video
const hasMedia =
gallery.size > 0 || Boolean(extLink) || Boolean(videoUploadState.video)
const onEmojiButtonPress = useCallback(() => {
openPicker?.(textInput.current?.getCursorPosition())
@@ -500,7 +527,10 @@ export const ComposePost = observer(function ComposePost({
shape="default"
size="small"
style={[a.rounded_full, a.py_sm]}
onPress={onPressPublish}>
onPress={() => onPressPublish()}
disabled={
videoUploadState.status !== 'idle' && publishOnUpload
}>
<ButtonText style={[a.text_md]}>
{replyTo ? (
<Trans context="action">Reply</Trans>
@@ -572,7 +602,7 @@ export const ComposePost = observer(function ComposePost({
autoFocus
setRichText={setRichText}
onPhotoPasted={onPhotoPasted}
onPressPublish={onPressPublish}
onPressPublish={() => onPressPublish()}
onNewLink={onNewLink}
onError={setError}
accessible={true}
@@ -602,29 +632,33 @@ export const ComposePost = observer(function ComposePost({
</View>
)}
{quote ? (
<View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
<View style={{pointerEvents: 'none'}}>
<QuoteEmbed quote={quote} />
<View style={[a.mt_md]}>
{quote ? (
<View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
<View style={{pointerEvents: 'none'}}>
<QuoteEmbed quote={quote} />
</View>
{quote.uri !== initQuote?.uri && (
<QuoteX onRemove={() => setQuote(undefined)} />
)}
</View>
{quote.uri !== initQuote?.uri && (
<QuoteX onRemove={() => setQuote(undefined)} />
)}
</View>
) : null}
{videoPending && videoProcessingData ? (
<VideoTranscodeProgress
input={videoProcessingData}
progress={videoProcessingProgress}
/>
) : (
video && (
) : null}
{videoUploadState.status === 'compressing' &&
videoUploadState.asset ? (
<VideoTranscodeProgress
asset={videoUploadState.asset}
progress={videoUploadState.progress}
/>
) : videoUploadState.video ? (
// remove suspense when we get rid of lazy
<Suspense fallback={null}>
<VideoPreview video={video} clear={clearVideo} />
<VideoPreview
video={videoUploadState.video}
clear={clearVideo}
/>
</Suspense>
)
)}
) : null}
</View>
</Animated.ScrollView>
<SuggestedLanguage text={richtext.text} />
@@ -641,33 +675,37 @@ export const ComposePost = observer(function ComposePost({
t.atoms.border_contrast_medium,
styles.bottomBar,
]}>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} />
{gate('videos') && (
<SelectVideoBtn
onSelectVideo={onSelectVideo}
disabled={!canSelectImages}
{videoUploadState.status !== 'idle' ? (
<VideoUploadToolbar state={videoUploadState} />
) : (
<ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
<SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} />
{gate('videos') && (
<SelectVideoBtn
onSelectVideo={selectVideo}
disabled={!canSelectImages}
/>
)}
<OpenCameraBtn gallery={gallery} disabled={!canSelectImages} />
<SelectGifBtn
onClose={focusTextInput}
onSelectGif={onSelectGif}
disabled={hasMedia}
/>
)}
<OpenCameraBtn gallery={gallery} disabled={!canSelectImages} />
<SelectGifBtn
onClose={focusTextInput}
onSelectGif={onSelectGif}
disabled={hasMedia}
/>
{!isMobile ? (
<Button
onPress={onEmojiButtonPress}
style={a.p_sm}
label={_(msg`Open emoji picker`)}
accessibilityHint={_(msg`Open emoji picker`)}
variant="ghost"
shape="round"
color="primary">
<EmojiSmile size="lg" />
</Button>
) : null}
</View>
{!isMobile ? (
<Button
onPress={onEmojiButtonPress}
style={a.p_sm}
label={_(msg`Open emoji picker`)}
accessibilityHint={_(msg`Open emoji picker`)}
variant="ghost"
shape="round"
color="primary">
<EmojiSmile size="lg" />
</Button>
) : null}
</ToolbarWrapper>
)}
<View style={a.flex_1} />
<SelectLangBtn />
<CharProgress count={graphemeLength} />
@@ -893,3 +931,44 @@ const styles = StyleSheet.create({
borderTopWidth: StyleSheet.hairlineWidth,
},
})
function ToolbarWrapper({
style,
children,
}: {
style: StyleProp<ViewStyle>
children: React.ReactNode
}) {
if (isWeb) return children
return (
<Animated.View
style={style}
entering={FadeIn.duration(400)}
exiting={FadeOut.duration(400)}>
{children}
</Animated.View>
)
}
function VideoUploadToolbar({state}: {state: VideoUploadState}) {
const t = useTheme()
const progress =
state.status === 'compressing' || state.status === 'uploading'
? state.progress
: state.jobStatus?.progress ?? 100
return (
<ToolbarWrapper
style={[a.gap_sm, a.flex_row, a.align_center, {paddingVertical: 5}]}>
<ProgressCircle
size={30}
borderWidth={1}
borderColor={t.atoms.border_contrast_low.borderColor}
color={t.palette.primary_500}
progress={progress}
/>
<Text>{state.status}</Text>
</ToolbarWrapper>
)
}
src/view/com/composer/videos/VideoPreview.tsx
+1
View File
@@ -17,6 +17,7 @@ export function VideoPreview({
const player = useVideoPlayer(video.uri, player => {
player.loop = true
player.play()
player.volume = 0
})
return (
src/view/com/composer/videos/VideoTranscodeProgress.tsx
+4 -4
View File
@@ -9,15 +9,15 @@ import {Text} from '#/components/Typography'
import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
export function VideoTranscodeProgress({
input,
asset,
progress,
}: {
input: ImagePickerAsset
asset: ImagePickerAsset
progress: number
}) {
const t = useTheme()
const aspectRatio = input.width / input.height
const aspectRatio = asset.width / asset.height
return (
<View
@@ -29,7 +29,7 @@ export function VideoTranscodeProgress({
a.overflow_hidden,
{aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
]}>
<VideoTranscodeBackdrop uri={input.uri} />
<VideoTranscodeBackdrop uri={asset.uri} />
<View
style={[
a.flex_1,
src/view/com/composer/videos/state.ts
-51
View File
@@ -1,51 +0,0 @@
import {useState} from 'react'
import {ImagePickerAsset} from 'expo-image-picker'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useMutation} from '@tanstack/react-query'
import {compressVideo} from '#/lib/media/video/compress'
import {logger} from '#/logger'
import {VideoTooLargeError} from 'lib/media/video/errors'
import * as Toast from 'view/com/util/Toast'
export function useVideoState({setError}: {setError: (error: string) => void}) {
const {_} = useLingui()
const [progress, setProgress] = useState(0)
const {mutate, data, isPending, isError, reset, variables} = useMutation({
mutationFn: async (asset: ImagePickerAsset) => {
const compressed = await compressVideo(asset.uri, {
onProgress: num => setProgress(trunc2dp(num)),
})
return compressed
},
onError: (e: any) => {
// Don't log these errors in sentry, just let the user know
if (e instanceof VideoTooLargeError) {
Toast.show(_(msg`Videos cannot be larger than 100MB`), 'xmark')
return
}
logger.error('Failed to compress video', {safeError: e})
setError(_(msg`Could not compress video`))
},
onMutate: () => {
setProgress(0)
},
})
return {
video: data,
onSelectVideo: mutate,
videoPending: isPending,
videoProcessingData: variables,
videoError: isError,
clearVideo: reset,
videoProcessingProgress: progress,
}
}
function trunc2dp(num: number) {
return Math.trunc(num * 100) / 100
}
src/view/com/feeds/ProfileFeedgens.tsx
+43 -40
View File
@@ -129,46 +129,49 @@ export const ProfileFeedgens = React.forwardRef<
// rendering
// =
const renderItem = ({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
<EmptyState
icon="hashtag"
message={_(msg`You have no feeds.`)}
testID="listsEmpty"
/>
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
<LoadMoreRetryBtn
label={_(
msg`There was an issue fetching your lists. Tap here to try again.`,
)}
onPress={onPressRetryLoadMore}
/>
)
} else if (item === LOADING) {
return <FeedLoadingPlaceholder />
}
if (preferences) {
return (
<View
style={[
(index !== 0 || isWeb) && a.border_t,
t.atoms.border_contrast_low,
a.px_lg,
a.py_lg,
]}>
<FeedCard.Default view={item} />
</View>
)
}
return null
}
const renderItem = React.useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
<EmptyState
icon="hashtag"
message={_(msg`You have no feeds.`)}
testID="listsEmpty"
/>
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
<LoadMoreRetryBtn
label={_(
msg`There was an issue fetching your lists. Tap here to try again.`,
)}
onPress={onPressRetryLoadMore}
/>
)
} else if (item === LOADING) {
return <FeedLoadingPlaceholder />
}
if (preferences) {
return (
<View
style={[
(index !== 0 || isWeb) && a.border_t,
t.atoms.border_contrast_low,
a.px_lg,
a.py_lg,
]}>
<FeedCard.Default view={item} />
</View>
)
}
return null
},
[_, t, error, refetch, onPressRetryLoadMore, preferences],
)
React.useEffect(() => {
if (enabled && scrollElRef.current) {
src/view/com/lists/ProfileLists.tsx
+2 -7
View File
@@ -75,12 +75,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
items = items.concat([EMPTY])
} else if (data?.pages) {
for (const page of data?.pages) {
items = items.concat(
page.lists.map(l => ({
...l,
_reactKey: l.uri,
})),
)
items = items.concat(page.lists)
}
}
if (isError && !isEmpty) {
@@ -192,7 +187,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
testID={testID ? `${testID}-flatlist` : undefined}
ref={scrollElRef}
data={items}
keyExtractor={(item: any) => item._reactKey}
keyExtractor={(item: any) => item._reactKey || item.uri}
renderItem={renderItemInner}
refreshing={isPTRing}
onRefresh={onRefresh}
src/view/com/notifications/Feed.tsx
+1
View File
@@ -194,6 +194,7 @@ export function Feed({
initialNumToRender={initialNumToRender}
windowSize={11}
sideBorders={false}
removeClippedSubviews={true}
/>
</View>
)
src/view/com/notifications/FeedItem.tsx
+21 -1
View File
@@ -13,11 +13,13 @@ import {
AppBskyEmbedRecordWithMedia,
AppBskyFeedDefs,
AppBskyFeedPost,
AppBskyGraphFollow,
moderateProfile,
ModerationDecision,
ModerationOpts,
} from '@atproto/api'
import {AtUri} from '@atproto/api'
import {TID} from '@atproto/common-web'
import {msg, Plural, plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
@@ -252,10 +254,28 @@ let FeedItem = ({
)
icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} />
} else if (item.type === 'follow') {
let isFollowBack = false
if (
item.notification.author.viewer?.following &&
gate('ungroup_follow_backs')
AppBskyGraphFollow.isRecord(item.notification.record)
) {
let followingTimestamp
try {
const rkey = new AtUri(item.notification.author.viewer.following).rkey
followingTimestamp = TID.fromStr(rkey).timestamp()
} catch (e) {
// For some reason the following URI was invalid. Default to it not being a follow back.
console.error('Invalid following URI')
}
if (followingTimestamp) {
const followedTimestamp =
new Date(item.notification.record.createdAt).getTime() * 1000
isFollowBack = followedTimestamp > followingTimestamp
}
}
if (isFollowBack && gate('ungroup_follow_backs')) {
a11yLabel =
authors.length > 1
? _(
src/view/com/post-thread/PostLikedBy.tsx
+52 -53
View File
@@ -1,38 +1,57 @@
import React, {useCallback, useMemo, useState} from 'react'
import {ActivityIndicator, StyleSheet, View} from 'react-native'
import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
import {CenteredView} from '../util/Views'
import {List} from '../util/List'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
import {logger} from '#/logger'
import {LoadingScreen} from '../util/LoadingScreen'
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {useLikedByQuery} from '#/state/queries/post-liked-by'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {useLikedByQuery} from '#/state/queries/post-liked-by'
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
import {List} from '../util/List'
function renderItem({item}: {item: GetLikes.Like}) {
return <ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
}
function keyExtractor(item: GetLikes.Like) {
return item.actor.did
}
export function PostLikedBy({uri}: {uri: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = useState(false)
const {
data: resolvedUri,
error: resolveError,
isFetching: isFetchingResolvedUri,
isLoading: isLoadingUri,
} = useResolveUriQuery(uri)
const {
data,
isFetching,
isFetched,
isLoading: isLoadingLikes,
isFetchingNextPage,
hasNextPage,
fetchNextPage,
isError,
error,
refetch,
} = useLikedByQuery(resolvedUri?.uri)
const isError = Boolean(resolveError || error)
const likes = useMemo(() => {
if (data?.pages) {
return data.pages.flatMap(page => page.likes)
}
return []
}, [data])
const onRefresh = useCallback(async () => {
@@ -46,64 +65,44 @@ export function PostLikedBy({uri}: {uri: string}) {
}, [refetch, setIsPTRing])
const onEndReached = useCallback(async () => {
if (isFetching || !hasNextPage || isError) return
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
} catch (err) {
logger.error('Failed to load more likes', {message: err})
}
}, [isFetching, hasNextPage, isError, fetchNextPage])
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
const renderItem = useCallback(({item}: {item: GetLikes.Like}) => {
if (likes.length < 1) {
return (
<ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
)
}, [])
if (isFetchingResolvedUri || !isFetched) {
return <LoadingScreen />
}
// error
// =
if (resolveError || isError) {
return (
<CenteredView>
<ErrorMessage
message={cleanError(resolveError || error)}
onPressTryAgain={onRefresh}
/>
</CenteredView>
<ListMaybePlaceholder
isLoading={isLoadingUri || isLoadingLikes}
isError={isError}
/>
)
}
// loaded
// =
return (
<List
data={likes}
keyExtractor={item => item.actor.did}
renderItem={renderItem}
keyExtractor={keyExtractor}
refreshing={isPTRing}
onRefresh={onRefresh}
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{(isFetching || isFetchingNextPage) && <ActivityIndicator />}
</View>
)}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Liked By`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
error={cleanError(error)}
onRetry={fetchNextPage}
/>
}
// @ts-ignore our .web version only -prf
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
/>
)
}
const styles = StyleSheet.create({
footer: {
height: 200,
paddingTop: 20,
},
})
src/view/com/post-thread/PostRepostedBy.tsx
+53 -53
View File
@@ -1,38 +1,57 @@
import React, {useMemo, useCallback, useState} from 'react'
import {ActivityIndicator, StyleSheet, View} from 'react-native'
import React, {useCallback, useMemo, useState} from 'react'
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
import {CenteredView} from '../util/Views'
import {List} from '../util/List'
import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {logger} from '#/logger'
import {LoadingScreen} from '../util/LoadingScreen'
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by'
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
import {List} from '../util/List'
function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
return <ProfileCardWithFollowBtn key={item.did} profile={item} />
}
function keyExtractor(item: ActorDefs.ProfileViewBasic) {
return item.did
}
export function PostRepostedBy({uri}: {uri: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = useState(false)
const {
data: resolvedUri,
error: resolveError,
isFetching: isFetchingResolvedUri,
isLoading: isLoadingUri,
} = useResolveUriQuery(uri)
const {
data,
isFetching,
isFetched,
isLoading: isLoadingRepostedBy,
isFetchingNextPage,
hasNextPage,
fetchNextPage,
isError,
error,
refetch,
} = usePostRepostedByQuery(resolvedUri?.uri)
const isError = Boolean(resolveError || error)
const repostedBy = useMemo(() => {
if (data?.pages) {
return data.pages.flatMap(page => page.repostedBy)
}
return []
}, [data])
const onRefresh = useCallback(async () => {
@@ -46,35 +65,20 @@ export function PostRepostedBy({uri}: {uri: string}) {
}, [refetch, setIsPTRing])
const onEndReached = useCallback(async () => {
if (isFetching || !hasNextPage || isError) return
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
} catch (err) {
logger.error('Failed to load more reposts', {message: err})
}
}, [isFetching, hasNextPage, isError, fetchNextPage])
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
const renderItem = useCallback(
({item}: {item: ActorDefs.ProfileViewBasic}) => {
return <ProfileCardWithFollowBtn key={item.did} profile={item} />
},
[],
)
if (isFetchingResolvedUri || !isFetched) {
return <LoadingScreen />
}
// error
// =
if (resolveError || isError) {
if (repostedBy.length < 1) {
return (
<CenteredView>
<ErrorMessage
message={cleanError(resolveError || error)}
onPressTryAgain={onRefresh}
/>
</CenteredView>
<ListMaybePlaceholder
isLoading={isLoadingUri || isLoadingRepostedBy}
isError={isError}
/>
)
}
@@ -83,28 +87,24 @@ export function PostRepostedBy({uri}: {uri: string}) {
return (
<List
data={repostedBy}
keyExtractor={item => item.did}
renderItem={renderItem}
keyExtractor={keyExtractor}
refreshing={isPTRing}
onRefresh={onRefresh}
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{(isFetching || isFetchingNextPage) && <ActivityIndicator />}
</View>
)}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Reposted By`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
error={cleanError(error)}
onRetry={fetchNextPage}
/>
}
// @ts-ignore our .web version only -prf
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
/>
)
}
const styles = StyleSheet.create({
footer: {
height: 200,
paddingTop: 20,
},
})
src/view/com/post-thread/PostThread.tsx
+5 -4
View File
@@ -89,7 +89,7 @@ export function PostThread({
onCanReply: (canReply: boolean) => void
onPressReply: () => unknown
}) {
const {hasSession} = useSession()
const {hasSession, currentAccount} = useSession()
const {_} = useLingui()
const t = useTheme()
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
@@ -154,6 +154,7 @@ export function PostThread({
// On the web this is not necessary because we can synchronously adjust the scroll in onContentSizeChange instead.
const [deferParents, setDeferParents] = React.useState(isNative)
const currentDid = currentAccount?.did
const threadModerationCache = React.useMemo(() => {
const cache: ThreadModerationCache = new WeakMap()
if (thread && moderationOpts) {
@@ -167,8 +168,8 @@ export function PostThread({
if (!threadViewPrefs || !thread) return null
return createThreadSkeleton(
sortThread(thread, threadViewPrefs, threadModerationCache),
hasSession,
sortThread(thread, threadViewPrefs, threadModerationCache, currentDid),
!!currentDid,
treeView,
threadModerationCache,
hiddenRepliesState !== HiddenRepliesState.Hide,
@@ -176,7 +177,7 @@ export function PostThread({
}, [
thread,
preferences?.threadViewPrefs,
hasSession,
currentDid,
treeView,
threadModerationCache,
hiddenRepliesState,
src/view/com/posts/Feed.tsx
+7 -5
View File
@@ -14,7 +14,6 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home'
import {DISCOVER_FEED_URI, KNOWN_SHUTDOWN_FEEDS} from '#/lib/constants'
import {logEvent, useGate} from '#/lib/statsig/statsig'
import {logger} from '#/logger'
@@ -181,6 +180,7 @@ let Feed = ({
ListHeaderComponent?: () => JSX.Element
extraData?: any
savedFeedConfig?: AppBskyActorDefs.SavedFeed
outsideHeaderOffset?: number
}): React.ReactNode => {
const theme = useTheme()
const {track} = useAnalytics()
@@ -212,8 +212,9 @@ let Feed = ({
isFetchingNextPage,
fetchNextPage,
} = usePostFeedQuery(feed, feedParams, opts)
if (data?.pages[0]) {
lastFetchRef.current = data?.pages[0].fetchedAt
const lastFetchedAt = data?.pages[0].fetchedAt
if (lastFetchedAt) {
lastFetchRef.current = lastFetchedAt
}
const isEmpty = React.useMemo(
() => !isFetching && !data?.pages?.some(page => page.slices.length),
@@ -358,7 +359,7 @@ let Feed = ({
...interstitial,
params: {variant},
// overwrite key with unique value
key: [interstitial.type, variant].join(':'),
key: [interstitial.type, variant, lastFetchedAt].join(':'),
}
if (arr.length > interstitial.slot) {
@@ -374,6 +375,7 @@ let Feed = ({
isFetched,
isError,
isEmpty,
lastFetchedAt,
data,
feedUri,
feedIsDiscover,
@@ -472,7 +474,7 @@ let Feed = ({
} else if (item.type === progressGuideInterstitialType) {
return <ProgressGuide />
} else if (item.type === 'slice') {
if (item.slice.rootUri === FALLBACK_MARKER_POST.post.uri) {
if (item.slice.isFallbackMarker) {
// HACK
// tell the user we fell back to discover
// see home.ts (feed api) for more info
src/view/com/posts/FeedItem.tsx
+4 -7
View File
@@ -345,11 +345,9 @@ let FeedItemInner = ({
postHref={href}
onOpenAuthor={onOpenAuthor}
/>
{!isThreadChild &&
showReplyTo &&
(parentAuthor || isParentBlocked) && (
<ReplyToLabel blocked={isParentBlocked} profile={parentAuthor} />
)}
{showReplyTo && (parentAuthor || isParentBlocked) && (
<ReplyToLabel blocked={isParentBlocked} profile={parentAuthor} />
)}
<LabelsOnMyPost post={post} />
<PostContent
moderation={moderation}
@@ -358,7 +356,7 @@ let FeedItemInner = ({
postAuthor={post.author}
onOpenEmbed={onOpenEmbed}
/>
{__DEV__ && gate('videos') && (
{gate('video_debug') && (
<VideoEmbed source="https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8" />
)}
<PostCtrls
@@ -509,7 +507,6 @@ const styles = StyleSheet.create({
paddingRight: 15,
// @ts-ignore web only -prf
cursor: 'pointer',
overflow: 'hidden',
},
replyLine: {
width: 2,
src/view/com/posts/FeedSlice.tsx
+27 -23
View File
@@ -18,7 +18,8 @@ let FeedSlice = ({
slice: FeedPostSlice
hideTopBorder?: boolean
}): React.ReactNode => {
if (slice.isThread && slice.items.length > 3) {
if (slice.isIncompleteThread && slice.items.length >= 3) {
const beforeLast = slice.items.length - 2
const last = slice.items.length - 1
return (
<>
@@ -26,36 +27,39 @@ let FeedSlice = ({
key={slice.items[0]._reactKey}
post={slice.items[0].post}
record={slice.items[0].record}
reason={slice.items[0].reason}
feedContext={slice.items[0].feedContext}
reason={slice.reason}
feedContext={slice.feedContext}
parentAuthor={slice.items[0].parentAuthor}
showReplyTo={true}
showReplyTo={false}
moderation={slice.items[0].moderation}
isThreadParent={isThreadParentAt(slice.items, 0)}
isThreadChild={isThreadChildAt(slice.items, 0)}
hideTopBorder={hideTopBorder}
isParentBlocked={slice.items[0].isParentBlocked}
/>
<ViewFullThread uri={slice.items[0].uri} />
<FeedItem
key={slice.items[1]._reactKey}
post={slice.items[1].post}
record={slice.items[1].record}
reason={slice.items[1].reason}
feedContext={slice.items[1].feedContext}
parentAuthor={slice.items[1].parentAuthor}
showReplyTo={false}
moderation={slice.items[1].moderation}
isThreadParent={isThreadParentAt(slice.items, 1)}
isThreadChild={isThreadChildAt(slice.items, 1)}
isParentBlocked={slice.items[1].isParentBlocked}
key={slice.items[beforeLast]._reactKey}
post={slice.items[beforeLast].post}
record={slice.items[beforeLast].record}
reason={undefined}
feedContext={slice.feedContext}
parentAuthor={slice.items[beforeLast].parentAuthor}
showReplyTo={
slice.items[beforeLast].parentAuthor?.did !==
slice.items[beforeLast].post.author.did
}
moderation={slice.items[beforeLast].moderation}
isThreadParent={isThreadParentAt(slice.items, beforeLast)}
isThreadChild={isThreadChildAt(slice.items, beforeLast)}
isParentBlocked={slice.items[beforeLast].isParentBlocked}
/>
<ViewFullThread slice={slice} />
<FeedItem
key={slice.items[last]._reactKey}
post={slice.items[last].post}
record={slice.items[last].record}
reason={slice.items[last].reason}
feedContext={slice.items[last].feedContext}
reason={undefined}
feedContext={slice.feedContext}
parentAuthor={slice.items[last].parentAuthor}
showReplyTo={false}
moderation={slice.items[last].moderation}
@@ -75,8 +79,8 @@ let FeedSlice = ({
key={item._reactKey}
post={slice.items[i].post}
record={slice.items[i].record}
reason={slice.items[i].reason}
feedContext={slice.items[i].feedContext}
reason={i === 0 ? slice.reason : undefined}
feedContext={slice.feedContext}
moderation={slice.items[i].moderation}
parentAuthor={slice.items[i].parentAuthor}
showReplyTo={i === 0}
@@ -95,12 +99,12 @@ let FeedSlice = ({
FeedSlice = memo(FeedSlice)
export {FeedSlice}
function ViewFullThread({slice}: {slice: FeedPostSlice}) {
function ViewFullThread({uri}: {uri: string}) {
const pal = usePalette('default')
const itemHref = React.useMemo(() => {
const urip = new AtUri(slice.rootUri)
const urip = new AtUri(uri)
return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
}, [slice.rootUri])
}, [uri])
return (
<Link style={[styles.viewFullThread]} href={itemHref} asAnchor noFeedback>
src/view/com/util/List.tsx
+5 -2
View File
@@ -5,7 +5,9 @@ import {runOnJS, useSharedValue} from 'react-native-reanimated'
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
import {usePalette} from '#/lib/hooks/usePalette'
import {useScrollHandlers} from '#/lib/ScrollContext'
import {useDedupe} from 'lib/hooks/useDedupe'
import {addStyle} from 'lib/styles'
import {updateActiveViewAsync} from '../../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
import {FlatList_INTERNAL} from './Views'
export type ListMethods = FlatList_INTERNAL
@@ -28,8 +30,6 @@ export type ListProps<ItemT> = Omit<
// Web only prop to contain the scroll to the container rather than the window
disableFullWindowScroll?: boolean
sideBorders?: boolean
// Web only prop to disable a perf optimization (which would otherwise be on).
disableContainStyle?: boolean
}
export type ListRef = React.MutableRefObject<FlatList_INTERNAL | null>
@@ -49,6 +49,7 @@ function ListImpl<ItemT>(
) {
const isScrolledDown = useSharedValue(false)
const pal = usePalette('default')
const dedupe = useDedupe()
function handleScrolledDownChange(didScrollDown: boolean) {
onScrolledDownChange?.(didScrollDown)
@@ -79,6 +80,8 @@ function ListImpl<ItemT>(
runOnJS(handleScrolledDownChange)(didScrollDown)
}
}
runOnJS(dedupe)(updateActiveViewAsync)
},
// Note: adding onMomentumBegin here makes simulator scroll
// lag on Android. So either don't add it, or figure out why.
src/view/com/util/List.web.tsx
+36 -21
View File
@@ -4,11 +4,10 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/rean
import {batchedUpdates} from '#/lib/batchedUpdates'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useScrollHandlers} from '#/lib/ScrollContext'
import {isSafari} from 'lib/browser'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {addStyle} from 'lib/styles'
import {addStyle} from '#/lib/styles'
export type ListMethods = any // TODO: Better types.
export type ListProps<ItemT> = Omit<
@@ -26,8 +25,6 @@ export type ListProps<ItemT> = Omit<
// Web only prop to contain the scroll to the container rather than the window
disableFullWindowScroll?: boolean
sideBorders?: boolean
// Web only prop to disable a perf optimization (which would otherwise be on).
disableContainStyle?: boolean
}
export type ListRef = React.MutableRefObject<any | null> // TODO: Better types.
@@ -60,7 +57,6 @@ function ListImpl<ItemT>(
extraData,
style,
sideBorders = true,
disableContainStyle,
...props
}: ListProps<ItemT>,
ref: React.Ref<ListMethods>,
@@ -344,10 +340,11 @@ function ListImpl<ItemT>(
style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
/>
{onStartReached && !isEmpty && (
<Visibility
<EdgeVisibility
root={disableFullWindowScroll ? nativeRef : null}
onVisibleChange={onHeadVisibilityChange}
topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
containerRef={containerRef}
/>
)}
{headerComponent}
@@ -363,16 +360,15 @@ function ListImpl<ItemT>(
renderItem={renderItem}
extraData={extraData}
onItemSeen={onItemSeen}
disableContainStyle={disableContainStyle}
/>
)
})}
{onEndReached && !isEmpty && (
<Visibility
<EdgeVisibility
root={disableFullWindowScroll ? nativeRef : null}
onVisibleChange={onTailVisibilityChange}
bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
key={data?.length}
containerRef={containerRef}
/>
)}
{footerComponent}
@@ -381,6 +377,34 @@ function ListImpl<ItemT>(
)
}
function EdgeVisibility({
root,
topMargin,
bottomMargin,
containerRef,
onVisibleChange,
}: {
root?: React.RefObject<HTMLDivElement> | null
topMargin?: string
bottomMargin?: string
containerRef: React.RefObject<Element>
onVisibleChange: (isVisible: boolean) => void
}) {
const [containerHeight, setContainerHeight] = React.useState(0)
useResizeObserver(containerRef, (w, h) => {
setContainerHeight(h)
})
return (
<Visibility
key={containerHeight}
root={root}
topMargin={topMargin}
bottomMargin={bottomMargin}
onVisibleChange={onVisibleChange}
/>
)
}
function useResizeObserver(
ref: React.RefObject<Element>,
onResize: undefined | ((w: number, h: number) => void),
@@ -413,7 +437,6 @@ let Row = function RowImpl<ItemT>({
renderItem,
extraData: _unused,
onItemSeen,
disableContainStyle,
}: {
item: ItemT
index: number
@@ -423,7 +446,6 @@ let Row = function RowImpl<ItemT>({
| ((data: {index: number; item: any; separators: any}) => React.ReactNode)
extraData: any
onItemSeen: ((item: any) => void) | undefined
disableContainStyle?: boolean
}): React.ReactNode {
const rowRef = React.useRef(null)
const intersectionTimeout = React.useRef<NodeJS.Timer | undefined>(undefined)
@@ -472,11 +494,8 @@ let Row = function RowImpl<ItemT>({
return null
}
const shouldDisableContainStyle = disableContainStyle || isSafari
return (
<View
style={shouldDisableContainStyle ? undefined : styles.contain}
ref={rowRef}>
<View ref={rowRef}>
{renderItem({item, index, separators: null as any})}
</View>
)
@@ -547,10 +566,6 @@ const styles = StyleSheet.create({
marginLeft: 'auto',
marginRight: 'auto',
},
contain: {
// @ts-ignore web only
contain: 'layout paint',
},
minHeightViewport: {
// @ts-ignore web only
minHeight: '100vh',
src/view/com/util/post-embeds/ActiveVideoContext.tsx
+80 -9
View File
@@ -1,37 +1,103 @@
import React, {useCallback, useId, useMemo, useState} from 'react'
import React, {
useCallback,
useEffect,
useId,
useMemo,
useRef,
useState,
} from 'react'
import {useWindowDimensions} from 'react-native'
import {isNative} from '#/platform/detection'
import {VideoPlayerProvider} from './VideoPlayerContext'
const ActiveVideoContext = React.createContext<{
activeViewId: string | null
setActiveView: (viewId: string, src: string) => void
sendViewPosition: (viewId: string, y: number) => void
} | null>(null)
export function ActiveVideoProvider({children}: {children: React.ReactNode}) {
const [activeViewId, setActiveViewId] = useState<string | null>(null)
const activeViewLocationRef = useRef(Infinity)
const [source, setSource] = useState<string | null>(null)
const {height: windowHeight} = useWindowDimensions()
// minimising re-renders by using refs
const manuallySetRef = useRef(false)
const activeViewIdRef = useRef(activeViewId)
useEffect(() => {
activeViewIdRef.current = activeViewId
}, [activeViewId])
const setActiveView = useCallback(
(viewId: string, src: string) => {
setActiveViewId(viewId)
setSource(src)
manuallySetRef.current = true
// we don't know the exact position, but it's definitely on screen
// so just guess that it's in the middle. Any value is fine
// so long as it's not offscreen
activeViewLocationRef.current = windowHeight / 2
},
[windowHeight],
)
const sendViewPosition = useCallback(
(viewId: string, y: number) => {
if (isNative) return
if (viewId === activeViewIdRef.current) {
activeViewLocationRef.current = y
} else {
if (
distanceToIdealPosition(y) <
distanceToIdealPosition(activeViewLocationRef.current)
) {
// if the old view was manually set, only usurp if the old view is offscreen
if (
manuallySetRef.current &&
withinViewport(activeViewLocationRef.current)
) {
return
}
setActiveViewId(viewId)
activeViewLocationRef.current = y
manuallySetRef.current = false
}
}
function distanceToIdealPosition(yPos: number) {
return Math.abs(yPos - windowHeight / 2.5)
}
function withinViewport(yPos: number) {
return yPos > 0 && yPos < windowHeight
}
},
[windowHeight],
)
const value = useMemo(
() => ({
activeViewId,
setActiveView: (viewId: string, src: string) => {
setActiveViewId(viewId)
setSource(src)
},
setActiveView,
sendViewPosition,
}),
[activeViewId],
[activeViewId, setActiveView, sendViewPosition],
)
return (
<ActiveVideoContext.Provider value={value}>
<VideoPlayerProvider source={source ?? ''} viewId={activeViewId}>
<VideoPlayerProvider source={source ?? ''}>
{children}
</VideoPlayerProvider>
</ActiveVideoContext.Provider>
)
}
export function useActiveVideoView() {
export function useActiveVideoView({source}: {source: string}) {
const context = React.useContext(ActiveVideoContext)
if (!context) {
throw new Error('useActiveVideo must be used within a ActiveVideoProvider')
@@ -41,7 +107,12 @@ export function useActiveVideoView() {
return {
active: context.activeViewId === id,
setActive: useCallback(
(source: string) => context.setActiveView(id, source),
() => context.setActiveView(id, source),
[context, id, source],
),
currentActiveView: context.activeViewId,
sendPosition: useCallback(
(y: number) => context.sendViewPosition(id, y),
[context, id],
),
}
src/view/com/util/post-embeds/VideoEmbed.tsx
+25 -18
View File
@@ -1,21 +1,20 @@
import React, {useCallback} from 'react'
import React from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {VideoEmbedInnerNative} from 'view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army'
import {useActiveVideoView} from './ActiveVideoContext'
import {VideoEmbedInner} from './VideoEmbedInner'
export function VideoEmbed({source}: {source: string}) {
const t = useTheme()
const {active, setActive} = useActiveVideoView()
const {active, setActive} = useActiveVideoView({source})
const {_} = useLingui()
const onPress = useCallback(() => setActive(source), [setActive, source])
return (
<View
style={[
@@ -26,19 +25,27 @@ export function VideoEmbed({source}: {source: string}) {
t.atoms.bg_contrast_25,
a.my_xs,
]}>
{active ? (
<VideoEmbedInner source={source} />
) : (
<Button
style={[a.flex_1, t.atoms.bg_contrast_25]}
onPress={onPress}
label={_(msg`Play video`)}
variant="ghost"
color="secondary"
size="large">
<ButtonIcon icon={PlayIcon} />
</Button>
)}
<VisibilityView
enabled={true}
onChangeStatus={isActive => {
if (isActive) {
setActive()
}
}}>
{active ? (
<VideoEmbedInnerNative />
) : (
<Button
style={[a.flex_1, t.atoms.bg_contrast_25]}
onPress={setActive}
label={_(msg`Play video`)}
variant="ghost"
color="secondary"
size="large">
<ButtonIcon icon={PlayIcon} />
</Button>
)}
</VisibilityView>
</View>
)
}
src/view/com/util/post-embeds/VideoEmbed.web.tsx
+192
View File
@@ -0,0 +1,192 @@
import React, {useCallback, useEffect, useRef, useState} from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {
HLSUnsupportedError,
VideoEmbedInnerWeb,
} from 'view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Text} from '#/components/Typography'
import {ErrorBoundary} from '../ErrorBoundary'
import {useActiveVideoView} from './ActiveVideoContext'
export function VideoEmbed({source}: {source: string}) {
const t = useTheme()
const ref = useRef<HTMLDivElement>(null)
const {active, setActive, sendPosition, currentActiveView} =
useActiveVideoView({source})
const [onScreen, setOnScreen] = useState(false)
useEffect(() => {
if (!ref.current) return
const observer = new IntersectionObserver(
entries => {
const entry = entries[0]
if (!entry) return
setOnScreen(entry.isIntersecting)
sendPosition(
entry.boundingClientRect.y + entry.boundingClientRect.height / 2,
)
},
{threshold: 0.5},
)
observer.observe(ref.current)
return () => observer.disconnect()
}, [sendPosition])
const [key, setKey] = useState(0)
const renderError = useCallback(
(error: unknown) => (
<VideoError error={error} retry={() => setKey(key + 1)} />
),
[key],
)
return (
<View
style={[
a.w_full,
{aspectRatio: 16 / 9},
t.atoms.bg_contrast_25,
a.rounded_sm,
a.my_xs,
]}>
<div
ref={ref}
style={{display: 'flex', flex: 1, cursor: 'default'}}
onClick={evt => evt.stopPropagation()}>
<ErrorBoundary renderError={renderError} key={key}>
<ViewportObserver
sendPosition={sendPosition}
isAnyViewActive={currentActiveView !== null}>
<VideoEmbedInnerWeb
source={source}
active={active}
setActive={setActive}
onScreen={onScreen}
/>
</ViewportObserver>
</ErrorBoundary>
</div>
</View>
)
}
/**
* Renders a 100vh tall div and watches it with an IntersectionObserver to
* send the position of the div when it's near the screen.
*/
function ViewportObserver({
children,
sendPosition,
isAnyViewActive,
}: {
children: React.ReactNode
sendPosition: (position: number) => void
isAnyViewActive?: boolean
}) {
const ref = useRef<HTMLDivElement>(null)
const [nearScreen, setNearScreen] = useState(false)
// Send position when scrolling. This is done with an IntersectionObserver
// observing a div of 100vh height
useEffect(() => {
if (!ref.current) return
const observer = new IntersectionObserver(
entries => {
const entry = entries[0]
if (!entry) return
const position =
entry.boundingClientRect.y + entry.boundingClientRect.height / 2
sendPosition(position)
setNearScreen(entry.isIntersecting)
},
{threshold: Array.from({length: 101}, (_, i) => i / 100)},
)
observer.observe(ref.current)
return () => observer.disconnect()
}, [sendPosition])
// In case scrolling hasn't started yet, send up the position
useEffect(() => {
if (ref.current && !isAnyViewActive) {
const rect = ref.current.getBoundingClientRect()
const position = rect.y + rect.height / 2
sendPosition(position)
}
}, [isAnyViewActive, sendPosition])
return (
<View style={[a.flex_1, a.flex_row]}>
{nearScreen && children}
<div
ref={ref}
style={{
position: 'absolute',
top: 'calc(50% - 50vh)',
left: '50%',
height: '100vh',
width: 1,
pointerEvents: 'none',
}}
/>
</View>
)
}
function VideoError({error, retry}: {error: unknown; retry: () => void}) {
const t = useTheme()
const {_} = useLingui()
const isHLS = error instanceof HLSUnsupportedError
return (
<View
style={[
a.flex_1,
t.atoms.bg_contrast_25,
a.justify_center,
a.align_center,
a.px_lg,
a.border,
t.atoms.border_contrast_low,
a.rounded_sm,
a.gap_lg,
]}>
<Text
style={[
a.text_center,
t.atoms.text_contrast_high,
a.text_md,
a.leading_snug,
{maxWidth: 300},
]}>
{isHLS ? (
<Trans>
Your browser does not support the video format. Please try a
different browser.
</Trans>
) : (
<Trans>
An error occurred while loading the video. Please try again later.
</Trans>
)}
</Text>
{!isHLS && (
<Button
onPress={retry}
size="small"
color="secondary_inverted"
variant="solid"
label={_(msg`Retry`)}>
<ButtonText>
<Trans>Retry</Trans>
</ButtonText>
</Button>
)}
</View>
)
}
src/view/com/util/post-embeds/VideoEmbedInner.tsx
-138
View File
@@ -1,138 +0,0 @@
import React, {useCallback, useEffect, useRef, useState} from 'react'
import {Pressable, StyleSheet, useWindowDimensions, View} from 'react-native'
import Animated, {
measure,
runOnJS,
useAnimatedRef,
useFrameCallback,
useSharedValue,
} from 'react-native-reanimated'
import {VideoPlayer, VideoView} from 'expo-video'
import {atoms as a} from '#/alf'
import {Text} from '#/components/Typography'
import {useVideoPlayer} from './VideoPlayerContext'
export const VideoEmbedInner = ({}: {source: string}) => {
const player = useVideoPlayer()
const aref = useAnimatedRef<Animated.View>()
const {height: windowHeight} = useWindowDimensions()
const hasLeftView = useSharedValue(false)
const ref = useRef<VideoView>(null)
const onEnterView = useCallback(() => {
if (player.status === 'readyToPlay') {
player.play()
}
}, [player])
const onLeaveView = useCallback(() => {
player.pause()
}, [player])
const enterFullscreen = useCallback(() => {
if (ref.current) {
ref.current.enterFullscreen()
}
}, [])
useFrameCallback(() => {
const measurement = measure(aref)
if (measurement) {
if (hasLeftView.value) {
// Check if the video is in view
if (
measurement.pageY >= 0 &&
measurement.pageY + measurement.height <= windowHeight
) {
runOnJS(onEnterView)()
hasLeftView.value = false
}
} else {
// Check if the video is out of view
if (
measurement.pageY + measurement.height < 0 ||
measurement.pageY > windowHeight
) {
runOnJS(onLeaveView)()
hasLeftView.value = true
}
}
}
})
return (
<Animated.View
style={[a.flex_1, a.relative]}
ref={aref}
collapsable={false}>
<VideoView
ref={ref}
player={player}
style={a.flex_1}
nativeControls={true}
/>
<VideoControls player={player} enterFullscreen={enterFullscreen} />
</Animated.View>
)
}
function VideoControls({
player,
enterFullscreen,
}: {
player: VideoPlayer
enterFullscreen: () => void
}) {
const [currentTime, setCurrentTime] = useState(Math.floor(player.currentTime))
useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(Math.floor(player.duration - player.currentTime))
// how often should we update the time?
// 1000 gets out of sync with the video time
}, 250)
return () => {
clearInterval(interval)
}
}, [player])
const minutes = Math.floor(currentTime / 60)
const seconds = String(currentTime % 60).padStart(2, '0')
return (
<View style={[a.absolute, a.inset_0]}>
<View style={styles.timeContainer} pointerEvents="none">
<Text style={styles.timeElapsed}>
{minutes}:{seconds}
</Text>
</View>
<Pressable
onPress={enterFullscreen}
style={a.flex_1}
accessibilityLabel="Video"
accessibilityHint="Tap to enter full screen"
accessibilityRole="button"
/>
</View>
)
}
const styles = StyleSheet.create({
timeContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
borderRadius: 6,
paddingHorizontal: 6,
paddingVertical: 3,
position: 'absolute',
left: 5,
bottom: 5,
},
timeElapsed: {
color: 'white',
fontSize: 12,
fontWeight: 'bold',
},
})
src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
-52
View File
@@ -1,52 +0,0 @@
import React, {useEffect, useRef} from 'react'
import Hls from 'hls.js'
import {atoms as a} from '#/alf'
export const VideoEmbedInner = ({source}: {source: string}) => {
const ref = useRef<HTMLVideoElement>(null)
// Use HLS.js to play HLS video
useEffect(() => {
if (ref.current) {
if (ref.current.canPlayType('application/vnd.apple.mpegurl')) {
ref.current.src = source
} else if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(source)
hls.attachMedia(ref.current)
} else {
// TODO: fallback
}
}
}, [source])
useEffect(() => {
if (ref.current) {
const observer = new IntersectionObserver(
([entry]) => {
if (ref.current) {
if (entry.isIntersecting) {
if (ref.current.paused) {
ref.current.play()
}
} else {
if (!ref.current.paused) {
ref.current.pause()
}
}
}
},
{threshold: 0},
)
observer.observe(ref.current)
return () => {
observer.disconnect()
}
}
}, [])
return <video ref={ref} style={a.flex_1} controls playsInline autoPlay loop />
}
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+96
View File
@@ -0,0 +1,96 @@
import React, {useEffect, useRef, useState} from 'react'
import {Pressable, View} from 'react-native'
import {VideoPlayer, VideoView} from 'expo-video'
import {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext'
import {android, atoms as a} from '#/alf'
import {Text} from '#/components/Typography'
export function VideoEmbedInnerNative() {
const player = useVideoPlayer()
const ref = useRef<VideoView>(null)
return (
<View style={[a.flex_1, a.relative]} collapsable={false}>
<VideoView
ref={ref}
player={player}
style={a.flex_1}
nativeControls={true}
/>
<Controls
player={player}
enterFullscreen={() => ref.current?.enterFullscreen()}
/>
</View>
)
}
function Controls({
player,
enterFullscreen,
}: {
player: VideoPlayer
enterFullscreen: () => void
}) {
const [duration, setDuration] = useState(() => Math.floor(player.duration))
const [currentTime, setCurrentTime] = useState(() =>
Math.floor(player.currentTime),
)
const timeRemaining = duration - currentTime
const minutes = Math.floor(timeRemaining / 60)
const seconds = String(timeRemaining % 60).padStart(2, '0')
useEffect(() => {
const interval = setInterval(() => {
// duration gets reset to 0 on loop
if (player.duration) setDuration(Math.floor(player.duration))
setCurrentTime(Math.floor(player.currentTime))
// how often should we update the time?
// 1000 gets out of sync with the video time
}, 250)
return () => {
clearInterval(interval)
}
}, [player])
if (isNaN(timeRemaining)) {
return null
}
return (
<View style={[a.absolute, a.inset_0]}>
<View
style={[
{
backgroundColor: 'rgba(0, 0, 0, 0.75',
borderRadius: 6,
paddingHorizontal: 6,
paddingVertical: 3,
position: 'absolute',
left: 5,
bottom: 5,
},
]}
pointerEvents="none">
<Text
style={[
{color: 'white', fontSize: 12},
a.font_bold,
android({lineHeight: 1.25}),
]}>
{minutes}:{seconds}
</Text>
</View>
<Pressable
onPress={enterFullscreen}
style={a.flex_1}
accessibilityLabel="Video"
accessibilityHint="Tap to enter full screen"
accessibilityRole="button"
/>
</View>
)
}
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.web.tsx
+3
View File
@@ -0,0 +1,3 @@
export function VideoEmbedInnerNative() {
throw new Error('VideoEmbedInnerNative may not be used on native.')
}
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.native.tsx
+3
View File
@@ -0,0 +1,3 @@
export function VideoEmbedInnerWeb() {
throw new Error('VideoEmbedInnerWeb may not be used on native.')
}
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
+99
View File
@@ -0,0 +1,99 @@
import React, {useEffect, useRef, useState} from 'react'
import {View} from 'react-native'
import Hls from 'hls.js'
import {atoms as a} from '#/alf'
import {Controls} from './VideoWebControls'
export function VideoEmbedInnerWeb({
source,
active,
setActive,
onScreen,
}: {
source: string
active?: boolean
setActive?: () => void
onScreen?: boolean
}) {
if (active == null || setActive == null || onScreen == null) {
throw new Error(
'active, setActive, and onScreen are required VideoEmbedInner props on web.',
)
}
const containerRef = useRef<HTMLDivElement>(null)
const ref = useRef<HTMLVideoElement>(null)
const [focused, setFocused] = useState(false)
const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
const hlsRef = useRef<Hls | undefined>(undefined)
useEffect(() => {
if (!ref.current) return
if (!Hls.isSupported()) throw new HLSUnsupportedError()
const hls = new Hls({capLevelToPlayerSize: true})
hlsRef.current = hls
hls.attachMedia(ref.current)
hls.loadSource(source)
// initial value, later on it's managed by Controls
hls.autoLevelCapping = 0
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (event, data) => {
if (data.subtitleTracks.length > 0) {
setHasSubtitleTrack(true)
}
})
return () => {
hlsRef.current = undefined
hls.detachMedia()
hls.destroy()
}
}, [source])
return (
<View
style={[
a.w_full,
a.rounded_sm,
// TODO: get from embed metadata
// max should be 1 / 1
{aspectRatio: 16 / 9},
a.overflow_hidden,
]}>
<div
ref={containerRef}
style={{width: '100%', height: '100%', display: 'flex'}}>
<video
ref={ref}
style={{width: '100%', height: '100%', objectFit: 'contain'}}
playsInline
preload="none"
loop
muted={!focused}
/>
<Controls
videoRef={ref}
hlsRef={hlsRef}
active={active}
setActive={setActive}
focused={focused}
setFocused={setFocused}
onScreen={onScreen}
fullscreenRef={containerRef}
hasSubtitleTrack={hasSubtitleTrack}
/>
</div>
</View>
)
}
export class HLSUnsupportedError extends Error {
constructor() {
super('HLS is not supported')
}
}
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
+16
View File
@@ -0,0 +1,16 @@
import React from 'react'
import type Hls from 'hls.js'
export function Controls({}: {
videoRef: React.RefObject<HTMLVideoElement>
hlsRef: React.RefObject<Hls | undefined>
active: boolean
setActive: () => void
focused: boolean
setFocused: (focused: boolean) => void
onScreen: boolean
fullscreenRef: React.RefObject<HTMLDivElement>
hasSubtitleTrack: boolean
}): React.ReactElement {
throw new Error('Web-only component')
}
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.web.tsx
+587
View File
@@ -0,0 +1,587 @@
import React, {
useCallback,
useEffect,
useRef,
useState,
useSyncExternalStore,
} from 'react'
import {Pressable, View} from 'react-native'
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import type Hls from 'hls.js'
import {isIPhoneWeb} from 'platform/detection'
import {
useAutoplayDisabled,
useSetSubtitlesEnabled,
useSubtitlesEnabled,
} from 'state/preferences'
import {atoms as a, useTheme, web} from '#/alf'
import {Button} from '#/components/Button'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {
ArrowsDiagonalIn_Stroke2_Corner0_Rounded as ArrowsInIcon,
ArrowsDiagonalOut_Stroke2_Corner0_Rounded as ArrowsOutIcon,
} from '#/components/icons/ArrowsDiagonal'
import {
CC_Filled_Corner0_Rounded as CCActiveIcon,
CC_Stroke2_Corner0_Rounded as CCInactiveIcon,
} from '#/components/icons/CC'
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
import {Pause_Filled_Corner0_Rounded as PauseIcon} from '#/components/icons/Pause'
import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
export function Controls({
videoRef,
hlsRef,
active,
setActive,
focused,
setFocused,
onScreen,
fullscreenRef,
hasSubtitleTrack,
}: {
videoRef: React.RefObject<HTMLVideoElement>
hlsRef: React.RefObject<Hls | undefined>
active: boolean
setActive: () => void
focused: boolean
setFocused: (focused: boolean) => void
onScreen: boolean
fullscreenRef: React.RefObject<HTMLDivElement>
hasSubtitleTrack: boolean
}) {
const {
play,
pause,
playing,
muted,
toggleMute,
togglePlayPause,
currentTime,
duration,
buffering,
error,
canPlay,
} = useVideoUtils(videoRef)
const t = useTheme()
const {_} = useLingui()
const subtitlesEnabled = useSubtitlesEnabled()
const setSubtitlesEnabled = useSetSubtitlesEnabled()
const {
state: hovered,
onIn: onMouseEnter,
onOut: onMouseLeave,
} = useInteractionState()
const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
const [interactingViaKeypress, setInteractingViaKeypress] = useState(false)
const onKeyDown = useCallback(() => {
setInteractingViaKeypress(true)
}, [])
useEffect(() => {
if (interactingViaKeypress) {
document.addEventListener('click', () => setInteractingViaKeypress(false))
return () => {
document.removeEventListener('click', () =>
setInteractingViaKeypress(false),
)
}
}
}, [interactingViaKeypress])
// pause + unfocus when another video is active
useEffect(() => {
if (!active) {
pause()
setFocused(false)
}
}, [active, pause, setFocused])
// autoplay/pause based on visibility
const autoplayDisabled = useAutoplayDisabled()
useEffect(() => {
if (active && !autoplayDisabled) {
if (onScreen) {
play()
} else {
pause()
}
}
}, [onScreen, pause, active, play, autoplayDisabled])
// use minimal quality when not focused
useEffect(() => {
if (!hlsRef.current) return
if (focused) {
// auto decide quality based on network conditions
hlsRef.current.autoLevelCapping = -1
} else {
hlsRef.current.autoLevelCapping = 0
}
}, [hlsRef, focused])
useEffect(() => {
if (!hlsRef.current) return
if (hasSubtitleTrack && subtitlesEnabled && canPlay) {
hlsRef.current.subtitleTrack = 0
} else {
hlsRef.current.subtitleTrack = -1
}
}, [hasSubtitleTrack, subtitlesEnabled, hlsRef, canPlay])
// clicking on any button should focus the player, if it's not already focused
const drawFocus = useCallback(() => {
if (!active) {
setActive()
}
setFocused(true)
}, [active, setActive, setFocused])
const onPressEmptySpace = useCallback(() => {
if (!focused) {
drawFocus()
} else {
togglePlayPause()
}
}, [togglePlayPause, drawFocus, focused])
const onPressPlayPause = useCallback(() => {
drawFocus()
togglePlayPause()
}, [drawFocus, togglePlayPause])
const onPressSubtitles = useCallback(() => {
drawFocus()
setSubtitlesEnabled(!subtitlesEnabled)
}, [drawFocus, setSubtitlesEnabled, subtitlesEnabled])
const onPressMute = useCallback(() => {
drawFocus()
toggleMute()
}, [drawFocus, toggleMute])
const onPressFullscreen = useCallback(() => {
drawFocus()
toggleFullscreen()
}, [drawFocus, toggleFullscreen])
const showControls =
(focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
return (
<div
style={{
position: 'absolute',
inset: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
}}
onClick={evt => {
evt.stopPropagation()
setInteractingViaKeypress(false)
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}>
<Pressable
accessibilityRole="button"
accessibilityHint={_(
focused
? msg`Unmute video`
: playing
? msg`Pause video`
: msg`Play video`,
)}
style={a.flex_1}
onPress={onPressEmptySpace}
/>
<View
style={[
a.flex_shrink_0,
a.w_full,
a.px_sm,
a.pt_sm,
a.pb_md,
a.gap_md,
a.flex_row,
a.align_center,
web({
background:
'linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7))',
}),
showControls ? {opacity: 1} : {opacity: 0},
]}>
<Button
label={_(playing ? msg`Pause` : msg`Play`)}
onPress={onPressPlayPause}
{...btnProps}>
{playing ? (
<PauseIcon fill={t.palette.white} width={20} />
) : (
<PlayIcon fill={t.palette.white} width={20} />
)}
</Button>
<View style={a.flex_1} />
<Text style={{color: t.palette.white}}>
{formatTime(currentTime)} / {formatTime(duration)}
</Text>
{hasSubtitleTrack && (
<Button
label={_(
subtitlesEnabled ? msg`Disable subtitles` : msg`Enable subtitles`,
)}
onPress={onPressSubtitles}
{...btnProps}>
{subtitlesEnabled ? (
<CCActiveIcon fill={t.palette.white} width={20} />
) : (
<CCInactiveIcon fill={t.palette.white} width={20} />
)}
</Button>
)}
<Button
label={_(muted ? msg`Unmute` : msg`Mute`)}
onPress={onPressMute}
{...btnProps}>
{muted ? (
<MuteIcon fill={t.palette.white} width={20} />
) : (
<UnmuteIcon fill={t.palette.white} width={20} />
)}
</Button>
{!isIPhoneWeb && (
<Button
label={_(muted ? msg`Unmute` : msg`Mute`)}
onPress={onPressFullscreen}
{...btnProps}>
{isFullscreen ? (
<ArrowsInIcon fill={t.palette.white} width={20} />
) : (
<ArrowsOutIcon fill={t.palette.white} width={20} />
)}
</Button>
)}
</View>
{(showControls || !focused) && (
<Animated.View
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(200)}
style={[
a.absolute,
{
height: 5,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(255,255,255,0.4)',
},
]}>
{duration > 0 && (
<View
style={[
a.h_full,
a.mr_auto,
{
backgroundColor: t.palette.white,
width: `${(currentTime / duration) * 100}%`,
opacity: 0.8,
},
]}
/>
)}
</Animated.View>
)}
{(buffering || error) && (
<Animated.View
pointerEvents="none"
entering={FadeIn.delay(1000).duration(200)}
exiting={FadeOut.duration(200)}
style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
{buffering && <Loader fill={t.palette.white} size="lg" />}
{error && (
<Text style={{color: t.palette.white}}>
<Trans>An error occurred</Trans>
</Text>
)}
</Animated.View>
)}
</div>
)
}
const btnProps = {
variant: 'ghost',
shape: 'round',
size: 'medium',
style: a.p_2xs,
hoverStyle: {backgroundColor: 'rgba(255, 255, 255, 0.1)'},
} as const
function formatTime(time: number) {
if (isNaN(time)) {
return '--'
}
time = Math.round(time)
const minutes = Math.floor(time / 60)
const seconds = String(time % 60).padStart(2, '0')
return `${minutes}:${seconds}`
}
function useVideoUtils(ref: React.RefObject<HTMLVideoElement>) {
const [playing, setPlaying] = useState(false)
const [muted, setMuted] = useState(true)
const [currentTime, setCurrentTime] = useState(0)
const [duration, setDuration] = useState(0)
const [buffering, setBuffering] = useState(false)
const [error, setError] = useState(false)
const [canPlay, setCanPlay] = useState(false)
const playWhenReadyRef = useRef(false)
useEffect(() => {
if (!ref.current) return
let bufferingTimeout: ReturnType<typeof setTimeout> | undefined
function round(num: number) {
return Math.round(num * 100) / 100
}
// Initial values
setCurrentTime(round(ref.current.currentTime) || 0)
setDuration(round(ref.current.duration) || 0)
setMuted(ref.current.muted)
setPlaying(!ref.current.paused)
const handleTimeUpdate = () => {
if (!ref.current) return
setCurrentTime(round(ref.current.currentTime) || 0)
}
const handleDurationChange = () => {
if (!ref.current) return
setDuration(round(ref.current.duration) || 0)
}
const handlePlay = () => {
setPlaying(true)
}
const handlePause = () => {
setPlaying(false)
}
const handleVolumeChange = () => {
if (!ref.current) return
setMuted(ref.current.muted)
}
const handleError = () => {
setError(true)
}
const handleCanPlay = () => {
setBuffering(false)
setCanPlay(true)
if (!ref.current) return
if (playWhenReadyRef.current) {
ref.current.play()
playWhenReadyRef.current = false
}
}
const handleCanPlayThrough = () => {
setBuffering(false)
}
const handleWaiting = () => {
if (bufferingTimeout) clearTimeout(bufferingTimeout)
bufferingTimeout = setTimeout(() => {
setBuffering(true)
}, 200) // Delay to avoid frequent buffering state changes
}
const handlePlaying = () => {
if (bufferingTimeout) clearTimeout(bufferingTimeout)
setBuffering(false)
setError(false)
}
const handleSeeking = () => {
setBuffering(true)
}
const handleSeeked = () => {
setBuffering(false)
}
const handleStalled = () => {
if (bufferingTimeout) clearTimeout(bufferingTimeout)
bufferingTimeout = setTimeout(() => {
setBuffering(true)
}, 200) // Delay to avoid frequent buffering state changes
}
const handleEnded = () => {
setPlaying(false)
setBuffering(false)
setError(false)
}
const abortController = new AbortController()
ref.current.addEventListener('timeupdate', handleTimeUpdate, {
signal: abortController.signal,
})
ref.current.addEventListener('durationchange', handleDurationChange, {
signal: abortController.signal,
})
ref.current.addEventListener('play', handlePlay, {
signal: abortController.signal,
})
ref.current.addEventListener('pause', handlePause, {
signal: abortController.signal,
})
ref.current.addEventListener('volumechange', handleVolumeChange, {
signal: abortController.signal,
})
ref.current.addEventListener('error', handleError, {
signal: abortController.signal,
})
ref.current.addEventListener('canplay', handleCanPlay, {
signal: abortController.signal,
})
ref.current.addEventListener('canplaythrough', handleCanPlayThrough, {
signal: abortController.signal,
})
ref.current.addEventListener('waiting', handleWaiting, {
signal: abortController.signal,
})
ref.current.addEventListener('playing', handlePlaying, {
signal: abortController.signal,
})
ref.current.addEventListener('seeking', handleSeeking, {
signal: abortController.signal,
})
ref.current.addEventListener('seeked', handleSeeked, {
signal: abortController.signal,
})
ref.current.addEventListener('stalled', handleStalled, {
signal: abortController.signal,
})
ref.current.addEventListener('ended', handleEnded, {
signal: abortController.signal,
})
return () => {
abortController.abort()
clearTimeout(bufferingTimeout)
}
}, [ref])
const play = useCallback(() => {
if (!ref.current) return
if (ref.current.ended) {
ref.current.currentTime = 0
}
if (ref.current.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
playWhenReadyRef.current = true
} else {
const promise = ref.current.play()
if (promise !== undefined) {
promise.catch(err => {
console.error('Error playing video:', err)
})
}
}
}, [ref])
const pause = useCallback(() => {
if (!ref.current) return
ref.current.pause()
playWhenReadyRef.current = false
}, [ref])
const togglePlayPause = useCallback(() => {
if (!ref.current) return
if (ref.current.paused) {
play()
} else {
pause()
}
}, [ref, play, pause])
const mute = useCallback(() => {
if (!ref.current) return
ref.current.muted = true
}, [ref])
const unmute = useCallback(() => {
if (!ref.current) return
ref.current.muted = false
}, [ref])
const toggleMute = useCallback(() => {
if (!ref.current) return
ref.current.muted = !ref.current.muted
}, [ref])
return {
play,
pause,
togglePlayPause,
duration,
currentTime,
playing,
muted,
mute,
unmute,
toggleMute,
buffering,
error,
canPlay,
}
}
function fullscreenSubscribe(onChange: () => void) {
document.addEventListener('fullscreenchange', onChange)
return () => document.removeEventListener('fullscreenchange', onChange)
}
function useFullscreen(ref: React.RefObject<HTMLElement>) {
const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () =>
Boolean(document.fullscreenElement),
)
const toggleFullscreen = useCallback(() => {
if (isFullscreen) {
document.exitFullscreen()
} else {
if (!ref.current) return
ref.current.requestFullscreen()
}
}, [isFullscreen, ref])
return [isFullscreen, toggleFullscreen] as const
}

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