Hook up new metadata discovery

3 files changed, 61 insertions, 22 deletions

diff --git a/css/screen.css b/css/screen.css
index e9dc775..95eb968 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -42,7 +42,7 @@ body {
   margin-top: 2.4rem;
 }
 
-#headline, #demosong, #controls, #choosefile {
+#headline, #demosong, #metadata, #controls, #choosefile {
   text-align: center;
 }
 
@@ -74,21 +74,31 @@ body {
 }
 
 #demosong {
-  margin-top: 3.6rem;
+  margin-top: 3rem;
 }
 #demosong a {
   color: #232323;
-  font-size: 0.8rem;
+  font-size: 0.7rem;
 }
 
-#controls, #choosefile {
-  margin-top: 1.7rem;
+#metadata {
+  display: block;
+}
+
+#choosefile input {
+  padding: 0.5rem;
+  background: #f7f7f7;
+  border-radius: 0.35rem;
+  border: 1px solid rgba(215, 99, 34, 0.78);
+}
+
+#choosefile, #controls {
+  margin-top: 1.9rem;
 }
 
 .control {
   width: 5rem;
   height: 5rem;
-  margin-top: 1.6rem;
   border-radius: 2.5rem;
   background-color: #505050;
   display: inline-block;
diff --git a/index.html b/index.html
index 524f410..4d53291 100644
--- a/index.html
+++ b/index.html
@@ -25,11 +25,28 @@
         }
       }
 
+      function setMetadata(filename) {
+        var metadata = player.metadata();
+        if (metadata['title'] != '') {
+          document.getElementById('title').innerHTML = metadata['title'];
+        }
+        else {
+          document.getElementById('title').innerHTML = filename;
+        }
+
+        if (metadata['artist'] != '') {
+          document.getElementById('artist').innerHTML = '<br />' + metadata['artist'];
+        }
+        else {
+          document.getElementById('artist').innerHTML = '';
+        }
+      }
+
       function loadURL(path) {
         init();
         player.load(path, function(buffer) {
-          document.querySelector(".loadedfile").innerHTML = path;
           player.play(buffer);
+          setMetadata(path);
           playPauseButton();
         });
       }
@@ -37,8 +54,8 @@
       function loadFile(file) {
         init();
         player.load(file, function(buffer) {
-          document.querySelector(".loadedfile").innerHTML = file.name;
           player.play(buffer);
+          setMetadata(file.name);
           playPauseButton();
         });
       }
@@ -77,15 +94,15 @@
         }
       }
 
-      var fileaccess = document.querySelector("*");
+      var fileaccess = document.querySelector('*');
       fileaccess.ondrop = function(e) {
         e.preventDefault();
         var file = e.dataTransfer.files[0];
         init();
 
         player.load(file, function(buffer) {
-          document.querySelector(".loadedfile").innerHTML = file.name;
           player.play(buffer);
+          setMetadata(file.name);
         });
       }
 
@@ -106,14 +123,15 @@
           (mysterysterium by maktone)
         </a>
       </div>
-      <div id="controls" class="banner">
-        <span class="loadedfile">nothing loaded</span><br>
-        <a onclick="pauseButton()" id="pause" class="control"></a>
+      <div id="metadata" class="banner">
+        <span id="title">nothing loaded</span>
+        <span id="artist"></span>
       </div>
       <div id="choosefile" class="banner">
-        <br/>
-        <br /><input type="file" id="files" name="files" onchange="loadFile(this.files[0])"/>
-        <br/>
+        <input type="file" id="files" name="files" onchange="loadFile(this.files[0])"/>
+      </div>
+      <div id="controls" class="banner">
+        <a onclick="pauseButton()" id="pause" class="control"></a>
       </div>
     </div>
   </body>
diff --git a/sass/screen.sass b/sass/screen.sass
index 2cd4c30..4a9bde8 100644
--- a/sass/screen.sass
+++ b/sass/screen.sass
@@ -48,7 +48,7 @@ body
     + .banner
         margin-top: 2.4rem
 
-#headline, #demosong, #controls, #choosefile
+#headline, #demosong, #metadata, #controls, #choosefile
     text-align: center
 
 #info
@@ -70,17 +70,28 @@ body
             font-size: 4.5rem
 
 #demosong
-    margin-top: 3.6rem
+    margin-top: 3rem
     a
         color: #232323
-        font-size: 0.8rem
-#controls, #choosefile
-    margin-top: 1.7rem
+        font-size: 0.7rem
+
+#metadata
+    display: block
+
+#choosefile
+    input
+        padding: 0.5rem
+        background: #f7f7f7
+        border-radius: 0.35rem
+        border: 1px solid rgba(215, 99, 34, 0.78)
+
+#choosefile, #controls
+    margin-top: 1.9rem
+    
 
 .control
     width: 5rem
     height: 5rem
-    margin-top: 1.6rem
     border-radius: 2.5rem
     background-color: rgb(80,80,80)
     display: inline-block