update docs

packages/artplayer-document/docs/en/Overview.md

@@ -1,97 +0,0 @@
----
-title: Quick start
-sidebar_position: 1
-slug: /
----
-
-## Install
-
-### Install by `npm`:
-
-```bash
-$ npm install artplayer
-```
-
-### Install by `yarn`:
-
-```bash
-$ yarn add artplayer
-```
-
-Then load the `Artplayer` module:
-
-```js
-// ES6
-import Artplayer from 'artplayer';
-
-// CommonJS
-const Artplayer = require('artplayer');
-```
-
-### Install by `script`:
-
-```html
-<!-- locally -->
-<script src="path/to/artplayer.js"></script>
-
-<!-- jsdelivr -->
-<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
-
-<!-- unpkg -->
-<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
-```
-
-Then you can access the constructor via `window.ArtPlayer`
-
-
-## Use
-
-:::danger Tip
-
-The size of the player depends on the size of the `container`, so your `container` must have a size.
-
-:::
-
-### Use in `Html`
-
-```html
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-          .artplayer-app {
-              width: 400px;
-              height: 300px;
-          }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script>
-            var art = new Artplayer({
-                container: '.artplayer-app',
-                url: '/assets/sample/video.mp4',
-            });
-        </script>
-    </body>
-</html>
-```
-
-### Use in `Vue.js`
-
-[artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue.js)
-
-### Use in `React.js`
-
-[artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)
-
-### Use in `Next.js`
-
-[artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)
-
-### Use in `Nuxt.js`
-
-[artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)

packages/artplayer-document/docs/en/Overview.mdx

@@ -0,0 +1,275 @@
+---
+title: Quick start
+sidebar_position: 1
+slug: /
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Install
+
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm install artplayer
+```
+
+```js
+import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash
+yarn add artplayer
+```
+
+```js
+import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+```
+
+</TabItem>
+<TabItem value="script" label="script">
+
+```html showLineNumbers
+<!-- local -->
+<script src="path/to/artplayer.js"></script>
+
+<!-- jsdelivr -->
+<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
+
+<!-- unpkg -->
+<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
+```
+
+```js
+const art = new window.Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+```
+
+</TabItem>
+</Tabs>
+
+## Use
+
+:::danger Tip
+
+The size of the player depends on the size of the `container`, so your `container` must have a size.
+
+:::
+
+### Use in `Html`
+
+```html showLineNumbers
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script>
+            var art = new Artplayer({
+                container: '.artplayer-app',
+                url: '/assets/sample/video.mp4',
+            });
+        </script>
+    </body>
+</html>
+```
+
+### Use in `Vue.js` or `Nuxt.js`
+
+<Tabs>
+<TabItem value="Vue.js" label="Vue.js">
+
+[artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue.js)
+
+</TabItem>
+<TabItem value="Nuxt.js" label="Nuxt.js">
+
+[artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)
+
+</TabItem>
+</Tabs>
+
+<Tabs>
+<TabItem value="Artplayer.vue" label="Artplayer.vue">
+
+```js showLineNumbers
+<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeUnmount() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
+```
+
+</TabItem>
+<TabItem value="App.vue" label="App.vue">
+
+```js showLineNumbers
+<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "https://artplayer.org/assets/sample/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.log(art);
+    },
+  },
+};
+</script>
+```
+
+</TabItem>
+</Tabs>
+
+### Use in `React.js` or `Next.js`
+
+<Tabs>
+<TabItem value="React.js" label="React.js">
+
+[artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)
+
+</TabItem>
+<TabItem value="Next.js" label="Next.js">
+
+[artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)
+
+</TabItem>
+</Tabs>
+
+<Tabs>
+<TabItem value="ArtPlayer.jsx" label="ArtPlayer.jsx">
+
+```jsx showLineNumbers
+import React, { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
+```
+
+</TabItem>
+<TabItem value="App.jsx" label="App.jsx">
+
+```jsx showLineNumbers
+import React from 'react';
+import Artplayer from './ArtPlayer';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.log(art)}
+            />
+        </div>
+    );
+}
+
+export default App;
+```
+
+</TabItem>
+</Tabs>