Add linkContainer to Video component

Add linkContainer to Video component and improve mediabutton styles

Author: Kubit

src/components/video/components/linkAndActionButton.tsx

@@ -7,7 +7,7 @@ import { GenericLinkType } from '@/provider/genericComponents';
 
 import { LinkAndActionButtonAlignment, VideoButtonType } from '../types';
 import { VideoStyleType } from '../types/videoTheme';
-import { BottomContainerStyled } from '../video.styled';
+import { BottomContainerStyled, LinkContainerStyled } from '../video.styled';
 
 interface ILinkAndActionButton {
   styles: VideoStyleType;
@@ -40,16 +40,18 @@ export const LinkAndActionButton = ({
           </Button>
         )}
       {props.linkUrl && (
-        <Text
-          component={props.componentLink}
-          customTypography={props.styles.link}
-          decoration={TextDecorationType.UNDERLINE}
-          target={linkTarget}
-          url={props.linkUrl}
-          onClick={props.onLinkClick}
-        >
-          {props.linkText}
-        </Text>
+        <LinkContainerStyled styles={props.styles}>
+          <Text
+            component={props.componentLink}
+            customTypography={props.styles.link}
+            decoration={TextDecorationType.UNDERLINE}
+            target={linkTarget}
+            url={props.linkUrl}
+            onClick={props.onLinkClick}
+          >
+            {props.linkText}
+          </Text>
+        </LinkContainerStyled>
       )}
     </BottomContainerStyled>
   ) : null;

src/components/video/components/playStopButton.tsx

@@ -18,30 +18,29 @@ interface IPlayStopButton {
   handlePlayStopVideo?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-export const PlayStopButton = (props: IPlayStopButton): JSX.Element => {
+export const PlayStopButton = (props: IPlayStopButton): JSX.Element | null => {
   const device = useMediaDevice();
-  const ButtonBarPlay = (): JSX.Element | null =>
-    props.styles.buttonsBarPlayIcon?.size?.[device] ? (
-      <MediaButton
-        hasBackground={false}
-        icon={props.buttonsBarPlayIcon}
-        size={props.styles.buttonsBarPlayIcon?.size?.[device] as MediaButtonSizeType}
-        twisted={props.playing}
-        twistedIcon={props.buttonsBarPlayIconToTransition}
-        variant={props.styles.buttonsBarPlayIcon?.variant}
-        onClick={props.handlePlayStopVideo}
-      />
-    ) : null;
+  const ButtonBarPlay = props.styles.buttonsBarPlayIcon?.size?.[device] ? (
+    <MediaButton
+      hasBackground={false}
+      icon={props.buttonsBarPlayIcon}
+      size={props.styles.buttonsBarPlayIcon?.size?.[device] as MediaButtonSizeType}
+      twisted={props.playing}
+      twistedIcon={props.buttonsBarPlayIconToTransition}
+      variant={props.styles.buttonsBarPlayIcon?.variant}
+      onClick={props.handlePlayStopVideo}
+    />
+  ) : null;
   return device === DeviceBreakpointsType.DESKTOP ? (
     <Tooltip
       childrenAsButton={false}
       content={{ content: props.buttonsBarPlayIconTooltip }}
       tooltipAsModal={false}
       variant={props.styles.tooltip?.variant}
     >
-      <ButtonBarPlay />
+      {ButtonBarPlay}
     </Tooltip>
   ) : (
-    <ButtonBarPlay />
+    ButtonBarPlay
   );
 };

src/components/video/components/subtitleFullScreenButtons.tsx

@@ -33,31 +33,29 @@ interface ISubtitleFullScreenButtons extends IButtonBarSubtitles, IButtonBarFull
 export const SubtitleFullScreenButtons = (props: ISubtitleFullScreenButtons): JSX.Element => {
   const device = useMediaDevice();
 
-  const ButtonBarSubtitles = (props: IButtonBarSubtitles): JSX.Element | null =>
-    props.styles.buttonsBarSubtitlesIcon?.size?.[device] ? (
-      <MediaButton
-        hasBackground={false}
-        icon={props.buttonsBarSubtitlesIcon}
-        size={props.styles.buttonsBarSubtitlesIcon?.size?.[device] as MediaButtonSizeType}
-        twisted={props.subtitlesActivated}
-        twistedIcon={props.buttonsBarSubtitlesIconToTransition}
-        variant={props.styles.buttonsBarSubtitlesIcon?.variant}
-        onClick={props.onSubtitlesClick}
-      />
-    ) : null;
+  const ButtonBarSubtitles = props.styles.buttonsBarSubtitlesIcon?.size?.[device] ? (
+    <MediaButton
+      hasBackground={false}
+      icon={props.buttonsBarSubtitlesIcon}
+      size={props.styles.buttonsBarSubtitlesIcon?.size?.[device] as MediaButtonSizeType}
+      twisted={props.subtitlesActivated}
+      twistedIcon={props.buttonsBarSubtitlesIconToTransition}
+      variant={props.styles.buttonsBarSubtitlesIcon?.variant}
+      onClick={props.onSubtitlesClick}
+    />
+  ) : null;
 
-  const ButtonBarFullScreen = (props: IButtonBarFullScreen): JSX.Element | null =>
-    props.styles.buttonsBarFullScreenIcon?.size?.[device] ? (
-      <MediaButton
-        hasBackground={false}
-        icon={props.buttonsBarFullScreenIcon}
-        size={props.styles.buttonsBarFullScreenIcon?.size?.[device] as MediaButtonSizeType}
-        twisted={props.fullScreen}
-        twistedIcon={props.buttonsBarFullScreenIconToTransition}
-        variant={props.styles.buttonsBarFullScreenIcon?.variant}
-        onClick={props.onFullScreenClick}
-      />
-    ) : null;
+  const ButtonBarFullScreen = props.styles.buttonsBarFullScreenIcon?.size?.[device] ? (
+    <MediaButton
+      hasBackground={false}
+      icon={props.buttonsBarFullScreenIcon}
+      size={props.styles.buttonsBarFullScreenIcon?.size?.[device] as MediaButtonSizeType}
+      twisted={props.fullScreen}
+      twistedIcon={props.buttonsBarFullScreenIconToTransition}
+      variant={props.styles.buttonsBarFullScreenIcon?.variant}
+      onClick={props.onFullScreenClick}
+    />
+  ) : null;
 
   return device === DeviceBreakpointsType.DESKTOP ? (
     <>
@@ -67,21 +65,21 @@ export const SubtitleFullScreenButtons = (props: ISubtitleFullScreenButtons): JS
         tooltipAsModal={false}
         variant={props.styles.tooltip?.variant}
       >
-        <ButtonBarSubtitles {...props} />
+        {ButtonBarSubtitles}
       </Tooltip>
       <Tooltip
         childrenAsButton={false}
         content={{ content: props.buttonsBarFullScreenIconTooltip }}
         tooltipAsModal={false}
         variant={props.styles.tooltip?.variant}
       >
-        <ButtonBarFullScreen {...props} />
+        {ButtonBarFullScreen}
       </Tooltip>
     </>
   ) : (
     <>
-      <ButtonBarSubtitles {...props} />
-      <ButtonBarFullScreen {...props} />
+      {ButtonBarSubtitles}
+      {ButtonBarFullScreen}
     </>
   );
 };

src/components/video/types/videoTheme.ts

@@ -39,6 +39,7 @@ export type VideoStyleType = {
   buttonsBarFirstSubcontainer?: CommonStyleType;
   buttonsBarSecondSubcontainer?: CommonStyleType;
   bottomContainer?: CommonStyleType;
+  linkContainer?: CommonStyleType;
   link?: TypographyTypes;
   actionButton?: {
     size?: string;

src/components/video/video.styled.ts

@@ -149,6 +149,12 @@ export const BottomContainerStyled = styled.div<
   ${({ styles }) => getStyles(styles?.bottomContainer)}
 `;
 
+export const LinkContainerStyled = styled.div<VideoPropsStyleType>`
+  > * {
+    ${({ styles }) => getStyles(styles?.linkContainer)}
+  }
+`;
+
 export const VideoSkeletonContainerStyled = styled.div<VideoPropsStyleType>`
   ${({ styles }) => getStyles(styles?.videoSkeletonContainer)}
 `;