Add compact audio preview

layouts/shortcodes/spotify.html

@@ -13,25 +13,25 @@
     <caption><a href="{{ $playlist.url }}">View playlist on Spotify</a></caption>
     <thead>
     <tr>
-      <th scope="row"></th>
       <th scope="row">Track</th>
       <th scope="row">Artist</th>
       <th scope="row">Album</th>
+      <th scope="row"></th>
     </tr>
     </thead>
     <tbody>
       {{ range sort $playlist.tracks "name" }}
         <tr>
-          <td>
-            <span>
-              <a class="icon" href="{{ .preview_url }}"><i class="fa fa-play"></i></a>
-            </span>
-          </td>
           <td><a href="{{ .url }}">{{ .name }}</a></td>
           <td>
             {{ range $i, $e := .artists }}{{ if $i }}, {{ end }}{{ .name }}{{ end }}
           </td>
           <td>{{ .album.name }}</td>
+          <td>
+            <audio controls class="mejs__player">
+              <source src="{{ .preview_url }}" type="audio/mpeg">
+            </audio>
+          </td>
         </tr>
       {{ end }}
     </tbody>

package.json

@@ -23,6 +23,7 @@
     "jquery": "3.2.1",
     "lg-thumbnail": "1.0.3",
     "lightgallery": "1.4.0",
+    "plyr": "2.0.17",
     "tstatic": "1.1.0"
   }
 }

static/src/js/index.js

@@ -6,6 +6,13 @@ require('bootstrap');
 require('lightgallery/dist/js/lightgallery');
 require('lg-thumbnail/dist/lg-thumbnail');
 
+require('plyr').setup({
+  controls: [
+    'play',
+    'progress'
+  ]
+});
+
 
 $('.image').each(function () {  // setup div-image hybrids
   var ele = $(this);

static/src/scss/style.scss

@@ -5,6 +5,7 @@ $fa-font-path: "../fonts";
 
 @import "node_modules/lightgallery/src/sass/lightgallery";
 @import "node_modules/bootstrap/scss/bootstrap";
+@import "node_modules/plyr/src/scss/plyr";
 
 $primary: #E89980;
 $orange: #FF7F00;
@@ -168,3 +169,7 @@ pre.chroma {
     margin-top: $spacer;
   }
 }
+
+.plyr {
+  min-width: initial;
+}