Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: horizontal episodes scroll with mouse wheel

Browse source
This commit is contained in:
Kentai Radiquum 2024-11-20 23:17:15 +05:00
parent cd4ada5657
commit 447fadd19f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 61 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
app/components/ReleasePlayer/ReleasePlayer.tsx
View file

@ -5,6 +5,12 @@ import { useUserStore } from "#/store/auth";
import { Card, Dropdown, Button } from "flowbite-react"; import { Card, Dropdown, Button } from "flowbite-react";
import { ENDPOINTS } from "#/api/config"; import { ENDPOINTS } from "#/api/config";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/mousewheel";
import "swiper/css/scrollbar";
import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
const DropdownTheme = { const DropdownTheme = {
floating: { floating: {
@ -250,48 +256,63 @@ export const ReleasePlayer = (props: { id: number }) => {
></iframe> ></iframe>
</div> </div>
<div> <div>
<div className="flex gap-2 p-2 overflow-x-auto scrollbar-thin"> <Swiper
modules={[Navigation, Mousewheel, Scrollbar]}
spaceBetween={8}
slidesPerView={"auto"}
direction={"horizontal"}
mousewheel={{
enabled: true,
sensitivity: 2
}}
scrollbar={true}
allowTouchMove={true}
style={{
"--swiper-scrollbar-bottom": "0",
} as React.CSSProperties}
>
{episodeInfo.map((episode: any) => ( {episodeInfo.map((episode: any) => (
<Button <SwiperSlide key={`episode_${episode.position}`} style={{maxWidth: "fit-content"}}>
color={ <Button
selectedEpisode.position === episode.position color={
? "blue" selectedEpisode.position === episode.position
: "light" ? "blue"
} : "light"
theme={{ base: "min-w-fit disabled:opacity-100" }} }
key={`episode_${episode.position}`} theme={{ base: "w-fit disabled:opacity-100" }}
onClick={() => { onClick={() => {
setSelectedEpisode(episode); setSelectedEpisode(episode);
episode.is_watched = true; episode.is_watched = true;
_addToHistory(episode); _addToHistory(episode);
saveAnonEpisodeWatched( saveAnonEpisodeWatched(
props.id, props.id,
selectedSource.id, selectedSource.id,
selectedVoiceover.id, selectedVoiceover.id,
episode.position episode.position
); );
}} }}
disabled={selectedEpisode.position === episode.position} disabled={selectedEpisode.position === episode.position}
> >
{episode.name {episode.name
? episode.name ? episode.name
: `${ : `${
selectedSource.name != "Sibnet" selectedSource.name != "Sibnet"
? episode.position ? episode.position
: episode.position + 1 : episode.position + 1
} серия`} } серия`}
{(episode.is_watched || {(episode.is_watched ||
getAnonCurrentEpisodeWatched( getAnonCurrentEpisodeWatched(
props.id, props.id,
selectedSource.id, selectedSource.id,
selectedVoiceover.id, selectedVoiceover.id,
episode.position episode.position
)) && ( )) && (
<span className="w-5 h-5 ml-2 iconify material-symbols--check-circle"></span> <span className="w-5 h-5 ml-2 iconify material-symbols--check-circle"></span>
)} )}
</Button> </Button>
</SwiperSlide>
))} ))}
</div> </Swiper>
</div> </div>
</> </>
)} )}