Implement: Inactive activity indicator on progress bar (#1039)

* update utils.ts: add a tool function to detect inactive periods

* update Controller.svelte: add a fixed div element as an indicator

* update Controller.svelte: add one blank space at the end

* update Controller.svelte: add a variable inactivePeriods and use util function to get inactive periods

* update Controller.svelte: add width property for inactive activity indicators

* update Controller.svelte: combine calculation value with indicator UI

* update utils.ts: fix error https://github.com/HurricaHjz/rrweb_2120_ga_3/pull/5#discussion_r1008677230 and add comments

update Controller.svelte: apply Zihan's suggestion https://github.com/HurricaHjz/rrweb_2120_ga_3/pull/5#discussion_r1008678403

* update Controller.svelte: make the color of indicator customizable

update index.d.ts: add type definition for the color option

Co-authored-by: u7149141 <fengyun5264@outlook.com>
Co-authored-by: Jerry Zhang <u7305891@anu.edu.au>
Co-authored-by: fengyun5264 <115444501+fengyun5264@users.noreply.github.com>
Co-authored-by: Zihan Meng <u7354208@anu.edu.au>
Co-authored-by: HurricaHjz <105645379+HurricaHjz@users.noreply.github.com>
Co-authored-by: u6924169 <u6924169@anu.edu.au>
Co-authored-by: Majia0712 <55265314+MengZihan712@users.noreply.github.com>

packages/rrweb-player/src/Player.svelte

@@ -22,6 +22,8 @@
   export let speed = 1;
   export let showController = true;
   export let tags: Record<string, string> = {};
+  // color of inactive periods indicator
+  export let inactiveColor = '#D4D4D4';
 
   let replayer: Replayer;
 
@@ -229,6 +231,7 @@
       {speedOption}
       {skipInactive}
       {tags}
+      {inactiveColor}
       on:fullscreen={() => toggleFullscreen()}
     />
   {/if}