Upload folder using huggingface_hub

.gitignore

@@ -4,5 +4,4 @@ static/saved_video/**
 static/poster/**
 static/videos/**
 *DS_Store**
-*.json
-static/**
+*.json

static/css/style.css

@@ -0,0 +1,661 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #dddddd;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 50px;
+}
+
+#versionBadge {
+    position: fixed;
+    width: 100px;
+    text-align: center;
+    bottom: 20px; 
+    left: 20px; 
+    background-color: #174387; 
+    color: white; 
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 18px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
+}
+
+
+
+#JersyContainer {
+    position: relative;
+    width: 100%; /* Adjust as needed */
+}
+
+#leftImagesContainer {
+    position: fixed;
+    top: 20px;
+    left: 40px;
+    width: 210px; /* Adjust as needed */
+    padding: 10px; /* Spacing around the images */
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+}
+
+.image-box {
+    position: relative;
+    width: 210px; /* Or your preferred width */
+    margin-bottom: 20px; /* Space between image boxes */
+}
+
+#boxLeftTeam, #boxLeftTeam2 {
+    box-shadow: none; /* Remove individual shadows */
+}
+
+#boxRightTeam {
+    position: fixed;
+    top: 20px;
+    right: 40px;
+    width: 210px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+#leftTeamImage, #leftTeamImage2, #rightTeamImage {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.image-title {
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+
+.title-section {
+    width: 60%;  /* Adjust width as needed */
+    margin: 40px auto;  /* Increased margin for better visibility */
+    background: linear-gradient(to right, #003366, #001f4d);
+    background-size: cover;
+    padding: 20px;
+    border-radius: 15px;  /* Rounded corners like old TVs */
+    color: white;
+    text-shadow: 2px 2px 4px #000;
+    clip-path: polygon(
+        10% 0%, 90% 0%, 
+        100% 10%, 100% 90%, 
+        90% 100%, 10% 100%, 
+        0% 90%, 0% 10%
+    );  /* New clip path to mimic TV screen shape */
+}
+
+/* Dark mode specific style for .title-section */
+.dark-mode .title-section {
+    background: linear-gradient(to right, #1a8cff, #004cbf);
+    text-shadow: 2px 2px 4px #444;
+}
+.dark-mode #versionBadge {
+    background: linear-gradient(to right, #1a8cff, #004cbf);
+    text-shadow: 2px 2px 4px #444;
+}
+
+
+
+@keyframes GradientFlow {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.title-section {
+    /* All previous styles remain */
+    animation: GradientFlow 30s ease infinite;
+}
+
+
+
+
+.container {
+    width: 70%;
+    margin: auto;
+    background-color: #fff;
+    margin-top: 20px;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.column {
+    flex: 50%; 
+    padding: 10px;
+}
+
+.column .left, .column .right {
+    background-color: #eee;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.column.right {
+    position: relative;
+
+}
+
+#overlay {
+    display: flex;
+    flex-direction: column !important;
+}
+
+/* video player */
+video {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+/*form and inputs */
+form#videoForm {
+    display: flex;
+    flex-direction: column;
+}
+
+form#videoForm label,
+form#videoForm input,
+form#videoForm button {
+    margin-bottom: 10px;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+form#videoForm button {
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+}
+
+form#videoForm button:hover {
+    background-color: #0056b3;
+}
+
+
+.filtering {
+    margin-top: 4%;
+    padding: 2%;
+    background-color: rgb(203, 203, 203);
+    border-radius: 5px;
+}
+
+#accordionToggleVideo, #accordionToggleAdditional {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 32px;
+    color: #000000;
+    display: inline-flex; /* Aligns icon and text horizontally */
+    align-items: center; /* Vertically aligns the icon and text */
+    gap: 10px; /* Adds space between the icon and the text */
+}
+
+#accordionToggleVideo:focus, #accordionToggleAdditional:focus {
+    outline: none;
+}
+
+/* Optional: Style for the text beside the icon */
+#accordionToggleVideo, #accordionToggleVideo2, #accordionToggleVideo3 span {
+    font-weight: 700;
+    font-size: 26px; /* Adjust the font size as needed */
+    vertical-align: middle; /* Aligns text vertically in the middle */
+}
+
+
+.arrowSection {
+    background-color: #DDDDDD;
+    padding: 2%;
+    border-radius: 5px;
+}
+
+.arrowSection button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-flex; /* Aligns icon and text horizontally */
+    align-items: center; /* Vertically aligns the icon and text */
+    gap: 10px; /* Adds space between the icon and the text */
+}
+
+.arrowSection button i {
+    font-size: 32px; /* Larger size for the icon */
+}
+
+
+#videoSection {
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+    max-height: 800px; 
+}
+
+.hidden {
+    max-height: 0 !important;
+    display: none !important;
+}
+
+.videoPlayerInput1 {
+    border-style: solid;
+}
+
+
+
+.filtering-container, #videoForm {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+
+    border-radius: 5px;
+    margin-bottom: 20px;
+
+}
+
+.dropdown-box {
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 10px;
+}
+
+.label-dropdown {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.dropdown {
+    width: 100%;
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.filter-button {
+    width: 100%;
+    text-align: center;
+    text-decoration: none;
+    display: block; /* Aligns button to center */
+    font-size: 16px;
+    margin: 10px auto; /* Centers the button */
+    margin-bottom: 10px;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+}
+
+.filtered-results {
+    display: flex;
+    flex-direction: column; /* Stack children vertically */
+    align-items: center; /* Center children horizontally */
+    text-align: left; /* Align text to the left */
+    height: 100%; /* Adjust as needed */
+}
+
+.filtered-results h1 {
+    align-self: flex-start; /* Align the h1 tag to the start (left) */
+    width: 100%; /* Ensure it takes the full width for alignment */
+    margin-bottom: 20px; /* Add space between the h1 and the video player */
+}
+
+#videoPlayer_result {
+    /* Optionally, specify the size of the video player */
+    max-width: 70%; /* Maximum width */
+    width: 100%; /* Make it responsive */
+    height: auto; /* Maintain aspect ratio */
+}
+
+
+/* Configuration section */
+.configuration-section {
+    display: block;
+    padding: 20px;
+    background-color: #f8f9fa; /* Light background for the section */
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.config-row {
+    display: flex;
+    justify-content: space-around;
+    gap: 20px; /* Space between boxes */
+}
+
+.config-box {
+    flex-basis: calc(33% - 20px); /* Adjust based on requirement, accounting for gap */
+    background-color: #fff; /* White background for boxes */
+    border: 1px solid #ddd;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.config-box h3 {
+    color: #007bff; /* Blue color for titles */
+    margin-bottom: 15px;
+}
+
+.config-box select, .config-box input[type="radio"] {
+    margin: 5px 0;
+}
+
+.config-box label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+/* Custom styling for dropdowns */
+.config-box select {
+    padding: 5px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+/* Custom styling for radio buttons */
+.config-box input[type="radio"] {
+    margin-right: 5px;
+}
+
+/* Style adjustments for mobile responsiveness */
+@media (max-width: 768px) {
+    .config-row {
+        flex-direction: column;
+    }
+    .config-box {
+        flex-basis: 100%;
+        margin-bottom: 20px;
+    }
+}
+
+
+
+/* Pop up styling */
+.config-modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%; /* Full-screen modal */
+    background-color: rgba(0,0,0,0.4);
+}
+
+.config-modal-content {
+    background-color: #fefefe;
+    margin: 2% auto; /* Adjust margin to center the modal */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 65%; /* Adjust width as needed */
+    height: 900px; /* Fixed height */
+    overflow-y: auto; /* Scroll inside modal if content overflows */
+}
+
+
+.config-modal-close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.config-modal-close:hover,
+.config-modal-close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+/* Custom checkbox style */
+.config-adv-checkbox {
+    position: relative;
+    display: flex;
+    align-items: center; /* Aligns items vertically in the center */
+    gap: 10px; /* Space between checkbox and label */
+    margin-bottom: 10px;
+    user-select: none;
+    padding-left: 35px;
+    cursor: pointer;
+    background-color: lightgray;
+    border-radius: 5px;
+}
+
+/* Hide the default checkbox */
+.config-adv-checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+    /* Custom checkbox styles (keep your existing styles) */
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+    border-radius: 5px;
+    cursor: pointer;
+
+}
+
+/* On mouse-over, add a grey background color */
+.config-adv-checkbox:hover input ~ .checkmark {
+    background-color: grey;
+}
+
+/* When the checkbox is checked, add a blue background */
+.config-adv-checkbox input:checked ~ .checkmark {
+    background-color: green;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+/* Show the checkmark when checked */
+.config-adv-checkbox input:checked ~ .checkmark:after {
+    display: block;
+}
+
+/* Style the checkmark/indicator */
+.config-adv-checkbox .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+}
+
+
+/* pop up parameter styiling */
+
+/* Add this to your existing CSS */
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.config-card {
+    background-color: #f4f4f4;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.config-card h3 {
+    margin-top: 0;
+}
+
+
+.config-item {
+    margin-bottom: 15px;
+}
+
+.config-item label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.config-item input[type="text"], 
+.config-item select, 
+.config-item input[type="number"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.config-item input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+
+
+/* Divider */
+.divider {
+    height: 2px; /* Adjust the thickness of the line here */
+    background: repeating-linear-gradient(
+        to right,
+        #000,
+        #000 10px,
+        transparent 10px,
+        transparent 20px
+    );
+    position: relative;
+    width: 100%; /* Make the line span the full width */
+    margin: 50px 0; /* Add some vertical space around the divider */
+}
+
+.divider-text {
+    position: absolute;
+    top: -50%; /* Adjust this value to align the text with the line */
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 5px;
+    border-radius: 10px; /* Optional, for rounded corners */
+}
+
+
+/* Dark Mode */
+
+.dark-mode-toggle-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    z-index: 1000;
+  }
+  
+  .dark-mode-toggle-label {
+    margin-right: 10px;
+    color: #333;
+    font-size: 16px;
+  }
+  
+  /* Ensure the label text switches color with the theme */
+  body.dark-mode .dark-mode-toggle-label {
+    color: #FFF;
+  }
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: #666;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(26px);
+  }
+
+  body.dark-mode {
+    background-color: #0A192F;
+ 
+  }
+
+  body {
+    padding: 20px;
+    transition: background-color 0.4s, color 0.4s;
+  }
+
+  .dark-mode-toggle-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .dark-mode-toggle-label {
+    margin-right: 10px;
+    color: #333;
+    font-size: 16px;
+  }
+
+  body.dark-mode .dark-mode-toggle-label {
+    color: #FFF;}

static/js/script.js

@@ -0,0 +1,366 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    document.getElementById('videoForm').addEventListener('submit', function(e) {
+        e.preventDefault(); 
+
+        var m3u8Url = document.getElementById('m3u8Input').value; 
+
+        // Send a POST request to the server to process the video
+        fetch('/process_video', {
+            method: 'POST',
+            body: JSON.stringify({ m3u8Url: m3u8Url }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.mp4Path) {
+                var videoPlayer = document.getElementById('videoPlayer');
+                videoPlayer.src = data.mp4Path;
+                // Set the video to muted before playing
+                videoPlayer.muted = true;
+                videoPlayer.load();  
+                videoPlayer.play(); 
+            } else {
+                console.error('Failed to process video');
+            }
+        })
+        .catch(error => console.error('Error:', error));
+    });
+
+    // Pop up functionality
+    var configModal = document.getElementById("configAdvModal");
+    var configBtn = document.getElementById("configAdvMode");
+    var configSpan = document.getElementsByClassName("config-modal-close")[0];
+    
+    // Toggle modal display based on checkbox state
+    configBtn.addEventListener('change', function() {
+        if (this.checked) {
+            configModal.style.display = "block";
+        } else {
+            configModal.style.display = "none";
+        }
+    });
+    
+    // When clicking on the modal close button, uncheck the checkbox and hide the modal
+    configSpan.onclick = function() {
+        configModal.style.display = "none";
+        configBtn.checked = false;
+    };
+    
+    // When clicking outside the modal, uncheck the checkbox and hide the modal
+    window.onclick = function(event) {
+        if (event.target == configModal) {
+            configModal.style.display = "none";
+            configBtn.checked = false;
+        }
+    };
+    
+    
+    
+
+
+    // Toggle functionality for Input Section
+    var accordionToggleVideo = document.getElementById('accordionToggleVideo');
+    var videoSection = document.getElementById('videoSection');
+    
+    if (accordionToggleVideo && videoSection) {
+        accordionToggleVideo.addEventListener('click', function() {
+            videoSection.classList.toggle('hidden');
+            var icon = this.querySelector('i');
+    
+            // Toggle between fa-angle-down and fa-angle-up
+            if (icon.classList.contains('fa-angle-down')) {
+                icon.classList.remove('fa-angle-down');
+                icon.classList.add('fa-angle-up');
+            } else {
+                icon.classList.remove('fa-angle-up');
+                icon.classList.add('fa-angle-down');
+            }
+        });
+    } else {
+        console.error('Accordion elements for video not found');
+    }
+
+    // Toggle functionality for Output Section 3
+    var accordionToggleVideo2 = document.getElementById('accordionToggleVideo2');
+    var filteredResults = document.getElementById('filteredResults');
+    
+    if (accordionToggleVideo2 && filteredResults) {
+        accordionToggleVideo2.addEventListener('click', function() {
+            filteredResults.classList.toggle('hidden');
+            var icon = this.querySelector('i');
+    
+            // Toggle between fa-angle-down and fa-angle-up
+            if (icon.classList.contains('fa-angle-down')) {
+                icon.classList.remove('fa-angle-down');
+                icon.classList.add('fa-angle-up');
+            } else {
+                icon.classList.remove('fa-angle-up');
+                icon.classList.add('fa-angle-down');
+            }
+        });
+    } else {
+        console.error('Accordion elements for filtered results not found');
+    }
+
+    // Toggle functionality for Configuration Section 2
+    var accordionToggleVideo3 = document.getElementById('accordionToggleVideo3');
+    var configurationSection = document.getElementById('configurationSection');
+    
+    if (accordionToggleVideo3 && configurationSection) {
+        accordionToggleVideo3.addEventListener('click', function() {
+            configurationSection.classList.toggle('hidden');
+            var icon = this.querySelector('i');
+    
+            // Toggle between fa-angle-down and fa-angle-up
+            if (icon.classList.contains('fa-angle-down')) {
+                icon.classList.remove('fa-angle-down');
+                icon.classList.add('fa-angle-up');
+            } else {
+                icon.classList.remove('fa-angle-up');
+                icon.classList.add('fa-angle-down');
+            }
+        });
+    } else {
+        console.error('Accordion elements for filtered results not found');
+    }
+    
+
+
+    
+
+});
+
+
+
+// Assuming the base path for team images
+const basePathForTeamImages = '/static/teams_jersy/';
+
+
+// Function to update team images based on the selected team
+function updateTeamImages(selectedTeam) {
+    const imageUrl = basePathForTeamImages + selectedTeam + '.jpg'; // Assuming the images are in JPG format
+    const imageUrl2 = basePathForTeamImages + selectedTeam + '1.jpg';
+    
+    console.log(imageUrl);
+    // Set the image URLs
+    document.getElementById('leftTeamImage').src = imageUrl;
+    document.getElementById('leftTeamImage2').src = imageUrl2;
+}
+
+
+// Assuming the base path for team images
+const basePathForPlayerImages = '/static/players_image/';
+
+// Function to update player images based on the selected player
+function updatePlayerImages(selectedPlayer) {
+    const plyaerImageUrl = basePathForPlayerImages + selectedPlayer + '.png'; 
+    
+    console.log(plyaerImageUrl);
+    // Set the image URLs
+
+    document.getElementById('rightTeamImage').src = plyaerImageUrl;
+}
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    const teamDropdown = document.getElementById('teamDropdown');
+    const playerDropdown = document.getElementById('playerDropdown');
+    let jsonData = null;
+
+    // Event listener for file input change
+    document.getElementById('fileInput').addEventListener('change', function(e) {
+        
+        document.getElementById('JersyContainer').style.display = 'block';
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = function(fileEvent) {
+            try {
+                jsonData = JSON.parse(fileEvent.target.result);
+                populateTeamDropdown(jsonData); // Populate team dropdown
+                // Initially populate player dropdown with first team's players or empty
+                if (teamDropdown.options.length > 0) {
+                    populatePlayerDropdown(jsonData, teamDropdown.options[0].value);
+                }
+                // check if jsonData.metadata.video_url exists 
+                if (jsonData.metadata.video_url) {
+                    document.getElementById('m3u8Input').value = jsonData.metadata.video_url;
+                    document.getElementById('videoForm').querySelector('button').click();
+                }
+
+            } catch (error) {
+                console.error('Error parsing JSON:', error);
+                alert('Invalid JSON file.');
+            }
+        };
+        reader.readAsText(file);
+
+        // Update team images when the team dropdown is populated
+        if (teamDropdown.options.length > 0) {
+            updateTeamImages(teamDropdown.options[0].value);
+        }
+    });
+
+    // Event listener for team dropdown change
+    teamDropdown.addEventListener('change', function(e) {
+        const selectedTeam = e.target.value;
+        populatePlayerDropdown(jsonData, selectedTeam);
+                
+        // Update team images when the team selection changes
+        updateTeamImages(selectedTeam);
+        
+    });
+
+    // Event listener for player dropdown change
+    playerDropdown.addEventListener('change', function(e) {
+        const selectedPlayer = e.target.value;
+                
+        // Update team images when the team selection changes
+        updatePlayerImages(selectedPlayer);
+    });
+
+
+
+    // Event listener for filter button click
+    document.getElementById('filterButton').addEventListener('click', function() {
+        const fileInput = document.getElementById('fileInput');
+        const file = fileInput.files[0];
+        if (!file) {
+            alert('Please select a file.');
+            return;
+        }
+
+        const team = teamDropdown.value;
+        const playerId = playerDropdown.value;
+
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('team', team);
+        formData.append('playerId', playerId);
+        
+        // Show the overlay as soon as the processing starts
+        var element = document.getElementById('filteredResults');
+        element.classList.remove('hidden');
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+        document.getElementById('overlay_result').style.display = 'flex';
+
+
+        fetch('/upload_and_filter', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.videoPath) {
+                var videoSource = document.getElementById('videoSource');
+                
+                // Append timestamp to the video URL to prevent caching
+                var timestamp = new Date().getTime();
+                videoSource.src = data.videoPath + "?t=" + timestamp;
+        
+                var videoPlayerResult = document.getElementById('videoPlayer_result');
+
+                videoPlayerResult.load();  // Load the new video source
+                
+                videoPlayerResult.onloadeddata = function() {
+                    document.getElementById('overlay_result').style.display = 'none';    
+                    videoPlayerResult.play().catch(error => {
+                        console.error('Error occurred while trying to play the video:', error);
+                    });
+                };
+            } else {
+                console.error('Video path not received');
+                
+            }
+        })
+        .catch(error => console.error('Error:', error));
+    });
+});
+
+// Function to populate the player dropdown with kit numbers based on the selected team
+function populatePlayerDropdown(jsonData, selectedTeam) {
+    const kitNumbers = new Set();
+
+    // Iterate through the 'frame' object in the JSON and filter by team
+    Object.values(jsonData.frame).forEach(frameData => {
+        Object.values(frameData).forEach(trackData => {
+            if (trackData.hasOwnProperty('kit_number') && trackData['team_id'] === selectedTeam) {
+                kitNumbers.add(trackData['kit_number'].toString().trim());
+            }
+        });
+    });
+
+    const playerDropdown = document.getElementById('playerDropdown');
+    playerDropdown.innerHTML = '';
+    kitNumbers.forEach(number => {
+        const option = new Option(number, number);
+        playerDropdown.appendChild(option);
+    });
+}
+
+// Function to populate the team dropdown with team IDs
+function populateTeamDropdown(jsonData) {
+    const teamIds = new Set();
+
+    // Iterate through the 'frame' object in the JSON
+    Object.values(jsonData.frame).forEach(frameData => {
+        // Iterate through each track_id in the frame
+        Object.values(frameData).forEach(trackData => {
+            if (trackData.hasOwnProperty('team_id')) {
+                teamIds.add(trackData['team_id'].toString().trim());
+            }
+        });
+    });
+
+    const teamDropdown = document.getElementById('teamDropdown');
+    teamDropdown.innerHTML = '';
+    teamIds.forEach(teamId => {
+        const option = new Option(teamId, teamId);
+        teamDropdown.appendChild(option);
+    });
+}
+
+
+
+// document.getElementById('videoForm').addEventListener('submit', function(e) {
+//     e.preventDefault();
+//     var m3u8Url = document.getElementById('m3u8Input').value; 
+//     document.getElementById('overlay').style.display = 'flex'; // Show the overlay
+
+//     fetch('/process_video', {
+//         method: 'POST',
+//         body: JSON.stringify({ m3u8Url: m3u8Url }),
+//         headers: {
+//             'Content-Type': 'application/json'
+//         }
+//     })
+//     .then(response => response.json())
+//     .then(data => {
+//         document.getElementById('overlay').style.display = 'none'; // Hide the overlay
+//         if (data.mp4Path) {
+//             var videoPlayer = document.getElementById('videoPlayer');
+//             videoPlayer.src = data.mp4Path;
+//             videoPlayer.load();  
+//             videoPlayer.play(); 
+//         } else {
+//             console.error('Failed to process video');
+//         }
+//     })
+//     .catch(error => {
+//         console.error('Error:', error);
+//         document.getElementById('overlay').style.display = 'none'; // Hide the overlay even if there is an error
+//     });
+// });
+
+
+// Dark Mode
+
+document.getElementById('darkModeToggle').addEventListener('change', function() {
+    document.body.classList.toggle('dark-mode', this.checked);
+  });
+