Add some visio services to preconfigured metadata

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

js/src/components/Event/EventMetadataList.vue

@@ -140,6 +140,9 @@ export default class EventMetadataList extends Vue {
     [EventMetadataCategories.SOCIAL]: this.$t("Social") as string,
     [EventMetadataCategories.DETAILS]: this.$t("Details") as string,
     [EventMetadataCategories.BOOKING]: this.$t("Booking") as string,
+    [EventMetadataCategories.VIDEO_CONFERENCE]: this.$t(
+      "Video Conference"
+    ) as string,
   };
 
   get filteredDataArray(): GroupedIEventMetadata {

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="jitsi-meet">
+    <div class="jitsi-meet-video" v-if="metadata">
+      <iframe
+        allow="camera; microphone; fullscreen; display-capture; autoplay"
+        :src="metadata.value"
+        style="height: 100%; width: 100%; border: 0px"
+      ></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 JitsiMeetIntegration extends Vue {
+  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
+  metadata!: IEventMetadataDescription;
+}
+</script>
+<style lang="scss" scoped>
+.jitsi-meet {
+  .jitsi-meet-video {
+    padding-top: 56.25%;
+    position: relative;
+    height: 0;
+
+    iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+  }
+}
+</style>

js/src/i18n/en_US.json

@@ -1128,5 +1128,16 @@
   "Redirecting in progress…": "Redirecting in progress…",
   "Zoom in": "Zoom in",
   "Zoom out": "Zoom out",
-  "Show me where I am": "Show me where I am"
+  "Show me where I am": "Show me where I am",
+  "Video Conference": "Video Conference",
+  "Jisti Meet": "Jisti Meet",
+  "The Jitsi Meet video teleconference URL": "The Jitsi Meet video teleconference URL",
+  "Zoom": "Zoom",
+  "The Zoom video teleconference URL": "The Zoom video teleconference URL",
+  "Microsoft Teams": "Microsoft Teams",
+  "The Microsoft Teams video teleconference URL": "The Microsoft Teams video teleconference URL",
+  "Google Meet": "Google Meet",
+  "The Google Meet video teleconference URL": "The Google Meet video teleconference URL",
+  "Big Blue Button": "Big Blue Button",
+  "The Big Blue Button video teleconference URL": "The Big Blue Button video teleconference URL"
 }

js/src/i18n/fr_FR.json

@@ -1219,5 +1219,16 @@
   "Redirecting in progress…": "Redirection en cours…",
   "Zoom in": "Zoomer",
   "Zoom out": "Dézoomer",
-  "Show me where I am": "Afficher ma position"
+  "Show me where I am": "Afficher ma position",
+  "Video Conference": "Visio-conférence",
+  "Jisti Meet": "Jitsi Meet",
+  "The Jitsi Meet video teleconference URL": "L'URL de visio-conférence Jitsi Meet",
+  "Zoom": "Zoom",
+  "The Zoom video teleconference URL": "L'URL de visio-conférence Zoom",
+  "Microsoft Teams": "Microsoft Teams",
+  "The Microsoft Teams video teleconference URL": "L'URL de visio-conférence Microsoft Teams",
+  "Google Meet": "Google Meet",
+  "The Google Meet video teleconference URL": "L'URL de visio-conférence Google Meet",
+  "Big Blue Button": "Big Blue Button",
+  "The Big Blue Button video teleconference URL": "L'URL de visio-conférence Big Blue Button"
 }

js/src/services/EventMetadata.ts

@@ -209,4 +209,62 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
     keyType: EventMetadataKeyType.URL,
     category: EventMetadataCategories.DETAILS,
   },
+  {
+    icon: "webcam",
+    key: "mz:visio:jitsi_meet",
+    label: i18n.t("Jisti Meet") as string,
+    description: i18n.t("The Jitsi Meet video teleconference URL") as string,
+    value: "",
+    type: EventMetadataType.STRING,
+    keyType: EventMetadataKeyType.URL,
+    category: EventMetadataCategories.VIDEO_CONFERENCE,
+    placeholder: "https://meet.jit.si/AFewWords",
+  },
+  {
+    icon: "webcam",
+    key: "mz:visio:zoom",
+    label: i18n.t("Zoom") as string,
+    description: i18n.t("The Zoom video teleconference URL") as string,
+    value: "",
+    type: EventMetadataType.STRING,
+    keyType: EventMetadataKeyType.URL,
+    category: EventMetadataCategories.VIDEO_CONFERENCE,
+    pattern: /https:\/\/.*\.?zoom.us\/.*/,
+  },
+  {
+    icon: "microsoft-teams",
+    key: "mz:visio:microsoft_teams",
+    label: i18n.t("Microsoft Teams") as string,
+    description: i18n.t(
+      "The Microsoft Teams video teleconference URL"
+    ) as string,
+    value: "",
+    type: EventMetadataType.STRING,
+    keyType: EventMetadataKeyType.URL,
+    category: EventMetadataCategories.VIDEO_CONFERENCE,
+    pattern: /https:\/\/teams\.live\.com\/meet\/.+/,
+  },
+  {
+    icon: "google-hangouts",
+    key: "mz:visio:google_meet",
+    label: i18n.t("Google Meet") as string,
+    description: i18n.t("The Google Meet video teleconference URL") as string,
+    value: "",
+    type: EventMetadataType.STRING,
+    keyType: EventMetadataKeyType.URL,
+    category: EventMetadataCategories.VIDEO_CONFERENCE,
+    pattern: /https:\/\/meet\.google\.com\/.+/,
+  },
+  {
+    icon: "webcam",
+    key: "mz:visio:big_blue_button",
+    label: i18n.t("Big Blue Button") as string,
+    description: i18n.t(
+      "The Big Blue Button video teleconference URL"
+    ) as string,
+    value: "",
+    type: EventMetadataType.STRING,
+    keyType: EventMetadataKeyType.URL,
+    category: EventMetadataCategories.VIDEO_CONFERENCE,
+  },
 ];

js/src/types/enums.ts

@@ -274,4 +274,5 @@ export enum EventMetadataCategories {
   TOOLS = "TOOLS",
   DETAILS = "DETAILS",
   BOOKING = "BOOKING",
+  VIDEO_CONFERENCE = "VIDEO_CONFERENCE",
 }

js/src/views/Event/Event.vue

@@ -533,6 +533,10 @@ import { eventMetaDataList } from "../../services/EventMetadata";
       import(
         /* webpackChunkName: "YouTubeIntegration" */ "../../components/Event/Integrations/YouTube.vue"
       ),
+    "integration-jitsi-meet": () =>
+      import(
+        /* webpackChunkName: "JitsiMeetIntegration" */ "../../components/Event/Integrations/JitsiMeet.vue"
+      ),
   },
   apollo: {
     event: {
@@ -1087,6 +1091,7 @@ export default class Event extends EventMixin {
     "mz:live:twitch:url": "integration-twitch",
     "mz:live:peertube:url": "integration-peertube",
     "mz:live:youtube:url": "integration-youtube",
+    "mz:visio:jitsi_meet": "integration-jitsi-meet",
   };
 
   get integrations(): Record<string, IEventMetadataDescription> {