fix: resolved conflicts

CHANGE_LOG.md

@@ -1,3 +1,11 @@
+# [1.647.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.646.0...v1.647.0) (2024-12-09)
+
+
+### Features
+
+* adds media clips to lesson overview ([525d90e](https://github.com/oaknational/Oak-Web-Application/commit/525d90ef0c6d6b42eb308a5a0dd1f0b6f55964b7))
+* update package ([b00a234](https://github.com/oaknational/Oak-Web-Application/commit/b00a2347853ff68e9266a516fe492fff1c0767e0))
+
 # [1.646.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.645.0...v1.646.0) (2024-12-09)
 
 

package.json

@@ -76,7 +76,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mux/mux-node": "^8.8.0",
     "@mux/mux-player-react": "^3.1.0",
-    "@oaknational/oak-components": "^1.56.0",
+    "@oaknational/oak-components": "^1.60.0",
     "@oaknational/oak-consent-client": "^2.1.1",
     "@oaknational/oak-curriculum-schema": "^1.39.0",
     "@oaknational/oak-pupil-client": "^2.12.3",

sonar-project.properties

@@ -4,7 +4,7 @@ sonar.organization=oaknational
 
 # This is the name and version displayed in the SonarCloud UI.
 sonar.projectName=Oak Web Application
-sonar.projectVersion=v1.646.0
+sonar.projectVersion=v1.647.0
 sonar.projectDescription=Oak National Academy Web Application
 sonar.links.homepage=https://www.thenational.academy/
 

src/common-lib/urls/urls.ts

@@ -227,11 +227,17 @@ export type LessonMediaLinkProps = {
   programmeSlug: string;
   unitSlug: string;
   lessonSlug: string;
+  query?: {
+    video: string;
+  };
 };
 
 export type LessonMediaCanonicalLinkProps = {
   page: "lesson-media-canonical";
   lessonSlug: string;
+  query?: {
+    video: string;
+  };
 };
 
 export type LessonShareLinkProps = {

src/components/LessonPlayAllButton/LessonPlayAllButton.tsx

@@ -0,0 +1,41 @@
+import { OakTertiaryButton } from "@oaknational/oak-components";
+import React, { FC } from "react";
+
+import { resolveOakHref } from "@/common-lib/urls";
+
+type LessonPlayAllButtonProps = {
+  lessonSlug: string;
+  programmeSlug: string | null;
+  unitSlug: string | null;
+};
+
+const LessonPlayAllButton: FC<LessonPlayAllButtonProps> = ({
+  unitSlug,
+  lessonSlug,
+  programmeSlug,
+}) => {
+  return (
+    <OakTertiaryButton
+      element="a"
+      href={
+        programmeSlug && unitSlug
+          ? resolveOakHref({
+              page: "lesson-media",
+              lessonSlug: lessonSlug,
+              programmeSlug: programmeSlug,
+              unitSlug: unitSlug,
+            })
+          : resolveOakHref({
+              page: "lesson-media-canonical",
+              lessonSlug: lessonSlug,
+            })
+      }
+      isTrailingIcon
+      iconName="arrow-right"
+    >
+      Play all
+    </OakTertiaryButton>
+  );
+};
+
+export default LessonPlayAllButton;

src/components/LessonPlayAllButton/index.tsx

@@ -0,0 +1 @@
+export { default } from "./LessonPlayAllButton";

src/components/SharedComponents/VideoPlayer/useMediaClipThumbnailsUrl.ts

@@ -0,0 +1,27 @@
+import { PlaybackPolicy, useSignedThumbnailToken } from "./useSignedVideoToken";
+
+interface UseThumbnailImageProps {
+  playbackId: string;
+  playbackPolicy: PlaybackPolicy;
+  isLegacy?: boolean;
+}
+
+const useMediaClipThumbnailUrl = ({
+  playbackId,
+  playbackPolicy,
+  isLegacy = false,
+}: UseThumbnailImageProps) => {
+  const thumbnailToken = useSignedThumbnailToken({
+    playbackId,
+    playbackPolicy,
+    isLegacy,
+  });
+
+  if (thumbnailToken.playbackToken) {
+    return `https://image.mux.com/${playbackId}/thumbnail.png?token=${thumbnailToken.playbackToken}`;
+  } else {
+    return undefined;
+  }
+};
+
+export default useMediaClipThumbnailUrl;

src/components/TeacherComponents/LessonItemContainer/LessonItemContainer.test.tsx

@@ -76,13 +76,13 @@ describe("LessonItemContainer", () => {
     );
     expect(getAllByRole("link")).toHaveLength(1);
   });
-
   it("doesn't render the download button without curriculum data", () => {
     const { getAllByRole } = renderWithTheme(
       <LessonItemContainer
         title={"Slide deck"}
         downloadable={true}
         isSpecialist={false}
+        displayMediaClipButton={false}
         anchorId="slide-deck"
         pageLinks={[]}
       >
@@ -234,4 +234,22 @@ describe("LessonItemContainer", () => {
     expect(slideDeckButton).not.toHaveFocus();
     expect(slideDeckButton).not.toBeVisible();
   });
+  it("renders the play all button when displayMediaClip is true and curriculum data is provided", () => {
+    const { getAllByRole } = renderWithTheme(
+      <LessonItemContainer
+        title={"Demonstration videos"}
+        downloadable={false}
+        anchorId={"media-clips"}
+        displayMediaClipButton={true}
+        isSpecialist={false}
+        slugs={lessonOverview}
+        pageLinks={[]}
+      >
+        <Card $background={"white"} $ba={3} $borderColor={"grey30"}>
+          Inner content
+        </Card>
+      </LessonItemContainer>,
+    );
+    expect(getAllByRole("link")).toHaveLength(1);
+  });
 });

src/components/TeacherComponents/LessonItemContainer/LessonItemContainer.tsx

@@ -16,6 +16,8 @@ import { LessonItemContainerLink } from "@/components/TeacherComponents/LessonIt
 import { Hr } from "@/components/SharedComponents/Typography";
 import AnchorTarget from "@/components/SharedComponents/AnchorTarget";
 import Box from "@/components/SharedComponents/Box";
+import { DownloadableLessonTitles } from "@/components/TeacherComponents/types/downloadAndShare.types";
+import LessonPlayAllButton from "@/components/LessonPlayAllButton/LessonPlayAllButton";
 
 export const getContainerId = (anchorId: string) => {
   return `${anchorId}-container`;
@@ -34,7 +36,10 @@ export type LessonItemTitle =
   | "Lesson video"
   | "Transcript"
   | "Lesson details"
-  | "Additional material";
+  | "Additional material"
+  | "Demonstration videos"
+  | "Audio clips"
+  | "Video & audio clips";
 
 type Slugs = {
   lessonSlug: string;
@@ -44,22 +49,23 @@ type Slugs = {
 
 export interface LessonItemContainerProps {
   children?: React.ReactNode;
-  title: LessonItemTitle;
+  title: LessonItemTitle | DownloadableLessonTitles;
   anchorId: LessonPageLinkAnchorId;
   downloadable?: boolean;
   shareable?: boolean;
+  displayMediaClipButton?: boolean;
   slugs?: Slugs;
   onDownloadButtonClick?: () => void;
   isFinalElement?: boolean;
   isSpecialist: boolean;
   pageLinks: ReturnType<typeof getPageLinksForLesson>;
 }
 
-const getPreselectedDownloadFromTitle = (title: LessonItemTitle) => {
+const getPreselectedDownloadFromTitle = (title: DownloadableLessonTitles) => {
   return containerTitleToPreselectMap[title]?.downloadType;
 };
 
-const getPreselectedQueryFromTitle = (title: LessonItemTitle) => {
+const getPreselectedQueryFromTitle = (title: DownloadableLessonTitles) => {
   return containerTitleToPreselectMap[title]?.shareType;
 };
 
@@ -71,22 +77,28 @@ export const LessonItemContainer = forwardRef<
     children,
     title,
     downloadable,
+    displayMediaClipButton,
     onDownloadButtonClick,
     slugs,
     anchorId,
     shareable,
     pageLinks,
   } = props;
-  const preselectedDownload = getPreselectedDownloadFromTitle(title);
-  const preselectedShare = getPreselectedQueryFromTitle(title);
+  const preselectedDownload = getPreselectedDownloadFromTitle(
+    title as DownloadableLessonTitles,
+  );
+  const preselectedShare = getPreselectedQueryFromTitle(
+    title as DownloadableLessonTitles,
+  );
   const [skipVideoButtonFocused, setSkipVideoButtonFocused] =
     useState<boolean>(false);
 
   const skipContentAnchor =
     anchorId === "video" ||
     anchorId === "lesson-guide" ||
     anchorId === "worksheet" ||
-    anchorId === "slide-deck"
+    anchorId === "slide-deck" ||
+    anchorId === "media-clips"
       ? pageLinks[pageLinks.findIndex((link) => link.anchorId === anchorId) + 1]
           ?.anchorId || undefined
       : undefined;
@@ -119,6 +131,9 @@ export const LessonItemContainer = forwardRef<
               {title}
             </OakHeading>
           )}
+          {displayMediaClipButton && slugs && (
+            <LessonPlayAllButton {...slugs} />
+          )}
           {downloadable && slugs && (
             <LessonItemContainerLink
               page={"download"}
@@ -139,6 +154,7 @@ export const LessonItemContainer = forwardRef<
               {...slugs}
             />
           )}
+
           {skipContentAnchor && (
             <OakSecondaryButton
               element="a"

src/components/TeacherComponents/LessonMediaClipWithThumbnail/LessonMediaClipWithThumbnail.tsx

@@ -1,10 +1,8 @@
 import { FC } from "react";
 import { OakMediaClip, OakMediaClipProps } from "@oaknational/oak-components";
 
-import {
-  PlaybackPolicy,
-  useSignedThumbnailToken,
-} from "@/components/SharedComponents/VideoPlayer/useSignedVideoToken";
+import { PlaybackPolicy } from "@/components/SharedComponents/VideoPlayer/useSignedVideoToken";
+import useMediaClipThumbnailUrl from "@/components/SharedComponents/VideoPlayer/useMediaClipThumbnailsUrl";
 
 export type LessonMediaClipWithThumbnailProps = Omit<
   OakMediaClipProps,
@@ -24,16 +22,12 @@ const LessonMediaClipWithThumbnail: FC<LessonMediaClipWithThumbnailProps> = ({
   playbackId,
   playbackPolicy,
 }: LessonMediaClipWithThumbnailProps) => {
-  const thumbnailToken = useSignedThumbnailToken({
+  const thumbnailImage = useMediaClipThumbnailUrl({
     playbackId,
     playbackPolicy,
     isLegacy: false,
   });
 
-  const thumbnailImage = thumbnailToken
-    ? `https://image.mux.com/${playbackId}/thumbnail.png?token=${thumbnailToken.playbackToken}`
-    : "";
-
   return (
     <OakMediaClip
       clipName={clipName}

src/components/TeacherComponents/LessonOverviewMediaClips/LessonOverviewClipWithThumbnail.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import {
+  OakMediaClipStackListItem,
+  OakMediaClipStackListItemProps,
+} from "@oaknational/oak-components";
+
+import { PlaybackPolicy } from "@/components/SharedComponents/VideoPlayer/useSignedVideoToken";
+import useMediaClipThumbnailUrl from "@/components/SharedComponents/VideoPlayer/useMediaClipThumbnailsUrl";
+
+export type LessonOverviewClipWithThumbnail = Omit<
+  OakMediaClipStackListItemProps,
+  "imageUrl" | "imageAltText"
+> & {
+  playbackId: string;
+  playbackPolicy: PlaybackPolicy;
+  numberOfClips: number;
+};
+
+const LessonOverviewClipWithThumbnail: FC<LessonOverviewClipWithThumbnail> = ({
+  title,
+  playbackId,
+  playbackPolicy,
+  numberOfClips,
+  href,
+}: LessonOverviewClipWithThumbnail) => {
+  const thumbnailImage = useMediaClipThumbnailUrl({
+    playbackId,
+    playbackPolicy,
+    isLegacy: false,
+  });
+
+  return (
+    <OakMediaClipStackListItem
+      title={title}
+      imageUrl={thumbnailImage}
+      imageAltText=""
+      href={href}
+      numberOfClips={numberOfClips}
+    />
+  );
+};
+
+export default LessonOverviewClipWithThumbnail;