Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HashbrownKazang wants to merge 7 commits into
base:main
Choose a base branch
from
Open

Hashbrown kazang/patch 284491 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9888a3f
did I do good?
HashbrownKazang Apr 3, 2025
ff1ac55
spuntradio
HashbrownKazang Apr 4, 2025
3dcb5ba
edit to package name addition of test files
HashbrownKazang Apr 6, 2025
ddf32ec
stage 2
HashbrownKazang Apr 7, 2025
5608398
wwell
HashbrownKazang Apr 7, 2025
970957b
Create CNAME
HashbrownKazang Apr 7, 2025
3e63b52
Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…
HashbrownKazang Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094
1 change: 1 addition & 0 deletions CNAME
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions files.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
res.send('Welcome to a WebContainers app! 🥳');
res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
file: {
contents: `
{
"name": "example-app",
"name": "spuntentertainment-web-con",
"type": "module",
"dependencies": {
"express": "latest",
Expand Down
40 changes: 22 additions & 18 deletions index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first WebContainers app</title>
</head>
<body>
<header>
<h1>Hello, <span class="wc">WebContainers API</span>!</h1>
<p>
<a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
Read the docs 📖
</a>
</p>
</header>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>spuntentertainment-player</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="player">
<!-- Audio element required by updated JS -->
<audio></audio>
<button class="play-pause">▶</button>
<img src="./public/spunt-cover--1..png" class="cover-image">
<div class="progress-bar"></div>
<div class="time-display">
<span class="current-time">0:00</span> /
<span class="duration">0:00</span>
</div>
<input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
</div>
<div class="episode"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion loading.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
<meta charset="UTF-8" />
</head>
<body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry
</body>
</html>
162 changes: 109 additions & 53 deletions main.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
isPlaying: false,
currentEpisode: null,
episodes: [
{
title: 'spuntentertainment episode one',
duration: '4:54',
url: './assets/Spuntentertainment_ A Disclaimer.wav',
artwork: '/spunt-cover-1.png',
description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
}
]
};

window.addEventListener('load', async () => {
textareaEl.value = files['index.js'].file.contents;
textareaEl.addEventListener('input', (e) => {
writeIndexJS(e.currentTarget.value);
});
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

// Call only once
webcontainerInstance = await WebContainer.boot();
await webcontainerInstance.mount(files);
function initPlayer() {
renderEpisodes();
setupEventListeners();
updatePlayerState();
}

const exitCode = await installDependencies();
if (exitCode !== 0) {
throw new Error('Installation failed');
};
function renderEpisodes() {
episodesContainer.innerHTML = player.episodes.map(episode => `
<div class="episode" data-url="${episode.url}">
<h3>${episode.title}</h3>
<p>${episode.duration} • ${episode.description}</p>
</div>
`).join('');
}

startDevServer();
});
function setupEventListeners() {
// Play/Pause control
playPauseBtn.addEventListener('click', togglePlay);

// Volume control
volumeSlider.addEventListener('input', (e) => {
audio.volume = e.target.value;
});

// Progress bar seeking
progressBar.addEventListener('click', (e) => {
const rect = progressBar.getBoundingClientRect();
const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
audio.currentTime = seekTime;
});

async function installDependencies() {
// Install dependencies
const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
// Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
if (episodeEl) {
const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
}
}))
// Wait for install command to exit
return installProcess.exit;
});

// Audio time updates
audio.addEventListener('timeupdate', updateProgress);
audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
// Run `npm run start` to start the Express app
await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
player.isPlaying = !player.isPlaying;
player.isPlaying ? audio.play() : audio.pause();
updatePlayerState();
}

// Wait for `server-ready` event
webcontainerInstance.on('server-ready', (port, url) => {
iframeEl.src = url;
function playEpisode(url) {
if (audio.src !== url) {
audio.src = url;
audio.load().catch(error => {
console.error('Error loading audio:', error);
displayError('Failed to load audio - please check network connection');
});
}

audio.play().then(() => {
player.isPlaying = true;
updatePlayerState();
}).catch(error => {
console.error('Playback failed:', error);
displayError('Playback failed - please check audio format support');
player.isPlaying = false;
updatePlayerState();
});
}

/**
* @param {string} content
*/
function displayError(message) {
const errorEl = document.createElement('div');
errorEl.className = 'error-message';
errorEl.textContent = message;
document.body.appendChild(errorEl);
setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
<div class="container">
<div class="editor">
<textarea>I am a textarea</textarea>
</div>
<div class="preview">
<iframe src="loading.html"></iframe>
</div>
</div>
`
function updateProgress() {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.setProperty('--progress', `${progress}%`);
currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds % 60);
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Hashbrown kazang/patch 284491#13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

HashbrownKazang
wants to merge
7
commits into

base:main
Choose a base branch

from

 Open


Hashbrown kazang/patch 284491
#13
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9888a3f

did I do good?


HashbrownKazang Apr 3, 2025
ff1ac55

spuntradio


HashbrownKazang Apr 4, 2025
3dcb5ba

edit to package name addition of test files


HashbrownKazang Apr 6, 2025
ddf32ec

stage 2


HashbrownKazang Apr 7, 2025
5608398

wwell


HashbrownKazang Apr 7, 2025
970957b

Create CNAME


HashbrownKazang Apr 7, 2025
3e63b52

Merge pull request #1 from spuntentertainment/HashbrownKazang/patch-2…


HashbrownKazang Apr 7, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.env

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
CLOUDFLARE_GLOBAL_API_KEY=617e9963e3f66eec0d177c3508976e18d1094

1 change: 1 addition & 0 deletions
CNAME

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
spuntentertainment.xyz
Binary file addedassets/Spuntentertainment_ A Disclaimer.wav

View file


Open in desktop


Binary file not shown.


4 changes: 2 additions & 2 deletions
files.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ const app = express();
const port = 3111;

app.get('/', (req, res) => {
 res.send('Welcome to a WebContainers app! 🥳');
 res.send('welcome to spuntentertainment! ');
});

app.listen(port, () => {
Expand All@@ -21,7 +21,7 @@ app.listen(port, () => {
 file: {
 contents: `
 {
 "name": "example-app",
 "name": "spuntentertainment-web-con",
 "type": "module",
 "dependencies": {
 "express": "latest",
Expand Down

40 changes: 22 additions & 18 deletions
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/stackblitz-favicon-editor.png" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>My first WebContainers app</title>
 </head>
 <body>
 <header>
 <h1>Hello, <span class="wc">WebContainers API</span>!</h1>
 <p>
 <a class="docs" href="https://webcontainers.io" target="_blank" rel="noreferrer noopener">
 Read the docs 📖
 </a>
 </p>
 </header>
 <div id="app"></div>
 <script type="module" src="/main.js"></script>
 </body>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>spuntentertainment-player</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="player">
 <!-- Audio element required by updated JS -->
 <audio></audio>
 <button class="play-pause">▶</button>
 <img src="./public/spunt-cover--1..png" class="cover-image">
 <div class="progress-bar"></div>
 <div class="time-display">
 <span class="current-time">0:00</span> / 
 <span class="duration">0:00</span>
 </div>
 <input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
 </div>
 <div class="episode"></div>
 <script type="module" src="./main.js"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion
loading.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,6 @@
 <meta charset="UTF-8" />
 </head>
 <body>
Installing dependencies...
TH35H1T5H0W is an intellectual property of spuntentertainment, as if such a thing were possible, and spuntentertainment as per usual, is not resposible, nor sorry 
 </body>
</html>

162 changes: 109 additions & 53 deletions
main.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,71 +1,127 @@
import './style.css'
import { WebContainer } from '@webcontainer/api';
import { files } from './files';
import './style.css';

/** @type {import('@webcontainer/api').WebContainer} */
let webcontainerInstance;
// Get audio element from HTML
const audio = document.querySelector('audio');
const player = {
 isPlaying: false,
 currentEpisode: null,
 episodes: [
 {
 title: 'spuntentertainment episode one',
 duration: '4:54',
 url: './assets/Spuntentertainment_ A Disclaimer.wav',
 artwork: '/spunt-cover-1.png',
 description: 'spuntentertainment episode one should really be considered as more like a tease. This is sort of like the first thing that came out, so, it is what it is. "I love it, I hate it, it is equal parts of aweful and awesome at the same time. I gotta get more right fucking nnw" --HashbrownnKazang'
 }
 ]
};

window.addEventListener('load', async () => {
 textareaEl.value = files['index.js'].file.contents;
 textareaEl.addEventListener('input', (e) => {
 writeIndexJS(e.currentTarget.value);
 });
// DOM Elements
const playPauseBtn = document.querySelector('.play-pause');
const volumeSlider = document.querySelector('.volume-slider');
const progressBar = document.querySelector('.progress-bar');
const currentTimeEl = document.querySelector('.current-time');
const durationEl = document.querySelector('.duration');
const episodesContainer = document.querySelector('.episodes');

 // Call only once
 webcontainerInstance = await WebContainer.boot();
 await webcontainerInstance.mount(files);
function initPlayer() {
 renderEpisodes();
 setupEventListeners();
 updatePlayerState();
}

 const exitCode = await installDependencies();
 if (exitCode !== 0) {
 throw new Error('Installation failed');
 };
function renderEpisodes() {
 episodesContainer.innerHTML = player.episodes.map(episode => `
 <div class="episode" data-url="${episode.url}">
 <h3>${episode.title}</h3>
 <p>${episode.duration} • ${episode.description}</p>
 </div>
 `).join('');
}

 startDevServer();
});
function setupEventListeners() {
 // Play/Pause control
 playPauseBtn.addEventListener('click', togglePlay);

 // Volume control
 volumeSlider.addEventListener('input', (e) => {
 audio.volume = e.target.value;
 });

 // Progress bar seeking
 progressBar.addEventListener('click', (e) => {
 const rect = progressBar.getBoundingClientRect();
 const seekTime = (e.clientX - rect.left) / rect.width * audio.duration;
 audio.currentTime = seekTime;
 });

async function installDependencies() {
// Install dependencies
 const installProcess = await webcontainerInstance.spawn('npm', ['install']);
installProcess.output.pipeTo(new WritableStream({
write(data) {
console.log(data);
 // Episode selection
episodesContainer.addEventListener('click', (e) => {
const episodeEl = e.target.closest('.episode');
 if (episodeEl) {
 const episodeUrl = episodeEl.dataset.url;
playEpisode(episodeUrl);
 }
 }))
 // Wait for install command to exit
 return installProcess.exit;
 });

 // Audio time updates
 audio.addEventListener('timeupdate', updateProgress);
 audio.addEventListener('loadedmetadata', updateDuration);
}

async function startDevServer() {
 // Run `npm run start` to start the Express app
 await webcontainerInstance.spawn('npm', ['run', 'start']);
function togglePlay() {
 player.isPlaying = !player.isPlaying;
 player.isPlaying ? audio.play() : audio.pause();
 updatePlayerState();
}

 // Wait for `server-ready` event
 webcontainerInstance.on('server-ready', (port, url) => {
 iframeEl.src = url;
function playEpisode(url) {
 if (audio.src !== url) {
 audio.src = url;
 audio.load().catch(error => {
 console.error('Error loading audio:', error);
 displayError('Failed to load audio - please check network connection');
 });
 }

 audio.play().then(() => {
 player.isPlaying = true;
 updatePlayerState();
 }).catch(error => {
 console.error('Playback failed:', error);
 displayError('Playback failed - please check audio format support');
 player.isPlaying = false;
 updatePlayerState();
 });
}

/**
 * @param {string} content
 */
function displayError(message) {
 const errorEl = document.createElement('div');
 errorEl.className = 'error-message';
 errorEl.textContent = message;
 document.body.appendChild(errorEl);
 setTimeout(() => errorEl.remove(), 5000);
}

async function writeIndexJS(content) {
await webcontainerInstance.fs.writeFile('/index.js', content);
function updatePlayerState() {
playPauseBtn.textContent = player.isPlaying ? '⏸' : '▶';
}

document.querySelector('#app').innerHTML = `
 <div class="container">
 <div class="editor">
 <textarea>I am a textarea</textarea>
 </div>
 <div class="preview">
 <iframe src="loading.html"></iframe>
 </div>
 </div>
`
function updateProgress() {
 const progress = (audio.currentTime / audio.duration) * 100;
 progressBar.style.setProperty('--progress', `${progress}%`);
 currentTimeEl.textContent = formatTime(audio.currentTime);
}

function updateDuration() {
 durationEl.textContent = formatTime(audio.duration);
}

/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector('iframe');
function formatTime(seconds) {
 const minutes = Math.floor(seconds / 60);
 seconds = Math.floor(seconds % 60);
 return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector('textarea');
// Initialize the player when loaded
window.addEventListener('load', initPlayer);
Loading