-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathplayer.html
More file actions
135 lines (119 loc) · 7.7 KB
/
Copy pathplayer.html
File metadata and controls
135 lines (119 loc) · 7.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en" class="ember-ui h-full bg-[#0F172A]">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stream Preview - StreamHome</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Premium custom styling for video controls and animations */
.dashboard-panel {
backdrop-filter: blur(16px);
background-color: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.05);
}
</style>
<link rel="stylesheet" href="ember-ui.css">
</head>
<body class="ember-ui ember-player h-full flex flex-col justify-between overflow-hidden text-slate-100 font-sans antialiased selection:bg-cyan-500/20 selection:text-cyan-200">
<!-- Main View Container -->
<div class="relative flex-1 flex flex-col lg:flex-row h-full">
<!-- Left side: Player Window -->
<div class="player-stage flex-1 relative flex items-center justify-center bg-black overflow-hidden group">
<video id="video-player" controls autoplay class="w-full h-full object-contain max-h-full max-w-full focus:outline-none"></video>
<!-- Video Loader Spinner -->
<div id="video-spinner" class="absolute inset-0 flex items-center justify-center bg-black/60 pointer-events-none transition-opacity duration-300 opacity-0">
<svg class="animate-spin h-10 w-10 text-cyan-400" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<!-- Corner Title Overlay -->
<div class="player-title-overlay absolute top-4 left-4 pointer-events-none transition-opacity duration-300 opacity-80 group-hover:opacity-100 bg-[#0F172A]/70 backdrop-blur px-3.5 py-1.5 rounded-lg border border-slate-800">
<div id="overlay-title" class="text-xs font-bold tracking-wide text-white">Stream Preview</div>
</div>
</div>
<!-- Right side: Stream Sniffer Inspector Panel -->
<div class="w-full lg:w-96 dashboard-panel border-t lg:border-t-0 lg:border-l border-slate-800 flex flex-col flex-shrink-0 h-1/3 lg:h-full z-10 transition-all duration-300">
<!-- Panel Header -->
<header class="app-header px-5 py-4 border-b border-slate-800/80 bg-[#1E293B]/50 flex items-center justify-between flex-shrink-0">
<div class="flex items-center gap-2.5">
<div class="inspector-brand w-6 h-6 rounded-lg bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center font-extrabold text-[11px] text-white shadow-md shadow-cyan-500/10">SH</div>
<div class="flex flex-col">
<span class="ember-heading text-[15px] leading-none">Stream inspector</span>
<span class="ember-eyebrow mt-1">Ember preview console</span>
</div>
</div>
<div class="flex items-center gap-2">
<span id="player-engine-badge" class="text-[9px] font-bold px-2 py-0.5 rounded border border-cyan-800/40 bg-cyan-950/70 text-cyan-400 uppercase tracking-wider">HTML5 Native</span>
</div>
</header>
<!-- Panel Content Scroll -->
<div class="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar text-xs">
<!-- Stream Specs Card -->
<div class="inspector-card bg-[#0F172A]/50 border border-slate-800/60 p-3.5 rounded-xl space-y-2">
<div class="flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase tracking-wider pb-1.5 border-b border-slate-800/40">
<span>Playback signal</span>
</div>
<div class="grid grid-cols-3 gap-2 text-[11px]">
<div>
<span class="block text-[9px] text-slate-500 font-bold uppercase tracking-wider">Format</span>
<span id="spec-format" class="font-bold text-slate-200 uppercase mt-0.5 block">-</span>
</div>
<div>
<span class="block text-[9px] text-slate-500 font-bold uppercase tracking-wider">Resolution</span>
<span id="spec-resolution" class="font-bold text-slate-200 mt-0.5 block">-</span>
</div>
<div>
<span class="block text-[9px] text-slate-500 font-bold uppercase tracking-wider">State</span>
<span id="spec-state" class="font-bold text-emerald-400 mt-0.5 block">Loading</span>
</div>
</div>
</div>
<!-- Outbound Bypass Headers Card -->
<div class="inspector-card bg-[#0F172A]/50 border border-slate-800/60 p-3.5 rounded-xl space-y-3">
<div class="flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase tracking-wider pb-1.5 border-b border-slate-800/40">
<span>Request headers</span>
<span class="text-[9px] text-emerald-400 font-bold tracking-wider uppercase bg-emerald-950/50 border border-emerald-800/30 px-1.5 py-0.2 rounded">Session rule active</span>
</div>
<div class="space-y-2.5">
<div>
<span class="block text-[9px] text-slate-500 font-bold uppercase tracking-wider">Referer</span>
<div id="header-referer" class="font-mono text-[10px] text-cyan-300 break-all select-all mt-0.5 leading-relaxed bg-slate-900/60 p-1.5 rounded border border-slate-800/40">-</div>
</div>
<div>
<span class="block text-[9px] text-slate-500 font-bold uppercase tracking-wider">Origin</span>
<div id="header-origin" class="font-mono text-[10px] text-cyan-300 break-all select-all mt-0.5 leading-relaxed bg-slate-900/60 p-1.5 rounded border border-slate-800/40">-</div>
</div>
<div>
<span class="block text-[9px] text-slate-500 font-bold uppercase tracking-wider">User-Agent</span>
<div id="header-useragent" class="font-mono text-[10px] text-slate-350 break-all select-all mt-0.5 leading-normal bg-slate-900/60 p-1.5 rounded border border-slate-800/40">-</div>
</div>
</div>
</div>
<!-- Stream URL Display -->
<div class="inspector-card bg-[#0F172A]/50 border border-slate-800/60 p-3.5 rounded-xl space-y-2">
<span class="text-[9px] text-slate-500 font-bold uppercase tracking-wider block">Raw Stream URL</span>
<div id="raw-stream-url" class="font-mono text-[10px] text-slate-400 break-all select-all leading-normal bg-slate-900/60 p-2 rounded border border-slate-800/40 max-h-24 overflow-y-auto">-</div>
</div>
<!-- Playback Console Logs -->
<div class="inspector-card bg-[#0F172A]/50 border border-slate-800/60 p-3.5 rounded-xl space-y-2 flex-1 flex flex-col min-h-0">
<span class="text-[9px] text-slate-500 font-bold uppercase tracking-wider block">Player Console Logs</span>
<div id="player-logs" class="font-mono text-[9px] text-slate-450 leading-relaxed bg-slate-900/80 p-2.5 rounded border border-slate-800/60 h-28 overflow-y-auto space-y-1">
<div>[System] Initializing StreamHome Player...</div>
</div>
</div>
</div>
<!-- Panel Footer -->
<footer class="p-4 border-t border-slate-850 bg-[#1E293B]/20 flex items-center justify-between flex-shrink-0">
<span class="ember-eyebrow text-[9px] text-slate-500 font-bold tracking-wider uppercase">StreamHome media sender</span>
<button id="btn-close-tab" class="ember-secondary px-3.5 py-1.5">Close Preview</button>
</footer>
</div>
</div>
<!-- Dependencies -->
<script src="hls.min.js"></script>
<script src="dash.all.min.js"></script>
<script src="player.js"></script>
</body>
</html>