@social.io/catalog 1.3.0 → 2.0.0

package/ts_web/elements/sio-recorder.ts

@@ -1,213 +0,0 @@
-import {
-  DeesElement,
-  html,
-  css,
-  customElement,
-  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;
-
-/**
- * Use rrweb's eventWithTime if you like strict typing:
- *
- *   import { eventWithTime } from 'rrweb';
- *   export interface IRecordingEvent extends eventWithTime {}
- *
- * Here, for brevity, we define an empty interface
- * and cast all events to any.
- */
-export interface IRecordingEvent {}
-
-@customElement('sio-recorder')
-export class SioRecorder extends DeesElement {
-  public static demo = () => html`<sio-recorder></sio-recorder>`;
-
-  /**
-   * Holds all recorded events from rrweb.
-   */
-  private events: IRecordingEvent[] = [];
-
-  /**
-   * status
-   */
-  public status: 'recording' | 'playing' | 'stopped' = 'stopped';
-
-  /**
-   * A reference to rrweb's stop recording function.
-   * We'll store it when we begin a record session so we can call it later.
-   */
-  private stopFn: (() => void) | null = null;
-
-  /**
-   * Query for the div in our template that will be used for playback.
-   */
-  @query('#playback')
-  private accessor playbackDiv!: HTMLDivElement;
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-    /* The playback container: set a fixed size for demonstration. */
-    #playback {
-      width: 800px;
-      height: 600px;
-      border: 1px solid #ccc;
-      background-color: #fff;
-      position: relative;
-    }
-  `;
-
-  render() {
-    return html` <div id="playback"></div> `;
-  }
-
-  /**
-   * Lifecycle: Called when the element is inserted into the DOM.
-   */
-  async connectedCallback(): Promise<void> {
-    super.connectedCallback();
-    console.log('sio-recorder connectedCallback');
-
-    // Start recording immediately
-    this.startRecording();
-
-    // Use the domtools-based approach you have (Ctrl+H):
-    const domtools = await this.domtoolsPromise;
-    domtools.keyboard
-      .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.H])
-      .subscribe(this.handleKeydown);
-    await this.domtoolsPromise;
-    this.domtools.convenience.smartdelay.delayFor(2000).then(() => {
-      // this.handleKeydown();
-    });
-  }
-
-  /**
-   * Lifecycle: Called when the element is removed from the DOM.
-   */
-  public async disconnectedCallback(): Promise<void> {
-    super.disconnectedCallback();
-
-    // Stop recording if it's still running
-    this.stopRecording();
-
-    // Clean up your subscription or any global listeners if needed
-  }
-
-  /**
-   * Starts an rrweb recording session that tracks the entire DOM,
-   * including canvases and cross-origin iframes (if permissible).
-   */
-  private async startRecording(): Promise<void> {
-    await this.domtoolsPromise;
-    this.status = 'recording';
-    this.events = [];
-
-    // For capturing "everything," enable advanced flags:
-    while (this.status === 'recording') {
-      this.stopFn = rrweb.record({
-        emit: (event: any) => {
-          // If you have a stricter type:
-          //   this.events.push(event as IRecordingEvent);
-          // else store as any:
-          this.events.push(event);
-        },
-        // Some recommended settings to capture the "complete" page:
-        recordCanvas: true, // record canvas elements
-        recordCrossOriginIframes: true, // attempt capturing cross-origin iframes
-
-        // checkoutEveryNms: 1000,        // check every N milliseconds
-      });
-      await this.domtools.convenience.smartdelay.delayFor(1000);
-      await this.stopFn();
-    }
-
-    console.log('Recording has started...');
-  }
-
-  /**
-   * Stops the rrweb recording session
-   */
-  private stopRecording(): void {
-    if (this.stopFn) {
-      this.stopFn();
-      this.stopFn = null;
-      console.log('Recording has stopped.');
-    }
-  }
-
-  /**
-   * Plays back the recorded events in the `playbackDiv`
-   */
-  private async playRecording(): Promise<void> {
-    await this.domtoolsPromise;
-    if (!this.playbackDiv) return;
-    const replayer = new rrwebPlayer({
-      target: this.playbackDiv, // customizable root element
-      props: {
-        events: this.events as any,
-        root: this.playbackDiv,
-        showController: false,
-        width: this.playbackDiv.offsetWidth,
-        height: this.playbackDiv.offsetHeight,
-      },
-    });
-    this.domtools.convenience.smartdelay.delayFor(0).then(async () => {
-      while (true) {
-        await this.domtools.convenience.smartdelay.delayFor(30000);
-        await replayer.play();
-        await this.domtools.convenience.smartdelay.delayFor(0);
-        // this.fixPosition();
-      }
-    });
-    this.fixPosition();
-  }
-
-  public async fixPosition() {
-    await this.domtoolsPromise;
-    await this.domtools.convenience.smartdelay.delayFor(0);
-    const playbackDiv = this.shadowRoot.querySelector('#playback') as HTMLElement;
-    const replayerWrapper = this.shadowRoot.querySelector('.replayer-wrapper') as HTMLElement;
-    const replayerMouse = this.shadowRoot.querySelector('.replayer-mouse') as HTMLElement;
-    const replayerMouseTail = this.shadowRoot.querySelector('.replayer-mouse-tail') as HTMLElement;
-    const iframe = this.shadowRoot.querySelector('iframe');
-    replayerWrapper.style.position = 'absolute';
-    replayerWrapper.style.top = '0px';
-    replayerWrapper.style.left = '0px';
-    replayerWrapper.style.transformOrigin = 'center center';
-    replayerMouse.style.position = 'absolute';
-    replayerMouseTail.style.position = 'absolute';
-    iframe.style.position = 'absolute';
-    iframe.style.top = '0px';
-    iframe.style.left = '0px';
-    iframe.style.border = 'none';
-
-    // set z-index
-    replayerWrapper.style.zIndex = '1000';
-    iframe.style.zIndex = '1000';
-    replayerMouse.style.zIndex = '1002';
-    replayerMouseTail.style.zIndex = '1001';
-
-    // lets show a mouse cursor
-    replayerMouse.style.width = '10px';
-    replayerMouse.style.height = '10px';
-    replayerMouse.style.background = 'green';
-    replayerMouse.style.transform = 'translate(-50%, -50%)';
-    replayerMouse.style.borderRadius = '50%';
-    replayerMouse.style.border = '1px solid white';
-  }
-
-  /**
-   * Keydown handler. If Ctrl + H is pressed, stop the recording and replay the session
-   */
-  private handleKeydown = (): void => {
-    this.stopRecording();
-    this.playRecording();
-  };
-}