From adaea8af9a4abecb8286e8185c0848169d363dca Mon Sep 17 00:00:00 2001
From: deaxmachina <d.y.bankova@gmail.com>
Date: Wed, 21 Jun 2023 11:58:20 +0100
Subject: [PATCH] added option of center for controlsPosition prop of Video

---
 src/components/Video/Controls.svelte          | 9 +++++++--
 src/components/Video/stories/docs/controls.md | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Video/Controls.svelte b/src/components/Video/Controls.svelte
index eb79b0cd..692a9665 100644
--- a/src/components/Video/Controls.svelte
+++ b/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`};
     "
 >
diff --git a/src/components/Video/stories/docs/controls.md b/src/components/Video/stories/docs/controls.md
index 246cd04f..a3d827b9 100644
--- a/src/components/Video/stories/docs/controls.md
+++ b/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.