chore: keep up to date with master

app/(auth)/(tabs)/(home)/index.tsx

@@ -25,11 +25,10 @@ import {
 import NetInfo from "@react-native-community/netinfo";
 import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
-  Platform,
   RefreshControl,
   ScrollView,
   TouchableOpacity,

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -1,12 +1,8 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { FlatList, useWindowDimensions, View } from "react-native";
 
 import { Text } from "@/components/common/Text";
@@ -16,6 +12,7 @@ import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
@@ -32,7 +29,6 @@ import {
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import { orientationAtom } from "@/utils/atoms/orientation";
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
@@ -60,12 +56,13 @@ const Page = () => {
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
   const [sortBy, _setSortBy] = useAtom(sortByAtom);
   const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
-  const [orientation] = useAtom(orientationAtom);
   const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
   const [sortOrderPreference, setOderByPreference] = useAtom(
     sortOrderPreferenceAtom
   );
 
+  const { orientation } = useOrientation();
+
   useEffect(() => {
     const sop = getSortOrderPreference(libraryId, sortOrderPreference);
     if (sop) {
@@ -106,11 +103,12 @@ const Page = () => {
     [libraryId, sortOrderPreference]
   );
 
-  const getNumberOfColumns = useCallback(() => {
-    if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
-    if (screenWidth < 600) return 5;
-    if (screenWidth < 960) return 6;
-    if (screenWidth < 1280) return 7;
+  const nrOfCols = useMemo(() => {
+    if (screenWidth < 300) return 2;
+    if (screenWidth < 500) return 3;
+    if (screenWidth < 800) return 5;
+    if (screenWidth < 1000) return 6;
+    if (screenWidth < 1500) return 7;
     return 6;
   }, [screenWidth, orientation]);
 
@@ -219,7 +217,7 @@ const Page = () => {
 
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
-      <MemoizedTouchableItemRouter
+      <TouchableItemRouter
         key={item.Id}
         style={{
           width: "100%",
@@ -230,10 +228,10 @@ const Page = () => {
         <View
           style={{
             alignSelf:
-              orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                ? index % 3 === 0
+              orientation === ScreenOrientation.OrientationLock.PORTRAIT_UP
+                ? index % nrOfCols === 0
                   ? "flex-end"
-                  : (index + 1) % 3 === 0
+                  : (index + 1) % nrOfCols === 0
                   ? "flex-start"
                   : "center"
                 : "center",
@@ -244,7 +242,7 @@ const Page = () => {
           <ItemPoster item={item} />
           <ItemCardText item={item} />
         </View>
-      </MemoizedTouchableItemRouter>
+      </TouchableItemRouter>
     ),
     [orientation]
   );
@@ -429,6 +427,7 @@ const Page = () => {
 
   return (
     <FlashList
+      key={orientation}
       ListEmptyComponent={
         <View className="flex flex-col items-center justify-center h-full">
           <Text className="font-bold text-xl text-neutral-500">No results</Text>
@@ -437,10 +436,10 @@ const Page = () => {
       contentInsetAdjustmentBehavior="automatic"
       data={flatData}
       renderItem={renderItem}
-      extraData={orientation}
+      extraData={[orientation, nrOfCols]}
       keyExtractor={keyExtractor}
       estimatedItemSize={244}
-      numColumns={getNumberOfColumns()}
+      numColumns={nrOfCols}
       onEndReached={() => {
         if (hasNextPage) {
           fetchNextPage();

app/(auth)/play-offline-video.tsx

@@ -9,14 +9,8 @@ import {
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import {
-  PlaybackType,
-  usePlaySettings,
-} from "@/providers/PlaySettingsProvider";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { ticksToSeconds } from "@/utils/time";
-import { Api } from "@jellyfin/sdk";
 import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -27,7 +21,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { SelectedTrackType } from "react-native-video";
 
@@ -37,7 +31,10 @@ export default function page() {
   const [settings] = useSettings();
   const videoRef = useRef<VlcPlayerViewRef>(null);
 
-  const screenDimensions = Dimensions.get("screen");
+  const dimensions = useWindowDimensions();
+  useOrientation();
+  useOrientationSettings();
+  useAndroidNavigationBar();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);
@@ -176,8 +173,8 @@ export default function page() {
   return (
     <View
       style={{
-        width: screenDimensions.width,
-        height: screenDimensions.height,
+        width: dimensions.width,
+        height: dimensions.height,
         position: "relative",
       }}
       className="flex flex-col items-center justify-center"

app/(auth)/play-video.tsx

@@ -18,7 +18,7 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
   OnProgressData,
@@ -34,8 +34,7 @@ export default function page() {
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
   const firstTime = useRef(true);
-
-  const screenDimensions = Dimensions.get("screen");
+  const dimensions = useWindowDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);
@@ -170,7 +169,7 @@ export default function page() {
     }, [play, stop])
   );
 
-  const { orientation } = useOrientation();
+  useOrientation();
   useOrientationSettings();
   useAndroidNavigationBar();
 
@@ -214,23 +213,36 @@ export default function page() {
   return (
     <View
       style={{
-        width: screenDimensions.width,
-        height: screenDimensions.height,
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        width: dimensions.width,
+        height: dimensions.height,
         position: "relative",
       }}
-      className="flex flex-col items-center justify-center"
     >
       <StatusBar hidden />
       <Pressable
         onPress={() => {
           setShowControls(!showControls);
         }}
-        className="absolute z-0 h-full w-full"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: dimensions.width,
+          height: dimensions.height,
+          zIndex: 0,
+        }}
       >
         <Video
           ref={videoRef}
           source={videoSource}
-          style={{ width: "100%", height: "100%" }}
+          style={{
+            width: dimensions.width,
+            height: dimensions.height,
+          }}
           resizeMode={ignoreSafeAreas ? "cover" : "contain"}
           onProgress={onProgress}
           onError={() => {}}