86 lines
3 KiB
HTML
86 lines
3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Chompers Rewind</title>
|
|
<link rel="apple-touch-icon" href="logo_180.jpg" />
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div style="text-align:center;width:100%;font-family: sans-serif;">
|
|
<h1>Chompers Rewind</h1>
|
|
<p>Playing through the best <span id="episode_count"></span> episodes of Chompers on a four year delay.</p>
|
|
|
|
<p><strike>Today's</strike> Our pretend date is <span id="past"></span>.</p>
|
|
<div style="float:left;width:350px;height:100%;padding:20px;">
|
|
<p>
|
|
<a onclick="document.getElementById('player').play();">
|
|
<img src="logo_1024.jpg" style="max-width:300;" />
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div style="float:left:width:50%;padding:20px;">
|
|
|
|
|
|
<h2>Today's Episode:</h2>
|
|
<h3><span id="title"></span></h3>
|
|
<p>Originally published: <span id="epDate"></span></h2>
|
|
<p style="margin:0em auto;"><span id="summary"></span></p>
|
|
|
|
<p style="display:none"><span id="epFilename"></span></p>
|
|
|
|
<p><audio id="player" controls="controls">
|
|
<source id="srcID" src=""></source>
|
|
</audio></p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
function GetJson(url) {
|
|
var httpreq = new XMLHttpRequest();
|
|
httpreq.open("GET", url, false);
|
|
httpreq.send(null);
|
|
jsonobj = JSON.parse(httpreq.responseText);
|
|
return jsonobj;
|
|
}
|
|
|
|
function nearestEpisode(episodes, target) {
|
|
let minDifference = Infinity;
|
|
let closestEpisode = {};
|
|
|
|
episodes.forEach(function (episode, index) {
|
|
let epDate = Date.parse(episode.date);
|
|
let difference = Math.abs(epDate - target);
|
|
if ( difference < minDifference ) {
|
|
minDifference = difference;
|
|
closestEpisode = episode;
|
|
}
|
|
});
|
|
|
|
return closestEpisode;
|
|
}
|
|
|
|
var jsonobj = GetJson("episodes.json");
|
|
|
|
var past = new Date(new Date().setFullYear(new Date().getFullYear() - 4));
|
|
|
|
document.getElementById("episode_count").textContent = jsonobj.episodes.length;
|
|
|
|
document.getElementById("past").textContent = past.toLocaleTimeString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric", hour:"2-digit", minute:"2-digit"})
|
|
|
|
let todaysEpisode = nearestEpisode(jsonobj.episodes, past);
|
|
|
|
document.getElementById("title").textContent = todaysEpisode.title;
|
|
|
|
document.getElementById("epDate").textContent = new Date(Date.parse(todaysEpisode.date)).toLocaleTimeString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric", hour: "2-digit", minute: "2-digit" });
|
|
|
|
document.getElementById("summary").textContent = todaysEpisode.summary;
|
|
|
|
document.getElementById("epFilename").textContent = todaysEpisode.filename;
|
|
|
|
document.getElementById("srcID").setAttribute("src", "https://minio.andr3w.net/chompers/media/" + todaysEpisode.filename);
|
|
|
|
document.getElementById("player").load();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|