From 7525744f827a0ed2aa55fb4a9d0e82a53ede427e Mon Sep 17 00:00:00 2001
From: Thomas Sileo <t@a4.io>
Date: Sat, 3 Dec 2022 19:47:11 +0100
Subject: [PATCH] Test new GIF mode for videos without sound

---
 app/config.py             | 13 ++++++++-----
 app/scss/main.scss        | 19 +++++++++++++++++++
 app/static/common.js      | 32 ++++++++++++++++++++++++++++++++
 app/templates/layout.html |  1 +
 app/templates/utils.html  |  3 +++
 5 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 app/static/common.js

diff --git a/app/config.py b/app/config.py
index 60a4d9c..47b7b31 100644
--- a/app/config.py
+++ b/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
 
diff --git a/app/scss/main.scss b/app/scss/main.scss
index 75e8e90..229b604 100644
--- a/app/scss/main.scss
+++ b/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;
+}
diff --git a/app/static/common.js b/app/static/common.js
new file mode 100644
index 0000000..9ec37ac
--- /dev/null
+++ b/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);
+        });
+    }
+}
diff --git a/app/templates/layout.html b/app/templates/layout.html
index 7aab073..cdf5959 100644
--- a/app/templates/layout.html
+++ b/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>
diff --git a/app/templates/utils.html b/app/templates/utils.html
index e01540e..32bbcc9 100644
--- a/app/templates/utils.html
+++ b/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" %}