21 Commits

Author SHA1 Message Date
7161b99eb0 Fix path issue when generating link to about.html 2025-11-26 15:43:14 -05:00
84e89a53ad Merge pull request 'Rename Today with a technie table and references' (#313) from i312_Rename-Today-with-a-Techie-episode-table-to-twt_eps into main
Reviewed-on: #313
2025-11-23 14:38:27 +00:00
5004f4fe88 Add table rename sql statement 2025-11-23 09:21:48 -05:00
6520bdac8b Rename Today with a technie table and references 2025-11-22 19:30:53 -05:00
2eece012fa Merge pull request 'Modify tags query to return shows upto current date' (#311) from i242_Prevent-future-shows-from-being-included-in-the-Tag-index into main
Reviewed-on: #311
2025-11-22 23:41:30 +00:00
3d74b6f084 Modify tags query to return shows upto current date 2025-11-22 18:38:38 -05:00
24f2b5f9ee Merge pull request 'Fix column layout of correspondent's page' (#310) from i309_Fix-big-screen-layout-on-individual-host-page into main
Reviewed-on: #310
2025-11-22 23:15:09 +00:00
020d6395c1 Fix column layout of correspondent's page 2025-11-22 17:55:54 -05:00
a40774b1e8 Merge pull request '[i307] Add M3U playlist download option to main series page' (#308) from i307_Add-M3U-playlist-download-option-to-main-series-page into main
Reviewed-on: #308
2025-11-21 04:18:27 +00:00
face5e1fbe Fix white space between series description and border 2025-11-20 22:54:24 -05:00
7b9e8a94f0 Add m3u download link to each series's summary 2025-11-20 22:51:32 -05:00
3ca1a903df Merge pull request '[i276] m3u file for all the shows by a given hosts or series' (#306) from i276_m3u-file-for-all-the-shows-by-a-given-hosts-or-series into main
Reviewed-on: #306
2025-11-19 14:42:48 +00:00
ae5bfc12b4 Remove javascript m3u player code
Need community by in before adding javascript to the main site.
2025-11-16 19:45:39 -05:00
21c664ecf9 Add javascript to play m3u file via audio tag
This is an open source (GPL licensed) javascript file which
fetches, parses an M3U formatted file and attaches the files
to the corresponding audio tag within a page.
2025-11-16 19:32:03 -05:00
c17ce1bf74 Add playlist download link to series' pages 2025-11-16 19:25:19 -05:00
c922ea6281 Allow creation of m3u playlist for a series 2025-11-16 19:22:12 -05:00
98c51ee9fe Add playlist download link to correspondents' pages 2025-11-16 15:40:30 -05:00
904d14d083 Merge pull request '[i299] fix auto scroll highlighting of code blocks' (#302) from i299_fix-auto-scroll-highlighting-of-code-blocks into main
Reviewed-on: #302
2025-11-14 21:22:54 +00:00
7170015a0e Merge branch 'main' into i299_fix-auto-scroll-highlighting-of-code-blocks 2025-11-13 21:39:44 -05:00
23f91a0410 Move highlighting to all show notes code tags 2025-11-13 19:55:35 -05:00
2be718287f Change overflow to auto for show notes pre tags 2025-11-13 19:45:40 -05:00
15 changed files with 52 additions and 340 deletions

View File

@@ -0,0 +1 @@
ALTER TABLE twat_eps RENAME TO twt_eps;

View File

@@ -736,10 +736,13 @@ fieldset > table td input[type="radio"] {
padding: 0;
}
.series-description {
margin: 0;
margin: 0 0 1rem 0;
padding: 0;
font-style: italic;
}
.series-desciption > *:last-child {
margin-bottom: 0;
}
.sr-only {
position: absolute;
width: 1px;
@@ -755,11 +758,14 @@ fieldset > table td input[type="radio"] {
}
#show_notes pre
{
overflow: auto;
}
#show_notes code {
display: inline-block;
background-color: var(--show-notes-pre-background);
border: 1px solid #ddd;
overflow: scroll;
padding: 0.1em 0;
}
}
nav.episodes {
color: var(--background-primary);
font-size: 0.9em;

View File

@@ -1,315 +0,0 @@
// @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2-or-Later
// see: m3u-Playlist player in Vanilla Javascript (https://www.draketo.de/software/m3u-player.html)
// last viewed: 2025-11-15
const nodes = document.querySelectorAll("audio,video");
const playlists = {};
const prefetchedTracks = new Map(); // use a map for insertion order, so we can just blow away old entries.
// maximum prefetched blobs that are kept.
const MAX_PREFETCH_KEEP = 10;
// maximum allowed number of entries in a playlist to prevent OOM attacks against the browser with self-referencing playlists
const MAX_PLAYLIST_LENGTH = 1000;
const PLAYLIST_MIME_TYPES = ["audio/x-mpegurl", "audio/mpegurl", "application/vnd.apple.mpegurl","application/mpegurl","application/x-mpegurl"];
function stripUrlParameters(link) {
const url = new URL(link, window.location);
url.search = "";
url.hash = "";
return url.href;
}
function isPlaylist(link) {
const linkHref = stripUrlParameters(link);
return linkHref.endsWith(".m3u") || linkHref.endsWith(".m3u8");
}
function isBlob(link) {
return new URL(link, window.location).protocol == 'blob';
}
function parsePlaylist(textContent) {
return textContent.match(/^(?!#)(?!\s).*$/mg)
.filter(s => s); // filter removes empty strings
}
/**
* Download the given playlist, parse it, and store the tracks in the
* global playlists object using the url as key.
*
* Runs callback once the playlist downloaded successfully.
*/
function fetchPlaylist(url, onload, onerror) {
const playlistFetcher = new XMLHttpRequest();
playlistFetcher.open("GET", url, true);
playlistFetcher.responseType = "blob"; // to get a mime type
playlistFetcher.onload = () => {
if (PLAYLIST_MIME_TYPES.includes(playlistFetcher.response.type)) { // security check to ensure that filters have run
const reader = new FileReader();
const load = onload; // propagate to inner scope
reader.addEventListener("loadend", e => {
playlists[url] = parsePlaylist(reader.result);
onload();
});
reader.readAsText(playlistFetcher.response);
} else {
console.error("playlist must have one of the playlist MIME type '" + PLAYLIST_MIME_TYPES + "' but it had MIME type '" + playlistFetcher.response.type + "'.");
onerror();
}
};
playlistFetcher.onerror = onerror;
playlistFetcher.abort = onerror;
playlistFetcher.send();
}
function servedPartialDataAndCanRequestAll (xhr) {
if (xhr.status === 206) {
if (xhr.getResponseHeader("content-range").includes("/")) {
if (!xhr.getResponseHeader("content-range").includes("/*")) {
return true;
}
}
}
return false;
}
function prefetchTrack(url, onload) {
if (prefetchedTracks.has(url)) {
return;
}
// first cleanup: kill the oldest entries until we're back at the allowed size
while (prefetchedTracks.size > MAX_PREFETCH_KEEP) {
const key = prefetchedTracks.keys().next().value;
const track = prefetchedTracks.get(key);
prefetchedTracks.delete(key);
}
// first set the prefetched to the url so we will never request twice
prefetchedTracks.set(url, url);
// now start replacing it with a blob
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (servedPartialDataAndCanRequestAll(xhr)) {
const endRange = Number(xhr.getResponseHeader("content-range").split("/")[1]) - 1;
const rangeXhr = new XMLHttpRequest();
rangeXhr.open("GET", url, true);
rangeXhr.responseType = "blob";
rangeXhr.setRequestHeader("range", "bytes=0-" + endRange);
rangeXhr.onload = () => {
prefetchedTracks.set(url, rangeXhr.response);
if (onload) {
onload();
}
};
rangeXhr.send();
} else {
prefetchedTracks.set(url, xhr.response);
if (onload) {
onload();
}
}
};
xhr.send();
}
function showStaticOverlay(mediaTag, canvas) {
if (mediaTag instanceof Audio) {
return;
}
// take screenshot of video and overlay it to mask short-term flicker.
const realWidth = mediaTag.getBoundingClientRect().width;
const realHeight = mediaTag.getBoundingClientRect().height;
canvas.width = realWidth;
canvas.height = realHeight;
// need the actual video size
const videoAspectRatio = mediaTag.videoHeight / mediaTag.videoWidth;
const tagAspectRatio = realHeight / realWidth;
const videoIsPartialHeight = tagAspectRatio > (videoAspectRatio * 1.01); // avoid rounding errors
const videoIsPartialWidth = videoAspectRatio > (tagAspectRatio * 1.01); // avoid rounding errors
if (videoIsPartialHeight) {
canvas.height = realWidth * videoAspectRatio;
} else if (videoIsPartialWidth) {
canvas.width = realHeight / videoAspectRatio;
}
const context = canvas.getContext("2d");
context.scale(canvas.width / mediaTag.videoWidth, canvas.height / mediaTag.videoHeight);
context.drawImage(mediaTag, 0, 0);
canvas.hidden = true;
mediaTag.parentNode.insertBefore(canvas, mediaTag.nextSibling);
canvas.style.position = "absolute";
// shift canvas to cover only the space where the video actually is
if (videoIsPartialWidth) {
canvas.style.marginLeft = "-" + ((realWidth + canvas.width) / 2.) + "px";
} else {
canvas.style.marginLeft = "-" + realWidth + "px";
}
if (videoIsPartialHeight) {
canvas.style.marginTop = ((realHeight - canvas.height) / 2.) + "px";
}
canvas.hidden = false;
}
function updateSrc(mediaTag, callback) {
const playlistUrl = mediaTag.getAttribute("playlist");
const trackIndex = mediaTag.getAttribute("track-index");
// deepcopy playlists to avoid shared mutation
let playlist = [...playlists[playlistUrl]];
let trackUrl = playlist[trackIndex];
// download and splice in playlists as needed
if (isPlaylist(trackUrl)) {
if (playlist.length >= MAX_PLAYLIST_LENGTH) {
// skip playlist if we already have too many tracks
changeTrack(mediaTag, +1);
} else {
// do not use the cached playlist here, though it is tempting: it might genuinely change to allow for updates
fetchPlaylist(
trackUrl,
() => {
playlist.splice(trackIndex, 1, ...playlists[trackUrl]);
playlists[playlistUrl] = playlist;
updateSrc(mediaTag, callback);
},
() => callback());
}
} else {
let url = prefetchedTracks.has(trackUrl)
? prefetchedTracks.get(trackUrl) instanceof Blob
? URL.createObjectURL(prefetchedTracks.get(trackUrl))
: trackUrl : trackUrl;
const oldUrl = mediaTag.getAttribute("src");
// prevent size flickering by setting height before src change
const canvas = document.createElement("canvas");
if (!isNaN(mediaTag.duration) // already loaded a valid file
&& document.fullscreen !== true) { // overlay does not work for fullscreen
// mask flickering with a static overlay
try {
showStaticOverlay(mediaTag, canvas);
} catch (error) {
console.log(error);
}
}
// force sizes to stay constant during loading of the next segment
mediaTag.style.height = mediaTag.getBoundingClientRect().height.toString() + 'px';
mediaTag.style.width = mediaTag.getBoundingClientRect().width.toString() + 'px';
// swich to the next segment
mediaTag.setAttribute("src", url);
mediaTag.oncanplaythrough = () => {
if (!isNaN(mediaTag.duration)) { // already loaded a valid file
// unset element styles to allow recomputation if sizes changed
mediaTag.style.height = null;
mediaTag.style.width = null;
}
// remove overlay
canvas.hidden = true;
canvas.remove(); // to allow garbage collection
};
setTimeout(() => canvas.remove(), 300); // fallback
// replace the url when done, because a blob from an xhr request
// is more reliable in the media tag;
// the normal URL caused jumping prematurely to the next track.
if (url == trackUrl) {
prefetchTrack(trackUrl, () => {
if (mediaTag.paused) {
if (url == mediaTag.getAttribute("src")) {
if (mediaTag.currentTime === 0) {
mediaTag.setAttribute("src", URL.createObjectURL(
prefetchedTracks.get(url)));
}
}
}
});
}
// allow releasing memory
if (isBlob(oldUrl)) {
URL.revokeObjectURL(oldUrl);
}
// update title
mediaTag.parentElement.querySelector(".m3u-player--title").title = trackUrl;
mediaTag.parentElement.querySelector(".m3u-player--title").textContent = trackUrl;
// start prefetching the next three tracks.
for (const i of [1, 2, 3]) {
if (playlist.length > Number(trackIndex) + i) {
prefetchTrack(playlist[Number(trackIndex) + i]);
}
}
callback();
}
}
function changeTrack(mediaTag, diff) {
const currentTrackIndex = Number(mediaTag.getAttribute("track-index"));
const nextTrackIndex = currentTrackIndex + diff;
const tracks = playlists[mediaTag.getAttribute("playlist")];
if (nextTrackIndex >= 0) { // do not collapse the if clauses with double-and, that does not survive inlining
if (tracks.length > nextTrackIndex) {
mediaTag.setAttribute("track-index", nextTrackIndex);
updateSrc(mediaTag, () => mediaTag.play());
}
}
}
/**
* Turn a media tag into playlist player.
*/
function initPlayer(mediaTag) {
mediaTag.setAttribute("playlist", mediaTag.getAttribute("src"));
mediaTag.setAttribute("track-index", 0);
const url = mediaTag.getAttribute("playlist");
const wrapper = mediaTag.parentElement.insertBefore(document.createElement("div"), mediaTag);
const controls = document.createElement("div");
const left = document.createElement("span");
const title = document.createElement("span");
const right = document.createElement("span");
controls.appendChild(left);
controls.appendChild(title);
controls.appendChild(right);
left.classList.add("m3u-player--left");
right.classList.add("m3u-player--right");
title.classList.add("m3u-player--title");
title.style.overflow = "hidden";
title.style.textOverflow = "ellipsis";
title.style.whiteSpace = "nowrap";
title.style.opacity = "0.3";
title.style.direction = "rtl"; // for truncation on the left
title.style.paddingLeft = "0.5em";
title.style.paddingRight = "0.5em";
controls.style.display = "flex";
controls.style.justifyContent = "space-between";
const styleTag = document.createElement("style");
styleTag.innerHTML = ".m3u-player--left:hover, .m3u-player--right:hover {color: wheat; background-color: DarkSlateGray}";
wrapper.appendChild(styleTag);
wrapper.appendChild(controls);
controls.style.width = mediaTag.getBoundingClientRect().width.toString() + "px";
// appending the media tag to the wrapper removes it from the outer scope but keeps the event listeners
wrapper.appendChild(mediaTag);
left.innerHTML = "<"; // not textContent, because we MUST escape
// the tag here and textContent shows the
// escaped version
left.onclick = () => changeTrack(mediaTag, -1);
right.innerHTML = ">";
right.onclick = () => changeTrack(mediaTag, +1);
fetchPlaylist(
url,
() => {
updateSrc(mediaTag, () => null);
mediaTag.addEventListener("ended", event => {
if (mediaTag.currentTime >= mediaTag.duration) {
changeTrack(mediaTag, +1);
}
});
},
() => null);
// keep the controls aligned to the media tag
mediaTag.resizeObserver = new ResizeObserver(entries => {
controls.style.width = entries[0].contentRect.width.toString() + "px";
});
mediaTag.resizeObserver.observe(mediaTag);
}
function processTag(mediaTag) {
const canPlayClaim = mediaTag.canPlayType('audio/x-mpegurl');
let supportsPlaylists = !!canPlayClaim;
if (canPlayClaim == 'maybe') { // yes, seriously: specced as you only know when you try
supportsPlaylists = false;
}
if (!supportsPlaylists) {
if (isPlaylist(mediaTag.getAttribute("src"))) {
initPlayer(mediaTag);
}
}
}
document.addEventListener('DOMContentLoaded', () => {
const nodes = document.querySelectorAll("audio,video");
nodes.forEach(processTag);
});
// @license-end

View File

@@ -177,3 +177,9 @@ root_template: m3u.tpl.m3u8
content: m3u-correspondent.tpl.m3u8
filename: correspondents/[id]/playlist.m3u8
multipage: true
[series_episodes_m3u]
root_template: m3u.tpl.m3u8
content: m3u-series_episodes.tpl.m3u8
filename: series/[id].m3u8
multipage: true

View File

@@ -29,18 +29,10 @@
<p><label>email:</label> <u><!--% this_host.email %--></u></p>
<div><label>profile:</label> <!--% this_host.profile %--></div>
<p><label>episodes:</label> <strong><!--% hpr_show_count + twt_show_count %--></strong></p>
<p><a href="<!--% absolute_url(baseurl,'//correspondents') %-->/<!--% zero_pad_left(this_host.hostid) %-->/playlist.m3u8">Download the M3U playlist</a>.</p>
</div>
<div id="listen_to_shows">
<p>Listen to the shows:<br>
<script src="<!--% absolute_url(baseurl,'//scripts/m3u-player.js') %-->" defer="defer"></script>
<audio controls src="<!--% absolute_url(baseurl,'//correspondents') %-->/<!--% zero_pad_left(this_host.hostid) %-->/playlist.m3u8" type="audio/x-mpegurl">
Your browser does not support the HTML5 audio player.
</audio>
<noscript>Playback without Javascript needs native m3u-support.</noscript><br>
<a href="<!--% absolute_url(baseurl,'//correspondents') %-->/<!--% zero_pad_left(this_host.hostid) %-->/playlist.m3u8">Download the playlist</a>.
<p>
</div>
<div class="lane stack">
<div id="episodes" class="lane stack">
<!--% FOREACH hpr_show IN hpr_shows; %-->
<article>
<!--% show_summary(hpr_show, 'hide_host') %-->

View File

@@ -61,11 +61,11 @@ Subscribe to the comments <a href="<!--% absolute_path(baseurl) %-->comments.rss
<h2>Leave Comment</h2>
<p>
<strong>Note to Verbose Commenters</strong><br />
If you can't fit everything you want to say in the comment below then you really should <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">record</a> a response show instead.
If you can't fit everything you want to say in the comment below then you really should <a href="<!--% absolute_url(baseurl) %-->../../about.html#so_you_want_to_record_a_podcast">record</a> a response show instead.
</p>
<p>
<strong>Note to Spammers</strong><br />
All comments are moderated. All links are checked by humans. We strip out all html. Feel free to <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">record</a> a show about yourself, or your industry, or any other topic we may find interesting. <em>We also check shows for spam :)</em>.
All comments are moderated. All links are checked by humans. We strip out all html. Feel free to <a href="<!--% absolute_url(baseurl) %-->../../about.html#so_you_want_to_record_a_podcast">record</a> a show about yourself, or your industry, or any other topic we may find interesting. <em>We also check shows for spam :)</em>.
</p>
<form method="POST" action="<!--% hub_baseurl %-->comment_confirm.php">
<fieldset>

View File

@@ -29,7 +29,7 @@
hosts.hostid,
hosts.host, hosts.email, hosts.local_image,
miniseries.name AS series, miniseries.id AS seriesid
FROM twat_eps as eps
FROM twt_eps as eps
INNER JOIN hosts ON eps.hostid = hosts.hostid
INNER JOIN miniseries ON eps.series = miniseries.id
ORDER BY eps.id DESC

View File

@@ -13,6 +13,7 @@
<li>Date of earliest show: <!--% series.earliest_show %--></li>
<li>Date of latest show: <!--% series.latest_show %--></li>
<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
<li><a href="<!--% absolute_url(baseurl,'//series') %-->/<!--% zero_pad_left(series.id) %-->.m3u8">Download the M3U playlist</a></li>
</ul>
<div class="series-description"><!--% series.description %--></div>
</article>

View File

@@ -13,6 +13,7 @@
<li>Date of earliest show: <!--% series.earliest_show %--></li>
<li>Date of latest show: <!--% series.latest_show %--></li>
<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->&full=1&gomax=1">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->&full=1&gomax=1">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->&full=1&gomax=1">mp3</a></li>
<li><a href="<!--% absolute_url(baseurl,'//series') %-->/<!--% zero_pad_left(series.id) %-->.m3u8">Download the M3U playlist</a></li>
</ul>
<p><em><!--% series.description %--></em></p>
<section id="series_episodes" class="lane stack">

View File

@@ -6,23 +6,23 @@
<!--% query_episodes = DBI.prepare('
WITH episode_maxmin AS (
SELECT MAX(id) AS \'latest\', MIN(id) AS \'earliest\', ? AS \'id\'
FROM twat_eps AS eps
FROM twt_eps AS eps
),
episode_date AS (
SELECT eps.date
FROM twat_eps AS eps
FROM twt_eps AS eps
WHERE eps.id = ?
),
episode_previous AS (
SELECT MAX(id) AS \'previous\', ? AS \'id\'
FROM twat_eps AS eps
FROM twt_eps AS eps
INNER JOIN episode_date
ON eps.date < episode_date.date
WHERE eps.id > 1
),
episode_next AS (
SELECT MIN(id) AS \'next\', ? AS \'id\'
FROM twat_eps AS eps
FROM twt_eps AS eps
INNER JOIN episode_date
ON eps.date > episode_date.date
)
@@ -34,7 +34,7 @@
hosts.hostid, hosts.host,
miniseries.name AS \'series\', miniseries.id AS \'seriesid\',
miniseries.description AS \'series_description\'
FROM twat_eps AS eps
FROM twt_eps AS eps
INNER JOIN hosts ON eps.hostid = hosts.hostid
INNER JOIN miniseries ON eps.series = miniseries.id
INNER JOIN episode_maxmin ON eps.id = episode_maxmin.id

View File

@@ -0,0 +1,7 @@
<!--% USE DBI(constants.driver, constants.user, constants.password) %-->
<!--% FOREACH series IN DBI.query(
'select s.id from miniseries as s'
) %-->
,<!--% series.id %-->
<!--% END %-->

View File

@@ -1,6 +1,6 @@
<!--% USE DBI(constants.driver) %-->
<!--% FOREACH episode IN DBI.query(
'select eps.id from twat_eps AS eps'
'select eps.id from twt_eps AS eps'
) %-->
,<!--% episode.id %-->
<!--% END %-->

View File

@@ -0,0 +1,13 @@
<!--% PROCESS 'shared-utils.tpl.html' %-->
<!--% PROCESS 'queries-series_episodes.tpl.html' %-->
<!--% USE DBI(constants.driver) %-->
<!--% results_hpr_shows = DBI.prepare(query_shows_sql) %-->
<!--% hpr_shows = results_hpr_shows.execute(id); %-->
<!--% FOREACH hpr_show IN hpr_shows; %-->
#EXTINF: <!--% hpr_show.duration %-->,<!--% hpr_show.host %--> - <!--% hpr_show.title %-->
<!--% media_path(hpr_show.id, 'hpr', 'mp3', baseurl, media_baseurl) %-->
<!--% END %-->

View File

@@ -33,7 +33,7 @@
%-->
<!--% query_twt_show_count = '
SELECT COUNT(id) as Tally
FROM twat_eps AS eps
FROM twt_eps AS eps
WHERE eps.hostid = ?
'
%-->
@@ -48,7 +48,7 @@
hosts.hostid,
hosts.host, hosts.email, hosts.profile,
miniseries.name AS series, miniseries.id AS seriesid
FROM twat_eps AS eps
FROM twt_eps AS eps
INNER JOIN hosts ON eps.hostid = hosts.hostid
INNER JOIN miniseries ON eps.series = miniseries.id
WHERE hosts.hostid = ?

View File

@@ -1 +1 @@
<!--% query_tags = 'SELECT id, tags FROM eps' %-->
<!--% query_tags = 'SELECT id, tags FROM eps WHERE eps.date <= date(\'now\')' %-->