feat: only download updated images

package.json

@@ -14,6 +14,7 @@
   "homepage": "https://github.com/micahg/tbltp",
   "workspaces": [
     "packages/api",
-    "packages/mui"
+    "packages/mui",
+    "packages/common"
   ]
 }

packages/api/package.json

@@ -49,6 +49,7 @@
     "websocket": "^1.0.34"
   },
   "dependencies": {
+    "@micahg/tbltp-common": "file:../common",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.48.0",
     "@opentelemetry/exporter-jaeger": "^1.25.1",

packages/api/src/models/scene.ts

@@ -1,5 +1,5 @@
 import { Schema, model } from "mongoose";
-import { Rect } from "../utils/tablestate";
+import { Rect } from "@micahg/tbltp-common";
 
 /**
  * Student Interface.

packages/api/src/routes/scene.ts

@@ -18,7 +18,7 @@ import {
   updateAssetFromUpload,
 } from "../utils/localstore";
 import { validateAngle, validateViewPort } from "../utils/viewport";
-import { Rect } from "../utils/tablestate";
+import { Rect } from "@micahg/tbltp-common";
 
 const NAME_REGEX = /^[\w\s]{1,64}$/;
 

packages/api/src/utils/scene.ts

@@ -1,6 +1,6 @@
 import { IScene, Scene } from "../models/scene";
 import { IUser } from "../models/user";
-import { Rect } from "./tablestate";
+import { Rect } from "@micahg/tbltp-common";
 
 export function getSceneById(id: string, userId: string) {
   return Scene.findOne({ _id: id, user: userId });

packages/api/src/utils/viewport.ts

@@ -1,4 +1,4 @@
-import { Rect } from "./tablestate";
+import { Rect } from "@micahg/tbltp-common";
 
 export function validateViewPort(viewport: Rect): boolean {
   if (!viewport) return false;

packages/api/src/utils/websocket.ts

@@ -11,7 +11,7 @@ import {
 } from "./constants";
 
 import { log } from "./logger";
-import { TableState } from "./tablestate";
+import { TableState } from "@micahg/tbltp-common";
 import { getFakeUser } from "./auth";
 import { IScene } from "../models/scene";
 import { getUserByID } from "./user";
@@ -95,7 +95,9 @@ function verifyConnection(sock: WebSocket, req: IncomingMessage) {
     .then((scene) => {
       const state: TableState = {
         overlay: scene.overlayContent,
+        overlayRev: scene.overlayContentRev,
         background: scene.playerContent,
+        backgroundRev: scene.playerContentRev,
         viewport: scene.viewport,
         backgroundSize: scene.backgroundSize,
         angle: scene.angle || 0,
@@ -140,7 +142,9 @@ export function startWSServer(
     if (!SOCKET_SESSIONS.has(userID)) return;
     const tableState: TableState = {
       overlay: update.overlayContent,
+      overlayRev: update.overlayContentRev,
       background: update.playerContent,
+      backgroundRev: update.playerContentRev,
       viewport: update.viewport,
       backgroundSize: update.backgroundSize,
       angle: update.angle || 0,

packages/common/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@micahg/tbltp-common",
+  "version": "0.1.0",
+  "description": "Common bits for tbltp",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.4",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --progress --config webpack.config.js"
+  },
+  "author": "Micah Galizia",
+  "license": "ISC"
+}

packages/common/src/geometry.ts

@@ -0,0 +1,6 @@
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }

packages/common/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./geometry";
+export * from "./tablestate";

packages/common/src/tablestate.ts

@@ -0,0 +1,12 @@
+import { Rect } from "./geometry";
+
+export interface TableState {
+    overlay?: string;
+    overlayRev?: number;
+    background?: string;
+    backgroundRev?: number;
+    viewport: Rect;
+    angle: number;
+    backgroundSize?: Rect;
+  }
+

packages/common/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "noImplicitAny": true,
+      "module": "es6",
+      "target": "es5",
+      "allowJs": true,
+      "moduleResolution": "node",
+      "declaration": true,
+    }
+  }

packages/common/webpack.config.js

@@ -0,0 +1,21 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};

packages/mui/package.json

@@ -11,6 +11,7 @@
     "@auth0/auth0-spa-js": "^2.1.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@micahg/tbltp-common": "file:../common",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.15.8",
     "@reduxjs/toolkit": "^1.9.5",

packages/mui/src/components/ContentEditor/ContentEditor.tsx

@@ -9,7 +9,7 @@ import React, {
 import { useDispatch, useSelector } from "react-redux";
 import { AppReducerState } from "../../reducers/AppReducer";
 import { getRect, newSelectedRegion } from "../../utils/drawing";
-import { Rect, equalRects } from "../../utils/geometry";
+import { equalRects } from "../../utils/geometry";
 import { MouseStateMachine } from "../../utils/mousestatemachine";
 import { setCallback } from "../../utils/statemachine";
 import styles from "./ContentEditor.module.css";
@@ -45,6 +45,7 @@ import {
 import { setupOffscreenCanvas } from "../../utils/offscreencanvas";
 import { debounce } from "lodash";
 import { LoadProgress } from "../../utils/content";
+import { Rect } from "@micahg/tbltp-common";
 
 const sm = new MouseStateMachine();
 

packages/mui/src/components/RemoteDisplayComponent/RemoteDisplayComponent.tsx

@@ -1,7 +1,6 @@
 import { createRef, useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AppReducerState } from "../../reducers/AppReducer";
-import { Rect } from "../../utils/geometry";
 import Alert from "@mui/material/Alert";
 import Stack from "@mui/material/Stack";
 
@@ -11,17 +10,7 @@ import { Box } from "@mui/material";
 import { setupOffscreenCanvas } from "../../utils/offscreencanvas";
 import { debounce } from "lodash";
 import { Thing } from "../../utils/drawing";
-
-/**
- * Table state sent to display client by websocket. A partial Scene.
- */
-export interface TableState {
-  overlay?: string;
-  background?: string;
-  viewport: Rect;
-  angle: number;
-  backgroundSize?: Rect;
-}
+import { Rect, TableState } from "@micahg/tbltp-common";
 
 // TODO UNION MICAH DON"T SKIP NOW
 export type TableUpdate = TableState & {
@@ -131,28 +120,32 @@ const RemoteDisplayComponent = () => {
 
       const angle = js.state.angle || 0;
 
-      const ts: number = new Date().getTime();
       let overlay: string | undefined;
       if ("overlay" in js.state && js.state.overlay) {
-        overlay = `${apiUrl}/${js.state.overlay}?${ts}`;
+        overlay = `${apiUrl}/${js.state.overlay}`;
       }
 
       let background: string | null = null;
       if ("background" in js.state && js.state.background) {
-        background = `${apiUrl}/${js.state.background}?${ts}`;
+        background = `${apiUrl}/${js.state.background}`;
       }
 
       if (!background) {
         console.error(`Unable to determine background URL`);
         return;
       }
 
+      const backgroundRev = js.state.backgroundRev;
+      const overlayRev = js.state.overlayRev;
+
       // update the images/viewport
       worker.postMessage({
         cmd: "update",
         values: {
           background,
+          backgroundRev,
           overlay,
+          overlayRev,
           viewport,
           bearer,
           angle,

packages/mui/src/middleware/ContentMiddleware.ts

@@ -3,7 +3,7 @@ import axios, { AxiosProgressEvent, AxiosResponse } from "axios";
 import { AppReducerState } from "../reducers/AppReducer";
 import { getToken } from "../utils/auth";
 import { ContentReducerError, Scene } from "../reducers/ContentReducer";
-import { Rect } from "../utils/geometry";
+import { Rect } from "@micahg/tbltp-common";
 import { AnyAction, Dispatch, MiddlewareAPI } from "@reduxjs/toolkit";
 import { LoadProgress } from "../utils/content";
 

packages/mui/src/reducers/ContentReducer.ts

@@ -1,5 +1,5 @@
 import { PayloadAction } from "@reduxjs/toolkit";
-import { Rect } from "../utils/geometry";
+import { Rect } from "@micahg/tbltp-common";
 
 // copied from api
 export interface Scene {

packages/mui/src/utils/contentworker.ts

@@ -4,7 +4,6 @@ import { LoadProgress, loadImage } from "./content";
 import { Drawable, Thing, newDrawableThing } from "./drawing";
 import {
   Point,
-  Rect,
   createPoints,
   firstZoomStep,
   normalizeRect,
@@ -18,13 +17,18 @@ import {
   translatePoints,
   copyRect,
 } from "./geometry";
+import { Rect } from "@micahg/tbltp-common";
 
 /**
  * Worker for offscreen drawing in the content editor.
  */
 let backgroundImage: ImageBitmap;
+let backgroundImageRev: number;
+let backgroundImageSrc: string;
 let backgroundCtx: OffscreenCanvasRenderingContext2D;
 let overlayCtx: OffscreenCanvasRenderingContext2D;
+let overlayImageSrc: string;
+let overlayImageRev: number;
 let fullCtx: OffscreenCanvasRenderingContext2D;
 let thingCtx: OffscreenCanvasRenderingContext2D;
 let imageCanvasses: CanvasImageSource[] = [];
@@ -193,23 +197,38 @@ function sizeVisibleCanvasses(width: number, height: number) {
   overlayCtx.canvas.height = height;
 }
 
-function loadAllImages(bearer: string, background: string, overlay?: string) {
+function loadAllImages(update: TableUpdate) {
+  const { bearer, background, backgroundRev, overlay, overlayRev } = update;
   const progress = (p: LoadProgress) =>
     postMessage({ cmd: "progress", evt: p });
-  /*********** TODO test to see if we reload the same image twice */
-  const bgP = loadImage(background, bearer, progress);
+
+  // gross - if we have a background image, only load it if the revision changed...
+  // so here if we see no change we don't bother pulling the new image
+  const bgsame =
+    background === backgroundImageSrc && backgroundRev === backgroundImageRev;
+  const bgP = background
+    ? bgsame
+      ? Promise.resolve(backgroundImage)
+      : loadImage(background, bearer, progress)
+    : Promise.resolve(null);
+  backgroundImageSrc = background || backgroundImageSrc;
+  backgroundImageRev = backgroundRev || backgroundImageRev;
   const ovP = overlay
-    ? loadImage(overlay, bearer, progress)
+    ? overlay === overlayImageSrc && overlayRev === overlayImageRev
+      ? overlayCtx.canvas.transferToImageBitmap()
+      : loadImage(overlay, bearer, progress)
     : Promise.resolve(null);
   // TODO signal an error if either promise fails
   return Promise.all([bgP, ovP]).then(([bgImg, ovImg]) => {
     // keep a copy of these to prevent having to recreate them from the image buffer
-    backgroundImage = bgImg;
-    [_fullRotW, _fullRotH] = rotatedWidthAndHeight(
-      _angle,
-      bgImg.width,
-      bgImg.height,
-    );
+    if (bgImg) {
+      backgroundImage = bgImg;
+      [_fullRotW, _fullRotH] = rotatedWidthAndHeight(
+        _angle,
+        bgImg.width,
+        bgImg.height,
+      );
+    }
     return [bgImg, ovImg];
   });
 }
@@ -468,7 +487,7 @@ function updateThings(things?: Thing[], render = false) {
 }
 
 async function update(values: TableUpdate) {
-  const { angle, bearer, background, overlay, viewport, things } = values;
+  const { angle, background, viewport, things } = values;
   if (!background) {
     if (things) return updateThings(things, true);
     console.error(`Ignoring update without background`);
@@ -482,7 +501,7 @@ async function update(values: TableUpdate) {
   }
 
   try {
-    const [bgImg, ovImg] = await loadAllImages(bearer, background, overlay);
+    const [bgImg, ovImg] = await loadAllImages(values);
     if (!bgImg) return;
 
     const thingCanvas = new OffscreenCanvas(bgImg.width, bgImg.height);

packages/mui/src/utils/drawing.ts

@@ -1,4 +1,4 @@
-import { Rect } from "./geometry";
+import { Rect } from "@micahg/tbltp-common";
 
 export type DrawContext = CanvasDrawPath &
   CanvasPathDrawingStyles &

packages/mui/src/utils/geometry.ts

@@ -1,17 +1,11 @@
 import { getRect } from "./drawing";
+import { Rect } from "@micahg/tbltp-common";
 
 export interface Point {
   x: number;
   y: number;
 }
 
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
 export interface ImageBound {
   left: number;
   top: number;