aboutsummaryrefslogtreecommitdiff
path: root/components/watch/player
diff options
context:
space:
mode:
authorFactiven <[email protected]>2023-10-22 19:43:17 +0700
committerGitHub <[email protected]>2023-10-22 19:43:17 +0700
commitf801f8f422954b884a6541321dba0669ee9d6173 (patch)
treee0d5e106b99e9b4e0a4c4bf7bb0464617db85b8d /components/watch/player
parentBump @babel/traverse from 7.22.8 to 7.23.2 (#90) (diff)
downloadmoopa-4.2.0.tar.xz
moopa-4.2.0.zip
Update v4.2.0 (#93)v4.2.0
Diffstat (limited to 'components/watch/player')
-rw-r--r--components/watch/player/artplayer.js8
-rw-r--r--components/watch/player/component/controls/subtitle.js3
-rw-r--r--components/watch/player/playerComponent.js84
-rw-r--r--components/watch/player/utils/getZoroSource.js0
4 files changed, 61 insertions, 34 deletions
diff --git a/components/watch/player/artplayer.js b/components/watch/player/artplayer.js
index 4ae8aa1..666c103 100644
--- a/components/watch/player/artplayer.js
+++ b/components/watch/player/artplayer.js
@@ -46,7 +46,7 @@ export default function NewPlayer({
customType: {
m3u8: playM3u8,
},
- ...(provider === "zoro" && {
+ ...(subtitles?.length > 0 && {
subtitle: {
url: `${defSub}`,
// type: "vtt",
@@ -131,7 +131,7 @@ export default function NewPlayer({
return item.html;
},
},
- provider === "zoro" && {
+ subtitles?.length > 0 && {
html: "Subtitles",
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm2-4h8v-2H6v2Zm10 0h2v-2h-2v2ZM6 12h2v-2H6v2Zm4 0h8v-2h-8v2Z"></path></svg>',
width: 300,
@@ -261,7 +261,7 @@ export default function NewPlayer({
index: 11,
position: "right",
tooltip: "Theater (t)",
- html: '<p class="theater"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M19 3H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 12H2V5h16v10z"></path></svg></p>',
+ html: '<i class="theater"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20"><path fill="currentColor" d="M19 3H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 12H2V5h16v10z"></path></svg></i>',
click: function (...args) {
setPlayerState((prev) => ({
...prev,
@@ -379,6 +379,8 @@ export default function NewPlayer({
art.destroy(false);
}
};
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div ref={artRef} {...rest}></div>;
diff --git a/components/watch/player/component/controls/subtitle.js b/components/watch/player/component/controls/subtitle.js
deleted file mode 100644
index 02075f7..0000000
--- a/components/watch/player/component/controls/subtitle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { useState } from "react";
-
-export default function getSubtitles() {}
diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
index 37c5810..665919b 100644
--- a/components/watch/player/playerComponent.js
+++ b/components/watch/player/playerComponent.js
@@ -4,6 +4,7 @@ import { icons } from "./component/overlay";
import { useWatchProvider } from "@/lib/context/watchPageProvider";
import { useRouter } from "next/router";
import { useAniList } from "@/lib/anilist/useAnilist";
+import Loading from "@/components/shared/loading";
export function calculateAspectRatio(width, height) {
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
@@ -74,20 +75,18 @@ export default function PlayerComponent({
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 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);
- }
+ const defSize = size?.find((i) => i?.default === true);
+ setDefSize(defSize);
+ setSubSize(size);
async function compiler() {
try {
@@ -114,19 +113,26 @@ export default function PlayerComponent({
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 subtitle = data?.subtitles
+ ?.filter(
+ (subtitle) =>
+ subtitle.lang !== "Thumbnails" && subtitle.lang !== "thumbnails"
+ )
+ ?.map((subtitle) => {
+ const isEnglish =
+ subtitle.lang === "English" ||
+ subtitle.lang === "English / English (US)";
+ return {
+ ...(isEnglish && { default: true }),
+ url: subtitle.url,
+ html: `${subtitle.lang}`,
+ };
+ });
- const defSub = data?.subtitles.find((i) => i.lang === "English");
+ if (subtitle) {
+ const defSub = data?.subtitles.find(
+ (i) => i.lang === "English" || i.lang === "English / English (US)"
+ );
setDefSub(defSub?.url);
@@ -162,6 +168,8 @@ export default function PlayerComponent({
setSubtitle([]);
setLoading(true);
};
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [provider, data]);
/**
@@ -171,6 +179,17 @@ export default function PlayerComponent({
art.on("ready", () => {
const autoplay = localStorage.getItem("autoplay_video") || false;
+ // check media queries for mobile devices
+ const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
+ // console.log(art.fullscreen);
+
+ if (isMobile) {
+ art.controls.remove("theater-button");
+ // art.controls.remove("fast-rewind");
+ // art.controls.remove("fast-forward");
+ }
+
if (autoplay === "true" || autoplay === true) {
if (playerState.currentTime === 0) {
art.play();
@@ -465,10 +484,13 @@ export default function PlayerComponent({
style={{ aspectRatio: aspectRatio }}
>
<div className="flex-center w-full h-full">
+ {!data?.error && !url && (
+ <div className="flex-center w-full h-full">
+ <Loading />
+ </div>
+ )}
{!error ? (
- !loading &&
- track &&
- url && (
+ !loading && track && url && !data?.error ? (
<NewPlayer
playerRef={playerRef}
res={resolution}
@@ -486,6 +508,12 @@ export default function PlayerComponent({
height: "100%",
}}
/>
+ ) : (
+ <p className="text-center">
+ {data?.status === 404 && "Not Found"}
+ <br />
+ {data?.error}
+ </p>
)
) : (
<p className="text-center">
diff --git a/components/watch/player/utils/getZoroSource.js b/components/watch/player/utils/getZoroSource.js
deleted file mode 100644
index e69de29..0000000
--- a/components/watch/player/utils/getZoroSource.js
+++ /dev/null