Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-16 16:20:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add logo support to plugins and UI

Browse Source
This commit is contained in:
grimsi
2025-03-30 12:11:58 +02:00
parent 55818d4f37
commit 17d3211d22
16 changed files with 172 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gameyfin/src/main/frontend/components/general/PluginManagementCard.tsx
+44 -8
View File
@@ -1,10 +1,20 @@
import {Button, Card, Chip, Skeleton, Tooltip, useDisclosure} from "@heroui/react";
import {Plug, Power, SlidersHorizontal} from "@phosphor-icons/react";
import {
CheckCircle,
PauseCircle,
PlayCircle,
Power,
QuestionMark,
SlidersHorizontal,
StopCircle,
WarningCircle
} from "@phosphor-icons/react";
import {PluginManagementEndpoint} from "Frontend/generated/endpoints";
import PluginDto from "Frontend/generated/de/grimsi/gameyfin/core/plugins/management/PluginDto";
import PluginState from "Frontend/generated/org/pf4j/PluginState";
import React, {useEffect, useState} from "react";
import React, {ReactNode, useEffect, useState} from "react";
import PluginDetailsModal from "Frontend/components/general/PluginDetailsModal";
import PluginLogo from "Frontend/components/general/PluginLogo";
export function PluginManagementCard({plugin, updatePlugin}: {
plugin: PluginDto,
@@ -40,6 +50,19 @@ export function PluginManagementCard({plugin, updatePlugin}: {
}
}
function stateToIcon(state: PluginState | undefined): ReactNode {
switch (state) {
case PluginState.STARTED:
return <PlayCircle/>;
case PluginState.DISABLED:
return <PauseCircle/>;
case PluginState.FAILED:
return <StopCircle/>;
default:
return <QuestionMark/>;
}
}
function isDisabled(state: PluginState | undefined): boolean {
return state === PluginState.DISABLED;
}
@@ -62,6 +85,7 @@ export function PluginManagementCard({plugin, updatePlugin}: {
}
}
// @ts-ignore
return (
<>
<Card className={`flex flex-row justify-between p-2 border-2 border-${borderColor(plugin.state)}`}>
@@ -79,17 +103,29 @@ export function PluginManagementCard({plugin, updatePlugin}: {
</Tooltip>
</div>
<div className="flex flex-1 flex-col items-center gap-1">
<Plug size={64} weight="fill"/>
<PluginLogo plugin={plugin}/>
<p className="font-semibold">{plugin.name}</p>
<div className="flex flex-row gap-2">
<Chip size="sm" radius="sm" className="text-xs">{plugin.version}</Chip>
<Chip size="sm" radius="sm" className="text-xs"
color={stateToColor(plugin.state)}>{plugin.state?.toLowerCase()}</Chip>
<Chip size="sm" radius="sm" className="text-xs" color={stateToColor(plugin.state)}>
<Tooltip content={`Plugin ${plugin.state?.toLowerCase()}`} placement="bottom"
color="foreground">
{stateToIcon(plugin.state)}
</Tooltip>
</Chip>
{configValid === undefined ?
<Skeleton className="rounded-md h-6 w-20"></Skeleton>
<Skeleton className="rounded-md h-6 w-9"/>
: configValid ?
<Chip size="sm" radius="sm" className="text-xs" color="success">config valid</Chip> :
<Chip size="sm" radius="sm" className="text-xs" color="danger">config invalid</Chip>
<Tooltip content="Config valid" placement="bottom" color="foreground">
<Chip size="sm" radius="sm" className="text-xs" color="success">
<CheckCircle/>
</Chip>
</Tooltip> :
<Tooltip content="Config invalid" placement="bottom" color="foreground">
<Chip size="sm" radius="sm" className="text-xs" color="danger">
<WarningCircle/>
</Chip>
</Tooltip>
}
</div>
</div>