Merge branch 'estrattonbailey-eric/reply-settings-toggle' into main
commit
46c65958bc
|
@ -1,4 +1,9 @@
|
|||
import {AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api'
|
||||
import {
|
||||
AppBskyFeedDefs,
|
||||
AppBskyFeedPost,
|
||||
AppBskyEmbedRecordWithMedia,
|
||||
AppBskyEmbedRecord,
|
||||
} from '@atproto/api'
|
||||
import lande from 'lande'
|
||||
import {hasProp} from 'lib/type-guards'
|
||||
import {LANGUAGES_MAP_CODE2} from '../../locale/languages'
|
||||
|
@ -156,6 +161,38 @@ export class FeedTuner {
|
|||
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--) {
|
||||
const reason = slices[i].rootItem.reason
|
||||
if (AppBskyFeedDefs.isReasonRepost(reason)) {
|
||||
slices.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return slices
|
||||
}
|
||||
|
||||
static removeQuotePosts(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
|
||||
for (let i = slices.length - 1; i >= 0; i--) {
|
||||
const embed = slices[i].rootItem.post.embed
|
||||
if (
|
||||
AppBskyEmbedRecord.isView(embed) ||
|
||||
AppBskyEmbedRecordWithMedia.isView(embed)
|
||||
) {
|
||||
slices.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return slices
|
||||
}
|
||||
|
||||
static dedupReposts(
|
||||
tuner: FeedTuner,
|
||||
slices: FeedViewPostsSlice[],
|
||||
|
@ -178,23 +215,25 @@ export class FeedTuner {
|
|||
return slices
|
||||
}
|
||||
|
||||
static likedRepliesOnly(
|
||||
tuner: FeedTuner,
|
||||
slices: FeedViewPostsSlice[],
|
||||
): FeedViewPostsSlice[] {
|
||||
// remove any replies without at least 2 likes
|
||||
for (let i = slices.length - 1; i >= 0; i--) {
|
||||
if (slices[i].isFullThread || !slices[i].isReply) {
|
||||
continue
|
||||
}
|
||||
static likedRepliesOnly({repliesThreshold}: {repliesThreshold: number}) {
|
||||
return (
|
||||
tuner: FeedTuner,
|
||||
slices: FeedViewPostsSlice[],
|
||||
): FeedViewPostsSlice[] => {
|
||||
// remove any replies without at least repliesThreshold likes
|
||||
for (let i = slices.length - 1; i >= 0; i--) {
|
||||
if (slices[i].isFullThread || !slices[i].isReply) {
|
||||
continue
|
||||
}
|
||||
|
||||
const item = slices[i].rootItem
|
||||
const isRepost = Boolean(item.reason)
|
||||
if (!isRepost && (item.post.likeCount || 0) < 2) {
|
||||
slices.splice(i, 1)
|
||||
const item = slices[i].rootItem
|
||||
const isRepost = Boolean(item.reason)
|
||||
if (!isRepost && (item.post.likeCount || 0) < repliesThreshold) {
|
||||
slices.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return slices
|
||||
}
|
||||
return slices
|
||||
}
|
||||
|
||||
static preferredLangOnly(langsCode2: string[]) {
|
||||
|
|
|
@ -115,6 +115,12 @@ export class PostsFeedModel {
|
|||
}
|
||||
|
||||
get feedTuners() {
|
||||
const areRepliesEnabled = this.rootStore.preferences.homeFeedRepliesEnabled
|
||||
const repliesThreshold = this.rootStore.preferences.homeFeedRepliesThreshold
|
||||
const areRepostsEnabled = this.rootStore.preferences.homeFeedRepostsEnabled
|
||||
const areQuotePostsEnabled =
|
||||
this.rootStore.preferences.homeFeedQuotePostsEnabled
|
||||
|
||||
if (this.feedType === 'custom') {
|
||||
return [
|
||||
FeedTuner.dedupReposts,
|
||||
|
@ -124,7 +130,13 @@ export class PostsFeedModel {
|
|||
]
|
||||
}
|
||||
if (this.feedType === 'home') {
|
||||
return [FeedTuner.dedupReposts, FeedTuner.likedRepliesOnly]
|
||||
return [
|
||||
areRepostsEnabled && FeedTuner.dedupReposts,
|
||||
!areRepostsEnabled && FeedTuner.removeReposts,
|
||||
areRepliesEnabled && FeedTuner.likedRepliesOnly({repliesThreshold}),
|
||||
!areRepliesEnabled && FeedTuner.removeReplies,
|
||||
!areQuotePostsEnabled && FeedTuner.removeQuotePosts,
|
||||
].filter(Boolean)
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
|
|
@ -51,6 +51,10 @@ export class PreferencesModel {
|
|||
contentLabels = new LabelPreferencesModel()
|
||||
savedFeeds: string[] = []
|
||||
pinnedFeeds: string[] = []
|
||||
homeFeedRepliesEnabled: boolean = true
|
||||
homeFeedRepliesThreshold: number = 2
|
||||
homeFeedRepostsEnabled: boolean = true
|
||||
homeFeedQuotePostsEnabled: boolean = true
|
||||
|
||||
// used to linearize async modifications to state
|
||||
lock = new AwaitLock()
|
||||
|
@ -65,6 +69,10 @@ export class PreferencesModel {
|
|||
contentLabels: this.contentLabels,
|
||||
savedFeeds: this.savedFeeds,
|
||||
pinnedFeeds: this.pinnedFeeds,
|
||||
homeFeedRepliesEnabled: this.homeFeedRepliesEnabled,
|
||||
homeFeedRepliesThreshold: this.homeFeedRepliesThreshold,
|
||||
homeFeedRepostsEnabled: this.homeFeedRepostsEnabled,
|
||||
homeFeedQuotePostsEnabled: this.homeFeedQuotePostsEnabled,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -102,6 +110,30 @@ export class PreferencesModel {
|
|||
) {
|
||||
this.pinnedFeeds = v.pinnedFeeds
|
||||
}
|
||||
if (
|
||||
hasProp(v, 'homeFeedRepliesEnabled') &&
|
||||
typeof v.homeFeedRepliesEnabled === 'boolean'
|
||||
) {
|
||||
this.homeFeedRepliesEnabled = v.homeFeedRepliesEnabled
|
||||
}
|
||||
if (
|
||||
hasProp(v, 'homeFeedRepliesThreshold') &&
|
||||
typeof v.homeFeedRepliesThreshold === 'number'
|
||||
) {
|
||||
this.homeFeedRepliesThreshold = v.homeFeedRepliesThreshold
|
||||
}
|
||||
if (
|
||||
hasProp(v, 'homeFeedRepostsEnabled') &&
|
||||
typeof v.homeFeedRepostsEnabled === 'boolean'
|
||||
) {
|
||||
this.homeFeedRepostsEnabled = v.homeFeedRepostsEnabled
|
||||
}
|
||||
if (
|
||||
hasProp(v, 'homeFeedQuotePostsEnabled') &&
|
||||
typeof v.homeFeedQuotePostsEnabled === 'boolean'
|
||||
) {
|
||||
this.homeFeedQuotePostsEnabled = v.homeFeedQuotePostsEnabled
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -380,4 +412,20 @@ export class PreferencesModel {
|
|||
this.pinnedFeeds.filter(uri => uri !== v),
|
||||
)
|
||||
}
|
||||
|
||||
toggleHomeFeedRepliesEnabled() {
|
||||
this.homeFeedRepliesEnabled = !this.homeFeedRepliesEnabled
|
||||
}
|
||||
|
||||
setHomeFeedRepliesThreshold(threshold: number) {
|
||||
this.homeFeedRepliesThreshold = threshold
|
||||
}
|
||||
|
||||
toggleHomeFeedRepostsEnabled() {
|
||||
this.homeFeedRepostsEnabled = !this.homeFeedRepostsEnabled
|
||||
}
|
||||
|
||||
toggleHomeFeedQuotePostsEnabled() {
|
||||
this.homeFeedQuotePostsEnabled = !this.homeFeedQuotePostsEnabled
|
||||
}
|
||||
}
|
||||
|
|
|
@ -111,6 +111,10 @@ export interface ContentLanguagesSettingsModal {
|
|||
name: 'content-languages-settings'
|
||||
}
|
||||
|
||||
export interface PreferencesHomeFeed {
|
||||
name: 'preferences-home-feed'
|
||||
}
|
||||
|
||||
export type Modal =
|
||||
// Account
|
||||
| AddAppPasswordModal
|
||||
|
@ -121,6 +125,7 @@ export type Modal =
|
|||
// Curation
|
||||
| ContentFilteringSettingsModal
|
||||
| ContentLanguagesSettingsModal
|
||||
| PreferencesHomeFeed
|
||||
|
||||
// Moderation
|
||||
| ReportAccountModal
|
||||
|
|
|
@ -24,6 +24,7 @@ import * as InviteCodesModal from './InviteCodes'
|
|||
import * as AddAppPassword from './AddAppPasswords'
|
||||
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
||||
import * as ContentLanguagesSettingsModal from './ContentLanguagesSettings'
|
||||
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
|
||||
|
||||
const DEFAULT_SNAPPOINTS = ['90%']
|
||||
|
||||
|
@ -105,6 +106,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
} else if (activeModal?.name === 'content-languages-settings') {
|
||||
snapPoints = ContentLanguagesSettingsModal.snapPoints
|
||||
element = <ContentLanguagesSettingsModal.Component />
|
||||
} else if (activeModal?.name === 'preferences-home-feed') {
|
||||
snapPoints = PreferencesHomeFeed.snapPoints
|
||||
element = <PreferencesHomeFeed.Component />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
|
|
@ -24,6 +24,7 @@ import * as InviteCodesModal from './InviteCodes'
|
|||
import * as AddAppPassword from './AddAppPasswords'
|
||||
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
||||
import * as ContentLanguagesSettingsModal from './ContentLanguagesSettings'
|
||||
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
|
||||
|
||||
export const ModalsContainer = observer(function ModalsContainer() {
|
||||
const store = useStores()
|
||||
|
@ -97,6 +98,8 @@ function Modal({modal}: {modal: ModalIface}) {
|
|||
element = <AltTextImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'edit-image') {
|
||||
element = <EditImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'preferences-home-feed') {
|
||||
element = <PreferencesHomeFeed.Component />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
|
|
@ -0,0 +1,176 @@
|
|||
import React, {useState} from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Slider} from '@miblanchard/react-native-slider'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {useStores} from 'state/index'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {isWeb, isDesktopWeb} from 'platform/detection'
|
||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||
import {ScrollView} from 'view/com/modals/util'
|
||||
|
||||
export const snapPoints = ['90%']
|
||||
|
||||
function RepliesThresholdInput({enabled}: {enabled: boolean}) {
|
||||
const store = useStores()
|
||||
const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold)
|
||||
|
||||
return (
|
||||
<View style={[s.mt10, !enabled && styles.dimmed]}>
|
||||
<Text type="xs">
|
||||
{value === 0
|
||||
? `Show all replies`
|
||||
: `Show replies with greater than ${value} ${
|
||||
value > 1 ? `likes` : `like`
|
||||
}`}
|
||||
</Text>
|
||||
<Slider
|
||||
value={value}
|
||||
onValueChange={(v: number | number[]) => {
|
||||
const threshold = Math.floor(Array.isArray(v) ? v[0] : v)
|
||||
setValue(threshold)
|
||||
store.preferences.setHomeFeedRepliesThreshold(threshold)
|
||||
}}
|
||||
minimumValue={0}
|
||||
maximumValue={25}
|
||||
containerStyle={isWeb ? undefined : s.flex1}
|
||||
disabled={!enabled}
|
||||
thumbTintColor={colors.blue3}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export const Component = observer(function Component() {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
|
||||
return (
|
||||
<View
|
||||
testID="preferencesHomeFeedModal"
|
||||
style={[pal.view, styles.container]}>
|
||||
<View style={styles.titleSection}>
|
||||
<Text type="title-lg" style={[pal.text, styles.title]}>
|
||||
Home Feed Preferences
|
||||
</Text>
|
||||
<Text type="xl" style={[pal.textLight, styles.description]}>
|
||||
Fine-tune the content you see on your home screen.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView>
|
||||
<View style={styles.cardsContainer}>
|
||||
<View style={[styles.card]}>
|
||||
<Text type="title-sm" style={[s.pb5]}>
|
||||
Show Replies
|
||||
</Text>
|
||||
<Text style={[s.pb10]}>
|
||||
Adjust the number of likes a reply must have to be shown in your
|
||||
feed.
|
||||
</Text>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'}
|
||||
isSelected={store.preferences.homeFeedRepliesEnabled}
|
||||
onPress={store.preferences.toggleHomeFeedRepliesEnabled}
|
||||
/>
|
||||
|
||||
<RepliesThresholdInput
|
||||
enabled={store.preferences.homeFeedRepliesEnabled}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[styles.card]}>
|
||||
<Text type="title-sm" style={[s.pb5]}>
|
||||
Show Reposts
|
||||
</Text>
|
||||
<Text style={[s.pb10]}>
|
||||
Disable this setting to hide all reposts from your feed.
|
||||
</Text>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'}
|
||||
isSelected={store.preferences.homeFeedRepostsEnabled}
|
||||
onPress={store.preferences.toggleHomeFeedRepostsEnabled}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[styles.card]}>
|
||||
<Text type="title-sm" style={[s.pb5]}>
|
||||
Show Quote Posts
|
||||
</Text>
|
||||
<Text style={[s.pb10]}>
|
||||
Disable this setting to hide all quote posts from your feed.
|
||||
Reposts will still be visible.
|
||||
</Text>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'}
|
||||
isSelected={store.preferences.homeFeedQuotePostsEnabled}
|
||||
onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View style={[styles.btnContainer, pal.borderDark]}>
|
||||
<TouchableOpacity
|
||||
testID="confirmBtn"
|
||||
onPress={() => {
|
||||
store.shell.closeModal()
|
||||
}}
|
||||
style={[styles.btn]}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Confirm"
|
||||
accessibilityHint="">
|
||||
<Text style={[s.white, s.bold, s.f18]}>Done</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingBottom: isDesktopWeb ? 0 : 60,
|
||||
},
|
||||
titleSection: {
|
||||
padding: 20,
|
||||
paddingBottom: 30,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
marginBottom: 5,
|
||||
},
|
||||
description: {
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 32,
|
||||
},
|
||||
cardsContainer: {
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
card: {
|
||||
padding: 16,
|
||||
backgroundColor: s.gray1.color,
|
||||
borderRadius: 10,
|
||||
marginBottom: 20,
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.blue3,
|
||||
},
|
||||
btnContainer: {
|
||||
paddingTop: 20,
|
||||
paddingHorizontal: 20,
|
||||
borderTopWidth: isDesktopWeb ? 0 : 1,
|
||||
},
|
||||
dimmed: {
|
||||
opacity: 0.3,
|
||||
},
|
||||
})
|
|
@ -67,8 +67,9 @@ import {faSatelliteDish} from '@fortawesome/free-solid-svg-icons/faSatelliteDish
|
|||
import {faShare} from '@fortawesome/free-solid-svg-icons/faShare'
|
||||
import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
|
||||
import {faShield} from '@fortawesome/free-solid-svg-icons/faShield'
|
||||
import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus'
|
||||
import {faSignal} from '@fortawesome/free-solid-svg-icons/faSignal'
|
||||
import {faSliders} from '@fortawesome/free-solid-svg-icons/faSliders'
|
||||
import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus'
|
||||
import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket'
|
||||
import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan'
|
||||
import {faUser} from '@fortawesome/free-regular-svg-icons/faUser'
|
||||
|
@ -153,8 +154,9 @@ export function setup() {
|
|||
faShare,
|
||||
faShareFromSquare,
|
||||
faShield,
|
||||
faSquarePlus,
|
||||
faSignal,
|
||||
faSliders,
|
||||
faSquarePlus,
|
||||
faUser,
|
||||
faUsers,
|
||||
faUserCheck,
|
||||
|
|
|
@ -166,6 +166,12 @@ export const SettingsScreen = withAuthRequired(
|
|||
Toast.show('Copied build version to clipboard')
|
||||
}, [])
|
||||
|
||||
const openPreferencesModal = React.useCallback(() => {
|
||||
store.shell.openModal({
|
||||
name: 'preferences-home-feed',
|
||||
})
|
||||
}, [store])
|
||||
|
||||
return (
|
||||
<View style={[s.hContentRegion]} testID="settingsScreen">
|
||||
<ViewHeader title="Settings" />
|
||||
|
@ -346,6 +352,23 @@ export const SettingsScreen = withAuthRequired(
|
|||
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
||||
Advanced
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
testID="preferencesHomeFeedModalButton"
|
||||
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
||||
onPress={openPreferencesModal}
|
||||
accessibilityRole="button"
|
||||
accessibilityHint="Open home feed preferences modal"
|
||||
accessibilityLabel="Opens the home feed preferences modal">
|
||||
<View style={[styles.iconContainer, pal.btn]}>
|
||||
<FontAwesomeIcon
|
||||
icon="sliders"
|
||||
style={pal.text as FontAwesomeIconStyle}
|
||||
/>
|
||||
</View>
|
||||
<Text type="lg" style={pal.text}>
|
||||
Home Feed Preferences
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Link
|
||||
testID="appPasswordBtn"
|
||||
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
||||
|
|
Loading…
Reference in New Issue