feat: frontend modernization with HTMX, Alpine.js and Plyr (Phase 3)

- Integrated HTMX for server-driven UI updates and fragments - Adopted Alpine.js for global reactive state and tab management - Replaced legacy player with Plyr.io for premium streaming experience - Implemented real-time download polling via HTMX - Added server-sent Toast notification system - Fixed navigation and authentication scoping issues
2026-03-24 11:10:22 +00:00
parent 2b4cc617cb
commit 5c7116557d
17 changed files with 584 additions and 690 deletions
@@ -7,8 +7,14 @@

    <!-- CSS -->
    <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />

-    <!-- JavaScript -->
+    <!-- External Libraries -->
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
+
+    <!-- Legacy JavaScript (To be refactored) -->
    <script src="/static/js/auth.js?v=1.10" defer></script>
    <script src="/static/js/api.js?v=1.11" defer></script>
    <script src="/static/js/utils.js?v=1.11" defer></script>
@@ -22,7 +28,13 @@
    <script src="/static/js/watchlist-ui.js?v=1.11" defer></script>
    <script src="/static/js/main.js?v=1.11" defer></script>
 </head>
-<body>
+<body x-data="{ 
+    activeTab: 'home', 
+    isAuthenticated: false,
+    username: ''
+}" @set-tab.window="activeTab = $event.detail.tab"
+   @auth-success.window="isAuthenticated = true; username = $event.detail.username; activeTab = 'home'">
+    {% include "components/toast_container.html" %}
    <div class="container">
        {% block content %}{% endblock %}
    </div>