fixing audio player

1 files changed, 80 insertions, 55 deletions

diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 03f82fb..57009fd 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -22,6 +22,10 @@ var HootStream = View.extend({
     this.forms = {};
   },
 
+  /**
+   * Events
+   */
+
   onClickLink: function (event) {
     if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
       return;
@@ -114,6 +118,7 @@ var HootStream = View.extend({
         const $thread = this.renderThread(expandedThread);
         $(event.target).closest(".thread").replaceWith($thread);
         this.state.threadLookup[thread] = expandedThread;
+        this.state.expandedThreads[thread] = true;
       }.bind(this)
     );
   },
@@ -187,11 +192,16 @@ var HootStream = View.extend({
     this.build(this.state.filters);
   },
 
+  /**
+   * Loader
+   */
+
   load: function (data, filters) {
     this.state = {
       ...this.agglutinate(data),
       data,
       filters,
+      expandedThreads: {},
     };
     this.build(filters);
   },
@@ -312,7 +322,9 @@ var HootStream = View.extend({
     audio.init();
   },
 
-  /** Render Methods */
+  /**
+   * Render Methods
+   */
 
   render: (template, object) => {
     if (!template) {
@@ -388,6 +400,7 @@ var HootStream = View.extend({
     thread = thread[0];
     const isViewingKeyword = query.keyword === thread.keyword;
     const isViewingThread = query.thread === thread.id;
+    const isExpanded = this.state.expandedThreads[thread.id] === true;
     const isCompleteThread = !!(
       thread.file_count === files.length + images.length &&
       thread.comment_count === comments.length
@@ -432,67 +445,79 @@ var HootStream = View.extend({
       )
       .join("");
 
-    return [
-      "<div class='divider dark'></div>",
-      this.renderHoot({
-        template: this.threadTemplate,
-        thread: thread.id,
-        hoot: `<a class="threadLink" href="/stream/thread/${thread.id}">${thread.title}</a>`,
-        thread_opacity,
-        actions,
-        keyword_link: thread.keyword
-          ? `<a class="keywordLink" href="/stream/keyword/${thread.keyword}">${thread.keyword}</a>`
-          : "",
-        username: thread.username,
-        className: postedToday ? "isRecent" : "",
-        date: thread.lastmodified,
-        file_count: `${thread.file_count || 0} f.`,
-        file_opacity: age_opacity * get_size_opacity(thread.file_count),
-        comment_count: `${thread.comment_count || 0} c.`,
-        comment_opacity: age_opacity * get_size_opacity(thread.comment_count),
-      }),
-      this.renderImages(
-        isViewingThread || postedToday
-          ? filteredImages
-          : filteredImages.slice(0, 6)
-      ),
-      this.renderFiles(
-        isViewingThread || postedToday ? sortedFiles : sortedFiles.slice(0, 10)
+    /**
+     * Assemble the components that we're going to render
+     */
+
+    const threadTitle = {
+      template: this.threadTemplate,
+      thread: thread.id,
+      hoot: `<a class="threadLink" href="/stream/thread/${thread.id}">${thread.title}</a>`,
+      thread_opacity,
+      actions,
+      keyword_link: thread.keyword
+        ? `<a class="keywordLink" href="/stream/keyword/${thread.keyword}">${thread.keyword}</a>`
+        : "",
+      username: thread.username,
+      className: postedToday ? "isRecent" : "",
+      date: thread.lastmodified,
+      file_count: `${thread.file_count || 0} f.`,
+      file_opacity: age_opacity * get_size_opacity(thread.file_count),
+      comment_count: `${thread.comment_count || 0} c.`,
+      comment_opacity: age_opacity * get_size_opacity(thread.comment_count),
+    };
+
+    const topImages =
+      isViewingThread || postedToday
+        ? filteredImages
+        : filteredImages.slice(0, 6);
+
+    const fileList =
+      isViewingThread || postedToday ? sortedFiles : sortedFiles.slice(0, 10);
+
+    const firstPost = {
+      hoots: comments.slice(0, 1).map(
+        trimComment({
+          isViewingThread,
+          lines: 5,
+          snippetSize: 512,
+          cropSize: 256,
+        })
       ),
-      ...this.renderHoots({
-        hoots: comments.slice(0, 1).map(
-          trimComment({
-            isViewingThread,
-            lines: 5,
-            snippetSize: 512,
-            cropSize: 256,
-          })
-        ),
-        className: "first_post",
-      }),
-      ...this.renderHoots({
-        hoots:
-          isViewingThread || postedToday
-            ? comments.slice(1).map(
+      className: "first_post",
+    };
+
+    const restOfComments = {
+      hoots:
+        isViewingThread || postedToday
+          ? comments.slice(1).map(
+              trimComment({
+                isViewingThread,
+                lines: 1,
+                snippetSize: 256,
+                cropSize: 128,
+              })
+            )
+          : comments
+              .slice(1)
+              .slice(-5)
+              .map(
                 trimComment({
                   isViewingThread,
                   lines: 1,
                   snippetSize: 256,
                   cropSize: 128,
                 })
-              )
-            : comments
-                .slice(1)
-                .slice(-5)
-                .map(
-                  trimComment({
-                    isViewingThread,
-                    lines: 1,
-                    snippetSize: 256,
-                    cropSize: 128,
-                  })
-                ),
-      }),
+              ),
+    };
+
+    return [
+      "<div class='divider dark'></div>",
+      this.renderHoot(threadTitle),
+      this.renderImages(topImages),
+      this.renderFiles(fileList),
+      ...this.renderHoots(firstPost),
+      ...this.renderHoots(restOfComments),
       "<div class='divider'></div>",
     ];
   },