From 69e6dbc407d2ad76d0cec0e002da88f5533e8d57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Thu, 13 Jun 2024 09:43:38 +0100
Subject: [PATCH] images: avoid double request for animated images (#3924)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

right now, for animated images, we end up doing _two_ requests because
we're trying to create a static frame if someone wants to pause the
animation.

<img width="1479" alt="Screenshot 2024-06-11 at 16 26 28"
src="https://github.com/tldraw/tldraw/assets/469604/d3d8b93c-7349-4a7f-ba5d-be005a87f2ae">


the problem is that the two requests are slightly different:
1.) there's one request via a JS `Image` call that sets a
`crossorigin="anonymous"`
2.) the other request is the basic image request via setting a
background-image, but this doesn't specify a crossorigin, hence it
causes a separate request.

this converts the image rendering to not use a div+background-image but
to use a regular image tag and make the crossorigin consistent for
animated images. you'll note that we _don't_ set crossorigin for
non-animated and that's because for the new Cloudflare images the
headers don't send back access-control headers (at the moment, until we
want to set up workers).

drive-by cleanup to remove `strict-origin-when-cross-origin` that should
have been removed in https://github.com/tldraw/tldraw/pull/3884

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Images: avoid double request for animated images.
---
 .../src/lib/shapes/image/ImageShapeUtil.tsx   | 23 ++++++++++---------
 .../tldraw/src/lib/ui/context/asset-urls.tsx  |  2 --
 .../tldraw/src/lib/utils/export/export.ts     |  1 -
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
index bc31e6338..131b339cc 100644
--- a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
@@ -109,7 +109,6 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 					setLoadedSrc(url)
 				}
 				image.crossOrigin = 'anonymous'
-				image.referrerPolicy = 'strict-origin-when-cross-origin'
 				image.src = url
 
 				return () => {
@@ -158,13 +157,15 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 			<>
 				{showCropPreview && (
 					<div style={containerStyle}>
-						<div
+						<img
 							className="tl-image"
+							// We don't set crossOrigin for non-animated images because
+							// for Cloudflare we don't currenly have that set up.
+							crossOrigin={this.isAnimated(shape) ? 'anonymous' : undefined}
+							src={!shape.props.playing || reduceMotion ? staticFrameSrc : loadedSrc}
+							referrerPolicy="strict-origin-when-cross-origin"
 							style={{
 								opacity: 0.1,
-								backgroundImage: `url(${
-									!shape.props.playing || reduceMotion ? staticFrameSrc : loadedSrc
-								})`,
 							}}
 							draggable={false}
 						/>
@@ -175,13 +176,13 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 					style={{ overflow: 'hidden', width: shape.props.w, height: shape.props.h }}
 				>
 					<div className="tl-image-container" style={containerStyle}>
-						<div
+						<img
 							className="tl-image"
-							style={{
-								backgroundImage: `url(${
-									!shape.props.playing || reduceMotion ? staticFrameSrc : loadedSrc
-								})`,
-							}}
+							// We don't set crossOrigin for non-animated images because
+							// for Cloudflare we don't currenly have that set up.
+							crossOrigin={this.isAnimated(shape) ? 'anonymous' : undefined}
+							src={!shape.props.playing || reduceMotion ? staticFrameSrc : loadedSrc}
+							referrerPolicy="strict-origin-when-cross-origin"
 							draggable={false}
 						/>
 						{this.isAnimated(shape) && !shape.props.playing && (
diff --git a/packages/tldraw/src/lib/ui/context/asset-urls.tsx b/packages/tldraw/src/lib/ui/context/asset-urls.tsx
index 41c2d8029..ec15eb0af 100644
--- a/packages/tldraw/src/lib/ui/context/asset-urls.tsx
+++ b/packages/tldraw/src/lib/ui/context/asset-urls.tsx
@@ -18,13 +18,11 @@ export function AssetUrlsProvider({
 	useEffect(() => {
 		for (const src of Object.values(assetUrls.icons)) {
 			const image = Image()
-			image.referrerPolicy = 'strict-origin-when-cross-origin'
 			image.src = src
 			image.decode()
 		}
 		for (const src of Object.values(assetUrls.embedIcons)) {
 			const image = Image()
-			image.referrerPolicy = 'strict-origin-when-cross-origin'
 			image.src = src
 			image.decode()
 		}
diff --git a/packages/tldraw/src/lib/utils/export/export.ts b/packages/tldraw/src/lib/utils/export/export.ts
index 0571c0593..72ef8e1bd 100644
--- a/packages/tldraw/src/lib/utils/export/export.ts
+++ b/packages/tldraw/src/lib/utils/export/export.ts
@@ -66,7 +66,6 @@ export async function getSvgAsImage(
 			resolve(null)
 		}
 
-		image.referrerPolicy = 'strict-origin-when-cross-origin'
 		image.src = svgUrl
 	})