diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 81a6d4e7..472b59d7 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -147,3 +147,4 @@ export const HITSLOP_10 = createHitslop(10)
export const HITSLOP_20 = createHitslop(20)
export const HITSLOP_30 = createHitslop(30)
export const BACK_HITSLOP = HITSLOP_30
+export const MAX_POST_LINES = 25
diff --git a/src/lib/strings/helpers.ts b/src/lib/strings/helpers.ts
index ef93a366..381ae32f 100644
--- a/src/lib/strings/helpers.ts
+++ b/src/lib/strings/helpers.ts
@@ -32,3 +32,8 @@ export function toHashCode(str: string, seed = 0): number {
return 4294967296 * (2097151 & h2) + (h1 >>> 0)
}
+
+export function countLines(str: string | undefined): number {
+ if (!str) return 0
+ return str.match(/\n/g)?.length ?? 0
+}
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 75d756d6..8976a7e2 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -8,7 +8,7 @@ import {
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {PostThreadItemModel} from 'state/models/content/post-thread-item'
-import {Link} from '../util/Link'
+import {Link, TextLink} from '../util/Link'
import {RichText} from '../util/text/RichText'
import {Text} from '../util/text/Text'
import {PostDropdownBtn} from '../util/forms/PostDropdownBtn'
@@ -18,7 +18,7 @@ import {s} from 'lib/styles'
import {niceDate} from 'lib/strings/time'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
-import {pluralize} from 'lib/strings/helpers'
+import {countLines, pluralize} from 'lib/strings/helpers'
import {isEmbedByEmbedder} from 'lib/embeds'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {useStores} from 'state/index'
@@ -35,6 +35,7 @@ import {formatCount} from '../util/numeric/format'
import {TimeElapsed} from 'view/com/util/TimeElapsed'
import {makeProfileLink} from 'lib/routes/links'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {MAX_POST_LINES} from 'lib/constants'
export const PostThreadItem = observer(function PostThreadItem({
item,
@@ -50,6 +51,9 @@ export const PostThreadItem = observer(function PostThreadItem({
const pal = usePalette('default')
const store = useStores()
const [deleted, setDeleted] = React.useState(false)
+ const [limitLines, setLimitLines] = React.useState(
+ countLines(item.richText?.text) >= MAX_POST_LINES,
+ )
const styles = useStyles()
const record = item.postRecord
const hasEngagement = item.post.likeCount || item.post.repostCount
@@ -151,6 +155,10 @@ export const PostThreadItem = observer(function PostThreadItem({
)
}, [item, store])
+ const onPressShowMore = React.useCallback(() => {
+ setLimitLines(false)
+ }, [setLimitLines])
+
if (!record) {
return
}
@@ -489,9 +497,18 @@ export const PostThreadItem = observer(function PostThreadItem({
richText={item.richText}
style={[pal.text, s.flex1]}
lineHeight={1.3}
+ numberOfLines={limitLines ? MAX_POST_LINES : undefined}
/>
) : undefined}
+ {limitLines ? (
+
+ ) : undefined}
{item.post.embed && (
= MAX_POST_LINES,
+ )
const itemUri = item.post.uri
const itemCid = item.post.cid
const itemUrip = new AtUri(item.post.uri)
@@ -182,6 +186,10 @@ const PostLoaded = observer(function PostLoadedImpl({
)
}, [item, setDeleted, store])
+ const onPressShowMore = React.useCallback(() => {
+ setLimitLines(false)
+ }, [setLimitLines])
+
return (
{showReplyLine && }
@@ -239,10 +247,19 @@ const PostLoaded = observer(function PostLoadedImpl({
type="post-text"
richText={item.richText}
lineHeight={1.3}
+ numberOfLines={limitLines ? MAX_POST_LINES : undefined}
style={s.flex1}
/>
) : undefined}
+ {limitLines ? (
+
+ ) : undefined}
{item.post.embed ? (
= MAX_POST_LINES,
+ )
const record = item.postRecord
const itemUri = item.post.uri
const itemCid = item.post.cid
@@ -136,6 +141,10 @@ export const FeedItem = observer(function FeedItemImpl({
)
}, [track, item, setDeleted, store])
+ const onPressShowMore = React.useCallback(() => {
+ setLimitLines(false)
+ }, [setLimitLines])
+
const outerStyles = [
styles.outer,
pal.view,
@@ -307,10 +316,19 @@ export const FeedItem = observer(function FeedItemImpl({
type="post-text"
richText={item.richText}
lineHeight={1.3}
+ numberOfLines={limitLines ? MAX_POST_LINES : undefined}
style={s.flex1}
/>
) : undefined}
+ {limitLines ? (
+
+ ) : undefined}
{item.post.embed ? (
{text}