Mick Gordon - Revision history

Rbutcher at 05:15, 26 December 2025

2025-12-26T05:15:30Z

← Older revision	Revision as of 01:15, 26 December 2025
Line 1:	Line 1:
		<div class="radioBar">
		<button id="radioStart">▶ Radio</button>
		<span id="radioTitle">Not playing</span>
		<button id="radioReplay" disabled>↻ Replay</button>
		<button id="radioNext" disabled>⏭ Next</button>
		</div>

		<!-- Hidden YouTube player -->
		<div id="ytPlayer" class="ytHidden"></div>

		<style>
		.radioBar{
		display:flex; align-items:center; gap:10px;
		padding:10px 12px; border:1px solid rgba(255,120,0,.35);
		border-radius:10px; background:rgba(0,0,0,.45);
		color:#fff; max-width:720px;
		}
		#radioTitle{
		flex:1;
		overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
		opacity:.95;
		}
		.ytHidden{
		width:1px; height:1px; overflow:hidden;
		position:absolute; left:-9999px; top:-9999px;
		}
		</style>

		<script>
		const PLAYLIST_ID = "PLbskP5RAOv8iZNrpqyc12gQzhnOfmbpdO";

		// Load YouTube Iframe API
		(function(){
		const s = document.createElement("script");
		s.src = "https://www.youtube.com/iframe_api";
		document.head.appendChild(s);
		})();

		let player;

		function setTitle(text){ document.getElementById("radioTitle").textContent = text; }
		function enableControls(on){
		document.getElementById("radioReplay").disabled = !on;
		document.getElementById("radioNext").disabled = !on;
		}

		window.onYouTubeIframeAPIReady = function () {
		player = new YT.Player("ytPlayer", {
		height: "1",
		width: "1",
		playerVars: {
		// no visible UI
		controls: 0,
		modestbranding: 1,
		rel: 0,

		// playlist
		listType: "playlist",
		list: PLAYLIST_ID,

		// don't autoplay until user clicks Start
		autoplay: 0
		},
		events: {
		onReady: () => setTitle("Ready"),
		onStateChange: (e) => {
		// When playing or buffering, update title
		if (e.data === YT.PlayerState.PLAYING \|\| e.data === YT.PlayerState.BUFFERING) {
		const data = player.getVideoData ? player.getVideoData() : null;
		if (data && data.title) setTitle(data.title);
		enableControls(true);
		}
		}
		}
		});
		};

		document.getElementById("radioStart").addEventListener("click", () => {
		if (!player) return;
		// This user click is what makes playback/auto-play more likely to work
		player.playVideo();

		// Update title shortly after starting (sometimes metadata lags)
		setTimeout(() => {
		const data = player.getVideoData ? player.getVideoData() : null;
		if (data && data.title) setTitle(data.title);
		enableControls(true);
		}, 600);
		});

		document.getElementById("radioNext").addEventListener("click", () => {
		if (!player) return;
		player.nextVideo();
		setTimeout(() => {
		const data = player.getVideoData ? player.getVideoData() : null;
		if (data && data.title) setTitle(data.title);
		}, 400);
		});

		document.getElementById("radioReplay").addEventListener("click", () => {
		if (!player) return;
		player.seekTo(0, true);
		player.playVideo();
		});
		</script>

Rbutcher: Blanked the page

2025-12-26T05:12:01Z

Blanked the page

← Older revision		Revision as of 01:12, 26 December 2025
Line 1:		Line 1:
	~~<div class="doom-hero">~~
	~~<div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div>~~

	~~<img src="https://doomrelics.com/images/3/36/Door.png" class="doom-hero__overlay" alt="Doom Relics Overlay">~~

	~~<div class="doom-hero__content">~~
	~~<!-- Put your search bar, buttons, or title here -->~~
	~~</div>~~
	~~</div>~~

Rbutcher at 05:04, 26 December 2025

2025-12-26T05:04:17Z

← Older revision		Revision as of 01:04, 26 December 2025
Line 2:		Line 2:
	<div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div>		<div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div>

	[[https://doomrelics.com/images/3/36/Door.png]]		<img src="https://doomrelics.com/images/3/36/Door.png" class="doom-hero__overlay" alt="Doom Relics Overlay">

	<div class="doom-hero__content">		<div class="doom-hero__content">
	<!-- Put your search bar ~~/ logo /~~ buttons in here ~~so they sit above the overlay~~ -->		<!-- Put your search bar, buttons, or title here -->
	</div>		</div>
	</div>		</div>

Rbutcher at 05:03, 26 December 2025

2025-12-26T05:03:42Z

← Older revision		Revision as of 01:03, 26 December 2025
Line 2:		Line 2:
	<div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div>		<div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div>

	[[~~File~~:~~YourTransparentOverlay~~.png~~\|link=\|class=doom-hero__overlay~~]]		[[https://doomrelics.com/images/3/36/Door.png]]

	<div class="doom-hero__content">		<div class="doom-hero__content">

Rbutcher: Created page with "

class=doom-hero__overlay

"

2025-12-26T05:01:32Z

Created page with "<div class="doom-hero"> <div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div> link=|class=doom-hero__overlay <div class="doom-hero__content">  </div> </div>"

New page