Skip to content

Commit

Permalink
Merge pull request #332 from oaknational/feat/CTC-57-refactor-OakMedi…
Browse files Browse the repository at this point in the history 
…aClip-and-OakMediaClipList

feat: refactor OakMediaClip and OakMediaClipList
  • Loading branch information
@weronika-szalas
weronika-szalas authored Nov 29, 2024
2 parents f998766 + dacac15 commit cdf53f5
Show file tree
Hide file tree
Showing 7 changed files with 309 additions and 867 deletions.
6 changes: 3 additions & 3 deletions src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { StoryObj, Meta } from "@storybook/react";

import { OakMediaClip } from "./OakMediaClip";

import { OakFlex } from "@/components/atoms";
import { OakFlex, OakUL } from "@/components/atoms";

const meta: Meta<typeof OakMediaClip> = {
title: "Components/organisms/teacher/OakMediaClip",
Expand Down Expand Up @@ -69,7 +69,7 @@ type Story = StoryObj<typeof OakMediaClip>;
export const Default: Story = {
render: (args) => {
return (
<>
<OakUL $reset>
<OakMediaClip
{...args}
muxPlayingState={"standard"}
Expand All @@ -91,7 +91,7 @@ export const Default: Story = {
console.log(`Played video`);
}}
/>
</>
</OakUL>
);
},
args: {
Expand Down
231 changes: 119 additions & 112 deletions src/components/organisms/shared/OakMediaClip/OakMediaClip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
OakIcon,
OakImage,
OakP,
OakLI,
} from "@/components/atoms";
import { OakCombinedColorToken } from "@/styles";
import { InternalButton } from "@/components/atoms/InternalButton";
Expand Down Expand Up @@ -168,125 +169,131 @@ export const OakMediaClip = ({
const buttonStyles = getButtonStyles(muxPlayingState);

return (
<MediaButtonWrapper
$position={"relative"}
$borderRadius={"border-radius-s"}
>
<OakBox
className="grey-shadow"
$position={"absolute"}
$borderRadius={"border-radius-s"}
$width={"100%"}
$height={"100%"}
$top="all-spacing-0"
/>

<OakBox
className="yellow-shadow"
$position={"absolute"}
$borderRadius={"border-radius-s"}
$width={"100%"}
$height={"100%"}
$top="all-spacing-0"
/>
<StyledInternalButton
element={element}
tabIndex={0}
className="internal-button"
$width={"100%"}
$height={"100%"}
$background={buttonStyles.defaultBackground}
$borderColor="transparent"
$borderRadius={"border-radius-s"}
<OakLI $mb={"space-between-ssx"}>
<MediaButtonWrapper
$position={"relative"}
disabled={disabled}
defaultBorderColor="transparent"
$color={buttonStyles.defaultTextColor}
$hoverBackground={buttonStyles.hoverBackground}
$hoverBorderColor="transparent"
$hoverTextColor="text-primary"
$disabledBackground="bg-btn-secondary-disabled"
$disabledBorderColor="text-disabled"
$disabledTextColor="text-disabled"
justifyContent={"flex-start"}
onClick={onClick}
$pa={"inner-padding-xs"}
muxPlayingState={muxPlayingState}
$borderRadius={"border-radius-s"}
>
<OakFlex $flexDirection={"row"} $alignItems={"center"} $width={"100%"}>
<>
<ImageBox
$height={"all-spacing-10"}
$width={"all-spacing-15"}
$borderRadius={"border-radius-xs"}
$mr={"space-between-s"}
$position={"relative"}
disabled={disabled}
$flexShrink={0}
>
{!isAudioClip && thumbnailImage ? (
<OakImage
fill
$height={"100%"}
$width={"100%"}
src={thumbnailImage}
alt={imageAltText}
$borderRadius={"border-radius-xs"}
/>
) : (
<OakIcon
fill
$height={"100%"}
$width={"100%"}
iconName={"audio-clip-small"}
alt={imageAltText}
$borderRadius={"border-radius-xs"}
<OakBox
className="grey-shadow"
$position={"absolute"}
$borderRadius={"border-radius-s"}
$width={"100%"}
$height={"100%"}
$top="all-spacing-0"
/>

<OakBox
className="yellow-shadow"
$position={"absolute"}
$borderRadius={"border-radius-s"}
$width={"100%"}
$height={"100%"}
$top="all-spacing-0"
/>
<StyledInternalButton
element={element}
tabIndex={0}
className="internal-button"
$width={"100%"}
$height={"100%"}
$background={buttonStyles.defaultBackground}
$borderColor="transparent"
$borderRadius={"border-radius-s"}
$position={"relative"}
disabled={disabled}
defaultBorderColor="transparent"
$color={buttonStyles.defaultTextColor}
$hoverBackground={buttonStyles.hoverBackground}
$hoverBorderColor="transparent"
$hoverTextColor="text-primary"
$disabledBackground="bg-btn-secondary-disabled"
$disabledBorderColor="text-disabled"
$disabledTextColor="text-disabled"
justifyContent={"flex-start"}
onClick={onClick}
$pa={"inner-padding-xs"}
muxPlayingState={muxPlayingState}
>
<OakFlex
$flexDirection={"row"}
$alignItems={"center"}
$width={"100%"}
>
<>
<ImageBox
$height={"all-spacing-10"}
$width={"all-spacing-15"}
$borderRadius={"border-radius-xs"}
$mr={"space-between-s"}
$position={"relative"}
disabled={disabled}
$flexShrink={0}
>
{!isAudioClip && thumbnailImage ? (
<OakImage
fill
$height={"100%"}
$width={"100%"}
src={thumbnailImage}
alt={imageAltText}
$borderRadius={"border-radius-xs"}
/>
) : (
<OakIcon
fill
$height={"100%"}
$width={"100%"}
iconName={"audio-clip-small"}
alt={imageAltText}
$borderRadius={"border-radius-xs"}
/>
)}
<OakTimer
timeCode={timeCode}
$position={"absolute"}
$bottom={"space-between-sssx"}
$right={"space-between-sssx"}
/>
)}
<OakTimer
timeCode={timeCode}
$position={"absolute"}
$bottom={"space-between-sssx"}
$right={"space-between-sssx"}
/>
</ImageBox>
</ImageBox>

<TextBox
$width={"100%"}
$flexDirection={"column"}
$gap={"space-between-sssx"}
>
<OakHeading
$textOverflow={"ellipsis"}
tag="h4"
$font={"heading-7"}
$color={
!disabled ? buttonStyles.clipNameTitle : "text-disabled"
}
<TextBox
$width={"100%"}
$flexDirection={"column"}
$gap={"space-between-sssx"}
>
{clipName}
</OakHeading>
{learningCycle && (
<OakP
$color={!disabled ? "text-subdued" : "text-disabled"}
$font={"body-3"}
<OakHeading
$textOverflow={"ellipsis"}
$overflow={"hidden"}
$whiteSpace={"nowrap"}
tag="h4"
$font={"heading-7"}
$color={
!disabled ? buttonStyles.clipNameTitle : "text-disabled"
}
>
{learningCycle}
</OakP>
)}
</TextBox>
</>
{muxPlayingState === "played" && !disabled && (
<OakFlex $flexGrow={1}>
<OakTagFunctional label="Played" $background={"bg-neutral"} />
</OakFlex>
)}
</OakFlex>
</StyledInternalButton>
</MediaButtonWrapper>
{clipName}
</OakHeading>
{learningCycle && (
<OakP
$color={!disabled ? "text-subdued" : "text-disabled"}
$font={"body-3"}
$textOverflow={"ellipsis"}
$overflow={"hidden"}
$whiteSpace={"nowrap"}
>
{learningCycle}
</OakP>
)}
</TextBox>
</>
{muxPlayingState === "played" && !disabled && (
<OakFlex $flexGrow={1}>
<OakTagFunctional label="Played" $background={"bg-neutral"} />
</OakFlex>
)}
</OakFlex>
</StyledInternalButton>
</MediaButtonWrapper>
</OakLI>
);
};

Expand Down
Loading

0 comments on commit cdf53f5

Please sign in to comment.