From 31079c40c82263d5c68e7459451fa7796a57ff69 Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Tue, 17 Dec 2024 15:02:18 +0000
Subject: [PATCH] feat: resource page styles - shorts page (#1235)

---
 components/cards/RelatedContentCard.tsx       |  40 ++++++
 .../resources/ResourceCompleteButton.tsx      |  16 +--
 components/resources/ResourceShortVideo.tsx   |  63 ++++++--
 components/storyblok/StoryblokCoursePage.tsx  |   2 +
 .../storyblok/StoryblokRelatedContent.tsx     |  67 +++++----
 .../StoryblokResourceConversationPage.tsx     |   7 +-
 .../storyblok/StoryblokResourceShortPage.tsx  | 134 +++++++++++++-----
 components/storyblok/StoryblokSessionPage.tsx |   2 +
 components/video/Video.tsx                    |  34 ++++-
 constants/enums.ts                            |  16 +++
 constants/events.ts                           |   7 +-
 messages/resources/en.json                    |   3 +
 messages/shared/en.json                       |   9 ++
 pages/shorts/[slug].tsx                       |  27 +++-
 utils/getStoryblokPageProps.ts                |  30 +++-
 15 files changed, 372 insertions(+), 85 deletions(-)
 create mode 100644 components/cards/RelatedContentCard.tsx

diff --git a/components/cards/RelatedContentCard.tsx b/components/cards/RelatedContentCard.tsx
new file mode 100644
index 000000000..2bd1f0a29
--- /dev/null
+++ b/components/cards/RelatedContentCard.tsx
@@ -0,0 +1,40 @@
+import { Button, Card, CardContent, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { RELATED_CONTENT_CATEGORIES } from '../../constants/enums';
+import Link from '../common/Link';
+
+const cardStyle = {
+  mt: 0,
+  width: { xs: '100%', sm: 'calc(50% - 0.75rem)', md: 'calc(33% - 0.75rem)' },
+  mb: { xs: '1rem', sm: '1.5rem' },
+} as const;
+
+const categoryStyle = {
+  fontFamily: 'Montserrat, sans-serif',
+  fontSize: '0.875rem !important',
+  fontWeight: 500,
+} as const;
+
+interface RelatedContentProps {
+  title: string;
+  href: string;
+  category: RELATED_CONTENT_CATEGORIES;
+}
+
+export const RelatedContentCard = (props: RelatedContentProps) => {
+  const { title, href, category } = props;
+
+  const t = useTranslations('Shared.relatedContent');
+
+  return (
+    <Card sx={cardStyle}>
+      <CardContent>
+        <Typography sx={categoryStyle}>{t(category)}</Typography>
+        <Typography variant="h3">{title}</Typography>
+        <Button component={Link} href={href} variant="contained">
+          Open
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/components/resources/ResourceCompleteButton.tsx b/components/resources/ResourceCompleteButton.tsx
index 58f5f770f..4c7950c7c 100644
--- a/components/resources/ResourceCompleteButton.tsx
+++ b/components/resources/ResourceCompleteButton.tsx
@@ -6,9 +6,9 @@ import {
   RESOURCE_CONVERSATION_COMPLETE_ERROR,
   RESOURCE_CONVERSATION_COMPLETE_REQUEST,
   RESOURCE_CONVERSATION_COMPLETE_SUCCESS,
-  RESOURCE_SHORT_COMPLETE_ERROR,
-  RESOURCE_SHORT_COMPLETE_REQUEST,
-  RESOURCE_SHORT_COMPLETE_SUCCESS,
+  RESOURCE_SHORT_VIDEO_COMPLETE_ERROR,
+  RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST,
+  RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS,
 } from '../../constants/events';
 import { useCompleteResourceMutation } from '../../store/api';
 import logEvent, { EventUserData } from '../../utils/logEvent';
@@ -39,7 +39,7 @@ export const ResourceCompleteButton = (props: ResourceCompleteButtonProps) => {
   const completeResourceAction = async () => {
     logEvent(
       category === RESOURCE_CATEGORIES.SHORT_VIDEO
-        ? RESOURCE_SHORT_COMPLETE_REQUEST
+        ? RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST
         : RESOURCE_CONVERSATION_COMPLETE_REQUEST,
       eventData,
     );
@@ -51,7 +51,7 @@ export const ResourceCompleteButton = (props: ResourceCompleteButtonProps) => {
     if (completeResourceResponse.data) {
       logEvent(
         category === RESOURCE_CATEGORIES.SHORT_VIDEO
-          ? RESOURCE_SHORT_COMPLETE_SUCCESS
+          ? RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS
           : RESOURCE_CONVERSATION_COMPLETE_SUCCESS,
         eventData,
       );
@@ -63,7 +63,7 @@ export const ResourceCompleteButton = (props: ResourceCompleteButtonProps) => {
 
       logEvent(
         category === RESOURCE_CATEGORIES.SHORT_VIDEO
-          ? RESOURCE_SHORT_COMPLETE_ERROR
+          ? RESOURCE_SHORT_VIDEO_COMPLETE_ERROR
           : RESOURCE_CONVERSATION_COMPLETE_ERROR,
         eventData,
       );
@@ -77,8 +77,8 @@ export const ResourceCompleteButton = (props: ResourceCompleteButtonProps) => {
   return (
     <>
       <Button
-        color="secondary"
-        size="large"
+        color="primary"
+        size="medium"
         variant="contained"
         onClick={completeResourceAction}
         startIcon={<CheckCircleIcon color="error" />}
diff --git a/components/resources/ResourceShortVideo.tsx b/components/resources/ResourceShortVideo.tsx
index e95de5aa7..3756413b0 100644
--- a/components/resources/ResourceShortVideo.tsx
+++ b/components/resources/ResourceShortVideo.tsx
@@ -1,8 +1,12 @@
-import { Button } from '@mui/material';
+import { Link, Typography } from '@mui/material';
 import { ISbRichtext } from '@storyblok/react';
+import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import {
+  RESOURCE_SHORT_VIDEO_COMPLETE_ERROR,
+  RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST,
+  RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS,
   RESOURCE_SHORT_VIDEO_STARTED_ERROR,
   RESOURCE_SHORT_VIDEO_STARTED_REQUEST,
   RESOURCE_SHORT_VIDEO_STARTED_SUCCESS,
@@ -10,7 +14,7 @@ import {
   RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED,
   RESOURCE_SHORT_VIDEO_VIEWED,
 } from '../../constants/events';
-import { useStartResourceMutation } from '../../store/api';
+import { useCompleteResourceMutation, useStartResourceMutation } from '../../store/api';
 import logEvent, { EventUserData } from '../../utils/logEvent';
 import Video from '../video/Video';
 import VideoTranscriptModal from '../video/VideoTranscriptModal';
@@ -29,11 +33,16 @@ interface ResourceShortVideoProps {
   video: { url: string };
   video_transcript: ISbRichtext;
 }
+
 export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
   const { eventData, storyId, resourceProgress, name, video_transcript, video } = props;
   const [videoStarted, setVideoStarted] = useState<boolean>(false);
+  const [videoFinished, setVideoFinished] = useState<boolean>(false);
   const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
   const [startResourceShort] = useStartResourceMutation();
+  const [completeResourceShort] = useCompleteResourceMutation();
+  const t = useTranslations('Resources');
+
   async function callStartResourceShort() {
     logEvent(RESOURCE_SHORT_VIDEO_STARTED_REQUEST, {
       ...eventData,
@@ -57,6 +66,31 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
       throw error;
     }
   }
+
+  async function callCompleteResourceShort() {
+    logEvent(RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST, {
+      ...eventData,
+      resource_name: name,
+    });
+
+    const completeResourceShortResponse = await completeResourceShort({
+      storyblokId: storyId,
+    });
+
+    if (completeResourceShortResponse.data) {
+      logEvent(RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS, eventData);
+    }
+
+    if (completeResourceShortResponse.error) {
+      const error = completeResourceShortResponse.error;
+
+      logEvent(RESOURCE_SHORT_VIDEO_COMPLETE_ERROR, eventData);
+      (window as any).Rollbar?.error('ResourceShort completed error', error);
+
+      throw error;
+    }
+  }
+
   useEffect(() => {
     if (openTranscriptModal === null) return;
 
@@ -73,7 +107,7 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
     if (openTranscriptModal && resourceProgress === PROGRESS_STATUS.NOT_STARTED) {
       callStartResourceShort();
     }
-  }, [openTranscriptModal]);
+  }, [openTranscriptModal, eventData, name, resourceProgress]);
 
   useEffect(() => {
     if (!videoStarted || resourceProgress !== PROGRESS_STATUS.NOT_STARTED) return;
@@ -81,7 +115,15 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
     if (videoStarted) {
       callStartResourceShort();
     }
-  }, [videoStarted]);
+  }, [videoStarted, resourceProgress]);
+
+  useEffect(() => {
+    if (!videoFinished || resourceProgress === PROGRESS_STATUS.COMPLETED) return;
+
+    if (videoFinished) {
+      callCompleteResourceShort();
+    }
+  }, [videoFinished, resourceProgress]);
 
   useEffect(() => {
     logEvent(RESOURCE_SHORT_VIDEO_VIEWED, eventData);
@@ -90,16 +132,21 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
   return (
     video && (
       <>
-        <Button variant="contained" sx={{ my: 3 }} onClick={() => setOpenTranscriptModal(true)}>
-          Open transcript
-        </Button>
         <Video
           url={video.url}
           setVideoStarted={setVideoStarted}
+          setVideoFinished={setVideoFinished}
           eventData={eventData}
           eventPrefix="RESOURCE_SHORT"
-          containerStyles={{ mx: 'auto', my: 2 }}
+          autoplay={true}
         />
+        <Typography sx={{ my: '1rem !important' }}>
+          {t.rich('transcriptLink', {
+            link: (children) => (
+              <Link onClick={() => setOpenTranscriptModal(true)}>{children}</Link>
+            ),
+          })}
+        </Typography>
         <VideoTranscriptModal
           videoName={name}
           content={video_transcript}
diff --git a/components/storyblok/StoryblokCoursePage.tsx b/components/storyblok/StoryblokCoursePage.tsx
index de34edf5d..316368e64 100644
--- a/components/storyblok/StoryblokCoursePage.tsx
+++ b/components/storyblok/StoryblokCoursePage.tsx
@@ -55,6 +55,8 @@ export interface StoryblokCoursePageProps {
   live_end_date: string;
   live_soon_content: ISbRichtext;
   live_now_content: ISbRichtext;
+  languages: string[]; // TODO: implement this field - currently uses FF_DISABLED_COURSES env var
+  component: 'Course';
 }
 
 const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
diff --git a/components/storyblok/StoryblokRelatedContent.tsx b/components/storyblok/StoryblokRelatedContent.tsx
index 63692d25f..41b026535 100644
--- a/components/storyblok/StoryblokRelatedContent.tsx
+++ b/components/storyblok/StoryblokRelatedContent.tsx
@@ -1,13 +1,20 @@
-import { Box, Button, Card, CardContent, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+import { EXERCISE_CATEGORIES, RELATED_CONTENT_CATEGORIES } from '../../constants/enums';
 import { rowStyle } from '../../styles/common';
-import Link from '../common/Link';
+import { RelatedContentCard } from '../cards/RelatedContentCard';
 import { StoryblokCoursePageProps } from './StoryblokCoursePage';
 import { StoryblokResourceConversationPageProps } from './StoryblokResourceConversationPage';
 import { StoryblokResourceShortPageProps } from './StoryblokResourceShortPage';
 import { StoryblokSessionPageProps } from './StoryblokSessionPage';
 
+const containerStyle = {
+  ...rowStyle,
+} as const;
+
 export interface StoryblokRelatedContentStory extends Omit<ISbStoryData, 'content'> {
   content:
     | StoryblokCoursePageProps
@@ -21,42 +28,54 @@ export interface StoryblokRelatedContentProps {
   relatedExercises: string[];
 }
 
-const cardStyles = { width: '32%', mb: 2 } as const;
-
 export const StoryblokRelatedContent = (props: StoryblokRelatedContentProps) => {
   const { relatedContent, relatedExercises } = props;
   const tExerciseNames = useTranslations('Shared.exerciseNames');
+  const router = useRouter();
 
   const relatedExercisesItems = relatedExercises.map((relatedExerciseId) => {
-    const pageUrl = relatedExerciseId.includes('grounding-') ? 'grounding' : 'activities';
+    const exerciseCategory: EXERCISE_CATEGORIES = relatedExerciseId.includes('grounding-')
+      ? EXERCISE_CATEGORIES.GROUNDING
+      : EXERCISE_CATEGORIES.ACTIVITIES;
+
     return {
       id: relatedExerciseId,
       name: tExerciseNames(relatedExerciseId),
-      href: `/${pageUrl}?openacc=${relatedExerciseId}`,
+      href: `/${exerciseCategory}?openacc=${relatedExerciseId}`,
+      category: exerciseCategory,
     };
   });
 
+  const disabledCoursesString = process.env.FF_DISABLED_COURSES;
+
+  const filteredRelatedContent = useMemo(() => {
+    return relatedContent.filter(
+      (story) =>
+        (story.content.languages
+          ? story.content.languages.includes(router.locale || 'en')
+          : true) && !disabledCoursesString?.includes(`${router.locale}/${story.full_slug}`),
+    );
+  }, [relatedContent, disabledCoursesString, router.locale]);
+
   return (
-    <Box sx={rowStyle}>
-      {relatedContent.map((relatedContentItem) => (
-        <Card sx={cardStyles} key={`related_content_${relatedContentItem.id}`}>
-          <CardContent>
-            <Typography variant="h3">{relatedContentItem.content.name}</Typography>
-            <Button component={Link} href={relatedContentItem.full_slug} variant="contained">
-              Open
-            </Button>
-          </CardContent>
-        </Card>
+    <Box sx={containerStyle}>
+      {filteredRelatedContent.map((relatedContentItem) => (
+        <RelatedContentCard
+          key={`related_content_${relatedContentItem.id}`}
+          title={relatedContentItem.name}
+          href={`/${relatedContentItem.full_slug}`}
+          category={
+            relatedContentItem.content.component.toLowerCase() as RELATED_CONTENT_CATEGORIES
+          }
+        />
       ))}
       {relatedExercisesItems.map((relatedExerciseItem) => (
-        <Card sx={cardStyles} key={`related_exercise_${relatedExerciseItem.id}`}>
-          <CardContent>
-            <Typography variant="h3">{relatedExerciseItem.name}</Typography>
-            <Button component={Link} href={relatedExerciseItem.href} variant="contained">
-              Open
-            </Button>
-          </CardContent>
-        </Card>
+        <RelatedContentCard
+          key={`related_exercise_${relatedExerciseItem.id}`}
+          title={relatedExerciseItem.name}
+          href={relatedExerciseItem.href}
+          category={relatedExerciseItem.category}
+        />
       ))}
     </Box>
   );
diff --git a/components/storyblok/StoryblokResourceConversationPage.tsx b/components/storyblok/StoryblokResourceConversationPage.tsx
index 7d481c6a0..2889fee7a 100644
--- a/components/storyblok/StoryblokResourceConversationPage.tsx
+++ b/components/storyblok/StoryblokResourceConversationPage.tsx
@@ -13,6 +13,7 @@ import {
 } from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
 import { Resource } from '../../store/resourcesSlice';
+import theme from '../../styles/theme';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
 import { SignUpBanner } from '../banner/SignUpBanner';
@@ -35,6 +36,8 @@ export interface StoryblokResourceConversationPageProps {
   page_sections: StoryblokPageSectionProps[];
   related_content: StoryblokRelatedContentStory[];
   related_exercises: string[];
+  languages: string[];
+  component: 'resource_conversation';
 }
 
 const StoryblokResourceConversationPage = (props: StoryblokResourceConversationPageProps) => {
@@ -133,7 +136,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
           </>
         )}
       </Head>
-      <Container>
+      <Container sx={{ background: theme.palette.bloomGradient }}>
         <Typography variant="h1">{name}</Typography>
         <Typography variant="h3">Progress: {resourceProgress}</Typography>
         {render(description, RichTextOptions)}
@@ -156,6 +159,8 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
             eventData={eventData}
           />
         )}
+      </Container>
+      <Container>
         <Typography variant="h2">Related content</Typography>
         <StoryblokRelatedContent
           relatedContent={related_content}
diff --git a/components/storyblok/StoryblokResourceShortPage.tsx b/components/storyblok/StoryblokResourceShortPage.tsx
index 1134b9c74..c81e820e2 100644
--- a/components/storyblok/StoryblokResourceShortPage.tsx
+++ b/components/storyblok/StoryblokResourceShortPage.tsx
@@ -1,29 +1,52 @@
-import { Box, Container, Typography } from '@mui/material';
-import { ISbRichtext, storyblokEditable } from '@storyblok/react';
+import { Box, Button, Container, Typography } from '@mui/material';
+import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useEffect, useMemo, useState } from 'react';
-import { render } from 'storyblok-rich-text-react-renderer';
 import { PROGRESS_STATUS, RESOURCE_CATEGORIES } from '../../constants/enums';
 import {
   RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED,
   RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED,
   RESOURCE_SHORT_VIDEO_VIEWED,
+  RESOURCE_SHORT_VIDEO_VISIT_SESSION,
 } from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
 import { Resource } from '../../store/resourcesSlice';
+import { columnStyle, rowStyle } from '../../styles/common';
+import theme from '../../styles/theme';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
-import { RichTextOptions } from '../../utils/richText';
 import { SignUpBanner } from '../banner/SignUpBanner';
+import Link from '../common/Link';
+import ProgressStatus from '../common/ProgressStatus';
 import ResourceFeedbackForm from '../forms/ResourceFeedbackForm';
 import { ResourceCompleteButton } from '../resources/ResourceCompleteButton';
 import { ResourceShortVideo } from '../resources/ResourceShortVideo';
 import { StoryblokPageSectionProps } from './StoryblokPageSection';
 import { StoryblokRelatedContent, StoryblokRelatedContentStory } from './StoryblokRelatedContent';
-import { StoryblokSessionPageProps } from './StoryblokSessionPage';
-import { videoConfig } from './StoryblokVideo';
-const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });
+
+const headerStyle = { ...rowStyle, flexWrap: { xs: 'wrap', md: 'no-wrap' }, gap: 5 } as const;
+const headerRightStyle = {
+  ...columnStyle,
+  justifyContent: 'flex-end',
+  flex: { md: 1 },
+  width: { md: '100%' },
+  height: { md: 290 },
+} as const;
+
+const headerLeftStyles = {
+  width: 514, // >515px enables the "watch on youtube" button
+  maxWidth: '100%',
+} as const;
+
+const progressStyle = {
+  ...rowStyle,
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: 3,
+  '.MuiBox-root': {
+    mt: 0,
+  },
+} as const;
 
 export interface StoryblokResourceShortPageProps {
   storyId: number;
@@ -35,9 +58,12 @@ export interface StoryblokResourceShortPageProps {
   video: { url: string };
   video_transcript: ISbRichtext;
   page_sections: StoryblokPageSectionProps[];
-  related_session: StoryblokSessionPageProps;
+  related_session: ISbStoryData[];
+  related_course: ISbStoryData | null;
   related_content: StoryblokRelatedContentStory[];
   related_exercises: string[];
+  languages: string[];
+  component: 'resource_short_video';
 }
 
 const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
@@ -52,10 +78,10 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     video_transcript,
     page_sections,
     related_session,
+    related_course,
     related_content,
     related_exercises,
   } = props;
-
   const t = useTranslations('Resources');
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
@@ -111,7 +137,13 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     );
   }, [openTranscriptModal, name, eventData]);
 
-  const videoOptions = videoConfig(video);
+  const redirectToSession = () => {
+    logEvent(RESOURCE_SHORT_VIDEO_VISIT_SESSION, {
+      ...eventData,
+      shorts_name: name,
+      session_name: related_session[0].name,
+    });
+  };
 
   return (
     <Box
@@ -139,32 +171,54 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           </>
         )}
       </Head>
-      <Container>
+      <Container sx={{ background: theme.palette.bloomGradient }}>
         <Typography variant="h1">{name}</Typography>
-        <Typography variant="h3">Progress: {resourceProgress}</Typography>
-        {render(description, RichTextOptions)}
-        <ResourceShortVideo
-          eventData={eventData}
-          resourceProgress={resourceProgress}
-          name={name}
-          storyId={storyId}
-          video={video}
-          video_transcript={video_transcript}
-        />
-        {resourceProgress !== PROGRESS_STATUS.COMPLETED && (
-          <ResourceCompleteButton
-            category={RESOURCE_CATEGORIES.SHORT_VIDEO}
-            storyId={storyId}
-            eventData={eventData}
-          />
-        )}
-        <Typography variant="h2" mt={6}>
-          Related content
-        </Typography>
-        <StoryblokRelatedContent
-          relatedContent={related_content}
-          relatedExercises={related_exercises}
-        />
+        <Box sx={headerStyle}>
+          <Box sx={headerLeftStyles}>
+            <ResourceShortVideo
+              eventData={eventData}
+              resourceProgress={resourceProgress}
+              name={name}
+              storyId={storyId}
+              video={video}
+              video_transcript={video_transcript}
+            />
+            {isLoggedIn && (
+              <Box sx={progressStyle}>
+                {resourceProgress && <ProgressStatus status={resourceProgress} />}
+
+                {resourceProgress !== PROGRESS_STATUS.COMPLETED && (
+                  <ResourceCompleteButton
+                    category={RESOURCE_CATEGORIES.SHORT_VIDEO}
+                    storyId={storyId}
+                    eventData={eventData}
+                  />
+                )}
+              </Box>
+            )}
+          </Box>
+          <Box sx={headerRightStyle}>
+            {/* {render(description, RichTextOptions)} */}
+
+            <Typography component="h2" mb={2}>
+              {t('sessionDetail', {
+                sessionNumber: related_session[0].position / 10 - 1,
+                sessionName: related_session[0].name,
+                courseName: related_course?.content.name,
+              })}
+            </Typography>
+            <Button
+              component={Link}
+              href={`/${related_session[0].full_slug}`}
+              onClick={redirectToSession}
+              variant="contained"
+              color="secondary"
+              sx={{ mr: 'auto' }}
+            >
+              {t('sessionButtonLabel')}
+            </Button>
+          </Box>
+        </Box>
       </Container>
       {resourceId && (
         <Container sx={{ bgcolor: 'background.paper' }}>
@@ -174,6 +228,14 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           />
         </Container>
       )}
+      <Container>
+        <Typography variant="h2">Related content</Typography>
+        <StoryblokRelatedContent
+          relatedContent={related_content}
+          relatedExercises={related_exercises}
+        />
+      </Container>
+
       {!isLoggedIn && <SignUpBanner />}
     </Box>
   );
diff --git a/components/storyblok/StoryblokSessionPage.tsx b/components/storyblok/StoryblokSessionPage.tsx
index b50b3d63a..6d36595e9 100644
--- a/components/storyblok/StoryblokSessionPage.tsx
+++ b/components/storyblok/StoryblokSessionPage.tsx
@@ -52,6 +52,8 @@ export interface StoryblokSessionPageProps {
   bonus: ISbRichtext | BonusContent[];
   coming_soon: boolean;
   coming_soon_content: ISbRichtext;
+  languages: string[];
+  component: 'Session' | 'session_iba';
 }
 
 const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
diff --git a/components/video/Video.tsx b/components/video/Video.tsx
index 4e7b7865f..b3b1b78e5 100644
--- a/components/video/Video.tsx
+++ b/components/video/Video.tsx
@@ -2,6 +2,7 @@ import { Box, SxProps, Theme, debounce } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { Dispatch, SetStateAction, useRef, useState } from 'react';
 import { OnProgressProps } from 'react-player/base';
+import { YouTubeConfig } from 'react-player/youtube';
 import logEvent, { EventUserData } from '../../utils/logEvent';
 // See React Player Hydration issue https://github.com/cookpete/react-player/issues/1474
 const ReactPlayer = dynamic(() => import('react-player/youtube'), { ssr: false });
@@ -19,14 +20,24 @@ const videoStyle = {
 
 interface VideoProps {
   url: string;
+  autoplay?: boolean;
   eventData: EventUserData;
   eventPrefix: string;
   containerStyles?: SxProps<Theme>;
   setVideoStarted?: Dispatch<SetStateAction<boolean>>;
+  setVideoFinished?: Dispatch<SetStateAction<boolean>>;
 }
 
 const Video = (props: VideoProps) => {
-  const { url, eventData, eventPrefix, containerStyles, setVideoStarted } = props;
+  const {
+    url,
+    autoplay = false,
+    eventData,
+    eventPrefix,
+    containerStyles,
+    setVideoStarted,
+    setVideoFinished,
+  } = props;
   const [videoDuration, setVideoDuration] = useState<number>(0);
   const [videoTimePlayed, setVideoTimePlayed] = useState<number>(0);
 
@@ -39,6 +50,8 @@ const Video = (props: VideoProps) => {
   };
 
   const videoEnded = () => {
+    setVideoFinished && setVideoFinished(true);
+
     if (player.current) {
       logEvent(`${eventPrefix}_VIDEO_FINISHED`, {
         ...eventData,
@@ -78,6 +91,23 @@ const Video = (props: VideoProps) => {
     maxWidth: 514, // <515px prevents the "Watch on youtube" button
   } as const;
 
+  const videoConfig = (video: { url: string }): YouTubeConfig => {
+    return video.url.indexOf('youtu.be') > -1 || video.url.indexOf('youtube') > -1
+      ? {
+          embedOptions: {
+            host: 'https://www.youtube-nocookie.com',
+          },
+          ...(autoplay && {
+            playerVars: {
+              autoplay: 1, // note this doesnt work consistently as autoplay is often blocked by browsers
+            },
+          }),
+        }
+      : {};
+  };
+
+  console.log(videoConfig({ url }));
+
   return (
     <Box sx={containerStyle}>
       <Box sx={videoContainerStyle}>
@@ -90,12 +120,14 @@ const Video = (props: VideoProps) => {
           onPlay={() => videoPausedOrPlayed(true)}
           onEnded={videoEnded}
           onProgress={handleProgress}
+          playing={true}
           style={videoStyle}
           width="100%"
           height="100%"
           url={url}
           controls
           modestbranding={1}
+          {...videoConfig({ url })}
         />
       </Box>
     </Box>
diff --git a/constants/enums.ts b/constants/enums.ts
index 988be1f7e..2801d1b3f 100644
--- a/constants/enums.ts
+++ b/constants/enums.ts
@@ -17,6 +17,22 @@ export enum RESOURCE_CATEGORIES {
   CONVERSATION = 'conversation',
 }
 
+export enum CORE_CATEGORIES {
+  COURSE = 'course',
+  SESSION = 'session',
+  SESSION_IBA = 'session_iba',
+}
+
+export enum EXERCISE_CATEGORIES {
+  GROUNDING = 'grounding',
+  ACTIVITIES = 'activities',
+}
+
+export type RELATED_CONTENT_CATEGORIES =
+  | RESOURCE_CATEGORIES
+  | CORE_CATEGORIES
+  | EXERCISE_CATEGORIES;
+
 export enum EMAIL_REMINDERS_FREQUENCY {
   TWO_WEEKS = 'TWO_WEEKS',
   ONE_MONTH = 'ONE_MONTH',
diff --git a/constants/events.ts b/constants/events.ts
index 9af9bc01a..e3de3c8ef 100644
--- a/constants/events.ts
+++ b/constants/events.ts
@@ -99,12 +99,13 @@ export const RESOURCE_SHORT_VIDEO_PAUSED = 'RESOURCE_SHORT_VIDEO_PAUSED';
 export const RESOURCE_SHORT_VIDEO_FINISHED = 'RESOURCE_SHORT_VIDEO_FINISHED';
 export const RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED = 'RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED';
 export const RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED = 'RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED';
-export const RESOURCE_SHORT_COMPLETE_REQUEST = 'RESOURCE_SHORT_COMPLETE_REQUEST';
-export const RESOURCE_SHORT_COMPLETE_SUCCESS = 'RESOURCE_SHORT_COMPLETE_SUCCESS';
-export const RESOURCE_SHORT_COMPLETE_ERROR = 'RESOURCE_SHORT_COMPLETE_ERROR';
+export const RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST = 'RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST';
+export const RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS = 'RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS';
+export const RESOURCE_SHORT_VIDEO_COMPLETE_ERROR = 'RESOURCE_SHORT_VIDEO_COMPLETE_ERROR';
 export const RESOURCE_CONVERSATION_COMPLETE_REQUEST = 'RESOURCE_CONVERSATION_COMPLETE_REQUEST';
 export const RESOURCE_CONVERSATION_COMPLETE_SUCCESS = 'RESOURCE_CONVERSATION_COMPLETE_SUCCESS';
 export const RESOURCE_CONVERSATION_COMPLETE_ERROR = 'RESOURCE_CONVERSATION_COMPLETE_ERROR';
+export const RESOURCE_SHORT_VIDEO_VISIT_SESSION = 'RESOURCE_SHORT_VIDEO_VISIT_SESSION';
 
 export const SESSION_VIEWED = 'SESSION_VIEWED';
 export const SESSION_VIDEO_STARTED = 'SESSION_VIDEO_STARTED';
diff --git a/messages/resources/en.json b/messages/resources/en.json
index dfe4bea59..b4d644012 100644
--- a/messages/resources/en.json
+++ b/messages/resources/en.json
@@ -3,6 +3,9 @@
     "conversations": "Conversations",
     "shorts": "Shorts",
     "completed": "Completed",
+    "sessionDetail": "This clip is from Session {sessionNumber}, {sessionName}, from our {courseName} course.",
+    "sessionButtonLabel": "Watch full session",
+    "transcriptLink": "Watch the video or read the <link>transcript</link>.",
     "resourceFeedback": {
       "title": "How was this learning?",
       "subtitle": "We’d love to hear how you found this learning. Your feedback helps us to improve our resources.",
diff --git a/messages/shared/en.json b/messages/shared/en.json
index 841a25786..33867fce9 100644
--- a/messages/shared/en.json
+++ b/messages/shared/en.json
@@ -101,6 +101,15 @@
       "description2": "Sign up today to get access to all of our content and explore everything Bloom has to offer!",
       "button": "Get started"
     },
+    "relatedContent": {
+      "short_video": "Short",
+      "conversation": "Conversation",
+      "course": "Course",
+      "session": "Session",
+      "session_iba": "Session",
+      "grounding": "Grounding",
+      "activities": "Activity"
+    },
     "exerciseNames": {
       "activities-thought-diaries": "Thought diaries",
       "activities-stream-of-consciousness-journaling": "Stream-of-consciousness journaling",
diff --git a/pages/shorts/[slug].tsx b/pages/shorts/[slug].tsx
index 6871ec0b3..3386e9bb5 100644
--- a/pages/shorts/[slug].tsx
+++ b/pages/shorts/[slug].tsx
@@ -9,13 +9,14 @@ import NoDataAvailable from '../../components/common/NoDataAvailable';
 import StoryblokResourceShortPage, {
   StoryblokResourceShortPageProps,
 } from '../../components/storyblok/StoryblokResourceShortPage';
-import { getStoryblokPageProps } from '../../utils/getStoryblokPageProps';
+import { getStoryblokPageProps, getStoryblokPagesByUuids } from '../../utils/getStoryblokPageProps';
 
 interface Props {
   story: ISbStoryData | null;
+  related_course: ISbStoryData | null;
 }
 
-const ResourceShortOverview: NextPage<Props> = ({ story }) => {
+const ResourceShortOverview: NextPage<Props> = ({ story, related_course }) => {
   story = useStoryblokState(story);
 
   if (!story) {
@@ -26,6 +27,7 @@ const ResourceShortOverview: NextPage<Props> = ({ story }) => {
     <>
       <StoryblokResourceShortPage
         {...(story.content as StoryblokResourceShortPageProps)}
+        related_course={related_course}
         storyId={story.id}
       />
     </>
@@ -36,12 +38,31 @@ export async function getStaticProps({ locale, preview = false, params }: GetSta
   const slug = params?.slug instanceof Array ? params.slug.join('/') : params?.slug;
 
   const storyblokProps = await getStoryblokPageProps(`shorts/${slug}`, locale, preview, {
-    resolve_relations: ['resource_short_video.related_content'],
+    resolve_relations: [
+      'resource_short_video.related_content',
+      'resource_short_video.related_session',
+    ],
   });
+  let relatedCourse;
+
+  console.log('story', storyblokProps);
+  if (storyblokProps?.story.content.related_session.length) {
+    const storyblokCourseProps = await getStoryblokPagesByUuids(
+      storyblokProps?.story.content.related_session[0].content.course, // get course by course uuid
+      locale,
+      preview,
+      {},
+    );
+
+    if (storyblokCourseProps?.stories.length) {
+      relatedCourse = storyblokCourseProps.stories[0];
+    }
+  }
 
   return {
     props: {
       ...storyblokProps,
+      related_course: relatedCourse,
       messages: {
         ...require(`../../messages/shared/${locale}.json`),
         ...require(`../../messages/navigation/${locale}.json`),
diff --git a/utils/getStoryblokPageProps.ts b/utils/getStoryblokPageProps.ts
index b8fa55eeb..fae12b479 100644
--- a/utils/getStoryblokPageProps.ts
+++ b/utils/getStoryblokPageProps.ts
@@ -1,4 +1,4 @@
-import { ISbStoriesParams, getStoryblokApi } from '@storyblok/react';
+import { ISbStoriesParams, ISbStoryParams, getStoryblokApi } from '@storyblok/react';
 
 export const getStoryblokPageProps = async (
   slug: string | undefined,
@@ -33,3 +33,31 @@ export const getStoryblokPageProps = async (
     console.log('Error getting storyblok data for page', slug, sbParams, error);
   }
 };
+
+export const getStoryblokPagesByUuids = async (
+  uuids: string,
+  locale: string | undefined,
+  preview: boolean,
+  params: Partial<ISbStoryParams>,
+) => {
+  const sbParams: ISbStoriesParams = {
+    version: preview ? 'draft' : 'published',
+    language: locale || 'en',
+    by_uuids: uuids,
+    ...(params && params),
+  };
+
+  try {
+    const storyblokApi = getStoryblokApi();
+
+    let { data } = await storyblokApi.get(`cdn/stories`, sbParams);
+
+    return {
+      stories: data ? data.stories : null,
+      preview,
+      locale: locale || null,
+    };
+  } catch (error) {
+    console.log('Error getting storyblok data for page', uuids, sbParams, error);
+  }
+};