Allow to add metadata to an event

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/Integrations/PeerTube.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="peertube">
+    <div class="peertube-video" v-if="videoDetails">
+      <iframe
+        width="100%"
+        height="100%"
+        sandbox="allow-same-origin allow-scripts allow-popups"
+        :src="`https://${videoDetails.host}/videos/embed/${videoDetails.uuid}`"
+        frameborder="0"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { IEventMetadataDescription } from "@/types/event-metadata";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class PeerTubeIntegration extends Vue {
+  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
+  metadata!: IEventMetadataDescription;
+
+  get videoDetails(): { host: string; uuid: string } | null {
+    if (this.metadata.pattern) {
+      const matches = this.metadata.pattern.exec(this.metadata.value);
+      if (matches && matches[1] && matches[2]) {
+        return { host: matches[1], uuid: matches[2] };
+      }
+    }
+    return null;
+  }
+
+  get origin(): string {
+    return window.location.hostname;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.peertube {
+  .peertube-video {
+    padding-top: 56.25%;
+    position: relative;
+    height: 0;
+
+    iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+  }
+}
+</style>

js/src/components/Event/Integrations/Twitch.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="twitch">
+    <div class="twitch-video" v-if="channelName">
+      <iframe
+        :src="`https://player.twitch.tv/?channel=${channelName}&parent=${origin}&autoplay=false`"
+        frameborder="0"
+        scrolling="no"
+        allowfullscreen="true"
+        height="100%"
+        width="100%"
+      >
+      </iframe>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { IEventMetadataDescription } from "@/types/event-metadata";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class TwitchIntegration extends Vue {
+  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
+  metadata!: IEventMetadataDescription;
+
+  get channelName(): string | null {
+    if (this.metadata.pattern) {
+      const matches = this.metadata.pattern.exec(this.metadata.value);
+      if (matches && matches[1]) {
+        return matches[1];
+      }
+    }
+    return null;
+  }
+
+  get origin(): string {
+    return window.location.hostname;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.twitch {
+  .twitch-video {
+    padding-top: 56.25%;
+    position: relative;
+    height: 0;
+
+    iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+  }
+}
+</style>

js/src/components/Event/Integrations/YouTube.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="youtube">
+    <div class="youtube-video" v-if="videoID">
+      <iframe
+        width="100%"
+        height="100%"
+        :src="`https://www.youtube.com/embed/${videoID}`"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { IEventMetadataDescription } from "@/types/event-metadata";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class YouTubeIntegration extends Vue {
+  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
+  metadata!: IEventMetadataDescription;
+
+  get videoID(): string | null {
+    if (this.metadata.pattern) {
+      const matches = this.metadata.pattern.exec(this.metadata.value);
+      if (matches && matches[1]) {
+        return matches[1];
+      }
+    }
+    return null;
+  }
+
+  get origin(): string {
+    return window.location.hostname;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.youtube {
+  .youtube-video {
+    padding-top: 56.25%;
+    position: relative;
+    height: 0;
+
+    iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+  }
+}
+</style>