diff options
| author | Factiven <[email protected]> | 2023-04-11 23:23:29 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-04-11 23:23:29 +0700 |
| commit | 1fcdd9f7d859b925bf92265f441655d5522e351c (patch) | |
| tree | 86391522f6fcc70d105f7e796a9f91d132ee4a29 /lib | |
| parent | Initial commit (diff) | |
| download | moopa-1fcdd9f7d859b925bf92265f441655d5522e351c.tar.xz moopa-1fcdd9f7d859b925bf92265f441655d5522e351c.zip | |
initial commit
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/AniList.js | 55 | ||||
| -rw-r--r-- | lib/Artplayer.js | 54 | ||||
| -rw-r--r-- | lib/apolloClient.js | 20 | ||||
| -rw-r--r-- | lib/mongodb.js | 30 | ||||
| -rw-r--r-- | lib/useAnilist.js | 136 |
5 files changed, 295 insertions, 0 deletions
diff --git a/lib/AniList.js b/lib/AniList.js new file mode 100644 index 0000000..2b65789 --- /dev/null +++ b/lib/AniList.js @@ -0,0 +1,55 @@ +export async function aniListData({ sort, page = 1 }) { + const resAnilist = await fetch(`https://graphql.anilist.co`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + query: ` + query ( + $id: Int + $page: Int + $perPage: Int + $search: String + $sort: [MediaSort] + ) { + Page(page: $page, perPage: $perPage) { + pageInfo { + total + currentPage + lastPage + hasNextPage + perPage + } + media(id: $id, search: $search, sort: $sort type: ANIME) { + id + idMal + title { + romaji + english + } + coverImage { + extraLarge + } + description + } + } + } + `, + variables: { + page: page, + perPage: 15, + sort, + }, + }), + }); + const anilistData = await resAnilist.json(); + const data = anilistData.data.Page.media; + // console.log(resAnilist); + return { + props: { + data, + }, + }; +} diff --git a/lib/Artplayer.js b/lib/Artplayer.js new file mode 100644 index 0000000..49806ed --- /dev/null +++ b/lib/Artplayer.js @@ -0,0 +1,54 @@ +import { useEffect, useRef } from "react"; +import Artplayer from "artplayer"; +import Hls from "hls.js"; + +export default function Player({ option, getInstance, ...rest }) { + const artRef = useRef(); + function playM3u8(video, url, art) { + if (Hls.isSupported()) { + const hls = new Hls(); + hls.loadSource(url); + hls.attachMedia(video); + + // optional + art.hls = hls; + art.once("url", () => hls.destroy()); + art.once("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, + customType: { + m3u8: playM3u8, + }, + fullscreen: true, + fullscreenWeb: true, + hotkey: true, + lock: true, + autoOrientation: true, + theme: "#f97316", + icons: { + state: "</>", + }, + }); + + if (getInstance && typeof getInstance === "function") { + getInstance(art); + } + + return () => { + if (art && art.destroy) { + art.destroy(false); + } + }; + }, []); + + return <div ref={artRef} {...rest}></div>; +} diff --git a/lib/apolloClient.js b/lib/apolloClient.js new file mode 100644 index 0000000..8a25156 --- /dev/null +++ b/lib/apolloClient.js @@ -0,0 +1,20 @@ +import { ApolloClient, DefaultOptions, InMemoryCache } from "@apollo/client"; + +const defaultOptions = { + watchQuery: { + fetchPolicy: "no-cache", + errorPolicy: "ignore", + }, + query: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, +}; + +const client = new ApolloClient({ + uri: "https://graphql.anilist.co", + cache: new InMemoryCache(), + defaultOptions: defaultOptions, +}); + +export { client }; diff --git a/lib/mongodb.js b/lib/mongodb.js new file mode 100644 index 0000000..dbbf0dc --- /dev/null +++ b/lib/mongodb.js @@ -0,0 +1,30 @@ +// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb +import { MongoClient } from "mongodb"; + +if (!process.env.MONGODB_URI) { + throw new Error('Invalid/Missing environment variable: "MONGODB_URI"'); +} + +const uri = process.env.MONGODB_URI; +const options = {}; + +let client; +let clientPromise; + +if (process.env.NODE_ENV === "development") { + // In development mode, use a global variable so that the value + // is preserved across module reloads caused by HMR (Hot Module Replacement). + if (!global._mongoClientPromise) { + client = new MongoClient(uri, options); + global._mongoClientPromise = client.connect(); + } + clientPromise = global._mongoClientPromise; +} else { + // In production mode, it's best to not use a global variable. + client = new MongoClient(uri, options); + clientPromise = client.connect(); +} + +// Export a module-scoped MongoClient promise. By doing this in a +// separate module, the client can be shared across functions. +export default clientPromise; diff --git a/lib/useAnilist.js b/lib/useAnilist.js new file mode 100644 index 0000000..b95293f --- /dev/null +++ b/lib/useAnilist.js @@ -0,0 +1,136 @@ +import { useState, useEffect } from "react"; + +export function useAniList(session) { + const [media, setMedia] = useState([]); + // const [aniAdvanceSearch, setAniAdvanceSearch] = useState([]); + + const queryMedia = ` + query ($username: String) { + MediaListCollection(userName: $username, type: ANIME) { + lists { + status + name + entries { + id + mediaId + status + progress + score + media { + id + title { + english + romaji + } + episodes + coverImage { + large + } + } + } + } + } + } + `; + + const advance = ` + query ($search: String, $type: MediaType, $status: MediaStatus, $season: MediaSeason, $year: Int, $genres: [String], $tags: [String], $sort: [MediaSort], $page: Int, $perPage: Int) { + Page (page: $page, perPage: $perPage) { + pageInfo { + total + currentPage + lastPage + hasNextPage + } + media (search: $search, type: $type, status: $status, season: $season, seasonYear: $year, genre_in: $genres, tag_in: $tags, sort: $sort) { + id + title { + userPreferred + } + type + episodes + status + format + coverImage { + extraLarge + color + } + averageScore + isAdult + } + } + } + `; + + const username = session?.user?.name; + const accessToken = session?.user?.token; + + useEffect(() => { + async function fetchData() { + if (!username || !accessToken) return; + + const response = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: queryMedia, + variables: { + username: username, + }, + }), + }); + + const data = await response.json(); + setMedia(data.data.MediaListCollection.lists); + } + + fetchData(); + }, [queryMedia, username, accessToken]); + + // useEffect(() => { + // async function fetchData() {} + // }); + + async function aniAdvanceSearch( + search, + type, + seasonYear, + season, + genres, + perPage, + sort + ) { + const response = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: advance, + variables: { + search: search, + type: type, + seasonYear: seasonYear, + season: season, + genres: genres, + perPage: perPage, + sort: sort, + page: 1, + }, + }), + }); + + const datas = await response.json(); + console.log(search); + const data = datas.data.Page; + return data; + } + + return { + media, + // updateMediaEntry, + aniAdvanceSearch, + }; +} |