gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-15 10:25:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: version v0.0.2

Browse source
This commit is contained in:
Gabe Farrell 2025-06-14 19:14:30 -04:00
parent 0dceaf017a
commit 7ff317756f
36 changed files with 336 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/app/routes/MediaItems/Album.tsx
View file

@ -47,7 +47,7 @@ export default function Album() {
<div className="mt-10">
<PeriodSelector setter={setPeriod} current={period} />
</div>
<div className="flex gap-20 mt-10">
<div className="flex flex-wrap gap-20 mt-10">
<LastPlays limit={30} albumId={album.id} />
<TopTracks limit={12} period={period} albumId={album.id} />
<ActivityGrid autoAdjust configurable albumId={album.id} />

23
client/app/routes/MediaItems/MediaLayout.tsx
View file

@ -45,6 +45,13 @@ export default function MediaLayout(props: Props) {
const title = `${props.title} - Koito`
const mobileIconSize = 22
const normalIconSize = 30
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let iconSize = vw > 768 ? normalIconSize : mobileIconSize
return (
<main
className="w-full flex flex-col flex-grow"
@ -61,19 +68,21 @@ export default function MediaLayout(props: Props) {
content={title}
/>
<div className="w-19/20 mx-auto pt-12">
<div className="flex gap-8 relative">
<img style={{zIndex: 5}} src={imageUrl(props.img, "large")} alt={props.title} className="w-sm shadow-(--color-shadow) shadow-lg" />
<div className="flex gap-8 flex-wrap relative">
<div className="flex flex-col justify-around">
<img style={{zIndex: 5}} src={imageUrl(props.img, "large")} alt={props.title} className="md:w-sm w-[220px] h-auto shadow-(--color-shadow) shadow-lg" />
</div>
<div className="flex flex-col items-start">
<h3>{props.type}</h3>
<h1>{props.title}</h1>
{props.subContent}
</div>
{ user &&
<div className="absolute right-1 flex gap-3 items-center">
<button title="Rename Item" className="hover:cursor-pointer" onClick={() => setRenameModalOpen(true)}><Edit size={30} /></button>
<button title="Replace Image" className="hover:cursor-pointer" onClick={() => setImageModalOpen(true)}><ImageIcon size={30} /></button>
<button title="Merge Items" className="hover:cursor-pointer" onClick={() => setMergeModalOpen(true)}><Merge size={30} /></button>
<button title="Delete Item" className="hover:cursor-pointer" onClick={() => setDeleteModalOpen(true)}><Trash size={30} /></button>
<div className="absolute left-1 sm:right-1 sm:left-auto -top-9 sm:top-1 flex gap-3 items-center">
<button title="Rename Item" className="hover:cursor-pointer" onClick={() => setRenameModalOpen(true)}><Edit size={iconSize} /></button>
<button title="Replace Image" className="hover:cursor-pointer" onClick={() => setImageModalOpen(true)}><ImageIcon size={iconSize} /></button>
<button title="Merge Items" className="hover:cursor-pointer" onClick={() => setMergeModalOpen(true)}><Merge size={iconSize} /></button>
<button title="Delete Item" className="hover:cursor-pointer" onClick={() => setDeleteModalOpen(true)}><Trash size={iconSize} /></button>
<RenameModal open={renameModalOpen} setOpen={setRenameModalOpen} type={props.type.toLowerCase()} id={props.id}/>
<ImageReplaceModal open={imageModalOpen} setOpen={setImageModalOpen} id={props.imgItemId} musicbrainzId={props.musicbrainzId} type={props.type === "Track" ? "Album" : props.type} />
<MergeModal currentTitle={props.title} mergeFunc={props.mergeFunc} mergeCleanerFunc={props.mergeCleanerFunc} type={props.type} currentId={props.id} open={mergeModalOpen} setOpen={setMergeModalOpen} />

6
client/app/routes/MediaItems/Track.tsx
View file

@ -50,9 +50,9 @@ export default function Track() {
<div className="mt-10">
<PeriodSelector setter={setPeriod} current={period} />
</div>
<div className="flex gap-20 mt-10">
<LastPlays limit={20} trackId={track.id}/>
<ActivityGrid trackId={track.id} configurable autoAdjust />
<div className="flex flex-wrap gap-20 mt-10">
<LastPlays limit={20} trackId={track.id}/>
<ActivityGrid trackId={track.id} configurable autoAdjust />
</div>
</MediaLayout>
)