Skip to content
This repository has been archived by the owner on Jul 14, 2024. It is now read-only.

Commit

Permalink
Update v4.1.0 (#79)
Browse files Browse the repository at this point in the history 
* Update v4.1.0

* Update pages/_app.js
  • Loading branch information
@DevanAbinaya
DevanAbinaya committed Sep 24, 2023
1 parent df85cd0 commit 1a85c25
Show file tree
Hide file tree
Showing 74 changed files with 3,147 additions and 2,354 deletions.
9 changes: 5 additions & 4 deletions .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ NEXTAUTH_SECRET='run this cmd in your bash terminal (openssl rand -base64 32) wi
NEXTAUTH_URL="for development use http://localhost:3000/ and for production use your domain url"

## NextJS
PROXY_URI="I recommend you to use this cors-anywhere as a proxy https://github.com/Rob--W/cors-anywhere follow the instruction on how to use it there. Skip this if you only use gogoanime as a source"
PROXY_URI="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
API_KEY="this API key is used for schedules and manga page. get the key from https://anify.tv/discord"
DISQUS_SHORTNAME='put your disqus shortname here. (optional)'
API_KEY="this API key is used for schedules, anime and manga page. get the key from https://anify.tv/discord"
DISQUS_SHORTNAME='put your disqus shortname here (optional)'
# ADMIN_USERNAME=""

## Prisma
DATABASE_URL="Your postgresql connection url"

## Redis
# If you don't want to use redis, just comment the REDIS_URL
# If you don't want to use redis, just comment the REDIS_URL (press ctrl + / on windows or cmd + / on mac)
REDIS_URL="rediss://username:password@host:port"
9 changes: 5 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,16 +114,17 @@ NEXTAUTH_SECRET='run this cmd in your bash terminal (openssl rand -base64 32) wi
NEXTAUTH_URL="for development use http://localhost:3000/ and for production use your domain url"

## NextJS
PROXY_URI="use this cors proxy https://github.com/Gratenes/m3u8CloudflareWorkerProxy, follow the instruction there on how to deploy it."
PROXY_URI="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
API_KEY="this API key is used for schedules and manga page. get the key from https://anify.tv/discord"
DISQUS_SHORTNAME='put your disqus shortname here. (optional)'
API_KEY="this API key is used for schedules, anime and manga page. get the key from https://anify.tv/discord"
DISQUS_SHORTNAME='put your disqus shortname here (optional)'
# ADMIN_USERNAME=""

## Prisma
DATABASE_URL="Your postgresql connection url"

## Redis
# If you don't want to use redis, just comment the REDIS_URL
# If you don't want to use redis, just comment the REDIS_URL (press ctrl + / on windows or cmd + / on mac)
REDIS_URL="rediss://username:password@host:port"
```

Expand Down
160 changes: 86 additions & 74 deletions components/anime/charactersCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,79 +3,91 @@ import Image from "next/image";
import { useState } from "react";

export default function Characters({ info }) {
const [showAll, setShowAll] = useState(false);

const [showAll, setShowAll] = useState(false);

return (
<div>
<div className="flex items-center justify-between lg:gap-3 px-5 z-40 ">
<h1 className="font-karla text-[20px] font-bold">Characters</h1>
{info?.length > 6 && (
<div className="cursor-pointer font-karla" onClick={() => setShowAll(!showAll)}>
{showAll ? "show less" : "show more"}
</div>
)}
</div>
{/* for bigger device */}
<div className="hidden md:grid w-full grid-cols-1 gap-[10px] md:gap-4 md:grid-cols-3 md:pt-7 md:pb-5 px-3 md:px-5 pt-4">
{info.slice(0, showAll ? info.length : 6).map((item, index) => {
return <a key={index} className="md:hover:scale-[1.02] snap-start hover:shadow-lg scale-100 transition-transform duration-200 ease-out w-full cursor-default">
<div className="text-gray-300 space-x-4 col-span-1 flex w-full h-24 bg-secondary rounded-md overflow-hidden">
<div className="relative h-full w-20">
<Image
draggable={false}
src={
item.node.image.large ||
item.node.image.medium
}
width={500}
height={300}
alt={
item.node.name.userPreferred ||
item.node.name.full ||
"Character Image"
}
className="h-full object-cover"
/>
</div>
<div className="py-2 flex flex-col justify-between">
<p className="font-semibold">{item.node.name.full || item.node.name.userPreferred}</p>
<p>{item.role}</p>
</div>
</div>
</a>
})}
</div>
{/* for smaller devices */}
<div className="flex md:hidden h-full w-full select-none overflow-x-scroll overflow-y-hidden scrollbar-hide gap-4 pt-8 pb-4 px-5 z-30">
{info.slice(0, showAll ? info.length : 6).map((item, index) => {
return <div key={index} className="flex flex-col gap-3 shrink-0 cursor-pointer">
<a className="hover:scale-105 hover:shadow-lg duration-300 ease-out group relative">
<div className="h-[190px] w-[135px] rounded-md z-30">
<Image
draggable={false}
src={
item.node.image.large ||
item.node.image.medium
}
alt={
item.node.name.userPreferred ||
item.node.name.full ||
"Character Image"
}
width={500}
height={300}
className="z-20 h-[190px] w-[135px] object-cover rounded-md brightness-90"
/>
</div>
</a>
<a className="w-[135px] lg:w-[185px] line-clamp-2">
<h1 className="font-karla font-semibold text-[15px]">{item.node.name.full || item.node.name.userPreferred}</h1>
<h1 className="font-karla float-right italic text-[12px]">~{item.role}</h1>
</a>
</div>
})}
return (
<div>
<div className="flex items-center justify-between lg:gap-3 px-5 z-40 ">
<h1 className="font-karla text-[20px] font-bold">Characters</h1>
{info?.length > 6 && (
<div
className="cursor-pointer font-karla"
onClick={() => setShowAll(!showAll)}
>
{showAll ? "show less" : "show more"}
</div>
)}
</div>
{/* for bigger device */}
<div className="hidden md:grid w-full grid-cols-1 gap-[10px] md:gap-4 md:grid-cols-3 md:pt-7 md:pb-5 px-3 md:px-5 pt-4">
{info.slice(0, showAll ? info.length : 6).map((item, index) => {
return (
<a
key={index}
className="md:hover:scale-[1.02] snap-start hover:shadow-lg scale-100 transition-transform duration-200 ease-out w-full cursor-default"
>
<div className="text-gray-300 space-x-4 col-span-1 flex w-full h-24 bg-secondary rounded-md overflow-hidden">
<div className="relative h-full w-20">
<Image
draggable={false}
src={item.node.image.large || item.node.image.medium}
width={500}
height={300}
alt={
item.node.name.userPreferred ||
item.node.name.full ||
"Character Image"
}
className="h-full object-cover"
/>
</div>
<div className="py-2 flex flex-col justify-between">
<p className="font-semibold">
{item.node.name.full || item.node.name.userPreferred}
</p>
<p>{item.role}</p>
</div>
</div>
</a>
);
})}
</div>
{/* for smaller devices */}
<div className="flex md:hidden h-full w-full select-none overflow-x-scroll overflow-y-hidden scrollbar-hide gap-4 pt-8 pb-4 px-5 z-30">
{info.slice(0, showAll ? info.length : 6).map((item, index) => {
return (
<div
key={index}
className="flex flex-col gap-3 shrink-0 cursor-pointer"
>
<a className="hover:scale-105 hover:shadow-lg duration-300 ease-out group relative">
<div className="h-[190px] w-[135px] rounded-md z-30">
<Image
draggable={false}
src={item.node.image.large || item.node.image.medium}
alt={
item.node.name.userPreferred ||
item.node.name.full ||
"Character Image"
}
width={500}
height={300}
className="z-20 h-[190px] w-[135px] object-cover rounded-md brightness-90"
/>
</div>
</a>
<a className="w-[135px] lg:w-[185px] line-clamp-2">
<h1 className="font-karla font-semibold text-[15px]">
{item.node.name.full || item.node.name.userPreferred}
</h1>
<h1 className="font-karla float-right italic text-[12px]">
~{item.role}
</h1>
</a>
</div>
</div>
);
}
);
})}
</div>
</div>
);
}
114 changes: 97 additions & 17 deletions components/anime/episode.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useEffect, useState, Fragment } from "react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import ChangeView from "./changeView";
import ViewSelector from "./viewSelector";
import ThumbnailOnly from "./viewMode/thumbnailOnly";
import ThumbnailDetail from "./viewMode/thumbnailDetail";
import ListMode from "./viewMode/listMode";
import { convertSecondsToTime } from "../../utils/getTimes";
import { toast } from "react-toastify";

export default function AnimeEpisode({
info,
Expand Down Expand Up @@ -93,8 +93,9 @@ export default function AnimeEpisode({
!mapProviders ||
mapProviders?.every(
(item) =>
item?.img?.includes("https://s4.anilist.co/") ||
item?.image?.includes("https://s4.anilist.co/") ||
item?.image === null
item?.img === null
)
) {
setView(3);
Expand Down Expand Up @@ -152,27 +153,106 @@ export default function AnimeEpisode({
}
}, [providerId, artStorage, info.id, session?.user?.name]);

let debounceTimeout;

const handleRefresh = async () => {
try {
setLoading(true);
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(async () => {
const res = await fetch(
`/api/v2/episode/${info.id}?releasing=${
info.status === "RELEASING" ? "true" : "false"
}${isDub ? "&dub=true" : ""}&refresh=true`
);
if (!res.ok) {
console.log(res);
toast.error("Something went wrong", {
position: "bottom-left",
autoClose: 3000,
hideProgressBar: true,
theme: "colored",
});
setProviders([]);
setLoading(false);
} else {
const data = await res.json();
const getMap = data.find((i) => i?.map === true);
let allProvider = data;

if (getMap) {
allProvider = data.filter((i) => {
if (i?.providerId === "gogoanime" && i?.map !== true) {
return null;
}
return i;
});
setMapProviders(getMap?.episodes);
}

if (allProvider.length > 0) {
const defaultProvider = allProvider.find(
(x) => x.providerId === "gogoanime" || x.providerId === "9anime"
);
setProviderId(
defaultProvider?.providerId || allProvider[0].providerId
); // set to first provider id
}

setView(Number(localStorage.getItem("view")) || 3);
setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
setProviders(allProvider);
setLoading(false);
}
}, 1000);
} catch (err) {
console.log(err);
toast.error("Something went wrong", {
position: "bottom-left",
autoClose: 3000,
hideProgressBar: true,
theme: "colored",
});
}
};

return (
<>
<div className="flex flex-col gap-5 px-3">
<div className="flex lg:flex-row flex-col gap-5 lg:gap-0 justify-between ">
<div className="flex justify-between">
<div className="flex items-center md:gap-5">
<div className="flex items-center gap-4 md:gap-5">
{info && (
<h1 className="text-[20px] lg:text-2xl font-bold font-karla">
Episodes
</h1>
)}
{info.nextAiringEpisode?.timeUntilAiring && (
<p className="hidden md:block bg-gray-100 text-gray-900 rounded-md px-2 font-karla font-medium">
Ep {info.nextAiringEpisode.episode}{" "}
<span className="animate-pulse">{">>"}</span>{" "}
<span className="font-bold">
{convertSecondsToTime(
info.nextAiringEpisode.timeUntilAiring
)}{" "}
{info?.status !== "NOT_YET_RELEASED" && (
<button
type="button"
onClick={() => {
handleRefresh();
setProviders(null);
setMapProviders(null);
}}
className="relative flex flex-col items-center w-5 h-5 group"
>
<span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
Refresh Episodes
</span>
</p>
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
/>
</svg>
</button>
)}
</div>

Expand Down Expand Up @@ -267,7 +347,7 @@ export default function AnimeEpisode({
</>
)}

<ChangeView
<ViewSelector
view={view}
setView={setView}
episode={currentEpisodes}
Expand Down Expand Up @@ -301,7 +381,7 @@ export default function AnimeEpisode({
key={index}
index={index}
info={info}
image={mapData?.image}
image={mapData?.img || mapData?.image}
providerId={providerId}
episode={episode}
artStorage={artStorage}
Expand All @@ -312,7 +392,7 @@ export default function AnimeEpisode({
{view === 2 && (
<ThumbnailDetail
key={index}
image={mapData?.image}
image={mapData?.img || mapData?.image}
title={mapData?.title}
description={mapData?.description}
index={index}
Expand Down Expand Up @@ -346,7 +426,7 @@ export default function AnimeEpisode({
</div>
)
) : (
<p>{providers.message}</p>
<p>{providers?.message}</p>
)}
</div>
) : (
Expand Down
Loading

0 comments on commit 1a85c25

Please sign in to comment.