fix: cannot load more videos on vertical monitor (#704)

close #704

src/contentScripts/views/Favorites/Favorites.vue

@@ -30,7 +30,7 @@ const activatedCategoryCover = ref<string>('')
 const shouldMoveCtrlBarUp = ref<boolean>(false)
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>('')
-const { handlePageRefresh, handleReachBottom } = useBewlyApp()
+const { handlePageRefresh, handleReachBottom, haveScrollbar } = useBewlyApp()
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
@@ -130,6 +130,9 @@ async function getFavoriteResources(
 
       if (!res.data.medias)
         noMoreContent.value = true
+
+      if (!haveScrollbar())
+        await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword)
     }
   }
   finally {

src/contentScripts/views/History/History.vue

@@ -21,7 +21,7 @@ const historyList = reactive<Array<HistoryItem>>([])
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
 const historyStatus = ref<boolean>()
-const { handlePageRefresh, handleReachBottom } = useBewlyApp()
+const { handlePageRefresh, handleReachBottom, haveScrollbar } = useBewlyApp()
 
 const HistoryBusiness = computed(() => {
   return Business
@@ -79,6 +79,10 @@ function getHistoryList() {
         }
 
         noMoreContent.value = false
+
+        if (!haveScrollbar()) {
+          getHistoryList()
+        }
       }
       isLoading.value = false
     })

src/contentScripts/views/Home/components/Following.vue

@@ -41,7 +41,7 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
-const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+const { handleReachBottom, handlePageRefresh, haveScrollbar } = useBewlyApp()
 
 onMounted(async () => {
   initData()
@@ -144,6 +144,10 @@ async function getFollowedUsersVideos() {
           }
         })
       }
+
+      if (!haveScrollbar()) {
+        getFollowedUsersVideos()
+      }
     }
     else if (response.code === -101) {
       needToLoginFirst.value = true

src/contentScripts/views/Home/components/ForYou.vue

@@ -176,7 +176,6 @@ async function getRecommendVideos() {
     const pendingVideos: VideoElement[] = Array.from({ length: pageSize }, () => ({
       uniqueId: `unique-id-${(videoList.value.length || 0) + i++})}`,
     } satisfies VideoElement))
-    let lastVideoListLength = videoList.value.length
     videoList.value.push(...pendingVideos)
 
     const response: forYouResult = await api.video.getRecommendVideos({
@@ -195,8 +194,6 @@ async function getRecommendVideos() {
       response.data.item.forEach((item: VideoItem) => {
         if (!filterFunc.value || filterFunc.value(item))
           resData.push(item)
-
-        // resData.push(item)
       })
 
       // when videoList has length property, it means it is the first time to load
@@ -205,10 +202,10 @@ async function getRecommendVideos() {
       }
       else {
         resData.forEach((item) => {
-          videoList.value[lastVideoListLength++] = {
+          videoList.value.push({
             uniqueId: `${item.id}`,
             item,
-          }
+          })
         })
       }
 
@@ -231,7 +228,6 @@ async function getAppRecommendVideos() {
     const pendingVideos: AppVideoElement[] = Array.from({ length: pageSize }, () => ({
       uniqueId: `unique-id-${(appVideoList.value.length || 0) + i++})}`,
     } satisfies AppVideoElement))
-    let lastVideoListLength = appVideoList.value.length
     appVideoList.value.push(...pendingVideos)
 
     const response: AppForYouResult = await api.video.getAppRecommendVideos({
@@ -257,10 +253,10 @@ async function getAppRecommendVideos() {
       }
       else {
         resData.forEach((item) => {
-          appVideoList.value[lastVideoListLength++] = {
+          appVideoList.value.push({
             uniqueId: `${item.idx}`,
             item,
-          }
+          })
         })
       }
 
@@ -273,8 +269,6 @@ async function getAppRecommendVideos() {
     }
   }
   finally {
-    // Since the video list in app recommendation mode will filter the ad cards,
-    // after loading, the video list will be filtered again to remove the empty cards
     appVideoList.value = appVideoList.value.filter(video => video.item)
   }
 }

src/contentScripts/views/Home/components/SubscribedSeries.vue

@@ -42,7 +42,7 @@ const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
 const noMoreContentWarning = ref<boolean>(false)
-const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+const { handleReachBottom, handlePageRefresh, haveScrollbar } = useBewlyApp()
 
 onMounted(async () => {
   initData()
@@ -148,6 +148,10 @@ async function getFollowedUsersVideos() {
           }
         })
       }
+
+      if (!haveScrollbar()) {
+        getFollowedUsersVideos()
+      }
     }
     else if (response.code === -101) {
       needToLoginFirst.value = true

src/contentScripts/views/Home/components/Trending.vue

@@ -35,7 +35,7 @@ const isLoading = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const pn = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
-const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+const { handleReachBottom, handlePageRefresh, haveScrollbar } = useBewlyApp()
 
 onMounted(async () => {
   await initData()
@@ -115,6 +115,10 @@ async function getTrendingVideos() {
           }
         })
       }
+
+      if (!haveScrollbar()) {
+        getTrendingVideos()
+      }
     }
   }
   finally {

src/contentScripts/views/WatchLater/WatchLater.vue

@@ -18,7 +18,7 @@ const noMoreContent = ref<boolean>()
 const allWatchLaterList = ref<VideoItem[]>([])
 const currentWatchLaterList = ref<VideoItem[]>([])
 const watchLaterCount = ref<number>(0)
-const { handlePageRefresh, handleReachBottom } = useBewlyApp()
+const { handlePageRefresh, handleReachBottom, haveScrollbar } = useBewlyApp()
 const pageNum = ref<number>(1)
 
 onMounted(() => {
@@ -81,6 +81,10 @@ function getCurrentWatchLaterList() {
   }
   pageNum.value++
   currentWatchLaterList.value.push(...currentList)
+
+  if (!haveScrollbar()) {
+    getCurrentWatchLaterList()
+  }
 }
 
 function deleteWatchLaterItem(index: number, aid: number) {