-

src/routes/About/BlackTags.tsx

@@ -25,7 +25,7 @@ function BlackTags() {
         setExpanded(!expanded)
       }}>
       <ListItem
-        containerStyle={tw('flex-wrap p-0 flex-row px-1 bg-transparent')}>
+        containerStyle={tw('flex-wrap p-0 flex-row px-1 pb-4 bg-transparent')}>
         {Object.values($blackTags).map((tag) => {
           return (
             <Chip

src/routes/Collect/index.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@rneui/themed'
 import { FlashList } from '@shopify/flash-list'
 import React from 'react'
-import { Alert, Linking } from 'react-native'
+import { Alert, Linking, View } from 'react-native'
 
 import VideoListItem from '@/components/VideoItem'
 import { colors } from '@/constants/colors.tw'
@@ -87,10 +87,18 @@ function CollectList() {
       persistentScrollbar
       estimatedItemSize={100}
       ListEmptyComponent={
-        <Text className="text-center text-base my-10">暂无收藏</Text>
+        <View className="flex-1 gap-2 my-16">
+          {$collectedVideos.length === 0 ? (
+            <Text className="text-center text-base">
+              暂无收藏{'\n\n'}在视频播放页点击⭐收藏按钮
+            </Text>
+          ) : (
+            <Text className="text-center text-base">无搜索结果</Text>
+          )}
+        </View>
       }
       ListFooterComponent={
-        $collectedVideos.length ? (
+        collectVideos.length ? (
           <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
             暂无更多
           </Text>

src/routes/History/index.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@rneui/themed'
 import { FlashList } from '@shopify/flash-list'
 import React from 'react'
-import { Linking } from 'react-native'
+import { Linking, View } from 'react-native'
 
 import VideoListItem from '@/components/VideoItem'
 import { colors } from '@/constants/colors.tw'
@@ -11,7 +11,8 @@ import type { CollectVideoInfo, HistoryVideoInfo } from '@/types'
 
 function HistoryList() {
   const { $watchedVideos } = useStore()
-  const headerTitle = `⏰ 观看历史（${Object.keys($watchedVideos).length}）`
+  const count = Object.keys($watchedVideos).length
+  const headerTitle = `⏰ 观看历史（${count}）`
   const blackColor = tw(colors.black.text).color
   const [searchKeyWord, setSearchKeyWord] = React.useState('')
   useUpdateNavigationOptions(
@@ -73,12 +74,18 @@ function HistoryList() {
       persistentScrollbar
       estimatedItemSize={100}
       ListEmptyComponent={
-        <Text className="text-center text-base my-10">暂无记录</Text>
+        <View className="flex-1 gap-2 my-16">
+          {count === 0 ? (
+            <Text className="text-center text-base">暂无观看记录</Text>
+          ) : (
+            <Text className="text-center text-base">无搜索结果</Text>
+          )}
+        </View>
       }
       ListFooterComponent={
         list.length ? (
           <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
-            暂无更多（最近约400条）
+            暂无更多（保存最近约420条）
           </Text>
         ) : null
       }

src/routes/Music/index.tsx

@@ -217,12 +217,13 @@ function MusicList() {
           // ListHeaderComponent={<MusicPlayerBar />}
           ListEmptyComponent={
             <View className="flex-1 gap-2 my-16">
-              <Text className="text-center text-base">暂无歌曲</Text>
               {list.length === 0 ? (
                 <Text className="text-center text-base">
-                  你可以在视频播放页面右上角添加
+                  暂无歌曲{'\n\n'}在视频播放页面右上角菜单添加
                 </Text>
-              ) : null}
+              ) : (
+                <Text className="text-center text-base">无搜索结果</Text>
+              )}
             </View>
           }
           ListFooterComponent={

src/routes/Play/inject-play.js

@@ -74,6 +74,9 @@ function __$hack() {
               if (node.src !== newVideoUrl) {
                 node.src = newVideoUrl
                 node.play()
+                setTimeout(() => {
+                  window.reportPlayTime()
+                }, 3000)
               }
               setTimeout(() => {
                 if (node.src !== newVideoUrl) {
@@ -157,6 +160,7 @@ function __$hack() {
     })
 
     video.addEventListener('ended', () => {
+      window.reportPlayTime()
       const rateBtn = document.getElementById('play-rate-button')
       rateBtn.dataset.rate = `1${xx}`
       rateBtn.textContent = 1 + xx
@@ -188,9 +192,6 @@ function __$hack() {
       lastTime = video.currentTime
     })
 
-    video.addEventListener('ended', () => {
-      window.reportPlayTime()
-    })
     window.reportPlayTime = () => {
       window.ReactNativeWebView.postMessage(
         JSON.stringify({

src/routes/VideoList/Test.tsx

@@ -10,7 +10,6 @@ export default function Test() {
   const [count, setCount] = React.useState(0)
   const [time, setTime] = React.useState(getTime)
   const state = useAppState()
-  console.log(99, state)
   // useBackgroundTask(
   //   'test',
   //   useMemoizedFn(() => {

src/routes/WebPage/index.tsx

@@ -1,6 +1,6 @@
-import { useRefresh } from '@react-native-community/hooks'
+import { useBackHandler, useRefresh } from '@react-native-community/hooks'
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
-import { Button, Text } from '@rneui/themed'
+import { Text } from '@rneui/themed'
 import { ResizeMode, Video } from 'expo-av'
 import React from 'react'
 import {
@@ -81,36 +81,52 @@ function WebPage({ route }: Props) {
     : ''
   const liveUrls = useLiveUrl(enableBackgroundPlay ? roomId : '')
   const videoRef = React.useRef<Video>(null)
+  const [validIndex, setValidIndex] = React.useState(1)
+  const backPlay = enableBackgroundPlay && roomId && liveUrls?.length
+  useBackHandler(() => {
+    if (backPlay) {
+      // handle it
+      setEnableBackgroundPlay(false)
+      return true
+    }
+    // let the default thing happen
+    return false
+  })
 
-  if (enableBackgroundPlay && roomId && liveUrls?.length) {
+  if (backPlay) {
+    const liveUrl = liveUrls[validIndex]
     return (
       <View className="relative flex flex-1">
         <Video
           ref={videoRef}
-          className="h-full w-full"
+          className="h-full w-full min-h-96"
+          key={liveUrl}
           source={{
-            uri: liveUrls[2],
+            uri: liveUrl,
             headers: {
               'user-agent': UA,
               origin: 'https://live.bilibili.com',
               referer: 'https://live.bilibili.com',
             },
           }}
-          // onError={(err) => {
-          //   // console.log(788, err)
-          // }}
+          onError={(err) => {
+            showToast('抱歉出错了' + err)
+            if (validIndex < liveUrls.length - 1) {
+              setValidIndex(validIndex + 1)
+            }
+          }}
           useNativeControls
           resizeMode={ResizeMode.CONTAIN}
           shouldPlay
         />
         <View className="absolute top-2 left-2 flex-row items-center gap-4">
-          <Button
+          {/* <Button
             title={' 返回 '}
             size="sm"
             onPress={() => {
               setEnableBackgroundPlay(false)
             }}
-          />
+          /> */}
           <Text>当前支持后台播放</Text>
         </View>
       </View>

src/routes/WebPage/inject-code.js

@@ -7,6 +7,15 @@ function __$hack() {
       payload: document.title,
     }),
   )
+  const waitDom = (selector, callback) => {
+    const timer = setInterval(() => {
+      const dom = document.querySelector(selector)
+      if (dom) {
+        clearInterval(timer)
+        callback(dom)
+      }
+    }, 200)
+  }
   if (window.location.pathname === '/read/mobile') {
     style.textContent = `
     #app bili-open-app {
@@ -155,50 +164,52 @@ function __$hack() {
       .then((res) => res.json())
       .then((res) => {
         if (res.code === 0) {
-          document
-            .querySelector('.web-player-danmaku')
-            ?.nextElementSibling?.click()
-          setTimeout(() => {
-            document.querySelector('video')?.removeAttribute('autoplay')
-          }, 1000)
+          waitDom('.web-player-danmaku', (dom) => {
+            dom.nextElementSibling?.click()
+            setTimeout(() => {
+              document.querySelector('video')?.removeAttribute('autoplay')
+            }, 1000)
+          })
           const liveTime = new Date(res.data.room_info.live_start_time * 1000)
           const minute = liveTime.getMinutes()
-          const liveInfo = document.querySelector('.room-info')
-          const liveTimeSpan = document.createElement('span')
-          liveTimeSpan.textContent = `${liveTime.getHours()}:${
-            minute < 10 ? `0${minute}` : minute
-          }开始`
-          liveTimeSpan.style.cssText = `
+          waitDom('.room-info', (liveInfo) => {
+            const liveTimeSpan = document.createElement('span')
+            liveTimeSpan.textContent = `${liveTime.getHours()}:${
+              minute < 10 ? `0${minute}` : minute
+            }开始`
+            liveTimeSpan.style.cssText = `
             font-size: 12px;
             color: white;
             margin-left: 10px;
             margin-right: 6px;
             `
-          liveInfo.appendChild(liveTimeSpan)
-          const backplay = document.createElement('span')
-          backplay.textContent = '后台播放'
-          backplay.style.cssText = `
+            liveInfo.appendChild(liveTimeSpan)
+
+            const backplay = document.createElement('span')
+            backplay.textContent = '后台播放'
+            backplay.style.cssText = `
             font-size: 12px;
             color: white;
             margin-left: 8px;
             margin-right: 8px;
           `
-          backplay.id = 'live-background-button'
-          backplay.addEventListener('click', (evt) => {
-            evt.stopPropagation()
-            if (backplay.dataset.backgroundPlay === 'true') {
-              backplay.dataset.backgroundPlay = 'false'
-            } else {
-              backplay.dataset.backgroundPlay = 'true'
-              window.ReactNativeWebView.postMessage(
-                JSON.stringify({
-                  action: 'enable-background-play',
-                  payload: null,
-                }),
-              )
-            }
+            backplay.id = 'live-background-button'
+            backplay.addEventListener('click', (evt) => {
+              evt.stopPropagation()
+              if (backplay.dataset.backgroundPlay === 'true') {
+                backplay.dataset.backgroundPlay = 'false'
+              } else {
+                backplay.dataset.backgroundPlay = 'true'
+                window.ReactNativeWebView.postMessage(
+                  JSON.stringify({
+                    action: 'enable-background-play',
+                    payload: null,
+                  }),
+                )
+              }
+            })
+            liveInfo.appendChild(backplay)
           })
-          liveInfo.appendChild(backplay)
         }
       })
   } else if (window.location.pathname.startsWith('/topic-detail')) {