add support for video instance wallpapers

src/App.js

@@ -76,11 +76,24 @@ export default {
         ? null
         : this.$store.state.instance.background
     },
-    background () { return this.pageBackground || (this.$store.getters.mergedConfig.overrideInstanceWallpaper && this.userBackground) || this.instanceBackground },
+    background () {
+      return this.pageBackground ||
+        (this.$store.getters.mergedConfig.overrideInstanceWallpaper && this.userBackground) ||
+        this.instanceBackground
+    },
     bgStyle () {
-      if (this.background) {
+      const background = this.background
+      if (!background) return null
+
+      const isVideo = /\.(mp4|webm|mov)$/i.test(background)
+
+      if (isVideo) {
         return {
-          '--body-background-image': `url(${this.background})`
+          '--body-background-image': 'none'
+        }
+      } else {
+        return {
+          '--body-background-image': `url(${background})`
         }
       }
     },

src/App.vue

@@ -6,7 +6,18 @@
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
-    />
+    >
+      <video
+        v-if="background && /\.(mp4|webm|ogg)$/i.test(background)"
+        class="bg-video"
+        autoplay
+        loop
+        muted
+        playsinline
+      >
+        <source :src="background" type="video/mp4">
+      </video>
+    </div>
     <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
     <Notifications v-if="currentUser" />

src/components/about/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="column-inner">
-    <terms-of-service-panel />
     <staff-panel />
+    <terms-of-service-panel />
     <LocalBubblePanel v-if="showLocalBubblePanel" />
     <MRFTransparencyPanel />
     <features-panel v-if="currentUser && showFeaturesPanel" />

static/config.json

@@ -1,6 +1,6 @@
 {
   "alwaysShowSubjectInput": true,
-  "background": "/static/tropic_island_night.jpg.webp",
+  "background": "https://media.puppyspace.org/puppy/uploads/33af6203-2978-4d7b-9a76-bbe9ccf80fc8.mp4",
   "collapseMessageWithSubject": false,
   "greentext": false,
   "hideFilteredStatuses": false,