From 641766b1edc60eb421a4455567cdd92d9ff4b322 Mon Sep 17 00:00:00 2001
From: Kyle Huggins <kyle.huggins7@gmail.com>
Date: Mon, 9 Dec 2024 14:35:22 +0000
Subject: [PATCH 1/2] feat: stop double rendering placeholder image

---
 .../OakMediaClipStackListItem.tsx                | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
index 0d10a7cc..c28c3838 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
@@ -9,18 +9,18 @@ import {
   OakHeading,
   OakIcon,
   oakPlaceholder,
-  placeholderStyles,
 } from "@/components/atoms";
 import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius";
 import { parseColor } from "@/styles/helpers/parseColor";
 import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
 import { parseTransitions } from "@/styles/helpers/parseTransitions";
 import { getMediaQuery } from "@/styles/utils/responsiveStyle";
+import { parseSpacing } from "@/styles/helpers/parseSpacing";
 
 export type OakMediaClipStackListItemProps = {
   title: string;
   href: string;
-  imageUrl: string;
+  imageUrl?: string;
   imageAltText: string;
   numberOfClips: number;
 };
@@ -90,8 +90,11 @@ const ImageStackShadow = styled(OakBox)`
   }
 `;
 
-const StyledMediaStackImage = styled(OakImage)`
-  ${placeholderStyles}
+const StyledMediaClipImage = styled(OakImage)`
+  background-color: ${parseColor("bg-decorative2-very-subdued")};
+  background-size: ${parseSpacing("all-spacing-11")};
+  background-position: center;
+  background-repeat: no-repeat;
   height: 100%;
   width: 100%;
 `;
@@ -119,9 +122,8 @@ export const OakMediaClipStackListItem = (
           $position={"relative"}
           $mb={["space-between-none", "space-between-none", "space-between-xs"]}
         >
-          <StyledMediaStackImage
-            src={imageUrl ?? oakPlaceholder}
-            $showOakPlaceholder={!imageUrl ? true : false}
+          <StyledMediaClipImage
+            src={!imageUrl ? oakPlaceholder : imageUrl}
             alt={imageAltText}
             $borderRadius={"border-radius-s"}
             $overflow={"hidden"}

From 85b5804ef644535fecf307effbfa94bcb746c524 Mon Sep 17 00:00:00 2001
From: Kyle Huggins <kyle.huggins7@gmail.com>
Date: Mon, 9 Dec 2024 14:40:26 +0000
Subject: [PATCH 2/2] feat: update story and snapshot

---
 .../OakMediaClip/OakMediaClip.stories.tsx     | 70 +++++++++++--------
 .../OakMediaClipStackListItem.test.tsx.snap   |  4 ++
 2 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx b/src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx
index 96a49fc2..0e009dbf 100644
--- a/src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx
+++ b/src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx
@@ -108,14 +108,16 @@ export const Default: Story = {
 export const Playing: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        clipName="Playing Clip Name"
-        muxPlayingState={"playing"}
-        onClick={() => {
-          console.log(`Playing video`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          clipName="Playing Clip Name"
+          muxPlayingState={"playing"}
+          onClick={() => {
+            console.log(`Playing video`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
@@ -123,14 +125,16 @@ export const Playing: Story = {
 export const Played: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        clipName="Played Clip Name"
-        muxPlayingState={"played"}
-        onClick={() => {
-          console.log(`Played video`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          clipName="Played Clip Name"
+          muxPlayingState={"played"}
+          onClick={() => {
+            console.log(`Played video`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
@@ -138,14 +142,16 @@ export const Played: Story = {
 export const Audio: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        isAudioClip={true}
-        clipName="Audio Clip Name"
-        onClick={() => {
-          console.log(`Audio clip`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          isAudioClip={true}
+          clipName="Audio Clip Name"
+          onClick={() => {
+            console.log(`Audio clip`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
@@ -153,13 +159,15 @@ export const Audio: Story = {
 export const Disabled: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        disabled={true}
-        onClick={() => {
-          console.log(`Disabled video`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          disabled={true}
+          onClick={() => {
+            console.log(`Disabled video`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
index 93df92ba..5ce9095e 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
@@ -148,6 +148,10 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
 }
 
 .c7 {
+  background-color: #e7f6f5;
+  background-size: 4rem;
+  background-position: center;
+  background-repeat: no-repeat;
   height: 100%;
   width: 100%;
 }