feat(alerts): add support for webm

src/overlay/views/alertsRegistry.vue

@@ -11,7 +11,11 @@
         </audio>
         <div v-if="runningAlert.isShowing" class="center" :class="['layout-' + runningAlert.alert.layout]">
           <template v-if="!runningAlert.alert.enableAdvancedMode">
-            <img :src="'/registry/alerts/' + runningAlert.alert.imageId" :class="{ center: runningAlert.alert.layout === '3', ['animate__' + runningAlert.animation]: true }" class="animate__slow animate__animated"/>
+            <video ref="video" v-if="typeOfMedia.get(runningAlert.alert.imageId) === 'video'" style="max-width:500px;" :class="{ center: runningAlert.alert.layout === '3', ['animate__' + runningAlert.animation]: true }" class="animate__slow animate__animated w-100 pb-3">
+              <source :src="'/registry/alerts/' + runningAlert.alert.imageId" type="video/webm">
+              Your browser does not support the video tag.
+            </video>
+            <img v-else :src="'/registry/alerts/' + runningAlert.alert.imageId" :class="{ center: runningAlert.alert.layout === '3', ['animate__' + runningAlert.animation]: true }" class="animate__slow animate__animated"/>
             <div
               v-if="runningAlert.isShowingText"
               :class="{
@@ -121,6 +125,7 @@ export default class AlertsRegistryOverlays extends Vue {
   responsiveAPIKey: string | null = null;
 
   preparedAdvancedHTML: string = '';
+  typeOfMedia: Map<string, 'image' | 'video'> = new Map();
 
   state: {
     loaded: number,
@@ -269,6 +274,13 @@ export default class AlertsRegistryOverlays extends Vue {
         if (this.runningAlert.showAt <= Date.now() && !this.runningAlert.isShowing) {
           console.debug('showing image');
           this.runningAlert.isShowing = true;
+          this.$nextTick(() => {
+            console.log(this.$refs.video);
+            if (this.$refs.video && this.runningAlert) {
+              (this.$refs.video as HTMLMediaElement).volume = this.runningAlert.alert.soundVolume / 100;
+              (this.$refs.video as HTMLMediaElement).play();
+            }
+          })
         }
 
         if (this.runningAlert.showTextAt <= Date.now() && !this.runningAlert.isShowingText) {
@@ -526,6 +538,33 @@ export default class AlertsRegistryOverlays extends Vue {
               if (!isEqual(data, this.data)) {
                 this.data = data;
 
+                // determinate if image is image or video
+                for (const event of [
+                  ...this.data.subcommunitygifts,
+                  ...this.data.hosts,
+                  ...this.data.raids,
+                  ...this.data.tips,
+                  ...this.data.cheers,
+                  ...this.data.resubs,
+                  ...this.data.subs,
+                  ...this.data.follows,
+                  ...this.data.subgifts
+                ]) {
+                  fetch('/registry/alerts/' + event.imageId)
+                    .then(response => {
+                      if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                      }
+                      return response.blob();
+                    })
+                    .then(myBlob => {
+                      this.typeOfMedia.set(event.imageId, myBlob.type.startsWith('video') ? 'video' : 'image');
+                    })
+                    .catch(error => {
+                      console.error('There has been a problem with your fetch operation:', error);
+                    });
+                }
+
                 for (const [lang, isEnabled] of Object.entries(this.data.loadStandardProfanityList)) {
                   if (isEnabled) {
                     let list = require('../../bot/data/vulgarities/' + lang + '.txt');

src/panel/components/media.vue

@@ -1,7 +1,34 @@
 <template>
   <div :key="createdAt + id">
     <b-card
-      v-if="type === 'image'"
+      v-if="type === 'image' && b64data.startsWith('data:video')"
+      :style="{ height: isUploading ? '150px' : 'inherit'}"
+    >
+      <loading no-margin slow v-if="isUploading"/>
+      <video :ref="createdAt + id" class="w-100 pb-3" style="max-width:500px;">
+        <source :src="b64data" type="video/webm">
+        Your browser does not support the video tag.
+      </video>
+      <b-card-text class="absolute">
+        <b-button squared variant="outline-danger" class="border-0" @click="removeMedia()" v-if="b64data.length > 0">
+          <fa icon="times" class="mr-1"/> {{ translate('dialog.buttons.delete') }}
+        </b-button>
+        <b-button squared variant="outline-primary" class="border-0" v-if="b64data.length > 0" @click="$refs[createdAt + id].play()">
+          <fa icon="play" class="mr-1"/> {{ translate('dialog.buttons.play') }} ({{duration}}s)
+        </b-button>
+        <b-button squared variant="outline-dark" class="border-0" @click="$refs.uploadImage.click()">
+          <fa icon="upload" class="mr-1"/> {{ translate('dialog.buttons.upload.idle') }}
+        </b-button>
+        <input
+          class="d-none"
+          type="file"
+          ref="uploadImage"
+          @change="filesChange($event.target.files)"
+          accept="image/*, video/webm"/>
+      </b-card-text>
+    </b-card>
+    <b-card
+      v-else-if="type === 'image'"
       overlay
       :img-src="!isUploading ? b64data : ''"
       :style="{ height: isUploading ? '150px' : 'inherit'}"
@@ -19,7 +46,7 @@
           type="file"
           ref="uploadImage"
           @change="filesChange($event.target.files)"
-          accept="image/*"/>
+          accept="image/*, video/webm"/>
       </b-card-text>
     </b-card>
     <b-card v-else-if="type === 'audio'">
@@ -80,7 +107,7 @@ export default class MediaForm extends Vue {
   createdAt = 0;
 
   setVolume() {
-    if (this.type === 'audio' && this.b64data.length > 0) {
+    if ((this.type === 'audio' || (this.type === 'image' && this.b64data.startsWith('data:video/webm'))) && this.b64data.length > 0) {
       if (typeof this.$refs[this.createdAt + this.id] === 'undefined') {
         console.debug(`Retrying setVolume ${this.id}`);
         setTimeout(() => this.setVolume(), 100);
@@ -101,25 +128,24 @@ export default class MediaForm extends Vue {
       console.log(data)
       console.groupEnd();
       this.b64data = data.sort((a,b) => a.chunkNo - b.chunkNo).map(o => o.b64data).join('');
+      this.startInterval();
     });
   }
 
-  mounted() {
-    if (this.type === 'audio') {
-      this.interval = window.setInterval(() => {
-        if (this.b64data.length === 0) {
-          this.duration = 0;
-          return;
-        }
-        this.setVolume();
-        this.duration = (this.$refs[this.createdAt + '' + this.id] as HTMLAudioElement).duration;
-        if (isNaN(this.duration)) {
-          this.duration = 0;
-        } else {
-          this.duration = Math.floor(this.duration * 10) / 10;
-        }
-      }, 500)
-    };
+  startInterval() {
+    this.interval = window.setInterval(() => {
+      if (this.b64data.length === 0) {
+        this.duration = 0;
+        return;
+      }
+      this.setVolume();
+      this.duration = (this.$refs[this.createdAt + '' + this.id] as HTMLAudioElement).duration;
+      if (isNaN(this.duration)) {
+        this.duration = 0;
+      } else {
+        this.duration = Math.floor(this.duration * 10) / 10;
+      }
+    }, 500)
   }
 
   beforeDestroy() {

src/panel/views/registries/alerts/components/form-cheers.vue

@@ -139,7 +139,7 @@
     <b-form-group label-cols-sm="4" label-cols-lg="3"
             :label="translate('registry.alerts.image.name')"
             label-for="image">
-      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId"/>
+      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId" :volume="data.soundVolume"/>
     </b-form-group>
 
     <b-form-group label-cols-sm="4" label-cols-lg="3"

src/panel/views/registries/alerts/components/form-follow.vue

@@ -140,7 +140,7 @@
     <b-form-group label-cols-sm="4" label-cols-lg="3"
             :label="translate('registry.alerts.image.name')"
             label-for="image">
-      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId"/>
+      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId" :volume="data.soundVolume"/>
     </b-form-group>
 
     <b-form-group label-cols-sm="4" label-cols-lg="3"

src/panel/views/registries/alerts/components/form-hosts.vue

@@ -149,7 +149,7 @@
     <b-form-group label-cols-sm="4" label-cols-lg="3"
             :label="translate('registry.alerts.image.name')"
             label-for="image">
-      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId"/>
+      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId" :volume="data.soundVolume"/>
     </b-form-group>
 
     <b-form-group label-cols-sm="4" label-cols-lg="3"

src/panel/views/registries/alerts/components/form-resubs.vue

@@ -140,7 +140,7 @@
     <b-form-group label-cols-sm="4" label-cols-lg="3"
             :label="translate('registry.alerts.image.name')"
             label-for="image">
-      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId"/>
+      <media :media.sync="data.imageId" type="image" socket="/registries/alerts" :key="'image-' + data.imageId" :volume="data.soundVolume"/>
     </b-form-group>
 
     <b-form-group label-cols-sm="4" label-cols-lg="3"