generated from ztimson/template
ztimson
aa79b21a5f
All checks were successful
Build and publish / Build Container (push) Successful in 1m27s
266 lines
9.0 KiB
JavaScript
266 lines
9.0 KiB
JavaScript
class JukeboxComponent extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
|
|
// Use global singleton 🎵
|
|
this.api = window.netNaviAPI;
|
|
|
|
this.playlist = [];
|
|
this.currentTrackIndex = 0;
|
|
this.bgMusic = null;
|
|
this.isMuted = false;
|
|
this.hasInteracted = false;
|
|
this.theme = null;
|
|
this.isPlaylistMode = false;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
this.setupAPIListeners();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if(this.unsubscribeWorld) this.unsubscribeWorld();
|
|
}
|
|
|
|
setupAPIListeners() {
|
|
this.unsubscribeWorld = this.api.on('world:loaded', (data) => {
|
|
if(data.theme?.music) this.loadMusic(data.theme.music, data.theme);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
#simple-mute-btn {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.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-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;
|
|
}
|
|
.track-name {
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
padding-left: 100%;
|
|
animation: marquee 10s linear infinite;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
.controls-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.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:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 0 var(--button-shadow, #4338ca);
|
|
}
|
|
.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">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="track-info">
|
|
<span class="track-name" id="track-name">No track loaded</span>
|
|
</div>
|
|
<div class="controls-row">
|
|
<button class="control-btn" id="next-btn">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="control-btn" id="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>
|
|
</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());
|
|
this.shadowRoot.getElementById('next-btn').addEventListener('click', () => this.nextTrack());
|
|
}
|
|
|
|
loadMusic(musicConfig, theme) {
|
|
if (!musicConfig) return;
|
|
|
|
this.theme = theme;
|
|
this.isPlaylistMode = Array.isArray(musicConfig);
|
|
this.playlist = Array.isArray(musicConfig) ? musicConfig : [musicConfig];
|
|
this.currentTrackIndex = 0;
|
|
|
|
this.applyThemeColors();
|
|
|
|
if (this.isPlaylistMode) {
|
|
this.shadowRoot.getElementById('simple-mute-btn').classList.add('hidden');
|
|
this.shadowRoot.getElementById('playlist-controls').classList.remove('hidden');
|
|
} else {
|
|
this.shadowRoot.getElementById('simple-mute-btn').classList.remove('hidden');
|
|
this.shadowRoot.getElementById('playlist-controls').classList.add('hidden');
|
|
}
|
|
|
|
this.loadTrack(this.currentTrackIndex);
|
|
}
|
|
|
|
loadTrack(index) {
|
|
if (this.bgMusic) {
|
|
this.bgMusic.pause();
|
|
this.bgMusic = null;
|
|
}
|
|
|
|
if (index >= 0 && index < this.playlist.length) {
|
|
this.bgMusic = new Audio(this.playlist[index]);
|
|
this.bgMusic.volume = 0.5;
|
|
|
|
if (this.isPlaylistMode) {
|
|
this.bgMusic.addEventListener('ended', () => {
|
|
this.currentTrackIndex = (this.currentTrackIndex + 1) % this.playlist.length;
|
|
this.loadTrack(this.currentTrackIndex);
|
|
});
|
|
this.updateTrackDisplay();
|
|
} else {
|
|
this.bgMusic.loop = true;
|
|
}
|
|
|
|
this.setupAutoplayHandler();
|
|
|
|
if (this.hasInteracted && !this.isMuted) {
|
|
this.bgMusic.play();
|
|
}
|
|
}
|
|
}
|
|
|
|
updateTrackDisplay() {
|
|
const trackName = this.shadowRoot.getElementById('track-name');
|
|
const fileName = this.playlist[this.currentTrackIndex].split('/').pop();
|
|
const trackNum = String(this.currentTrackIndex + 1).padStart(2, '0');
|
|
trackName.textContent = `[${trackNum}] ${fileName}`;
|
|
}
|
|
|
|
applyThemeColors() {
|
|
if (!this.theme) return;
|
|
const root = this.shadowRoot.host.style;
|
|
Object.entries(this.theme.colors).forEach(([key, value]) => {
|
|
const cssVar = '--' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
|
|
root.setProperty(cssVar, value);
|
|
});
|
|
}
|
|
|
|
setupAutoplayHandler() {
|
|
const startMusic = () => {
|
|
if (!this.hasInteracted && !this.isMuted && this.bgMusic) {
|
|
this.hasInteracted = true;
|
|
this.bgMusic.play();
|
|
}
|
|
};
|
|
const interactionEvents = ['click', 'keydown', 'touchstart'];
|
|
interactionEvents.forEach(event => {
|
|
document.addEventListener(event, startMusic, { once: true });
|
|
});
|
|
}
|
|
|
|
previousTrack() {
|
|
if (!this.isPlaylistMode) return;
|
|
this.currentTrackIndex = (this.currentTrackIndex - 1 + this.playlist.length) % this.playlist.length;
|
|
this.loadTrack(this.currentTrackIndex);
|
|
}
|
|
|
|
nextTrack() {
|
|
if (!this.isPlaylistMode) return;
|
|
this.currentTrackIndex = (this.currentTrackIndex + 1) % this.playlist.length;
|
|
this.loadTrack(this.currentTrackIndex);
|
|
}
|
|
|
|
toggleMute() {
|
|
this.isMuted = !this.isMuted;
|
|
const simpleMuteBtn = this.shadowRoot.getElementById('simple-mute-btn');
|
|
const muteBtn = this.shadowRoot.getElementById('mute-btn');
|
|
|
|
const mutedSVG = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
|
|
const unmutedSVG = '<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>';
|
|
|
|
if (this.bgMusic) {
|
|
if (this.isMuted) {
|
|
this.bgMusic.pause();
|
|
simpleMuteBtn.innerHTML = mutedSVG;
|
|
muteBtn.innerHTML = mutedSVG;
|
|
} else {
|
|
if (!this.hasInteracted) this.hasInteracted = true;
|
|
this.bgMusic.play();
|
|
simpleMuteBtn.innerHTML = unmutedSVG;
|
|
muteBtn.innerHTML = unmutedSVG;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('jukebox-component', JukeboxComponent);
|