Fix HTML structure and enhance App styling

zerone0x · Sep 25, 2024 · 42bf396 · 42bf396
1 parent 7bd085a
commit 42bf396
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 103 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package.json b/package.json
@@ -15,4 +15,4 @@
     "@vitejs/plugin-react": "^1.0.7",
     "vite": "^2.8.0"
   }
-}
+}
diff --git a/src/App.css b/src/App.css
@@ -1,27 +1,52 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 .App {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   min-height: 100vh;
   min-width: 100vw;
+  text-align: center;
+}
+
+.button-container {
   display: flex;
   justify-content: center;
-  align-items: center;
-  margin: 0;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 100px;
+}
+
+.button-container button {
+  font-size: 30px;
+}
+
+.button-container button:hover {
+  transform: scale(1.1);
+}
+
+.button-container button:disabled {
+  cursor: no-drop;
 }
 
 .video-container {
-  width: 90vw; 
-  max-width: calc(100vh * (16 / 9)); 
-  height: calc(90vw * (9 / 16)); 
+  width: 90vw;
+  max-width: calc(100vh * (16 / 9));
+  height: calc(90vw * (9 / 16));
 }
 
 iframe {
   width: 100%;
   height: 100%;
 }
-
-button{
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  font-size: 100px;
-}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,13 +1,29 @@
-import './App.css'
-import RandomYouTubePlayer from './components/RandomYouTubePlayer'
+import "./App.css";
+import RandomYouTubePlayer from "./components/RandomYouTubePlayer";
+import { useState } from "react";
 
 function App() {
+  const [channel, setChannel] = useState("luke");
 
   return (
-    <div className='App'>
-    <RandomYouTubePlayer />
+    <div className="App">
+      <div className="button-container">
+        <button
+          onClick={() => setChannel("luke")}
+          disabled={channel === "luke"}
+        >
+          Luke
+        </button>
+        <button
+          onClick={() => setChannel("curb")}
+          disabled={channel === "curb"}
+        >
+          Curb
+        </button>
+      </div>
+      <RandomYouTubePlayer channel={channel} />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/src/components/RandomYouTubePlayer.jsx b/src/components/RandomYouTubePlayer.jsx
@@ -1,40 +1,48 @@
-import React, { useState, useEffect } from 'react';
-import '../App.css';
-import { videoIds } from '../utils/data';
+import React, { useState, useEffect } from "react";
+import "../App.css";
+import { lukeIds, curbIds } from "../utils/data";
 
-function getRandomVideoId() {
+// const apiKey = '';
+// const channelId = 'UCQZDGOgQ6usflGv1g8Jlf0w';
+// function fetchVideoIds(channelId, apiKey) {
+//   return fetch(`https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=100`)
+//     .then(response => response.json())
+//     .then(data => data.items.map(item => item.id.videoId))
+//     .then(data =>console.log(data));
+// }
+
+function getRandomVideoId(videoIds) {
   return videoIds[Math.floor(Math.random() * videoIds.length)];
 }
 
-function RandomYouTubePlayer() {
-  const [videoId, setVideoId] = useState('');
+function RandomYouTubePlayer({ channel }) {
+  const [videoId, setVideoId] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = () => {
-      setVideoId(getRandomVideoId())
+    setVideoId(getRandomVideoId(channel === "luke" ? lukeIds : curbIds));
   };
 
   useEffect(() => {
     // Fetch videos from the channel
-    setIsLoading(true)
-    setVideoId(getRandomVideoId())
-    setIsLoading(false)
-  }, []);
+    // fetchVideoIds(channelId, apiKey)
+    setIsLoading(true);
+    setVideoId(getRandomVideoId(channel === "luke" ? lukeIds : curbIds));
+    setIsLoading(false);
+  }, [channel]);
 
   if (isLoading) {
     return <div>Loading...</div>;
   }
 
   return (
-    <section className='video-container'>
-        <iframe
-        title={
-          'Luke smith'
-        }
+    <section className="video-container">
+      <iframe
+        title={channel === "luke" ? "Luke smith" : "Curb"}
         src={`https://www.youtube.com/embed/${videoId}`}
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen
-        />
+      />
       <button onClick={handleClick}>🎲</button>
     </section>
   );

diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById("root"),
+);
diff --git a/src/utils/data.jsx b/src/utils/data.jsx
@@ -1,52 +1,105 @@
-export const videoIds=[
-    "mVGRAD10cYs",
-    "Zg9z8k8pkuM",
-    "0WcrgvhO_mw",
-    "dI3bGeT31Bo",
-    "X7TykFYaAFA",
-    "4bzLzyKnLzc",
-    "GyHII-XqEq0",
-    "w8w9z_RMegI",
-    "ZNaT03-xamE",
-    "WNhvPLKIWsQ",
-    "fYCTOkrzRi8",
-    "P3ya3_SRn8c",
-    "FWvUkxWeIyY",
-    "dS1KtN0bZDs",
-    "VcHW0mpi9y8",
-    "d_11QaTlf1I",
-    "fVsCLKErPqE",
-    "snhV1owGCSM",
-    "HAGWOx2dw1Y",
-    "9evDBuxX8a0",
-    "RH3D1cpm6do",
-    "1PVvcJtwDm4",
-    "T8Vavo5VepI",
-    "QTolhoxMyXg",
-    "QF2wfLDI7-4",
-    "ZFL09qhKi5I",
-    "gyuq8U_WYDM",
-    "3o3uUOkcGqA",
-    "gDRuRpdKRgw",
-    "HmFeylVSsI4",
-    "jAXKSKb3etk",
-    "EJeR1pJKP6E",
-    "6YrKG4OGsE8",
-    "YxPzaCnAD5Y",
-    "jVy0K-0HMCg",
-    "N3Qlqv2vm0g",
-    "AFbIIccVaAw",
-    "YtyHY9O3nK8",
-    "5M9IbeaBlmI",
-    "35z3QUwfd6I",
-    "ZvLmmbyEfGQ",
-    "L8Ohygt5UVY",
-    "fYLun9rSWTE",
-    "Psl6hQ8hGuc",
-    "HCLEb2I-VdM",
-    "EoeDpV0bpIY",
-    "XOMj7JSGR78",
-    "3eyzINMjlEk",
-    "31eI9UD83PY",
-    "VvGvHJgz2Q0"
-  ]
+export const lukeIds = [
+  "mVGRAD10cYs",
+  "Zg9z8k8pkuM",
+  "0WcrgvhO_mw",
+  "dI3bGeT31Bo",
+  "X7TykFYaAFA",
+  "4bzLzyKnLzc",
+  "GyHII-XqEq0",
+  "w8w9z_RMegI",
+  "ZNaT03-xamE",
+  "WNhvPLKIWsQ",
+  "fYCTOkrzRi8",
+  "P3ya3_SRn8c",
+  "FWvUkxWeIyY",
+  "dS1KtN0bZDs",
+  "VcHW0mpi9y8",
+  "d_11QaTlf1I",
+  "fVsCLKErPqE",
+  "snhV1owGCSM",
+  "HAGWOx2dw1Y",
+  "9evDBuxX8a0",
+  "RH3D1cpm6do",
+  "1PVvcJtwDm4",
+  "T8Vavo5VepI",
+  "QTolhoxMyXg",
+  "QF2wfLDI7-4",
+  "ZFL09qhKi5I",
+  "gyuq8U_WYDM",
+  "3o3uUOkcGqA",
+  "gDRuRpdKRgw",
+  "HmFeylVSsI4",
+  "jAXKSKb3etk",
+  "EJeR1pJKP6E",
+  "6YrKG4OGsE8",
+  "YxPzaCnAD5Y",
+  "jVy0K-0HMCg",
+  "N3Qlqv2vm0g",
+  "AFbIIccVaAw",
+  "YtyHY9O3nK8",
+  "5M9IbeaBlmI",
+  "35z3QUwfd6I",
+  "ZvLmmbyEfGQ",
+  "L8Ohygt5UVY",
+  "fYLun9rSWTE",
+  "Psl6hQ8hGuc",
+  "HCLEb2I-VdM",
+  "EoeDpV0bpIY",
+  "XOMj7JSGR78",
+  "3eyzINMjlEk",
+  "31eI9UD83PY",
+  "VvGvHJgz2Q0",
+];
+
+export const curbIds = [
+  "BtR-lN5lY_4",
+  "TkP2gdXhWXs",
+  "oj75OoJQboE",
+  "ClN9Cs0VlUM",
+  "Ek7v8NnFW5w",
+  "VPn_TJxD_2o",
+  "NfRYqdYoXnU",
+  "ykzkloQh5hc",
+  "TLgraYmXiZ0",
+  "4WbSgrkCg_4",
+  "iAAq5hPcn6c",
+  "oXbEm3_6PyY",
+  "LEhHAhWc0Gw",
+  "-qXmSXJ3FRo",
+  "UIzHAKecqG0",
+  "QkWnKUcL0fs",
+  "aTBsNMZZPf8",
+  "vS3_NhdM8gM",
+  "TSB2Z9VUFeg",
+  "abjg5XVKNc8",
+  "nQ2cEHEDSBM",
+  "AyaXvyzz0ZY",
+  "kCNhtns1FmM",
+  "g_QMCZs3Cyg",
+  "5RBWlGcXzxY",
+  "xh8jYq5jKgM",
+  "RTNOIH0yhZ0",
+  "2ypTzH21lPg",
+  "ErFEV7fCO0U",
+  "nSoeynp5_5g",
+  "gu4D6fNX9IY",
+  "NnU77QlJVSA",
+  "hPtsH072A6w",
+  "CCsCk2-gGSs",
+  "dCyBHDc30Vs",
+  "v2af73R8KSw",
+  "UjQhxnWALtI",
+  "l4MtJWg_oG8",
+  "1z7qa9YFh9Y",
+  "tGX4ITGvDCo",
+  "hbtDaPKMhbE",
+  "GbxkfFAQsG0",
+  "WUIvaOmhyFw",
+  "bEecQmBWIak",
+  "ZEobUCTpV1M",
+  "n_uzobJwtTo",
+  "qJhGRJGjSSg",
+  "01jyekP_6g8",
+  "DC8vi2fKEFE",
+  "WCHsYwtfNKg",
+];
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
         "@vitejs/plugin-react": "^1.0.7",
         "vite": "^2.8.0"
       }
-    }
+    }