0.1.0 (#6)

* ⏩ - Show continue watching from anilist * 🔢 = update version * 1️⃣ 2️⃣ - episode list now synced with anilist * ℹ️ - info modal now shows anilist data if logged ino * 🐜🦶 - squashing some bugs * 🍥 - anilist fully added * Update readme.md Co-authored-by: Tdanks2000 <[email protected]>
StreamAble-Team · Dec 7, 2022 · f09c38c · f09c38c
1 parent 28a7523
commit f09c38c
Show file tree

Hide file tree

Showing 39 changed files with 769 additions and 81 deletions.
diff --git a/app.json b/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "StreamAble",
     "slug": "StreamAble",
-    "version": "0.0.6",
+    "version": "0.1.0",
     "scheme": "streamable",
     "plugins": [
       [
@@ -35,7 +35,7 @@
         "backgroundColor": "#0f0f0f"
       },
       "package": "com.tdanks2000.StreamAble",
-      "versionCode": 8
+      "versionCode": 12
     },
     "web": {
       "favicon": "./assets/favicon.png"

diff --git a/assets/adaptive-icon.png b/assets/adaptive-icon.png
diff --git a/assets/favicon.png b/assets/favicon.png
diff --git a/assets/icon.png b/assets/icon.png
diff --git a/assets/splash.png b/assets/splash.png
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "streamable-app",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "license": "MIT",
   "scripts": {
     "start": "expo start",
     "startDev": "expo start --dev-client",
     "android": "expo run:android",
     "build": "eas build -p android --profile apk",
+    "buildLocal": "eas build -p android --profile apk --local",
     "buildDev": "eas build -p android --profile development",
     "ios": "expo run:ios",
     "web": "expo start --web"
@@ -40,6 +41,7 @@
     "expo-video-player": "^2.2.0",
     "expo-web-browser": "~12.0.0",
     "graphql-tag": "^2.12.6",
+    "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "react": "18.1.0",
     "react-native": "0.70.5",

diff --git a/readme.md b/readme.md
@@ -36,7 +36,7 @@ The app is still in alpha, so it may not work as expected. If you find any bugs,
 - [x] Custom video player
 - [x] Dub support
 - [X] Collections support (Plant to watch, watching, watched, backlog, etc)
-- [ ] Sync with anilist, mal etc etc
+- [X] Sync with anilist
 - [ ] Picture in picture
 - [ ] Download Episodes
 - [ ] Manga support
@@ -89,10 +89,10 @@ The app is still in alpha, so it may not work as expected. If you find any bugs,
 ## Shoutouts 
 
 <p float="left">
-    <a href="https://github.com/aidanjuma" style="margin-right: 20px">
+    <a href="https://github.com/aidanjuma" style="margin-right: 20px; width: 50px">
         <img src="https://avatars.githubusercontent.com/u/53954981" alt="aidan" style="width: 50px; border-radius: 50%">
     </a>
-    <a href="https://github.com/consumet/">
+    <a href="https://github.com/consumet/" style="width: 50px;">
         <img src="https://avatars.githubusercontent.com/u/105397082" alt="aidan" style="width: 50px; border-radius: 50%">
     </a>
 </p>

diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -11,26 +11,26 @@ import { useNavigation } from "@react-navigation/native";
 
 const Card = (props) => {
   const navigation = useNavigation();
-  const {
-    title: {
-      romaji: title_romaji,
-      userPreferred: title_userPreferred,
-      english: title_english,
-    },
-    image,
-    cover,
-  } = props;
+  const { title, image, cover } = props;
+
+  const title_english = title?.english;
+  const title_romaji = title?.romaji;
 
   const handlePress = (event) => {
     navigation.navigate("Info", { id: props.id });
   };
 
   return (
     <CardContainer index={props.index} onPress={handlePress}>
-      <CardBackground source={{ uri: image }}>
+      <CardBackground
+        source={{ uri: props?.media?.coverImage?.large || image }}
+      >
         <CardContent>
           <CardTitle numberOfLines={2}>
-            {title_english || title_userPreferred || title_romaji}
+            {props?.media?.title?.english ||
+              props?.media?.title?.romaji ||
+              title_english ||
+              title_romaji}
           </CardTitle>
         </CardContent>
       </CardBackground>

diff --git a/src/components/Info/Episodes/Episode/index.js b/src/components/Info/Episodes/Episode/index.js
@@ -25,7 +25,7 @@ const Episode = (props) => {
   const { setQualities, setDataToSend, setShowQualityModal } = props;
   const navigation = useNavigation();
   const [watched, setWatched] = useState(false);
-  const [watchedAmount, setWatchedAmount] = useState(0);
+  const [watchedAmount, setWatchedAmount] = useState(props?.watchedAmount || 0);
 
   const handlePress = async () => {
     const { headers, sources } = await api.getSource(props.id);
@@ -48,6 +48,7 @@ const Episode = (props) => {
   };
 
   const checkIfWatched = async () => {
+    if (props?.watchedAmount) return false;
     // Get data from sqlite and check if the episode is watched
     const db = await openEpisodeDatabase();
     await createEpisodeTable(db);

diff --git a/src/components/Info/Episodes/index.js b/src/components/Info/Episodes/index.js
@@ -1,21 +1,37 @@
 import React, { useEffect, useState } from "react";
+import { useAccessToken } from "../../../contexts";
+import { MediaListStatusWithLabel } from "../../../utils/constants";
+import {
+  useGetAnimeListQuery,
+  useGetViewerQuery,
+} from "../../../utils/graphql/generated";
 import Paginate from "../../Paginate";
 import { Container, Wrapper } from "../../styles";
 import Episode from "./Episode";
 import { Text } from "./Episodes.styles";
 
 const Episodes = (props) => {
+  const { accessToken, setAccessToken } = useAccessToken();
+  const [status, setStatus] = useState(MediaListStatusWithLabel[0].value);
+
+  const { loading: loadingViewer, data: viewerData } = useGetViewerQuery({
+    skip: !accessToken,
+  });
+
   const {
     episodes,
     totalEpisodes,
     setQualities,
     setShowQualityModal,
     setDataToSend,
+    anilistData,
   } = props;
   const [selectedPage, setSelectedPage] = useState(1);
 
   const pageSize = 50;
 
+  const progress = anilistData.Media?.mediaListEntry?.progress || 0;
+
   return (
     <Container>
       <Paginate
@@ -39,6 +55,9 @@ const Episodes = (props) => {
               setQualities={setQualities}
               setShowQualityModal={setShowQualityModal}
               setDataToSend={setDataToSend}
+              watchedAmount={
+                progress && episode.number <= progress ? 100 : null
+              }
             />
           ))}
       </Wrapper>

diff --git a/src/components/Info/Switcher/index.js b/src/components/Info/Switcher/index.js
@@ -9,6 +9,7 @@ const Switcher = ({
   setQualities,
   setShowQualityModal,
   setDataToSend,
+  anilistData,
 }) => {
   if (current === 1)
     return (
@@ -17,6 +18,7 @@ const Switcher = ({
         setQualities={setQualities}
         setShowQualityModal={setShowQualityModal}
         setDataToSend={setDataToSend}
+        anilistData={anilistData}
       />
     );
   if (current === 2) return <Characters {...data} />;

diff --git a/src/components/Info/Top/index.js b/src/components/Info/Top/index.js
@@ -35,6 +35,7 @@ const InfoTop = (props) => {
     setQualities,
     setShowQualityModal,
     setDataToSend,
+    anilistData,
   } = props;
   const [nextEpisode, setNextEpisode] = useState(null);
   const navigation = useNavigation();
@@ -78,21 +79,31 @@ const InfoTop = (props) => {
       const find = props.episodes.find(
         (item) =>
           item.id ===
-          `${highestWatched.id.split("-").splice(0, 4).join("-")}-${
-            highestWatched.episode + 1
+          `${highestWatched?.id?.split("-")?.splice(0, 4)?.join("-")}-${
+            highestWatched?.episode + 1
           }`
       );
 
-      setNextEpisode(find);
+      const progress =
+        anilistData?.Media?.mediaListEntry?.progress <= totalEpisodes
+          ? anilistData?.Media?.mediaListEntry?.progress
+          : totalEpisodes;
+
+      if (progress < totalEpisodes)
+        setNextEpisode(
+          props.episodes[anilistData?.Media?.mediaListEntry?.progress]
+        );
+      else setNextEpisode(find);
     } catch (error) {
+      console.log(error);
       setNextEpisode(null);
     }
   };
 
   useFocusEffect(
     useCallback(() => {
       getHighestWatched();
-    }, [props])
+    }, [])
   );
 
   return (
@@ -114,7 +125,9 @@ const InfoTop = (props) => {
           )}
         </InfoTopPosterImageWrapper>
         <InfoTopWrapper>
-          <InfoTopTitle numberOfLines={1}>{props.title.romaji}</InfoTopTitle>
+          <InfoTopTitle numberOfLines={1}>
+            {props.title.english || props.title.romaji}
+          </InfoTopTitle>
           <InfoTopEpisode numberOfLines={1}>
             Episode {nextEpisode?.number || 1}
           </InfoTopEpisode>

diff --git a/src/components/Modals/Info/Actions/index.js b/src/components/Modals/Info/Actions/index.js
@@ -10,12 +10,66 @@ import {
   updateCollection,
 } from "../../../../database";
 import { useFocusEffect } from "@react-navigation/native";
+import { MediaListStatusWithLabel } from "../../../../utils/constants";
+import {
+  GetAnimeDocument,
+  refetchGetAnimeQuery,
+  UpdateStatusDocument,
+} from "../../../../utils/graphql/generated";
+import { useDebouncedMutation } from "../../../../hooks";
 
-const Actions = ({ data, activeIndex, setActiveIndex }) => {
+const Actions = ({ data, activeIndex, setActiveIndex, found }) => {
+  const { id } = data;
   const subOrDub = data.subOrDub;
   const handlePress = (index, collection, addToCol) => {
-    setActiveIndex(index);
     addToCollection(collection, addToCol);
+    addToAnilist(index);
+    setActiveIndex(index);
+  };
+
+  const updateStatus = useDebouncedMutation({
+    mutationDocument: UpdateStatusDocument,
+    makeUpdateFunction: (variables) => (proxy) => {
+      const proxyData = proxy.readQuery({
+        query: GetAnimeDocument,
+        variables: { id: id },
+      });
+
+      if (proxyData?.Media?.mediaListEntry) {
+        proxy.writeQuery({
+          query: GetAnimeDocument,
+          variables: { id: id },
+          data: {
+            ...proxyData,
+            Media: {
+              ...proxyData?.Media,
+              id: proxyData?.Media?.id,
+              mediaListEntry: {
+                ...proxyData?.Media?.mediaListEntry,
+                status: variables?.status,
+              },
+            },
+          },
+        });
+      }
+    },
+    wait: 0,
+    refetchQueries: [refetchGetAnimeQuery({ id: id })],
+  });
+
+  const addToAnilist = async (index) => {
+    const value = MediaListStatusWithLabel[index].value;
+    const id = data.id;
+
+    // await updateStatus
+    try {
+      await updateStatus({
+        mediaId: id,
+        status: value,
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const addToCollection = async (collection, addToCol) => {
@@ -56,18 +110,22 @@ const Actions = ({ data, activeIndex, setActiveIndex }) => {
       subOrDub.toLowerCase() === "sub" ? data.id : `${data.id}-dub`
     );
 
-    if (select.length > 0) {
-      const watching = select[0].watching;
-      const completed = select[0].completed;
-      const planToWatch = select[0].planToWatch;
-      const onHold = select[0].onHold;
-      const dropped = select[0].dropped;
+    if (found || select.length > 0) {
+      const watching = found ? found?.label === "Watching" : select[0].watching;
+      const completed = found
+        ? found?.label === "Completed"
+        : select[0].completed;
+      const planToWatch = found
+        ? found?.label === "Plan to Watch"
+        : select[0].planToWatch;
+      const onHold = found ? found?.label === "On Hold" : select[0].onHold;
+      const dropped = found ? found?.label === "Dropped" : select[0].dropped;
 
       if (watching) setActiveIndex(0);
-      else if (completed) setActiveIndex(1);
+      else if (completed) setActiveIndex(4);
       else if (planToWatch) setActiveIndex(2);
-      else if (onHold) setActiveIndex(3);
-      else if (dropped) setActiveIndex(4);
+      else if (onHold) setActiveIndex(1);
+      else if (dropped) setActiveIndex(3);
     }
   };
 
@@ -92,8 +150,8 @@ const Actions = ({ data, activeIndex, setActiveIndex }) => {
           <ActionText>Watching</ActionText>
         </Action>
         <Action
-          active={activeIndex === 1}
-          onPress={() => handlePress(1, "completed", true)}
+          active={activeIndex === 4}
+          onPress={() => handlePress(4, "completed", true)}
         >
           <ActionText>Completed</ActionText>
         </Action>
@@ -104,15 +162,15 @@ const Actions = ({ data, activeIndex, setActiveIndex }) => {
           <ActionText>Plan to Watch</ActionText>
         </Action>
         <Action
-          active={activeIndex === 3}
-          onPress={() => handlePress(3, "onHold", true)}
+          active={activeIndex === 1}
+          onPress={() => handlePress(1, "onHold", true)}
         >
           <ActionText>On Hold</ActionText>
         </Action>
         <Action
           style={{ marginRight: 0 }}
-          active={activeIndex === 4}
-          onPress={() => handlePress(4, "dropped", true)}
+          active={activeIndex === 3}
+          onPress={() => handlePress(3, "dropped", true)}
         >
           <ActionText>Dropped</ActionText>
         </Action>

diff --git a/src/components/Modals/Info/WatchedEpisodes/index.js b/src/components/Modals/Info/WatchedEpisodes/index.js
@@ -22,7 +22,7 @@ import {
 import { addZero } from "../../../../utils/utils";
 import NextEpisodeInfo from "../NextEpisodeInfo";
 
-const WatchedEpisodes = ({ data }) => {
+const WatchedEpisodes = ({ data, watchedAmount }) => {
   const [watchedEpisodes, setWatchedEpisodes] = useState(null);
   const [currentEpisode, setCurrentEpisode] = useState(null);
   const { id } = data;
@@ -39,7 +39,10 @@ const WatchedEpisodes = ({ data }) => {
             prev.episode > current.episode ? prev : current
           );
 
-    setWatchedEpisodes(highest ? highest.episode : 0);
+    if (watchedAmount) setWatchedEpisodes(watchedAmount);
+    else {
+      setWatchedEpisodes(highest ? highest.episode : 0);
+    }
 
     const currentEpisode = data.episodes[highest?.episode || 0];
     setCurrentEpisode(currentEpisode);