Currently, I am in the process of setting up a video section for a project using NextJS. The videos are stored in firebase storage.
I have implemented a dynamic route that retrieves all videos from a specific reference within the bucket. For instance, if my bucket is named somebucket and it contains a folder called training with categories (category-1, category-2, category-3), each category will serve as a dynamic route like localhost:3000/training/category-1. So far, everything is running smoothly.
The file responsible for the dynamic route is named [id].js
// ReactJS
import { useState, useEffect } from "react";
// NextJS
import { useRouter } from "next/router";
// Hooks
import { withProtected } from "../../../hook/route";
// Components
import DashboardLayout from "../../../layouts/Dashboard";
// Firebase
import { getMetadata, listAll, ref } from "firebase/storage";
import { storage } from "../../../config/firebase";
// Utils
import capitalize from "../../../utils/capitalize";
import { PlayIcon } from "@heroicons/react/outline";
function Video() {
// States
const [videos, setVideos] = useState([]);
// Routing
const router = useRouter();
const { id } = router.query;
// Reference
const reference = ref(storage, `training/${id}`);
useEffect(() => {
function exec() {
listAll(reference).then((snapshot) => {
const videos = [];
snapshot.items.forEach((video) => {
videos.push(video);
});
setVideos(videos);
});
}
exec();
}, [reference, videos]);
return (
<DashboardLayout>
<h2>{capitalize(reference.name)}</h2>
<section>
<video controls controlsList="nodownload">
<source
src="https://example.com"
type="video/mp4"
/>
</video>
<ul role="list" className="divide-y divide-gray-200 my-4">
{videos.map((video) => (
<li key={video.name} className="py-4 flex">
<div className="ml-3 flex flex-row justify-start items-center space-x-3">
<PlayIcon className="w-6 h-6 text-gray-600" />
<p className="text-sm font-medium text-gray-900">
{video.name}
</p>
</div>
</li>
))}
</ul>
</section>
</DashboardLayout>
);
}
export default withProtected(Video);
To create a dynamic reference based on the route, I utilize the following code:
// Reference
const reference = ref(storage, `training/${id}`);
This reference is then listed using the listAll method mentioned earlier:
useEffect(() => {
function exec() {
listAll(reference).then((snapshot) => {
const videos = [];
snapshot.items.forEach((video) => {
videos.push(video);
});
setVideos(videos);
});
}
exec();
}, [reference]);
After pushing the elements to a state as an array, the state is iterated by a component. Everything seems to be functioning properly, but I encounter an infinite loop:
https://i.stack.imgur.com/tApLj.png
If anyone has insights into why this issue is occurring, please share your thoughts!