mirror
/
av
mirror of https://bitbucket.org/ausocean/av.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

audio-player: swap out the seperate input fields for a url field

This commit is contained in:
Trek H 2019-08-16 18:38:14 +09:30
parent a24bb4e0bb
commit 085f0e7437
2 changed files with 76 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
cmd/audio-player/index.html
View File

@ -10,7 +10,7 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body style="height: 100%">
<body style="height: 100%" onload="load();">
<div class="card m-auto" style="width: 40rem;">
<div class="card-body">
<div class="container-fluid">
@ -19,51 +19,7 @@
</div>
</div>
<div class="container-fluid">
<form enctype="multipart/form-data" onsubmit="presubmit();">
<div class="form-group">
<label>App key:</label>
<input class="form-control form-control-sm" type="input" id="ak" name="ak">
</div>
<div class="form-group">
<label>Media ID:</label>
<input class="form-control form-control-sm" type="input" id="id" name="id">
</div>
<div class="form-group">
<label>Start date or timestamp:</label>
<div class="row">
<div class="col">
<input class="form-control form-control-sm" type="datetime-local" id="sd" name="sd" onchange="sync('sd', 'st', true);">
</div>
<div class="col">
<input class="form-control form-control-sm" type="input" id="st" name="st" onchange="sync('sd', 'sd', false);">
</div>
</div>
</div>
<div class="form-group">
<label>Finish date or timestamp:</label>
<div class="row">
<div class="col">
<input class="form-control form-control-sm" type="datetime-local" id="fd" name="fd" onchange="sync('fd', 'ft', true);">
</div>
<div class="col">
<input class="form-control form-control-sm" type="input" id="ft" name="ft" onchange="sync('fd', 'fd', false);">
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Get Audio" id="submit">
</div>
<div class="form-group">
<input type="hidden" id="ts">
</div>
</form>
<span class="form-inline mb-3">
<label>MAC:</label>
<input type="input" class="form-control form-control-sm mx-sm-3" id="ma" placeholder="00:00:00:00:00:00">
<label>Pin:</label>
<input type="input" class="form-control form-control-sm mx-sm-3" id="pn" value="V0" style="width: 3rem">
<button class="btn-sm btn-secondary" onClick="updateMID('ma','pn','id');">Convert to Media ID</button>
</span>
URL: <input type="text" id="url" class="url mb-3 mx-3" onchange="load();"><button onclick="load();">Load</button>
<div class="container-fluid">
<audio class="mx-auto" controls="controls" id="audio">
Your browser does not support the <code>audio</code> element.

150
cmd/audio-player/main.js
View File

@ -58,88 +58,86 @@ function processData() {
}
function sync(dateID, tsID, dateChanged) {
if (dateChanged) { // Go from date to Unix timestamp.
var s = document.getElementById(dateID).value;
if (s == "") {
document.getElementById(tsID).value = "";
// getQuery gets everything after the question mark in the URL.
function getQuery() {
var regex = new RegExp("\\?(.*)");
var match = regex.exec(window.location.href);
if (match == null) {
return '';
} else {
if (s.length == 16) {
s += ':00'; // Append seconds.
}
s += 'Z';
var dt = new Date(s)
document.getElementById(tsID).value = (dt.getTime() / 1000).toString();
}
} else { // Go from Unix timestamp to local date.
var s = document.getElementById(dateID).value;
if (s == "") {
document.getElementById(tsID).value = "";
} else {
var ts = parseInt(document.getElementById(tsID).value) * 1000;
var dt = new Date(ts).toISOString().slice(0, -1);
document.getElementById(dateID).value = dt;
}
}
}
function presubmit() {
if (document.getElementById('st').value == "" && document.getElementById('sd').value != "") {
sync('sd', 'st', true);
}
if (document.getElementById('ft').value == "" && document.getElementById('fd').value != "") {
sync('fd', 'ft', true);
}
if (document.getElementById('ft').value == "") {
document.getElementById('ts').value = document.getElementById('st').value;
} else {
document.getElementById('ts').value = document.getElementById('st').value + '-' + document
.getElementById('ft').value;
return decodeURIComponent(match[1].replace(/\+/g, " "));
}
}
// encodeMAC encodes a MAC address into a 48-bit integer.
function encodeMAC(mac) {
if (mac.length != 17) {
return 0;
function load() {
var url = document.getElementById('url').value;
if (url == "") {
url = getQuery()
document.getElementById('url').value = url;
}
var enc = BigInt(0);
for (i = 15, shift = 0; i >= 0; i -= 3, shift += 8) {
var n = BigInt(parseInt(mac.substring(i, i + 2), 16));
enc += (n << BigInt(shift));
if (url[0] == '/') {
url = window.location.protocol + '//' + window.location.host + url;
}
return enc;
}
// encodePin encodes a pin into a 4-bit integer.
function encodePin(pin) {
var enc = Number(0);
if (pin.charAt(0) == 'S') {
enc = 8;
}
var pn = Number(pin.charAt(1) - '0');
if (pin.length > 2) {
pn = pn * 10 + Number(pin.CharAt(2) - '0');
}
enc |= pn;
return enc;
}
// toMID returns a Media ID as a BigInt given a MAC address and a pin.
function toMID(mac, pin) {
if (mac == "" || pin == "") {
return 0;
}
return (encodeMAC(mac) << BigInt(4)) | BigInt(encodePin(pin))
}
// updateMID updates a Media ID element using values from MAC and pin elements.
function updateMID(mac, pin, mid) {
var macElem = document.getElementById(mac);
var pinElem = document.getElementById(pin);
var midElem = document.getElementById(mid);
if (!macElem || !pinElem || !midElem) {
if (url == "") {
return;
}
midElem.value = toMID(macElem.value, pinElem.value).toString();
var video = document.getElementById('video');
if (Hls.isSupported()) {
console.log("play: browser can play HLS.")
var hls = new Hls({
autoStartLoad: true,
debug: true,
startFragPrefetch: true
});
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log("play: fatal network error encountered, trying to recover.");
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log("play: fatal media error encountered, trying to recover.");
hls.recoverMediaError();
break;
default:
console.log("play: fatal error, cannot recover.");
hls.destroy();
break;
}
} else {
console.log("play: " + data.type + "error, " + data.details);
}
});
hls.on(Hls.Events.MANIFEST_PARSED, function () {
playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
console.log("play: autoplay started.")
document.getElementById('msg').innerHTML = "";
}).catch(error => {
console.log("play: autoplay was prevented.")
document.getElementById('msg').innerHTML = "Autoplay prevented. Hit play button to start."
// Remove the message once playing starts.
video.addEventListener('playing', function (e) {
document.getElementById('msg').innerHTML = "";
});
});
}
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
console.log("play: browser can handle vnd.apple.mpegurl.")
video.src = url;
video.addEventListener('loadedmetadata', function () {
video.play();
});
} else {
console.log("play: HLS not supported by browser.")
}
}