Update templates/index.html

templates/index.html

@@ -280,63 +280,6 @@
       const loadingGif = "{{ url_for('static', filename='eye.gif') }}";
       const newUrl = decodeURIComponent("{{ url|safe }}");
       
-      async function init() {
-            feed.style.width = "80px";
-            feed.style.height = "50px";
-            feed.src = loadingGif;
-            feed.style.opacity = "0.15";
-            infoText.style.opacity = "0";
-            locationName.textContent = "{{ page_title|safe }}";
-  
-            await refreshImage();
-            
-            feed.onload = function() {
-                isLoading = false;
-                if (isJpeg) {
-                  setTimeout(async () => {
-                      await refreshImage();
-                  }, 250);
-                }
-              
-                if (firstLoad) {
-                    countryElement.textContent = "connecting...";
-                    infoDiv.style.opacity = "0";
-                }
-                firstLoad = false;
-    
-                setTimeout(() => {
-                    locationName.textContent = "{{ name|safe }}";
-                    countryElement.textContent = "{{ country|safe }}";
-                    feed.style.width = "100%";
-                    feed.style.height = "70%";
-                    feed.style.opacity = "1";
-                    infoDiv.style.opacity = "1";
-                }, 100);
-    
-                infoText.style.opacity = "1";
-            };
-
-            feed.onerror = function() {
-                console.error('Error loading feed', this.src);
-                const urlParams = new URLSearchParams(window.location.search);
-    
-                if (urlParams.get('id')) {
-                    firstLoad = false;
-                    feed.style.width = "80px";
-                    feed.style.height = "50px";
-                    feed.src = loadingGif;
-                    feed.style.opacity = "0.15";
-                    countryElement.textContent = "couldn't connect.";
-                } else if (firstLoad) {
-                    window.location.href = "?new=true";
-                } else {
-                    firstLoad = false;
-                    console.log("Trying again");
-                    setTimeout(refreshImage, 500);
-                }
-            };
-      }
-      
     // Handle feed load and refresh
     document.addEventListener("DOMContentLoaded", function() {
         
@@ -384,11 +327,67 @@
 
             }
         }
-    
-        init();
-        console.log('Feed load initiated');
     });
 
+      async function init() {
+        feed.style.width = "80px";
+        feed.style.height = "50px";
+        feed.src = loadingGif;
+        feed.style.opacity = "0.15";
+        infoText.style.opacity = "0";
+        locationName.textContent = "{{ page_title|safe }}";
+
+        await refreshImage();
+        
+        feed.onload = function() {
+            isLoading = false;
+            if (isJpeg) {
+              setTimeout(async () => {
+                  await refreshImage();
+              }, 250);
+            }
+          
+            if (firstLoad) {
+                countryElement.textContent = "connecting...";
+                infoDiv.style.opacity = "0";
+            }
+            firstLoad = false;
+
+            setTimeout(() => {
+                locationName.textContent = "{{ name|safe }}";
+                countryElement.textContent = "{{ country|safe }}";
+                feed.style.width = "100%";
+                feed.style.height = "70%";
+                feed.style.opacity = "1";
+                infoDiv.style.opacity = "1";
+            }, 100);
+
+            infoText.style.opacity = "1";
+        };
+
+        feed.onerror = function() {
+            console.error('Error loading feed', this.src);
+            const urlParams = new URLSearchParams(window.location.search);
+
+            if (urlParams.get('id')) {
+                firstLoad = false;
+                feed.style.width = "80px";
+                feed.style.height = "50px";
+                feed.src = loadingGif;
+                feed.style.opacity = "0.15";
+                countryElement.textContent = "couldn't connect.";
+            } else if (firstLoad) {
+                window.location.href = "?new=true";
+            } else {
+                firstLoad = false;
+                console.log("Trying again");
+                setTimeout(refreshImage, 500);
+            }
+        };
+    }
+    init();
+    console.log('Feed load initiated');
+
     // Stop stream when click button
     document.querySelectorAll('.abortButton').forEach(button => {
       button.addEventListener('click', () => {