PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[fix] Missing element crash (rare) on video shapes. (#3037)

Browse source 
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.
This commit is contained in:
Steve Ruiz 2024-03-02 19:38:21 +00:00 committed by GitHub
parent 52df06b014
commit 1aef0e8f61
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
View file

@ -46,6 +46,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
const handlePlay = useCallback<ReactEventHandler<HTMLVideoElement>>( const handlePlay = useCallback<ReactEventHandler<HTMLVideoElement>>(
(e) => { (e) => {
const video = e.currentTarget const video = e.currentTarget
if (!video) return
editor.updateShapes([ editor.updateShapes([
{ {
@ -64,6 +65,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
const handlePause = useCallback<ReactEventHandler<HTMLVideoElement>>( const handlePause = useCallback<ReactEventHandler<HTMLVideoElement>>(
(e) => { (e) => {
const video = e.currentTarget const video = e.currentTarget
if (!video) return
editor.updateShapes([ editor.updateShapes([
{ {
@ -82,6 +84,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
const handleSetCurrentTime = useCallback<ReactEventHandler<HTMLVideoElement>>( const handleSetCurrentTime = useCallback<ReactEventHandler<HTMLVideoElement>>(
(e) => { (e) => {
const video = e.currentTarget const video = e.currentTarget
if (!video) return
if (isEditing) { if (isEditing) {
editor.updateShapes([ editor.updateShapes([
@ -103,6 +106,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
const handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>( const handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>(
(e) => { (e) => {
const video = e.currentTarget const video = e.currentTarget
if (!video) return
if (time !== video.currentTime) { if (time !== video.currentTime) {
video.currentTime = time 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 // If the current time changes and we're not editing the video, update the video time
useEffect(() => { useEffect(() => {
const video = rVideo.current const video = rVideo.current
if (!video) return if (!video) return
if (isLoaded && !isEditing && time !== video.currentTime) { if (isLoaded && !isEditing && time !== video.currentTime) {
@ -136,6 +139,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
useEffect(() => { useEffect(() => {
if (prefersReducedMotion) { if (prefersReducedMotion) {
const video = rVideo.current const video = rVideo.current
if (!video) return
video.pause() video.pause()
video.currentTime = 0 video.currentTime = 0
} }