add artplayer-template

packages/artplayer-template/next.js/pages/ArtPlayer.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import Artplayer from "artplayer";
+
+export default function ({ 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);
+      }
+    };
+  }, [option, getInstance]);
+
+  return <div ref={artRef} {...rest}></div>;
+}

packages/artplayer-template/next.js/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

packages/artplayer-template/next.js/pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

packages/artplayer-template/next.js/pages/index.js

@@ -0,0 +1,21 @@
+import { useRef } from "react";
+import Artplayer from "./Artplayer";
+
+export default function Home() {
+  const option = useRef({
+    url: "https://artplayer.org/assets/sample/video.mp4",
+    autoSize: true,
+  });
+
+  return (
+    <Artplayer
+      option={option.current}
+      style={{
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      }}
+      getInstance={(art) => console.log(art)}
+    />
+  );
+}