Create watch.html
Browse files- templates/watch.html +50 -0
templates/watch.html
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8"><title>Watching {{ donghua.title }}</title>
|
| 5 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 6 |
+
</head>
|
| 7 |
+
<body class="bg-black text-white px-10 py-10">
|
| 8 |
+
<a href="/" class="text-blue-500 mb-6 inline-block">← Back to Home</a>
|
| 9 |
+
<h1 class="text-3xl font-bold mb-6">{{ donghua.title }}</h1>
|
| 10 |
+
|
| 11 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
|
| 12 |
+
<div class="lg:col-span-2">
|
| 13 |
+
<div id="player-wrapper" class="aspect-video bg-gray-900 rounded-xl flex items-center justify-center border border-gray-800">
|
| 14 |
+
<p id="placeholder-text">Select an episode to start streaming</p>
|
| 15 |
+
<iframe id="main-player" src="" class="hidden w-full h-full" allowfullscreen></iframe>
|
| 16 |
+
</div>
|
| 17 |
+
</div>
|
| 18 |
+
|
| 19 |
+
<div class="bg-gray-900 rounded-xl p-6 h-[500px] overflow-y-auto border border-gray-800">
|
| 20 |
+
<h2 class="text-xl font-bold mb-4">Episode List</h2>
|
| 21 |
+
<div class="grid grid-cols-1 gap-2">
|
| 22 |
+
{% for ep in donghua.episodes %}
|
| 23 |
+
<button onclick="loadStream('{{ ep.url }}')" class="w-full text-left bg-gray-800 hover:bg-blue-600 p-3 rounded transition text-sm">
|
| 24 |
+
Episode {{ ep.num }}
|
| 25 |
+
</button>
|
| 26 |
+
{% endfor %}
|
| 27 |
+
</div>
|
| 28 |
+
</div>
|
| 29 |
+
</div>
|
| 30 |
+
|
| 31 |
+
<script>
|
| 32 |
+
async function loadStream(url) {
|
| 33 |
+
const wrapper = document.getElementById('placeholder-text');
|
| 34 |
+
const iframe = document.getElementById('main-player');
|
| 35 |
+
wrapper.innerText = "Fetching stream link...";
|
| 36 |
+
|
| 37 |
+
const res = await fetch(`/get_stream?url=${encodeURIComponent(url)}`);
|
| 38 |
+
const data = await res.json();
|
| 39 |
+
|
| 40 |
+
if(data.stream_url) {
|
| 41 |
+
iframe.src = data.stream_url;
|
| 42 |
+
iframe.classList.remove('hidden');
|
| 43 |
+
wrapper.classList.add('hidden');
|
| 44 |
+
} else {
|
| 45 |
+
wrapper.innerText = "Error loading stream. Try another episode.";
|
| 46 |
+
}
|
| 47 |
+
}
|
| 48 |
+
</script>
|
| 49 |
+
</body>
|
| 50 |
+
</html>
|