github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): dpdm

Browse Source
This commit is contained in:
psychedelicious
2025-08-22 20:33:33 +10:00
committed by Mary Hipp Rogers
parent f5fdba795a
commit 6a7fe6668b
5 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/dnd/DndDragPreviewSingleVideo.tsx
View File

@@ -3,7 +3,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
import { chakra, Flex, Text } from '@invoke-ai/ui-library';
import type { SingleVideoDndSourceData } from 'features/dnd/dnd';
import { DND_IMAGE_DRAG_PREVIEW_SIZE, preserveOffsetOnSourceFallbackCentered } from 'features/dnd/util';
import { GalleryVideoPlaceholder } from 'features/gallery/components/ImageGrid/GalleryVideo';
import { GalleryVideoPlaceholder } from 'features/gallery/components/ImageGrid/GalleryVideoPlaceholder';
import { memo } from 'react';
import { createPortal } from 'react-dom';
import type { VideoDTO } from 'services/api/types';

13
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryVideo.tsx
View File

@@ -1,7 +1,6 @@
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
import { draggable, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import type { FlexProps } from '@invoke-ai/ui-library';
import { Flex, Icon, Image } from '@invoke-ai/ui-library';
import { Flex, Image } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import type { AppDispatch, AppGetState } from 'app/store/store';
import { useAppSelector, useAppStore } from 'app/store/storeHooks';
@@ -23,12 +22,12 @@ import { navigationApi } from 'features/ui/layouts/navigation-api';
import { VIEWER_PANEL_ID } from 'features/ui/layouts/shared';
import type { MouseEvent, MouseEventHandler } from 'react';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { PiVideoBold } from 'react-icons/pi';
import { videosApi } from 'services/api/endpoints/videos';
import type { VideoDTO } from 'services/api/types';
import { galleryItemContainerSX } from './galleryItemContainerSX';
import { GalleryItemHoverIcons } from './GalleryItemHoverIcons';
import { GalleryVideoPlaceholder } from './GalleryVideoPlaceholder';
interface Props {
videoDTO: VideoDTO;
@@ -217,11 +216,3 @@ export const GalleryVideo = memo(({ videoDTO }: Props) => {
});
GalleryVideo.displayName = 'GalleryVideo';
export const GalleryVideoPlaceholder = memo((props: FlexProps) => (
<Flex w="full" h="full" bg="base.850" borderRadius="base" alignItems="center" justifyContent="center" {...props}>
<Icon as={PiVideoBold} boxSize={16} color="base.800" />
</Flex>
));
GalleryVideoPlaceholder.displayName = 'GalleryVideoPlaceholder';

11
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryVideoPlaceholder.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { type FlexProps, Flex, Icon } from '@invoke-ai/ui-library';
import { memo } from 'react';
import { PiVideoBold } from 'react-icons/pi';
export const GalleryVideoPlaceholder = memo((props: FlexProps) => (
<Flex w="full" h="full" bg="base.850" borderRadius="base" alignItems="center" justifyContent="center" {...props}>
<Icon as={PiVideoBold} boxSize={16} color="base.800" />
</Flex>
));
GalleryVideoPlaceholder.displayName = 'GalleryVideoPlaceholder';

3
invokeai/frontend/web/src/features/gallery/components/VideoGallery.tsx
View File

@@ -26,7 +26,8 @@ import { getItemsPerRow } from '../../../../../../../getItemsPerRow';
import { getItemIndex } from './getItemIndex';
import { GalleryImagePlaceholder } from './ImageGrid/GalleryImage';
import { GallerySelectionCountTag } from './ImageGrid/GallerySelectionCountTag';
import { GalleryVideo, GalleryVideoPlaceholder } from './ImageGrid/GalleryVideo';
import { GalleryVideo } from './ImageGrid/GalleryVideo';
import { GalleryVideoPlaceholder } from './ImageGrid/GalleryVideoPlaceholder';
import { scrollIntoView } from './scrollIntoView';
import { useGalleryVideoIds } from './use-gallery-video-ids';
import { useScrollableGallery } from './useScrollableGallery';

3
invokeai/frontend/web/src/features/gallery/components/scrollIntoView.tsx
View File

@@ -1,6 +1,7 @@
import { logger } from 'app/logging/logger';
import type { ListRange, VirtuosoGridHandle } from 'react-virtuoso';
import { log } from './VideoGallery';
const log = logger('gallery');
/**
* Scroll the item at the given index into view if it is not currently visible.