gistfile1.txt

const ANIMATION_DURATION = 1000;
const ImageView = ({ url }: { url: string }) => {
  return (
    <Reanimated.Image
      source={{ uri: url }}
      style={[styles.video]}
      exiting={FadeOut.duration(ANIMATION_DURATION)}
    />
  );
};

const VideoPlayer = ({ url, onEnd }: { url: string; onEnd: () => void }) => {
  const player = useVideoPlayer(url, (player) => {
    player.loop = false;
    player.play();
  });

  useEffect(() => {
    const subscription = player.addListener("playingChange", (isPlaying) => {
      console.log("playingChange", isPlaying);
      if (!isPlaying) {
        onEnd();
      }
    });

    return () => {
      subscription.remove();
    };
  }, [player]);
  return (
    <Reanimated.View
      exiting={FadeOut.duration(ANIMATION_DURATION)}
      style={{
        height: "100%",
        width: "100%",
        backgroundColor: "transparent",
      }}
    >
      <VideoView nativeControls={false} style={styles.video} player={player} />
    </Reanimated.View>
  );
};

const WebviewMedia = ({ url }: { url: string }) => {
  return <WebView source={{ uri: url }} />;
};
async function clearCache() {
  const files = await FileSystem.readDirectoryAsync(FileSystem.cacheDirectory);
  await Promise.all(
    files.map((file) =>
      FileSystem.deleteAsync(FileSystem.cacheDirectory + file)
    )
  );
}

const downloadFiles = async (media: Media[]) => {
  await clearCache();
  return Promise.all(
    media.map(async (item) => {
      if (item.isWebView) return item;
      const localUri = FileSystem.cacheDirectory + item.url.split("/").pop();
      await FileSystem.downloadAsync(item.url, localUri);
      return { ...item, localUri };
    })
  );
};

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [localMedia, setLocalMedia] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);

  const downloadPlaylist = async () => {
    const response = await getPlayList();
    downloadFiles(response.media).then((downloadedFiles) => {
      console.log(downloadedFiles);
      setLocalMedia(downloadedFiles);
      setIsLoaded(true);
    });
  };
  useEffect(() => {
    downloadPlaylist();
  }, []);

  useEffect(() => {
    let timer;
    if (localMedia.length > 0 && localMedia[currentIndex].type === "IMAGE") {
      timer = setTimeout(() => {
        setCurrentIndex((prevIndex) =>
          prevIndex + 1 > localMedia.length - 1 ? 0 : prevIndex + 1
        );
      }, localMedia[currentIndex].delay);
    }
    return () => clearTimeout(timer);
  }, [currentIndex, localMedia]);

  if (localMedia.length === 0) {
    return null;
  }

  if (!isLoaded) {
    return null;
  }

  return (
    <AnimatedAppLoader image={{ uri: Constants.expoConfig.splash.image }}>
      <View style={styles.container}>
        {localMedia.length > 0 && (
          <>
            {localMedia[currentIndex].type === MediaType.IMAGE ? (
              <ImageView
                url={localMedia[currentIndex].localUri}
              />
            ) : (
              <VideoPlayer
                url={localMedia[currentIndex].localUri}
                onEnd={() =>
                  setCurrentIndex((prevIndex) =>
                    prevIndex + 1 > localMedia.length - 1 ? 0 : prevIndex + 1
                  )
                }
              />
            )}
          </>
        )}
      </View>
    </AnimatedAppLoader>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "yellow",
    alignItems: "center",
    justifyContent: "center",
  },
  video: {
    width: "100%",
    height: "100%",
    backgroundColor: "red",
  },
});