diff --git a/html/demo.js b/html/demo.js index 34a77c7..33324ef 100644 --- a/html/demo.js +++ b/html/demo.js @@ -285,6 +285,7 @@ function takeLeadClick() { singer_client.x_send_metadata("markStartSinging", true); leadButtonState = "stop-singing"; window.backingTrack.style.display = "none"; + window.provideLyrics.style.display = "none"; } else if (leadButtonState == "stop-singing") { singer_client.x_send_metadata("markStopSinging", true); window.takeLead.textContent = "Lead a Song"; @@ -296,6 +297,25 @@ function takeLeadClick() { window.takeLead.addEventListener("click", takeLeadClick); +window.provideLyrics.addEventListener("click", () => { + window.lyricsEntry.style.display = "block"; +}); + +window.lyricsEntryCancel.addEventListener("click", () => { + window.lyricsEntry.style.display = "none"; + window.lyricsTooLong.style.display = "none"; +}); + +window.lyricsEntryOk.addEventListener("click", () => { + if (window.lyricsEntryBox.value.length > 2500) { + window.lyricsTooLong.style.display = "block"; + } else { + window.lyricsEntry.style.display = "none"; + window.lyricsTooLong.style.display = "none"; + singer_client.send_kv("lyrics", window.lyricsEntryBox.value); + } +}); + window.bpm.addEventListener("change", () => { const newBpm = parseInt(window.bpm.value); if (isNaN(newBpm) || newBpm < 0 || newBpm > 500) { @@ -522,6 +542,7 @@ function set_controls() { window.estLatency.innerText = "..."; window.backingTrack.display = "none"; + window.provideLyrics.style.display = "none"; } function in_select_change() { @@ -868,8 +889,10 @@ function update_active_users( leadButtonState = "start-singing"; window.backingTrack.style.display = "inline-block"; window.backingTrack.selectedIndex = 0; + window.provideLyrics.style.display = "inline-block"; } else if (!imLeading) { window.backingTrack.style.display = "none"; + window.provideLyrics.style.display = "none"; if (hasLeader && song_active()) { window.takeLead.textContent = "Halt Song"; leadButtonState = "stop-singing" @@ -1463,7 +1486,6 @@ async function start_singing() { window.backingVolumeControl.value = metadata["backingVolume"]; } - first_bucket_s = metadata["first_bucket"] || first_bucket_s; if (metadata["twilio_token"]) { @@ -1471,6 +1493,11 @@ async function start_singing() { connect_twilio(); } + if (metadata["lyrics"]) { + window.lyricsDisplay.value = metadata["lyrics"]; + window.lyricsDisplay.style.display = "block"; + } + let startSingingCountdown = null; let stopSingingCountdown = null; @@ -1571,6 +1598,10 @@ async function start_singing() { window.buckets.style.display = showBuckets ? "flex" : "none"; window.unbucketedUsers.style.display = showBuckets ? "none" : "block"; + if (!showBuckets) { + window.lyricsDisplay.style.display = "none"; + } + const showBucketingGuide = hasLeader && !song_active(); window.bucketingGuide.style.display = showBucketingGuide ? "block" : "none"; diff --git a/html/index.html b/html/index.html index e10318d..65207a7 100644 --- a/html/index.html +++ b/html/index.html @@ -93,6 +93,7 @@ } #backingTrack { display: none; } +#provideLyrics { display: none; } #crash { display: none; @@ -411,8 +412,43 @@ #aboveBuckets > * { margin-bottom: 1em; } + +#lyricsEntry { + position: absolute; + top: 1em; + left: 1em; + border-radius: 0.5em; + border: 1px solid #aaa; + width: calc(100vw - 2em); + height: calc(100vh - 2em); + background: rgb(224, 242, 242); + z-index: 2; + display: none; +} +#lyricsEntryBox { + width: calc(100% - 2em); + height: calc(100% - 4em); + margin: 1em; +} +#lyricsEntryBottom { + display: flex; + flex-direction: row; + justify-content: flex-end; + margin-right: 1em; +} +#lyricsTooLong { + color: red; + display: none; + margin-right: 1em; +} +#lyricsDisplay { + width: 100%; + height: 40vh; + display: none; +} + @@ -421,6 +457,15 @@ +