feat: ToView playlist#74
Conversation
SafeDep Report Summary
No dependency changes detected. Nothing to scan. This report is generated by SafeDep Github App |
WalkthroughThis PR introduces UI typography refinements with Unicode thin spaces across multiple components, implements new "To View" playlist management features with deletion and clearing mutations, refactors RemoteTrackList to support pluggable item rendering, and updates supporting API methods and query structures. Changes
Sequence DiagramsequenceDiagram
actor User
participant ToViewPage as To View Page<br/>(toview.tsx)
participant FunctionalMenu as Functional Menu
participant Mutations as Mutations
participant API as API Client
participant Cache as Query Cache
User->>ToViewPage: Opens to view playlist
ToViewPage->>Cache: Load to-view videos with progress
Cache-->>ToViewPage: Display items with ProgressRing
User->>ToViewPage: Tap menu (dots)
ToViewPage->>FunctionalMenu: Show menu options
User->>FunctionalMenu: Select "Clear Played" or "Clear All"
alt Clear Played Videos
FunctionalMenu->>Mutations: deleteToViewVideo({ deleteAllViewed: true })
else Clear All Videos
FunctionalMenu->>Mutations: confirm alert, then clearToViewVideoList()
end
Mutations->>API: postWithCsrf(clearUrl, payload)
API-->>Mutations: Success response
Mutations->>Cache: Optimistically update to empty list
Mutations->>Cache: Show success toast
alt Error Occurred
Mutations->>Cache: Revert to previous data
Mutations->>Cache: Show error toast
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes
Areas requiring extra attention:
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/features/library/multipage/MultiPageVideosList.tsx (1)
85-103: Replace HTML entities with actual thin spaces.React Native renders string literals verbatim, so these
 sequences will surface in the UI instead of displaying a thin space. Swap them for the Unicode thin space (e.g.\u2009or the actual character) so users see the intended typography.- 未找到分 P 视频收藏夹，请先创建一个收藏夹，并以 [mp] 开头 + 未找到分\u2009P\u2009视频收藏夹，请先创建一个收藏夹，并以\u2009[mp]\u2009开头 @@ - {favoriteData.pages[0]?.info?.media_count ?? 0} -  个分 P 视频 + {favoriteData.pages[0]?.info?.media_count ?? 0} + \u2009个分\u2009P\u2009视频 @@ - <Text style={styles.emptyList}>没有分 P 视频</Text> + <Text style={styles.emptyList}>没有分\u2009P\u2009视频</Text>
♻️ Duplicate comments (1)
src/features/playlist/remote/toview/components/Item.tsx (1)
26-34: Duplicate interface definition.This interface is also defined in
ProgressRing.tsx(lines 6-15). See the comment on that file for consolidation guidance.
🧹 Nitpick comments (8)
src/components/modals/player/SleepTimerModal.tsx (1)
69-70: Typography improvement looks good.The Unicode thin space (U+2009) provides appropriate visual spacing between the number and "分钟" in Chinese typography.
Since this is part of a broader typography standardization across multiple components, consider extracting the thin space to a shared constant for maintainability:
// In a shared constants file (e.g., src/constants/typography.ts) export const THIN_SPACE = '\u2009'Then use it here:
-{minutes} -{'\u2009'}分钟 +{minutes}{THIN_SPACE}分钟This would make it easier to maintain consistent spacing and update if needed across the codebase.
src/components/NowPlayingBar.tsx (1)
266-266: LGTM! Z-index layering properly ensures album image renders above progress bar.The explicit z-index values correctly establish the stacking order, ensuring the album image (z-index: 2) appears above the progress bar container (z-index: 1) when they overlap due to the absolute positioning.
Consider adding a brief comment explaining the z-index relationship for future maintainability:
nowPlayingBarImage: { height: 48, width: 48, borderRadius: 24, borderWidth: 1, + // Ensure album image renders above progress bar zIndex: 2, },Also applies to: 288-288
src/components/modals/app/WelcomeModal.tsx (1)
103-121: LGTM! Typography improvements enhance readability.The Unicode thin spaces (
\u2009) correctly improve text spacing around brand names and key terms in the Chinese UI text. This is a nice polish that enhances readability without affecting functionality.src/features/library/collection/CollectionListItem.tsx (1)
47-50: LGTM! Minor cleanup suggestion.The thin space typography improvements are correct and enhance readability. Note that the empty string
{''}on Line 48 after the bullet is unnecessary and can be removed for cleaner code.src/components/modals/playlist/BatchAddTracksToLocalPlaylist.tsx (1)
147-149: LGTM! Typography improvement enhances text spacing.The Unicode thin space after the asterisk correctly improves the visual spacing of the helper text without affecting functionality.
src/features/library/multipage/MultiPageVideosItem.tsx (1)
41-43: LGTM! Typography improvement is correct.The Unicode thin space before the bullet separator correctly enhances text spacing. The empty string
{''}on Line 42 after the bullet is unnecessary but harmless.src/features/library/collection/CollectionList.tsx (1)
73-76: LGTM! Typography improvement enhances count display.Splitting the count and unit text with a Unicode thin space between them correctly improves readability and spacing consistency with other components in the PR.
src/lib/api/bilibili/client.ts (1)
145-165: New postWithCsrf method implementation looks solid.The method correctly:
- Fetches CSRF token via
getCsrfToken()- Merges it into the payload
- Encodes as x-www-form-urlencoded using URLSearchParams
- Delegates to the existing
postmethod for consistent error handlingThe
publicmodifier on line 151 is redundant (TypeScript members are public by default), but this is a minor style choice.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (40)
CHANGELOG.md(1 hunks)src/app/(tabs)/index.tsx(2 hunks)src/app/(tabs)/settings.tsx(3 hunks)src/app/leaderboard.tsx(2 hunks)src/app/playlist/local/[id].tsx(3 hunks)src/app/playlist/remote/collection/[id].tsx(2 hunks)src/app/playlist/remote/favorite/[id].tsx(2 hunks)src/app/playlist/remote/multipage/[bvid].tsx(2 hunks)src/app/playlist/remote/search-result/fav/[query].tsx(2 hunks)src/app/playlist/remote/search-result/global/[query].tsx(2 hunks)src/app/playlist/remote/toview.tsx(9 hunks)src/app/playlist/remote/uploader/[mid].tsx(3 hunks)src/app/test.tsx(1 hunks)src/components/NowPlayingBar.tsx(2 hunks)src/components/modals/app/WelcomeModal.tsx(2 hunks)src/components/modals/bilibili/AddVideoToBilibiliFavModal.tsx(1 hunks)src/components/modals/login/CookieLoginModal.tsx(1 hunks)src/components/modals/login/QRCodeLoginModal.tsx(1 hunks)src/components/modals/player/SleepTimerModal.tsx(1 hunks)src/components/modals/playlist/BatchAddTracksToLocalPlaylist.tsx(1 hunks)src/components/modals/playlist/UpdateTrackLocalPlaylistsModal.tsx(1 hunks)src/features/library/collection/CollectionList.tsx(1 hunks)src/features/library/collection/CollectionListItem.tsx(1 hunks)src/features/library/favorite/FavoriteFolderList.tsx(1 hunks)src/features/library/favorite/FavoriteFolderListItem.tsx(1 hunks)src/features/library/local/LocalPlaylistItem.tsx(1 hunks)src/features/library/local/LocalPlaylistList.tsx(1 hunks)src/features/library/multipage/MultiPageVideosItem.tsx(1 hunks)src/features/library/multipage/MultiPageVideosList.tsx(3 hunks)src/features/player/components/PlayerLyrics.tsx(1 hunks)src/features/playlist/local/components/LocalPlaylistHeader.tsx(1 hunks)src/features/playlist/remote/components/RemoteTrackList.tsx(4 hunks)src/features/playlist/remote/toview/components/Item.tsx(1 hunks)src/features/playlist/remote/toview/components/ProgressRing.tsx(1 hunks)src/hooks/mutations/bilibili/video.ts(2 hunks)src/hooks/queries/bilibili/video.ts(2 hunks)src/lib/api/bilibili/api.ts(6 hunks)src/lib/api/bilibili/client.ts(2 hunks)src/lib/errors/thirdparty/bilibili.ts(1 hunks)src/types/apis/bilibili.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (7)
src/hooks/mutations/bilibili/video.ts (4)
src/utils/neverthrow-utils.ts (1)
returnOrThrowAsync(8-21)src/hooks/queries/bilibili/video.ts (1)
videoDataQueryKeys(6-18)src/types/apis/bilibili.ts (1)
BilibiliToViewVideoList(392-392)src/utils/error-handling.ts (1)
toastAndLogError(11-41)
src/lib/api/bilibili/client.ts (2)
src/lib/errors/thirdparty/bilibili.ts (1)
BilibiliApiError(25-50)src/lib/api/bilibili/utils.ts (1)
getCsrfToken(53-72)
src/lib/api/bilibili/api.ts (2)
src/lib/api/bilibili/client.ts (1)
bilibiliApiClient(167-167)src/lib/errors/thirdparty/bilibili.ts (1)
BilibiliApiError(25-50)
src/app/playlist/remote/toview.tsx (3)
src/types/core/media.ts (1)
BilibiliTrack(38-54)src/hooks/mutations/bilibili/video.ts (2)
useDeleteToViewVideo(29-94)useClearToViewVideoList(96-142)src/components/modals/AlertModal.tsx (1)
alert(72-85)
src/features/playlist/remote/toview/components/Item.tsx (6)
src/features/playlist/remote/toview/components/ProgressRing.tsx (1)
TrackNecessaryData(6-15)src/hooks/stores/usePlayerStore.ts (1)
usePlayerStore(46-736)src/utils/time.ts (1)
formatDurationToHHMMSS(22-30)src/types/flashlist.ts (1)
ListRenderItemInfoWithExtraData(3-8)src/types/core/media.ts (1)
BilibiliTrack(38-54)src/features/playlist/remote/components/RemoteTrackList.tsx (1)
ExtraData(41-52)
src/features/playlist/remote/toview/components/ProgressRing.tsx (1)
src/features/playlist/remote/toview/components/Item.tsx (1)
TrackNecessaryData(26-34)
src/features/playlist/remote/components/RemoteTrackList.tsx (2)
src/types/flashlist.ts (1)
ListRenderItemInfoWithExtraData(3-8)src/types/core/media.ts (1)
BilibiliTrack(38-54)
🔇 Additional comments (30)
src/components/modals/playlist/UpdateTrackLocalPlaylistsModal.tsx (1)
227-229: LGTM – Typography refinement improves readability.The Unicode thin space (U+2009) between the asterisk and text is correctly implemented and provides better visual spacing.
src/app/playlist/remote/collection/[id].tsx (1)
129-129: LGTM – typography refinement improves visual spacing.The thin space characters (
\u2009) around the selection count and within the subtitle enhance readability without altering functionality.Also applies to: 170-170
src/app/playlist/remote/favorite/[id].tsx (2)
140-140: LGTM! Typography improvement enhances readability.The addition of thin spaces (
\u2009) around the count provides better visual separation and follows good typography practices for Chinese text with embedded numbers.
181-181: LGTM! Consistent typography refinement.The thin spaces around the bullet separator and track count create better visual balance and maintain consistency with the AppBar title formatting pattern.
src/app/playlist/remote/uploader/[mid].tsx (3)
144-144: Typography refinement looks good.The addition of thin spaces around "bilibili" and "up" follows Chinese typography best practices for separating Latin text from CJK characters, improving readability.
178-180: LGTM! Improved number formatting.The thin spaces around the selected count enhance the visual presentation following Chinese typography standards for number formatting.
236-236: Typography improvement approved.Adding a thin space before the unit "首歌曲" aligns with Chinese typography conventions for number-unit separation, enhancing readability.
src/app/playlist/remote/search-result/global/[query].tsx (1)
89-91: Typography update looks good.The Unicode thin space (
\u2009) is correctly used here for proper rendering in React Native.src/app/playlist/remote/search-result/fav/[query].tsx (2)
98-100: Typography update looks good.The Unicode thin space (
\u2009) is correctly used here for proper rendering in React Native.
169-169: HTML entities don't render in React Native.React Native's
<Text>component doesn't decode HTML entities. The text will literally display as" “{query}” "instead of showing thin spaces and typographic quotation marks.Apply this diff to use Unicode characters instead:
- 没有在收藏中找到与 “{query}” 相关的内容 + 没有在收藏中找到与\u2009\u201C{query}\u201D\u2009相关的内容Or alternatively, use the actual Unicode characters directly:
- 没有在收藏中找到与 “{query}” 相关的内容 + 没有在收藏中找到与 "{query}" 相关的内容Likely an incorrect or invalid review comment.
src/features/library/favorite/FavoriteFolderListItem.tsx (1)
38-38: Typography improvement looks good.The thin space between the number and Chinese unit improves readability. This change is consistent with the broader typography improvements across the codebase.
src/features/playlist/local/components/LocalPlaylistHeader.tsx (1)
47-50: Typography refinements enhance readability.The Unicode thin spaces (U+2009) around numbers and Chinese text improve the visual presentation of the subtitle. The logic remains unchanged.
src/app/test.tsx (1)
94-94: Typography change in log message.While the thin space improves visual consistency, note that this is a log message rather than user-facing UI. This may slightly affect log searching/grepping, but it's not a concern for this development utility.
src/components/modals/login/QRCodeLoginModal.tsx (1)
69-69: Typography improvement in error message.The thin space after the colon improves readability of the error message, consistent with Chinese typography best practices.
CHANGELOG.md (1)
8-16: CHANGELOG documentation looks good.The new UNRELEASED section properly documents the features being added in this PR, following the Keep a Changelog format.
src/components/modals/bilibili/AddVideoToBilibiliFavModal.tsx (1)
167-167: Typography enhancement for better readability.Adding thin spaces around "bilibili" improves the visual separation between Chinese and Latin text, following Chinese typography conventions.
src/app/(tabs)/settings.tsx (1)
103-103: Consistent typography improvements throughout settings.All changes add thin spaces around Western terms (Bilibili, Sentry, Debug, Cookie) within Chinese text, improving readability and following Chinese typography best practices. The changes are consistent across all settings options.
Also applies to: 200-200, 207-207, 214-214, 228-228
src/components/modals/login/CookieLoginModal.tsx (1)
91-92: Typography refinements improve text presentation.The thin spaces around "Bilibili Cookie" and "BBPlayer" enhance readability by providing proper spacing between Chinese and Latin characters, consistent with the typography improvements throughout this PR.
src/features/player/components/PlayerLyrics.tsx (1)
608-608: Verify the reduced padding doesn't affect lyrics scrolling UX.The bottom padding was reduced from
windowHeight / 2(dynamic, substantial) to a fixed10. This significant reduction might affect the user's ability to comfortably scroll lyrics, especially when trying to view the last few lines. Please verify that this change aligns with the intended UX and doesn't make it difficult to read the final lyrics lines.src/app/playlist/local/[id].tsx (1)
118-120: Typography refinements look good.The thin space (U+2009) additions improve visual spacing in Chinese UI text. These changes are consistent with the PR's typography objectives.
Also applies to: 185-186, 225-227
src/features/library/local/LocalPlaylistItem.tsx (1)
35-41: Typography improvements are consistent.The title rendering simplification and thin space additions align with the PR's typography objectives.
src/app/playlist/remote/multipage/[bvid].tsx (1)
139-143: Typography refinements are consistent.The thin space additions match the pattern used throughout the PR.
Also applies to: 183-183
src/app/leaderboard.tsx (1)
27-41: Duration formatting improvements look good.The thin space additions between numeric values and Chinese time units improve readability.
Also applies to: 78-78
src/lib/errors/thirdparty/bilibili.ts (1)
10-10: New error type addition is appropriate.The
InvalidArgumenterror type extends the error handling capabilities for Bilibili API interactions.src/app/(tabs)/index.tsx (1)
193-193: Typography refinements are consistent.The thin space additions in the toast message and searchbar placeholder improve visual spacing.
Also applies to: 222-224
src/types/apis/bilibili.ts (1)
370-370: New progress field addition is appropriate.The
progressfield extends the to-view video list type to support progress tracking, aligning with the PR's to-view playlist features.src/features/playlist/remote/toview/components/ProgressRing.tsx (1)
28-116: LGTM!The component logic correctly handles edge cases (zero duration, progress clamping), uses a sentinel value (-1) for completed state, and renders both complete and in-progress states appropriately. The 95% threshold for showing completion is reasonable UX.
src/features/playlist/remote/toview/components/Item.tsx (3)
170-182: Document or fix the type suppression.The
@ts-expect-errorcomment "不理解" (don't understand) indicates uncertainty about why this suppression is needed. This is technical debt.Please investigate whether:
RectButtonfromreact-native-gesture-handlerproperly supports refs viaforwardRef- The ref should be typed as
React.RefObject<View>or a more specific type- An alternative pattern (e.g., using
useImperativeHandle) would provide type safetyIf suppression is truly necessary, document the specific type incompatibility in the comment.
240-290: LGTM!The adapter function correctly maps
BilibiliTrackdata to component props, handles missingextraDatawith an appropriate error, and properly fires haptic feedback without blocking (usingvoid). Optional chaining and nullish coalescing are used appropriately.
49-97: LGTM!The component correctly handles dual interaction modes (select vs. normal), distinguishes the current playing track, and prevents redundant play actions. The long-press gesture to enter select mode is well-implemented.
✅ Actions performedComments resolved. |
|
@coderabbitai resolve |
✅ Actions performedComments resolved. |
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Style
Documentation