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