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

Extend Plugin API to return a list of covers and header images

Browse Source 
Implement dedicated header image in GameView
Implement GameHeaderPicker
This commit is contained in:
GRIMSIM
2025-06-16 16:56:46 +02:00
parent ac4eaf915e
commit 5e52d11835
33 changed files with 454 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/main/frontend/components/general/input/GameCoverPicker.tsx
+22 -17
View File
@@ -1,13 +1,12 @@
import {Image, useDisclosure} from "@heroui/react";
import {GameCoverFallback} from "Frontend/components/general/covers/GameCoverFallback";
import React from "react";
import {useField} from "formik";
import {GameCoverPickerModal} from "Frontend/components/general/modals/GameCoverPickerModal";
import {Pencil} from "@phosphor-icons/react";
import {ImageBroken, Pencil} from "@phosphor-icons/react";
// @ts-ignore
export default function GameCoverPicker({game, label, showErrorUntouched = false, ...props}) {
export default function GameCoverPicker({game, showErrorUntouched = false, ...props}) {
// @ts-ignore
const [field] = useField(props);
@@ -15,24 +14,30 @@ export default function GameCoverPicker({game, label, showErrorUntouched = false
const gameCoverPickerModal = useDisclosure();
return (<>
<div className="relative group w-fit h-fit cursor-pointer"
<div className="relative group aspect-[12/17] cursor-pointer bg-background/50"
onClick={gameCoverPickerModal.onOpenChange}>
<Image
alt={game.title}
className="z-0 object-cover aspect-[12/17] group-hover:brightness-50"
src={field.value ? field.value : `images/cover/${game.coverId}`}
{...props}
{...field}
radius="none"
height={216}
fallbackSrc={<GameCoverFallback title={game.title}
size={216}
radius="none"/>}
/>
{field.value || game.coverId ?
<div className="size-full overflow-hidden">
<Image
alt={game.title}
className="z-0 object-cover group-hover:brightness-[25%]"
src={field.value ? field.value : `images/cover/${game.coverId}`}
{...props}
{...field}
radius="none"
/>
</div> :
<div
className="absolute inset-0 flex flex-col text-center items-center justify-center group-hover:opacity-0"
>
<ImageBroken size={46}/>
<p>No cover image available</p>
</div>}
<div
className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100"
className="absolute inset-0 flex flex-col gap-2 text-center items-center justify-center opacity-0 group-hover:opacity-100"
>
<Pencil size={46}/>
<p>Edit cover</p>
</div>
</div>
<GameCoverPickerModal
app/src/main/frontend/components/general/input/GameHeaderPicker.tsx
+50
View File
@@ -0,0 +1,50 @@
import {Image, useDisclosure} from "@heroui/react";
import React from "react";
import {useField} from "formik";
import {ImageBroken, Pencil} from "@phosphor-icons/react";
import {GameHeaderPickerModal} from "Frontend/components/general/modals/GameHeaderPickerModal";
// @ts-ignore
export default function GameHeaderPicker({game, showErrorUntouched = false, ...props}) {
// @ts-ignore
const [field] = useField(props);
const gameHeaderPickerModal = useDisclosure();
return (<>
<div className="relative group size-full cursor-pointer bg-background/50"
onClick={gameHeaderPickerModal.onOpenChange}>
{field.value || game.headerId ?
<div className="size-full overflow-hidden">
<Image
alt={game.title}
className="z-0 object-cover group-hover:brightness-[25%]"
src={field.value ? field.value : `images/cover/${game.headerId}`}
{...props}
{...field}
radius="none"
/>
</div> :
<div
className="absolute inset-0 flex flex-col text-center items-center justify-center group-hover:opacity-0"
>
<ImageBroken size={46}/>
<p>No header image available</p>
</div>}
<div
className="absolute inset-0 flex flex-col gap-2 text-center items-center justify-center opacity-0 group-hover:opacity-100"
>
<Pencil size={46}/>
<p>Edit header image</p>
</div>
</div>
<GameHeaderPickerModal
game={game}
isOpen={gameHeaderPickerModal.isOpen}
onOpenChange={gameHeaderPickerModal.onOpenChange}
setHeaderUrl={(headerUrl) => field.onChange({target: {name: field.name, value: headerUrl}})}
/>
</>);
}