- {translation?.content || content}
+ {getArticleRendererContent({ content, translationContent: translation?.content })}
)
}
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/content-selection.test.ts b/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/content-selection.test.ts
new file mode 100644
index 000000000..0e55a4e0d
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/content-selection.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest"
+
+import { getArticleRendererContent } from "./content-selection"
+
+describe("getArticleRendererContent", () => {
+ test("keeps resolved readability content instead of overriding it with entry content translation", () => {
+ expect(
+ getArticleRendererContent({
+ content: "
readability content",
+ translationContent: "
entry content translation
",
+ }),
+ ).toBe("
readability content")
+ })
+})
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/content-selection.ts b/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/content-selection.ts
new file mode 100644
index 000000000..e352d0961
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/content-selection.ts
@@ -0,0 +1,6 @@
+export const getArticleRendererContent = ({
+ content,
+}: {
+ content?: Nullable
+ translationContent?: string
+}) => content
diff --git a/apps/desktop/layer/renderer/src/modules/player/entry-tts.test.ts b/apps/desktop/layer/renderer/src/modules/player/entry-tts.test.ts
index ee3dd2fef..8b84a7bcb 100644
--- a/apps/desktop/layer/renderer/src/modules/player/entry-tts.test.ts
+++ b/apps/desktop/layer/renderer/src/modules/player/entry-tts.test.ts
@@ -4,18 +4,33 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
import { playEntryTts } from "./entry-tts"
const {
+ audioElementMock,
getEntryMock,
getGeneralSettingsMock,
+ getAudioPlayerAtomValueMock,
getReadabilityStatusMock,
legacyTtsMock,
mountMock,
+ setAudioPlayerAtomValueMock,
toastFetchErrorMock,
} = vi.hoisted(() => ({
+ audioElementMock: {
+ addEventListener: vi.fn(),
+ currentTime: 0,
+ load: vi.fn(),
+ pause: vi.fn(),
+ play: vi.fn(() => Promise.resolve()),
+ removeEventListener: vi.fn(),
+ src: "",
+ srcObject: null as MediaStream | null,
+ },
getEntryMock: vi.fn(),
getGeneralSettingsMock: vi.fn(),
+ getAudioPlayerAtomValueMock: vi.fn(() => ({})),
getReadabilityStatusMock: vi.fn(),
legacyTtsMock: vi.fn(),
mountMock: vi.fn(),
+ setAudioPlayerAtomValueMock: vi.fn(),
toastFetchErrorMock: vi.fn(),
}))
@@ -39,10 +54,11 @@ vi.mock("~/atoms/settings/general", () => ({
vi.mock("~/atoms/player", () => ({
AudioPlayer: {
+ audio: audioElementMock,
mount: mountMock,
},
- getAudioPlayerAtomValue: vi.fn(() => ({})),
- setAudioPlayerAtomValue: vi.fn(),
+ getAudioPlayerAtomValue: getAudioPlayerAtomValueMock,
+ setAudioPlayerAtomValue: setAudioPlayerAtomValueMock,
}))
vi.mock("~/lib/api-client", () => ({
@@ -64,6 +80,51 @@ describe("entry tts", () => {
const createObjectURLMock = vi.fn(() => "blob:tts-audio")
const revokeObjectURLMock = vi.fn()
+ const createAudioBufferMock = (duration: number, sampleRate = 1000) =>
+ ({
+ copyFromChannel: (destination: Float32Array) => {
+ destination.fill(0)
+ },
+ copyToChannel: vi.fn(),
+ duration,
+ length: Math.round(duration * sampleRate),
+ numberOfChannels: 1,
+ sampleRate,
+ }) as unknown as AudioBuffer
+
+ const waitForExpectation = async (assertion: () => void) => {
+ const deadline = Date.now() + 1000
+ let lastError: unknown
+
+ while (Date.now() < deadline) {
+ try {
+ assertion()
+ return
+ } catch (error) {
+ lastError = error
+ await new Promise((resolve) => setTimeout(resolve, 0))
+ }
+ }
+
+ throw lastError
+ }
+
+ const createStreamingResponse = () =>
+ new Response(
+ new ReadableStream({
+ start(controller) {
+ controller.enqueue(new Uint8Array([1, 2, 3]))
+ controller.close()
+ },
+ }),
+ {
+ headers: {
+ "content-type": "audio/mpeg",
+ },
+ status: 200,
+ },
+ )
+
beforeEach(() => {
vi.stubGlobal("fetch", fetchMock)
vi.stubGlobal(
@@ -84,6 +145,7 @@ describe("entry tts", () => {
getGeneralSettingsMock.mockReturnValue({
voice: "en-US-AvaMultilingualNeural",
})
+ getAudioPlayerAtomValueMock.mockReturnValue({})
getReadabilityStatusMock.mockReturnValue({})
fetchMock.mockResolvedValue(
new Response(new Blob(["audio"], { type: "audio/mpeg" }), {
@@ -135,4 +197,56 @@ describe("entry tts", () => {
it("uses the new default voice", () => {
expect(defaultGeneralSettings.voice).toBe("en-US-AvaMultilingualNeural")
})
+
+ it("schedules decoded stream chunks from the current audio context time", async () => {
+ const sourceStartTimes: number[] = []
+ const audioContexts: Array<{ currentTime: number }> = []
+
+ class FakeAudioContext {
+ currentTime = 0
+
+ constructor() {
+ audioContexts.push(this)
+ }
+
+ close = vi.fn(() => Promise.resolve())
+ createBuffer = (_channels: number, frameCount: number, sampleRate: number) =>
+ createAudioBufferMock(frameCount / sampleRate, sampleRate)
+ createBufferSource = () => ({
+ buffer: null as AudioBuffer | null,
+ connect: vi.fn(),
+ start: vi.fn((time: number) => {
+ sourceStartTimes.push(time)
+ }),
+ })
+ createMediaStreamDestination = () => ({
+ stream: {} as MediaStream,
+ })
+ decodeAudioData = vi.fn(async () => {
+ this.currentTime = 3
+ return createAudioBufferMock(1)
+ })
+ resume = vi.fn(() => Promise.resolve())
+ suspend = vi.fn(() => Promise.resolve())
+ }
+
+ vi.stubGlobal("window", {
+ ...window,
+ AudioContext: FakeAudioContext,
+ clearInterval: globalThis.clearInterval,
+ setInterval: globalThis.setInterval,
+ setTimeout: (handler: TimerHandler, timeout?: number, ...args: unknown[]) => {
+ audioContexts[0]!.currentTime = 10
+ return globalThis.setTimeout(handler, timeout, ...args)
+ },
+ })
+ fetchMock.mockResolvedValue(createStreamingResponse())
+
+ await playEntryTts("entry-1", { toastTitle: "Play TTS" })
+
+ await waitForExpectation(() => {
+ expect(sourceStartTimes).toHaveLength(1)
+ })
+ expect(sourceStartTimes[0]).toBeGreaterThanOrEqual(3)
+ })
})
diff --git a/apps/desktop/layer/renderer/src/modules/player/entry-tts.ts b/apps/desktop/layer/renderer/src/modules/player/entry-tts.ts
index bc65f0eaa..911be17b1 100644
--- a/apps/desktop/layer/renderer/src/modules/player/entry-tts.ts
+++ b/apps/desktop/layer/renderer/src/modules/player/entry-tts.ts
@@ -198,16 +198,17 @@ const createAudioContextStreamingHandle = (
const source = audioContext.createBufferSource()
source.buffer = segmentBuffer
source.connect(destination)
- source.start(scheduledTime)
+ const segmentStartTime = Math.max(scheduledTime, audioContext.currentTime)
+ source.start(segmentStartTime)
if (decodedDuration === 0) {
- playbackStartTime = scheduledTime
+ playbackStartTime = segmentStartTime
if (progressTimer === null) {
progressTimer = window.setInterval(updateProgress, 250)
}
}
- scheduledTime += frameCount / sampleRate
+ scheduledTime = segmentStartTime + frameCount / sampleRate
decodedDuration = totalDuration
const playerState = getAudioPlayerAtomValue()
diff --git a/apps/mobile/changelog/0.5.5.md b/apps/mobile/changelog/0.5.5.md
new file mode 100644
index 000000000..3c99ff2ec
--- /dev/null
+++ b/apps/mobile/changelog/0.5.5.md
@@ -0,0 +1,12 @@
+# What's New in v0.5.5
+
+## No longer broken
+
+- Fixed duplicated lines in code blocks from feeds that wrap each line in nested divs (e.g., Cloudflare's changelog)
+- Fixed timeline refreshes returning to the top before new content is rendered
+- Fixed mark-read state changes while the timeline is being reset
+- Fixed social timeline scroll reset preservation across mobile list layouts
+
+## Thanks
+
+Special thanks to volunteer contributor @TonyRL for the nested code block fix
diff --git a/apps/mobile/ios/Folo/Info.plist b/apps/mobile/ios/Folo/Info.plist
index 7afb39911..6680d0043 100644
--- a/apps/mobile/ios/Folo/Info.plist
+++ b/apps/mobile/ios/Folo/Info.plist
@@ -33,7 +33,7 @@
CFBundlePackageType
$(PRODUCT_BUNDLE_PACKAGE_TYPE)
CFBundleShortVersionString
- 0.5.4
+ 0.5.5
CFBundleSignature
????
CFBundleURLTypes
@@ -54,7 +54,7 @@
CFBundleVersion
- 7
+ 8
ITSAppUsesNonExemptEncryption
LSApplicationCategoryType
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 6716a87cd..500564b5c 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -1,6 +1,6 @@
{
"name": "@follow/mobile",
- "version": "0.5.4",
+ "version": "0.5.5",
"private": true,
"main": "src/main.tsx",
"scripts": {
diff --git a/apps/mobile/release.json b/apps/mobile/release.json
index 4bdf69bbb..e8eb0ec2e 100644
--- a/apps/mobile/release.json
+++ b/apps/mobile/release.json
@@ -1,6 +1,6 @@
{
- "version": "0.5.4",
+ "version": "0.5.5",
"mode": "ota",
- "runtimeVersion": "0.5.3",
+ "runtimeVersion": "0.5.0",
"channel": "production"
}
diff --git a/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx b/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx
index fef47f284..ed19fccf1 100644
--- a/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx
+++ b/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx
@@ -36,8 +36,14 @@ export const EntryListContentArticle = ({
entryIds,
active,
view,
+ onResetScrollSignalConsumed,
+ resetScrollSignal,
+ suspendMarkRead,
}: { entryIds: string[] | null; active?: boolean; view: FeedViewType } & {
ref?: React.Ref | null>
+ onResetScrollSignalConsumed?: (signal: number) => void
+ resetScrollSignal?: number
+ suspendMarkRead?: boolean
}) => {
const extraData: EntryExtraData = useMemo(() => ({ entryIds }), [entryIds])
const readableItemStyle = useReadableContainerStyle(860, 16)
@@ -88,7 +94,7 @@ export const EntryListContentArticle = ({
const ref = useRef>(null)
const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
- disabled: active === false || isFetching,
+ disabled: active === false || isFetching || suspendMarkRead,
refreshing: isFetching && !isFetchingNextPage,
})
@@ -129,6 +135,8 @@ export const EntryListContentArticle = ({
ref={ref}
onRefresh={refetch}
isRefetching={isRefetching}
+ onResetScrollSignalConsumed={onResetScrollSignalConsumed}
+ resetScrollSignal={resetScrollSignal}
data={entryIds}
extraData={extraData}
keyExtractor={defaultKeyExtractor}
diff --git a/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx b/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx
index 85adc9efa..602123ea9 100644
--- a/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx
+++ b/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx
@@ -35,11 +35,19 @@ export const EntryListContentPicture = ({
entryIds,
active,
view,
+ onResetScrollSignalConsumed,
+ resetScrollSignal,
+ suspendMarkRead,
...rest
}: { entryIds: string[] | null; active?: boolean; view: FeedViewType } & Omit<
FlashListProps,
"data" | "renderItem"
-> & { ref?: React.Ref | null> }) => {
+> & {
+ ref?: React.Ref | null>
+ onResetScrollSignalConsumed?: (signal: number) => void
+ resetScrollSignal?: number
+ suspendMarkRead?: boolean
+ }) => {
const ref = useRef>(null)
const isTablet = useIsTabletLayout()
@@ -57,7 +65,7 @@ export const EntryListContentPicture = ({
active,
})
const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
- disabled: active === false || isFetching,
+ disabled: active === false || isFetching || suspendMarkRead,
refreshing: isFetching && !isFetchingNextPage,
})
const translation = useGeneralSettingKey("translation")
@@ -114,6 +122,8 @@ export const EntryListContentPicture = ({
| null>
+ onResetScrollSignalConsumed?: (signal: number) => void
+ resetScrollSignal?: number
+ suspendMarkRead?: boolean
}) => {
const {
fetchNextPage,
@@ -69,7 +76,7 @@ export const EntryListContentSocial = ({
)
const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
- disabled: active === false || isFetching,
+ disabled: active === false || isFetching || suspendMarkRead,
refreshing: isFetching && !isFetchingNextPage,
})
@@ -86,12 +93,21 @@ export const EntryListContentSocial = ({
mode: translationMode,
})
+ const contentResetScrollSignal = getResetScrollSignalForContent({
+ entryCount: entryIds?.length ?? 0,
+ hasScrollableSkeleton: true,
+ isReady,
+ resetScrollSignal,
+ })
+
// Show loading skeleton when entries are not ready and no data yet
if (!isReady && (!entryIds || entryIds.length === 0)) {
return (
{}}
isRefetching={false}
+ onResetScrollSignalConsumed={onResetScrollSignalConsumed}
+ resetScrollSignal={contentResetScrollSignal}
data={Array.from({ length: 5 }).map((_, index) => `skeleton-${index}`)}
keyExtractor={(id) => id}
renderItem={EntryItemSkeleton}
@@ -107,6 +123,8 @@ export const EntryListContentSocial = ({
refetch()
}}
isRefetching={isRefetching}
+ onResetScrollSignalConsumed={onResetScrollSignalConsumed}
+ resetScrollSignal={contentResetScrollSignal}
data={entryIds}
extraData={extraData}
keyExtractor={(id) => id}
diff --git a/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx b/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx
index b6ddc7fa2..b66181aaf 100644
--- a/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx
+++ b/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx
@@ -28,11 +28,19 @@ export const EntryListContentVideo = ({
entryIds,
active,
view,
+ onResetScrollSignalConsumed,
+ resetScrollSignal,
+ suspendMarkRead,
...rest
}: { entryIds: string[] | null; active?: boolean; view: FeedViewType } & Omit<
FlashListProps,
"data" | "renderItem"
-> & { ref?: React.Ref | null> }) => {
+> & {
+ ref?: React.Ref | null>
+ onResetScrollSignalConsumed?: (signal: number) => void
+ resetScrollSignal?: number
+ suspendMarkRead?: boolean
+ }) => {
const ref = useRef>(null)
useImperativeHandle(forwardRef, () => ref.current!)
const isTablet = useIsTabletLayout()
@@ -49,7 +57,7 @@ export const EntryListContentVideo = ({
active,
})
const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
- disabled: active === false || isFetching,
+ disabled: active === false || isFetching || suspendMarkRead,
refreshing: isFetching && !isFetchingNextPage,
})
@@ -120,6 +128,8 @@ export const EntryListContentVideo = ({
{
const whoami = useWhoami()
@@ -37,6 +39,20 @@ type EntryListSelectorProps = {
function EntryListSelectorImpl({ entryIds, viewId, active = true }: EntryListSelectorProps) {
const ref = useRegisterNavigationScrollView>(active)
+ const [resetScrollSignal, setResetScrollSignal] = useState()
+ const [appliedResetScrollSignal, setAppliedResetScrollSignal] = useState()
+ const isScrollResetPending = shouldSuspendMarkReadForScrollReset({
+ resetSignal: resetScrollSignal,
+ appliedResetSignal: appliedResetScrollSignal,
+ })
+ const requestScrollToTop = useCallback(() => {
+ setResetScrollSignal((signal) => (signal ?? 0) + 1)
+ }, [])
+ const handleResetScrollSignalConsumed = useCallback((signal: number) => {
+ setAppliedResetScrollSignal((currentSignal) =>
+ currentSignal === signal ? currentSignal : signal,
+ )
+ }, [])
let ContentComponent:
| typeof EntryListContentSocial
@@ -64,13 +80,30 @@ function EntryListSelectorImpl({ entryIds, viewId, active = true }: EntryListSel
const unreadOnly = useGeneralSettingKey("unreadOnly")
useEffect(() => {
- ref?.current?.scrollToOffset({
- offset: 0,
- animated: false,
- })
- }, [unreadOnly, ref])
+ requestScrollToTop()
+ }, [requestScrollToTop, unreadOnly])
+
+ const { isFetching, isFetchingNextPage, isReady } = useEntries({ viewId, active })
+ const isRefreshing = isFetching && !isFetchingNextPage
+ const wasRefreshingRef = useRef(isRefreshing)
+ useEffect(() => {
+ if (!active) return
+
+ const wasRefreshing = wasRefreshingRef.current
+ wasRefreshingRef.current = isRefreshing
+
+ if (
+ !shouldScrollEntryListToTopOnRefreshStateChange({
+ wasRefreshing,
+ isRefreshing,
+ })
+ ) {
+ return
+ }
+
+ requestScrollToTop()
+ }, [active, isRefreshing, requestScrollToTop])
- const { isReady } = useEntries({ viewId, active })
const hasResetAfterReadyRef = useRef(false)
useEffect(() => {
if (!active) return
@@ -81,37 +114,29 @@ function EntryListSelectorImpl({ entryIds, viewId, active = true }: EntryListSel
if (!entryIds?.length) return
if (hasResetAfterReadyRef.current) return
- const frameId = requestAnimationFrame(() => {
- ref?.current?.scrollToOffset({
- offset: 0,
- animated: false,
- })
- })
+ requestScrollToTop()
hasResetAfterReadyRef.current = true
-
- return () => {
- cancelAnimationFrame(frameId)
- }
- }, [active, entryIds, isReady, ref, viewId])
+ }, [active, entryIds, isReady, requestScrollToTop, viewId])
useEffect(() => {
if (!active) return
- const frameId = requestAnimationFrame(() => {
- ref?.current?.scrollToOffset({
- offset: 0,
- animated: false,
- })
- })
-
- return () => {
- cancelAnimationFrame(frameId)
- }
- }, [active, ref, viewId])
+ requestScrollToTop()
+ }, [active, requestScrollToTop, viewId])
useAutoScrollToEntryAfterPullUpToNext(ref, entryIds || [])
- return
+ return (
+
+ )
}
export const EntryListSelector = withErrorBoundary(
diff --git a/apps/mobile/src/modules/entry-list/hooks.ts b/apps/mobile/src/modules/entry-list/hooks.ts
index a6f5851a8..06188176c 100644
--- a/apps/mobile/src/modules/entry-list/hooks.ts
+++ b/apps/mobile/src/modules/entry-list/hooks.ts
@@ -8,6 +8,8 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
import { useGeneralSettingKey } from "@/src/atoms/settings/general"
+import { shouldCollectViewableItemsForMarkRead } from "./viewable-mark-read"
+
const defaultIdExtractor = (item: ViewToken) => item.key
export function useOnViewableItemsChanged({
disabled,
@@ -42,9 +44,21 @@ export function useOnViewableItemsChanged({
debouncedFetchEntryContentByStream(viewableItems.map((item) => stableIdExtractor(item)))
const removed = changed.filter((item) => !item.isViewable)
+ if (disabled) {
+ setLastRemovedItems(null)
+ setLastViewableItems(null)
+ return
+ }
+
// Only when the scroll direction is down and the current offset is a positive number, is it marked as read.
// This can avoid misjudgment during the rebound of the pull-to-refresh (because the offset will change from negative to zero during the rebound).
- if (orientation.current === "down" && lastOffset.current > 0) {
+ if (
+ shouldCollectViewableItemsForMarkRead({
+ disabled,
+ isScrollingDown: orientation.current === "down",
+ offset: lastOffset.current,
+ })
+ ) {
setLastViewableItems(viewableItems)
if (pauseScrollMarkRead) {
setLastRemovedItems(null)
diff --git a/apps/mobile/src/modules/entry-list/refresh-reset.test.ts b/apps/mobile/src/modules/entry-list/refresh-reset.test.ts
new file mode 100644
index 000000000..7c8ecbd4f
--- /dev/null
+++ b/apps/mobile/src/modules/entry-list/refresh-reset.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "vitest"
+
+import { shouldScrollEntryListToTopOnRefreshStateChange } from "./refresh-reset"
+
+describe("shouldScrollEntryListToTopOnRefreshStateChange", () => {
+ test("scrolls only when the first-page refresh starts", () => {
+ expect(
+ shouldScrollEntryListToTopOnRefreshStateChange({
+ wasRefreshing: false,
+ isRefreshing: true,
+ }),
+ ).toBe(true)
+
+ expect(
+ shouldScrollEntryListToTopOnRefreshStateChange({
+ wasRefreshing: true,
+ isRefreshing: false,
+ }),
+ ).toBe(false)
+
+ expect(
+ shouldScrollEntryListToTopOnRefreshStateChange({
+ wasRefreshing: true,
+ isRefreshing: true,
+ }),
+ ).toBe(false)
+
+ expect(
+ shouldScrollEntryListToTopOnRefreshStateChange({
+ wasRefreshing: false,
+ isRefreshing: false,
+ }),
+ ).toBe(false)
+ })
+})
diff --git a/apps/mobile/src/modules/entry-list/refresh-reset.ts b/apps/mobile/src/modules/entry-list/refresh-reset.ts
new file mode 100644
index 000000000..510c1f084
--- /dev/null
+++ b/apps/mobile/src/modules/entry-list/refresh-reset.ts
@@ -0,0 +1,7 @@
+export const shouldScrollEntryListToTopOnRefreshStateChange = ({
+ wasRefreshing,
+ isRefreshing,
+}: {
+ wasRefreshing: boolean
+ isRefreshing: boolean
+}) => !wasRefreshing && isRefreshing
diff --git a/apps/mobile/src/modules/entry-list/viewable-mark-read.test.ts b/apps/mobile/src/modules/entry-list/viewable-mark-read.test.ts
new file mode 100644
index 000000000..cf6f40600
--- /dev/null
+++ b/apps/mobile/src/modules/entry-list/viewable-mark-read.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest"
+
+import { shouldCollectViewableItemsForMarkRead } from "./viewable-mark-read"
+
+describe("shouldCollectViewableItemsForMarkRead", () => {
+ test("does not collect viewable items while disabled", () => {
+ expect(
+ shouldCollectViewableItemsForMarkRead({
+ disabled: true,
+ isScrollingDown: true,
+ offset: 120,
+ }),
+ ).toBe(false)
+ })
+
+ test("collects viewable items only when scrolling down beyond the top", () => {
+ expect(
+ shouldCollectViewableItemsForMarkRead({
+ disabled: false,
+ isScrollingDown: true,
+ offset: 120,
+ }),
+ ).toBe(true)
+ expect(
+ shouldCollectViewableItemsForMarkRead({
+ disabled: false,
+ isScrollingDown: false,
+ offset: 120,
+ }),
+ ).toBe(false)
+ expect(
+ shouldCollectViewableItemsForMarkRead({
+ disabled: false,
+ isScrollingDown: true,
+ offset: 0,
+ }),
+ ).toBe(false)
+ })
+})
diff --git a/apps/mobile/src/modules/entry-list/viewable-mark-read.ts b/apps/mobile/src/modules/entry-list/viewable-mark-read.ts
new file mode 100644
index 000000000..7be7642ac
--- /dev/null
+++ b/apps/mobile/src/modules/entry-list/viewable-mark-read.ts
@@ -0,0 +1,9 @@
+export const shouldCollectViewableItemsForMarkRead = ({
+ disabled,
+ isScrollingDown,
+ offset,
+}: {
+ disabled?: boolean
+ isScrollingDown: boolean
+ offset: number
+}) => !disabled && isScrollingDown && offset > 0
diff --git a/apps/mobile/src/modules/screen/TimelineSelectorList.tsx b/apps/mobile/src/modules/screen/TimelineSelectorList.tsx
index affac8f9e..11133427b 100644
--- a/apps/mobile/src/modules/screen/TimelineSelectorList.tsx
+++ b/apps/mobile/src/modules/screen/TimelineSelectorList.tsx
@@ -5,7 +5,7 @@ import { nextFrame } from "@follow/utils"
import type { FlashListProps, FlashListRef } from "@shopify/flash-list"
import { FlashList } from "@shopify/flash-list"
import * as Haptics from "expo-haptics"
-import { use, useCallback, useImperativeHandle, useRef } from "react"
+import { use, useCallback, useEffect, useImperativeHandle, useRef } from "react"
import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
import { RefreshControl, View } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
@@ -16,16 +16,59 @@ import { ScreenItemContext } from "@/src/lib/navigation/ScreenItemContext"
import { useHeaderHeight } from "@/src/modules/screen/hooks/useHeaderHeight"
import { EntryListEmpty } from "../entry-list/EntryListEmpty"
+import { shouldApplyScrollResetSignal } from "./scroll-reset"
type Props = {
onRefresh: () => void
isRefetching: boolean
+ onResetScrollSignalConsumed?: (signal: number) => void
+ resetScrollSignal?: number
+}
+
+const usePendingScrollReset = (
+ resetScrollSignal: number | undefined,
+ scrollToTop: () => boolean,
+ onResetScrollSignalConsumed?: (signal: number) => void,
+) => {
+ const appliedResetScrollSignalRef = useRef(undefined)
+ const canApplyScrollResetRef = useRef(false)
+ const flushPendingScrollReset = useCallback(() => {
+ if (!canApplyScrollResetRef.current) return
+ if (
+ !shouldApplyScrollResetSignal({
+ resetSignal: resetScrollSignal,
+ appliedResetSignal: appliedResetScrollSignalRef.current,
+ })
+ ) {
+ return
+ }
+
+ requestAnimationFrame(() => {
+ if (scrollToTop()) {
+ appliedResetScrollSignalRef.current = resetScrollSignal
+ if (resetScrollSignal !== undefined) {
+ onResetScrollSignalConsumed?.(resetScrollSignal)
+ }
+ }
+ })
+ }, [onResetScrollSignalConsumed, resetScrollSignal, scrollToTop])
+
+ useEffect(() => {
+ flushPendingScrollReset()
+ }, [flushPendingScrollReset])
+
+ return useCallback(() => {
+ canApplyScrollResetRef.current = true
+ flushPendingScrollReset()
+ }, [flushPendingScrollReset])
}
export const TimelineSelectorList = ({
ref: forwardedRef,
onRefresh,
isRefetching,
+ onResetScrollSignalConsumed,
+ resetScrollSignal,
...props
}: Props &
Omit, "onRefresh"> & { ref?: React.Ref | null> }) => {
@@ -38,6 +81,23 @@ export const TimelineSelectorList = ({
const { scrollViewHeight, scrollViewContentHeight, reAnimatedScrollY } = use(ScreenItemContext)!
const tabBarHeight = useBottomTabBarHeight()
+ const scrollToTop = useCallback(() => {
+ const scroller = ref.current
+ if (!scroller) return false
+
+ scroller.scrollToOffset({
+ offset: 0,
+ animated: false,
+ })
+ reAnimatedScrollY.value = 0
+ return true
+ }, [reAnimatedScrollY])
+ const markScrollResetReady = usePendingScrollReset(
+ resetScrollSignal,
+ scrollToTop,
+ onResetScrollSignalConsumed,
+ )
+
const onScroll = useCallback(
(e: NativeSyntheticEvent) => {
props.onScroll?.(e)
@@ -50,17 +110,31 @@ export const TimelineSelectorList = ({
const onLayout = useTypeScriptHappyCallback(
(e) => {
+ props.onLayout?.(e)
scrollViewHeight.value = e.nativeEvent.layout.height - headerHeight - tabBarHeight
},
- [scrollViewHeight],
+ [headerHeight, props, scrollViewHeight, tabBarHeight],
) as FlashListProps["onLayout"]
const onContentSizeChange = useTypeScriptHappyCallback(
(w, h) => {
+ props.onContentSizeChange?.(w, h)
scrollViewContentHeight.value = h
+ markScrollResetReady()
},
- [scrollViewContentHeight],
+ [markScrollResetReady, props, scrollViewContentHeight],
) as FlashListProps["onContentSizeChange"]
+ const onLoad = useTypeScriptHappyCallback(
+ (info) => {
+ props.onLoad?.(info)
+ markScrollResetReady()
+ },
+ [markScrollResetReady, props],
+ ) as FlashListProps["onLoad"]
+ const onCommitLayoutEffect = useTypeScriptHappyCallback(() => {
+ props.onCommitLayoutEffect?.()
+ markScrollResetReady()
+ }, [markScrollResetReady, props]) as FlashListProps["onCommitLayoutEffect"]
if (props.data?.length === 0) {
return
@@ -72,8 +146,6 @@ export const TimelineSelectorList = ({
automaticallyAdjustsScrollIndicatorInsets={false}
automaticallyAdjustContentInsets={false}
ref={ref}
- onLayout={onLayout}
- onContentSizeChange={onContentSizeChange}
refreshControl={
{
nextFrame(() => {
@@ -109,9 +185,11 @@ export const TimelineSelectorList = ({
}
export const TimelineSelectorMasonryList = ({
- ref,
+ ref: forwardedRef,
onRefresh,
isRefetching,
+ onResetScrollSignalConsumed,
+ resetScrollSignal,
...props
}: Props &
Omit, "onRefresh"> & {
@@ -119,12 +197,30 @@ export const TimelineSelectorMasonryList = ({
}) => {
const { refetch: unreadRefetch } = usePrefetchUnread()
const { refetch: subscriptionRefetch } = usePrefetchSubscription()
+ const ref = useRef>(null)
+ useImperativeHandle(forwardedRef, () => ref.current!)
const insets = useSafeAreaInsets()
const headerHeight = useHeaderHeight()
const { reAnimatedScrollY } = use(ScreenItemContext)!
+ const scrollToTop = useCallback(() => {
+ const scroller = ref.current
+ if (!scroller) return false
+
+ scroller.scrollToOffset({
+ offset: 0,
+ animated: false,
+ })
+ reAnimatedScrollY.value = 0
+ return true
+ }, [reAnimatedScrollY])
+ const markScrollResetReady = usePendingScrollReset(
+ resetScrollSignal,
+ scrollToTop,
+ onResetScrollSignalConsumed,
+ )
const onScroll = useCallback(
(e: NativeSyntheticEvent) => {
@@ -135,6 +231,24 @@ export const TimelineSelectorMasonryList = ({
)
const tabBarHeight = useBottomTabBarHeight()
+ const onContentSizeChange = useTypeScriptHappyCallback(
+ (w, h) => {
+ props.onContentSizeChange?.(w, h)
+ markScrollResetReady()
+ },
+ [markScrollResetReady, props],
+ ) as FlashListProps["onContentSizeChange"]
+ const onLoad = useTypeScriptHappyCallback(
+ (info) => {
+ props.onLoad?.(info)
+ markScrollResetReady()
+ },
+ [markScrollResetReady, props],
+ ) as FlashListProps["onLoad"]
+ const onCommitLayoutEffect = useTypeScriptHappyCallback(() => {
+ props.onCommitLayoutEffect?.()
+ markScrollResetReady()
+ }, [markScrollResetReady, props]) as FlashListProps["onCommitLayoutEffect"]
const systemFill = useColor("secondaryLabel")
@@ -160,6 +274,9 @@ export const TimelineSelectorMasonryList = ({
/>
}
{...props}
+ onLoad={onLoad}
+ onCommitLayoutEffect={onCommitLayoutEffect}
+ onContentSizeChange={onContentSizeChange}
contentContainerStyle={[
{
paddingTop: headerHeight,
diff --git a/apps/mobile/src/modules/screen/scroll-reset.test.ts b/apps/mobile/src/modules/screen/scroll-reset.test.ts
new file mode 100644
index 000000000..2f58ca8bc
--- /dev/null
+++ b/apps/mobile/src/modules/screen/scroll-reset.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, test } from "vitest"
+
+import {
+ getResetScrollSignalForContent,
+ shouldApplyScrollResetSignal,
+ shouldSuspendMarkReadForScrollReset,
+} from "./scroll-reset"
+
+describe("shouldApplyScrollResetSignal", () => {
+ test("applies a new reset signal that has not been flushed yet", () => {
+ expect(shouldApplyScrollResetSignal({ resetSignal: 1, appliedResetSignal: undefined })).toBe(
+ true,
+ )
+ expect(shouldApplyScrollResetSignal({ resetSignal: 2, appliedResetSignal: 1 })).toBe(true)
+ })
+
+ test("does not apply missing or already flushed reset signals", () => {
+ expect(
+ shouldApplyScrollResetSignal({
+ resetSignal: undefined,
+ appliedResetSignal: undefined,
+ }),
+ ).toBe(false)
+ expect(shouldApplyScrollResetSignal({ resetSignal: 1, appliedResetSignal: 1 })).toBe(false)
+ })
+
+ test("suspends mark-read while reset is pending", () => {
+ expect(
+ shouldSuspendMarkReadForScrollReset({
+ resetSignal: 1,
+ appliedResetSignal: undefined,
+ }),
+ ).toBe(true)
+ expect(
+ shouldSuspendMarkReadForScrollReset({
+ resetSignal: 1,
+ appliedResetSignal: 1,
+ }),
+ ).toBe(false)
+ })
+
+ test("does not forward reset signal to scrollable loading skeletons", () => {
+ expect(
+ getResetScrollSignalForContent({
+ entryCount: 0,
+ hasScrollableSkeleton: true,
+ isReady: false,
+ resetScrollSignal: 1,
+ }),
+ ).toBeUndefined()
+
+ expect(
+ getResetScrollSignalForContent({
+ entryCount: 1,
+ hasScrollableSkeleton: true,
+ isReady: true,
+ resetScrollSignal: 1,
+ }),
+ ).toBe(1)
+ })
+})
diff --git a/apps/mobile/src/modules/screen/scroll-reset.ts b/apps/mobile/src/modules/screen/scroll-reset.ts
new file mode 100644
index 000000000..4234e29eb
--- /dev/null
+++ b/apps/mobile/src/modules/screen/scroll-reset.ts
@@ -0,0 +1,23 @@
+type ScrollResetSignalState = {
+ resetSignal?: number
+ appliedResetSignal?: number
+}
+
+export const shouldApplyScrollResetSignal = ({
+ resetSignal,
+ appliedResetSignal,
+}: ScrollResetSignalState) => resetSignal !== undefined && resetSignal !== appliedResetSignal
+
+export const shouldSuspendMarkReadForScrollReset = shouldApplyScrollResetSignal
+
+export const getResetScrollSignalForContent = ({
+ entryCount,
+ hasScrollableSkeleton,
+ isReady,
+ resetScrollSignal,
+}: {
+ entryCount: number
+ hasScrollableSkeleton: boolean
+ isReady: boolean
+ resetScrollSignal?: number
+}) => (!isReady && entryCount === 0 && hasScrollableSkeleton ? undefined : resetScrollSignal)
diff --git a/apps/mobile/web-app/html-renderer/src/parser.tsx b/apps/mobile/web-app/html-renderer/src/parser.tsx
index 6178290ca..740e02054 100644
--- a/apps/mobile/web-app/html-renderer/src/parser.tsx
+++ b/apps/mobile/web-app/html-renderer/src/parser.tsx
@@ -197,7 +197,9 @@ function extractCodeFromHtml(htmlString: string) {
if (divElements.length > 0) {
divElements.forEach((div) => {
- code += `${div.textContent}\n`
+ if (!div.querySelector("div")) {
+ code += `${div.textContent}\n`
+ }
})
return code
}