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 %} {% endif %} + 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 @@ {% endif %} {% elif attachment.type == "Video" or (attachment | has_media_type("video")) %} +
+
GIF
+
{% elif attachment.type == "Audio" or (attachment | has_media_type("audio")) %} {% elif attachment.type == "Link" %}