Add isPlaying state to video (not complete)

examples/tldraw-example/src/multiplayer/multiplayer.tsx

@@ -10,7 +10,6 @@ import { useMultiplayerState } from './useMultiplayerState'
 // import { getStorage, ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage'
 
 const client = createClient({
-  // @ts-ignore
   publicApiKey: process.env.LIVEBLOCKS_PUBLIC_API_KEY || '',
   throttle: 100,
 })

packages/core/src/hooks/useBoundsEvents.tsx

@@ -15,7 +15,6 @@ export function useBoundsEvents() {
 
       if (e.button !== 0) return
 
-      e.stopPropagation()
       e.currentTarget?.setPointerCapture(e.pointerId)
       const info = inputs.pointerDown(e, 'bounds')
 
@@ -32,7 +31,7 @@ export function useBoundsEvents() {
       inputs.activePointer = undefined
 
       if (!inputs.pointerIsValid(e)) return
-      e.stopPropagation()
+
       const isDoubleClick = inputs.isDoubleClick()
       const info = inputs.pointerUp(e, 'bounds')
 

packages/tldraw/src/state/TldrawApp.ts

@@ -138,7 +138,6 @@ export interface TDCallbacks {
    * (optional) A callback to run when the user creates a new project.
    */
   onChangePresence?: (state: TldrawApp, user: TDUser) => void
-
   onImageDelete?: (id: string) => void
   onImageCreate?: (file: File, id: string) => Promise<string>
 }
@@ -2402,6 +2401,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     const pageShapes = this.document.pages[this.currentPageId].shapes
     const shapesToUpdate = shapes.filter((shape) => pageShapes[shape.id])
     if (shapesToUpdate.length === 0) return this
+
     return this.setState(
       Commands.updateShapes(this, shapesToUpdate, this.currentPageId),
       'updated_shapes'
@@ -2915,13 +2915,11 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         const id = Utils.uniqueId()
 
         try {
-          let dataurl
+          let dataurl: string | ArrayBuffer | null
           if (this.callbacks.onImageCreate) dataurl = await this.callbacks.onImageCreate(file, id)
           else dataurl = await TldrawApp.fileToBase64(file)
-
           if (typeof dataurl === 'string') {
             const extension = file.name.split('.').pop() || ''
-
             const isImage = IMAGE_EXTENSIONS.includes(extension.toLowerCase())
             const isVideo = VIDEO_EXTENSIONS.includes(extension.toLowerCase())
 
@@ -2931,9 +2929,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
             }
 
             const point = this.getPagePoint([e.pageX, e.pageY])
-
             const assetId = Utils.uniqueId()
-
             const type = isImage ? TDShapeType.Image : TDShapeType.Video
             const size = isImage
               ? await TldrawApp.getHeightAndWidthFromDataUrl(dataurl)

packages/tldraw/src/state/shapes/VideoUtil/VideoUtil.tsx

@@ -40,6 +40,7 @@ export class VideoUtil extends TDShapeUtil<T, E> {
         rotation: 0,
         style: defaultStyle,
         assetId: 'assetId',
+        isPlaying: true,
       },
       props
     )
@@ -47,30 +48,44 @@ export class VideoUtil extends TDShapeUtil<T, E> {
 
   Component = TDShapeUtil.Component<T, E, TDMeta>(
     ({ shape, asset, isBinding, isGhost, meta, events, onShapeChange }, ref) => {
-      const { size } = shape
+      const { size, isPlaying } = shape
 
       React.useEffect(() => {
-        if (wrapperRef?.current) {
+        if (wrapperRef.current) {
           const [width, height] = size
           wrapperRef.current.style.width = `${width}px`
           wrapperRef.current.style.height = `${height}px`
         }
       }, [size])
 
-      const imgRef = React.useRef<HTMLVideoElement>(null)
+      const videoRef = React.useRef<HTMLVideoElement>(null)
       const wrapperRef = React.useRef<HTMLDivElement>(null)
 
       const onImageLoad = React.useCallback(() => {
-        if (imgRef?.current && wrapperRef?.current) {
-          const { videoWidth, videoHeight } = imgRef?.current
+        if (videoRef.current && wrapperRef.current) {
+          const { videoWidth, videoHeight } = videoRef.current
           wrapperRef.current.style.width = `${videoWidth}px`
           wrapperRef.current.style.height = `${videoHeight}px`
           onShapeChange?.({ id: shape.id, size: [videoWidth, videoHeight] })
         }
       }, [])
 
+      const toggleIsPlaying = React.useCallback(() => {
+        onShapeChange?.({ id: shape.id, isPlaying: !isPlaying })
+      }, [isPlaying])
+
+      React.useEffect(() => {
+        const video = videoRef.current
+        if (!video) return
+        if (isPlaying) {
+          video.play()
+        } else {
+          video.pause()
+        }
+      }, [isPlaying])
+
       return (
-        <HTMLContainer ref={ref} {...events}>
+        <HTMLContainer ref={ref} {...events} onDoubleClick={toggleIsPlaying}>
           {isBinding && (
             <div
               className="tl-binding-indicator"
@@ -88,8 +103,15 @@ export class VideoUtil extends TDShapeUtil<T, E> {
             ref={wrapperRef}
             isDarkMode={meta.isDarkMode} //
             isGhost={isGhost}
+            onPointerDown={(e) => e.stopPropagation()}
           >
-            <VideoElement muted autoPlay loop ref={imgRef} onLoadedMetadata={onImageLoad}>
+            <VideoElement
+              ref={videoRef}
+              muted
+              loop
+              autoPlay={isPlaying}
+              onLoadedMetadata={onImageLoad}
+            >
               <source src={asset?.src} />
             </VideoElement>
           </Wrapper>

packages/tldraw/src/state/shapes/VideoUtil/__snapshots__/VideoUtil.spec.tsx.snap

@@ -5,6 +5,7 @@ Object {
   "assetId": "assetId",
   "childIndex": 1,
   "id": "video",
+  "isPlaying": true,
   "name": "Video",
   "parentId": "page",
   "point": Array [

packages/tldraw/src/types.ts

@@ -356,6 +356,7 @@ export interface VideoShape extends TDBaseShape {
   type: TDShapeType.Video
   size: number[]
   assetId: string
+  isPlaying: boolean
 }
 
 // The shape created by the Triangle tool