@comicrelief/component-library 7.21.0 → 7.22.0

package/src/components/Molecules/Promo/Promo.test.js

@@ -13,7 +13,7 @@ it('renders Promo correctly', () => {
       imageSet={defaultData.promoImage}
       image={defaultData.promoImage}
       imageAltText=""
-      copyFirst={false}
+      copyLeft={false}
     >
       <Text
         tag="h1"
@@ -47,7 +47,7 @@ it('renders Promo correctly end position', () => {
       imageSet={defaultData.promoImage}
       image={defaultData.promoImage}
       imageAltText=""
-      copyFirst={false}
+      copyLeft={false}
       position="end"
     >
       <Text

package/src/components/Molecules/Promo/_ProgressRing.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ProgressRingWrapper, ProgressRingSVG, ProgressRingCircle
+} from './_PromoVideoButton.style';
+
+const ProgressRing = ({
+  videoProgress, ...rest
+}) => {
+  const thisStroke = 4;
+  const thisRadius = 28;
+  const initNormRadius = thisRadius - thisStroke * 2;
+  const thisCircumference = initNormRadius * 2 * Math.PI;
+  const [thisDashOffset, setThisDashOffset] = useState(initNormRadius * 2 * Math.PI);
+
+  useEffect(() => {
+    const offset = thisCircumference - ((videoProgress / 100) * thisCircumference);
+    setThisDashOffset(offset);
+  }, [videoProgress, thisCircumference]);
+
+  return (
+    <ProgressRingWrapper videoProgress={videoProgress}>
+      <ProgressRingSVG height={thisRadius * 2} width={thisRadius * 2}>
+        <ProgressRingCircle
+          strokeDasharray={`${thisCircumference} ${thisCircumference}`}
+          strokeDashOffsetStyle={thisDashOffset}
+          strokeWidth={`${thisStroke}`}
+          r={`${initNormRadius}`}
+          cx={`${thisRadius}`}
+          cy={`${thisRadius}`}
+          {...rest}
+        />
+      </ProgressRingSVG>
+    </ProgressRingWrapper>
+  );
+};
+
+ProgressRing.propTypes = {
+  videoProgress: PropTypes.number.isRequired
+};
+
+export default ProgressRing;

package/src/components/Molecules/Promo/_PromoVideo.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Video } from './Promo.style';
+import PromoVideoButton from './_PromoVideoButton';
+
+const PromoVideo = ({
+  lightColouredVideo,
+  copyLeft,
+  thisVideoSrc,
+  thisPoster,
+  autoPlay,
+  loop,
+  showPosterAfterPlaying
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isRestarting, setIsRestarting] = useState(false);
+  const [videoProgress, setVideoProgress] = useState(0);
+  const videoEl = useRef(null);
+
+  const togglePlay = () => {
+    if (isPlaying) videoEl.current.pause();
+    else videoEl.current.play();
+    setIsPlaying(!isPlaying);
+  };
+
+  const updateTime = () => {
+    if (videoEl.current.duration) {
+      // Calculate the percentage of the video played:
+      const percentage = Math.round((videoEl.current.currentTime / videoEl.current.duration) * 100);
+      // Because a completely smooth animation is impossible with the 250ms-ish frequency of
+      // the 'timeupdate' event, we're electing to just update the ring every 25%.
+      const nearest = 25;
+      const roundedPercentage = (percentage + nearest / 2) - ((percentage + nearest / 2) % nearest);
+      setVideoProgress(roundedPercentage);
+    }
+  };
+
+  // Only loads once the initial screensize check is complete
+  useEffect(() => {
+    // Use truthy comparison so either a null OR undefined value won't work
+    if (thisVideoSrc != null) {
+      videoEl.current.addEventListener('timeupdate', updateTime);
+      // Trigger on-load autoplay if apppropriate
+      if (autoPlay && !isPlaying) {
+        togglePlay();
+      }
+
+      videoEl.current.addEventListener('ended', () => {
+        // Used purely to halt the CSS animation:
+        setIsRestarting(true);
+
+        // If this is a non-looping video, add a listener to update our local state
+        // once the video's ended, to let the user retrigger it manually:
+        if (!loop) {
+          setIsPlaying(false);
+          setVideoProgress(0);
+          // Reload the video to show the poster image:
+          if (showPosterAfterPlaying) videoEl.current.load();
+        } else {
+          // Rather than using the Video 'loop' property, we retrigger
+          // it in *code* as there's no 'restarted' to hook into:
+          togglePlay();
+        }
+
+        // Grace period to allow the animation to reset
+        setTimeout(() => { setIsRestarting(false); }, 100);
+      });
+    }
+    // CERTAINLY don't want this re-running for EACH of these variable updates, sorry Lint...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [thisVideoSrc]);
+
+  return (
+    <>
+      <Video
+        ref={videoEl}
+        src={thisVideoSrc}
+        poster={thisPoster}
+        muted
+      >
+        Your browser does not support this video filetype.
+      </Video>
+      <PromoVideoButton
+        copyLeft={copyLeft}
+        videoProgress={videoProgress}
+        togglePlay={togglePlay}
+        isPlaying={isPlaying}
+        lightColouredVideo={lightColouredVideo}
+        isRestarting={isRestarting}
+      />
+    </>
+  );
+};
+
+PromoVideo.propTypes = {
+  copyLeft: PropTypes.bool.isRequired,
+  lightColouredVideo: PropTypes.bool.isRequired,
+  thisVideoSrc: PropTypes.string.isRequired,
+  thisPoster: PropTypes.string.isRequired,
+  autoPlay: PropTypes.bool.isRequired,
+  loop: PropTypes.bool.isRequired,
+  showPosterAfterPlaying: PropTypes.bool.isRequired
+};
+
+export default PromoVideo;

package/src/components/Molecules/Promo/_PromoVideoButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProgressRing from './_ProgressRing';
+import { PlayButtonWrapper, PlayButton, Icon } from './_PromoVideoButton.style';
+
+const PromoVideoButton = ({
+  togglePlay, ...rest
+}) => (
+  <PlayButtonWrapper>
+    <PlayButton
+      onClick={() => { togglePlay(); }}
+      {...rest}
+    >
+      <Icon {...rest} />
+      <ProgressRing
+        {...rest}
+      />
+    </PlayButton>
+  </PlayButtonWrapper>
+);
+
+PromoVideoButton.propTypes = {
+  togglePlay: PropTypes.func.isRequired
+};
+
+export default PromoVideoButton;

package/src/components/Molecules/Promo/_PromoVideoButton.style.js

@@ -0,0 +1,121 @@
+import styled, { css } from 'styled-components';
+import playWhite from './assets/Play--white.svg';
+import pauseWhite from './assets/Pause--white.svg';
+import playBlack from './assets/Play--black.svg';
+import pauseBlack from './assets/Pause--black.svg';
+
+const PlayButton = styled.button`
+  display: flex;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.color('black')};
+  opacity: 0.75;
+  transition: opacity 0.2s;
+
+  &:hover,
+  &:focus {
+    opacity: 1.0;
+  }
+
+  &:focus-visible {
+    outline-style: outset;
+    outline-width: medium;
+  }
+
+  // Non-light coloured video:
+  ${({ lightColouredVideo }) => !lightColouredVideo && css`
+    background: ${({ theme }) => theme.color('white')};
+  `}
+
+  ${({ copyLeft }) => !copyLeft && css`
+    right: auto;
+    left: 10px;
+  `}
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    top: 20px;
+    right: 20px;
+
+      ${({ copyLeft }) => !copyLeft && css`
+      right: auto;
+      left: 20px;
+    `}
+  }
+`;
+
+const PlayButtonWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+const ProgressRingWrapper = styled.span`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+`;
+
+const ProgressRingSVG = styled.svg`
+ //
+`;
+
+const ProgressRingCircle = styled.circle`
+    z-index: 100;
+    transition: stroke-dashoffset 0.5s;
+
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke-dashoffset: ${({ strokeDashOffsetStyle }) => strokeDashOffsetStyle};
+    stroke: white; // need to changed based on Promo settings
+    fill: transparent;
+
+    // Non-light coloured video, white button, black stroke
+    ${({ lightColouredVideo }) => !lightColouredVideo && css`
+      stroke: ${({ theme }) => theme.color('black')};
+    `}
+
+    // Cancel the animation
+    ${({ isRestarting }) => (isRestarting) && css`
+     transition: none;
+    `}
+`;
+
+const Icon = styled.span`
+  height: 50px;
+  width: 50px;
+  background: no-repeat center/50% url(${playWhite}) transparent;
+
+  // Light-coloured video, black button, white icons
+  ${({ lightColouredVideo, isPlaying }) => (lightColouredVideo && !isPlaying) && css`
+    background-image: url(${playWhite});
+  `}
+
+  ${({ lightColouredVideo, isPlaying }) => (lightColouredVideo && isPlaying) && css`
+    background-image: url(${pauseWhite});
+  `}
+
+  // Non-light coloured video, white button, black icons
+  ${({ lightColouredVideo, isPlaying }) => (!lightColouredVideo && !isPlaying) && css`
+    background-image: url(${playBlack});
+  `}
+
+  ${({ lightColouredVideo, isPlaying }) => (!lightColouredVideo && isPlaying) && css`
+    background-image: url(${pauseBlack});
+  `}
+`;
+
+export {
+  ProgressRingWrapper, ProgressRingSVG, ProgressRingCircle, PlayButton, PlayButtonWrapper, Icon
+};

package/src/components/Molecules/Promo/assets/Pause--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#222222"/>
+</svg>

package/src/components/Molecules/Promo/assets/Pause--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#FFFFFF"/>
+</svg>

package/src/components/Molecules/Promo/assets/Play--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#222222"/>
+</svg>

package/src/components/Molecules/Promo/assets/Play--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#FFFFFF"/>
+</svg>