-

lovetingyuan · Nov 11, 2024 · 1404db8 · 1404db8
1 parent c24c219
commit 1404db8
Show file tree

Hide file tree

Showing 17 changed files with 204 additions and 264 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: ['@react-native'],
   ignorePatterns: ['docs/**'],
-  plugins: ['sonarjs', 'simple-import-sort'],
+  plugins: ['sonarjs', 'simple-import-sort', 'eslint-plugin-react-compiler'],
   parserOptions: {
     ecmaVersion: 2022,
   },
@@ -19,6 +19,7 @@ module.exports = {
     '@typescript-eslint/no-import-type-side-effects': 'error',
     'simple-import-sort/imports': 'error',
     'simple-import-sort/exports': 'error',
+    'react-compiler/react-compiler': 'error',
   },
   overrides: [
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "download-cli": "^1.1.1",
     "eslint": "^8.37.0",
     "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-6fc168f-20241025",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-sonarjs": "^0.24.0",
     "open": "8.4.2",

diff --git a/src/components/ButtonsOverlay.tsx b/src/components/ButtonsOverlay.tsx
@@ -38,7 +38,7 @@ function ButtonsOverlay() {
     <Overlay
       isVisible={overlayButtons.length > 0}
       ModalComponent={Modal2}
-      overlayStyle={tw(`px-0 py-3 min-w-[70%] ${colors.gray2.bg}`)}
+      overlayStyle={tw(`px-0 py-3 min-w-[70%] max-w-[90%] ${colors.gray2.bg}`)}
       onBackdropPress={dismiss}>
       {Buttons}
     </Overlay>

diff --git a/src/components/CheckLiveUps.tsx b/src/components/CheckLiveUps.tsx
@@ -3,15 +3,9 @@ import { Vibration } from 'react-native'
 import useSWR from 'swr'
 import type { z } from 'zod'
 
-import useBackgroundTask from '@/hooks/useBackgroundTask'
-import useMemoizedFn from '@/hooks/useMemoizedFn'
-
-import request from '../api/fetcher'
 import type { LiveInfoBatchItemSchema } from '../api/living-info.schema'
 import { useStore } from '../store'
 
-let prevLivingMap = {}
-
 type LivingUpsData = Record<string, z.infer<typeof LiveInfoBatchItemSchema>>
 
 const useCheckLivingUps = (time?: number) => {
@@ -20,46 +14,34 @@ const useCheckLivingUps = (time?: number) => {
   const url = uids
     ? `https://api.live.bilibili.com/room/v1/Room/get_status_info_by_uids?${uids}&_t=${checkLiveTimeStamp}`
     : null
-  const checkLivingUps = (data: LivingUpsData) => {
-    if (!data) {
-      return
-    }
-    const livingMap: Record<string, string> = {}
-    Object.keys(data).forEach((mid) => {
-      // https://live.bilibili.com/h5/24446464
-      const { live_status, room_id } = data[mid]
-      if (live_status === 1) {
-        livingMap[mid] = `https://live.bilibili.com/h5/${room_id}`
-      }
-    })
-    let notVibrate = true
-    for (const id in livingMap) {
-      if (!(id in prevLivingMap) && notVibrate) {
-        Vibration.vibrate(900)
-        notVibrate = false
-        break
-      }
-    }
-    prevLivingMap = livingMap
-    setLivingUps(livingMap)
-  }
-  useBackgroundTask(
-    'CheckLivingUps',
-    useMemoizedFn(() => {
-      if (url) {
-        request<LivingUpsData>(url).then((data) => {
-          checkLivingUps(data)
-        })
-      }
-      return null
-    }),
-  )
+  const prevLivingMapRef = React.useRef({})
+
   useSWR<LivingUpsData>(url, {
     refreshInterval: time || 5 * 60 * 1000,
     errorRetryCount: 2,
     refreshWhenHidden: true, // 在移动端后台刷新不能保证会一直按时执行
-    onSuccess(data) {
-      checkLivingUps(data)
+    onSuccess: (data: LivingUpsData) => {
+      if (!data) {
+        return
+      }
+      const livingMap: Record<string, string> = {}
+      Object.keys(data).forEach((mid) => {
+        // https://live.bilibili.com/h5/24446464
+        const { live_status, room_id } = data[mid]
+        if (live_status === 1) {
+          livingMap[mid] = `https://live.bilibili.com/h5/${room_id}`
+        }
+      })
+      let notVibrate = true
+      for (const id in livingMap) {
+        if (!(id in prevLivingMapRef.current) && notVibrate) {
+          Vibration.vibrate(900)
+          notVibrate = false
+          break
+        }
+      }
+      prevLivingMapRef.current = livingMap
+      setLivingUps(livingMap)
     },
   })
 }

diff --git a/src/components/ImagesView.tsx b/src/components/ImagesView.tsx
@@ -1,9 +1,16 @@
 import { Overlay } from '@rneui/themed'
 import { Image } from 'expo-image'
 import React from 'react'
-import { Linking, Text, useWindowDimensions, View } from 'react-native'
+import {
+  Linking,
+  ScrollView,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import PagerView from 'react-native-pager-view'
 
+import useLatest from '@/hooks/useLatest'
 import { parseImgUrl } from '@/utils'
 
 import { useStore } from '../store'
@@ -38,9 +45,76 @@ function ImagesView() {
     Linking.openURL(img.split('@')[0])
   }
   // avoid view pager render all pages at same time.
-  const imageCompCache = React.useRef<
+  const imageCompCache = useLatest<
     Record<string, React.ComponentElement<any, any>>
   >({})
+  // const imageCompCache = React.useRef<
+  //   Record<string, React.ComponentElement<any, any>>
+  // >({})
+  const imageNodes = React.useMemo(() => {
+    return images.map((v, i) => {
+      let imgWidth = Math.min(width, v.width)
+      let imgHeight = (imgWidth * v.height) / v.width
+      let overflow = false
+      if (imgHeight > height) {
+        imgWidth = width
+        imgHeight = (width * v.height) / v.width
+        overflow = true
+        // imgHeight = Math.min(height, v.height)
+        // imgWidth = (v.width * imgHeight) / v.height
+      }
+      let imageView = null
+      if (imageCompCache.current[v.url]) {
+        imageView = imageCompCache.current[v.url]
+      } else if (current === i) {
+        Object.assign(imageCompCache.current, {
+          [v.url]: (
+            <Image2
+              source={{ uri: v.url }}
+              // initWidth={96}
+              // initHeight={96}
+              style={{ width: imgWidth, height: imgHeight }}
+              placeholder={require('../../assets/loading2.gif')}
+            />
+          ),
+        })
+        imageView = imageCompCache.current[v.url]
+      } else {
+        imageView = (
+          <Image
+            source={require('../../assets/loading2.gif')}
+            className="h-24 w-24"
+          />
+        )
+      }
+      // if (overflow) {
+      //   return (
+      //     <ScrollView
+      //       key={v.url}
+      //       contentContainerStyle={tw('justify-center items-center')}
+      //       className="flex-1 bg-white">
+      //       {imageView}
+      //     </ScrollView>
+      //   )
+      // }
+      return (
+        <View
+          key={v.url}
+          className="flex-1 items-center justify-center bg-black">
+          {overflow ? (
+            <ScrollView
+              key={v.url}
+              contentContainerStyle={tw('justify-center items-center')}
+              className="flex-1 bg-black">
+              {imageView}
+            </ScrollView>
+          ) : (
+            imageView
+          )}
+        </View>
+      )
+    })
+  }, [images, width, height, imageCompCache, current])
   return (
     <Overlay
       isVisible={images.length > 0}
@@ -74,43 +148,7 @@ function ImagesView() {
           offscreenPageLimit={1}
           className="flex-1"
           initialPage={currentImageIndex}>
-          {images.map((v, i) => {
-            let imgWidth = Math.min(width, v.width)
-            let imgHeight = (imgWidth * v.height) / v.width
-            if (imgHeight > height) {
-              imgHeight = Math.min(height, v.height)
-              imgWidth = (v.width * imgHeight) / v.height
-            }
-            let imageView = null
-            if (imageCompCache.current[v.url]) {
-              imageView = imageCompCache.current[v.url]
-            } else if (current === i) {
-              imageCompCache.current[v.url] = (
-                <Image2
-                  source={{ uri: v.url }}
-                  initWidth={96}
-                  initHeight={96}
-                  style={{ width: imgWidth, height: imgHeight }}
-                  placeholder={require('../../assets/loading2.gif')}
-                />
-              )
-              imageView = imageCompCache.current[v.url]
-            } else {
-              imageView = (
-                <Image
-                  source={require('../../assets/loading2.gif')}
-                  className="h-24 w-24"
-                />
-              )
-            }
-            return (
-              <View
-                key={v.url}
-                className="flex-1 items-center justify-center bg-black">
-                {imageView}
-              </View>
-            )
-          })}
+          {imageNodes}
         </PagerView>
       </View>
     </Overlay>

diff --git a/src/components/ReplyList.tsx b/src/components/ReplyList.tsx
@@ -6,6 +6,7 @@ import { ActivityIndicator, View } from 'react-native'
 
 import { type ReplyItemType, useReplies } from '@/api/replies'
 import { colors } from '@/constants/colors.tw'
+import useMemoizedFn from '@/hooks/useMemoizedFn'
 import { useStore } from '@/store'
 
 import { CommentItem } from './Comment'
@@ -19,16 +20,11 @@ export default function ReplyList() {
     update,
   } = useReplies()
   const { setRepliesInfo, repliesInfo } = useStore()
-  const handleClose = () => {
+  const handleClose = useMemoizedFn(() => {
     setRepliesInfo(null)
-  }
+  })
 
-  useFocusEffect(
-    React.useCallback(() => {
-      return handleClose
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []),
-  )
+  useFocusEffect(handleClose)
 
   return (
     <BottomSheet

diff --git a/src/hooks/useAppState.ts b/src/hooks/useAppState.ts
@@ -1,13 +1,13 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import { AppState, type AppStateStatus } from 'react-native'
 
+import useLatest from './useLatest'
 import useMounted from './useMounted'
 
 export function useAppStateChange(callback?: (s: AppStateStatus) => void) {
   const currentState = AppState.currentState
   const [appState, setAppState] = useState(currentState)
-  const callbackRef = useRef(callback)
-  callbackRef.current = callback
+  const callbackRef = useLatest(callback)
 
   useMounted(() => {
     function onChange(newState: AppStateStatus) {