more menu information

spessasus · Feb 14, 2024 · db56754 · db56754
1 parent 6ee0024
commit db56754
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
   <link rel="stylesheet" href='src/website/css/synthesizer_ui/synthesizer_ui.css'>
   <link rel="stylesheet" href='src/website/css/keyboard.css'>
   <link rel='stylesheet' href='src/website/css/settings.css'>
-  <link rel='stylesheet' href='src/website/css/player_ui.css'>
+  <link rel='stylesheet' href='src/website/css/music_mode_ui.css'>
 
   <style>
     a{

diff --git a/src/spessasynth_lib/midi_parser/midi_loader.js b/src/spessasynth_lib/midi_parser/midi_loader.js
@@ -34,6 +34,11 @@ export class MIDI{
         // time division
         this.timeDivision = readBytesAsUintBigEndian(headerChunk.data, 2);
 
+        const decoder = new TextDecoder('shift-jis');
+
+        // read the copyright
+        this.copyright = "";
+
         /**
          * Contains all the tempo changes in the file. (Ordered from last to first)
          * @type {{
@@ -207,6 +212,12 @@ export class MIDI{
                 {
                     this.midiPorts[i] = eventData[0];
                 }
+                else
+                // check for copyright
+                if(statusByte === messageTypes.copyright)
+                {
+                    this.copyright += decoder.decode(eventData) + "\n";
+                }
             }
             this.tracks.push(track);
             console.log(`%cParsed %c${this.tracks.length}%c / %c${this.tracksAmount}`,
@@ -261,9 +272,25 @@ export class MIDI{
 
         // first track name
         if(this.tracks[0][0].messageStatusByte === messageTypes.trackName) {
-            const decoder = new TextDecoder('shift-jis');
             this.midiName = decoder.decode(this.tracks[0][0].messageData);
         }
+        else if(this.tracks.length > 1)
+        {
+            // if more than 1 track and the first track has no notes, just find the first trackName in the first track
+            if(this.tracks[0].find(
+                message => message.messageStatusByte >= messageTypes.noteOn
+                &&
+                message.messageStatusByte < messageTypes.systemExclusive
+            ) === undefined)
+            {
+                console.log("message", this.tracks[0])
+                let name = this.tracks[0].find(message => message.messageStatusByte === messageTypes.trackName);
+                if(name)
+                {
+                    this.midiName = decoder.decode(name.messageData);
+                }
+            }
+        }
 
         this.fileName = fileName;
 

diff --git a/src/website/css/player_ui.css → src/website/css/music_mode_ui.css b/src/website/css/player_ui.css → src/website/css/music_mode_ui.css
diff --git a/src/website/css/settings.css b/src/website/css/settings.css
@@ -10,6 +10,12 @@
 {
     display: flex;
     align-items: center;
+    justify-content: center;
+}
+
+.settings_button span{
+    text-align: end;
+    font-size: larger;
 }
 
 .seamless_button:hover

diff --git a/src/website/index.html b/src/website/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href='website/css/synthesizer_ui/synthesizer_ui.css'>
   <link rel="stylesheet" href='website/css/keyboard.css'>
   <link rel='stylesheet' href='website/css/settings.css'>
-  <link rel='stylesheet' href='website/css/player_ui.css'>
+  <link rel='stylesheet' href='website/css/music_mode_ui.css'>
 </head>
 <body>
   <div class='spessasynth_main'>

diff --git a/src/website/manager.js b/src/website/manager.js
@@ -10,7 +10,7 @@ import { MIDIDeviceHandler } from '../spessasynth_lib/midi_handler/midi_handler.
 import { WebMidiLinkHandler } from '../spessasynth_lib/midi_handler/web_midi_link.js';
 import { Sequencer } from '../spessasynth_lib/sequencer/sequencer.js';
 import { Settings } from './ui/settings_ui/settings.js';
-import { PlayerUI } from './ui/player_ui.js';
+import { MusicModeUI } from './ui/music_mode_ui.js';
 
 export class Manager {
     channelColors = [
@@ -88,7 +88,7 @@ export class Manager {
         this.seqUI = new SequencerUI(document.getElementById("sequencer_controls"));
 
         // create an UI for music player mode
-        this.playerUI = new PlayerUI(document.getElementById("player_info"));
+        this.playerUI = new MusicModeUI(document.getElementById("player_info"));
 
         // set up settings UI
         this.settingsUI = new Settings(

diff --git a/src/website/ui/player_ui.js → src/website/ui/music_mode_ui.js b/src/website/ui/player_ui.js → src/website/ui/music_mode_ui.js
@@ -1,7 +1,7 @@
 import { getDoubleNoteSvg } from './icons.js'
 import { formatTime } from '../../spessasynth_lib/utils/other.js'
 
-export class PlayerUI{
+export class MusicModeUI {
     /**
      * Creates a new class for displaying information about the current file.
      * @param element {HTMLElement}
@@ -41,7 +41,15 @@ export class PlayerUI{
                 title =  mid.fileName;
             }
             document.getElementById("player_info_title").innerText = title;
-            document.getElementById("player_info_detail").innerText = mid.fileName;
+            // use file name if no copyright detected
+            if(mid.copyright.replaceAll("\n", "").length > 0)
+            {
+                document.getElementById("player_info_detail").innerText = mid.copyright + mid.fileName;
+            }
+            else
+            {
+                document.getElementById("player_info_detail").innerText = mid.fileName;
+            }
             document.getElementById("player_info_time").innerText = formatTime(this.seq.duration).time;
         }, "player-ui-song-change");
     }

diff --git a/src/website/ui/settings_ui/settings.js b/src/website/ui/settings_ui/settings.js
@@ -4,35 +4,37 @@ export class Settings
 {
     /**
      * Creates a new instance of synthetizer UI
-     * @param element {HTMLElement} the element to create the settings in
+     * @param settingsWrapper {HTMLElement} the element to create the settings in
      * @param sythui {SynthetizerUI}
      * @param sequi {SequencerUI}
      * @param renderer {Renderer}
      * @param midiKeyboard {MidiKeyboard}
      * @param midiDeviceHandler {MIDIDeviceHandler}
-     * @param playerInfo {PlayerUI}
+     * @param playerInfo {MusicModeUI}
      */
-    constructor(element,
+    constructor(settingsWrapper,
                 sythui,
                 sequi,
                 renderer,
                 midiKeyboard,
                 midiDeviceHandler,
                 playerInfo) {
-        let settingsWrapper = element;
-        settingsWrapper.style.minWidth = "7em";
         this.mode = "dark";
 
         const settingsButton = document.createElement("div");
         settingsButton.style.position = "relative";
         settingsButton.classList.add("seamless_button");
         settingsButton.classList.add("settings_button");
-        settingsWrapper.insertBefore(settingsButton, settingsWrapper.firstChild);
+        settingsWrapper.appendChild(settingsButton);
 
-        let text = document.createElement('span');
-        text.innerText = "Settings";
-        text.style.fontSize = "larger";
-        text.style.minWidth = "7em";
+        const musicModeButton = document.createElement("div");
+        musicModeButton.classList.add("seamless_button");
+        musicModeButton.innerText = `Toggle music player mode`;
+        musicModeButton.title = 'Toggle the simplified UI version';
+        settingsWrapper.appendChild(musicModeButton)
+
+        let text = document.createElement('span')
+        text.innerText = 'Settings';
 
         let gear = document.createElement('div');
         gear.innerHTML = getGearSvg(32);
@@ -49,6 +51,15 @@ export class Settings
         }
         settingsWrapper.appendChild(this.mainDiv);
 
+        musicModeButton.onclick = () => {
+            playerInfo.togglevisibility();
+            renderer.canvas.classList.toggle("hidden");
+            midiKeyboard.keyboard.classList.toggle("hidden");
+
+            // disable rendering when hidden
+            renderer.renderBool = !renderer.canvas.classList.contains("hidden");
+        }
+
         // stop propagation to disable hide on click outside
         this.mainDiv.onclick = e => e.stopPropagation();
 
@@ -85,9 +96,7 @@ export class Settings
             document.getElementById("toggle_player_mode_button"),
             sythui,
             sequi,
-            renderer,
-            playerInfo,
-            midiKeyboard);
+            renderer);
 
         // key bind is "R"
         document.addEventListener("keydown", e => {
@@ -104,11 +113,9 @@ export class Settings
      * @param synthui {SynthetizerUI}
      * @param sequi {SequencerUI}
      * @param renderer {Renderer}
-     * @param playerInfo {PlayerUI}
-     * @param keyboard {MidiKeyboard}
      * @private
      */
-    _createInterfaceSettingsHandler(button, playerButtom, synthui, sequi, renderer, playerInfo, keyboard)
+    _createInterfaceSettingsHandler(button, playerButtom, synthui, sequi, renderer)
     {
         button.onclick = () => {
             if(button.innerText === "Mode: Dark")
@@ -139,15 +146,6 @@ export class Settings
             document.styleSheets[0].cssRules[0].style.setProperty("--top-buttons-color",  this.mode === "dark" ? "#222" : "linear-gradient(270deg, #ddd, #fff)");
             document.body.style.background = this.mode === "dark" ? "black" : "white";
         }
-
-        playerButtom.onclick = () => {
-            playerInfo.togglevisibility();
-            renderer.canvas.classList.toggle("hidden");
-            keyboard.keyboard.classList.toggle("hidden");
-
-            // disable rendering when hidden
-            renderer.renderBool = !renderer.canvas.classList.contains("hidden");
-        }
     }
 
     /**

diff --git a/src/website/ui/settings_ui/settings_html.js b/src/website/ui/settings_ui/settings_html.js
@@ -58,7 +58,5 @@ export const settingsHtml = `
 <div class='settings_group'>
     <h2>Interface Settings</h2>
     <button class='seamless_button' id='toggle_mode_button' title='Toggle the interface theme'>Mode: Dark</button>
-    <br/>
-    <button class='seamless_button' id='toggle_player_mode_button' title='Toggle the simplified UI version'>Toggle music player mode</button>
 </div>
 `;