From be836c42be3d6fb96792bb56c36f6698d7cdf0b4 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Sat, 21 Mar 2020 20:03:56 +0300
Subject: [PATCH] youtube, intagram, html tokens support

---
 pages/[...slug].tsx | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index f47235f2..c0585948 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -9,6 +9,7 @@ import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage } from 'next'
 import { IBreadcumbsPart, IMeta, IPage, ITag, FileTokenData, Token } from 'src/types'
 import { joinTokens } from 'src/lib/tokens'
+import { Html } from 'src/components/Html'
 
 function array<T>(value: T | T[]) {
     return Array.isArray(value)
@@ -16,6 +17,26 @@ function array<T>(value: T | T[]) {
         : [value]
 }
 
+const Youtube: React.SFC<{ url: string }> = props => {
+    const url = new URL(props.url)
+    const videoId = url.searchParams.get('v')
+    if (!videoId) {
+        return null
+    }
+
+    const src = `//www.youtube.com/embed/${videoId}`
+
+    return (
+        <div className="kazimir__video">
+            <iframe
+                src={src}
+                frameBorder="0"
+            // allowFullscreen
+            />
+        </div>
+    )
+}
+
 const File: React.SFC<FileTokenData> = props => (
     <div className="document-row">
         <a href={props['url']} className="invisible">
@@ -74,6 +95,27 @@ const Index: NextPage<Props> = props => (
                                 />
                             )
 
+                        case 'html':
+                            return (
+                                <Html
+                                    html={x.data}
+                                />
+                            )
+
+                        case 'instagram':
+                            return (
+                                <Html
+                                    html={x.data.embed}
+                                />
+                            )
+
+                        case 'youtube':
+                            return (
+                                <Youtube
+                                    url={x.data.url}
+                                />
+                            )
+
                         case 'image':
                             return (
                                 <div className="kazimir__image">