mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-19 16:04:41 +00:00
move selectors into player
This commit is contained in:
parent
13a3cc5ca5
commit
4c0345ffab
GPG key ID:
858E8EE696525EED
4 changed files with 88 additions and 47 deletions
|
|
@ -57,7 +57,7 @@ export const EpisodeSelector = (props: {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="px-2 py-2 bg-black bg-opacity-75 backdrop-blur-md">
|
||||
<Swiper
|
||||
modules={[Navigation, Mousewheel, Scrollbar]}
|
||||
spaceBetween={8}
|
||||
|
|
@ -75,6 +75,7 @@ export const EpisodeSelector = (props: {
|
|||
style={
|
||||
{
|
||||
"--swiper-scrollbar-bottom": "0",
|
||||
"--swiper-scrollbar-drag-bg-color": "#ffffff"
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
|
|
@ -82,7 +83,7 @@ export const EpisodeSelector = (props: {
|
|||
<SwiperSlide
|
||||
key={`episode_${episode.position}`}
|
||||
style={{ maxWidth: "fit-content" }}
|
||||
className="pb-2"
|
||||
className="pb-4"
|
||||
>
|
||||
<Button
|
||||
color={
|
||||
|
|
|
|||
|
|
@ -16,6 +16,18 @@ import MediaThemeSutro from "./MediaThemeSutro";
|
|||
import { getAnonEpisodesWatched } from "./ReleasePlayer";
|
||||
import { tryCatchPlayer, tryCatchAPI } from "#/api/utils";
|
||||
|
||||
import {
|
||||
MediaController,
|
||||
MediaControlBar,
|
||||
MediaTimeRange,
|
||||
MediaTimeDisplay,
|
||||
MediaVolumeRange,
|
||||
MediaPlayButton,
|
||||
MediaSeekBackwardButton,
|
||||
MediaSeekForwardButton,
|
||||
MediaMuteButton,
|
||||
} from "media-chrome/react";
|
||||
|
||||
export const ReleasePlayerCustom = (props: {
|
||||
id: number;
|
||||
token: string | null;
|
||||
|
|
@ -112,7 +124,8 @@ export const ReleasePlayerCustom = (props: {
|
|||
if (data) {
|
||||
let lowQualityLink = data.links["360"][0].src; // we assume that 360p is always present
|
||||
|
||||
if (!lowQualityLink.includes("//")) { // check if link is encrypted, else do nothing
|
||||
if (!lowQualityLink.includes("//")) {
|
||||
// check if link is encrypted, else do nothing
|
||||
const decryptedBase64 = lowQualityLink.replace(/[a-zA-Z]/g, (e) => {
|
||||
return String.fromCharCode(
|
||||
(e <= "Z" ? 90 : 122) >= (e = e.charCodeAt(0) + 18) ? e : e - 26
|
||||
|
|
@ -121,14 +134,16 @@ export const ReleasePlayerCustom = (props: {
|
|||
lowQualityLink = atob(decryptedBase64);
|
||||
}
|
||||
|
||||
if (lowQualityLink.includes("https://")) { // string the https prefix, since we add it manually
|
||||
if (lowQualityLink.includes("https://")) {
|
||||
// string the https prefix, since we add it manually
|
||||
lowQualityLink = lowQualityLink.replace("https://", "//");
|
||||
}
|
||||
|
||||
let manifest = `https:${lowQualityLink.replace("360.mp4:hls:", "")}`;
|
||||
let poster = `https:${lowQualityLink.replace("360.mp4:hls:manifest.m3u8", "thumb001.jpg")}`;
|
||||
|
||||
if (lowQualityLink.includes("animetvseries")) { // if link includes "animetvseries" we need to construct manifest ourselves
|
||||
if (lowQualityLink.includes("animetvseries")) {
|
||||
// if link includes "animetvseries" we need to construct manifest ourselves
|
||||
let blobTxt = "#EXTM3U\n";
|
||||
|
||||
if (data.links.hasOwnProperty("240")) {
|
||||
|
|
@ -365,27 +380,8 @@ export const ReleasePlayerCustom = (props: {
|
|||
}, [episode.selected]);
|
||||
|
||||
return (
|
||||
<Card className="aspect-video min-h-min-h-[300px] sm:min-h-[466px] md:min-h-[540px] lg:min-h-[512px] xl:min-h-[608px] 2xl:min-h-[712px]">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{voiceover.selected && (
|
||||
<VoiceoverSelector
|
||||
availableVoiceover={voiceover.available}
|
||||
voiceover={voiceover.selected}
|
||||
setVoiceover={setVoiceover}
|
||||
release_id={props.id}
|
||||
/>
|
||||
)}
|
||||
{source.selected && (
|
||||
<SourceSelector
|
||||
availableSource={source.available}
|
||||
source={source.selected}
|
||||
setSource={setSource}
|
||||
release_id={props.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center w-full h-full">
|
||||
<Card className="">
|
||||
{/* <div className="flex items-center justify-center w-full h-full">
|
||||
{isLoading ?
|
||||
!playerError ?
|
||||
<Spinner />
|
||||
|
|
@ -455,10 +451,50 @@ export const ReleasePlayerCustom = (props: {
|
|||
allowFullScreen={true}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-center w-full h-full">
|
||||
<MediaController className="relative w-full overflow-hidden">
|
||||
<div className="absolute flex flex-wrap w-full gap-2 top-2 left-2">
|
||||
{voiceover.selected && (
|
||||
<VoiceoverSelector
|
||||
availableVoiceover={voiceover.available}
|
||||
voiceover={voiceover.selected}
|
||||
setVoiceover={setVoiceover}
|
||||
release_id={props.id}
|
||||
/>
|
||||
)}
|
||||
{source.selected && (
|
||||
<SourceSelector
|
||||
availableSource={source.available}
|
||||
source={source.selected}
|
||||
setSource={setSource}
|
||||
release_id={props.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<HlsVideo
|
||||
className="object-contain h-full aspect-video"
|
||||
slot="media"
|
||||
src={playerProps.src}
|
||||
poster={playerProps.poster}
|
||||
defaultPlaybackRate={playbackRate}
|
||||
onRateChange={(e) => {
|
||||
// @ts-ignore
|
||||
setPlaybackRate(e.target.playbackRate || 1);
|
||||
}}
|
||||
/>
|
||||
<MediaControlBar>
|
||||
<MediaPlayButton></MediaPlayButton>
|
||||
<MediaSeekBackwardButton></MediaSeekBackwardButton>
|
||||
<MediaSeekForwardButton></MediaSeekForwardButton>
|
||||
<MediaTimeRange></MediaTimeRange>
|
||||
<MediaTimeDisplay showDuration></MediaTimeDisplay>
|
||||
<MediaMuteButton></MediaMuteButton>
|
||||
<MediaVolumeRange></MediaVolumeRange>
|
||||
</MediaControlBar>
|
||||
{episode.selected && source.selected && voiceover.selected && (
|
||||
<div className="w-full">
|
||||
<EpisodeSelector
|
||||
availableEpisodes={episode.available}
|
||||
episode={episode.selected}
|
||||
|
|
@ -468,8 +504,12 @@ export const ReleasePlayerCustom = (props: {
|
|||
voiceover={voiceover.selected}
|
||||
token={props.token}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</MediaController>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ interface Source {
|
|||
|
||||
const DropdownTrigger = ({ name }: Source) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1 cursor-pointer">
|
||||
<span className="w-6 h-6 iconify material-symbols--motion-play"></span>
|
||||
<p>{name}</p>
|
||||
<span className="w-6 h-6 iconify material-symbols--arrow-drop-down"></span>
|
||||
<div className="flex items-center gap-2 px-2 py-1 bg-black bg-opacity-75 rounded-lg cursor-pointer backdrop-blur-md">
|
||||
<span className="w-6 h-6 text-white iconify material-symbols--motion-play"></span>
|
||||
<p className="text-white">{name}</p>
|
||||
<span className="w-6 h-6 -ml-2 text-white iconify material-symbols--arrow-drop-down"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ interface Voiceover {
|
|||
|
||||
const DropdownTrigger = ({ icon, name, pinned }: Voiceover) => {
|
||||
return (
|
||||
<div className="flex items-center gap-2 cursor-pointer">
|
||||
<div className="flex items-center gap-2 px-2 py-1 bg-black bg-opacity-75 rounded-lg cursor-pointer backdrop-blur-md">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
{icon && <img alt="" className="w-6 h-6 rounded-full" src={icon}></img>}
|
||||
<p>{name}</p>
|
||||
<p className="text-white">{name}</p>
|
||||
{pinned && (
|
||||
<span className="h-6 bg-gray-700 dark:bg-gray-300 iconify material-symbols--push-pin"></span>
|
||||
<span className="h-6 bg-gray-300 iconify material-symbols--push-pin"></span>
|
||||
)}
|
||||
<span className="w-6 h-6 -ml-2 iconify material-symbols--arrow-drop-down"></span>
|
||||
<span className="w-6 h-6 -ml-2 text-white iconify material-symbols--arrow-drop-down"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue