feat(recorder): lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader

ts_web/elements/sio-recorder.ts

@@ -6,11 +6,7 @@ import {
   property,
   query,
 } from '@design.estate/dees-element';
-import * as rrwebMod from 'rrweb';
-import rrwebPlayerMod from 'rrweb-player';
-
-const rrweb: any = rrwebMod;
-const rrwebPlayer: typeof rrwebPlayerMod.default = rrwebPlayerMod as any;
+import { SioServiceLibLoader } from '../services/SioServiceLibLoader.js';
 
 /**
  * Use rrweb's eventWithTime if you like strict typing:
@@ -106,6 +102,10 @@ export class SioRecorder extends DeesElement {
    */
   private async startRecording(): Promise<void> {
     await this.domtoolsPromise;
+
+    // Load rrweb from CDN
+    const rrweb = await SioServiceLibLoader.getInstance().loadRrweb();
+
     this.status = 'recording';
     this.events = [];
 
@@ -148,7 +148,12 @@ export class SioRecorder extends DeesElement {
   private async playRecording(): Promise<void> {
     await this.domtoolsPromise;
     if (!this.playbackDiv) return;
-    const replayer = new rrwebPlayer({
+
+    // Load rrweb-player from CDN
+    const rrwebPlayerBundle = await SioServiceLibLoader.getInstance().loadRrwebPlayer();
+    const RrwebPlayer = rrwebPlayerBundle.default;
+
+    const replayer = new RrwebPlayer({
       target: this.playbackDiv, // customizable root element
       props: {
         events: this.events as any,