import { useEffect, useRef } from "react";
import Artplayer from "artplayer";
import Hls from "hls.js";
import { useRouter } from "next/router";
export default function Player({
option,
res,
quality,
subSize,
subtitles,
provider,
getInstance,
id,
track,
// socket
// isPlay,
// watchdata,
// room,
autoplay,
setautoplay,
...rest
}) {
const artRef = useRef();
const router = useRouter();
function playM3u8(video, url, art) {
if (Hls.isSupported()) {
if (art.hls) art.hls.destroy();
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
art.hls = hls;
art.on("destroy", () => hls.destroy());
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = url;
} else {
art.notice.show = "Unsupported playback format: m3u8";
}
}
useEffect(() => {
const art = new Artplayer({
...option,
container: artRef.current,
type: "m3u8",
customType: {
m3u8: playM3u8,
},
fullscreen: true,
hotkey: true,
lock: true,
setting: true,
playbackRate: true,
autoOrientation: true,
pip: true,
theme: "#f97316",
controls: [
{
index: 10,
name: "fast-rewind",
position: "left",
html: '',
tooltip: "Backward 5s",
click: function () {
art.backward = 5;
},
},
{
index: 11,
name: "fast-forward",
position: "left",
html: '',
tooltip: "Forward 5s",
click: function () {
art.forward = 5;
},
},
],
settings: [
{
html: "Autoplay Next",
// icon: '
',
tooltip: "ON/OFF",
switch: localStorage.getItem("autoplay") === "true" ? true : false,
onSwitch: function (item) {
setautoplay(!item.switch);
localStorage.setItem("autoplay", !item.switch);
return !item.switch;
},
},
provider === "zoro" && {
html: "Subtitles",
icon: '',
width: 300,
tooltip: "Settings",
selector: [
{
html: "Display",
icon: '',
tooltip: "Show",
switch: true,
onSwitch: function (item) {
item.tooltip = item.switch ? "Hide" : "Show";
art.subtitle.show = !item.switch;
return !item.switch;
},
},
{
html: "Font Size",
icon: '',
selector: subSize,
onSelect: function (item) {
if (item.html === "Small") {
art.subtitle.style({ fontSize: "16px" });
localStorage.setItem(
"subSize",
JSON.stringify({
size: "16px",
html: "Small",
})
);
} else if (item.html === "Medium") {
art.subtitle.style({ fontSize: "36px" });
localStorage.setItem(
"subSize",
JSON.stringify({
size: "36px",
html: "Medium",
})
);
} else if (item.html === "Large") {
art.subtitle.style({ fontSize: "56px" });
localStorage.setItem(
"subSize",
JSON.stringify({
size: "56px",
html: "Large",
})
);
}
},
},
{
html: "Language",
icon: '',
tooltip: "English",
selector: [...subtitles],
onSelect: function (item) {
art.subtitle.switch(item.url, {
name: item.html,
});
return item.html;
},
},
{
html: "Font Family",
tooltip: localStorage.getItem("font")
? localStorage.getItem("font")
: "Arial",
selector: [
{ html: "Arial" },
{ html: "Comic Sans MS" },
{ html: "Verdana" },
{ html: "Tahoma" },
{ html: "Trebuchet MS" },
{ html: "Times New Roman" },
{ html: "Georgia" },
{ html: "Impact " },
{ html: "Andalé Mono" },
{ html: "Palatino" },
{ html: "Baskerville" },
{ html: "Garamond" },
{ html: "Courier New" },
{ html: "Brush Script MT" },
],
onSelect: function (item) {
art.subtitle.style({ fontFamily: item.html });
localStorage.setItem("font", item.html);
return item.html;
},
},
{
html: "Font Shadow",
tooltip: localStorage.getItem("subShadow")
? JSON.parse(localStorage.getItem("subShadow")).shadow
: "Default",
selector: [
{ html: "None", value: "none" },
{
html: "Uniform",
value:
"2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000",
},
{ html: "Raised", value: "-1px 2px 3px rgba(0, 0, 0, 1)" },
{ html: "Depressed", value: "-2px -3px 3px rgba(0, 0, 0, 1)" },
{ html: "Glow", value: "0 0 10px rgba(0, 0, 0, 0.8)" },
{
html: "Block",
value:
"-3px 3px 4px rgba(0, 0, 0, 1),2px 2px 4px rgba(0, 0, 0, 1),1px -1px 3px rgba(0, 0, 0, 1),-3px -2px 4px rgba(0, 0, 0, 1)",
},
],
onSelect: function (item) {
art.subtitle.style({ textShadow: item.value });
localStorage.setItem(
"subShadow",
JSON.stringify({ shadow: item.html, value: item.value })
);
return item.html;
},
},
],
},
provider === "gogoanime" && {
html: "Quality",
width: 150,
tooltip: `${res}`,
selector: quality,
onSelect: function (item) {
art.switchQuality(item.url, item.html);
localStorage.setItem("quality", item.html);
return item.html;
},
},
].filter(Boolean),
});
if ("mediaSession" in navigator) {
art.on("video:timeupdate", () => {
const session = navigator.mediaSession;
if (!session) return;
session.setPositionState({
duration: art.duration,
playbackRate: art.playbackRate,
position: art.currentTime,
});
});
navigator.mediaSession.setActionHandler("play", () => {
art.play();
});
navigator.mediaSession.setActionHandler("pause", () => {
art.pause();
});
navigator.mediaSession.setActionHandler("previoustrack", () => {
if (track?.prev) {
router.push(
`/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
track?.prev?.id
)}&num=${track?.prev?.number}`
);
}
});
navigator.mediaSession.setActionHandler("nexttrack", () => {
if (track?.next) {
router.push(
`/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
track?.next?.id
)}&num=${track?.next?.number}`
);
}
});
}
art.events.proxy(document, "keydown", (event) => {
if (event.key === "f" || event.key === "F") {
art.fullscreen = !art.fullscreen;
}
});
// artInstanceRef.current = art;
if (getInstance && typeof getInstance === "function") {
getInstance(art);
}
return () => {
if (art && art.destroy) {
art.destroy(false);
}
};
}, []);
return ;
}