🔃 - some improvements and added pull to refresh

.gitignore

@@ -10,6 +10,8 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+android/
+ios/
 
 # macOS
 .DS_Store
@@ -74,4 +76,5 @@ buck-out/
 web-build/
 dist/
 
+
 # @end expo-cli

app.json

@@ -21,9 +21,12 @@
       "backgroundColor": "#141414"
     },
     "updates": {
-      "fallbackToCacheTimeout": 0
+      "fallbackToCacheTimeout": 0,
+      "url": "https://u.expo.dev/9993d8be-e845-45b5-9a2f-4e65a8877e0f"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": false,
       "bundleIdentifier": "com.tdanks2000.StreamAble"
@@ -34,7 +37,7 @@
         "backgroundColor": "#0f0f0f"
       },
       "package": "com.tdanks2000.StreamAble",
-      "versionCode": 20
+      "versionCode": 21
     },
     "web": {
       "favicon": "./assets/favicon.png"
@@ -43,6 +46,9 @@
       "eas": {
         "projectId": "9993d8be-e845-45b5-9a2f-4e65a8877e0f"
       }
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
     }
   }
 }

package.json

@@ -13,7 +13,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.1",
+    "@apollo/client": "^3.7.2",
     "@expo-google-fonts/inter": "^0.2.2",
     "@expo-google-fonts/open-sans": "^0.2.2",
     "@react-native-async-storage/async-storage": "~1.17.3",

src/components/Banner/index.js

@@ -7,7 +7,7 @@ import { ScrollView } from "react-native";
 import BannerItem from "./BannerItem";
 
 const Banner = () => {
-  const { data } = useQuery("BannerData", () => api.getTopRated(1));
+  const { data } = useQuery(["BannerData"], () => api.getTopRated(5));
 
   return (
     <ScrollView
@@ -16,7 +16,7 @@ const Banner = () => {
       pagingEnabled={true}
       snapToAlignment={"center"}
     >
-      {data?.results.splice(0, 5).map((item) => {
+      {data?.results.map((item) => {
         return <BannerItem key={`banner-${item.id}`} {...item} />;
       })}
     </ScrollView>

src/components/Card/Card.styles.js

@@ -21,7 +21,7 @@ export const CardContent = styled.View`
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 10px 5px;
+  padding: 10px 7px;
   overflow: hidden;
 `;
 

src/components/Card/index.js

@@ -26,7 +26,7 @@ const Card = (props) => {
         source={{ uri: props?.media?.coverImage?.large || image }}
       >
         <CardContent>
-          <CardTitle numberOfLines={2}>
+          <CardTitle numberOfLines={2} ellipsizeMode={"tail"}>
             {props?.media?.title?.english ||
               props?.media?.title?.romaji ||
               title_english ||

src/components/Player/Controls/PlayPause/index.js

@@ -4,6 +4,7 @@ import { CanPressIcon, PauseIcon, PlayIcon } from "./PlayPause.styles";
 
 const PlayPause = ({ status, videoRef, handleInactive }) => {
   const handlePlayPause = () => {
+    if (!status.isLoaded) return false;
     status.isPlaying
       ? videoRef.current.pauseAsync()
       : videoRef.current.playAsync();

src/components/Player/Controls/index.js

@@ -90,7 +90,7 @@ const Controls = (props) => {
   let duration = 5000;
   let timeout;
   const handleInactive = () => {
-    setHideControls(false);
+    setHideControls((prev) => !prev);
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       setHideControls(true);

src/components/Player/index.js

@@ -1,6 +1,6 @@
 import { View } from "react-native";
-import React, { useCallback, useRef, useState } from "react";
-import { ResizeMode } from "expo-av";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Audio, ResizeMode, VideoProps } from "expo-av";
 import { Container, VideoPlayer } from "./styles";
 import Controls from "./Controls";
 import {
@@ -31,7 +31,7 @@ const Player = (props) => {
   const { source, referer, title, episode, nextEpisodeId, animeId, id } = props;
   const videoRef = useRef(null);
   const [status, setStatus] = useState({});
-  const [playing, setPlaying] = useState(false);
+  const [playing, setPlaying] = useState(true);
   const [watched, setWatched] = useState(false);
 
   const {
@@ -157,6 +157,27 @@ const Player = (props) => {
     }
   };
 
+  const setAudio = async () => {
+    try {
+      await Audio.setAudioModeAsync({
+        playsInSilentModeIOS: true,
+        staysActiveInBackground: false,
+        shouldDuckAndroid: false,
+      });
+      await Audio.setIsEnabledAsync(true);
+    } catch (e) {
+      console.log({
+        type: "NoneFatal",
+        message: "Audio.setAudioModeAsync",
+        obj: e,
+      });
+    }
+  };
+
+  useEffect(() => {
+    setAudio();
+  }, []);
+
   useFocusEffect(
     useCallback(() => {
       continueWatching();
@@ -167,16 +188,17 @@ const Player = (props) => {
     <Container>
       <VideoPlayer
         ref={videoRef}
+        {...VideoProps}
         source={{
           uri: source,
           headers: {
             "User-Agent": USER_AGENT,
             Referrer: referer,
           },
         }}
-        volume={1.0}
+        volume={1}
         isMuted={false}
-        shouldPlay={true}
+        shouldPlay={playing}
         isLooping={false}
         useNativeControls={false}
         resizeMode={ResizeMode.CONTAIN}

src/components/User/User.styles.js

@@ -10,7 +10,7 @@ export const Container = styled.View`
   margin: 0 25px;
   padding-bottom: 25px;
   margin-bottom: 25px;
-  margin-top: 10px;
+  // margin-top: 10px;
   border-bottom-width: 1px;
   border-bottom-color: ${({ theme }) => theme.text.secondary};
 `;

src/components/settings/disclaimer/index.js

@@ -11,7 +11,7 @@ import {
 import Constants from "expo-constants";
 
 const Disclaimer = () => {
-  const version = Constants.manifest.version;
+  const version = Constants?.manifest?.version || "BETA";
 
   const onPress = (url) => {
     Linking.openURL(url);

src/containers/Completed/index.js

@@ -1,5 +1,5 @@
 import { ScrollView } from "react-native";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Card } from "../../components";
 import { Container, Title } from "../Container.styles";
 import { useAccessToken } from "../../contexts";
@@ -12,7 +12,7 @@ import { sortBy } from "lodash";
 import { utils } from "../../utils";
 import { useFocusEffect } from "@react-navigation/native";
 
-const Completed = () => {
+const Completed = ({ refreshing, setRefreshing }) => {
   const [status, setStatus] = useState(MediaListStatusWithLabel[4].value);
 
   const { accessToken, setAccessToken } = useAccessToken();
@@ -26,7 +26,7 @@ const Completed = () => {
     data: animeListData,
     refetch,
   } = useGetAnimeListQuery({
-    skip: !viewerData?.Viewer?.id || !accessToken,
+    skip: !accessToken || !viewerData?.Viewer?.id,
     variables: {
       userId: viewerData?.Viewer?.id,
       status,
@@ -49,19 +49,20 @@ const Completed = () => {
     [animeListData]
   );
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!loadingAnimeList) refetch();
-    }, [])
-  );
+  useEffect(() => {
+    if (refreshing) {
+      refetch();
+      setRefreshing(loadingAnimeList);
+    }
+  }, [refreshing]);
 
   if (!list.length) return null;
   return (
     <Container>
       <Title>Completed</Title>
       <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
         {list.map((item, i) => (
-          <Card key={`completed-${item.id}`} {...item} index={i} />
+          <Card key={`completed-${item?.id}`} {...item} index={i} />
         ))}
       </ScrollView>
     </Container>

src/containers/ContinueWatching/index.js

@@ -1,5 +1,5 @@
 import { ScrollView } from "react-native";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Container, Title } from "../Container.styles";
 import WatchingCard from "../../components/WatchingCard";
@@ -19,7 +19,7 @@ import { useAccessToken } from "../../contexts";
 import { MediaListStatusWithLabel } from "../../utils/constants";
 import { utils } from "../../utils";
 
-const ContinueWatching = () => {
+const ContinueWatching = ({ refreshing, setRefreshing }) => {
   const [data, setData] = useState(null);
   const [status, setStatus] = useState(MediaListStatusWithLabel[0].value);
 
@@ -34,7 +34,7 @@ const ContinueWatching = () => {
     data: animeListData,
     refetch,
   } = useGetAnimeListQuery({
-    skip: !viewerData?.Viewer?.id || !accessToken,
+    skip: !accessToken || !viewerData?.Viewer?.id,
     variables: {
       userId: viewerData?.Viewer?.id,
       status,
@@ -89,11 +89,13 @@ const ContinueWatching = () => {
     }, [])
   );
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!loadingAnimeList) refetch();
-    }, [])
-  );
+  useEffect(() => {
+    if (refreshing) {
+      getContinueWatching();
+      refetch();
+      setRefreshing(loadingAnimeList);
+    }
+  }, [refreshing]);
 
   if (
     !uniqueList ||

src/containers/Dropped/index.js

@@ -1,5 +1,5 @@
 import { ScrollView } from "react-native";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Card } from "../../components";
 import { Container, Title } from "../Container.styles";
 import { useAccessToken } from "../../contexts";
@@ -12,7 +12,7 @@ import { sortBy } from "lodash";
 import { utils } from "../../utils";
 import { useFocusEffect } from "@react-navigation/native";
 
-const Dropped = () => {
+const Dropped = ({ refreshing, setRefreshing }) => {
   const [status, setStatus] = useState(MediaListStatusWithLabel[3].value);
 
   const { accessToken, setAccessToken } = useAccessToken();
@@ -26,7 +26,7 @@ const Dropped = () => {
     data: animeListData,
     refetch,
   } = useGetAnimeListQuery({
-    skip: !viewerData?.Viewer?.id || !accessToken,
+    skip: !accessToken || !viewerData?.Viewer?.id,
     variables: {
       userId: viewerData?.Viewer?.id,
       status,
@@ -49,11 +49,12 @@ const Dropped = () => {
     [animeListData]
   );
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!loadingAnimeList) refetch();
-    }, [])
-  );
+  useEffect(() => {
+    if (refreshing) {
+      refetch();
+      setRefreshing(loadingAnimeList);
+    }
+  }, [refreshing]);
 
   if (!list.length) return null;
   return (

src/containers/OnHold/index.js

@@ -1,5 +1,5 @@
 import { ScrollView } from "react-native";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Card } from "../../components";
 import { Container, Title } from "../Container.styles";
 import { useAccessToken } from "../../contexts";
@@ -12,7 +12,7 @@ import { sortBy } from "lodash";
 import { utils } from "../../utils";
 import { useFocusEffect } from "@react-navigation/native";
 
-const OnHold = () => {
+const OnHold = ({ refreshing, setRefreshing }) => {
   const [status, setStatus] = useState(MediaListStatusWithLabel[1].value);
 
   const { accessToken, setAccessToken } = useAccessToken();
@@ -26,7 +26,7 @@ const OnHold = () => {
     data: animeListData,
     refetch,
   } = useGetAnimeListQuery({
-    skip: !viewerData?.Viewer?.id || !accessToken,
+    skip: !accessToken || !viewerData?.Viewer?.id,
     variables: {
       userId: viewerData?.Viewer?.id,
       status,
@@ -49,11 +49,12 @@ const OnHold = () => {
     [animeListData]
   );
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!loadingAnimeList) refetch();
-    }, [])
-  );
+  useEffect(() => {
+    if (refreshing) {
+      refetch();
+      setRefreshing(loadingAnimeList);
+    }
+  }, [refreshing]);
 
   if (!list.length) return null;
   return (