feat: add autoplay functionality to media clips

package.json

@@ -42,7 +42,7 @@
     "storybook:build": "storybook build",
     "storybook:static-serve": "storybook build --quiet && http-server ./storybook-static --port=6006",
     "test": "jest --watch --collectCoverage=false",
-    "test:coverage": "jest --watch",
+    "test:coverage": "jest --silent --watch",
     "test:ci": "jest",
     "test:pages": "jest -c ./jest.pages.config.js ./src/__tests__",
     "test:components": "jest -c ./jest.components.config.js ./src/components",
@@ -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.54.0",
+    "@oaknational/oak-components": "^1.55.0",
     "@oaknational/oak-consent-client": "^2.1.1",
     "@oaknational/oak-curriculum-schema": "^1.38.0",
     "@oaknational/oak-pupil-client": "^2.12.3",

src/components/TeacherViews/LessonMedia/LessonMedia.test.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { useRouter } from "next/router";
 import { within } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
@@ -18,6 +19,60 @@ jest.mock("next/router", () => ({
   useRouter: jest.fn(),
 }));
 
+const currentErrorEvent = { detail: { data: { type: "networkError" } } };
+
+jest.mock("@mux/mux-player-react/lazy", () => {
+  // @ts-expect-error - MuxPlayer mock
+  return forwardRef(({ onError, onPlay, onPause }, ref) => {
+    ref; // This prevents warning about ref not being used
+
+    return (
+      <div data-testid="mux-player">
+        <button
+          data-testid="error-button"
+          onClick={() => {
+            onError(currentErrorEvent);
+          }}
+        >
+          Error
+        </button>
+        <button data-testid="play-button" onClick={onPlay}>
+          Play
+        </button>
+        <button data-testid="pause-button" onClick={onPause}>
+          Pause
+        </button>
+      </div>
+    );
+  });
+});
+
+const localStorageMock = (() => {
+  let store = {} as Storage;
+
+  return {
+    getItem(key: string) {
+      return store[key];
+    },
+
+    setItem(key: string, value: string) {
+      store[key] = value;
+    },
+
+    removeItem(key: string) {
+      delete store[key];
+    },
+
+    clear() {
+      store = {} as Storage;
+    },
+  };
+})();
+
+Object.defineProperty(window, "sessionStorage", {
+  value: localStorageMock,
+});
+
 describe("LessonMedia view", () => {
   jest.mock(
     "@/components/TeacherComponents/helpers/lessonMediaHelpers/lessonMedia.helpers",
@@ -35,7 +90,7 @@ describe("LessonMedia view", () => {
     pathname: "/test-path",
   };
   beforeEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
     (useRouter as jest.Mock).mockReturnValue(mockRouter);
   });
 
@@ -57,15 +112,6 @@ describe("LessonMedia view", () => {
     );
   });
 
-  it("renders media clip player", () => {
-    const { getByTestId } = render(
-      <LessonMedia lesson={lesson} isCanonical={false} />,
-    );
-
-    const mediaClipWrapper = getByTestId("media-clip-wrapper");
-    expect(mediaClipWrapper).toBeInTheDocument();
-  });
-
   it("renders media clip player with correct amount of items", () => {
     const { getByTestId } = render(
       <LessonMedia lesson={lesson} isCanonical={false} />,
@@ -87,13 +133,13 @@ describe("LessonMedia view", () => {
     const mediaClipWrapper = getByTestId("media-clip-wrapper");
     const mediaClipList = within(mediaClipWrapper).getByRole("list");
     const mediaClipListItems = within(mediaClipList).getAllByRole("listitem");
-    const mediaClipItem =
+    const videoItem =
       mediaClipListItems[0] &&
       within(mediaClipListItems[0]).getByRole("button");
 
-    if (mediaClipItem) {
+    if (videoItem) {
       const user = userEvent.setup();
-      await user.click(mediaClipItem);
+      await user.click(videoItem);
 
       expect(mockRouter.replace).toHaveBeenCalledTimes(1);
       expect(mockRouter.replace).toHaveBeenCalledWith(
@@ -111,4 +157,52 @@ describe("LessonMedia view", () => {
       );
     }
   });
+
+  it("calls router with correct parameters when audio is clicked", async () => {
+    const { getByTestId } = render(
+      <LessonMedia lesson={lesson} isCanonical={false} />,
+    );
+
+    const mediaClipWrapper = getByTestId("media-clip-wrapper");
+    const mediaClipList = within(mediaClipWrapper).getByRole("list");
+    const mediaClipListItems = within(mediaClipList).getAllByRole("listitem");
+    const audioItem =
+      mediaClipListItems[1] &&
+      within(mediaClipListItems[1]).getByRole("button");
+
+    if (audioItem) {
+      const user = userEvent.setup();
+      await user.click(audioItem);
+
+      expect(mockRouter.replace).toHaveBeenCalledTimes(1);
+      expect(mockRouter.replace).toHaveBeenCalledWith(
+        {
+          pathname: "/test-path",
+          query: {
+            lessonSlug: "running-as-a-team",
+            programmeSlug: "physical-education-ks4",
+            unitSlug: "running-and-jumping",
+            video: "running",
+          },
+        },
+        undefined,
+        { shallow: true },
+      );
+    }
+  });
+
+  it("adds video slug to session storage when 'play' is pressed on the video", async () => {
+    const { getByTestId } = render(
+      <LessonMedia lesson={lesson} isCanonical={false} />,
+    );
+
+    const videoPlayerWrapper = getByTestId("video-player-wrapper");
+    const playButton = within(videoPlayerWrapper).getByText("Play");
+
+    await userEvent.click(playButton);
+
+    expect(sessionStorage.getItem("playedVideosList")).toBe(
+      "introduction-physical-exercise-video",
+    );
+  });
 });

src/components/TeacherViews/LessonMedia/LessonMedia.view.tsx

@@ -91,34 +91,35 @@ export const LessonMedia = (props: LessonMediaProps) => {
   const playedVideosList: string[] =
     sessionStorage.getItem("playedVideosList")?.split(",") || [];
 
-  // action performed on media clip item click
-  const onMediaClipClick = (clipSlug: string) => {
-    const clickedMediaClip = listOfAllClips.find(
-      (clip) => clip.slug === clipSlug,
-    );
-
-    setCurrentClip(clickedMediaClip);
-    setCurrentIndex(
-      clickedMediaClip ? listOfAllClips.indexOf(clickedMediaClip) : 0,
-    );
-
-    // add video parameter to the url
+  const goToTheNextClip = (slug: string) =>
     router.replace(
       {
         pathname: router.pathname,
         query: {
           programmeSlug: programmeSlug,
           unitSlug: unitSlug,
           lessonSlug: lessonSlug,
-          video: clipSlug,
+          video: slug,
         },
       },
       undefined,
       { shallow: true },
     );
+
+  // action performed on media clip item click
+  const onMediaClipClick = (clipSlug: string) => {
+    const clickedMediaClip = listOfAllClips.find(
+      (clip) => clip.slug === clipSlug,
+    );
+
+    setCurrentClip(clickedMediaClip);
+    setCurrentIndex(
+      clickedMediaClip ? listOfAllClips.indexOf(clickedMediaClip) : 0,
+    );
+    goToTheNextClip(clipSlug);
   };
 
-  const handleVideoPlayed = (event: VideoEventCallbackArgs) => {
+  const handlePlayedVideo = (event: VideoEventCallbackArgs) => {
     if (event.event === "play") {
       if (currentClip && !playedVideosList.includes(currentClip?.slug)) {
         // add played video to session storage
@@ -128,6 +129,12 @@ export const LessonMedia = (props: LessonMediaProps) => {
         ].toString();
         sessionStorage.setItem("playedVideosList", updatedPlayedVideosList);
       }
+    } else if (event.event === "end") {
+      const nextClip = listOfAllClips[currentIndex + 1];
+
+      if (nextClip) {
+        goToTheNextClip(nextClip.slug);
+      }
     }
   };
 
@@ -138,7 +145,7 @@ export const LessonMedia = (props: LessonMediaProps) => {
       title={currentClip.mediaClipTitle}
       location={"lesson"}
       isLegacy={false}
-      userEventCallback={handleVideoPlayed}
+      userEventCallback={handlePlayedVideo}
     />
   );
 
@@ -282,6 +289,8 @@ export const LessonMedia = (props: LessonMediaProps) => {
               $background={"black"}
               $overflow={["visible", "visible", "hidden"]}
               $height={"100%"}
+              $br={"border-solid-m"}
+              data-testid="video-player-wrapper"
             >
               {videoPlayer}
             </OakFlex>