import { useEffect, useRef } from "react";
import Artplayer from "artplayer";
export default function Player({ option, res, getInstance, ...rest }) {
const artRef = useRef();
useEffect(() => {
const art = new Artplayer({
...option,
container: artRef.current,
fullscreen: true,
hotkey: true,
lock: true,
setting: true,
playbackRate: true,
autoOrientation: true,
pip: true,
theme: "#f97316",
controls: [
{
name: "fast-rewind",
position: "right",
html: '',
tooltip: "Backward 5s",
click: function () {
art.backward = 5;
},
},
{
name: "fast-forward",
position: "right",
html: '',
tooltip: "Forward 5s",
click: function () {
art.forward = 5;
},
},
],
});
art.events.proxy(document, "keydown", (event) => {
if (event.key === "f" || event.key === "F") {
art.fullscreen = !art.fullscreen;
}
});
if (getInstance && typeof getInstance === "function") {
getInstance(art);
}
return () => {
if (art && art.destroy) {
art.destroy(false);
}
};
}, []);
return ;
}