Youtube PlayList Data Fetch

README.md

@@ -1,37 +1,40 @@
 # Activities
+
 A `reactplay` hustle
 
 This is a [Next.js](https://nextjs.org/) project.
 
 ## Getting Started
 
 1. Install dependencies
-    ```bash
-    yarn
-    ```
-    **Note**: We do check in yarn.lock file. So it's advised to use `yarn` package manager. If you need to use any other package manager, remove `yarn.lock` file from the local directory first. Also, do not check in any other lock file.
+   ```bash
+   yarn
+   ```
+   **Note**: We do check in yarn.lock file. So it's advised to use `yarn` package manager. If you need to use any other package manager, remove `yarn.lock` file from the local directory first. Also, do not check in any other lock file.
 2. Create a `.env` file at the root of your project folder with the following content,
 
-    ```bash
-    NEXT_PUBLIC_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run
-    NEXT_PUBLIC_NHOST_SUBDOMAIN=rgkjmwftqtbpayoyolwh
-    NEXT_PUBLIC_NHOST_REGION=ap-southeast-1
-    NEXT_PUBLIC_NHOST_PROTOCOL=https
-    NEXT_PUBLIC_NHOST_SERVER=rgkjmwftqtbpayoyolwh.nhost.run
-    NEXT_PUBLIC_NHOST_VERSION=v1
-    NEXT_PUBLIC_NHOST_ENDPOINT=graphql
-    NEXT_PUBLIC_DEV_PORT=3000
-    NEXT_PUBLIC_PROTOCOL=http
-    NEXT_PUBLIC_HACKATHON_ID=e606ae64-7c92-4344-94ad-4d0684458bcf
-    NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID=ec1c0649-3b65-4809-92cf-9c4a6abdff1b
-    ```
+   ```bash
+   NEXT_PUBLIC_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run
+   NEXT_PUBLIC_NHOST_SUBDOMAIN=rgkjmwftqtbpayoyolwh
+   NEXT_PUBLIC_NHOST_REGION=ap-southeast-1
+   NEXT_PUBLIC_NHOST_PROTOCOL=https
+   NEXT_PUBLIC_NHOST_SERVER=rgkjmwftqtbpayoyolwh.nhost.run
+   NEXT_PUBLIC_NHOST_VERSION=v1
+   NEXT_PUBLIC_NHOST_ENDPOINT=graphql
+   NEXT_PUBLIC_DEV_PORT=3000
+   NEXT_PUBLIC_PROTOCOL=http
+   NEXT_PUBLIC_HACKATHON_ID=e606ae64-7c92-4344-94ad-4d0684458bcf
+   NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID=ec1c0649-3b65-4809-92cf-9c4a6abdff1b
+   NEXT_PUBLIC_YOUTUBE_API_KEY=DUMMY_API_KEY
+   ```
+
 3. Run the development server:
 
-    ```bash
-    npm run dev
-    # or
-    yarn dev
-    ```
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   ```
 
 4. See your application running
-    Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+   Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

components/MediaLayout.js

@@ -47,8 +47,8 @@ const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
           <iframe
             key={el.id}
             width="360"
-            height="320"
-            className="mb-10"
+            height="230"
+            className="mb-10 b-10 rounded-lg"
             src={el.src}
             title="YouTube video player"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

config/index.js

@@ -0,0 +1 @@
+export const REACT_PLAYLIST_ID = "PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y";

pages/index.js

@@ -2,13 +2,27 @@ import Layout from "@/components/Layout";
 import Banner from "@/components/Banner";
 import { Config } from "../services/metadata/home";
 import MediaLayout from "@/components/MediaLayout";
+import { useEffect, useState } from "react";
+import { REACT_PLAYLIST_ID } from "config";
 
 export default function Home() {
-  const reactPlayLive = [
-    { id: 0, src: "https://www.youtube.com/embed/1qfDkmtuWqg" },
-    { id: 1, src: "https://www.youtube.com/embed/b0eas9xxD-E" },
-    { id: 2, src: "https://www.youtube.com/embed/w0nd4ASTDdg" },
-  ];
+  const [reactPlayLive, setReactPlayLive] = useState([]);
+
+  useEffect(() => {
+    const getPlayListData = async () => {
+      const response = await fetch(
+        `https://www.googleapis.com/youtube/v3/playlistItems?key=${process.env.NEXT_PUBLIC_YOUTUBE_API_KEY}&part=id,snippet&maxResults=3&playlistId=${REACT_PLAYLIST_ID}`
+      );
+      const json = await response.json();
+      console.log(json);
+      const urls = json?.items?.map((item, index) => ({
+        id: index,
+        src: `https://www.youtube.com/embed/${item.snippet?.resourceId?.videoId}`,
+      }));
+      setReactPlayLive(urls);
+    };
+    getPlayListData();
+  }, []);
 
   const EventLayout = () => {
     return (