diff options
Diffstat (limited to 'components/id/player')
| -rw-r--r-- | components/id/player/Artplayer.js | 59 | ||||
| -rw-r--r-- | components/id/player/VideoPlayerId.js | 181 |
2 files changed, 0 insertions, 240 deletions
diff --git a/components/id/player/Artplayer.js b/components/id/player/Artplayer.js deleted file mode 100644 index e209433..0000000 --- a/components/id/player/Artplayer.js +++ /dev/null @@ -1,59 +0,0 @@ -import { useEffect, useRef } from "react"; -import Artplayer from "artplayer"; - -export default function Player({ option, res, getInstance, ...rest }) { - const artRef = useRef(); - - useEffect(() => { - const art = new Artplayer({ - ...option, - container: artRef.current, - fullscreen: true, - hotkey: true, - lock: true, - setting: true, - playbackRate: true, - autoOrientation: true, - pip: true, - theme: "#f97316", - controls: [ - { - name: "fast-rewind", - position: "right", - html: '<svg class="hi-solid hi-rewind inline-block w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8.445 14.832A1 1 0 0010 14v-2.798l5.445 3.63A1 1 0 0017 14V6a1 1 0 00-1.555-.832L10 8.798V6a1 1 0 00-1.555-.832l-6 4a1 1 0 000 1.664l6 4z"/></svg>', - tooltip: "Backward 5s", - click: function () { - art.backward = 5; - }, - }, - { - name: "fast-forward", - position: "right", - html: '<svg class="hi-solid hi-fast-forward inline-block w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M4.555 5.168A1 1 0 003 6v8a1 1 0 001.555.832L10 11.202V14a1 1 0 001.555.832l6-4a1 1 0 000-1.664l-6-4A1 1 0 0010 6v2.798l-5.445-3.63z"/></svg>', - tooltip: "Forward 5s", - click: function () { - art.forward = 5; - }, - }, - ], - }); - - art.events.proxy(document, "keydown", (event) => { - if (event.key === "f" || event.key === "F") { - art.fullscreen = !art.fullscreen; - } - }); - - if (getInstance && typeof getInstance === "function") { - getInstance(art); - } - - return () => { - if (art && art.destroy) { - art.destroy(false); - } - }; - }, []); - - return <div ref={artRef} {...rest}></div>; -} diff --git a/components/id/player/VideoPlayerId.js b/components/id/player/VideoPlayerId.js deleted file mode 100644 index 1168313..0000000 --- a/components/id/player/VideoPlayerId.js +++ /dev/null @@ -1,181 +0,0 @@ -import Player from "./Artplayer"; -import { useEffect, useState } from "react"; -import { useAniList } from "../../../lib/anilist/useAnilist"; - -export default function VideoPlayerId({ - data, - id, - progress, - session, - aniId, - stats, - op, - ed, - title, - poster, -}) { - const [url, setUrl] = useState(""); - const [source, setSource] = useState([]); - const { markProgress } = useAniList(session); - - const [resolution, setResolution] = useState("auto"); - - useEffect(() => { - const resol = localStorage.getItem("quality"); - if (resol) { - setResolution(resol); - } - - async function compiler() { - try { - const source = data.map((i) => { - return { - url: `${i.episode}`, - html: `${i.size}p`, - }; - }); - - const defSource = source.find( - (i) => - i?.html === "1080p" || - i?.html === "720p" || - i?.html === "480p" || - i?.html === "360p" - ); - - if (defSource) { - setUrl(defSource.url); - } - - setSource(source); - } catch (error) { - console.error(error); - } - } - compiler(); - }, [data, resolution]); - - return ( - <> - {url && ( - <Player - key={`${url}`} - option={{ - url: `${url}`, - quality: source, - title: `${title}`, - autoplay: true, - screenshot: true, - poster: poster ? poster : "", - }} - res={resolution} - quality={source} - style={{ - width: "100%", - height: "100%", - margin: "0 auto 0", - }} - getInstance={(art) => { - art.on("ready", () => { - const seek = art.storage.get(id); - const seekTime = seek?.time || 0; - const duration = art.duration; - const percentage = seekTime / duration; - - if (percentage >= 0.9) { - art.currentTime = 0; - console.log("Video started from the beginning"); - } else { - art.currentTime = seekTime; - } - }); - - art.on("video:timeupdate", () => { - if (!session) return; - const mediaSession = navigator.mediaSession; - const currentTime = art.currentTime; - const duration = art.duration; - const percentage = currentTime / duration; - - mediaSession.setPositionState({ - duration: art.duration, - playbackRate: art.playbackRate, - position: art.currentTime, - }); - - if (percentage >= 0.9) { - // use >= instead of > - markProgress(aniId, progress, stats); - art.off("video:timeupdate"); - console.log("Video progress marked"); - } - }); - - art.on("video:timeupdate", () => { - var currentTime = art.currentTime; - // console.log(art.currentTime); - art.storage.set(id, { - time: art.currentTime, - duration: art.duration, - }); - - if ( - op && - currentTime >= op.interval.startTime && - currentTime <= 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 = op.interval.endTime; - }, - }); - } - } else if ( - ed && - currentTime >= ed.interval.startTime && - currentTime <= 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 = 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"); - } - } - }); - }} - /> - )} - </> - ); -} |