feat: highlight specific item in multipage playlist

[roitium]

Summary by CodeRabbit

发版说明

• 新增功能
  • 为播放列表项添加每项可控的动画闪烁视觉效果及触感反馈
  • 支持通过 URL 参数（cid）自动滚动并高亮指定曲目
  • 增加列表的可编程滚动控制与自定义条目渲染，增强切换、选择和菜单交互体验

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

为远程播放列表多页面添加每项自定义渲染（FlashingTrackListItem）、列表引用（listRef）以启用程序化滚动，并基于 URL 查询参数 cid 在数据加载后自动滚动到对应轨道，加入触觉反馈与选择交互控制。

Changes

Cohort / File(s)	变更摘要
多页页面集成 src/app/playlist/remote/multipage/[bvid].tsx	引入 listRef（FlashListRef）、renderCustomItem 回调；扩展本地搜索参数以包含可选 cid，在轨道数据加载后根据 cid 延迟自动滚动并初始化选择/交互逻辑与触觉反馈。
轨道列表组件（RemoteTrackList） src/features/playlist/remote/components/RemoteTrackList.tsx	TrackList props 新增 listRef?: React.Ref<FlashListRef<BilibiliTrack>> 并将其透传给内部 FlashList；将 renderCustomItem 类型改为接收 ListRenderItemInfoWithExtraData 并返回 `ReactElement
新闪烁项组件 src/features/playlist/remote/components/FlashingTrackListItem.tsx	新增 FlashingTrackListItem 组件，扩展 TrackListItemProps 并增加可选 shouldFlash?: boolean；使用 react-native-reanimated 实现 opacity 闪烁序列（0.4 → 0 → 0.4 → 0，各300ms），通过绝对定位叠加主题色背景层。
类型导出/引用变化 src/types/flashlist, src/features/.../RemoteTrackList.tsx	新增/导出 ListRenderItemInfoWithExtraData 与 ExtraData 类型，调整导入以支持新 API（仅类型层面改动）。

Sequence Diagram

sequenceDiagram
    participant Page as Multipage Page
    participant TL as TrackList (FlashList)
    participant FTLI as FlashingTrackListItem
    participant Item as TrackListItem

    Page->>TL: 传入 props (listRef, renderCustomItem)
    TL->>TL: 初始化 FlashList 并绑定 ref
    Page->>Page: 读取 URL cid
    Note right of Page: 等待 tracksData 加载
    Page->>TL: tracksData 就绪后（带 cid）
    Page->>TL: 使用 listRef.scrollToIndex(cid 对应索引)
    TL->>TL: 渲染列表项，调用 renderCustomItem 每项
    TL->>FTLI: renderCustomItem 返回 FTLI 包装的项
    FTLI->>FTLI: 根据 ExtraData.shouldFlash 启动 reanimated 动画
    FTLI->>Item: 渲染内部 TrackListItem 并处理交互（toggle/menu/select）
    Item->>Page: 交互事件（播放、菜单、进入/退出选择）触发回调

Loading

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly Related PRs

• feat: ToView playlist #74: 同步引入并扩展 TrackList 的 custom-item API（renderCustomItem、ExtraData）和 listRef 支持，代码层面直接相关。
• feat: highlight specific item in multipage playlist #150: 对同一组文件（FlashingTrackListItem、RemoteTrackList、多页集成）进行类似改动，包含 cid 自动滚动与类型导出调整。

Poem

🐰 我在列表间轻轻跳，
闪烁一瞬又一秒，
cid 指路小脚跑，
列表滚动轻又巧，
播放开始我乐陶陶 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确地反映了拉取请求的主要变化，即通过 cid 查询参数在多页播放列表中高亮/闪烁特定项目。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[safedep]

SafeDep Report Summary

No dependency changes detected. Nothing to scan.

_{This report is generated by SafeDep Github App}

[roitium]

@CodeRabbit review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/app/playlist/remote/multipage/`[bvid].tsx:
- Around line 122-136: The useEffect that delays calling
listRef.current?.scrollToIndex via setTimeout can leak timers or run after
unmount; capture the timer ID when calling setTimeout inside the effect (where
cid, tracksData, index, listRef and scrollToIndex are used) and return a cleanup
function that calls clearTimeout on that ID so the pending callback is cancelled
when cid/tracksData change or the component unmounts.

🧹 Nitpick comments (2)

src/features/playlist/remote/components/FlashingTrackListItem.tsx (1)

26-31: 在 useAnimatedStyle 中访问 theme 可能导致问题

useAnimatedStyle 的回调在 UI 线程上执行，但 theme.colors.primaryContainer 是一个普通的 JS 对象值。当 theme 发生变化时，动画样式可能不会正确更新。

建议将 backgroundColor 移到静态样式中，或使用 useAnimatedProps 配合 shared value：

♻️ 建议的修复方案

 export function FlashingTrackListItem({
 	shouldFlash,
 	...props
 }: FlashingTrackListItemProps) {
 	const theme = useTheme()
 	const opacity = useSharedValue(0)

 	const animatedStyle = useAnimatedStyle(() => {
 		return {
-			backgroundColor: theme.colors.primaryContainer,
 			opacity: opacity.value,
 		}
 	})

+	const overlayStyle = useMemo(
+		() => ({
+			backgroundColor: theme.colors.primaryContainer,
+		}),
+		[theme.colors.primaryContainer],
+	)

 	// ...

 	return (
 		<Animated.View style={[styles.container]}>
 			<TrackListItem {...props} />
 			<Animated.View
 				pointerEvents='none'
-				style={[StyleSheet.absoluteFill, animatedStyle]}
+				style={[StyleSheet.absoluteFill, overlayStyle, animatedStyle]}
 			/>
 		</Animated.View>
 	)
 }

src/app/playlist/remote/multipage/[bvid].tsx (1)

138-191: renderCustomItem 与 renderItemDefault 存在大量重复代码

此回调函数与 RemoteTrackList.tsx 中的 renderItemDefault 几乎完全相同，唯一区别是使用了 FlashingTrackListItem 和 shouldFlash 属性。

考虑将通用逻辑抽取为共享函数或高阶组件，减少维护成本。例如，可以让 renderItemDefault 接受一个可选的 ItemComponent 参数。