update template

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

@@ -1,25 +1,25 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
-import Artplayer from "artplayer";
+import Artplayer from 'artplayer';
 
 export default function ({ option, getInstance, ...rest }) {
-  const artRef = useRef();
+    const artRef = useRef();
 
-  useEffect(() => {
+    useEffect(() => {
-    const art = new Artplayer({
+        const art = new Artplayer({
-      ...option,
+            ...option,
-      container: artRef.current,
+            container: artRef.current,
-    });
+        });
 
-    if (getInstance && typeof getInstance === "function") {
+        if (getInstance && typeof getInstance === 'function') {
-      getInstance(art);
+            getInstance(art);
-    }
+        }
 
-    return () => {
+        return () => {
-      if (art && art.destroy) {
+            if (art && art.destroy) {
-        art.destroy(false);
+                art.destroy(false);
-      }
+            }
-    };
+        };
-  }, [option, getInstance]);
+    }, []);
 
-  return <div ref={artRef} {...rest}></div>;
+    return <div ref={artRef} {...rest}></div>;
 }

packages/artplayer-template/react.js/src/ArtPlayer.js

@@ -19,7 +19,8 @@ export default function Player({ option, getInstance, ...rest }) {
                 art.destroy(false);
             }
         };
-    }, [option, getInstance]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     return React.createElement('div', {
         ref: artRef,