WIP

raw/gui/wave.json

@@ -51,6 +51,36 @@
     "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",

raw/javascript/app.js

@@ -9,7 +9,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;
 
@@ -46,7 +47,9 @@ async function startUP() {
     await gui.init();
     await imageUploader.init();
     await playerConf.init();
+    await keyHandler.init();
     await initHandler();
+    toggleShuffle(false);
 }
 
 startUP().then(r => {

raw/javascript/eventHandler.js

@@ -3,8 +3,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) {
@@ -17,12 +20,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;
     }
 }
 
@@ -51,20 +60,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);
@@ -112,6 +117,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);
+    }
 }
 
 
@@ -138,11 +160,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) {

raw/javascript/gui.js

@@ -13,11 +13,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 => {
@@ -38,6 +44,7 @@ class GUI {
 }
 
 // create config Inputs from JSON
+//@todo add support for gui grouping!
 class GUIHelper {
     static fromJSON(json, conf) {
         let data = [];
@@ -74,7 +81,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);
             }
@@ -135,6 +142,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>`
     }

raw/javascript/keys.js

@@ -0,0 +1,59 @@
+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();
+        }
+    }
+}

raw/javascript/notification.js

@@ -39,7 +39,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)
         }

raw/javascript/player.js

@@ -43,7 +43,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));

raw/javascript/utils.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;

raw/javascript/visuals/wave.js

@@ -70,8 +70,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() {

raw/scss/_gui.scss

@@ -163,4 +163,34 @@ modal-footer playlist {
 
 .menus {
   z-index: 10;
+}
+
+body.fullscreen {
+  .menus {
+    display: none;
+  }
+}
+
+.help-list {
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    padding: 0 1em;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #232323;
+    }
+
+    .h2 {
+      font-size: 1.2em;
+      margin: 10px 0 5px;
+      display: block;
+    }
+
+    p {
+      font-size: .8em;
+      color: #aaa;
+    }
+  }
 }

raw/scss/_playlist.scss

@@ -7,6 +7,12 @@ playlist {
     position: unset;
   }
 
+  .playlist-content {
+    h1 {
+      padding: 0 1em;
+    }
+  }
+
   .pagination {
     display: flex;
     justify-content: flex-end;