Merge branch 'synced-video-button'

README.md

@@ -1,7 +1,8 @@
 # Tennis-Video-Viewer
 A web app focused on tennis match playback, allowing timestamps for points
 
-### Development Notes
+# Development Notes
+A firestore database was created. A web app was linked in Project Settings -> Apps -> Web App. The config object was copied into the firebaseInit file.
 
 csvjson.com: turn CSVs into JSON
 

components/PointsList.js

@@ -2,12 +2,12 @@
 
 import React from 'react';
 
-const PointsList = ({ points, onPointSelect }) => {
+const PointsList = ({ pointsData, onPointSelect }) => {
     return (
         <ul>
-            {points.map((point, index) => (
-                <li key={index} onClick={() => onPointSelect(point.timestamp)}>
-                    {point.description}
+            {pointsData.map((point, index) => (
+                <li key={index} onClick={() => onPointSelect(point.Position)}>
+                    {point.Name}
                 </li>
             ))}
         </ul>

components/SearchDropdown.js

@@ -1,26 +1,52 @@
-// components/SearchDropdown.js
+import React, { useState, useEffect } from 'react';
+import Select from 'react-select';
+import { collection, getDocs } from 'firebase/firestore';
+import db from '../services/initializeFirebase.js';
 
-import React, { useState } from 'react';
-
-const SearchDropdown = () => {
+const SearchDropdown = ({ setMatchData }) => {
     const [searchTerm, setSearchTerm] = useState('');
+    const [dropdownData, setDropdownData] = useState([]);
+
+    // Fetch the matches from the database and format them for the dropdown
+    useEffect(() => {
+        const fetchMatches = async () => {
+            const querySnapshot = await getDocs(collection(db, 'matches'));
+            const matches = querySnapshot.docs.map((doc) => doc.data());
+            setDropdownData(formatOptions(matches));
+        };
+
+        fetchMatches();
+    }, []);
+
+    const handleSearchChange = (newValue) => {
+        if (newValue) {
+            setSearchTerm(newValue);
+        }
+    };
+
+    const handleDropdownItemClick = (selectedOption) => {
+        setMatchData(selectedOption.value);
+        setSearchTerm(selectedOption);
+    };
 
-    const handleSearchChange = (event) => {
-        setSearchTerm(event.target.value);
-        // You can add logic to fetch or filter videos based on the search term.
+    const formatOptions = (data) => {
+        return data.map((item) => ({
+            value: item,
+            label: item.name
+        }));
     };
 
     return (
         <div>
-            <input 
-                type="text" 
-                placeholder="Search for a tennis match..." 
-                value={searchTerm} 
-                onChange={handleSearchChange} 
+            <Select
+                placeholder="Search for a tennis match..."
+                value={searchTerm}
+                onChange={handleDropdownItemClick}
+                options={dropdownData}
+                onInputChange={handleSearchChange}
             />
-            {/* Dropdown or suggestion list to show search results */}
         </div>
     );
 }
 
-export default SearchDropdown;
+export default SearchDropdown;

components/VideoPlayer.js

@@ -2,15 +2,23 @@
 
 import React from 'react';
 
-const VideoPlayer = ({ videoSrc }) => {
+function VideoPlayer({ videoURL, videoRef }) {
+    if (videoURL === '') {
+        return null;
+    }
+
     return (
-        <div>
-            <video width="100%" controls>
-                <source src={videoSrc} type="video/mp4" />
-                Your browser does not support the video tag.
-            </video>
-        </div>
+        <iframe 
+                ref={videoRef} 
+                width="560" 
+                height="315" 
+                src={videoURL + '?enablejsapi=1'} 
+                title="YouTube video player" 
+                frameborder="0" 
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                allowfullscreen>
+        </iframe>
     );
 }
 
-export default VideoPlayer;
+export default VideoPlayer;