videos: show when it was filmed, not only when it was submitted

videos.html

@@ -12,7 +12,7 @@
 
   <header class="page">
     <h1>My videos</h1>
-    <p>Everything you have submitted, newest first.</p>
+    <p>Everything you have submitted. Most recently worked on first.</p>
   </header>
 
   <section>
@@ -89,8 +89,15 @@ function card(p) {
     + '<h3>' + esc(p.pet_name || "Your pet") + ' reacts</h3>'
     + '<p class="meta">' + (p.source_url ? '<a href="' + esc(p.source_url) + '" rel="noopener noreferrer nofollow" target="_blank">' + esc(p.source_url) + '</a>' : "") + '</p>'
     + '<p class="meta">' + esc(p.owner_notes || "") + '</p>'
+    // Submitted and filmed are different dates and a re-film only moves the
+    // second one. Showing creation alone made a video filmed today read as
+    // days old and left it sitting mid-list, which looked exactly like a film
+    // that never ran.
     + '<p class="meta">' + ((p.segments || 4) * 8) + ' seconds · '
-    + (p.price_usd != null ? "$" + Number(p.price_usd).toFixed(2) : "") + ' · ' + esc(when(p.created_at)) + '</p>'
+    + (p.price_usd != null ? "$" + Number(p.price_usd).toFixed(2) : "")
+    + ' · submitted ' + esc(when(p.created_at))
+    + (p.filmed_at ? ' · <b>filmed ' + esc(when(p.filmed_at)) + '</b>' : '')
+    + '</p>'
     + cta
     + '</div></div>';
 }