Show video in dialog

public/dialogs/stefan.json

@@ -56,6 +56,19 @@
     "dap1question": {
       "text": "Ja, schon seit längerer Zeit und auch in diesem Semester wieder.",
       "addFacts": ["stefan/askedAfterDap1"],
+      "options": [
+        {
+          "text": "Erzählen sie mir bitte mehr",
+          "linksToDialog": "showDap1Video"
+        },
+        {
+          "text": "Interessant",
+          "linksToDialog": "start"
+        }
+      ]
+    },
+    "showDap1Video": {
+      "peertubeVideoId": "56907252-8545-4bc3-89ed-a3fa2e3cf850",
       "options": [
         {
           "text": "Interessant",

src/SingleDialogComponent.svelte

@@ -7,6 +7,7 @@
   const dispatch = createEventDispatcher();
 
   export let imageUrl: string;
+  export let peertubeVideoId: string;
   export let title: string | undefined;
   export let text: string;
   export let options: DialogOption[] = [];
@@ -72,8 +73,17 @@
   </h3>
 {/if}
 
-<img src={imageUrl} />
-
+<img src={imageUrl} alt="Character you are talking to" />
+{#if typeof peertubeVideoId === "string" && peertubeVideoId.length > 0}
+  <iframe
+    title="Embedded video"
+    height="400"
+    sandbox="allow-same-origin allow-scripts allow-popups"
+    src="https://video.oh14.de/videos/embed/{peertubeVideoId}?autoplay=1&title=0&warningTitle=0&peertubeLink=0"
+    frameborder="0"
+    allowfullscreen
+  />
+{/if}
 <div>
   <Typewriter cascade interval={10} cursor={false}>
     {#each text.split("\n") as para}

src/dialogSet.schema.json

@@ -18,6 +18,10 @@
           },
           "type": "array"
         },
+        "peertubeVideoId": {
+          "description": "Embeds a peerTube-Video into this dialog and plays it when the dialog is opened.",
+          "type": "string"
+        },
         "imageUrl": {
           "description": "Can be used to overwrite imageUrl from DialogSet.\nE.g. when a different emotion should be shown for this dialog,",
           "type": "string"

src/types.ts

@@ -45,6 +45,11 @@ export interface Dialog {
    * E.g. when a different emotion should be shown for this dialog,
    */
   imageUrl?: string;
+
+  /**
+   * Embeds a peerTube-Video into this dialog and plays it.
+   */
+  peertubeVideoId?: string;
   /**
    * What the characters says to the player.
    * Line breaks (\n) are rendered as paragraphs.