mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 11:28:23 -07:00
75 lines
4.5 KiB
HTML
75 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<title>hls.js metrics page</title>
|
|
<link rel="icon" type="image/png" href="http://static1.dmcdn.net/images/favicon-32x32.png" sizes="32x32" />
|
|
<link rel="icon" type="image/png" href="http://static1.dmcdn.net/images/favicon-16x16.png" sizes="16x16" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="header-container">
|
|
<header class="wrapper clearfix">
|
|
<h1 class="title">hls.js metrics page</h1>
|
|
</header>
|
|
</div>
|
|
<pre id='HlsDate'></pre>
|
|
<pre id='StreamPermalink'></pre>
|
|
<input id="metricsData" class="innerControls" type=text value=""/>
|
|
window size
|
|
<div id="metricsButton">
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(0)">window ALL</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(2000)">2s</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(5000)">5s</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(10000)">10s</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(20000)">20s</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(30000)">30s</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(60000)">60s</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(120000)">120s</button><br>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeZoomIn()">Window Zoom In</button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeZoomOut()">Window Zoom Out</button><br>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSlideLeft()"> <<< Window Slide </button>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSlideRight()">Window Slide >>> </button><br>
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="windowStart=$('#windowStart').val()">fixed window start(ms)</button>
|
|
<input type="text" id='windowStart' defaultValue="0" size="8" onkeydown="if(window.event.keyCode=='13'){windowStart=$('#windowStart').val();}">
|
|
<button type="button" class="btn btn-xs btn-primary" onclick="windowEnd=$('#windowEnd').val()">fixed window end(ms)</button>
|
|
<input type="text" id='windowEnd' defaultValue="10000" size="8" onkeydown="if(window.event.keyCode=='13'){windowEnd=$('#windowEnd').val();}"><br>
|
|
<canvas id="bufferTimerange_c" width="640" height="100" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
|
|
<canvas id="bitrateTimerange_c" width="640" height="100" style="border:1px solid #000000";></canvas>
|
|
<canvas id="bufferWindow_c" width="640" height="100" style="border:1px solid #000000" onmousemove="windowCanvasonMouseMove(event)";></canvas>
|
|
<canvas id="videoEvent_c" width="640" height="15" style="border:1px solid #000000";></canvas>
|
|
<canvas id="loadEvent_c" width="640" height="15" style="border:1px solid #000000";></canvas><br>
|
|
</div>
|
|
|
|
<script src="canvas.js"></script>
|
|
<script src="metrics.js"></script>
|
|
<script src="jsonpack.js"></script>
|
|
<script>
|
|
|
|
|
|
$(document).ready(function() {
|
|
$('#metricsData').change(function() { events = jsonpack.unpack(atob($('#metricsData').val())); updateMetrics(); });
|
|
});
|
|
|
|
var data = location.search.split('data=')[1],events;
|
|
if (data) {
|
|
events = jsonpack.unpack(atob(decodeURIComponent(data)));
|
|
updateMetrics();
|
|
}
|
|
|
|
function updateMetrics() {
|
|
var hlsLink = document.URL.substr(0,document.URL.lastIndexOf("/")+1) + 'index.html?src=' + encodeURIComponent(events.url);
|
|
var description = 'playlist: ' + "<a href=\"" + events.url + "\">" + events.url + "</a>" + '<br>replay: ' + "<a href=\"" + hlsLink + "\">" + hlsLink + "</a>";
|
|
$("#StreamPermalink").html(description);
|
|
$("#HlsDate").text("session Start Date:" + new Date(events.t0));
|
|
metricsDisplayed=true;
|
|
showMetrics();
|
|
refreshCanvas();
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|