-

package.json

@@ -31,6 +31,7 @@
     "bundle-analyze": "npx react-native-bundle-visualizer --platform android --entry-file index.js --expo true"
   },
   "dependencies": {
+    "@openspacelabs/react-native-zoomable-view": "^2.1.6",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-community/hooks": "^3.0.0",
     "@react-native-community/netinfo": "11.1.0",
@@ -66,10 +67,13 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-webview": "13.6.4",
+    "react-native-zoom-reanimated": "^1.4.5",
     "spark-md5": "^3.0.2",
     "swr": "^2.2.4",
     "throttle-debounce": "^5.0.0",
-    "zod": "^3.21.4"
+    "zod": "^3.21.4",
+    "react-native-reanimated": "~3.6.2",
+    "react-native-gesture-handler": "~2.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/CommentList.tsx

@@ -1,13 +1,14 @@
 import { Icon, Skeleton, Text } from '@rneui/themed'
 import { FlashList } from '@shopify/flash-list'
 import React from 'react'
-import { View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 
 import { colors } from '@/constants/colors.tw'
 
 import { type CommentItemType, useComments } from '../api/comments'
 import { Comment } from './Comment'
 import ReplyList from './ReplyList'
+import clsx from 'clsx'
 
 function Loading() {
   return (
@@ -76,13 +77,15 @@ export default function CommentList(
               </View>
               <View className="ml-2 mr-1 flex-row gap-2 items-center">
                 {props.dividerRight}
-                <Text
-                  className="text-sm"
+                <TouchableOpacity
+                  activeOpacity={0.7}
                   onPress={() => {
                     setMode(mode === 3 ? 2 : 3)
                   }}>
-                  {mode === 3 ? '按热度' : '按时间'}
-                </Text>
+                  <Text className={clsx('text-sm', colors.primary.text)}>
+                    {mode === 3 ? '按热度' : '按时间'}
+                  </Text>
+                </TouchableOpacity>
               </View>
             </View>
           </View>

src/components/ImagesView.tsx

@@ -1,4 +1,3 @@
-// import { useNetInfo } from '@react-native-community/netInfo'
 import { Overlay } from '@rneui/themed'
 import { Image } from 'expo-image'
 import React from 'react'
@@ -9,7 +8,6 @@ import { parseImgUrl } from '@/utils'
 
 import { useStore } from '../store'
 import Image2 from './Image2'
-
 export default React.memo(ImagesView)
 
 const textShadow = {
@@ -43,7 +41,6 @@ function ImagesView() {
   const imageCompCache = React.useRef<
     Record<string, React.ComponentElement<any, any>>
   >({})
-
   return (
     <Overlay
       isVisible={images.length > 0}

src/routes/Collect/index.tsx

@@ -12,12 +12,33 @@ import { CollectVideoInfo } from '@/types'
 function CollectList() {
   const { $collectedVideos, set$collectedVideos } = useStore()
   const headerTitle = `我的收藏（${$collectedVideos.length}）`
+  const blackColor = tw(colors.black.text).color
+  const [searchKeyWord, setSearchKeyWord] = React.useState('')
   useUpdateNavigationOptions(
     React.useMemo(() => {
       return {
         headerTitle,
+        headerSearchBarOptions: {
+          placeholder: '搜索视频',
+          headerIconColor: blackColor,
+          hintTextColor: blackColor,
+          textColor: blackColor,
+          tintColor: blackColor,
+          disableBackButtonOverride: false,
+          shouldShowHintSearchIcon: false,
+          onClose: () => {
+            setSearchKeyWord('')
+          },
+          onSearchButtonPress: ({ nativeEvent: { text } }) => {
+            const keyword = text.trim()
+            if (!keyword) {
+              return
+            }
+            setSearchKeyWord(keyword)
+          },
+        },
       }
-    }, [headerTitle]),
+    }, [headerTitle, blackColor]),
   )
 
   const buttons = (video: CollectVideoInfo) => {
@@ -48,10 +69,18 @@ function CollectList() {
       },
     ]
   }
+  const collectVideos = React.useMemo(() => {
+    if (searchKeyWord) {
+      return $collectedVideos.filter(vi => {
+        return vi.title.includes(searchKeyWord)
+      })
+    }
+    return $collectedVideos
+  }, [searchKeyWord, $collectedVideos])
   return (
     <FlashList
-      data={$collectedVideos}
-      keyExtractor={v => v.bvid + ''}
+      data={collectVideos}
+      keyExtractor={v => v.bvid}
       renderItem={({ item }: { item: CollectVideoInfo }) => {
         return <VideoListItem video={item} buttons={buttons} />
       }}

src/routes/History/index.tsx

@@ -12,10 +12,31 @@ import { CollectVideoInfo, HistoryVideoInfo } from '@/types'
 function HistoryList() {
   const { $watchedVideos } = useStore()
   const headerTitle = `观看历史（${Object.keys($watchedVideos).length}）`
+  const blackColor = tw(colors.black.text).color
+  const [searchKeyWord, setSearchKeyWord] = React.useState('')
   useUpdateNavigationOptions(
     React.useMemo(() => {
       return {
         headerTitle,
+        headerSearchBarOptions: {
+          placeholder: '搜索视频',
+          headerIconColor: blackColor,
+          hintTextColor: blackColor,
+          textColor: blackColor,
+          tintColor: blackColor,
+          disableBackButtonOverride: false,
+          shouldShowHintSearchIcon: false,
+          onClose: () => {
+            setSearchKeyWord('')
+          },
+          onSearchButtonPress: ({ nativeEvent: { text } }) => {
+            const keyword = text.trim()
+            if (!keyword) {
+              return
+            }
+            setSearchKeyWord(keyword)
+          },
+        },
       }
     }, [headerTitle]),
   )
@@ -31,10 +52,17 @@ function HistoryList() {
     ]
   }
   const list = React.useMemo(() => {
-    return Object.values($watchedVideos).sort((a, b) => {
+    const _list = Object.values($watchedVideos).sort((a, b) => {
       return b.watchTime - a.watchTime
     })
-  }, [$watchedVideos])
+    if (searchKeyWord) {
+      return _list.filter(vi => {
+        return vi.title.includes(searchKeyWord)
+      })
+    }
+    return _list
+  }, [$watchedVideos, searchKeyWord])
+
   return (
     <FlashList
       data={list}