ztimson/navi
1
0
Fork 0
generated from ztimson/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed minor prod issues
All checks were successful
Build and publish / Build Container (push) Successful in 1m27s
Details

Browse Source
This commit is contained in:
Zakary Timson
2026-03-01 00:03:45 -05:00
parent 4735968612
commit aa79b21a5f
5 changed files with 134 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
public/jukebox.js
View File

@@ -21,17 +21,12 @@ class JukeboxComponent extends HTMLElement {
}
disconnectedCallback() {
// Cleanup listeners when component is removed
if (this.unsubscribeWorld) this.unsubscribeWorld();
if(this.unsubscribeWorld) this.unsubscribeWorld();
}
setupAPIListeners() {
// Listen for world loaded events to auto-load music 🎧
this.unsubscribeWorld = this.api.on('world:loaded', (data) => {
console.log('🎵 Jukebox detected world loaded:', data.theme.name);
if (data.theme?.music) {
this.loadMusic(data.theme.music, data.theme);
}
if(data.theme?.music) this.loadMusic(data.theme.music, data.theme);
});
}
@@ -39,86 +34,90 @@ class JukeboxComponent extends HTMLElement {
this.shadowRoot.innerHTML = `
<style>
:host { display: block; }
.audio-controls {
position: fixed;
display: flex;
top: 20px;
right: 20px;
background: var(--dialogue-header-bg, #ffffff);
border: 3px solid var(--dialogue-border, #000);
border-radius: 8px;
padding: 12px;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
min-width: 200px;
#simple-mute-btn {
position: fixed;
top: 20px;
right: 20px;
}
.track-info {
display: flex;
align-items: center;
background: var(--dialogue-bg, #8b5cf6);
color: var(--dialogue-text, #ffffff);
padding: 8px;
border-radius: 4px;
margin: 0 8px;
overflow: hidden;
height: 24px;
width: 120px;
position: relative;
.audio-controls {
position: fixed;
display: flex;
top: 20px;
right: 20px;
background: var(--dialogue-header-bg, #ffffff);
border: 3px solid var(--dialogue-border, #000);
border-radius: 8px;
padding: 12px;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
min-width: 200px;
}
.track-name {
white-space: nowrap;
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
font-weight: bold;
font-size: 14px;
.track-info {
display: flex;
align-items: center;
background: var(--dialogue-bg, #8b5cf6);
color: var(--dialogue-text, #ffffff);
padding: 8px;
border-radius: 4px;
margin: 0 8px;
overflow: hidden;
height: 24px;
width: 120px;
position: relative;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
.track-name {
white-space: nowrap;
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
font-weight: bold;
font-size: 14px;
}
.controls-row {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.control-btn {
width: 40px;
height: 40px;
background: var(--button-bg, #6366f1);
border: 2px solid var(--dialogue-border, #000);
border-radius: 6px;
cursor: pointer;
font-size: 20px;
box-shadow: 0 3px 0 var(--button-shadow, #4338ca);
transition: transform 0.1s;
display: flex;
align-items: center;
justify-content: center;
.controls-row {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
}
.control-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--button-shadow, #4338ca);
.control-btn {
width: 40px;
height: 40px;
background: var(--button-bg, #6366f1);
border: 2px solid var(--dialogue-border, #000);
border-radius: 6px;
font-size: 20px;
box-shadow: 0 3px 0 var(--button-shadow, #4338ca);
transition: transform 0.1s;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--button-shadow, #4338ca);
.control-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--button-shadow, #4338ca);
}
.control-btn svg {
width: 24px;
height: 24px;
fill: #fff;
.control-btn:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--button-shadow, #4338ca);
}
.control-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
.hidden { display: none; }
</style>
<button class="control-btn" id="simple-mute-btn">
<svg viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
</svg>
</button>
<div class="audio-controls hidden" id="playlist-controls">
<div class="controls-row">
<button class="control-btn" id="prev-btn">
@@ -144,7 +143,6 @@ class JukeboxComponent extends HTMLElement {
</div>
</div>
`;
this.shadowRoot.getElementById('simple-mute-btn').addEventListener('click', () => this.toggleMute());
this.shadowRoot.getElementById('mute-btn').addEventListener('click', () => this.toggleMute());
this.shadowRoot.getElementById('prev-btn').addEventListener('click', () => this.previousTrack());
@@ -155,7 +153,7 @@ class JukeboxComponent extends HTMLElement {
if (!musicConfig) return;
this.theme = theme;
this.isPlaylistMode = Array.isArray(musicConfig) && musicConfig.length > 1;
this.isPlaylistMode = Array.isArray(musicConfig);
this.playlist = Array.isArray(musicConfig) ? musicConfig : [musicConfig];
this.currentTrackIndex = 0;