Merge pull request #14 from ProGM/document-image-and-video

Added <image>, <rawimage> and <video> basic docs

Author: KurtGokhan

src/content/reference/components/image.md

@@ -9,8 +9,9 @@ layout: API
 
 ```js
 export default function App() {
+  const imageAddress = 'https://picsum.photos/200';
   return <image
-    style={{ height: 200, objectFit: 'scale-down' }}
+    style={{ height: 300, objectFit: 'fit' }}
     source={imageAddress} />;
 };
 ```
@@ -19,5 +20,5 @@ export default function App() {
 
 ### Properties
 
-- **source**: Source of the image. Can be a url or the `Texture2D` object.
+- **source**: Source of the image. Can be a url, the `Texture2D` object or the `Sprite` object.
 - **fit**: Determines how to position the image inside the element.

src/content/reference/components/rawimage.md

@@ -0,0 +1,26 @@
+---
+title: <rawimage>
+layout: API
+---
+
+`<rawimage>` creates an rawimage component.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  return (
+    <rawimage
+      style={{ height: 300 }}
+      source='https://picsum.photos/200' />
+  );
+};
+```
+
+</Sandpack>
+
+### Properties
+
+- **source**: Source of the image. Can be a url, the `Texture2D` object or the `Sprite` object.

src/content/reference/components/video.md

@@ -0,0 +1,45 @@
+---
+title: <video>
+layout: API
+---
+
+`<video>` creates an video component.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const videoAddress = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+  const [videoRef, setVideoRef] = useState();
+
+  useEffect(() => {
+    if (videoRef) {
+      videoRef.VideoPlayer.Play();
+    }
+  }, [videoRef]);
+
+  const toggleVideo = () => {
+    const vp = videoRef.VideoPlayer;
+    if (vp.isPlaying) vp.Pause();
+    else vp.Play();
+  };
+
+  return <>
+    <video
+      style={{ objectFit: 'contain', width: 500 }}
+      source={videoAddress}
+      ref={setVideoRef}
+      onPointerClick={toggleVideo}
+    />
+  </>;
+};
+```
+
+</Sandpack>
+
+### Properties
+
+- **source**: Source of the image. Can be a url, a `Video` object.

src/sidebarReference.json

@@ -53,6 +53,10 @@
               "title": "icon",
               "path": "/reference/components/icon"
             },
+            {
+              "title": "image",
+              "path": "/reference/components/image"
+            },
             {
               "title": "input",
               "path": "/reference/components/input"
@@ -65,13 +69,21 @@
               "title": "html",
               "path": "/reference/components/html"
             },
+            {
+              "title": "rawimage",
+              "path": "/reference/components/rawimage"
+            },
             {
               "title": "script",
               "path": "/reference/components/script"
             },
             {
               "title": "style",
               "path": "/reference/components/style"
+            },
+            {
+              "title": "video",
+              "path": "/reference/components/video"
             }
           ]
         },