Add Etherpad Integration

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

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="etherpad">
+    <div class="etherpad-container" v-if="metadata">
+      <iframe
+        :src="`${metadata.value}?showChat=false&showLineNumbers=false`"
+        width="600"
+        height="400"
+      ></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 EtherpadIntegration extends Vue {
+  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
+  metadata!: IEventMetadataDescription;
+}
+</script>
+<style lang="scss" scoped>
+.etherpad {
+  .etherpad-container {
+    padding-top: 56.25%;
+    position: relative;
+    height: 0;
+
+    iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+  }
+}
+</style>

js/src/i18n/en_US.json

@@ -1139,5 +1139,8 @@
   "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"
+  "The Big Blue Button video teleconference URL": "The Big Blue Button video teleconference URL",
+  "Etherpad notes": "Etherpad notes",
+  "The URL of a pad where notes are being taken collaboratively": "The URL of a pad where notes are being taken collaboratively",
+  "https://mensuel.framapad.org/p/some-secret-token": "https://mensuel.framapad.org/p/some-secret-token"
 }

js/src/i18n/fr_FR.json

@@ -1230,5 +1230,8 @@
   "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"
+  "The Big Blue Button video teleconference URL": "L'URL de visio-conférence Big Blue Button",
+  "Etherpad notes": "Notes sur Etherpad",
+  "The URL of a pad where notes are being taken collaboratively": "L'URL d'un pad où les notes sont prises collaborativement",
+  "https://mensuel.framapad.org/p/some-secret-token": "https://mensuel.framapad.org/p/un-jeton-secret"
 }

js/src/services/EventMetadata.ts

@@ -149,6 +149,21 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
     keyType: EventMetadataKeyType.URL,
     category: EventMetadataCategories.TOOLS,
   },
+  {
+    icon: "file-document-edit",
+    key: "mz:notes:etherpad:url",
+    label: i18n.t("Etherpad notes") as string,
+    description: i18n.t(
+      "The URL of a pad where notes are being taken collaboratively"
+    ) as string,
+    value: "",
+    placeholder: i18n.t(
+      "https://mensuel.framapad.org/p/some-secret-token"
+    ) as string,
+    type: EventMetadataType.STRING,
+    keyType: EventMetadataKeyType.URL,
+    category: EventMetadataCategories.TOOLS,
+  },
   {
     icon: "twitter",
     key: "mz:social:twitter:account",

js/src/views/Event/Event.vue

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