Merge pull request #58 from LonelyCpp/docusaurus

Better documentation with Docusaurus

Author: LonelyCpp

.npmignore

@@ -1 +1,2 @@
-doc/*
+docs/*
+website/*

doc/readme.md

@@ -0,0 +1,21 @@
+---
+id: about
+title: React Native Youtube-iframe
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+![npm](https://img.shields.io/npm/v/react-native-youtube-iframe?style=for-the-badge) ![npm](https://img.shields.io/npm/dm/react-native-youtube-iframe?style=for-the-badge)
+
+A wrapper of the **Youtube-iframe API** built for react native.
+
+- ✅ Works seamlessly on both ios and android platforms
+- ✅ Does not rely on the native youtube service on android (prevents unexpected crashes, works on phones without the youtube app)
+- ✅ Uses the webview player which is known to be more stable compared to the native youtube app
+- ✅ Access to a vast API provided through the iframe youtube API
+- ✅ Supports multiple youtube player instances in a single page
+- ✅ Fetch basic video metadata without API keys (uses oEmbed)
+- ✅ Works on modals and overlay components
+- ✅ Expo support
+
+<img alt="Docusaurus with Keytar" src={useBaseUrl('img/demo.gif')} />

docs/about.mdx

@@ -0,0 +1,39 @@
+---
+id: basic-usage
+title: Basic Usage
+---
+
+This snippet renders a Youtube video with a button that can play or pause the video. When the player has finished playing it, an alert is triggered.
+
+```jsx
+import React, { useState, useCallback, useRef } from "react";
+import { Button, View, Alert } from "react-native";
+import YoutubePlayer from "react-native-youtube-iframe";
+
+export default function App() {
+  const [playing, setPlaying] = useState(false);
+
+  const onStateChange = useCallback((state) => {
+    if (state === "ended") {
+      setPlaying(false);
+      Alert.alert("video has finished playing!");
+    }
+  }, []);
+
+  const togglePlaying = useCallback(() => {
+    setPlaying((prev) => !prev);
+  }, []);
+
+  return (
+    <View>
+      <YoutubePlayer
+        height={300}
+        play={playing}
+        videoId={"iee2TATGMyI"}
+        onChangeState={onStateChange}
+      />
+      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+    </View>
+  );
+}
+```

docs/basic_usage.mdx

@@ -0,0 +1,22 @@
+---
+id: install
+title: Installation
+---
+
+:::note
+This package uses react-hooks and therefore will need
+
+**react-native 0.59 or above**
+(recommended - 0.60 or above)
+:::
+
+1. First install `react-native-webview`.
+
+- React Native CLI app - [Instructions](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md)
+
+  - React Native **`0.60` and above**, install the latest version of react-native-webview.
+  - React Native **below `0.60`**, react-native-webview version `6.11.1` is the last version that supports it.
+
+- Expo App - [Instructions](https://docs.expo.io/versions/latest/sdk/webview/)
+
+2. Run - `npm install react-native-youtube-iframe`

_config.yml renamed to docs/faq.mdx

@@ -0,0 +1,52 @@
+---
+id: module-methods
+title: Module Methods
+---
+
+export const Type = ({children, color}) => (
+  <span
+    style={{
+      backgroundColor: '#25c2a0',
+      borderRadius: '20px',
+      color: '#fff',
+      padding: '0.2em 0.4em 0.2em 0.4em',
+      fontSize: '0.8em',
+    }}>
+    {children}
+  </span>
+);
+
+### `getYoutubeMeta`
+
+<Type>getYoutubeMeta(videoId: String): Promise[youtubeMeta]</Type>
+
+Fetch metadata of a youtube video using the oEmbed Spec - https://oembed.com/#section7
+
+metadata returned -
+
+| field            | type   | explanation                                        |
+| ---------------- | ------ | -------------------------------------------------- |
+| author_name      | String | The name of the author/owner of the video.         |
+| author_url       | String | youtube channel link of the video.                 |
+| height           | Number | The height in pixels required to display the HTML. |
+| html             | String | The HTML required to embed a video player.         |
+| provider_name    | String | The name of the resource provider.                 |
+| provider_url     | String | The url of the resource provider.                  |
+| thumbnail_height | Number | The height of the video thumbnail.                 |
+| thumbnail_url    | String | The url of the resource provider.                  |
+| thumbnail_width  | Number | The width of the video thumbnail.                  |
+| title            | String | youtube video title.                               |
+| type             | String | The oEmbed version number.                         |
+| version          | String | The resource type.                                 |
+| width            | Number | The width in pixels required to display the HTML.  |
+
+example -
+
+```javascript
+import {Alert} from 'react-native';
+import {getYoutubeMeta} from 'react-native-youtube-iframe';
+
+getYoutubeMeta('sNhhvQGsMEc').then(meta => {
+  Alert.alert('title of the video : ' + meta.title);
+});
+```