{content?.map((item, index) => (
{item}
))}
{
if (musicTracks?.Items) {
handlePlayback(trackIndex, track, musicTracks.Items);
}
}}
>
{track.Name}
{track.HasLyrics && 
}
{track.Artists?.join(", ")}
{getRuntimeMusic(track.RunTimeTicks ?? 0)}
);
}
================================================
FILE: src/components/alphaSelector/alphaSelector.scss
================================================
.alpha-selector {
position: sticky;
top: 80px;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 4px;
margin-left: auto;
user-select: none;
z-index: 2;
}
.alpha-letter {
font-size: 12px;
line-height: 1;
padding: 6px 8px;
border-radius: 8px;
background: transparent;
color: rgba(255,255,255,0.7);
border: none;
cursor: pointer;
}
.alpha-letter.active {
background: rgba(255,255,255,0.12);
color: #fff;
}
.alpha-letter:hover {
background: rgba(255,255,255,0.08);
}
================================================
FILE: src/components/alphaSelector/index.tsx
================================================
import { getRouteApi } from "@tanstack/react-router";
import React, { useMemo } from "react";
import { useShallow } from "zustand/shallow";
import { useLibraryStateStore } from "@/utils/store/libraryState";
import "./alphaSelector.scss";
const libraryRoute = getRouteApi("/_api/library/$id");
export const AlphaSelector = React.memo(function AlphaSelector() {
const { id: currentLibraryId } = libraryRoute.useParams();
const { nameStartsWith } = useLibraryStateStore(
useShallow((s) => ({
nameStartsWith: s.libraries[currentLibraryId || ""]?.nameStartsWith,
})),
);
const updateLibrary = useLibraryStateStore((s) => s.updateLibrary);
const letters = useMemo(() => {
const arr = Array.from({ length: 26 }, (_, i) =>
String.fromCharCode(65 + i),
);
return ["All", ...arr];
}, []);
const handleSelect = (letter: string) => {
const value = letter === "All" ? undefined : letter;
if (currentLibraryId)
updateLibrary(currentLibraryId, { nameStartsWith: value });
};
return (
play_arrow
{track.IndexNumber ?? "-"}
{letters.map((l) => {
const active = (nameStartsWith || "All") === l;
return (
);
})}
);
});
export default AlphaSelector;
================================================
FILE: src/components/appBar/appBar.scss
================================================
.appBar {
// Limit transitions to cheaper properties; avoid animating box-shadow directly
transition: background-color $transition-time-fast;
padding: 0.8em ($page-margin - 1.7em);
z-index: 999 !important;
.flex {
// Avoid animating padding; it causes layout reflow on each frame.
transition: background-color $transition-time-fast;
// Avoid using will-change: scroll-position; it can degrade performance when misused
// will-change: opacity, transform;
border-radius: 1000px;
position: relative;
// Pseudo-element handles elevation shadow; we animate its opacity
&::after {
content: "";
position: absolute;
inset: -0.35em;
pointer-events: none;
border-radius: inherit;
@include glass-effect;
opacity: 0;
z-index: -1;
transition: all $transition-time-fast;
}
}
// Inner content wrapper that we can scale without causing layout reflow
.flex-inner {
transform-origin: top center;
transition: transform $transition-time-fast;
}
&.elevated{
.flex {
&::after {
opacity: 1;
}
}
// Apply a subtle scale to simulate shrink without layout changes
.flex-inner {
transform: scaleY(0.95);
}
}
&-avatar {
background: rgb(255 255 255 / 0.1) !important;
&-icon {
color: white;
}
}
&-text {
opacity: 0.7;
transition: opacity $transition-time-fast;
position: relative;
color: white;
text-decoration: none;
&::after {
content: "";
width: 100%;
height: 1.2px;
background: white;
opacity: 0.7;
position: absolute;
bottom: 4.6px;
left: 0;
transform: scaleX(0);
transition: transform $transition-time-fast,
background $transition-time-fast,
opacity $transition-time-fast;
}
&:hover {
opacity: 0.8;
&::after {
transform: scaleX(0.25);
opacity: 0.8;
}
}
&.active {
opacity: 1;
color: $clr-accent-default;
&::after {
transform: scaleX(0.5);
opacity: 1;
background: $clr-accent-default;
}
}
}
}
.library-drawer {
// Ensure the drawer paper itself gets the styling
&.MuiDrawer-paper {
width: 280px;
margin: 16px;
height: calc(100% - 32px) !important; // float in the middle
border-radius: 24px;
background: rgba(20, 20, 25, 0.75); // Darker, substantial base
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.4),
0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden; // Contain scrollbars
}
.MuiList-root {
padding: 8px; // Reduced from 16px
gap: 2px; // Reduced gap
}
.MuiDivider-root {
border-color: rgba(255, 255, 255, 0.1);
margin: 4px 12px; // Reduced margins
}
// Navigation Items
.MuiListItemButton-root {
border-radius: 12px !important; // Slightly smaller radius
padding: 8px 12px; // Reduced padding (was 12px 16px)
margin-bottom: 2px;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
color: rgba(255, 255, 255, 0.6);
&:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
transform: scale(1.02);
}
.material-symbols-rounded {
margin-right: 12px; // Reduced spacing
font-size: 22px; // Slightly smaller icons usually look better with less padding
transition: all 0.2s ease;
color: inherit;
}
.MuiListItemText-primary {
font-weight: 600;
font-size: 0.9rem; // Slightly smaller text
letter-spacing: 0.02em;
}
}
// Active State
.library-drawer-item.active {
.MuiListItemButton-root {
background: linear-gradient(90deg, rgba($clr-accent-default, 0.2), rgba($clr-accent-default, 0.05));
color: $clr-accent-default;
.material-symbols-rounded {
font-variation-settings: 'FILL' 1;
color: $clr-accent-default;
}
// Active Indicator Bar
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 24px;
width: 4px;
background: $clr-accent-default;
border-radius: 0 4px 4px 0;
}
}
}
// Custom Scrollbar for the drawer content
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
}
}
.appLoading {
opacity: 0;
}
================================================
FILE: src/components/appBar/appBar.tsx
================================================
import MuiAppBar from "@mui/material/AppBar";
import IconButton from "@mui/material/IconButton";
import useScrollTrigger from "@mui/material/useScrollTrigger";
import { useLocation, useNavigate } from "@tanstack/react-router";
import React, { useCallback, useMemo, useState } from "react";
import "./appBar.scss";
import { useShallow } from "zustand/shallow";
// removed search placeholder; library state now managed via zustand
import { useApiInContext } from "@/utils/store/api";
import { useCentralStore } from "@/utils/store/central";
import useHeaderStore from "@/utils/store/header";
import useSearchStore from "@/utils/store/search";
import BackButton from "../buttons/backButton";
import { UserAvatarMenu } from "../userAvatarMenu";
import { NavigationDrawer } from "./navigationDrawer";
const MemoizeBackButton = React.memo(BackButton);
const HIDDEN_PATHS = [
"/login",
"/setup",
"/server",
"/player",
"/error",
"/settings",
"/library",
"/search",
];
export const AppBar = () => {
const navigate = useNavigate();
const location = useLocation();
const toggleSearchDialog = useSearchStore(
useShallow((s) => s.toggleSearchDialog),
);
const display = !HIDDEN_PATHS.some(
(path) =>
(location.pathname.startsWith(path) &&
location.pathname !== "/player/audio") ||
location.pathname === "/",
);
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 20,
});
const [showDrawer, setShowDrawer] = useState(false);
const appBarStyling = useMemo(() => {
return {
backgroundColor: "transparent",
paddingRight: "0 !important",
};
}, []);
const _handleNavigateToSearch = useCallback(
() => navigate({ to: "/search", search: { query: "" } }),
[navigate],
);
const handleDrawerClose = useCallback(() => {
setShowDrawer(false);
}, []);
const handleDrawerOpen = useCallback(() => {
setShowDrawer(true);
}, []);
const handleNavigateToHome = useCallback(() => navigate({ to: "/home" }), []);
const handleNavigateToFavorite = useCallback(() => {
navigate({ to: "/favorite" });
}, []);
useHeaderStore(useShallow((s) => ({ pageTitle: s.pageTitle })));
if (!display) {
return null;
}
if (display) {
return (
<>
Close
account_circle
done
{(currentEpisode.data?.Items?.[0]?.UserData?.PlaybackPositionTicks ??
0) > 0 && (
{getRuntimeCompact(
(currentEpisode.data?.Items?.[0]?.RunTimeTicks ?? 0) -
(currentEpisode.data?.Items?.[0]?.UserData
?.PlaybackPositionTicks ?? 0),
)}{" "}
left
)}
);
}
return (
{(item.UserData?.PlaybackPositionTicks ?? 0) > 0 && (
{getRuntimeCompact(
(item.RunTimeTicks ?? 0) -
(item.UserData?.PlaybackPositionTicks ?? 0),
)}{" "}
left
)}
);
};
export default PlayButton;
================================================
FILE: src/components/buttons/playNextButton.tsx
================================================
import { useApiInContext } from "@/utils/store/api";
import { playItemFromQueue } from "@/utils/store/playback";
import useQueue from "@/utils/store/queue";
import { getUserApi } from "@jellyfin/sdk/lib/utils/api/user-api";
import { IconButton } from "@mui/material";
import { useMutation, useQuery } from "@tanstack/react-query";
import React from "react";
const PlayNextButton = () => {
const api = useApiInContext((s) => s.api);
const user = useQuery({
queryKey: ["user"],
queryFn: async () => {
if (!api) return;
const result = await getUserApi(api).getCurrentUser();
return result.data;
},
});
const handlePlayNext = useMutation({
mutationKey: ["playNextButton"],
mutationFn: () => playItemFromQueue("next", user.data?.Id, api),
onError: (error) => console.error(error),
});
const [queueItems, currentItemIndex] = useQueue((state) => [
state.tracks,
state.currentItemIndex,
]);
return (
-
{/* Current Item */}
{queueItems[currentItemIndex] && (
{/* @ts-ignore */}
{quickConnectEnabled.data?.data
? "Use Quick Connect"
: "Quick Connect Disabled"}
);
};
export default QuickConnectButton;
================================================
FILE: src/components/buttons/trailerButton.tsx
================================================
import type { MediaUrl } from "@jellyfin/sdk/lib/generated-client";
import { Dialog, IconButton } from "@mui/material";
import React, { useState } from "react";
import ReactPlayer from "react-player";
type TrailerButtonType = {
trailerItem: MediaUrl[];
disabled: boolean;
};
const TrailerButton = (props: TrailerButtonType) => {
const [dialog, setDialog] = useState(false);
return (
done
{item.UserData?.UnplayedItemCount}
{overrideIcon
? getTypeIcon(overrideIcon)
: getTypeIcon(item.Type ?? "universal")}
{inView && (
{cardTitle}
{cardCaption}
setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
>
);
};
export default React.memo(Carousel);
================================================
FILE: src/components/carousel/tickers.tsx
================================================
import type { BaseItemKind } from "@jellyfin/sdk/lib/generated-client";
import { Typography } from "@mui/material";
import React from "react";
import { getTypeIcon } from "../utils/iconsCollection";
type CarouselTickersProps = {
imageUrl?: string | undefined | null;
itemName: string;
itemYear: string;
onTickerClick: (index: number) => void;
index: number;
isActive: boolean;
itemType: BaseItemKind;
};
const CarouselTickers = React.memo(
({
imageUrl,
itemName,
itemYear,
onTickerClick,
index,
isActive,
itemType,
}: CarouselTickersProps) => {
const handleClick = React.useCallback(() => {
onTickerClick(index);
}, [index, onTickerClick]);
return (
{content.map((item, index) => (
{
tickerRefs.current[index] = el;
}}
className="carousel-ticker-wrapper"
>
))}
{imageUrl ? (
) : (
{itemName}
{itemYear}
);
},
);
export default CarouselTickers;
================================================
FILE: src/components/carouselSlide/index.tsx
================================================
import {
type BaseItemDto,
BaseItemKind,
} from "@jellyfin/sdk/lib/generated-client";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import { green, red, yellow } from "@mui/material/colors";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { useNavigate } from "@tanstack/react-router";
import { motion } from "motion/react";
import React from "react";
import { endsAt, getRuntime } from "@/utils/date/time";
import { useApiInContext } from "@/utils/store/api";
import { useCarouselStore } from "@/utils/store/carousel";
import { useCentralStore } from "@/utils/store/central";
import LikeButton from "../buttons/likeButton";
import MarkPlayedButton from "../buttons/markPlayedButton";
import PlayButton from "../buttons/playButton";
import { getTypeIcon } from "../utils/iconsCollection";
const textVariants = {
initial: (direction: string) => ({
x: direction === "right" ? 40 : -40,
opacity: 0,
}),
animate: {
x: 0,
opacity: 1,
transition: {
duration: 0.35,
ease: [0.2, 0, 0, 1],
},
},
exit: (direction: string) => ({
x: direction === "right" ? -40 : 40,
opacity: 0,
transition: {
duration: 0.2,
ease: "easeInOut",
},
}),
};
const CarouselSlide = ({ item }: { item: BaseItemDto }) => {
const api = useApiInContext((s) => s.api);
const navigate = useNavigate();
const user = useCentralStore((s) => s.currentUser);
const handleMoreInfo = () => {
if (item.Id) {
switch (item.Type) {
case BaseItemKind.BoxSet:
navigate({ to: "/boxset/$id", params: { id: item.Id } });
break;
case BaseItemKind.Episode:
navigate({ to: "/episode/$id", params: { id: item.Id } });
break;
case BaseItemKind.MusicAlbum:
navigate({ to: "/album/$id", params: { id: item.Id } });
break;
case BaseItemKind.MusicArtist:
navigate({ to: "/artist/$id", params: { id: item.Id } });
break;
case BaseItemKind.Person:
navigate({ to: "/person/$id", params: { id: item.Id } });
break;
case BaseItemKind.Series:
navigate({ to: "/series/$id", params: { id: item.Id } });
break;
case BaseItemKind.Playlist:
navigate({ to: "/playlist/$id", params: { id: item.Id } });
break;
default:
navigate({ to: "/item/$id", params: { id: item.Id } });
break;
}
}
};
const [animationDirection] = useCarouselStore((state) => [state.direction]);
return (
{" "}
{getTypeIcon(itemType)}
)}
{getTypeIcon(item.Type ?? "Movie")}
)}
{
e.currentTarget.style.opacity = "1";
}}
/>
)}
star
50 ? green[400] : red[400],
}}
>
{item.CriticRating > 50 ? "thumb_up" : "thumb_down"}
{scrollTargetRef && (
{item.ImageTags?.Primary ? (
{
e.currentTarget.style.opacity = "1";
}}
className="item-hero-image"
/>
) : (
{getTypeIcon(item.Type ?? "Movie")}
)}
{isEpisode && logoId ? (
{logo}
) : (
logo
)}
{isEpisode && (
{item.ParentIndexNumber !== undefined &&
item.IndexNumber !== undefined
? `S${item.ParentIndexNumber}:E${item.IndexNumber} - `
: ""}
{item.Name}
)}
{mediaQualityInfo?.isUHD && (
)}
{mediaQualityInfo?.isHD && (
)}
{mediaQualityInfo?.isSD && (
)}
{mediaQualityInfo?.isSDR && (
)}
{mediaQualityInfo?.isHDR &&
!mediaQualityInfo?.isHDR10 &&
!mediaQualityInfo?.isHDR10Plus && (
)}
{mediaQualityInfo?.isHDR10 && (
)}
{item.PremiereDate && (
{item.ProductionYear ?? ""}
)}
{item.OfficialRating && (
{Math.round(item.CommunityRating * 10) / 10}
)}
{item.CriticRating && (
{item.CriticRating}
)}
{item.RunTimeTicks && (
{getRuntime(item.RunTimeTicks)}
)}
{item.RunTimeTicks && (
{endsAt(
item.RunTimeTicks - (item.UserData?.PlaybackPositionTicks ?? 0),
)}
)}
{item.Genres?.slice(0, 4).join(" / ")}
{mediaQualityInfo && (
{mediaQualityInfo?.isHDR10Plus && (
)}
{mediaQualityInfo.isDts && (
)}
{mediaQualityInfo.isDtsHDMA && (
)}
{mediaQualityInfo.isAtmos && mediaQualityInfo.isDolbyVision && (
)}
{mediaQualityInfo.isAtmos && !mediaQualityInfo.isDolbyVision && (
)}
{mediaQualityInfo.isDolbyVision && !mediaQualityInfo.isAtmos && (
)}
{mediaQualityInfo.isTrueHD && (
)}
{mediaQualityInfo.isDD && (
)}
)}
{children}
star
50 ? green[400] : red[400],
}}
>
{item.CriticRating > 50 ? "thumb_up" : "thumb_down"}
{!!album.ImageTags?.Primary && (
{
e.currentTarget.style.opacity = "1";
}}
/>
)}
{album.ProductionYear}
{album.Name}
{albumTracks.isSuccess && (albumTracks.data?.Items?.length ?? 0) > 0 && (
{
e.currentTarget.style.opacity = "1";
}}
/>
album
tag
Title
Duration
{albumTracks.data?.Items?.map((track, index) => (
menu
home
sort
search
favorite
{items.isSuccess && itemCount === 0 ? (
) : (
);
};
export default LibraryItemsGrid;
================================================
FILE: src/components/libraryItemsGrid/libraryItemsGrid.scss
================================================
// Overrides for virtualized library items layout to prevent horizontal overflow
.library-items-container.virtualized {
overflow-x: hidden;
box-sizing: border-box;
width: 100%;
display: block !important; // override grid from route styles
padding: 0 !important; // override padding from route styles
position: relative; // required for absolutely positioned rows
gap: 0 !important;
justify-items: normal !important;
align-content: stretch !important;
> .card {
max-width: none !important;
}
// Ensure no unintended padding expands width
padding-right: 0;
padding-left: 0;
.card {
margin-right: 0 !important;
margin-bottom: 0.6em !important; // keep a consistent vertical rhythm
}
.card-image-container {
// Remove box shadow spread from affecting layout width calculation
box-sizing: border-box;
}
}
// When page has audio-playing class, avoid extra bottom padding causing scrollbars
.audio-playing .library-items-container.virtualized {
padding-bottom: 8em; // mimic original intent without affecting width
}
================================================
FILE: src/components/listItemLink/index.tsx
================================================
import {
ListItem,
ListItemButton,
type ListItemProps,
ListItemText,
} from "@mui/material";
import { createLink, Link } from "@tanstack/react-router";
import React, { forwardRef, type ReactNode } from "react";
interface MUIListItemLinkProps extends ListItemProps<"a"> {
icon?: ReactNode;
primary: string;
className?: string;
}
const CreatedListItemLink = forwardRef
sentiment_dissatisfied
No items to show
Try adjusting filters, sort, or the A–Z selector.
{virtualItems.map((row) => {
const startIndex = row.index * columns;
const endIndex = Math.min(startIndex + columns, itemCount);
return (
)}
{
if (el) virtualizer.measureElement(el);
}}
>
{items.data?.Items?.slice(startIndex, endIndex).map(
(item: BaseItemDto, localIndex: number) => {
return (
);
})}
{props.icon}
{icon}
music_note
{item.HasLyrics && (
)}
{item.ArtistItems?.map((artist, index) => (
{artist.Name}
{index !== (item.ArtistItems?.length ?? 0) - 1 && (
,{" "}
)}
))}
{isAnimating && (
);
};
================================================
FILE: src/components/notices/emptyNotice/emptyNotice.tsx
================================================
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { yellow } from "@mui/material/colors";
import React from "react";
export const EmptyNotice = ({ extraMsg }: { extraMsg?: string }) => {
return (
sentiment_dissatisfied
error
{item?.ImageTags?.Primary ? (
) : (
{item.Name}
{item.Overview}
}
>
Play Now
{getTypeIcon(item.Type)}
)}
{lyrics.data.Lyrics.map((lyric, index) => {
const isActive =
hasSyncedLyrics &&
secToTicks(currentTime) >= (lyric.Start ?? 0) &&
secToTicks(currentTime) <
(lyrics.data?.Lyrics?.[index + 1]?.Start ??
Number.POSITIVE_INFINITY);
return (
{lyric.Text}
);
})}
{!hasSyncedLyrics && (
info
Synced lyrics not available
)}
close
{playing ? "pause" : "play_arrow"}
{isMuted ? "volume_mute" : "volume_up"}
{queue.map((track, index) => (
removeFromQueue(index)}
isActive={currentTrackIndex === index}
/>
))}
{onRetry && (
)}
{onExit && (
)}
Video ID: {itemId}
Media Source ID: {mediaSourceId}
Play Session ID: {playsessionId}
Playback Method:{" "}
{mediaSource.playMethod}
Container: {mediaSource.container}
Video Codec: {mediaSource.videoCodec}
Audio Codec: {mediaSource.audioCodec}
Bitrate:{" "}
{mediaSource.bitrate
? `${(mediaSource.bitrate / 1000000).toFixed(2)} Mbps`
: "-"}
Stream URL:{" "}
{playbackStream}
Resolution: {videoStats.resolution}
Volume: {Math.round(volume * 100)}%
Buffer Health: {videoStats.buffered}
Dropped Frames:{" "}
{videoStats.droppedFrames} / {videoStats.totalFrames}
Is Buffering: {isBuffering ? "Yes" : "No"}
{playerVolume > 0.7 ? "volume_up" : "volume_down"}
{trickplayStyle && (
)}
);
};
const virtualAnchorEl = useMemo(() => {
return {
getBoundingClientRect: () => {
return new DOMRect(
positionRef.current.x,
areaRef.current?.getBoundingClientRect().y ?? 0,
0,
0,
);
},
};
}, []);
return (
{chapterName && (
{chapterName}
)}
{ticksDisplay(value)}
setShowVolumeControl(false)}
>
{showVolumeControl && (
{
const val = Array.isArray(newValue)
? newValue[0]
: newValue;
setVolume(val);
}}
sx={{ width: 100, color: "white" }}
/>
)}
setShowVolumeControl(true)}
>
{isPlayerMuted
? "volume_off"
: volume < 0.4
? "volume_down"
: "volume_up"}
drag_indicator
)}
{queueItem.Type && getTypeIcon(queueItem.Type)}
)}
{active && (
equalizer
)}
{!active && onPlay && (
drag_handle
{track.Name}
{track.Artists?.join(", ")}
{getRuntimeMusic(track.RunTimeTicks ?? 0)}
{onRemove && (
close
)}
);
};
export default QueueTrack;
================================================
FILE: src/components/routerLoading/index.tsx
================================================
import { CircularProgress } from "@mui/material";
import { useRouterState } from "@tanstack/react-router";
import React from "react";
export default function RouterLoading() {
const routeLoading = useRouterState().isLoading;
if (!routeLoading) return null;
return (
{Array.from({ length: 12 }).map((_, index) => (
{Array.from(new Array(18)).map((item, index) => (
);
};
export default LibraryItemsSkeleton;
================================================
FILE: src/components/skeleton/seasonSelector.tsx
================================================
import Divider from "@mui/material/Divider";
import Grid2 from "@mui/material/Grid";
import Skeleton from "@mui/material/Skeleton";
import Typography from "@mui/material/Typography";
import React from "react";
import EpisodeSkeleton from "./episode";
export const SeasonSelectorSkeleton = () => {
return (
// home
;
case BaseItemKind.Audio:
return mic
;
case BaseItemKind.AudioBook:
return speech_to_text
;
case BaseItemKind.Book:
return book
;
case "boxsets":
case BaseItemKind.BoxSet:
return video_library
;
case "livetv":
case BaseItemKind.TvProgram:
case BaseItemKind.TvChannel:
case BaseItemKind.Program:
case BaseItemKind.Recording:
case BaseItemKind.LiveTvChannel:
case BaseItemKind.LiveTvProgram:
case BaseItemKind.ChannelFolderItem:
case BaseItemKind.Channel:
return (
settings_input_antenna
);
case "tvshows":
case BaseItemKind.Season:
case BaseItemKind.Series:
case BaseItemKind.Episode:
return tv_gen
;
case "playlists":
case BaseItemKind.Playlist:
case BaseItemKind.PlaylistsFolder:
case BaseItemKind.ManualPlaylistsFolder:
return queue_music
;
case "movies":
case BaseItemKind.Movie:
return movie
;
case BaseItemKind.MusicAlbum:
return album
;
case BaseItemKind.MusicArtist:
return artist
;
case BaseItemKind.Genre:
case BaseItemKind.MusicGenre:
return domino_mask
;
case "musicvideos":
case BaseItemKind.MusicVideo:
return music_video
;
case "User":
case BaseItemKind.Person:
return person
;
case BaseItemKind.Photo:
return image
;
case "photos":
case BaseItemKind.PhotoAlbum:
return photo_library
;
case "universal":
case BaseItemKind.Studio:
return category
;
case "trailers":
case BaseItemKind.Trailer:
return smart_display
;
case BaseItemKind.Video:
return theaters
;
case "music":
return library_music
;
case "books":
return library_books
;
case "folders":
return folder
;
default:
return description
;
}
};
================================================
FILE: src/global.d.ts
================================================
// Fix image imports
declare module "*.png" {
const value: any;
export = value;
}
declare module "*.svg" {
const value: any;
export = value;
}
declare module "*.jpg" {
const value: any;
export = value;
}
================================================
FILE: src/main.tsx
================================================
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
// Import the generated route tree
import { routeTree } from "./routeTree.gen";
import {
ApiProvider,
initializeApi,
useApiInContext,
} from "./utils/store/api";
import { CentralProvider, useCentralStore } from "./utils/store/central";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
networkMode: "always",
},
mutations: {
networkMode: "always",
},
},
});
//TODO: Need help implementing modal routes in TanStack Router
// const SearchMask = createRouteMask({
// routeTree,
// from: "/searchModal,
// to: "/search",
// params: true,
// });
// Create a new router instance
const router = createRouter({
routeTree,
context: {
api: undefined!,
createApi: undefined!,
user: undefined,
jellyfinSDK: undefined!,
fetchCurrentUser: undefined!,
queryClient,
},
defaultPreload: false,
defaultPreloadStaleTime: 0,
defaultViewTransition: true,
scrollRestoration: true,
scrollRestorationBehavior: "auto",
});
// Register the router instance for type safety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}
function ProviderWrapper() {
const [api, createApi, jellyfinSDK] = useApiInContext((s) => [
s.api,
s.createApi,
s.jellyfin,
]);
const [user, fetchCurrentUser] = useCentralStore((s) => [
s.currentUser,
s.fetchCurrentUser,
]);
useEffect(() => {
if (api?.accessToken && !user?.Id) {
fetchCurrentUser(api);
}
}, [api, user, fetchCurrentUser]);
useEffect(() => {
if (api) {
console.log(`API is set - Route ${window.location.pathname}`);
console.log(api);
} else {
console.log(`API is not set - Route ${window.location.pathname}`);
}
router.invalidate(); // This is a hack to force the router to re-evaluate the routes and re-run the beforeLoad functions
}, [api?.accessToken]);
return (
{/* @ts-ignore - Using Link as component */}
artist
}
label={item.data.AlbumArtist}
/>
{item.data.ProductionYear}
{(musicTracks.data?.TotalRecordCount ?? 0) > 1
? `${musicTracks.data?.TotalRecordCount} songs`
: "Single"}
{getRuntimeCompact(item.data.CumulativeRunTimeTicks ?? 0)}
{allDiscs.length > 1 ? (
allDiscs.map((disc) => (
album
Disc {disc}
tag
Title
Duration
{musicTracks.data?.Items?.map(
(track, index) =>
track.ParentIndexNumber === disc && (
tag
Title
Duration
{musicTracks.data?.Items?.map((track, index) => (
{item.data.ImageTags?.Primary ? (
) : (
{getTypeIcon("MusicAlbum")}
)}
{item.data.GenreItems?.map((genre) => (
{value === index && {children} }
);
}
export const Route = createFileRoute("/_api/artist/$id")({
component: ArtistTitlePage,
});
function ArtistTitlePage() {
const { id } = Route.useParams();
const api = Route.useRouteContext().api;
const user = useCentralStore((s) => s.currentUser);
const item = useQuery({
queryKey: ["item", id],
queryFn: async () => {
if (!api) return null;
const result = await getUserLibraryApi(api).getItem({
userId: user?.Id,
itemId: id,
});
return result.data;
},
enabled: !!user?.Id,
networkMode: "always",
refetchOnWindowFocus: true,
});
const artistDiscography = useQuery({
queryKey: ["item", id, "artist", "discography"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
albumArtistIds: [id],
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
sortOrder: [SortOrder.Descending],
recursive: true,
includeItemTypes: [BaseItemKind.MusicAlbum],
userId: user?.Id,
fields: [ItemFields.Overview],
});
return result.data;
},
});
const artistSongs = useQuery({
queryKey: ["item", id, "artist", "songs"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
artistIds: [id],
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
sortOrder: [SortOrder.Ascending],
recursive: true,
includeItemTypes: [BaseItemKind.Audio],
userId: user?.Id,
fields: [ItemFields.Overview],
});
return result.data;
},
});
const artistAppearances = useQuery({
queryKey: ["item", id, "artist", "appearences"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
contributingArtistIds: [id],
excludeItemIds: [id],
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
sortOrder: [SortOrder.Descending],
recursive: true,
includeItemTypes: [BaseItemKind.MusicAlbum],
userId: user?.Id,
});
return result.data;
},
});
const artistTabs = [
{ title: "Discography", data: artistDiscography },
{ title: "Songs", data: artistSongs },
{ title: "Appearances", data: artistAppearances },
];
const [activeArtistTab, setActiveArtistTab] = useState(0);
useLayoutEffect(() => {
if (
artistDiscography.isSuccess &&
artistSongs.isSuccess &&
artistAppearances.isSuccess &&
artistDiscography.data &&
artistSongs.data &&
artistAppearances.data
) {
if (artistDiscography.data.TotalRecordCount !== 0) {
setActiveArtistTab(0);
} else if (artistSongs.data.TotalRecordCount !== 0) {
setActiveArtistTab(1);
} else if (artistAppearances.data.TotalRecordCount !== 0) {
setActiveArtistTab(2);
}
}
}, [
artistDiscography.isSuccess,
artistSongs.isSuccess,
artistAppearances.isSuccess,
]);
const [animationDirection, setAnimationDirection] = useState("forward");
const { setBackdrop } = useBackdropStore();
useEffect(() => {
if (item.isSuccess && item.data) {
setBackdrop(`${api?.basePath}/Items/${item.data.Id}/Images/Backdrop`);
}
}, [item.isSuccess]);
const scrollTargetRef = useRef
{item.data.ExternalUrls?.map((url) => (
{item.data.PremiereDate && (
Born
{new Date(item.data.PremiereDate).toDateString()}
)}
{item.data.EndDate && (
Death
{new Date(item.data.EndDate).toDateString()}
)}
{item.data.ExternalUrls?.map((url) => (
{item.data.RemoteTrailers && (
{videoTracks.length > 0 && (
setSelectedVideoTrack(Number(e.target.value))}
>
{videoTracks.map((track) => (
))}
)}
{audioTracks.length > 0 && (
setSelectedAudioTrack(Number(e.target.value))}
>
{audioTracks.map((track) => (
))}
)}
{subtitleTracks.length > 0 && (
setSelectedSubtitleTrack(Number(e.target.value))
}
>
{subtitleTracks.map((track) => (
))}
)}
{item.data.ExternalUrls?.map((url) => (
{actors.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{writers.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{directors.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{producers.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{tabValue === "overview" && (
)}
{availableSections.map(
(section) =>
tabValue === section.id && (
),
)}
{availableSections.map((section) => (
{section.query.data?.Items?.map(section.renderCard)}
))}
{availableSections.length === 0 && (
No favorites yet
Mark items as favorite to see them here.
)}
{section.query.data?.Items?.map(section.renderCard)}
{item.data.RemoteTrailers && (
{(item.data.Taglines?.length ?? 0) > 0 && (
{item.data.Taglines?.[0]}
)}
{videoTracks.length > 0 && (
setSelectedVideoTrack(Number(e.target.value))}
>
{videoTracks.map((track) => (
))}
)}
{audioTracks.length > 0 && (
setSelectedAudioTrack(Number(e.target.value))}
>
{audioTracks.map((track) => (
))}
)}
{subtitleTracks.length > 0 && (
setSelectedSubtitleTrack(Number(e.target.value))
}
>
{subtitleTracks.map((track) => (
))}
)}
{item.data.ExternalUrls?.map(
(url) =>
url.Url &&
url.Name && (
{actors.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{writers.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{directors.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{producers.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{user.PrimaryImageTag ? (
) : (
)}
) : (
info
Notice
{value === index &&
);
}
export const Route = createFileRoute("/_api/person/$id")({
component: PersonTitlePage,
});
function PersonTitlePage() {
const { id } = Route.useParams();
const api = useApiInContext((s) => s.api);
const user = useCentralStore((s) => s.currentUser);
const item = useQuery({
queryKey: ["item", id],
queryFn: async () => {
if (!api) return null;
const result = await getUserLibraryApi(api).getItem({
userId: user?.Id,
itemId: id,
});
return result.data;
},
enabled: !!user?.Id,
networkMode: "always",
refetchOnWindowFocus: true,
});
const personMovies = useQuery({
queryKey: ["item", id, "personMovies"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
userId: user?.Id,
personIds: [id],
includeItemTypes: [BaseItemKind.Movie],
recursive: true,
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
sortOrder: ["Descending"],
excludeLocationTypes: [LocationType.Virtual],
});
return result.data;
},
networkMode: "always",
});
const personShows = useQuery({
queryKey: ["item", id, "personShows"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
userId: user?.Id,
personIds: [id],
includeItemTypes: [BaseItemKind.Series],
recursive: true,
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
sortOrder: ["Descending"],
excludeLocationTypes: [LocationType.Virtual],
});
return result.data;
},
networkMode: "always",
});
const personBooks = useQuery({
queryKey: ["item", id, "personBooks"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
userId: user?.Id,
personIds: [id],
includeItemTypes: [BaseItemKind.Book],
recursive: true,
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
sortOrder: ["Descending"],
excludeLocationTypes: [LocationType.Virtual],
});
return result.data;
},
networkMode: "always",
});
const personPhotos = useQuery({
queryKey: ["item", id, "personPhotos"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
userId: user?.Id,
personIds: [id],
includeItemTypes: [BaseItemKind.Photo],
recursive: true,
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
excludeLocationTypes: [LocationType.Virtual],
});
return result.data;
},
networkMode: "always",
});
const personEpisodes = useQuery({
queryKey: ["item", id, "personEpisodes"],
queryFn: async () => {
if (!api) return null;
const result = await getItemsApi(api).getItems({
userId: user?.Id,
personIds: [id],
includeItemTypes: [BaseItemKind.Episode],
recursive: true,
fields: ["SeasonUserData", "Overview"],
sortBy: ["PremiereDate", "ProductionYear", "SortName"],
excludeLocationTypes: [LocationType.Virtual],
});
return result.data;
},
networkMode: "always",
});
const [activePersonTab, setActivePersonTab] = useState(0);
const personTabs = [
{
title: "Movies",
data: personMovies,
queryKey: ["item", id, "personMovies"],
},
{
title: "TV Shows",
data: personShows,
queryKey: ["item", id, "personShows"],
},
{
title: "Books",
data: personBooks,
queryKey: ["item", id, "personBooks"],
},
{
title: "Photos",
data: personPhotos,
queryKey: ["item", id, "personPhotos"],
},
{
title: "Episodes",
data: personEpisodes,
queryKey: ["item", id, "personEpisodes"],
},
];
const setBackdrop = useBackdropStore((s) => s.setBackdrop);
useLayoutEffect(() => {
if (
personMovies.isSuccess &&
personShows.isSuccess &&
personBooks.isSuccess &&
personPhotos.isSuccess &&
personEpisodes.isSuccess
) {
if (personMovies.data?.TotalRecordCount !== 0) {
setActivePersonTab(0);
} else if (personShows.data?.TotalRecordCount !== 0) {
setActivePersonTab(1);
} else if (personBooks.data?.TotalRecordCount !== 0) {
setActivePersonTab(2);
} else if (personPhotos.data?.TotalRecordCount !== 0) {
setActivePersonTab(3);
} else if (personEpisodes.data?.TotalRecordCount !== 0) {
setActivePersonTab(4);
}
}
setBackdrop("", "");
}, [
personMovies.isSuccess,
personShows.isSuccess,
personBooks.isSuccess,
personPhotos.isSuccess,
personEpisodes.isSuccess,
]);
const [animationDirection, setAnimationDirection] = useState("forward");
const pageRef = useRef(null);
if (item.isPending) {
return (
{children}
}
{item.data.ExternalUrls?.map(
(url) =>
url.Name &&
url.Url &&
{item.data.PremiereDate && (
Birth
{new Date(item.data.PremiereDate).toDateString()}
)}
{item.data.EndDate && (
Death
{new Date(item.data.EndDate).toDateString()}
)}
{imageUrl ? (
) : (
music_note
)}
{imageUrl && (
)}
{tabValue === 0 && queue && (
setCurrentIndex(index)}
key={item?.Id ?? "noPhoto"}
className={
index === currentIndex ? "photos-preview active" : "photos-preview"
}
>
)),
[photos, currentIndex],
);
const handlePhotosChangePrev = useCallback(() => {
setCurrentIndex(currentIndex - 1);
}, [currentIndex]);
const handlePhotosChangeNext = useCallback(() => {
setCurrentIndex(currentIndex + 1);
}, [currentIndex]);
const [contextMenu, setContextMenu] = useState<{
mouseX: number;
mouseY: number;
} | null>(null);
const handleShowContextMenu = (e: MouseEvent) => {
e.preventDefault();
if (contextMenu === null) {
setContextMenu({ mouseX: e.clientX + 2, mouseY: e.clientY - 6 });
} else {
setContextMenu(null);
}
};
const handleContextMenuClose = useCallback(() => {
setContextMenu(null);
}, []);
const handleImageDownload = useCallback(async () => {
const pathToSave = await save({
filters: [
{
name: "Image",
extensions: ["png", "jpeg"],
},
],
});
if (pathToSave) {
download(
`${api?.basePath}/Items/${currentPhoto?.Id}/Download?api_key=${api?.accessToken}`,
pathToSave,
);
enqueueSnackbar("Image download queued.", { variant: "info" });
}
}, [currentIndex]);
return (
{allPhotos}
tag
Title
Duration
{musicTracks.data?.Items?.map((track, index) => (
{item.data.ImageTags?.Primary ? (
) : (
{getTypeIcon("Playlist")}
)}
{item.data.GenreItems?.map((genre) => (
{debouncedSearchTerm ? (
movie
music_note
tv
Explore your library
Search for movies, tv shows, music, people and more.
)}
menu
home
favorite
{item.data.RemoteTrailers && (
{(item.data.Taglines?.length ?? 0) > 0 && (
{item.data.Taglines?.[0]}
)}
{item.data.ExternalUrls?.map(
(url) =>
url.Url &&
url.Name && (
{actors?.length > 0 && (
Actors
)}
{writers.length > 0 && (
Writers
)}
{directors.length > 0 && (
Directors
)}
{producers.length > 0 && (
Producers
)}
{actors.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{writers.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{directors.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{producers.map((actor) => (
{actor.PrimaryImageTag ? (
) : (
{actor.Name}
{actor.Role}
))}
{getTypeIcon("Person")}
)}
{currentSeasonItem.isSuccess && (
{
const seasonIndex = Number(e.target.value);
if (
!Number.isNaN(seasonIndex) &&
Number.isFinite(seasonIndex)
) {
setCurrentSeason(seasonIndex);
sessionStorage.setItem(
`season-${item.data?.Id}`,
seasonIndex.toString(),
);
}
}}
select
SelectProps={{
MenuProps: {
disableScrollLock: true,
},
}}
size="small"
>
{seasons.data?.Items?.map((season, index) => {
return (
);
})}
{episodes.isPending ? (
navigate({
to: "/episode/$id",
params: { id: episode.Id ?? "" },
})
}
initial={{
transform: "translateY(10px)",
opacity: 0,
}}
whileInView={{
opacity: 1,
transform: "translateY(0px)",
}}
viewport={{
once: true,
}}
transition={{
duration: 0.2,
ease: "backInOut",
}}
style={{
width: "100%",
}}
className="item-detail-episode"
>
{episode.IndexNumberEnd
? `${episode.IndexNumber} / ${episode.IndexNumberEnd}`
: (episode.IndexNumber ?? 0)}
{episode.Name}
{episode.Overview}
);
})
)}
tv_gen
{episode.PremiereDate && (
{getRuntimeCompact(episode.RunTimeTicks ?? 0)}
{/* About */}
v{version}
Server Name
{systemInfo.data.ServerName}
Jellyfin Version
{systemInfo.data.Version}
Update Available
{updateInfo.data
? `v${updateInfo.data.version}`
: "No update available."}
Links
https://github.com/prayag17/Blink
https://jellyfin.org
volunteer_activism
Support
);
}
================================================
FILE: src/routes/_api/settings/changeServer/index.tsx
================================================
import {
alpha,
Button,
Card,
CardActions,
CardContent,
Chip,
Grid,
IconButton,
Typography,
useTheme,
} from "@mui/material";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { useSnackbar } from "notistack";
import React, { useState } from "react";
import AddServerDialog from "@/components/addServerDialog";
import CircularPageLoadingAnimation from "@/components/circularPageLoadingAnimation";
import {
delServer,
getAllServers,
getDefaultServer,
setDefaultServer,
} from "@/utils/storage/servers";
import { delUser } from "@/utils/storage/user";
import { useApiInContext } from "@/utils/store/api";
export const Route = createFileRoute("/_api/settings/changeServer/")({
component: ChangeServerRoute,
});
function ChangeServerRoute() {
const _theme = useTheme();
const queryClient = useQueryClient();
const createApi = useApiInContext((s) => s.createApi);
const { enqueueSnackbar } = useSnackbar();
const [addServerDialogOpen, setAddServerDialogOpen] = useState(false);
const serversQuery = useQuery({
queryKey: ["servers"],
queryFn: async () => {
return await getAllServers();
},
});
const activeServerQuery = useQuery({
queryKey: ["activeServer"],
queryFn: async () => {
return await getDefaultServer();
},
});
const handleConnect = async (serverId: string) => {
try {
// Clear current user when switching servers to force login/user fetch
await delUser();
await setDefaultServer(serverId);
const servers = await getAllServers();
const server = servers.find((s) => s.id === serverId);
if (server) {
createApi(server.address);
}
// Reload the page to reset API context and states
window.location.href = "/";
} catch (error) {
console.error("Failed to switch server", error);
enqueueSnackbar("Failed to switch server", { variant: "error" });
}
};
const handleDelete = async (serverId: string) => {
try {
await delServer(serverId);
queryClient.invalidateQueries({ queryKey: ["servers"] });
enqueueSnackbar("Server removed", { variant: "success" });
} catch (error) {
console.error("Failed to delete server", error);
enqueueSnackbar("Failed to delete server", { variant: "error" });
}
};
if (serversQuery.isLoading || activeServerQuery.isLoading) {
return
dns
add
report
Error connecting server.
Check your internet connection or contact your server administrator
);
default:
return Error
;
}
}
================================================
FILE: src/routes/index.tsx
================================================
import { getDefaultServer } from "@/utils/storage/servers";
import { getUser } from "@/utils/storage/user";
import { createFileRoute, redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
beforeLoad: async () => {
const currentServerId = await getDefaultServer();
const userOnDisk = await getUser();
if (currentServerId) {
if (userOnDisk) {
throw redirect({ to: "/home" });
}
throw redirect({ to: "/login" });
}
throw redirect({ to: "/setup/server/add" });
},
});
================================================
FILE: src/routes/setup/server.add.tsx
================================================
import LoadingButton from "@mui/lab/LoadingButton";
import { yellow } from "@mui/material/colors";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useMutation } from "@tanstack/react-query";
import { useSnackbar } from "notistack";
import React, { type FormEvent, useState } from "react";
import { setDefaultServer, setServer } from "@/utils/storage/servers";
import { jellyfin, useApiInContext } from "@/utils/store/api";
// SCSS
import "./server.scss";
import { Paper, Stack } from "@mui/material";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import logo from "../../assets/logoBlackTransparent.png";
export const Route = createFileRoute("/setup/server/add")({
component: ServerSetup,
});
function ServerSetup() {
const [serverIp, setServerIp] = useState("");
const createApi = useApiInContext((s) => s.createApi);
const { enqueueSnackbar } = useSnackbar();
const navigate = useNavigate();
const checkServer = useMutation({
mutationFn: async (e: FormEvent
report
Unable to connect to server!
);
},
});
================================================
FILE: src/routes/setup/server.list.tsx
================================================
import Chip from "@mui/material/Chip";
import IconButton from "@mui/material/IconButton";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
createFileRoute,
useNavigate,
useRouter,
} from "@tanstack/react-router";
import { useSnackbar } from "notistack";
import React, { useLayoutEffect, useState } from "react";
import AppBarBackOnly from "@/components/appBar/backOnly";
import {
delServer,
getAllServers,
getDefaultServer,
type ServerInfo,
setDefaultServer,
} from "@/utils/storage/servers";
import { delUser } from "@/utils/storage/user";
import { useBackdropStore } from "@/utils/store/backdrop";
import "./serverList.scss";
import { useShallow } from "zustand/shallow";
import AddServerDialog from "@/components/addServerDialog";
import { useApiInContext } from "@/utils/store/api";
export const Route = createFileRoute("/setup/server/list")({
component: ServerList,
});
function ServerList() {
const navigate = useNavigate();
const { enqueueSnackbar } = useSnackbar();
const router = useRouter();
const createApi = useApiInContext((s) => s.createApi);
const queryClient = useQueryClient();
const servers = useQuery({
queryKey: ["servers-list"],
queryFn: async () => await getAllServers(),
});
const defaultServer = useQuery({
queryKey: ["default-server"],
queryFn: async () => await getDefaultServer(),
});
const handleServerChange = useMutation({
mutationFn: async (server: ServerInfo) => {
await delUser();
await setDefaultServer(server.id);
queryClient.clear();
await defaultServer.refetch();
createApi(server.address, undefined);
queryClient.removeQueries();
},
onSuccess: async () => {
navigate({ to: "/login" });
},
onError: (error) => {
console.error(error);
enqueueSnackbar("Error changing the server", {
variant: "error",
});
},
});
const handleDelete = async (server: ServerInfo) => {
await delServer(server.id);
if (server.id === defaultServer.data) {
await delUser();
await servers.refetch();
if ((servers.data?.length ?? 0) > 1) {
if (servers.data?.[0].id) {
setDefaultServer(servers.data?.[0].id);
createApi(servers.data?.[0].address, undefined);
}
} else {
await setDefaultServer(null);
await router.invalidate();
}
queryClient.removeQueries();
navigate({ to: "/" });
}
enqueueSnackbar("Server deleted successfully!", { variant: "success" });
await servers.refetch();
await defaultServer.refetch();
};
const setBackdrop = useBackdropStore(
useShallow((state) => state.setBackdrop),
);
useLayoutEffect(() => {
setBackdrop("");
}, []);
const [addServerDialog, setAddServerDialog] = useState(false);
return (
{servers.isSuccess &&
servers.data.map((server) => (
{server.systemInfo?.ServerName}
{server.id === defaultServer.data && (
{server.address}
{
handleServerChange.mutate(server);
}}
disabled={handleServerChange.isPending}
size="small"
sx={{
bgcolor: "rgba(255,255,255,0.05)",
"&:hover": { bgcolor: "var(--mui-palette-primary-main)" },
}}
>
login
handleDelete(server)}
size="small"
sx={{
bgcolor: "rgba(255,255,255,0.05)",
"&:hover": { bgcolor: "var(--mui-palette-error-main)" },
}}
>
delete
))}
dns