add previous lines (poor code quality)

src/App.svelte

@@ -84,10 +84,7 @@
     pushPageState('drawing');
   };
 
-  let recording: {
-    opts: CanvasOptions;
-    data: RecordingData;
-  } = undefined;
+  let recording: RecordingData = undefined;
 
   function playRecording(d: ArrayBuffer) {
     try {
@@ -185,7 +182,7 @@
 {:else}
   <!-- Recording must be true... -->
   <!-- Which means that we are trying to plyback a dtr recording-->
-  <Play data={recording.data} opts={recording.opts} />
+  <Play {recording} />
 {/if}
 
 <style lang="scss">
@@ -375,6 +372,7 @@
       width: 100%;
       height: 100%;
       backdrop-filter: blur(100px);
+      -webkit-backdrop-filter: blur(100px);
     }
   }
 </style>

src/Play.svelte

@@ -7,15 +7,15 @@
   import type {
     RecordableMessageTitle,
     RecordingData,
-    RecordingDataItem,
+    RecordingFrames
   } from './logic/dtr';
   import { drawLine, type Line } from './logic/line';
   import type { MessageData, FrameData } from './logic/message';
   import Frame from './lib/Frame.svelte';
 
-  export let data: RecordingData;
+  export let recording: RecordingData;
 
-  export let opts: CanvasOptions;
+  let [bg, opts, ...data] = recording;
 
   let messages: MessageData<'chat'>[] = [];
 
@@ -70,7 +70,7 @@
     return;
   }
 
-  async function handleFrame(d: RecordingDataItem<RecordableMessageTitle>) {
+  async function handleFrame(d: RecordingFrames[number]) {
     switch (d.title) {
       case 'chat':
         addMessage(d.data as MessageData<'chat'>, d.from);
@@ -94,7 +94,18 @@
   }
 
   // TODO: fix this VERY naive approach
-  onMount(renderFrame);
+  onMount(() => {
+
+    const background = new Image();
+
+    background.onload = () => {
+      mainCanvas.getContext('2d').drawImage(background, 0, 0);
+    };
+
+    background.src = bg;
+
+    renderFrame()
+  });
 </script>
 
 <div class="background">

src/lib/Painting.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import type { CanvasOptions } from '../logic/canvas';
   import { drawLine, type Line } from '../logic/line';
-  import { drawing, getConnection, lineOpts, setDrawing } from '../logic/state';
+  import { drawing, getConnection, lineOpts, setDrawing, canvas, frames } from '../logic/state';
   import type { FrameData } from '../logic/message';
   import Frame from './Frame.svelte';
   import { v1 as genuuid } from 'uuid';
@@ -51,26 +51,24 @@
    the host will provide a line-array so that new peers can catch-up.
   */
 
-  let frames: FrameData[] = [];
-
   /* If we need component reference, this is how it's done */
   // let frameComponents: { [id: string]: Frame } = {};
 
   let thisFrame: FrameData;
 
   async function addFrame(f: FrameData) {
-    frames.push(f);
-    if (frames.length > MAX_FRAMES) {
-      const old_frame = frames.shift();
+    $frames.push(f);
+    if ($frames.length > MAX_FRAMES) {
+      const old_frame = $frames.shift();
 
-      await drawLine(mainCanvas.getContext('2d'), old_frame.line);
+      await drawLine($canvas.getContext('2d'), old_frame.line);
     }
-    frames = frames;
+    $frames = $frames;
     return;
   }
 
   async function updateFrame(id: string, line: Line) {
-    const f = frames.find(v => v.id == id);
+    const f = $frames.find(v => v.id == id);
 
     if (!f) {
       await addFrame({
@@ -82,7 +80,7 @@
 
     f.line = line;
 
-    frames = frames;
+    $frames = $frames;
 
     return;
   }
@@ -91,11 +89,10 @@
     updateFrame(fu.id, fu.line);
   });
 
-  let mainCanvas: HTMLCanvasElement;
   let mouseCanvas: HTMLCanvasElement;
 
   function getMousePosition(ev: MouseEvent) {
-    const r = mainCanvas.getBoundingClientRect();
+    const r = $canvas.getBoundingClientRect();
     // get relative position
 
     const scale = r.width / opts.width;
@@ -204,7 +201,7 @@
       height={opts.height}
       width={opts.width}
       style="background-color: {opts.bgColor}"
-      bind:this={mainCanvas}
+      bind:this={$canvas}
       on:mousemove={mouseMove}
       on:mouseup={mouseUp}
       on:mousedown={mouseDown}
@@ -216,7 +213,7 @@
       width={opts.width}
       bind:this={mouseCanvas}
     />
-    {#each frames as frameData}
+    {#each $frames as frameData}
       <Frame {frameData} {opts} />
     {/each}
   {/if}

src/lib/Recorder.svelte

@@ -3,17 +3,15 @@
   import {
     compressRecording,
     RECORDABLE_MESSAGE_TITLES,
-    type RecordingData,
+    Recording,
   } from '../logic/dtr';
-  import { getConnection } from '../logic/state';
+  import { getConnection, canvas, frames } from '../logic/state';
 
   // Write recording data here
 
   const conn = getConnection();
 
-  let recording: RecordingData = [];
-
-  let timeOnStart: number = 0;
+  let recording: Recording = null;
 
   let recordingEnabled = false;
 
@@ -24,8 +22,17 @@
   conn.on('canvas-definition', d => (opts = d));
 
   $: {
-    if (recordingEnabled && recording.length == 0) {
-      timeOnStart = Date.now();
+    if (recordingEnabled && !recording) {
+      recording = new Recording($canvas.toDataURL(), opts);
+      $frames.forEach(
+        fd => {
+          recording.addFrame({
+            title: 'frame-update',
+            data: fd,
+            from: 'bg'
+          });
+        }
+      )
     }
   }
 
@@ -40,23 +47,21 @@
   }
 
   $: {
-    if (!recordingEnabled && recording.length > 0) {
+    if (!recordingEnabled && recording && !recording.isEmpty()) {
       // ? Recording disabled with some length of recording saved.
       // REcording is disabled by default so we will assume that this was
       // intended to be saved.
       compressing = true;
-      downloadRecording(compressRecording(recording, opts));
+      downloadRecording(compressRecording(recording));
       compressing = false;
+      recording = null;
     }
   }
 
-  // TODO: this NEEDS adjustment
-
   RECORDABLE_MESSAGE_TITLES.forEach(t =>
     conn.on(t, (d, from) => {
       if (recordingEnabled && opts) {
-        recording.push({
-          time: Date.now() - timeOnStart,
+        recording.addFrame({
           title: t,
           data: structuredClone(d), // this is INTENSE but necessary maybe
           from,