use thumbnail resolutions preallocate img tag space before loading, fix directory header icons and text, delete prompt path linkback, resolution and size text, fix browse media borders/padding

viewer/helpers.py

@@ -37,4 +37,4 @@ def get_resolution(path: str) -> Tuple[int, int]:
     :return: A tuple containing two positive integers representing width and height
     """
     file = cv2.VideoCapture(path)
-    return file.get(cv2.CAP_PROP_FRAME_HEIGHT), file.get(cv2.CAP_PROP_FRAME_WIDTH)
+    return file.get(cv2.CAP_PROP_FRAME_WIDTH), file.get(cv2.CAP_PROP_FRAME_HEIGHT)

viewer/static/theme.css

@@ -2,7 +2,7 @@
 
 html, body {
     /*background-image: url(data:image/png;base64,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);*/
-    background-color: #0a3d4e;
+    background-color: #92e1ff;
     height: 100%
 }
 
@@ -32,7 +32,7 @@ html, body {
 }
 
 .icon a {
-    color: inherit;
+    /*color: inherit;*/
 }
 
 .navbar {
@@ -65,6 +65,7 @@ html, body {
 
 .card {
     background-color: #0a556d;
+    color: white;
 }
 
 .card-footer {
@@ -108,7 +109,7 @@ a.card-footer-item:hover {
 }
 
 .media + .media {
-    border-top-color: #a4e6ff;
+    border-top-color: rgba(164, 230, 255, 0.5);
 }
 
 #browse.card .card-content {
@@ -120,7 +121,8 @@ a.card-footer-item:hover {
 }
 
 .card .media:not(:last-child) {
-    margin: 1.5rem 0;
+    margin: 0;
+    padding: 1rem 0;
 }
 
 .icon {
@@ -141,3 +143,7 @@ code {
     background-color: #bcf6ff;
     color: #033343;
 }
+
+.image-placeholder img {
+    background-color: #17a0cd;
+}

viewer/templates/browse.html

@@ -6,31 +6,93 @@
             width: 100%;
         }
 
+        .media b, span, a, p {
+            padding: 0 3px;
+        }
+
         .media .media-filename {
             text-decoration: underline;
             text-decoration-color: #3273dc;
         }
+
+        .media .media-fileid {
+            color: #9ee8ff;
+        }
+
+        .flex-container {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: flex-end;
+            align-content: stretch;
+            align-items: flex-start;
+        }
+
+        .flex-container div:nth-child(1) {
+            order: 0;
+            flex: 1 1 auto;
+            align-self: auto;
+        }
+
+        .flex-container div:nth-child(2) {
+            order: 1;
+            flex: 0 1 auto;
+            align-self: auto;
+        }
+
+        .flex-container div:nth-child(3) {
+            order: 2;
+            flex: 0 1 auto;
+            align-self: auto;
+        }
+
+        .directory-info {
+            white-space: nowrap;
+        }
+
+        .file-count {
+            font-weight: 400; font-style: italic; font-size: 70%;
+        }
+
+        .action-set {
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-around;
+            align-content: stretch;
+            align-items: center;
+            padding: 0 0.5rem;
+        }
+
+        .card .icon a {
+            color: #c4edff;
+        }
+
+        .card .icon a:hover {
+            color: #ffffff;
+        }
     </style>
 {% endblock head %}
 {% block content %}
     <div id="browse" class="card">
         <div class="card-header">
-            <div class="is-flex is-align-content-end" style="width: 100%;">
-                <div>
+            <div class="flex-container" style="width: 100%;">
+                <div class="directory-info">
                     <p class="card-header-title">
                         {{ directory.path }}
+                        <span class="pl-1 file-count">
+                            {{ files|length }} files
+                        </span>
                     </p>
-                    <span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
-                        {{ files|length }} files
-                    </span>
                 </div>
-                <div style="vertical-align: middle;">
-                    <span class="icon">
+                <div class="action-set">
+                    <span class="action icon">
                         <a href="{% url 'index' %}">
                             <i class="fas fa-arrow-up" aria-hidden="true"></i>
                         </a>
                     </span>
-                    <span class="icon">
+                    <span class="action icon">
                         <a href="{% url 'refresh' directory.id %}">
                             <i class="fas fa-sync"></i>
                         </a>
@@ -52,14 +114,28 @@
 
                 {% endfor %}
                 {% for file in files %}
-                    <div class="media">
+                    <div id="file-{{ file.id }}" class="media">
                         {% load static %}
-                        <img class="px-2" loading="lazy" src="{% static file.thumbnail_static_path %}">
+                        <div class="image-placeholder mx-2"
+                             style="min-width: {{ file.thumbnailResolution.y }}px; min-height: {{ file.thumbnailResolution.y }}px;">
+                            <img loading="lazy" width="{{ file.thumbnailResolution.x }}" height="{{ file.thumbnailResolution.y }}" src="{% static file.thumbnail_static_path %}">
+                        </div>
+                        <a href="#file-{{ file.id }}">
+                            <b class="media-fileid">{{ file.id }}</b>
+                        </a>
                         <span class="media-filename">
                             <a href="{% url 'file' directory.id file.filename %}">
                                 {{ file.filename }}
                             </a>
                         </span>
+                        <span class="media-resolution">
+                            {{ file.resolution }}
+                        </span>
+                        <span class="media-size">
+                            <i>
+                                {{ file.human_size }}
+                            </i>
+                        </span>
                     </div>
                 {% endfor %}
             </div>

viewer/templates/delete.html

@@ -29,7 +29,7 @@
                     Are you sure you want to remove this directory from the file server?
                     <br>
                     {% load humanize %}
-                    <code>{{ directory.path }}</code> contains {{ num_files|intcomma }} files.
+                    <a href="{% url 'browse' directory.id %}"><code>{{ directory.path }}</code></a> contains {{ num_files|intcomma }} files.
                 </p>
             </div>
         </div>