From 32c8cc54763ec620cb15e5f4399af11762a2b785 Mon Sep 17 00:00:00 2001
From: MatthiasSaihttam <MatthiasSaihttam1@gmail.com>
Date: Tue, 27 Apr 2021 22:47:33 -0400
Subject: [PATCH] Add basic displaying of extra media

---
 main/models.py                           |  7 ++++++
 main/static/main/main.css                |  5 ++--
 main/templates/whispermaphone/index.html | 32 +++++++++++++++++++++---
 main/views.py                            |  4 +--
 whispermaphone/urls.py                   |  5 +++-
 5 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/main/models.py b/main/models.py
index f8a9382..4e6e697 100644
--- a/main/models.py
+++ b/main/models.py
@@ -1,3 +1,4 @@
+import os
 import uuid
 
 from django.db import models
@@ -10,3 +11,9 @@ class Thought(models.Model):
     posted = models.DateTimeField(auto_now_add=True)
     timezone_offset = models.IntegerField()  # The number of minutes behind UTC we were when this was posted
     media = models.FileField(upload_to="", blank=True)  # A single image, video, or sound clip per post
+
+    def get_media_type(self):
+        if not self.media:
+            return ""
+        else:
+            return os.path.splitext(self.media.path)[1][1:]
diff --git a/main/static/main/main.css b/main/static/main/main.css
index 492723e..216afe0 100644
--- a/main/static/main/main.css
+++ b/main/static/main/main.css
@@ -125,9 +125,10 @@ a {
     padding: 3px;
 }
 
-.text img {
-    max-width: 100%;
+img.extended-media {
+    max-width: calc(100% - 40px);
     max-height: 500px;
+    margin: 20px;
 }
 
 .extended-text {
diff --git a/main/templates/whispermaphone/index.html b/main/templates/whispermaphone/index.html
index 68a98a9..5f584f5 100644
--- a/main/templates/whispermaphone/index.html
+++ b/main/templates/whispermaphone/index.html
@@ -15,7 +15,19 @@
             <div class="main">
                 <span class="main-text text">{{thought.text}}</span>
             </div>
-            <div class="extended-text text">{{thought.extended_text}}</div>
+            <div class="extended">
+                <span class="extended-text text">{{thought.extended_text}}</span>
+                {% with file_type=thought.get_media_type %}
+                    {% if file_type == "png" or file_type == "jpeg" %}
+                        <img src="{{ thought.media.url }}" class="extended-media">
+                    {% elif file_type == "m4a" or file_type == "mp3" %}
+                        <audio controls src="{{ thought.media.url }}" class="extended-media"></audio>
+                    {% elif file_type == "mov" or file_type == "mp4" %}
+                        <video src="{{ thought.media.url }}" class="extended-media"></video>
+                    {% endif %}
+
+                {% endwith %}
+            </div>
             <div class="thought-end">
                 <span class="timestamp">
                     {% timezone thought.timezone %}
@@ -35,11 +47,21 @@
     <script>
         const els = document.querySelectorAll(".thought");
 
+        function isEmptyNode(node) {
+            //It's an empty node if it's a comment or text that's just whitespace
+            return node instanceof Comment ||
+                ((node instanceof Text || node instanceof HTMLSpanElement) && !node.textContent.trim());
+        }
+
         for (let el of els) {
-            const extended = el.querySelector(".extended-text");
+            const extended = el.querySelector(".extended");
 
             //Hide extended text
             extended.classList.add("hidden");
+            //Remove empty nodes from extended text
+            for (const node of Array.from(extended.childNodes).filter(isEmptyNode)) {
+                extended.removeChild(node);
+            }
             //Add button to show extended text
             if (extended.childNodes.length) {
                 const main = el.querySelector(".main");
@@ -97,12 +119,14 @@
         md.inline.validateLink = (url) => originalLinkValidator(url) || url.match(dataLinkRegex);
 
         for (let el of els) {
-            const extended = el.querySelector(".extended-text");
+            const extendedText = el.querySelector(".extended-text");
             const mainText = el.querySelector(".main-text");
 
             //Markdown + highlight
-            extended.innerHTML = md.render(extended.textContent);
             mainText.innerHTML = md.render(mainText.textContent);
+            if (extendedText) {
+                extendedText.innerHTML = md.render(extendedText.textContent);
+            }
         }
     </script>
 {% endblock %}
diff --git a/main/views.py b/main/views.py
index 0a1e8c3..2e0e0b7 100644
--- a/main/views.py
+++ b/main/views.py
@@ -12,13 +12,13 @@ from .models import Thought
 ALLOWED_MEDIA_TYPES = {
     "image/png": "png",
     "image/jpeg": "jpeg",
-    "audio/x-m4a": "mp4",
-    "audio/mp4": "mp4",
+    "audio/x-m4a": "m4a",
     "audio/mp3": "mp3",
     "video/mp4": "mp4",
     "video/quicktime": "mov",
 }
 
+
 def index(request):
     authenticated = False
     try:
diff --git a/whispermaphone/urls.py b/whispermaphone/urls.py
index 47ef068..537940a 100644
--- a/whispermaphone/urls.py
+++ b/whispermaphone/urls.py
@@ -13,14 +13,17 @@ Including another URLconf
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+from django.conf.urls.static import static
 from django.urls import path
 
 from main import views
 from main.feed import MainFeed
+from whispermaphone import settings
 
 urlpatterns = [
     path("", views.index, name="index"),
     path("about", views.about, name="about"),
     path("post", views.post, name="post"),
     path("feed", MainFeed())
-]
+] + (static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) if settings.DEBUG else [])
+