lamp/nonstopmmd
lamp/nonstopmmd
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

channel select

Browse Source
This commit is contained in:
Lamp 2023-10-16 19:17:04 -07:00
parent 9b4124cc40
commit 69e8ba0154
2 changed files with 52 additions and 4 deletions

6
index.js

@ -19,6 +19,12 @@ app.get("/playlist", async (req, res) => {
res.send(await getPlaylist(channel));
});
app.get("/channels", async (req, res) => {
var channels = await fs.readdir("channels");
channels = channels.map(c => c.replace(".json", ""));
res.send(channels);
});
app.get("/newchannel", async (req, res, next) => {
if (!req.query.search || !req.query.number) return res.sendStatus(400);
var search = req.query.search;

50
public/index.html

@ -95,6 +95,13 @@
opacity: 0;
transition: visibility 0s 0.1s, opacity 0.1s linear;
}
#channel_select {
position: fixed;
top: 5px;
right: 5px;
background-color: black;
color: white;
}
</style>
</head>
<body>
@ -107,9 +114,10 @@
<div class="mousie_talk"></div>
</div>
</template>
<select id="channel_select"></select>
<div class="modalbg" id="welcome_modal_bg" onclick="this.classList.add('gone'); document.documentElement.style.cursor = 'none';">
<div class="modal" id="welcome_modal">
<h1 style="margin-top: 0px; text-align: center">Welcome to Non-stop MMD</h1>
<h1 style="margin-top: 0px; text-align: center">Welcome to Non-stop MMD!</h1>
<ul>
<li><b>Scroll</b> to adjust <b>volume</b></li>
<li><b>Right-click</b> to view <b>original</b></li>
@ -119,7 +127,8 @@
<li><b>Click</b> to <b>dance</b></li>
<li><b>Drag</b> to <b>draw</b></li>
</ul>
<p style="margin-bottom: 0px; text-align: center">Click anywhere to continue</p>
<p>Don't like what you see? <b>Change</b> the <b>channel</b> in the upper right corner.</p>
<p style="margin-bottom: 0px; text-align: center">Click anywhere to unmute and continue</p>
</div>
</div>
@ -134,6 +143,8 @@
mousie_canvas.height = innerHeight * devicePixelRatio;
})();
var channel = location.pathname.replace('/','') || "default";
var player;
function initializePlayer(id, position) {
@ -203,7 +214,7 @@
async function nowPlaying() {
if (!playlist || Date.now() > playlist.timestamp + playlist.totalDuration*1000) {
playlist = await fetch("playlist?channel=" + (location.pathname.replace('/','') || "default")).then(res => res.json());
playlist = await fetch("playlist?channel=" + channel).then(res => res.json());
}
for (var i = 0, pastDurations = 0; i < playlist.videos.length; i++) {
var video = playlist.videos[i];
@ -230,7 +241,7 @@
ws = new WebSocket(location.href.replace('http','ws'));
ws.binaryType = "arraybuffer";
ws.onopen = () => {
ws.send(JSON.stringify(["channel", location.pathname.replace('/','') || "default"]));
ws.send(JSON.stringify(["channel", channel]));
};
ws.onmessage = evt => {
if (typeof evt.data == "string") {
@ -242,6 +253,15 @@
case "leave":
document.getElementById("mousie"+j[1])?.remove();
break;
case "channel":
channel = j[1];
history.pushState({}, "", channel);
playlist = undefined;
sync();
[...document.getElementsByClassName('mousie')].forEach(m => m.remove());
lines = [];
renderCanvas();
break;
}
} else {
var dv = new DataView(evt.data);
@ -436,6 +456,28 @@
window.addEventListener("resize", renderCanvas);
function changeChannel(newChannel) {
ws.send(JSON.stringify(["channel", newChannel]));
}
fetch("channels").then(res => res.json()).then(channels => {
for (let channel of channels) {
let o = document.createElement("option");
o.value = channel;
o.innerText = channel;
channel_select.appendChild(o);
}
channel_select.value = channel;
});
channel_select.onchange = evt => {
changeChannel(evt.target.value);
};
</script>
</body>
</html>