Update support links.

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

@@ -2566,7 +2566,7 @@
         "supportVideos": "Support Videos",
         "gettingStarted": "Getting Started",
         "watch": "Watch",
-        "studioSessionsDesc1": "Check out the <StudioSessionsPlaylistLink /> for Invoke deep dives.",
+        "studioSessionsDesc1": "Check out our <GettingStartedPlaylistLink /> for basic tutorials, and the <StudioSessionsPlaylistLink /> for deep dives into advanced Invoke use-cases and techniques.",
         "studioSessionsDesc2": "Join our <DiscordLink /> to participate in the live sessions and ask questions. Sessions are uploaded to the playlist the following week.",
         "videos": {
             "gettingStarted": {

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

@@ -5,14 +5,10 @@ import { videoModalLinkClicked } from 'features/system/store/actions';
 import { memo, useCallback } 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 dispatch = useAppDispatch();
-  const { tKey, link, length } = video;
+  const { tKey, link } = video;
   const handleLinkClick = useCallback(() => {
     dispatch(videoModalLinkClicked(t(`supportVideos.videos.${tKey}.title`)));
   }, [dispatch, t, tKey]);
@@ -24,7 +20,6 @@ export const VideoCard = memo(({ video }: { video: VideoData }) => {
           {t(`supportVideos.videos.${tKey}.title`)}
         </Text>
         <Spacer />
-        <Text variant="subtext">{formatTime(length)}</Text>
         <ExternalLink fontSize="sm" href={link} label={t('supportVideos.watch')} onClick={handleLinkClick} />
       </Flex>
       <Text fontSize="md" variant="subtext">

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

@@ -13,7 +13,7 @@ import {
 import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { buildUseDisclosure } from 'common/hooks/useBoolean';
-import { studioSessionsPlaylistLink, supportVideos } from 'features/system/components/VideosModal/data';
+import { gettingStartedPlaylistLink, studioSessionsPlaylistLink, supportVideos } from 'features/system/components/VideosModal/data';
 import { VideoCardList } from 'features/system/components/VideosModal/VideoCardList';
 import { videoModalLinkClicked } from 'features/system/store/actions';
 import { discordLink } from 'features/system/store/constants';
@@ -22,10 +22,27 @@ import { Trans, useTranslation } from 'react-i18next';
 
 export const [useVideosModal] = buildUseDisclosure(false);
 
+const GettingStartedPlaylistLink = () => {
+  const dispatch = useAppDispatch();
+  const handleLinkClick = useCallback(() => {
+    dispatch(videoModalLinkClicked('Getting Started playlist'));
+  }, [dispatch]);
+
+  return (
+    <ExternalLink
+      fontWeight="semibold"
+      href={gettingStartedPlaylistLink}
+      display="inline-flex"
+      label="Getting Started playlist"
+      onClick={handleLinkClick}
+    />
+  );
+};
+
 const StudioSessionsPlaylistLink = () => {
   const dispatch = useAppDispatch();
   const handleLinkClick = useCallback(() => {
-    dispatch(videoModalLinkClicked('Studio session playlist'));
+    dispatch(videoModalLinkClicked('Studio Sessions playlist'));
   }, [dispatch]);
 
   return (
@@ -57,6 +74,7 @@ const DiscordLink = () => {
 };
 
 const components = {
+  GettingStartedPlaylistLink: <GettingStartedPlaylistLink />,
   StudioSessionsPlaylistLink: <StudioSessionsPlaylistLink />,
   DiscordLink: <DiscordLink />,
 };
@@ -68,7 +86,7 @@ export const VideosModal = memo(() => {
   return (
     <Modal isOpen={videosModal.isOpen} onClose={videosModal.close} size="2xl" isCentered useInert={false}>
       <ModalOverlay />
-      <ModalContent maxH="80vh" h="80vh">
+      <ModalContent maxH="40vh" h="40vh">
         <ModalHeader bg="none">{t('supportVideos.supportVideos')}</ModalHeader>
         <ModalCloseButton />
         <ModalBody>

invokeai/frontend/web/src/features/system/components/VideosModal/data.ts

@@ -8,23 +8,18 @@
 export type VideoData = {
   tKey: string;
   link: string;
-  length: {
-    minutes: number;
-    seconds: number;
-  };
 };
 
 export const supportVideos: VideoData[] = [
   {
     tKey: 'gettingStarted',
     link: 'https://www.youtube.com/watch?v=jVi2XgSGrfY&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&pp=gAQB0gcJCV8EOCosWNin',
-    length: { minutes: 0, seconds: 0 }, // Playlist doesn't have a single duration
   },
   {
     tKey: 'studioSessions',
     link: 'https://www.youtube.com/watch?v=91ZgeeqL7Bo&list=PLvWK1Kc8iXGq_8tWZqnwDVaf9uhlDC09U&pp=gAQB',
-    length: { minutes: 0, seconds: 0 }, // Playlist doesn't have a single duration
   },
 ];
 
+export const gettingStartedPlaylistLink = 'https://www.youtube.com/playlist?list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO';
 export const studioSessionsPlaylistLink = 'https://www.youtube.com/playlist?list=PLvWK1Kc8iXGq_8tWZqnwDVaf9uhlDC09U';