From ec00502248a8a4cc01a685099d1914ae7e99b2a7 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Thu, 6 May 2021 16:27:27 +0200
Subject: [PATCH] Add media failed animation

---
 static/galene.css       |  1 +
 static/media-failed.svg | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 static/media-failed.svg

diff --git a/static/galene.css b/static/galene.css
index 5f6ed69c..57bb555b 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -889,6 +889,7 @@ h1 {
 
 .media-failed {
     opacity: 0.7;
+    background: no-repeat center/50% 50% url("/media-failed.svg");
 }
 
 .mirror {
diff --git a/static/media-failed.svg b/static/media-failed.svg
new file mode 100644
index 00000000..f41d601c
--- /dev/null
+++ b/static/media-failed.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 64 16" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#ececec">
+        <circle cx="8" cy="8" r="8"/>
+        <circle cx="32" cy="8" r="8"/>
+        <circle cx="56" cy="8" r="8"/>
+    </g>
+    <style>
+    circle {
+      animation: circleScale 1.5s infinite ease-in-out;
+      transform-origin: 8px 8px;
+    }
+    circle:nth-child(2) {
+      animation-delay: -1s;
+      transform-origin: 32px 8px;
+    }
+    circle:nth-child(3) {
+      animation-delay: -0.5s;
+      transform-origin: 56px 8px;
+    }
+    @keyframes circleScale {
+      0%, 80%, 100% { transform: scale(0.8); }
+      40% { transform: scale(1.0); }
+    }
+    </style>
+</svg>