Spaces:

Unicone-Studio
/

instance2

Paused

App Files Files Community

ChandimaPrabath commited on Jul 27, 2024

Commit

5c6ae28

1 Parent(s): 8c81b5f

fixed ui

Browse files

Files changed (13) hide show

app.py +22 -6
hf_scrapper.py +0 -28
templates/film_details_page.html +187 -0
templates/film_player.html +1 -1
templates/films.html +132 -0
templates/index.html +67 -21
templates/tv.html +0 -0
templates/tv_player.html +0 -0
templates/{film_page.html → tvshow_details_page.html} +0 -0
templates/tvshow_page.html +0 -0
templates/tvshow_player.html +50 -0
templates/tvshows.html +132 -0
video.py +21 -0

app.py CHANGED Viewed

@@ -5,7 +5,7 @@ import json
 import re
 import urllib.parse
 from threading import Thread
-from hf_scrapper import ffmpeg_stream
 from indexer import indexer
 from dotenv import load_dotenv
 from tvdb import fetch_and_cache_json
@@ -19,7 +19,7 @@ CACHE_DIR = os.getenv("CACHE_DIR")
 if not os.path.exists(CACHE_DIR):
     os.makedirs(CACHE_DIR)
-indexer()
 if not os.path.exists(INDEX_FILE):
     raise FileNotFoundError(f"{INDEX_FILE} not found. Please make sure the file exists.")
@@ -105,21 +105,33 @@ app = Flask(__name__)
 def home():
     return render_template('index.html')
-@app.route('/player')
-def player():
     return render_template('player.html')
 @app.route('/films')
 def list_films():
     films = [item for item in file_structure if item['path'].startswith('films')]
     return jsonify([sub_item for film in films for sub_item in film['contents']])
 @app.route('/tv')
 def list_tv():
     tv_shows = [item for item in file_structure if item['path'].startswith('tv')]
     return jsonify([sub_item for show in tv_shows for sub_item in show['contents']])
-@app.route('/film/<path:title>')
 def film_page(title):
     title = urllib.parse.unquote(title)
     film_file_path = get_film_file_path(title)
@@ -138,7 +150,7 @@ def film_page(title):
         'file_path': film_file_path
     })
-@app.route('/tv/<path:show_title>')
 def tv_page(show_title):
     show_title = urllib.parse.unquote(show_title)
     seasons = get_tv_show_seasons(show_title)
@@ -181,5 +193,9 @@ def stream_video():
     file_url = f"https://huggingface.co/{REPO}/resolve/main/{file_path}"
     return Response(generate(file_url), mimetype="video/mp4")
 if __name__ == '__main__':
     app.run(debug=True, host="0.0.0.0", port=7860)

 import re
 import urllib.parse
 from threading import Thread
+from video import ffmpeg_stream
 from indexer import indexer
 from dotenv import load_dotenv
 from tvdb import fetch_and_cache_json
 if not os.path.exists(CACHE_DIR):
     os.makedirs(CACHE_DIR)
+#indexer()
 if not os.path.exists(INDEX_FILE):
     raise FileNotFoundError(f"{INDEX_FILE} not found. Please make sure the file exists.")
 def home():
     return render_template('index.html')
+@app.route('/tvshow_player')
+def tvshow_player():
     return render_template('player.html')
+@app.route('/film_player')
+def film_player():
+    return render_template('film_player.html')
 @app.route('/films')
+def films():
+    return render_template('films.html')
+@app.route('/api/films')
 def list_films():
     films = [item for item in file_structure if item['path'].startswith('films')]
     return jsonify([sub_item for film in films for sub_item in film['contents']])
 @app.route('/tv')
+def tv_shows():
+    return render_template('tvshows.html')
+@app.route('/api/tv')
 def list_tv():
     tv_shows = [item for item in file_structure if item['path'].startswith('tv')]
     return jsonify([sub_item for show in tv_shows for sub_item in show['contents']])
+@app.route('/api/film/<path:title>')
 def film_page(title):
     title = urllib.parse.unquote(title)
     film_file_path = get_film_file_path(title)
         'file_path': film_file_path
     })
+@app.route('/api/tv/<path:show_title>')
 def tv_page(show_title):
     show_title = urllib.parse.unquote(show_title)
     seasons = get_tv_show_seasons(show_title)
     file_url = f"https://huggingface.co/{REPO}/resolve/main/{file_path}"
     return Response(generate(file_url), mimetype="video/mp4")
+@app.route('/film/<path:title>')
+def film_details(title):
+    return render_template('film_details_page.html', title=title)
 if __name__ == '__main__':
     app.run(debug=True, host="0.0.0.0", port=7860)

hf_scrapper.py CHANGED Viewed

@@ -18,25 +18,6 @@ def get_system_proxies():
         print(f"Error getting system proxies: {e}")
         return {}
-def ffmpeg_stream(file_url,token, output="tmp/cache/output.mp4"):
-    try:
-        # Set up the FFmpeg command with quality options
-        ff = FFmpeg(
-            inputs={
-                file_url: None
-            },
-            outputs={
-                f'{output}': '-c:v libx264 -crf 23 -preset medium -c:a aac -b:a 192k'
-            },
-            global_options= f'-headers "Authorization: Bearer {token}"'
-        )
-        # Run the command
-        ff.run()
-    except Exception as e:
-        print(f"Error using FFmpeg to stream file: {e}")
-        return None
 # def download_file(file_url, token, output_path, proxies):
 #     print(f"Downloading file from URL: {file_url} with proxies: {proxies}")
@@ -72,12 +53,3 @@ def write_file_structure_to_json(file_structure, file_path):
         print(f'File structure written to {file_path}')
     except IOError as e:
         print(f"Error writing file structure to JSON: {e}")
-# Example usage
-if __name__ == "__main__":
-    proxies = get_system_proxies()
-    token = 'hf token'
-    file_url = 'file url'
-    # Stream the video
-    output_stream = ffmpeg_stream(file_url, token, output="tmp/cache/video.mp4")

         print(f"Error getting system proxies: {e}")
         return {}
 # def download_file(file_url, token, output_path, proxies):
 #     print(f"Downloading file from URL: {file_url} with proxies: {proxies}")
         print(f'File structure written to {file_path}')
     except IOError as e:
         print(f"Error writing file structure to JSON: {e}")

templates/film_details_page.html ADDED Viewed

	@@ -0,0 +1,187 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Film Details</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(to right, #141414, #333);
+            color: #fff;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            width: 90%;
+            max-width: 1200px;
+            display: flex;
+            gap: 20px;
+            padding: 20px;
+            background-color: #1e1e1e;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+        }
+        .poster {
+            flex: 1;
+            max-width: 300px;
+            position: relative;
+        }
+        .poster img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
+        }
+        .details {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            padding: 10px;
+        }
+        .details h2 {
+            margin: 0;
+            font-size: 36px;
+            font-weight: bold;
+        }
+        .details p {
+            margin: 5px 0;
+            font-size: 16px;
+            line-height: 1.6;
+            color: #d1d1d1;
+        }
+        .genres, .metadata {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .genres div, .metadata div {
+            background-color: #333;
+            padding: 8px 12px;
+            border-radius: 5px;
+            font-size: 14px;
+        }
+        .metadata div {
+            background-color: #444;
+        }
+        .play-button {
+            display: inline-block;
+            padding: 15px 30px;
+            background: linear-gradient(to right, #ff6f61, #ff3f34);
+            color: #fff;
+            text-decoration: none;
+            border-radius: 50px;
+            font-size: 18px;
+            font-weight: bold;
+            text-align: center;
+            transition: background 0.3s, transform 0.3s;
+        }
+        .play-button:hover {
+            background: linear-gradient(to right, #ff3f34, #ff6f61);
+            transform: scale(1.05);
+        }
+        .play-button:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(255, 105, 97, 0.5);
+        }
+        .error-message {
+            color: #ff4d4d;
+            font-size: 18px;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .metadata-container {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .metadata-container div {
+            display: flex;
+            justify-content: space-between;
+            padding: 5px 10px;
+            background-color: #333;
+            border-radius: 5px;
+        }
+        .metadata-container div span {
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="poster" id="film-poster">
+            <img src="https://via.placeholder.com/300x450.png" alt="Poster">
+        </div>
+        <div class="details" id="film-details">
+            <h2 id="film-title">Film Title</h2>
+            <p id="film-overview">Film overview goes here...</p>
+            <div class="genres" id="film-genres"></div>
+            <div class="metadata-container" id="film-metadata"></div>
+            <a href="#" class="play-button" id="play-button">Play</a>
+        </div>
+    </div>
+    <script>
+        async function fetchData(endpoint) {
+            try {
+                const response = await fetch(endpoint);
+                if (!response.ok) throw new Error('Network response was not ok');
+                return await response.json();
+            } catch (error) {
+                console.error('Fetch error:', error);
+                return null;
+            }
+        }
+        function createMetadataElement(label, value) {
+            const div = document.createElement('div');
+            div.innerHTML = `<span>${label}</span><span>${value}</span>`;
+            return div;
+        }
+        function createGenreElement(genre) {
+            const div = document.createElement('div');
+            div.textContent = genre;
+            return div;
+        }
+        async function loadFilmDetails(title) {
+            const data = await fetchData(`/api/film/${encodeURIComponent(title)}`);
+            if (!data || data.error) {
+                document.getElementById('film-details').innerHTML = '<p class="error-message">Film not found</p>';
+                return;
+            }
+            const metadata = data.metadata.data[0];
+            document.getElementById('film-poster').querySelector('img').src = metadata.image_url || 'https://via.placeholder.com/300x450.png';
+            document.getElementById('film-title').textContent = metadata.extended_title;
+            document.getElementById('film-overview').textContent = metadata.overview;
+            const genresContainer = document.getElementById('film-genres');
+            genresContainer.innerHTML = '';
+            metadata.genres.forEach(genre => genresContainer.appendChild(createGenreElement(genre)));
+            const metadataContainer = document.getElementById('film-metadata');
+            metadataContainer.innerHTML = '';
+            metadataContainer.appendChild(createMetadataElement('Director', metadata.director));
+            metadataContainer.appendChild(createMetadataElement('Country', metadata.country));
+            metadataContainer.appendChild(createMetadataElement('Release Date', metadata.first_air_time));
+            const playButton = document.getElementById('play-button');
+            playButton.href = `/stream?path=${encodeURIComponent(data.file_path)}`;
+        }
+        const urlParams = new URLSearchParams(window.location.search);
+        const title = "{{ title }}";
+        if (title) {
+            loadFilmDetails(title);
+        } else {
+            document.getElementById('film-details').innerHTML = '<p class="error-message">No film title provided</p>';
+        }
+    </script>
+</body>
+</html>

templates/film_player.html CHANGED Viewed

@@ -36,7 +36,7 @@
 </head>
 <body>
     <div class="header">
-        <h1>Media Player</h1>
     </div>
     <div class="content">
         <div class="player-container">

 </head>
 <body>
     <div class="header">
+        <h1>Movie Player</h1>
     </div>
     <div class="content">
         <div class="player-container">

templates/films.html CHANGED Viewed

	@@ -0,0 +1,132 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>All Films</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #141414;
+            color: #fff;
+            margin: 0;
+            padding: 0;
+        }
+        .header {
+            background-color: #000;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        .content {
+            padding: 20px;
+        }
+        .section {
+            margin-bottom: 40px;
+        }
+        .section h2 {
+            margin-bottom: 20px;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .card {
+            background-color: #333;
+            border-radius: 10px;
+            overflow: hidden;
+            text-align: center;
+            transition: transform 0.2s;
+            cursor: pointer;
+        }
+        .card:hover {
+            transform: scale(1.05);
+        }
+        .card img {
+            width: 100%;
+            height: 300px;
+            object-fit: cover;
+        }
+        .card h3 {
+            margin: 0;
+            padding: 10px;
+            font-size: 18px;
+        }
+        .card p {
+            margin: 0;
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>All Films</h1>
+    </div>
+    <div class="content">
+        <div class="section" id="films">
+            <h2>Films</h2>
+            <div class="grid" id="films-grid"></div>
+        </div>
+    </div>
+    <script>
+        async function fetchData(endpoint) {
+            try {
+                const response = await fetch(endpoint);
+                if (!response.ok) throw new Error('Network response was not ok');
+                return await response.json();
+            } catch (error) {
+                console.error('Fetch error:', error);
+                return [];
+            }
+        }
+        async function fetchMetadata(title) {
+            try {
+                const response = await fetch(`/get_metadata?title=${encodeURIComponent(title)}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.data && data.data.length > 0) {
+                        const thumbnailUrl = data.data[0].thumbnail;
+                        return thumbnailUrl;
+                    }
+                }
+            } catch (error) {
+                console.error('Metadata fetch error:', error);
+            }
+            return null;
+        }
+        function createCard(item) {
+            const card = document.createElement('div');
+            card.className = 'card';
+            const title = item.path.split('/').pop();
+            card.innerHTML = `
+                <img src="https://via.placeholder.com/340x500.png" alt="${title}">
+                <h3>${title}</h3>
+            `;
+            // Redirect to the appropriate page on card click
+            card.onclick = () => {
+                window.location.href = `/film/${encodeURIComponent(title)}`;
+            };
+            fetchMetadata(title).then(thumbnailUrl => {
+                if (thumbnailUrl !== null) {
+                    card.querySelector('img').src = thumbnailUrl;
+                }
+            });
+            return card;
+        }
+        async function populateGrid(endpoint, gridId) {
+            const grid = document.getElementById(gridId);
+            const data = await fetchData(endpoint);
+            data.forEach(item => {
+                grid.appendChild(createCard(item));
+            });
+        }
+        populateGrid('/api/films', 'films-grid');
+    </script>
+</body>
+</html>

templates/index.html CHANGED Viewed

@@ -1,62 +1,108 @@
 <!DOCTYPE html>
-<html>
 <head>
     <title>Media Library</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #141414;
-            color: #fff;
             margin: 0;
             padding: 0;
         }
         .header {
-            background-color: #000;
-            padding: 20px;
             text-align: center;
         }
         .header h1 {
             margin: 0;
-            font-size: 24px;
         }
         .content {
             padding: 20px;
         }
         .section {
-            margin-bottom: 40px;
         }
         .section h2 {
             margin-bottom: 20px;
         }
         .grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             gap: 20px;
         }
         .card {
-            background-color: #333;
-            border-radius: 10px;
             overflow: hidden;
             text-align: center;
-            transition: transform 0.2s;
             cursor: pointer;
         }
         .card:hover {
             transform: scale(1.05);
         }
         .card img {
             width: 100%;
-            height: 300px;
             object-fit: cover;
         }
         .card h3 {
             margin: 0;
             padding: 10px;
-            font-size: 18px;
         }
         .card p {
             margin: 0;
             padding: 10px;
         }
     </style>
 </head>
@@ -66,11 +112,11 @@
     </div>
     <div class="content">
         <div class="section" id="films">
-            <h2>Films</h2>
             <div class="grid" id="films-grid"></div>
         </div>
         <div class="section" id="tv">
-            <h2>TV Shows</h2>
             <div class="grid" id="tv-grid"></div>
         </div>
     </div>
@@ -107,7 +153,7 @@
             card.className = 'card';
             const title = item.path.split('/').pop();
             card.innerHTML = `
-                <img src="https://via.placeholder.com/340x500.png" alt="${title}">
                 <h3>${title}</h3>
             `;
             // Redirect to the appropriate page on card click
@@ -126,16 +172,16 @@
             return card;
         }
-        async function populateGrid(endpoint, gridId, mediaType) {
             const grid = document.getElementById(gridId);
             const data = await fetchData(endpoint);
-            data.forEach(item => {
                 grid.appendChild(createCard(item, mediaType));
             });
         }
-        populateGrid('/films', 'films-grid', 'movie');
-        populateGrid('/tv', 'tv-grid', 'series');
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Media Library</title>
     <style>
         body {
+            font-family: 'Roboto', sans-serif;
+            background: #0f0f0f;
+            color: #e0e0e0;
             margin: 0;
             padding: 0;
+            overflow-x: hidden;
         }
         .header {
+            background: linear-gradient(to right, #ff2c20, #ef8b81);
+            color: #fff;
+            padding: 40px 20px;
             text-align: center;
+            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+            position: relative;
+            z-index: 1;
         }
         .header h1 {
             margin: 0;
+            font-size: 48px;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
         }
         .content {
             padding: 20px;
+            position: relative;
+            z-index: 1;
         }
         .section {
+            margin-bottom: 60px;
         }
         .section h2 {
             margin-bottom: 20px;
+            font-size: 36px;
+            font-weight: bold;
+            color: #fff;
+            border-bottom: 2px solid #ff1e1e;
+            padding-bottom: 10px;
+        }
+        .section h2 a {
+            color: #f2629f;
+            text-decoration: none;
+            font-size: 16px;
         }
         .grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
             gap: 20px;
+            margin-top: 20px;
         }
         .card {
+            position: relative;
+            background: #222;
+            border-radius: 15px;
             overflow: hidden;
             text-align: center;
+            transition: transform 0.3s, box-shadow 0.3s;
             cursor: pointer;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
         }
         .card:hover {
             transform: scale(1.05);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);
         }
         .card img {
             width: 100%;
+            height: 330px;
             object-fit: cover;
+            transition: opacity 0.3s;
         }
         .card h3 {
             margin: 0;
             padding: 10px;
+            font-size: 22px;
+            font-weight: bold;
+            background: rgba(0, 0, 0, 0.6);
+        }
+        .card::after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 1;
+        }
+        .card:hover::after {
+            opacity: 1;
         }
         .card p {
             margin: 0;
             padding: 10px;
+            font-size: 16px;
+            color: #ccc;
         }
     </style>
 </head>
     </div>
     <div class="content">
         <div class="section" id="films">
+            <h2>Films <a href="/films">View All</a></h2>
             <div class="grid" id="films-grid"></div>
         </div>
         <div class="section" id="tv">
+            <h2>TV Shows <a href="/tv">View All</a></h2>
             <div class="grid" id="tv-grid"></div>
         </div>
     </div>
             card.className = 'card';
             const title = item.path.split('/').pop();
             card.innerHTML = `
+                <img src="https://via.placeholder.com/220x330.png" alt="${title}">
                 <h3>${title}</h3>
             `;
             // Redirect to the appropriate page on card click
             return card;
         }
+        async function populateGrid(endpoint, gridId, mediaType, limit = 5) {
             const grid = document.getElementById(gridId);
             const data = await fetchData(endpoint);
+            data.slice(0, limit).forEach(item => {
                 grid.appendChild(createCard(item, mediaType));
             });
         }
+        populateGrid('/api/films', 'films-grid', 'movie');
+        populateGrid('/api/tv', 'tv-grid', 'series');
     </script>
 </body>
 </html>

templates/tv.html DELETED Viewed

File without changes

templates/tv_player.html DELETED Viewed

File without changes

templates/{film_page.html → tvshow_details_page.html} RENAMED Viewed

File without changes

templates/tvshow_page.html DELETED Viewed

File without changes

templates/tvshow_player.html ADDED Viewed

	@@ -0,0 +1,50 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Player</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #141414;
+            color: #fff;
+            margin: 0;
+            padding: 0;
+        }
+        .header {
+            background-color: #000;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        .content {
+            padding: 20px;
+        }
+        .player-container {
+            max-width: 100%;
+            margin: auto;
+            text-align: center;
+        }
+        video {
+            width: 100%;
+            height: auto;
+            background-color: #333;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>TV Show Player</h1>
+    </div>
+    <div class="content">
+        <div class="player-container">
+            <video id="videoPlayer" controls>
+                <source id="videoSource" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    </div>
+</body>
+</html>

templates/tvshows.html ADDED Viewed

	@@ -0,0 +1,132 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>All TV Shows</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #141414;
+            color: #fff;
+            margin: 0;
+            padding: 0;
+        }
+        .header {
+            background-color: #000;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        .content {
+            padding: 20px;
+        }
+        .section {
+            margin-bottom: 40px;
+        }
+        .section h2 {
+            margin-bottom: 20px;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .card {
+            background-color: #333;
+            border-radius: 10px;
+            overflow: hidden;
+            text-align: center;
+            transition: transform 0.2s;
+            cursor: pointer;
+        }
+        .card:hover {
+            transform: scale(1.05);
+        }
+        .card img {
+            width: 100%;
+            height: 300px;
+            object-fit: cover;
+        }
+        .card h3 {
+            margin: 0;
+            padding: 10px;
+            font-size: 18px;
+        }
+        .card p {
+            margin: 0;
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>All TV Shows</h1>
+    </div>
+    <div class="content">
+        <div class="section" id="tv">
+            <h2>TV Shows</h2>
+            <div class="grid" id="tv-grid"></div>
+        </div>
+    </div>
+    <script>
+        async function fetchData(endpoint) {
+            try {
+                const response = await fetch(endpoint);
+                if (!response.ok) throw new Error('Network response was not ok');
+                return await response.json();
+            } catch (error) {
+                console.error('Fetch error:', error);
+                return [];
+            }
+        }
+        async function fetchMetadata(title) {
+            try {
+                const response = await fetch(`/get_metadata?title=${encodeURIComponent(title)}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.data && data.data.length > 0) {
+                        const thumbnailUrl = data.data[0].thumbnail;
+                        return thumbnailUrl;
+                    }
+                }
+            } catch (error) {
+                console.error('Metadata fetch error:', error);
+            }
+            return null;
+        }
+        function createCard(item) {
+            const card = document.createElement('div');
+            card.className = 'card';
+            const title = item.path.split('/').pop();
+            card.innerHTML = `
+                <img src="https://via.placeholder.com/340x500.png" alt="${title}">
+                <h3>${title}</h3>
+            `;
+            // Redirect to the appropriate page on card click
+            card.onclick = () => {
+                window.location.href = `/tv/${encodeURIComponent(title)}`;
+            };
+            fetchMetadata(title).then(thumbnailUrl => {
+                if (thumbnailUrl !== null) {
+                    card.querySelector('img').src = thumbnailUrl;
+                }
+            });
+            return card;
+        }
+        async function populateGrid(endpoint, gridId) {
+            const grid = document.getElementById(gridId);
+            const data = await fetchData(endpoint);
+            data.forEach(item => {
+                grid.appendChild(createCard(item));
+            });
+        }
+        populateGrid('/api/tv', 'tv-grid');
+    </script>
+</body>
+</html>

video.py ADDED Viewed

	@@ -0,0 +1,21 @@

+from ffmpy import FFmpeg
+def ffmpeg_stream(file_url,token, output="tmp/cache/output.mp4"):
+    try:
+        # Set up the FFmpeg command with quality options
+        ff = FFmpeg(
+            inputs={
+                file_url: None
+            },
+            outputs={
+                f'{output}': '-c:v libx264 -crf 23 -preset medium -c:a aac -b:a 192k'
+            },
+            global_options= f'-headers "Authorization: Bearer {token}"'
+        )
+        # Run the command
+        ff.run()
+    except Exception as e:
+        print(f"Error using FFmpeg to stream file: {e}")
+        return None