From 136aff6efcf945946ebad97641d937a888046b15 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 10 Nov 2017 22:26:53 +0000
Subject: [PATCH] Add compact audio preview

---
 layouts/shortcodes/spotify.html | 12 ++++++------
 package.json                    |  1 +
 static/src/js/index.js          |  7 +++++++
 static/src/scss/style.scss      |  5 +++++
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/layouts/shortcodes/spotify.html b/layouts/shortcodes/spotify.html
index 5d3ae2b..da3a520 100644
--- a/layouts/shortcodes/spotify.html
+++ b/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>
diff --git a/package.json b/package.json
index 9558022..d2672ad 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/static/src/js/index.js b/static/src/js/index.js
index 0c429ef..2875638 100644
--- a/static/src/js/index.js
+++ b/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);
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index b327f14..8ee68a5 100644
--- a/static/src/scss/style.scss
+++ b/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;
+}