processing panel new looks

mediagoblin/templates/mediagoblin/user_pages/processing_panel.html

@@ -30,8 +30,47 @@
 </p>
     
 <h2>{% trans %}Media in-processing{% endtrans %}</h2>
+<style>
+    .thumb-overlay-status {
+        position: absolute;
+        margin: auto;
+        top: 0; bottom: 0; left: 0; right: 0;
+        width: 180px;
+        height: 20px;
+        display: inline;
+        text-align: center;
+    }
 
-{% if processing_entries.count() %}
+    .thumb-processing {
+        color: black;
+        font-weight: bold;
+        background-color: rgba(255, 255, 255, 0.8);
+    }
+
+    .thumb-failed {
+        color: red;
+        font-weight: bold;
+        background-color: rgba(127, 0, 0, 0.5);
+    }
+
+    .thumb-wrapper {
+        position: relative;
+        /* for proportional thumb resizing */
+        width: auto;
+        height: auto;
+        display: inline-block;
+    }
+
+    .thumb-wrapper img {
+        max-height: 180px;
+        max-width: 180px;
+    }
+    .media_panel td {
+        vertical-align: middle;
+    }
+</style>
+
+{% if entries.count() %}
   <table class="media_panel processing">
     <tr>
       <th>ID</th>
@@ -39,9 +78,31 @@
       <th>When submitted</th>
       <th>Transcoding progress</th>
     </tr>
-    {% for media_entry in processing_entries %}
+    {% for media_entry in entries %}
       <tr>
-        <td>{{ media_entry.id }}</td>
+      {% if media_entry.state == 'processed' %}
+        {% set entry_url = media_entry.url_for_self(request.urlgen) %}
+        <td>
+            <div class="thumb-wrapper">
+                <a href="{{ entry_url }}">
+                    <img src="{{ media_entry.thumb_url }}" alt="{{ media_entry.title }}" />
+                </a>
+            </div>
+        </td>
+        <td><a href="{{ entry_url }}">{{ media_entry.title }}</a></td>
+        <td>{{ media_entry.created.strftime("%F %R") }}</td>
+        <td>Ready</td>
+      {% else %}
+        <td>
+            <div class="thumb-wrapper">
+                <img src="{{ media_entry.thumb_url }}" alt="{{ media_entry.title }}" />
+                {% if media_entry.state == 'processing' %}
+                <div class="thumb-overlay-status thumb-processing">Processing...</div>
+                {% elif media_entry.state == 'failed' %}
+                <div class="thumb-overlay-status thumb-failed">Failed!</div>
+                {% endif %}
+            </div>
+        </td>
         <td>{{ media_entry.title }}</td>
         <td>{{ media_entry.created.strftime("%F %R") }}</td>
         {% if media_entry.transcoding_progress %}
@@ -49,61 +110,11 @@
         {% else %}
         <td>Unknown</td>
         {% endif %}
+      {% endif %}
       </tr>
     {% endfor %}
   </table>
 {% else %}
-  <p><em>{% trans %}No media in-processing{% endtrans %}</em></p>
+  <p><em>{% trans %}You have not uploaded anything yet!{% endtrans %}</em></p>
 {% endif %}  
-
-<h2>{% trans %}These uploads failed to process:{% endtrans %}</h2>
-{% if failed_entries.count() %}
-
-  <table class="media_panel failed">
-    <tr>
-      <th>ID</th>
-      <th>Title</th>
-      <th>When submitted</th>
-      <th>Reason for failure</th>
-      <th>Failure metadata</th>
-    </tr>
-    {% for media_entry in failed_entries %}
-      <tr>
-        <td>{{ media_entry.id }}</td>
-        <td>{{ media_entry.title }}</td>
-        <td>{{ media_entry.created.strftime("%F %R") }}</td>
-        {% if media_entry.get_fail_exception() %}
-        <td>{{ media_entry.get_fail_exception().general_message }}</td>
-        <td>{{ media_entry.fail_metadata }}</td>
-        {% else %}
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        {% endif %}
-      </tr>
-    {% endfor %}
-  </table>
-{% else %}
-  <p><em>{% trans %}No failed entries!{% endtrans %}</em></p>
-{% endif %}
-
-<h2>{% trans %}Your last 10 successful uploads{% endtrans %}</h2>
-{% if processed_entries.count() %}
-
-  <table class="media_panel processed">
-    <tr>
-        <th>ID</th>
-        <th>Title</th>
-        <th>Submitted</th>
-    </tr>
-    {% for entry in processed_entries %}
-      <tr>
-        <td>{{ entry.id }}</td>
-        <td><a href="{{ entry.url_for_self(request.urlgen) }}">{{ entry.title }}</a></td>
-        <td>{{ entry.created.strftime("%F %R") }}</td>
-      </tr>
-    {% endfor %}
-  </table>
-{% else %}
-  <p><em>{% trans %}No processed entries, yet!{% endtrans %}</em></p>
-{% endif %}
 {% endblock %}

mediagoblin/user_pages/views.py

@@ -671,6 +671,9 @@ def processing_panel(request):
                   state = u'processed').\
         order_by(MediaEntry.created.desc()).\
         limit(10)
+    
+    entries = (MediaEntry.query.filter_by(uploader=user.id)
+            .order_by(MediaEntry.created.desc()))
 
     # Render to response
     return render_to_response(
@@ -679,7 +682,8 @@ def processing_panel(request):
         {'user': user,
          'processing_entries': processing_entries,
          'failed_entries': failed_entries,
-         'processed_entries': processed_entries})
+         'processed_entries': processed_entries,
+         'entries': entries})
 
 @allow_reporting
 @get_user_media_entry