Test new GIF mode for videos without sound

app/config.py

@@ -44,11 +44,14 @@ except FileNotFoundError:
 JS_HASH = "none"
 try:
     # To keep things simple, we keep a single hash for the 2 files
-    js_data_common = (ROOT_DIR / "app" / "static" / "common-admin.js").read_bytes()
-    js_data_new = (ROOT_DIR / "app" / "static" / "new.js").read_bytes()
-    JS_HASH = hashlib.md5(
-        js_data_common + js_data_new, usedforsecurity=False
-    ).hexdigest()
+    dat = b""
+    for j in [
+        ROOT_DIR / "app" / "static" / "common.js",
+        ROOT_DIR / "app" / "static" / "common-admin.js",
+        ROOT_DIR / "app" / "static" / "new.js",
+    ]:
+        dat += j.read_bytes()
+    JS_HASH = hashlib.md5(dat, usedforsecurity=False).hexdigest()
 except FileNotFoundError:
     pass
 

app/scss/main.scss

@@ -551,3 +551,22 @@ a.label-btn {
 .margin-top-20 {
   margin-top: 20px;
 }
+
+.video-wrapper {
+    position: relative;
+}
+
+.video-gif-overlay {
+    display: none;
+}
+
+.video-gif-mode + .video-gif-overlay {
+    display: block;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    padding: 0 3px;
+    font-size: 0.8em;
+    background: rgba(0,0,0,.5);
+    color: #fff;
+}

app/static/common.js

@@ -0,0 +1,32 @@
+function hasAudio (video) {
+    return video.mozHasAudio ||
+    Boolean(video.webkitAudioDecodedByteCount) ||
+    Boolean(video.audioTracks && video.audioTracks.length);
+}
+
+function setVideoInGIFMode(video) {
+    if (!hasAudio(video)) {
+        if (typeof video.loop == 'boolean' && video.duration < 3.0) {
+            video.classList.add("video-gif-mode");
+            video.loop = true;
+            video.controls = false;
+            video.addEventListener("mouseover", () => {
+                video.play();
+            })
+            video.addEventListener("mouseleave", () => {
+                video.pause();
+            })
+        }
+    };
+}
+
+var items = document.getElementsByTagName("video")
+for (var i = 0; i < items.length; i++) {
+    if (items[i].duration) {
+        setVideoInGIFMode(items[i]);
+    } else {
+        items[i].addEventListener("loadeddata", function() {
+            setVideoInGIFMode(this);
+        });
+    }
+}

app/templates/layout.html

@@ -55,5 +55,6 @@
 {% if is_admin %}
 <script src="{{ BASE_URL }}/static/common-admin.js?v={{ JS_HASH }}"></script>
 {% endif %}
+<script src="{{ BASE_URL }}/static/common.js?v={{ JS_HASH }}"></script>
 </body>
 </html>

app/templates/utils.html

@@ -429,7 +429,10 @@
         </a>
         {% endif %}
     {% elif attachment.type == "Video" or (attachment | has_media_type("video")) %}
+    <div class="video-wrapper">
     <video controls preload="metadata" src="{{ attachment.url | media_proxy_url }}"{% if attachment.name %} title="{{ attachment.name }}"{% endif %} class="u-video"></video>
+    <div class="video-gif-overlay">GIF</div>
+    </div>
     {% elif attachment.type == "Audio" or (attachment | has_media_type("audio")) %}
     <audio controls preload="metadata"  src="{{ attachment.url | media_proxy_url }}"{% if attachment.name%} title="{{ attachment.name }}"{% endif %} class="attachment u-audio"></audio>
     {% elif attachment.type == "Link" %}