feat(ui): support videos modal

invokeai/frontend/web/package.json

@@ -58,7 +58,7 @@
     "@dagrejs/dagre": "^1.1.4",
     "@dagrejs/graphlib": "^2.2.4",
     "@fontsource-variable/inter": "^5.1.0",
-    "@invoke-ai/ui-library": "^0.0.43",
+    "@invoke-ai/ui-library": "^0.0.44",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",

invokeai/frontend/web/public/locales/en.json

@@ -2124,5 +2124,67 @@
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
         "watchUiUpdatesOverview": "Watch UI Updates Overview"
+    },
+    "supportVideos": {
+        "supportVideos": "Support Videos",
+        "gettingStarted": "Getting Started",
+        "controlCanvas": "Control Canvas",
+        "watch": "Watch",
+        "studioSessionsDesc1": "Check out the <StudioSessionsPlaylistLink /> for Invoke deep dives.",
+        "studioSessionsDesc2": "Join our <DiscordLink /> to participate in the live sessions and ask questions. Sessions are uploaded to the playlist the following week.",
+        "videos": {
+            "creatingYourFirstImage": {
+                "title": "Creating Your First Image",
+                "description": "Introduction to creating an image from scratch using Invoke's tools."
+            },
+            "usingControlLayersAndReferenceGuides": {
+                "title": "Using Control Layers and Reference Guides",
+                "description": "Learn how to guide your image creation with control layers and reference images."
+            },
+            "understandingImageToImageAndDenoising": {
+                "title": "Understanding Image-to-Image and Denoising",
+                "description": "Overview of image-to-image transformations and denoising in Invoke."
+            },
+            "exploringAIModelsAndConceptAdapters": {
+                "title": "Exploring AI Models and Concept Adapters",
+                "description": "Dive into AI models and how to use concept adapters for creative control."
+            },
+            "creatingAndComposingOnInvokesControlCanvas": {
+                "title": "Creating and Composing on Invoke's Control Canvas",
+                "description": "Learn to compose images using Invoke's control canvas."
+            },
+            "upscaling": {
+                "title": "Upscaling",
+                "description": "How to upscale images with Invoke's tools to enhance resolution."
+            },
+            "howDoIGenerateAndSaveToTheGallery": {
+                "title": "How Do I Generate and Save to the Gallery?",
+                "description": "Steps to generate and save images to the gallery."
+            },
+            "howDoIEditOnTheCanvas": {
+                "title": "How Do I Edit on the Canvas?",
+                "description": "Guide to editing images directly on the canvas."
+            },
+            "howDoIDoImageToImageTransformation": {
+                "title": "How Do I Do Image-to-Image Transformation?",
+                "description": "Tutorial on performing image-to-image transformations in Invoke."
+            },
+            "howDoIUseControlNetsAndControlLayers": {
+                "title": "How Do I Use Control Nets and Control Layers?",
+                "description": "Learn to apply control layers and controlnets to your images."
+            },
+            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
+                "title": "How Do I Use Global IP Adapters and Reference Images?",
+                "description": "Introduction to adding reference images and global IP adapters."
+            },
+            "howDoIUseInpaintMasks": {
+                "title": "How Do I Use Inpaint Masks?",
+                "description": "How to apply inpaint masks for image correction and variation."
+            },
+            "howDoIOutpaint": {
+                "title": "How Do I Outpaint?",
+                "description": "Guide to outpainting beyond the original image borders."
+            }
+        }
     }
 }

invokeai/frontend/web/src/app/components/App.tsx

@@ -27,6 +27,7 @@ import { ClearQueueConfirmationsAlertDialog } from 'features/queue/components/Cl
 import { DeleteStylePresetDialog } from 'features/stylePresets/components/DeleteStylePresetDialog';
 import { StylePresetModal } from 'features/stylePresets/components/StylePresetForm/StylePresetModal';
 import RefreshAfterResetModal from 'features/system/components/SettingsModal/RefreshAfterResetModal';
+import { VideosModal } from 'features/system/components/VideosModal/VideosModal';
 import { configChanged } from 'features/system/store/configSlice';
 import { selectLanguage } from 'features/system/store/systemSelectors';
 import { AppContent } from 'features/ui/components/AppContent';
@@ -108,6 +109,7 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
       <NewCanvasSessionDialog />
       <ImageContextMenu />
       <FullscreenDropzone />
+      <VideosModal />
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx

@@ -0,0 +1,30 @@
+import { ExternalLink, Flex, Spacer, Text } from '@invoke-ai/ui-library';
+import type { VideoData } from 'features/system/components/VideosModal/data';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const formatTime = ({ minutes, seconds }: { minutes: number; seconds: number }) => {
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+export const VideoCard = memo(({ video }: { video: VideoData }) => {
+  const { t } = useTranslation();
+  const { tKey, link, length } = video;
+  return (
+    <Flex flexDir="column" gap={1}>
+      <Flex alignItems="center" gap={2}>
+        <Text fontSize="md" fontWeight="semibold">
+          {t(`supportVideos.videos.${tKey}.title`)}
+        </Text>
+        <Spacer />
+        <Text variant="subtext">{formatTime(length)}</Text>
+        <ExternalLink fontSize="sm" href={link} label={t('supportVideos.watch')} />
+      </Flex>
+      <Text fontSize="md" variant="subtext">
+        {t(`supportVideos.videos.${tKey}.description`)}
+      </Text>
+    </Flex>
+  );
+});
+
+VideoCard.displayName = 'VideoCard';

invokeai/frontend/web/src/features/system/components/VideosModal/VideoCardList.tsx

@@ -0,0 +1,20 @@
+import { Divider } from '@invoke-ai/ui-library';
+import { StickyScrollable } from 'features/system/components/StickyScrollable';
+import { gettingStartedVideos, type VideoData } from 'features/system/components/VideosModal/data';
+import { VideoCard } from 'features/system/components/VideosModal/VideoCard';
+import { Fragment, memo } from 'react';
+
+export const VideoCardList = memo(({ category, videos }: { category: string; videos: VideoData[] }) => {
+  return (
+    <StickyScrollable title={category}>
+      {videos.map((video, i) => (
+        <Fragment key={`${video.tKey}-${i}`}>
+          <VideoCard video={video} />
+          {i < gettingStartedVideos.length - 1 && <Divider />}
+        </Fragment>
+      ))}
+    </StickyScrollable>
+  );
+});
+
+VideoCardList.displayName = 'VideoCardList';

invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx

@@ -0,0 +1,79 @@
+import {
+  ExternalLink,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '@invoke-ai/ui-library';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { buildUseDisclosure } from 'common/hooks/useBoolean';
+import {
+  controlCanvasVideos,
+  gettingStartedVideos,
+  studioSessionsPlaylistLink,
+} from 'features/system/components/VideosModal/data';
+import { VideoCardList } from 'features/system/components/VideosModal/VideoCardList';
+import { discordLink } from 'features/system/store/constants';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+export const [useVideosModal] = buildUseDisclosure(false);
+
+const StudioSessionsPlaylistLink = () => {
+  return (
+    <ExternalLink
+      fontWeight="semibold"
+      href={studioSessionsPlaylistLink}
+      display="inline-flex"
+      label="Studio Sessions playlist"
+    />
+  );
+};
+
+const DiscordLink = () => {
+  return <ExternalLink fontWeight="semibold" href={discordLink} display="inline-flex" label="Discord" />;
+};
+
+const components = {
+  StudioSessionsPlaylistLink: <StudioSessionsPlaylistLink />,
+  DiscordLink: <DiscordLink />,
+};
+
+export const VideosModal = memo(() => {
+  const { t } = useTranslation();
+  const videosModal = useVideosModal();
+
+  return (
+    <Modal isOpen={videosModal.isOpen} onClose={videosModal.close} size="2xl" isCentered useInert={false}>
+      <ModalOverlay />
+      <ModalContent maxH="80vh" h="80vh">
+        <ModalHeader bg="none">{t('supportVideos.supportVideos')}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <ScrollableContent>
+            <Flex flexDir="column" gap={4}>
+              <Flex flexDir="column" gap={2} pb={2}>
+                <Text fontSize="md">
+                  <Trans i18nKey="supportVideos.studioSessionsDesc1" components={components} />
+                </Text>
+                <Text fontSize="md">
+                  <Trans i18nKey="supportVideos.studioSessionsDesc2" components={components} />
+                </Text>
+              </Flex>
+              <VideoCardList category={t('supportVideos.gettingStarted')} videos={gettingStartedVideos} />
+              <VideoCardList category={t('supportVideos.controlCanvas')} videos={controlCanvasVideos} />
+            </Flex>
+          </ScrollableContent>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  );
+});
+
+VideosModal.displayName = 'VideosModal';