More changes

build/index.html

@@ -2,8 +2,16 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- start injection -->
-<script src="./jsmediatags.min.js"></script>
-<script src="./index.js"></script>
+<script type="importmap">
+{
+    "imports": {
+        "device": "./device/browser.js",
+        "store": "./lib/store.js"
+    }
+}
+</script>
+<script src="./node_modules/jsmediatags/dist/jsmediatags.min.js"></script>
+<script type="module" src="src/index.js"></script>
 <!-- end injection -->
 <script type="module" src="src/index.js"></script>
 <link rel="stylesheet" href="assets/main.css"></link>
@@ -48,16 +56,41 @@
 
 
 </section> -->
-<main id="main">
 
+<svg viewBox="0 0 100 2" xmlns="http://www.w3.org/2000/svg" id="tab-indicator">
+    <!-- No dashes nor gaps -->
+    <line x1="0" y1="0" x2="100" y2="0" stroke-width="3" id="tab-indicator-line" />
+</svg>
+<!-- <header id="tabs"></header> -->
+<!-- <header>
+<b>Browser</b>
+</header> -->
+<main id="main">
 <section class="player">
 
-<img>
-<header id="track-title">Bocce</header>
-<cite id="track-artist">Patricia Taxxon</cite>
+<img id="track-cover">
+<cite id="track-title">No Track Selected</cite>
+<cite id="track-artist">Unknown Artist</cite>
 
-<code id="timestamp">00:00</code>
-<code id="track-length">00:00</code>
+<code id="timestamp">--:--</code>
+<code id="track-length">--:--</code>
+
+</section>
+<section class="browser">
+
+<header>
+<h4>Browser</h4>
+</header>
+<menu id="browser"></menu>
+
+</section>
+<section class="queue">
+
+<header>
+<h4>Queue</h4>
+
+</header>
+<menu id="queue"></menu>
 
 </section>
 <section id="loading">
@@ -68,14 +101,11 @@
 </section>
 
 </main>
-<aside>
-
-<svg class="progress" viewBox="0 0 100 1" xmlns="http://www.w3.org/2000/svg">
-
-<path id="progress" d="M 0 1 L 100 1" stroke-width=1 stroke="currentColor"/>
-
+<svg viewBox="0 0 100 1" xmlns="http://www.w3.org/2000/svg" class="progress">
+    <!-- No dashes nor gaps -->
+    <line x1="0" y1="0" x2="100" y2="0" stroke="currentColor" stroke-width="3" id="playback-progress" />
 </svg>
-<footer>
+<nav>
 
 <button class="left player">Previous</button>
 <button class="center player playing">Paused</button>
@@ -90,8 +120,6 @@
 <button class="center browser">Queue</button>
 <button class="right browser">Play Track</button>
 
-</footer>
-
-</aside>
+</nav>
 
 </body>