diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx index 70499ff61..ec7884aed 100644 --- a/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx +++ b/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx @@ -30,7 +30,7 @@ export interface JourneyStep { content: React.ReactNode; image?: string; videoSrc?: string; - video?: boolean; + video?: string; embed?: boolean; previousButton?: boolean; isFullScreenModeAllowed?: boolean; diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx index 7194f3662..16d88e29a 100644 --- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx +++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx @@ -3,6 +3,7 @@ import MesheryDesignEmbedUmd from '@layer5/meshery-design-embed'; import _ from 'lodash'; import { useEffect, useState } from 'react'; +import { Link, Box } from '@mui/material'; import { styled } from '../../../theme'; import { JourneyStep, ProfileData, StepData } from './GetStartedModal'; import ReusableModal from './ReusableModal'; @@ -38,6 +39,23 @@ export const ModalVideo = styled('video')(() => ({ paddingBlock: '1rem' })); +const FallbackLink: React.FC<{ video: string }> = ({ video }) => { + const watchLink = video.replace('/embed/', '/watch?v='); + return ( + + + ▶ Having trouble viewing? Watch on YouTube + + + ); +}; + const JourneyModal: React.FC = ({ open, handleClose, @@ -147,16 +165,21 @@ const JourneyModal: React.FC = ({ '' )} {data.video !== undefined ? ( - +
+ + +
) : ( '' )}