6 files changed, 18 insertions, 5 deletions
diff --git a/public/assets/css/audioplayer.css b/public/assets/css/audioplayer.css
index 49a2809..2728c16 100644
--- a/public/assets/css/audioplayer.css
+++ b/public/assets/css/audioplayer.css
@@ -31,6 +31,9 @@
   transition: 0.2s cubic-bezier(0, 0, 1, 1);
   opacity: 0;
 }
+.player.unloaded {
+  pointer-events: none;
+}
 .player.active {
   opacity: 1;
 }
@@ -43,8 +46,8 @@
   display: flex;
   flex-direction: column;
   padding: 1rem;
+  border-radius: 0.25rem;
 }
-
 .player .controls {
   background: linear-gradient(-90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95));
 }
@@ -63,6 +66,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  transition: opacity 0.1s;
+  opacity: 0.9;
+}
+.player .icon:hover {
+  opacity: 1;
 }
 .player .pos {
   flex: 1;
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 1966da5..d0d10a2 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -57,6 +57,7 @@
 
 /** ImAgeS and other image lISTS!! */
 #hootevents .imageList {
+  padding-left: 7.5rem;
   margin-bottom: 1rem;
   display: flex;
   flex-direction: row;
@@ -520,6 +521,9 @@
     max-width: calc(100vmin - 2rem);
     max-height: calc(80vmin - 1rem);
   }
+  #hootevents .imageList {
+    padding-left: 0;
+  }
   #hootevents .imageList img {
     max-width: calc(100vmin - 2rem);
     max-height: calc(80vmin - 1rem);
diff --git a/public/assets/js/lib/views/details/audioPlayer.js b/public/assets/js/lib/views/details/audioPlayer.js
index 700daa5..a2e38e5 100644
--- a/public/assets/js/lib/views/details/audioPlayer.js
+++ b/public/assets/js/lib/views/details/audioPlayer.js
@@ -77,6 +77,7 @@ const AudioPlayer = View.extend({
    */
   onPlay: function (element) {
     if (!this.active) {
+      this.$el.removeClass("unloaded");
       this.active = true;
       this.$el.addClass("active");
     }
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 4d64cf6..50b2f46 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -262,8 +262,8 @@ var HootStream = View.extend({
       .map(([image]) => image);
 
     // console.log(filteredImages);
-
     // console.log(thread);
+
     return [
       "<div class='divider dark'></div>",
       this.renderHoot({
@@ -344,7 +344,7 @@ var HootStream = View.extend({
       return null;
     }
     const $table = $("<div class='fileList'>");
-    for (const file of files) {
+    for (const file of files.sort((file) => file.filename.toLowerCase())) {
       const $el = this.renderFile(this.fileTemplate, file);
       $table.append($el);
     }
diff --git a/views/partials/player.ejs b/views/partials/audio.ejs
index 8e58ff1..9b7c58b 100644
--- a/views/partials/player.ejs
+++ b/views/partials/audio.ejs
@@ -1,5 +1,5 @@
 <div id="audio"></div>
-<div id="audioPlayer" class="player">
+<div id="audioPlayer" class="player unloaded">
   <div class="controls">
     <div class="trackInfo row">
       <div class='title'>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 548b0bf..c12252c 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -1,5 +1,5 @@
 </content>
-<% include ../partials/player %>
+<% include ../partials/audio %>
 <% include ../partials/404 %>
 </body>
 <script type="text/json" id="preload" payload="<%= preload %>"></script>