Add OSD with song name

flow-state/src/main.js

@@ -25,6 +25,7 @@ const dom = {
     panelBody: document.getElementById('panel-body'),
     panelTabs: document.getElementById('panel-tabs'),
     hud: document.getElementById('hud'),
+    osd: document.getElementById('btn-osd'),
     play: document.getElementById('btn-play'),
     thLabel: document.getElementById('th-label'),
     thName: document.getElementById('th-name'),
@@ -41,6 +42,7 @@ const state = {
     loopSection: -1,
     tab: 'look',
     hudVisible: false,
+    osdVisible: true,
     busy: false,
     rerollSalt: 0,
     lastFrameTime: 0,
@@ -82,6 +84,7 @@ async function loadFile(file) {
         dom.changeTrack.textContent = 'change track';
 
         strip.setShow(state.show);
+        if (dom.osd) dom.osd.classList.toggle('on', state.osdVisible);
         resize();
         seekTo(0);
         renderPanel();
@@ -160,11 +163,18 @@ document.getElementById('btn-hud').addEventListener('click', () => {
     state.hudVisible = !state.hudVisible;
     dom.hud.hidden = !state.hudVisible;
 });
+if (dom.osd) dom.osd.addEventListener('click', () => setOSDVisible(!state.osdVisible));
 document.getElementById('sel-quality').addEventListener('change', (e) => {
     state.quality = e.target.value;
     resize();
 });
 
+function setOSDVisible(visible) {
+    state.osdVisible = !!visible;
+    state.show.setOSDEnabled(state.osdVisible);
+    if (dom.osd) dom.osd.classList.toggle('on', state.osdVisible);
+}
+
 document.addEventListener('keydown', (e) => {
     if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
     switch (e.key) {
@@ -176,6 +186,7 @@ document.addEventListener('keydown', (e) => {
             state.hudVisible = !state.hudVisible;
             dom.hud.hidden = !state.hudVisible;
             break;
+        case 'o': case 'O': setOSDVisible(!state.osdVisible); break;
         case ',': seekTo(state.show.timeline.frame - 1); break;
         case '.': seekTo(state.show.timeline.frame + 1); break;
         default: break;