From e261317e547dca506fe08b6fb9b77efc78394c65 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 26 Mar 2025 16:01:04 -0700
Subject: [PATCH] tweaks controls opacity

---
 src/components/Video/Video.svelte | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index bc098f1d..b965e0df 100644
--- a/src/components/Video/Video.svelte
+++ b/src/components/Video/Video.svelte
@@ -54,8 +54,10 @@
     separateReplayIcon?: boolean;
     /** Change the colour of the play/pause button */
     controlsColour?: string;
-    /** Change the opacity of the play/pause button */
-    controlsOpacity?: number;
+    /** Change the minimum opacity of the play/pause button, which you see on mouseover. Must be between 0 and 1. */
+    controlsOpacityMin?: number;
+    /** Change the maximum opacity of the play/pause button, which you see on mouseout. Must be between 0 and 1. */
+    controlsOpacityMax?: number;
     /** Have four options for controls position - top right, top left, bottom right, bottom left */
     controlsPosition?: ControlsPosition;
     /** Offset for the controls from the border */
@@ -82,9 +84,10 @@
     possibleToPlayPause = true,
     showControls = true,
     separateReplayIcon = false,
-    controlsColour = 'red', // '#333',
-    controlsOpacity = 0.5,
-    controlsPosition = 'bottom left',
+    controlsColour = '#333',
+    controlsOpacityMin = 0,
+    controlsOpacityMax = 0.7,
+    controlsPosition = 'top left',
     controlsBorderOffset = 10,
   }: Props = $props();
 
@@ -117,7 +120,7 @@
   let interactedWithDom = false;
   const setInteractedWithDom = () => (interactedWithDom = true);
 
-  let interactiveControlsOpacity = $state(controlsOpacity);
+  let interactiveControlsOpacity = $state(controlsOpacityMax);
 
   // Get control button positioning
   let controlButtonPosition = $derived.by(() =>
@@ -221,16 +224,16 @@
   <div
     role="figure"
     onmouseover={() => {
-      interactiveControlsOpacity = controlsOpacity;
+      interactiveControlsOpacity = controlsOpacityMax;
     }}
     onfocus={() => {
-      interactiveControlsOpacity = controlsOpacity;
+      interactiveControlsOpacity = controlsOpacityMax;
     }}
     onmouseout={() => {
-      interactiveControlsOpacity = 1;
+      interactiveControlsOpacity = controlsOpacityMin;
     }}
     onblur={() => {
-      interactiveControlsOpacity = 1;
+      interactiveControlsOpacity = controlsOpacityMin;
     }}
   >
     {#if (hidden && ariaDescription) || !hidden}