From b8fdedb436505eb3554602f1238a9148a59d0f3b Mon Sep 17 00:00:00 2001
From: Jonas Zohren <jonas.zohren@adesso.de>
Date: Mon, 5 Apr 2021 18:20:46 +0200
Subject: [PATCH] Show video in dialog

---
 public/dialogs/stefan.json       | 13 +++++++++++++
 src/SingleDialogComponent.svelte | 14 ++++++++++++--
 src/dialogSet.schema.json        |  4 ++++
 src/types.ts                     |  5 +++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/dialogs/stefan.json b/public/dialogs/stefan.json
index 484b174..d7efb48 100644
--- a/public/dialogs/stefan.json
+++ b/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",
diff --git a/src/SingleDialogComponent.svelte b/src/SingleDialogComponent.svelte
index 154ae46..c55da1e 100644
--- a/src/SingleDialogComponent.svelte
+++ b/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}
diff --git a/src/dialogSet.schema.json b/src/dialogSet.schema.json
index bf7416d..7300f3c 100644
--- a/src/dialogSet.schema.json
+++ b/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"
diff --git a/src/types.ts b/src/types.ts
index fc40a9a..8009a72 100644
--- a/src/types.ts
+++ b/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.
-- 
GitLab