From adb9b1d5d87fbb1a1fea347b4d1aae7e67a3955d Mon Sep 17 00:00:00 2001
From: julian laplace <julescarbon@gmail.com>
Date: Thu, 27 Oct 2022 17:19:25 +0200
Subject: file sorting

---
 public/assets/css/audioplayer.css                 | 10 +++++++++-
 public/assets/css/hootstream.css                  |  4 ++++
 public/assets/js/lib/views/details/audioPlayer.js |  1 +
 public/assets/js/lib/views/stream/hootstream.js   |  4 ++--
 views/partials/audio.ejs                          | 23 +++++++++++++++++++++++
 views/partials/footer.ejs                         |  2 +-
 views/partials/player.ejs                         | 23 -----------------------
 7 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 views/partials/audio.ejs
 delete mode 100644 views/partials/player.ejs

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/audio.ejs b/views/partials/audio.ejs
new file mode 100644
index 0000000..9b7c58b
--- /dev/null
+++ b/views/partials/audio.ejs
@@ -0,0 +1,23 @@
+<div id="audio"></div>
+<div id="audioPlayer" class="player unloaded">
+  <div class="controls">
+    <div class="trackInfo row">
+      <div class='title'>
+      <i>The player is unloaded</i>
+      </div>
+      <div class='time'>
+      </div>
+    </div>
+    <div class="row">
+      <div class='icon'>
+        <img src="/assets/img/play-white.svg" class='play_icon'>
+        <img src="/assets/img/pause-white.svg" class='pause_icon'>
+      </div>
+      <div class='pos'>
+        <div class='track'>
+        </div>
+        <div class='dot'></div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
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>
diff --git a/views/partials/player.ejs b/views/partials/player.ejs
deleted file mode 100644
index 8e58ff1..0000000
--- a/views/partials/player.ejs
+++ /dev/null
@@ -1,23 +0,0 @@
-<div id="audio"></div>
-<div id="audioPlayer" class="player">
-  <div class="controls">
-    <div class="trackInfo row">
-      <div class='title'>
-      <i>The player is unloaded</i>
-      </div>
-      <div class='time'>
-      </div>
-    </div>
-    <div class="row">
-      <div class='icon'>
-        <img src="/assets/img/play-white.svg" class='play_icon'>
-        <img src="/assets/img/pause-white.svg" class='pause_icon'>
-      </div>
-      <div class='pos'>
-        <div class='track'>
-        </div>
-        <div class='dot'></div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2