Wrapper for @justinribeiro/lite-youtube

aerialist7 · Jan 22, 2022 · 8f97756 · 8f97756
1 parent f6d28c5
commit 8f97756
Show file tree

Hide file tree

Showing 4 changed files with 316 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -10,9 +10,11 @@
     "@emotion/react": "11.7.1",
     "@emotion/styled": "11.6.0",
     "@github/clipboard-copy-element": "1.1.2",
+    "@justinribeiro/lite-youtube": "1.3.1",
     "@lit-labs/react": "1.0.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "wc-react": "0.5.0"
   },
   "devDependencies": {
     "@types/react": "17.0.38",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,7 @@
-import React from "react"
-import "@github/clipboard-copy-element"
+import { css } from "@emotion/react"
 import { useCopied } from "./hooks/useCopied"
 import ClipboardCopy from "./components/ClipboardCopy"
-import { css } from "@emotion/react"
+import LiteYoutube from "./components/LiteYoutube"
 
 function App() {
     const [copied, setCopied] = useCopied()
@@ -11,9 +10,10 @@ function App() {
         <div
             css={css`
                 display: grid;
-                grid-template-rows: 100px;
+                grid-template-rows: 100px 400px;
                 grid-template-areas:
-                    "clipboard-copy";
+                    "clipboard-copy"
+                    "lite-youtube";
                 `}
         >
             <div css={css`grid-area: clipboard-copy`}>
@@ -27,6 +27,20 @@ function App() {
                     <span hidden={!copied}>Copied! Now paste the value somewhere</span>
                 </ClipboardCopy>
             </div>
+
+            <div css={css`grid-area: lite-youtube`}>
+                <h3>@justinribeiro/lite-youtube</h3>
+                <LiteYoutube
+                    css={css`height: 100%`}
+                    videoId="guJLfqTFfIw"
+                    videoPlay="Mirar"
+                    videoTitle="This is a video title"
+                    videoStartAt={5}
+                    // TODO: Unsupported props
+                    //  params="controls=0&enablejsapi=1"
+                    //  autoLoad
+                />
+            </div>
         </div>
     )
 }

diff --git a/src/components/LiteYoutube.ts b/src/components/LiteYoutube.ts
@@ -0,0 +1,7 @@
+import "@justinribeiro/lite-youtube"
+import { wrapWc } from "wc-react"
+import { LiteYTEmbed } from "@justinribeiro/lite-youtube"
+
+const LiteYoutube = wrapWc<Partial<LiteYTEmbed>>("lite-youtube")
+
+export default LiteYoutube