From 1aef0e8f61c7265af88581ebcc72f6a863586148 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sat, 2 Mar 2024 19:38:21 +0000
Subject: [PATCH] [fix] Missing element crash (rare) on video shapes. (#3037)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds a few guards against crashes when the video shape element
is not found.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixed a rare crash with video shapes.
---
 packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
index 8c0ffb493..89eb5f83c 100644
--- a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
@@ -46,6 +46,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 		const handlePlay = useCallback<ReactEventHandler<HTMLVideoElement>>(
 			(e) => {
 				const video = e.currentTarget
+				if (!video) return
 
 				editor.updateShapes([
 					{
@@ -64,6 +65,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 		const handlePause = useCallback<ReactEventHandler<HTMLVideoElement>>(
 			(e) => {
 				const video = e.currentTarget
+				if (!video) return
 
 				editor.updateShapes([
 					{
@@ -82,6 +84,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 		const handleSetCurrentTime = useCallback<ReactEventHandler<HTMLVideoElement>>(
 			(e) => {
 				const video = e.currentTarget
+				if (!video) return
 
 				if (isEditing) {
 					editor.updateShapes([
@@ -103,6 +106,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 		const handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>(
 			(e) => {
 				const video = e.currentTarget
+				if (!video) return
 				if (time !== video.currentTime) {
 					video.currentTime = time
 				}
@@ -119,7 +123,6 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 		// If the current time changes and we're not editing the video, update the video time
 		useEffect(() => {
 			const video = rVideo.current
-
 			if (!video) return
 
 			if (isLoaded && !isEditing && time !== video.currentTime) {
@@ -136,6 +139,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 		useEffect(() => {
 			if (prefersReducedMotion) {
 				const video = rVideo.current
+				if (!video) return
 				video.pause()
 				video.currentTime = 0
 			}