WIP

out/gui/wave.json

@@ -1 +1 @@
-[{"group":"","name":"fftSize","showName":"FFT-Size","options":[2048,4096,8192,16384],"value":4096,"type":"select","tooltip":"How Many Items should the FFT Capture and Render","dataType":"int"},{"group":"rotation","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":360,"min":-360,"value":0,"dataType":"int"},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":["x-inc","y-inc","z-inc"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"","name":"baseColor","showName":"Base Color","type":"color","value":"#0089ff","dataType":"rgb","tooltip":"Base Color!"},{"group":"","name":"gradientToColor","showName":"Second Color","type":"color","value":"#ff0000","dataType":"rgb","tooltip":"Second Color!"}]
+[{"group":"","name":"fftSize","showName":"FFT-Size","options":[2048,4096,8192,16384],"value":4096,"type":"select","tooltip":"How Many Items should the FFT Capture and Render","dataType":"int"},{"group":"rotation","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":360,"min":-360,"value":0,"dataType":"int"},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":["x-inc","y-inc","z-inc"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"light","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":100,"min":-100,"value":0,"dataType":"int"},{"group":"light","name":"light-strength","showName":"Light Brightness","type":"slider","value":0.3,"max":1,"min":0,"stepSize":0.05,"tooltip":"brightness of light-point","dataType":"float"},{"group":"","name":"baseColor","showName":"Base Color","type":"color","value":"#0089ff","dataType":"rgb","tooltip":"Base Color!"},{"group":"","name":"gradientToColor","showName":"Second Color","type":"color","value":"#ff0000","dataType":"rgb","tooltip":"Second Color!"}]

out/js/scripts.js

@@ -224,6 +224,10 @@ Node.prototype.toggleCheck = function (className, force) {
     }
 }
 
+String.prototype.firstUpper = function () {
+    return this.charAt(0).toUpperCase() + this.slice(1);
+}
+
 File.prototype.toBase64 = function (cb) {
     const reader = new FileReader();
     reader.onloadend = cb;
@@ -1031,7 +1035,7 @@ class Playlist {
         this.shuffled = [];
         this.index = 0;
         this.page = 0;
-        this.isShuffle = false;
+        this.isShuffle = pConf.get("shuffle", false);
         $('body').addDelegatedEventListener('change', 'input[type="file"]', this.changeFiles.bind(this));
         $('body').addDelegatedEventListener('click', '.pagination .item', this.handlePagination.bind(this));
         eventHandler.addEvent('id3-request', this.handle.bind(this));
@@ -1228,11 +1232,17 @@ class GUI {
             'inputs/slider',
             'inputs/switch',
             'inputs/select',
-            'inputs/option'
+            'inputs/option',
+            'help',
         ]);
         this.initDropZone();
     }
 
+    openHelp() {
+        gui.modal.renderModal("Help", template.parseTemplate('help', {}));
+        gui.modal.showModal();
+    }
+
     initDropZone() {
         let items = 'drag dragstart dragend dragover dragenter dragleave drop'.split(' ');
         items.forEach(el => {
@@ -1253,6 +1263,7 @@ class GUI {
 }
 
 // create config Inputs from JSON
+//@todo add support for gui grouping!
 class GUIHelper {
     static fromJSON(json, conf) {
         let data = [];
@@ -1289,7 +1300,7 @@ class GUIHelper {
             for (let i = 0; i < data.name.length; i++) {
                 let newData = {};
                 Object.assign(newData, data);
-                newData.showName = data.name[i];
+                newData.showName = GUIHelper.richShowName(data, data.name[i].firstUpper());
                 newData.name = GUIHelper.richName(data, data.props[i]);
                 content += GUIHelper.createSlider(newData, conf);
             }
@@ -1350,6 +1361,13 @@ class GUIHelper {
         return name;
     }
 
+    static richShowName(data, name) {
+        if (data.group !== "") {
+            return data.group.firstUpper() + ' ' + name
+        }
+        return name;
+    }
+
     static createButton(item, conf) {
         return `<div class='button spaced' data-action="${item.action}">${item.name}</div>`
     }
@@ -1632,7 +1650,7 @@ class Notification {
             self.type += ' endless';
         }
         self.updateContent(self.message);
-        this.outer.appendChild(self.item);
+        this.outer.prepend(self.item);
         if (!endless) {
             setTimeout(this.remove.bind(this), self.time)
         }
@@ -1800,8 +1818,14 @@ class Wave extends Visual {
     prepare(program) {
         this.position = gl.getAttribLocation(program, "a_position");
         this.color = gl.getUniformLocation(program, "u_color");
-        let lightPos = gl.getUniformLocation(program, "u_lightPos");
-        gl.uniform3fv(lightPos, vConf.get("light", [0, 5, -56]));
+        let lightPos = gl.getUniformLocation(program, "u_lightPos"),
+            light = gl.getUniformLocation(program, "u_light");
+        gl.uniform3fv(lightPos, [
+            vConf.get("light-x", 0),
+            vConf.get("light-y", 5),
+            vConf.get("light-z", -56)
+        ]);
+        gl.uniform1f(light, parseFloat(vConf.get("light-strength", 0.3)));
     }
 
     afterDraw() {
@@ -1904,8 +1928,11 @@ class EventHandler {
         this.events = {};
     }
 
-    addEvent(name, cb) {
-        this.events[name] = cb;
+    addEvent(events, cb) {
+        let names = events.split(",");
+        for (let name of names) {
+            this.events[name.trim()] = cb;
+        }
     }
 
     sendData(name, data) {
@@ -1918,12 +1945,18 @@ class EventHandler {
     handleEvent(event) {
         let data = event.data;
         if (!data.cmd) {
-            return;
+            return false;
         }
 
         if (this.events[data.cmd]) {
-            this.events[data.cmd](data.data);
+            try {
+                this.events[data.cmd](data.data);
+            } catch (e) {
+                console.error('[EventHandler] > ' + e.message);
+            }
+            return true;
         }
+        return false;
     }
 }
 
@@ -1952,20 +1985,16 @@ async function initHandler() {
                 player.playStop();
                 break;
             case 'shuffle':
-                player.playlist.isShuffle = !player.playlist.isShuffle;
                 toggleShuffle();
                 break;
         }
-        togglePlayButton(audioHandler.audioFile.paused ? 'play' : 'pause');
     });
     window.addEventListener('playSong', setActiveOnPlaylist);
+    window.addEventListener('playSong', e => {
+        togglePlayButton(audioHandler.audioFile.paused ? 'play' : 'pause');
+    });
     $('.upload-image').addEventListener('click', imageUploader.renderModal.bind(imageUploader));
-    body.addDelegatedEventListener('click', '.readAll', e => {
-        let playlist = player.playlist.list;
-        for (let i = 0; i < playlist.length; i++) {
-            playlist[i].getID3Tag(true);
-        }
-    })
+    body.addDelegatedEventListener('click', '.readAll', forceAllRead);
 
     body.addDelegatedEventListener('input', '.input-range input[type="range"]', (e, el) => {
         let current = $('.current', el.parentNode);
@@ -2013,6 +2042,23 @@ async function initHandler() {
                 break;
         }
     })
+
+    $('.help.menu-icon').addEventListener('click', gui.openHelp);
+
+    document.onfullscreenchange = e => {
+        if (body.hasClass('fullscreen')) {
+            body.removeClass('fullscreen')
+        } else {
+            body.addClass('fullscreen')
+        }
+    }
+}
+
+function forceAllRead() {
+    let playlist = player.playlist.list;
+    for (let i = 0; i < playlist.length; i++) {
+        playlist[i].getID3Tag(true);
+    }
 }
 
 
@@ -2039,11 +2085,17 @@ function setActiveOnPlaylist(e) {
     }
 }
 
-function toggleShuffle() {
+function toggleShuffle(updateGUI) {
     let active = player.playlist.isShuffle;
+    if (updateGUI !== false) {
+        active = !active;
+        let status = active ? 'enabled' : 'disabled';
+        NotificationHandler.createNotification("Shuffle: " + status, "info", 500);
+        pConf.set("shuffle", active);
+        pConf.save();
+        player.playlist.isShuffle = active;
+    }
     $('#shuffle').toggleCheck('active', active);
-    let status = active ? 'enabled' : 'disabled';
-    NotificationHandler.createNotification("Shuffle: " + status, "info", 500);
 }
 
 function togglePlayButton(status) {
@@ -2121,6 +2173,65 @@ function togglePlayButton(status) {
     }
 })()
 
+class KeyHandler {
+    async init() {
+        await this.mediaKeys();
+        await this.addKeyHandler();
+        window.addEventListener('keydown', this.keyHandler.bind(this));
+    }
+
+    async mediaKeys() {
+        if ('mediaSession' in navigator) {
+            let media = navigator.mediaSession;
+            media.setActionHandler('play', player.playStop.bind(player));
+            media.setActionHandler('pause', player.playStop.bind(player));
+            media.setActionHandler('previoustrack', player.prevSong.bind(player));
+            media.setActionHandler('nexttrack', player.prevSong.bind(player));
+        }
+    }
+
+    async addKeyHandler() {
+        eventHandler.addEvent('keys-Space', player.playStop.bind(player));
+        eventHandler.addEvent('keys-KeyN', player.nextSong.bind(player));
+        eventHandler.addEvent('keys-KeyV', player.prevSong.bind(player));
+        eventHandler.addEvent('keys-KeyS', playerConf.open.bind(playerConf));
+        eventHandler.addEvent('keys-KeyS-shift', toggleShuffle);
+        eventHandler.addEvent('keys-KeyB', imageUploader.renderModal.bind(imageUploader));
+        eventHandler.addEvent('keys-KeyF-shift', forceAllRead);
+        eventHandler.addEvent('keys-KeyH', gui.openHelp);
+        eventHandler.addEvent('keys-KeyP', e => {
+            player.playlist.renderPagination(player.playlist.page);
+            gui.modal.showModal();
+        });
+        eventHandler.addEvent('keys-Escape, keys-KeyC-shift', e => {
+            gui.modal.resetModal();
+            gui.modal.closeModal();
+        })
+        eventHandler.addEvent('keys-F11', e => {
+            if (document.fullscreenElement) {
+                document.exitFullscreen().catch(console.error);
+            } else {
+                document.body.requestFullscreen().catch(console.error);
+            }
+        });
+    }
+
+    async keyHandler(event) {
+        let key = event.code,
+            shift = event.shiftKey ? '-shift' : '',
+            ctrl = event.ctrlKey ? '-ctrl' : '',
+            name = 'keys-' + key + shift + ctrl;
+
+        if (eventHandler.handleEvent({
+            data: {
+                cmd: name
+            }
+        })) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+}
 class Startup {
     constructor() {
         this.modules = {
@@ -2155,7 +2266,8 @@ const shaderHandler = new ShaderHandler(null),
     worker = new Worker('/out/js/worker.min.js'),
     startup = new Startup(),
     eventHandler = new EventHandler(),
-    playerConf = new PlayerConfigHandler();
+    playerConf = new PlayerConfigHandler(),
+    keyHandler = new KeyHandler();
 
 let c, gl, cInfo, ctx;
 
@@ -2192,7 +2304,9 @@ async function startUP() {
     await gui.init();
     await imageUploader.init();
     await playerConf.init();
+    await keyHandler.init();
     await initHandler();
+    toggleShuffle(false);
 }
 
 startUP().then(r => {

out/tpl/help.tpl

@@ -0,0 +1,69 @@
+<!-- help for every key! -->
+<div class="help-list">
+    <div class="item">
+        <span class="h2">h</span>
+        <p>
+            Open Help Modal
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">Space</span>
+        <p>
+            Switch between pause and play
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">n</span>
+        <p>
+            Play next song
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">v</span>
+        <p>
+            Play previous song
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">s</span>
+        <p>
+            Open Settings Modal
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">Shift + s</span>
+        <p>
+            Toggle Shuffle
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">b</span>
+        <p>
+            Open background settings Modal
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">Shift + f</span>
+        <p>
+            Force Song Tagger!
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">p</span>
+        <p>
+            Show Playlist Modal
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">ESC or Shift + C</span>
+        <p>
+            Close current open Modal
+        </p>
+    </div>
+    <div class="item">
+        <span class="h2">F11</span>
+        <p>
+            Toggle Fullscreen and hide GUI
+        </p>
+    </div>
+</div>

out/tpl/image.tpl

@@ -19,10 +19,11 @@
             <span class="focus"></span>
         </label>
 
-        <label class="input floating-label">
+        <label class="input floating-label input-range">
             <input class="range" type="range" id="alphaValue" min="0" max="1" value="$alphaValue$" step="0.1">
             <span class="input-label">Alpha</span>
             <span class="min">0</span>
+            <span class="current">$alphaValue$</span>
             <span class="max">1</span>
         </label>
     </form>