diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 218c92471ab..c7fc56f1fc9 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -2115,6 +2115,8 @@
"gettingStarted": "Getting Started",
"controlCanvas": "Control Canvas",
"watchOnYoutube": "Watch on YouTube",
+ "studioSessionsDesc1": "Check out the for Invoke deep dives.",
+ "studioSessionsDesc2": "Join our 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",
diff --git a/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx b/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx
index fb8ae679390..5f7c9e025cb 100644
--- a/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx
@@ -1,4 +1,5 @@
import {
+ ExternalLink,
Flex,
Modal,
ModalBody,
@@ -7,16 +8,42 @@ import {
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 } from 'features/system/components/VideosModal/data';
+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 { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
export const [useVideosModal] = buildUseDisclosure(false);
+const StudioSessionsPlaylistLink = () => {
+ return (
+
+ );
+};
+
+const DiscordLink = () => {
+ return ;
+};
+
+const components = {
+ StudioSessionsPlaylistLink: ,
+ DiscordLink: ,
+};
+
export const VideosModal = memo(() => {
const { t } = useTranslation();
const videosModal = useVideosModal();
@@ -27,9 +54,17 @@ export const VideosModal = memo(() => {
{t('supportVideos.supportVideos')}
-
+
+
+
+
+
+
+
+
+
diff --git a/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts b/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts
index 5f88500dfff..0531c0d2e34 100644
--- a/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts
+++ b/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts
@@ -84,3 +84,5 @@ export const controlCanvasVideos: VideoData[] = [
length: { minutes: 0, seconds: 48 },
},
];
+
+export const studioSessionsPlaylistLink = 'https://www.youtube.com/playlist?list=PLvWK1Kc8iXGq_8tWZqnwDVaf9uhlDC09U';