Add basic displaying of extra media
This commit is contained in:
parent
09d6ddff46
commit
32c8cc5476
|
@ -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:]
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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 [])
|
||||
|
||||
|
|
Loading…
Reference in New Issue