Spaces:

vericudebuget
/

huggingtube

Running

App Files Files Community

vericudebuget commited on Oct 5, 2024

Commit

119b382

verified ·

1 Parent(s): 55e9ba3

Update index.html

Browse files

Files changed (1) hide show

index.html +423 -18

index.html CHANGED Viewed

@@ -1,19 +1,424 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+:root {
+            --bg-primary: #0a0f18;
+            --bg-secondary: #141e2f;
+            --text-primary: #ffffff;
+            --text-secondary: #adbac7;
+            --accent: #2188ff;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        .video-card {
+            width: 250px;
+            margin: 15px;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: var(--bg-secondary);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+        .logo {
+            color: var(--text-primary);
+            font-size: 1.2rem;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .logo i {
+            color: var(--accent);
+            margin-right: 0.5rem;
+        }
+        .search-bar {
+            flex-grow: 1;
+            max-width: 600px;
+            margin: 0 1rem;
+        }
+        .search-bar input {
+            width: 100%;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid var(--text-secondary);
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        .user-actions i {
+            margin-left: 1rem;
+            cursor: pointer;
+        }
+        main {
+            display: flex;
+            margin-top: 56px; /* Header height */
+        }
+        .sidebar {
+            width: 240px;
+            padding: 1rem;
+            position: fixed;
+            top: 56px;
+            bottom: 0;
+            overflow-y: auto;
+            background-color: var(--bg-primary);
+        }
+        .sidebar-item {
+            display: flex;
+            align-items: center;
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            border-radius: 10px;
+        }
+        .sidebar-item:hover {
+            background-color: var(--bg-secondary);
+        }
+        .sidebar-item i {
+            margin-right: 1rem;
+            width: 20px;
+        }
+        .content {
+            flex-grow: 1;
+            padding: 1rem;
+            margin-left: 240px;
+        }
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+        .video-card {
+            cursor: pointer;
+        }
+        .thumbnail {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%;
+            background-color: var(--bg-secondary);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .video-duration {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 2px 4px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+        }
+        .video-info {
+            display: grid;
+            margin-top: 0.5rem;
+        }
+        .channel-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: var(--bg-secondary);
+            margin-right: 0.5rem;
+            flex-shrink: 0;
+        }
+        .video-details h3 {
+            font-size: 1rem;
+            margin-bottom: 0.25rem;
+        }
+        .video-details p {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+        .mobile-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: var(--bg-secondary);
+            padding: 0.5rem;
+            z-index: 1000;
+        }
+        .mobile-nav-items {
+            display: flex;
+            justify-content: space-around;
+        }
+        .mobile-nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 0.8rem;
+        }
+        .mobile-nav-item i {
+            font-size: 1.2rem;
+            margin-bottom: 0.25rem;
+        }
+        /* Mobile styles */
+        @media (max-width: 768px)
+        {
+            .video-card {
+            width: 100%;
+            margin: 15px;
+            }
+            .logo span {
+                display: none;
+            }
+            .search-bar {
+                margin: 0 0.5rem;
+            }
+            .user-actions i {
+                margin-left: 0.5rem;
+            }
+            .sidebar {
+                display: none;
+            }
+            .content {
+                margin-left: 0;
+                margin-bottom: 60px; /* Space for mobile nav */
+            }
+            .mobile-nav {
+                display: block;
+            }
+            .video-grid {
+                display: grid;
+                grid-template-columns: 1fr;
+            }
+        }
+        /* Small mobile styles */
+        @media (max-width: 480px) {
+            .video-card {
+            width: 100%;
+            margin: 15px;
+            }
+            .user-actions {
+                display: none;
+            }
+            .search-bar input {
+                font-size: 14px;
+            }
+            .video-details h3 {
+                font-size: 0.9rem;
+            }
+            .video-details p {
+                font-size: 0.8rem;
+            }
+        }
+        .video-grid {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .thumbnail img {
+            width: 100%;
+        }
+        .video-info h3 {
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fab fa-youtube"></i>
+            <span>HuggingTube</span>
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Search">
+        </div>
+        <div class="user-actions">
+            <i class="fas fa-video"></i>
+            <i class="fas fa-bell"></i>
+            <i class="fas fa-user-circle"></i>
+        </div>
+    </header>
+    <main>
+        <aside class="sidebar">
+            <div class="sidebar-item">
+                <i class="fas fa-home"></i> Home
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-compass"></i> Explore
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-upload"></i> Upload
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-photo-video"></i> All videos
+            </div>
+        </aside>
+        <section class="content">
+            <div class="video-grid" id="videoGrid">
+                <!-- Dynamic video cards will be inserted here -->
+            </div>
+        </section>
+    </main>
+    <nav class="mobile-nav">
+        <div class="mobile-nav-items">
+            <div class="mobile-nav-item">
+                <i class="fas fa-home"></i> Home
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-compass"></i> Explore
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-upload"></i> Upload
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-photo-video"></i> Library
+            </div>
+        </div>
+    </nav>
+    <script>
+        async function fetchVideoMetadata() {
+    try {
+        // Fetch the raw video-index JSON-like data
+        const response = await fetch('https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/video-index.json');
+        const textData = await response.text();
+        // Manually process the raw data, splitting by ';' and trimming
+        let rawUrls = textData.trim().replace(/[{}]/g, '').split(';').filter(url => url.trim());
+        // Base URLs for metadata and thumbnails
+        const baseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/';
+        const thumbnailBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/';
+        // Loop through each URL in the list and fetch the respective metadata
+        const videoGrid = document.getElementById('videoGrid');
+        for (let i = 0; i < rawUrls.length; i++) {
+            let videoUrl = rawUrls[i].trim();
+            // Extract only the file name (last part of the URL)
+            let fileName = videoUrl.substring(videoUrl.lastIndexOf('/') + 1);
+            let indexFileName = fileName.replace('-index.json', ''); // Remove '-index.json' for use in redirection
+            // Create the full URL by appending the file name to the base URL
+            let finalUrl = baseUrl + encodeURIComponent(fileName);
+            try {
+                // Fetch metadata from the properly encoded URL
+                const videoResponse = await fetch(finalUrl);
+                const videoData = await videoResponse.json();
+                // Fix thumbnail URL by using the online location
+                let thumbnailUrl = thumbnailBaseUrl + encodeURIComponent(videoData.thumbnailLocation.substring(videoData.thumbnailLocation.lastIndexOf('/') + 1));
+                // Create a video card dynamically
+                const videoCard = document.createElement('div');
+                videoCard.classList.add('video-card');
+                videoCard.innerHTML = `
+                    <div class="thumbnail">
+                        <img src="${thumbnailUrl}" alt="${videoData.title}" style="cursor: pointer;" onclick="window.location.href='videos/jsonindex${indexFileName}.html'">
+                        <span class="video-duration">N/A</span>
+                    </div>
+                    <div class="video-info">
+                        <h3 style="cursor: pointer;" onclick="window.location.href='videos/jsonindex${indexFileName}.html'">${videoData.title}</h3>
+                        <p>${videoData.uploader}</p>
+                        <p>${videoData.views} views • ${new Date(videoData.uploadTimestamp).toLocaleDateString()}</p>
+                    </div>
+                `;
+                // Append the video card to the grid
+                videoGrid.appendChild(videoCard);
+                // Wait 0.3 seconds before fetching the next URL
+                await new Promise(resolve => setTimeout(resolve, 300));
+            } catch (videoError) {
+                console.error(`Error fetching metadata for URL: ${finalUrl}`, videoError);
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching video metadata:', error);
+    }
+}
+// Call the function on page load
+window.onload = fetchVideoMetadata;
+    </script>
+    <img scr="https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/From%20Buddha%20to%20Jesus%20%20%23fyp%20%23christian%20%23testimony%20%23gospel%20%23jesusislord%20%23believe%20%23%C9%A2%E1%B4%8F%E1%B4%85%C9%AAs%C9%A2%E1%B4%8F%E1%B4%8F%E1%B4%85%20%23christ%20%23jesusiscalling%20%23christianpost%20%23christianity%20%23bible%20%23biblestudymoments%20(1)-kwne_thumb.jpg"></img>
+</body>
 </html>