media indexing and management

app/sync/templates/sync/media-item.html

@@ -0,0 +1,39 @@
+{% extends 'base.html' %}
+
+{% block headtitle %}Media - {{ media.key }}{% endblock %}
+
+{% block content %}
+<div class="row">
+  <div class="col s12">
+    <h1 class="truncate">Media <strong>{{ media.key }}</strong></h1>
+    <p class="truncate"><strong><a href="{{ media.url }}" target="_blank"><i class="fas fa-link"></i> {{ media.url }}</a></strong></p>
+    <p class="truncate">Saving to: <strong>{{ media.source.directory_path }}</strong></p>
+  </div>
+</div>
+<div class="row">
+  <div class="col s12">
+    <table class="striped">
+      <tr title="The media source">
+        <td class="hide-on-small-only">Source</td>
+        <td><span class="hide-on-med-and-up">Source<br></span><strong><a href="{% url 'sync:source' pk=media.source.pk %}">{{ media.source }}</a></strong></td>
+      </tr>
+      <tr title="The media title">
+        <td class="hide-on-small-only">Title</td>
+        <td><span class="hide-on-med-and-up">Title<br></span><strong>{{ media.title }}</strong></td>
+      </tr>
+      <tr title="The filename the media will be downloaded as">
+        <td class="hide-on-small-only">Filename</td>
+        <td><span class="hide-on-med-and-up">Filename<br></span><strong>{{ media.filename }}</strong></td>
+      </tr>
+      <tr title="The desired format">
+        <td class="hide-on-small-only">Desired format</td>
+        <td><span class="hide-on-med-and-up">Desired format<br></span><strong>{{ media.source.format_summary }}</strong></td>
+      </tr>
+      <tr title="Has the media been downloaded">
+        <td class="hide-on-small-only">Downloaded</td>
+        <td><span class="hide-on-med-and-up">Downloaded<br></span><strong>{% if media.downloaded %}<i class="fas fa-check"></i>{% else %}<i class="fas fa-times"></i>{% endif %}</strong></td>
+      </tr>
+    </table>
+  </div>
+</div>
+{% endblock %}

app/sync/templates/sync/media.html

@@ -1,11 +1,30 @@
-{% extends 'base.html' %}
+{% extends 'base.html' %}{% load static %}
 
-{% block headtitle %}Media{% endblock %}
+{% block headtitle %}Media{% if source %} - {{ source }}{% endif %}{% endblock %}
 
 {% block content %}
-<div class="row">
-  <div class="col s12">
-    media    
+{% include 'infobox.html' with message=message %}
+<div class="row no-margin-bottom">
+  {% for m in media %}
+  <div class="col s12 m6 l4 xl3">
+    <a href="{% url 'sync:media-item' pk=m.pk %}" class="collection-item">
+      <div class="card mediacard">
+        <div class="card-image">
+          <img src="{% if m.thumb %}{% url 'sync:media-thumb' pk=m.pk %}{% else %}{% static 'images/nothumb.jpg' %} {% endif %}">
+          <span class="card-title truncate">{{ m.source }}<br>
+            <span>{{ m }}</span>
+          </span>
+        </div>
+      </div>
+    </a>
   </div>
+  {% empty %}
+  <div class="col s12">
+    <div class="collection">
+      <span class="collection-item no-items"><i class="fas fa-info-circle"></i> No media has been indexed.</span>
+    </div>
+  </div>
+  {% endfor %}
 </div>
+{% include 'pagination.html' with pagination=sources.paginator %}
 {% endblock %}