Update index.html

index.html

@@ -4,9 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HF Video Library</title>
-    <!-- Material Icons -->
+    <!-- Font Awesome -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/4.0.0/font/MaterialIcons-Regular.ttf" rel="stylesheet">
+    <!-- Material Icons font file reference is less common, usually class-based -->
+    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/4.0.0/font/MaterialIcons-Regular.ttf" rel="stylesheet"> -->
+    <!-- Using Material Icons via Google Fonts is more standard -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Material Components Web -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css" rel="stylesheet">
     <!-- Plyr.js for enhanced video player -->
@@ -90,6 +93,12 @@
                         <video id="videoPlayer" playsinline controls>
                             <p>Your browser doesn't support HTML5 video.</p>
                         </video>
+                        <!-- *** NEW: Buffering Indicator *** -->
+                        <div id="playerLoadingIndicator" class="player-loading-indicator" style="display: none;">
+                            <div class="loading-spinner"></div>
+                            <span id="playerLoadPercent">Loading 0%</span>
+                        </div>
+                        <!-- *** End of Buffering Indicator *** -->
                     </div>
                     <div class="player-help">
                         <div class="help-item">
@@ -118,7 +127,7 @@
 
         <!-- Footer -->
         <footer class="app-footer">
-            <p>HF Video Library &copy; 2025</p>
+            <p>HF Video Library © 2025</p>
         </footer>
     </div>