Skip to content

Develop #560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ShaneIsrael merged 2 commits into from
Apr 11, 2026
Merged

Develop #560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
219e4b3
update card paddings
ShaneIsrael Apr 11, 2026
4d75136
code formatting
ShaneIsrael Apr 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/client/src/common/darkTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ const theme = {
},
'&.MuiTypography-body1 > svg': {
marginTop: 2,
},
},
'& svg:last-child': {
marginLeft: 2,
},
Expand Down
6 changes: 3 additions & 3 deletions app/client/src/common/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,9 +213,9 @@ export const getVideoSources = (videoId, videoInfo, extension) => {

// When a cropped version exists, point "Source" at the cropped file instead of the original
const sourceUrl = hasCrop
? (SERVED_BY === 'nginx'
? `${URL}/_content/derived/${videoId}/${videoId}-cropped.mp4`
: `${URL}/api/video?id=${videoId}&quality=cropped`)
? SERVED_BY === 'nginx'
? `${URL}/_content/derived/${videoId}/${videoId}-cropped.mp4`
: `${URL}/api/video?id=${videoId}&quality=cropped`
: getVideoUrl(videoId, 'original', extension)

sources.push({
Expand Down
54 changes: 47 additions & 7 deletions app/client/src/components/admin/ImageFileManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,10 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
<TableCell
padding="checkbox"
sx={{ borderBottom: '1px solid #FFFFFF0D' }}
onClick={(e) => { e.stopPropagation(); onToggle(file.image_id) }}
onClick={(e) => {
e.stopPropagation()
onToggle(file.image_id)
}}
>
<Checkbox
size="small"
Expand All @@ -178,14 +181,26 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
<TableCell sx={{ ...bodyCellSx, maxWidth: 300, overflow: 'hidden' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, overflow: 'hidden' }}>
<Tooltip title={displayName} placement="top" enterDelay={600}>
<Typography sx={{ fontSize: 13, color: '#FFFFFFCC', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
<Typography
sx={{
fontSize: 13,
color: '#FFFFFFCC',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
flex: 1,
}}
>
{displayName}
</Typography>
</Tooltip>
<Tooltip title="Open in new tab">
<IconButton
size="small"
onClick={(e) => { e.stopPropagation(); window.open(`/i/${file.image_id}`, '_blank') }}
onClick={(e) => {
e.stopPropagation()
window.open(`/i/${file.image_id}`, '_blank')
}}
sx={{ color: '#FFFFFF33', p: 0.25, flexShrink: 0, '&:hover': { color: '#FFFFFF99' } }}
>
<OpenInNewIcon sx={{ fontSize: 13 }} />
Expand All @@ -196,23 +211,47 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg

{/* Size */}
<TableCell sx={{ ...bodyCellSx }}>
<Tooltip arrow placement="top" title={file.derived_size > 0 ? <Box><Typography sx={{ fontSize: 12 }}>Derived: {formatSize(file.derived_size)}</Typography></Box> : ''}>
<Tooltip
arrow
placement="top"
title={
file.derived_size > 0 ? (
<Box>
<Typography sx={{ fontSize: 12 }}>Derived: {formatSize(file.derived_size)}</Typography>
</Box>
) : (
''
)
}
>
<Typography sx={{ fontSize: 12, color: '#FFFFFF77' }}>{formatSize(file.size)}</Typography>
</Tooltip>
</TableCell>

{/* Total Size */}
{!hiddenColumns.has('Total Size') && (
<TableCell sx={{ ...bodyCellSx }}>
<Typography sx={{ fontSize: 12, color: '#FFFFFF77' }}>{formatSize((file.size || 0) + (file.derived_size || 0))}</Typography>
<Typography sx={{ fontSize: 12, color: '#FFFFFF77' }}>
{formatSize((file.size || 0) + (file.derived_size || 0))}
</Typography>
</TableCell>
)}

{/* Resolution */}
{!hiddenColumns.has('Resolution') && (
<TableCell sx={{ ...bodyCellSx }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Chip label={formatResolution(file.width, file.height)} size="small" sx={{ height: 17, fontSize: 10, bgcolor: '#FFFFFF12', color: '#FFFFFF66', '& .MuiChip-label': { px: 0.75 } }} />
<Chip
label={formatResolution(file.width, file.height)}
size="small"
sx={{
height: 17,
fontSize: 10,
bgcolor: '#FFFFFF12',
color: '#FFFFFF66',
'& .MuiChip-label': { px: 0.75 },
}}
/>
</Box>
</TableCell>
)}
Expand All @@ -225,7 +264,8 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
label={file.private ? 'Private' : 'Public'}
size="small"
sx={{
height: 17, fontSize: 10,
height: 17,
fontSize: 10,
bgcolor: file.private ? '#FFFFFF12' : '#1DB95418',
color: file.private ? '#FFFFFF66' : '#1DB954',
border: '1px solid',
Expand Down
230 changes: 116 additions & 114 deletions app/client/src/components/cards/ImageCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,126 +107,128 @@ const LazyImageCard = ({
)
}

const ImageCards = React.memo(({
images,
loadingIcon = null,
feedView = false,
authenticated,
size,
onImageOpen,
editMode = false,
selectedImages,
onImageSelect,
}) => {
const [imgs, setImages] = React.useState(images || [])
const [alert, setAlert] = React.useState({ open: false })
const [columnCount, setColumnCount] = React.useState(3)
const containerRef = React.useRef()

React.useEffect(() => {
setImages(images || [])
}, [images])

React.useEffect(() => {
if (!imgs || imgs.length === 0) {
setColumnCount(3)
return
}

const el = containerRef.current
if (!el) return

const observer = new ResizeObserver(([entry]) => {
const width = entry?.contentRect?.width || 0
if (!width) return
const colWidth = size || 300
const cols = Math.max(1, Math.floor((width + 16) / (colWidth + 16)))
setColumnCount(cols)
})

observer.observe(el)
return () => observer.disconnect()
}, [size, imgs])
const ImageCards = React.memo(
({
images,
loadingIcon = null,
feedView = false,
authenticated,
size,
onImageOpen,
editMode = false,
selectedImages,
onImageSelect,
}) => {
const [imgs, setImages] = React.useState(images || [])
const [alert, setAlert] = React.useState({ open: false })
const [columnCount, setColumnCount] = React.useState(3)
const containerRef = React.useRef()

React.useEffect(() => {
setImages(images || [])
}, [images])

React.useEffect(() => {
if (!imgs || imgs.length === 0) {
setColumnCount(3)
return
}

const el = containerRef.current
if (!el) return

const observer = new ResizeObserver(([entry]) => {
const width = entry?.contentRect?.width || 0
if (!width) return
const colWidth = size || 300
const cols = Math.max(1, Math.floor((width + 16) / (colWidth + 16)))
setColumnCount(cols)
})

const memoizedHandleAlert = useCallback((a) => setAlert(a), [])
observer.observe(el)
return () => observer.disconnect()
}, [size, imgs])

const handleDelete = (id) => {
setImages((prev) => prev.filter((img) => img.image_id !== id))
}
const memoizedHandleAlert = useCallback((a) => setAlert(a), [])

const openImage = (img) => {
if (onImageOpen) onImageOpen(img)
}
const handleDelete = (id) => {
setImages((prev) => prev.filter((img) => img.image_id !== id))
}

const EMPTY_STATE = () => (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 2,
py: 8,
px: 3,
border: '1px solid #FFFFFF14',
borderRadius: '16px',
background: '#00000040',
}}
>
{!loadingIcon && (
<>
<ImageIcon sx={{ fontSize: 56, color: '#FFFFFF33' }} />
<Box sx={{ textAlign: 'center' }}>
<Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>No images found</Typography>
{!feedView && (
<Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>
Upload images or scan your image library
</Typography>
)}
</Box>
</>
)}
{loadingIcon}
</Box>
)
const openImage = (img) => {
if (onImageOpen) onImageOpen(img)
}

return (
<Box>
<SnackbarAlert
severity={alert.type}
open={alert.open}
onClose={alert.onClose}
setOpen={(open) => setAlert({ ...alert, open })}
const EMPTY_STATE = () => (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 2,
py: 8,
px: 3,
border: '1px solid #FFFFFF14',
borderRadius: '16px',
background: '#00000040',
}}
>
{alert.message}
</SnackbarAlert>

{imgs.length === 0 && EMPTY_STATE()}
{imgs.length > 0 && (
<Box
ref={containerRef}
sx={{
columnCount: columnCount,
columnGap: '8px',
}}
{!loadingIcon && (
<>
<ImageIcon sx={{ fontSize: 56, color: '#FFFFFF33' }} />
<Box sx={{ textAlign: 'center' }}>
<Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>No images found</Typography>
{!feedView && (
<Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>
Upload images or scan your image library
</Typography>
)}
</Box>
</>
)}
{loadingIcon}
</Box>
)

return (
<Box>
<SnackbarAlert
severity={alert.type}
open={alert.open}
onClose={alert.onClose}
setOpen={(open) => setAlert({ ...alert, open })}
>
{imgs.map((img) => (
<LazyImageCard
key={img.image_id}
img={img}
openImageHandler={() => (editMode ? onImageSelect?.(img.image_id) : openImage(img))}
alertHandler={memoizedHandleAlert}
authenticated={authenticated}
onRemoveFromView={handleDelete}
editMode={editMode}
selected={selectedImages?.has(img.image_id)}
onSelect={onImageSelect}
/>
))}
</Box>
)}
</Box>
)
})
{alert.message}
</SnackbarAlert>

{imgs.length === 0 && EMPTY_STATE()}
{imgs.length > 0 && (
<Box
ref={containerRef}
sx={{
columnCount: columnCount,
columnGap: '8px',
}}
>
{imgs.map((img) => (
<LazyImageCard
key={img.image_id}
img={img}
openImageHandler={() => (editMode ? onImageSelect?.(img.image_id) : openImage(img))}
alertHandler={memoizedHandleAlert}
authenticated={authenticated}
onRemoveFromView={handleDelete}
editMode={editMode}
selected={selectedImages?.has(img.image_id)}
onSelect={onImageSelect}
/>
))}
</Box>
)}
</Box>
)
},
)

export default ImageCards
10 changes: 3 additions & 7 deletions app/client/src/components/cards/VideoCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,13 +131,9 @@ const VideoCards = ({
<>
<OndemandVideoIcon sx={{ fontSize: 56, color: '#FFFFFF33' }} />
<Box sx={{ textAlign: 'center' }}>
<Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>
No videos found
</Typography>
<Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>No videos found</Typography>
{!feedView && (
<Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>
Scan your library to discover videos
</Typography>
<Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>Scan your library to discover videos</Typography>
)}
</Box>
{!feedView && (
Expand Down Expand Up @@ -200,7 +196,7 @@ const VideoCards = ({
width: isSingleColumn ? 'calc(100% + 48px)' : '100%',
mx: isSingleColumn ? '-24px' : 0,
gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`,
gap: '24px',
gap: 2,
}}
>
{vids.slice(0, visibleCount).map((v, index) => (
Expand Down
Loading
Loading