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';