fix

templates/film_details_page.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Film Details</title>
-    <script src="https://cdn.jsdelivr.net/npm/socket.io@4.0.0/dist/socket.io.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.min.js" integrity="sha384-13fTj1YYl5Xk8bo8dqPG7ZNmTPukjZ08s5hlIBvbxkQa2ClOsuT9hALo5eUn53I1" crossorigin="anonymous"></script>
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -124,7 +124,6 @@
             <div class="genres" id="film-genres"></div>
             <div class="metadata-container" id="film-metadata"></div>
             <a href="#" class="play-button" id="play-button" onclick="playFilm()">Play</a>
-            <p id="progress" style="margin-top: 20px; text-align: center;"></p>
         </div>
     </div>
     <script>
@@ -172,27 +171,24 @@
             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 = `#`; // Will be handled by JavaScript
         }
 
-        function playFilm() {
+        async function playFilm() {
             const title = "{{ title }}";
-            const socket = io();
-            const progressElement = document.getElementById('progress');
-            
-            socket.emit('download', { title: title });
-
-            socket.on('download_progress', function(data) {
-                if (data.error) {
-                    progressElement.textContent = 'Error: ' + data.error;
-                } else if (data.status) {
-                    progressElement.textContent = 'Status: ' + data.status;
+            try {
+                const response = await fetch(`/api/cache_film/${encodeURIComponent(title)}`);
+                const data = await response.json();
+                if (data.success) {
+                    window.location.href = `/film_player/${encodeURIComponent(title)}`;
                 } else {
-                    progressElement.textContent = 'Progress: ' + data.progress + '%';
-                    if (data.progress === 100) {
-                        window.location.href = `/cached_films/${encodeURIComponent(title)}`;
-                    }
+                    alert('Error caching film: ' + data.error);
                 }
-            });
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
         }
 
         const urlParams = new URLSearchParams(window.location.search);