aboutsummaryrefslogtreecommitdiff
path: root/components/videoPlayer.js
diff options
context:
space:
mode:
Diffstat (limited to 'components/videoPlayer.js')
-rw-r--r--components/videoPlayer.js412
1 files changed, 0 insertions, 412 deletions
diff --git a/components/videoPlayer.js b/components/videoPlayer.js
deleted file mode 100644
index f35f4f0..0000000
--- a/components/videoPlayer.js
+++ /dev/null
@@ -1,412 +0,0 @@
-import Player from "../lib/Artplayer";
-import { useEffect, useState } from "react";
-import { useAniList } from "../lib/anilist/useAnilist";
-import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
-import { useRouter } from "next/router";
-
-const fontSize = [
- {
- html: "Small",
- size: "16px",
- },
- {
- html: "Medium",
- size: "36px",
- },
- {
- html: "Large",
- size: "56px",
- },
-];
-
-export default function VideoPlayer({
- info,
- data,
- id,
- progress,
- session,
- aniId,
- skip,
- title,
- poster,
- proxy,
- provider,
- track,
- aniTitle,
- timeWatched,
- dub,
-}) {
- const [url, setUrl] = useState("");
- const [source, setSource] = useState([]);
- const { markProgress } = useAniList(session);
-
- const router = useRouter();
-
- const [resolution, setResolution] = useState("auto");
- const [subSize, setSubSize] = useState({ size: "16px", html: "Small" });
- const [defSize, setDefSize] = useState();
- const [subtitle, setSubtitle] = useState();
- const [defSub, setDefSub] = useState();
-
- const [autoPlay, setAutoPlay] = useState(false);
-
- useEffect(() => {
- const resol = localStorage.getItem("quality");
- const sub = JSON.parse(localStorage.getItem("subSize"));
- if (resol) {
- setResolution(resol);
- }
-
- if (provider === "zoro") {
- const size = fontSize.map((i) => {
- const isDefault = !sub ? i.html === "Small" : i.html === sub?.html;
- return {
- ...(isDefault && { default: true }),
- html: i.html,
- size: i.size,
- };
- });
-
- const defSize = size?.find((i) => i?.default === true);
- setDefSize(defSize);
- setSubSize(size);
- }
-
- async function compiler() {
- try {
- const referer = JSON.stringify(data?.headers);
- const source = data.sources.map((items) => {
- const isDefault =
- provider !== "gogoanime"
- ? items.quality === "default" || items.quality === "auto"
- : resolution === "auto"
- ? items.quality === "default" || items.quality === "auto"
- : items.quality === resolution;
- return {
- ...(isDefault && { default: true }),
- html: items.quality === "default" ? "adaptive" : items.quality,
- url: `${proxy}/proxy/m3u8/${encodeURIComponent(
- String(items.url)
- )}/${encodeURIComponent(String(referer))}`,
- };
- });
-
- const defSource = source?.find((i) => i?.default === true);
-
- if (defSource) {
- setUrl(defSource.url);
- }
-
- if (provider === "zoro") {
- const subtitle = data?.subtitles
- .filter((subtitle) => subtitle.lang !== "Thumbnails")
- .map((subtitle) => {
- const isEnglish = subtitle.lang === "English";
- return {
- ...(isEnglish && { default: true }),
- url: subtitle.url,
- html: `${subtitle.lang}`,
- };
- });
-
- const defSub = data?.subtitles.find((i) => i.lang === "English");
-
- setDefSub(defSub?.url);
-
- setSubtitle(subtitle);
- }
-
- setSource(source);
- } catch (error) {
- console.error(error);
- }
- }
- compiler();
- }, [data, resolution]);
-
- return (
- <>
- {url && (
- <Player
- key={url}
- option={{
- url: `${url}`,
- title: `${title}`,
- autoplay: true,
- screenshot: true,
- moreVideoAttr: {
- crossOrigin: "anonymous",
- },
- poster: poster ? poster : "",
- ...(provider !== "gogoanime" && {
- plugins: [
- artplayerPluginHlsQuality({
- // Show quality in setting
- setting: true,
-
- // Get the resolution text from level
- getResolution: (level) => level.height + "P",
-
- // I18n
- title: "Quality",
- auto: "Auto",
- }),
- ],
- }),
- ...(provider === "zoro" && {
- subtitle: {
- url: `${defSub}`,
- // type: "vtt",
- encoding: "utf-8",
- default: true,
- name: "English",
- escape: false,
- style: {
- color: "#FFFF",
- fontSize: `${defSize?.size}`,
- fontFamily: localStorage.getItem("font")
- ? localStorage.getItem("font")
- : "Arial",
- textShadow: localStorage.getItem("subShadow")
- ? JSON.parse(localStorage.getItem("subShadow")).value
- : "0px 0px 10px #000000",
- },
- },
- }),
- }}
- id={aniId}
- res={resolution}
- quality={source}
- subSize={subSize}
- subtitles={subtitle}
- provider={provider}
- track={track}
- autoplay={autoPlay}
- setautoplay={setAutoPlay}
- style={{
- width: "100%",
- height: "100%",
- margin: "0 auto 0",
- }}
- getInstance={(art) => {
- art.on("ready", () => {
- const seek = art.storage.get(id);
- const seekTime = seek?.timeWatched || 0;
- const duration = art.duration;
- const percentage = seekTime / duration;
- const percentagedb = timeWatched / duration;
-
- if (subSize) {
- art.subtitle.style.fontSize = subSize?.size;
- }
-
- if (percentage >= 0.9 || percentagedb >= 0.9) {
- art.currentTime = 0;
- console.log("Video started from the beginning");
- } else if (timeWatched) {
- art.currentTime = timeWatched;
- } else {
- art.currentTime = seekTime;
- }
- });
-
- let marked = 0;
-
- art.on("video:playing", () => {
- if (!session) return;
- const intervalId = setInterval(async () => {
- const resp = await fetch("/api/user/update/episode", {
- method: "PUT",
- body: JSON.stringify({
- name: session?.user?.name,
- id: String(aniId),
- watchId: id,
- title: track.playing?.title || aniTitle,
- aniTitle: aniTitle,
- image: track.playing?.image || info?.coverImage?.extraLarge,
- number: Number(progress),
- duration: art.duration,
- timeWatched: art.currentTime,
- provider: provider,
- nextId: track.next?.id,
- nextNumber: Number(track.next?.number),
- dub: dub ? true : false,
- }),
- });
- // console.log("updating db", { track });
- }, 5000);
-
- art.on("video:pause", () => {
- clearInterval(intervalId);
- });
-
- art.on("video:ended", () => {
- clearInterval(intervalId);
- });
-
- art.on("destroy", () => {
- clearInterval(intervalId);
- // console.log("clearing interval");
- });
- });
-
- art.on("video:playing", () => {
- const interval = setInterval(async () => {
- art.storage.set(id, {
- aniId: String(aniId),
- watchId: id,
- title: track?.playing?.title || aniTitle,
- aniTitle: aniTitle,
- image: track?.playing?.image || info?.coverImage?.extraLarge,
- episode: Number(progress),
- duration: art.duration,
- timeWatched: art.currentTime,
- provider: provider,
- nextId: track?.next?.id,
- nextNumber: track?.next?.number,
- dub: dub ? true : false,
- createdAt: new Date().toISOString(),
- });
- }, 5000);
-
- art.on("video:pause", () => {
- clearInterval(interval);
- });
-
- art.on("video:ended", () => {
- clearInterval(interval);
- });
-
- art.on("destroy", () => {
- clearInterval(interval);
- });
- });
-
- art.on("resize", () => {
- art.subtitle.style({
- fontSize: art.height * 0.05 + "px",
- });
- });
-
- art.on("video:timeupdate", async () => {
- if (!session) return;
-
- var currentTime = art.currentTime;
- const duration = art.duration;
- const percentage = currentTime / duration;
-
- if (percentage >= 0.9) {
- // use >= instead of >
- if (marked < 1) {
- marked = 1;
- markProgress(aniId, progress);
- }
- }
- });
-
- art.on("video:ended", () => {
- if (!track?.next) return;
- if (localStorage.getItem("autoplay") === "true") {
- art.controls.add({
- name: "next-button",
- position: "top",
- html: '<div class="vid-con"><button class="next-button progress">Play Next</button></div>',
- click: function (...args) {
- if (track?.next) {
- router.push(
- `/en/anime/watch/${aniId}/${provider}?id=${encodeURIComponent(
- track?.next?.id
- )}&num=${track?.next?.number}${
- dub ? `&dub=${dub}` : ""
- }`
- );
- }
- },
- });
-
- const button = document.querySelector(".next-button");
-
- function stopTimeout() {
- clearTimeout(timeoutId);
- button.classList.remove("progress");
- }
-
- let timeoutId = setTimeout(() => {
- art.controls.remove("next-button");
- if (track?.next) {
- router.push(
- `/en/anime/watch/${aniId}/${provider}?id=${encodeURIComponent(
- track?.next?.id
- )}&num=${track?.next?.number}${dub ? `&dub=${dub}` : ""}`
- );
- }
- }, 7000);
-
- button.addEventListener("mouseover", stopTimeout);
- }
- });
-
- art.on("video:timeupdate", () => {
- var currentTime = art.currentTime;
- // console.log(art.currentTime);
-
- if (
- skip?.op &&
- currentTime >= skip.op.interval.startTime &&
- currentTime <= skip.op.interval.endTime
- ) {
- // Add the layer if it's not already added
- if (!art.controls["op"]) {
- // Remove the other control if it's already added
- if (art.controls["ed"]) {
- art.controls.remove("ed");
- }
-
- // Add the control
- art.controls.add({
- name: "op",
- position: "top",
- html: '<button class="skip-button">Skip Opening</button>',
- click: function (...args) {
- art.seek = skip.op.interval.endTime;
- },
- });
- }
- } else if (
- skip?.ed &&
- currentTime >= skip.ed.interval.startTime &&
- currentTime <= skip.ed.interval.endTime
- ) {
- // Add the layer if it's not already added
- if (!art.controls["ed"]) {
- // Remove the other control if it's already added
- if (art.controls["op"]) {
- art.controls.remove("op");
- }
-
- // Add the control
- art.controls.add({
- name: "ed",
- position: "top",
- html: '<button class="skip-button">Skip Ending</button>',
- click: function (...args) {
- art.seek = skip.ed.interval.endTime;
- },
- });
- }
- } else {
- // Remove the controls if they're added
- if (art.controls["op"]) {
- art.controls.remove("op");
- }
- if (art.controls["ed"]) {
- art.controls.remove("ed");
- }
- }
- });
- }}
- />
- )}
- </>
- );
-}
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 03:45:52 +0000