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/typings/index.d.ts

@@ -50,6 +50,11 @@ export type RRwebPlayerOptions = {
      * @defaultValue `{}`
      */
     tags?: Record<string, string>;
+    /**
+     * Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.
+     * @defaultValue `#D4D4D4`
+     */
+    inactiveColor?: string;
   } & Partial<playerConfig>;
 };