working on Controls

src/components/Video/Video.svelte

@@ -208,7 +208,7 @@
             {#if possibleToPlayPause}
               {#if showControls}
                 <Controls
-                  on:pausePlayEvent={pausePlayEvent}
+                  {pausePlayEvent}
                   {paused}
                   {clickedOnPauseBtn}
                   controlsOpacity={hoverToSeeControls ?

src/components/Video/components/Controls.svelte

@@ -1,11 +1,38 @@
 <script lang="ts">
   import Fa from 'svelte-fa';
   import { faReply, faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
-  import { createEventDispatcher } from 'svelte';
 
-  const dispatch = createEventDispatcher();
+  interface Props {
+    /** Function that controls pause/play event */
+    pausePlayEvent: (e: CustomEvent) => void;
+    /** Boolean, paused or playing */
+    paused: boolean;
+    /** Boolean, clicked on pause button */
+    clickedOnPauseBtn: boolean;
+    /** Change the opacity of the play/pause button */
+    controlsOpacity?: number;
+    /** Have four options for controls position - top right, top left, bottom right, bottom left */
+    controlsPosition?:
+      | 'top right'
+      | 'top left'
+      | 'bottom right'
+      | 'bottom left';
+    /** Width of the video container */
+    widthVideoContainer: number;
+    /** Height of the video container */
+    heightVideoContainer: number;
+    /** Colour of the controls */
+    controlsBorderOffset: number;
+    /** Whether to use a separate replay icon or use the play icon for replay as well */
+    separateReplayIcon?: boolean;
+    /** Change the colour of the play/pause button */
+    controlsColour?: string;
+    /** Whether to reset condition */
+    resetCondition: boolean;
+  }
 
   let {
+    pausePlayEvent,
     paused = $bindable(),
     clickedOnPauseBtn = $bindable(),
     controlsOpacity,
@@ -16,20 +43,19 @@
     resetCondition,
     separateReplayIcon,
     controlsColour,
-  } = $props();
+  }: Props = $props();
 
   function forwardBtnClick() {
     paused = !paused;
     clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously
-    dispatch('pausePlayEvent', {
-      paused,
-      clickedOnPauseBtn,
-    });
   }
 </script>
 
 <button
-  onclick="{forwardBtnClick}"
+  onclick={() => {
+    forwardBtnClick();
+    pausePlayEvent();
+  }}
   style="
     opacity: {controlsOpacity};
     top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?
@@ -50,18 +76,18 @@
   {#if resetCondition}
     <i class="play-pause-icon replay">
       {#if separateReplayIcon}
-        <Fa icon="{faReply}" size="2x" color="{controlsColour}" />
+        <Fa icon={faReply} size="2x" color={controlsColour} />
       {:else}
-        <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
+        <Fa icon={faPlay} size="2x" color={controlsColour} />
       {/if}
     </i>
   {:else if paused === false}
     <i class="play-pause-icon pause">
-      <Fa icon="{faPause}" size="2x" color="{controlsColour}" />
+      <Fa icon={faPause} size="2x" color={controlsColour} />
     </i>
   {:else if paused === true}
     <i class="play-pause-icon play">
-      <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
+      <Fa icon={faPlay} size="2x" color={controlsColour} />
     </i>
   {:else}
     error