Merge pull request #85 from reuters-graphics/video-controls-middle

Added option of center for controlsPosition prop of Video

src/components/Video/Controls.svelte

@@ -20,8 +20,8 @@
     paused = !paused;
     clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously
     dispatch('pausePlayEvent', {
-      paused: paused,
-      clickedOnPauseBtn: clickedOnPauseBtn,
+      paused,
+      clickedOnPauseBtn,
     });
   }
 </script>
@@ -32,9 +32,14 @@
     opacity: {controlsOpacity}; 
     top: {controlsPosition === 'top left' || controlsPosition === 'top right'
     ? `${10}px`
+    : controlsPosition === 'center'
+    ? `${(heightVideoContainer - controlsBorderOffset) / 2}px`
     : `${heightVideoContainer - controlsBorderOffset}px`};
+
     left: {controlsPosition === 'top left' || controlsPosition === 'bottom left'
     ? `${10}px`
+    : controlsPosition === 'center'
+    ? `${(widthVideoContainer - controlsBorderOffset) / 2}px`
     : `${widthVideoContainer - controlsBorderOffset}px`};
     "
 >

src/components/Video/stories/docs/controls.md

@@ -12,7 +12,7 @@ If you do want to leave the controls, you have a couple of options to style them
 
 - Set `controlsColour` to a colour of your choosing.
 - Set `controlsOpacity` to a value between `0` and `1` to control the opacity. The default is `0.5`.
-- Change the placement of the controls to one of: `top right`, `top left`, `bottom right`, `bottom left` by setting `controlsPosition`.
+- Change the placement of the controls to one of: `top right`, `top left`, `bottom right`, `bottom left`, `center` by setting `controlsPosition`.
 - Change the play button to a replay button at the end of the video with the option `separateReplayIcon={true}`.
 
 Here is an example with bottom right corner white opaque controls, with a replay button, where you have to hover on the video to see the controls.