vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add image URL generation at runtime to allow for dynamic image sizes (#1439)

Browse Source 
* add getImageUrl to domain endpoints

* add new ItemImage component and hooks to generate image url

* add configuration for image resolution based on types
This commit is contained in:
Jeff
2025-12-23 20:18:52 -08:00
committed by GitHub
parent 96f38e597c
commit 25bfb65b6d
39 changed files with 823 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+7 -7
View File
@@ -3,6 +3,7 @@ import { useState } from 'react';
import styles from './image-column.module.css';
import { ItemImage } from '/@/renderer/components/item-image/item-image';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -14,17 +15,14 @@ import {
} from '/@/renderer/features/shared/components/play-button-group';
import { usePlayButtonBehavior } from '/@/renderer/store';
import { Icon } from '/@/shared/components/icon/icon';
import { Image } from '/@/shared/components/image/image';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Folder, LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
export const ImageColumn = (props: ItemTableListInnerColumn) => {
const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
props.columns[props.columnIndex].id
];
const playButtonBehavior = usePlayButtonBehavior();
const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.id;
const item = props.data[props.rowIndex] as any;
const playButtonBehavior = usePlayButtonBehavior();
const internalState = (props as any).internalState;
const [isHovered, setIsHovered] = useState(false);
@@ -80,12 +78,14 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Image
<ItemImage
containerClassName={clsx({
[styles.imageContainerWithAspectRatio]:
props.size === 'default' || props.size === 'large',
})}
src={row}
id={item?.id}
itemType={item?._itemType}
src={item?.imageUrl}
/>
{isHovered && (
<div
src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+14 -4
View File
@@ -4,6 +4,7 @@ import { generatePath, Link } from 'react-router';
import styles from './title-combined-column.module.css';
import { ItemImage } from '/@/renderer/components/item-image/item-image';
import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path';
import {
ColumnNullFallback,
@@ -19,13 +20,12 @@ import {
import { AppRoute } from '/@/renderer/router/routes';
import { usePlayButtonBehavior } from '/@/renderer/store';
import { Icon } from '/@/shared/components/icon/icon';
import { Image } from '/@/shared/components/image/image';
import { Text } from '/@/shared/components/text/text';
import { Folder, LibraryItem, QueueSong, RelatedAlbumArtist } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
const row: object | undefined = (props.data as (any | undefined)[])[props.rowIndex];
const row: object | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.id;
const item = props.data[props.rowIndex] as any;
const internalState = (props as any).internalState;
const playButtonBehavior = usePlayButtonBehavior();
@@ -110,7 +110,12 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Image containerClassName={styles.image} src={row.imageUrl as string} />
<ItemImage
containerClassName={styles.image}
id={item?.id}
itemType={item?._itemType}
src={item?.imageUrl}
/>
{isHovered && (
<div
className={clsx(styles.playButtonOverlay, {
@@ -263,7 +268,12 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Image containerClassName={styles.image} src={row.imageUrl as string} />
<ItemImage
containerClassName={styles.image}
id={item?.id}
itemType={item?._itemType}
src={item?.imageUrl}
/>
{isHovered && (
<div
className={clsx(styles.playButtonOverlay, {