<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>YouTube Proxy Player</title>
		<link rel="stylesheet" href="https://unpkg.com/@mantine/core@7.17.8/styles.css" />
		<link rel="stylesheet" href="/static/style.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
	</head>
	<body>
		<div class="wrap">
			<h1 style="margin: 8px 0 0; font-weight: 700;">YouTube Proxy Player</h1>

			<!-- Tab Navigation -->
			<div class="tabs" style="margin: 16px 0;">
				<button id="tabYoutube" class="tab-btn active">YouTube</button>
				<button id="tabStreamlink" class="tab-btn">Stream Link</button>
			</div>

			<!-- YouTube Tab Content -->
			<div id="youtubeTab" class="tab-content active">
				<div class="row">
					<input id="q" type="text" placeholder="Paste YouTube link or type keywords" />
					<button id="btnGo">Go</button>
				</div>
				<div id="status" class="muted" style="margin-top:8px;"></div>
			</div>

			<!-- Streamlink Tab Content -->
			<div id="streamlinkTab" class="tab-content">
				<div class="row">
					<input id="streamUrl" type="text" placeholder="Paste a streaming link (Twitch, Vimeo, Facebook, TikTok, Kick...)" />
					<button id="btnPlayStream">Play</button>
					<button id="btnStreamSettings" class="icon-btn" title="Settings" aria-label="Settings">
						<i class="fa-solid fa-gear" aria-hidden="true"></i>
					</button>
				</div>
				<div class="muted" style="margin-top:6px;">
					Supported: Twitch, Vimeo, Facebook, TikTok, Kick, AfreecaTV, Bilibili, Dailymotion, X (Twitter), Instagram.
				</div>
				<div id="streamStatus" class="muted" style="margin-top:8px;"></div>
			</div>

			<div id="results" class="grid" style="margin-top: 14px;"></div>
			<div id="pager" class="row" style="margin-top: 8px; display:none;">
				<button id="btnPrevPage">Prev page</button>
				<div id="pageInfo" class="muted"></div>
				<button id="btnNextPage">Next page</button>
			</div>

			<div id="playerWrap" style="margin-top: 18px; display:none;">
				<div class="row" style="justify-content: space-between;">
					<div>
						<div id="nowPlaying" style="font-weight:600;"></div>
						<div id="nowChannel" class="muted"></div>
					</div>
					<a id="openStream" class="pill" href="#" target="_blank" rel="noopener">Open stream</a>
				</div>
				<video id="player" class="player" controls playsinline preload="metadata"></video>
			</div>
			<div id="playerControls" class="row" style="margin-top: 8px; display:none;">
				<button id="btnPrev">Prev</button>
				<button id="btnNext">Next</button>
			</div>
		</div>

		<!-- Modal -->
		<div id="modal" style="position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5);">
			<div style="background:#171b21; border:1px solid #262b36; border-radius:12px; padding:16px; max-width:520px; width:calc(100% - 32px); color:#eaeef2;">
				<div style="font-weight:700; margin-bottom:8px;">Notice</div>
				<div id="modalMsg" class="muted" style="white-space:pre-wrap;"></div>
				<div style="margin-top:12px; text-align:right;"><button id="modalClose">Close</button></div>
			</div>
		</div>

		<!-- Streaming loading overlay -->
		<div id="streamLoading" style="position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:9999;">
			<div style="background:#171b21; border:1px solid #262b36; border-radius:12px; padding:16px; max-width:420px; width:calc(100% - 32px); color:#eaeef2; text-align:center;">
				<div style="font-weight:700; margin-bottom:8px;">Preparing stream…</div>
				<div id="streamLoadingMsg" class="muted">Buffering initial delay window…</div>
			</div>
		</div>

		<!-- Stream settings modal -->
		<div id="settingsModal" style="position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); z-index:10000;">
			<div style="background:#171b21; border:1px solid #262b36; border-radius:12px; padding:16px; max-width:420px; width:calc(100% - 32px); color:#eaeef2;">
				<div style="font-weight:700; margin-bottom:8px;">Stream Settings</div>
				<div class="muted" style="margin-bottom:8px;">Configure playback delay (seconds)</div>
				<div class="row" style="margin-bottom:12px;">
					<input id="settingsDelay" type="number" min="0" value="30" style="width:140px;" placeholder="Delay (sec)" />
				</div>
				<div style="text-align:right; display:flex; gap:8px; justify-content:flex-end;">
					<button id="settingsCancel">Cancel</button>
					<button id="settingsSave">Save</button>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.14/dist/hls.min.js"></script>
		<script src="/static/app.js"></script>
	</body>
</html> 
