add: prev and next episode button in lanscape mode

Author: bagusok

app/pages/(protected)/anime-stream.tsx

@@ -35,8 +35,12 @@ interface Episode {
 }
 
 export default function AnimeStreamPage() {
-  const { episodeId: id } = useLocalSearchParams();
+  const { episodeId: id, indexNow, indexMax } = useLocalSearchParams();
   const [episodeId, setEpisodeId] = useState(id);
+  const [episodeIndex, setEpisodeIndex] = useState({
+    indexNow: Number(indexNow),
+    indexMax: Number(indexMax),
+  });
   const [animeId, setAnimeId] = useState<string>("");
   const [animeTitle, setAnimeTitle] = useState<string>("");
 
@@ -56,6 +60,10 @@ export default function AnimeStreamPage() {
         (item: any) => item.id === episodeId
       );
       if (activeIndex !== -1) {
+        setEpisodeIndex({
+          indexNow: activeIndex,
+          indexMax: listEpisode.length - 1,
+        });
         flatListRef.current.scrollToIndex({
           index: activeIndex,
           animated: true,
@@ -159,6 +167,22 @@ export default function AnimeStreamPage() {
 
   // END SHARING BUTTON
 
+  const isHaveNextEpisode = () => episodeIndex.indexNow < episodeIndex.indexMax;
+
+  const isHavePrevEpisode = () => episodeIndex.indexNow > 0;
+
+  const nextEpisode = () => {
+    if (isHaveNextEpisode()) {
+      setEpisodeId(listEpisode[episodeIndex.indexNow + 1].id);
+    }
+  };
+
+  const prevEpisode = () => {
+    if (isHavePrevEpisode()) {
+      setEpisodeId(listEpisode[episodeIndex.indexNow - 1].id);
+    }
+  };
+
   if (episodeDetail.isLoading && listEpisode.length == 0) {
     return <LoadingPage />;
   }
@@ -175,6 +199,10 @@ export default function AnimeStreamPage() {
             episodeId={episodeDetail.data.id}
             title={`${episodeDetail.data.anime?.title} - Episode ${episodeDetail.data.episode}`}
             data={episodeDetail.data.stream.direct}
+            isHaveNextEpisode={isHaveNextEpisode()}
+            isHavePrevEpisode={isHavePrevEpisode()}
+            nextEpisode={nextEpisode}
+            prevEpisode={prevEpisode}
           />
         ) : (
           <VideoLoading />
@@ -251,7 +279,9 @@ export default function AnimeStreamPage() {
             keyExtractor={(item) => item.id}
             renderItem={({ item: episode, index }) => (
               <TouchableOpacity
-                onPress={() => setEpisodeId(episode.id)}
+                onPress={() => {
+                  setEpisodeId(episode.id);
+                }}
                 key={episode.id}
                 style={[
                   styles.cardEpisode,

app/pages/anime-detail.tsx

@@ -391,7 +391,7 @@ export default function TestDetailPage() {
         }
         data={animeDetail.data.Episode}
         keyExtractor={(item) => item.id}
-        renderItem={({ item: episode }) => (
+        renderItem={({ item: episode, index }) => (
           <Pressable
             key={episode.id}
             onPress={() =>
@@ -400,6 +400,8 @@ export default function TestDetailPage() {
                 pathname: "/pages/anime-stream",
                 params: {
                   episodeId: episode.id,
+                  indexNow: index,
+                  indexMax: animeDetail.data.Episode.length - 1,
                 },
               })
             }

package-lock.json

@@ -62,7 +62,8 @@
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.10",
+    "expo-keep-awake": "~13.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",