User:Toad64/Sandbox - Revision history

Toad64 at 23:15, 4 July 2026

2026-07-04T23:15:08Z

← Older revision		Revision as of 23:15, 4 July 2026
Line 60:		Line 60:
	border: none;		border: none;
	border-radius: 50%;		border-radius: 50%;

			align-items: center;
			justify-content: center;

	background: var(--background-color-interactive);		background: var(--background-color-interactive);
Line 66:		Line 69:

	}		}

			.playBtn:hover {
			background: var(--background-color-interactive-subtle);
			}

	.seek {		.seek {
	flex: 1;		flex: 1;
Line 101:		Line 109:
	cursor: pointer;		cursor: pointer;
	}		}

	.time {		.time {
	font-size: 12px;		font-size: 12px;

Toad64 at 17:08, 4 July 2026

2026-07-04T17:08:22Z

← Older revision		Revision as of 17:08, 4 July 2026
Line 6:		Line 6:
	// In your Common.js		// In your Common.js
	$(document).ready(function() {		$(document).ready(function() {
	~~// Find every native audio player generated by the wiki~~
	$('audio').each(function() {		$('audio').each(function() {
	~~// Create your custom component~~		const $this = $(this);
	const ~~myPlayer~~ = ~~document~~.~~createElement~~('~~audio-player~~');		const src = $this.attr('src');

	// ~~Transfer~~ the ~~source~~		// Log what we found to the console so we can see why it's undefined
	~~myPlayer~~.~~setAttribute~~(~~'track'~~, $(this).~~attr~~('src'));		console.log("Processing element:", this);
			console.log("Source found:", src);
	~~// Replace the native~~ player ~~with your custom one~~
	$(this).replaceWith(myPlayer);		if (src) {
			const myPlayer = document.createElement('audio-player');
			myPlayer.setAttribute('track', src);
			$this.replaceWith(myPlayer);
			} else {
			console.warn("Skipping element because src is undefined:", this);
			}
	});		});
	});		});

Toad64 at 17:01, 4 July 2026

2026-07-04T17:01:00Z

← Older revision		Revision as of 17:01, 4 July 2026
Line 2:		Line 2:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
			// gemini code

	// In your Common.js		// In your Common.js
	$(document).ready(function() {		$(document).ready(function() {
Line 33:		Line 35:
	align-items: center;		align-items: center;
	gap: 12px;		gap: 12px;

	width: 100%;		width: 100%;
	max-width: 400px;		max-width: 400px;
			padding: 10px 15px;
			border-radius: 50px;

	background: var(--background-color-base-subtle);		background: var(--background-color-base-subtle);
	~~padding: 10px 15px;~~
	~~border-radius: 50px;~~
	color: var(--color-base);		color: var(--color-base);
	font-family: sans-serif;		font-family: sans-serif;
			box-sizing: border-box;
			overflow: hidden;
	}		}

	.playBtn {		.playBtn {
			flex-shrink: 0;

	width: 30px;		width: 30px;
	height: 30px;		height: 30px;
			border: none;
			border-radius: 50%;

	background: var(--background-color-interactive);		background: var(--background-color-interactive);
	~~border: none;~~
	color: var(--color-base);		color: var(--color-base);
	~~border-radius: 50%;~~
	cursor: pointer;		cursor: pointer;
	~~flex-shrink: 0;~~
	}		}
	.seek {		.seek {
	-webkit-appearance: none;		flex: 1;
	~~flex~~: 1;		-webkit-appearance: none;
			appearance: none;

	height: 6px;		height: 6px;
			border-radius: 5px;

	background: var(--color-base);		background: var(--color-base);
	~~border-radius: 5px;~~
	cursor: pointer;		cursor: pointer;
	}		}

	.seek::-webkit-slider-thumb {		.seek::-webkit-slider-thumb {
	-webkit-appearance: none; ~~/* Override default look */~~		-webkit-appearance: none;
	appearance: none;		appearance: none;
	~~border-radius: 50px;~~
	width: 15px;		width: 15px;
	height: 15px;		height: 15px;
			border-radius: 50px;

	background: var(--link-color);		background: var(--link-color);
	cursor: pointer;		cursor: pointer;
Line 71:		Line 86:

	.seek::-moz-range-thumb {		.seek::-moz-range-thumb {
	~~border-radius~~: ~~50px~~;		-webkit-appearance: none;
			appearance: none;

	width: 15px;		width: 15px;
	height: 15px;		height: 15px;
			border-radius: 50px;

	background: var(--link-color);		background: var(--link-color);
	cursor: pointer;		cursor: pointer;
	}		}
	.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }		.time {
			font-size: 12px;
			opacity: 0.8;
			white-space: nowrap;
			}
	</style>		</style>

Toad64 at 03:38, 4 July 2026

2026-07-04T03:38:03Z

← Older revision		Revision as of 03:38, 4 July 2026
Line 35:		Line 35:
	width: 100%;		width: 100%;
	max-width: 400px;		max-width: 400px;
	background: var(--background-color-base-~~border~~);		background: var(--background-color-base-subtle);
	padding: 10px 15px;		padding: 10px 15px;
	border-radius: 50px;		border-radius: 50px;

Toad64: updated info about code

2026-07-04T03:34:02Z

updated info about code

← Older revision		Revision as of 03:34, 4 July 2026
Line 1:		Line 1:
	Using Javascript ~~(and a set of ::root colors i had)~~, It is possible to modify the default audio element used to play audio.		Using Javascript, It is possible to modify the default audio element used to play audio. This code replaces the standard webkit media player with a stylized version. (Currently for chromium browsers only)

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
Line 119:		Line 119:
	</syntaxhighlight>		</syntaxhighlight>

	~~This code creates a styleized media player (in~~ this example the Old Deadlock Title Screen):		In this example, the Old Deadlock Title Screen:

	[[File:Music menu lp.mp3]]		[[File:Music menu lp.mp3]]

Toad64: updated code in syntaxhighlight

2026-07-04T03:19:56Z

updated code in syntaxhighlight

← Older revision		Revision as of 03:19, 4 July 2026
Line 2:		Line 2:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	~~// gemini code~~

	// In your Common.js		// In your Common.js
	$(document).ready(function() {		$(document).ready(function() {
Line 28:		Line 26:

	this.innerHTML = `		this.innerHTML = `
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	<style>		<style>
	.player-controls {		.player-controls {
Line 35:		Line 35:
	width: 100%;		width: 100%;
	max-width: 400px;		max-width: 400px;
	background: var(--~~box~~-color~~, #222~~);		background: var(--background-color-base-border);
	padding: 10px 15px;		padding: 10px 15px;
	border-radius: 50px;		border-radius: 50px;
	color: ~~white~~;		color: var(--color-base);
	font-family: sans-serif;		font-family: sans-serif;
	}		}
Line 44:		Line 44:
	width: 30px;		width: 30px;
	height: 30px;		height: 30px;
	background: var(--~~green~~-color~~, #4caf50~~);		background: var(--background-color-interactive);
	border: none;		border: none;
	color: ~~white~~;		color: var(--color-base);
	border-radius: 50%;		border-radius: 50%;
	cursor: pointer;		cursor: pointer;
Line 55:		Line 55:
	flex: 1;		flex: 1;
	height: 6px;		height: 6px;
	background: ~~#7e7e7e~~;		background: var(--color-base);
	border-radius: 5px;		border-radius: 5px;
	cursor: pointer;		cursor: pointer;
			}

			.seek::-webkit-slider-thumb {
			-webkit-appearance: none; /* Override default look */
			appearance: none;
			border-radius: 50px;
			width: 15px;
			height: 15px;
			background: var(--link-color);
			cursor: pointer;
			}

			.seek::-moz-range-thumb {
			border-radius: 50px;
			width: 15px;
			height: 15px;
			background: var(--link-color);
			cursor: pointer;
	}		}
	.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }		.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
Line 64:		Line 82:
	<div class="player-controls">		<div class="player-controls">
	<audio class="audio"><source src="${src}" type="${mime}"></audio>		<audio class="audio"><source src="${src}" type="${mime}"></audio>
	<button class="playBtn">▶</button>		<button class="playBtn"><i class="fa-solid fa-play"></i></button>
	<input class="seek" type="range" value="0" min="0" max="100">		<input class="seek" type="range" value="0" min="0" max="100">
	<span class="time">0:00 / 0:00</span>		<span class="time">0:00 / 0:00</span>
Line 76:		Line 94:

	playBtn.addEventListener("click", () => {		playBtn.addEventListener("click", () => {
	if (audio.paused) { audio.play(); playBtn.~~textContent~~ = '⏸'; }		if (audio.paused) { audio.play(); playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>'; }
	else { audio.pause(); playBtn.~~textContent~~ = '▶'; }		else { audio.pause(); playBtn.innerHTML = '<i class="fa-solid fa-play"></i>'; }
	});		});

Toad64 at 02:34, 4 July 2026

2026-07-04T02:34:30Z

← Older revision		Revision as of 02:34, 4 July 2026
Line 1:		Line 1:
	Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.		Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.

	~~<div class="my-custom-player-wrapper">~~<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	// gemini code		// gemini code

Line 101:		Line 101:
	</syntaxhighlight>		</syntaxhighlight>

	This code creates a styleized media player (in this example the ~~Curiosity Shop Music~~):		This code creates a styleized media player (in this example the Old Deadlock Title Screen):
	[[File:~~Curio music~~.mp3]]		[[File:Music menu lp.mp3]]
	~~</div>~~

Toad64: updated codeblock

2026-06-30T21:35:32Z

updated codeblock

Diff

Toad64: IT WORKS

2026-06-30T21:22:12Z

IT WORKS

Diff

Toad64 at 20:56, 30 June 2026

2026-06-30T20:56:54Z

← Older revision		Revision as of 20:56, 30 June 2026
Line 7:		Line 7:
	artist="Valve Orchestra" originalartist="N/A"		artist="Valve Orchestra" originalartist="N/A"
	originalsource="N/A"		originalsource="N/A"
	track="https://deadlock.wikiFile:~~Curio music~~.mp3" artcover="">		track="https://deadlock.wikiFile:Curio_music.mp3" artcover="">