{
  "version": 3,
  "sources": ["../../../../src/lib/shapes/video/VideoShapeUtil.tsx"],
  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tTLVideoShape,\n\ttoDomPrecision,\n\ttrack,\n\tuseIsEditing,\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\n/** @public */\nexport class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {\n\tstatic override type = 'video' as const\n\tstatic override props = videoShapeProps\n\tstatic override migrations = videoShapeMigrations\n\n\toverride canEdit = () => true\n\toverride isAspectRatioLocked = () => true\n\n\toverride getDefaultProps(): TLVideoShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\ttime: 0,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t}\n\t}\n\n\tcomponent(shape: TLVideoShape) {\n\t\treturn <TLVideoUtilComponent shape={shape} videoUtil={this} />\n\t}\n\n\tindicator(shape: TLVideoShape) {\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride toSvg(shape: TLVideoShape) {\n\t\tconst g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\t\tconst image = document.createElementNS('http://www.w3.org/2000/svg', 'image')\n\t\timage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', serializeVideo(shape.id))\n\t\timage.setAttribute('width', shape.props.w.toString())\n\t\timage.setAttribute('height', shape.props.h.toString())\n\t\tg.appendChild(image)\n\n\t\treturn g\n\t}\n}\n\n// Function from v1, could be improved bu explicitly using this.model.time (?)\nfunction serializeVideo(id: string): string {\n\tconst splitId = id.split(':')[1]\n\tconst video = document.querySelector(`.tl-video-shape-${splitId}`) as HTMLVideoElement\n\tif (video) {\n\t\tconst canvas = document.createElement('canvas')\n\t\tcanvas.width = video.videoWidth\n\t\tcanvas.height = video.videoHeight\n\t\tcanvas.getContext('2d')!.drawImage(video, 0, 0)\n\t\treturn canvas.toDataURL('image/png')\n\t} else throw new Error('Video with id ' + splitId + ' not found')\n}\n\nconst TLVideoUtilComponent = track(function TLVideoUtilComponent(props: {\n\tshape: TLVideoShape\n\tvideoUtil: VideoShapeUtil\n}) {\n\tconst { shape, videoUtil } = props\n\tconst showControls =\n\t\tvideoUtil.editor.getShapeGeometry(shape).bounds.w * videoUtil.editor.zoomLevel >= 110\n\tconst asset = shape.props.assetId ? videoUtil.editor.getAsset(shape.props.assetId) : null\n\tconst { time, playing } = shape.props\n\tconst isEditing = useIsEditing(shape.id)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\n\tconst rVideo = React.useRef<HTMLVideoElement>(null!)\n\n\tconst handlePlay = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\n\t\t\tvideoUtil.editor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\ttype: 'video',\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tplaying: true,\n\t\t\t\t\t\ttime: video.currentTime,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t},\n\t\t[shape.id, videoUtil.editor]\n\t)\n\n\tconst handlePause = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\n\t\t\tvideoUtil.editor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\ttype: 'video',\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tplaying: false,\n\t\t\t\t\t\ttime: video.currentTime,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t},\n\t\t[shape.id, videoUtil.editor]\n\t)\n\n\tconst handleSetCurrentTime = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\n\t\t\tif (isEditing) {\n\t\t\t\tvideoUtil.editor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'video',\n\t\t\t\t\t\tid: shape.id,\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\ttime: video.currentTime,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t},\n\t\t[isEditing, shape.id, videoUtil.editor]\n\t)\n\n\tconst [isLoaded, setIsLoaded] = React.useState(false)\n\n\tconst handleLoadedData = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\t\t\tif (time !== video.currentTime) {\n\t\t\t\tvideo.currentTime = time\n\t\t\t}\n\n\t\t\tif (!playing) {\n\t\t\t\tvideo.pause()\n\t\t\t}\n\n\t\t\tsetIsLoaded(true)\n\t\t},\n\t\t[playing, time]\n\t)\n\n\t// If the current time changes and we're not editing the video, update the video time\n\tReact.useEffect(() => {\n\t\tconst video = rVideo.current\n\n\t\tif (!video) return\n\n\t\tif (isLoaded && !isEditing && time !== video.currentTime) {\n\t\t\tvideo.currentTime = time\n\t\t}\n\n\t\tif (isEditing) {\n\t\t\tif (document.activeElement !== video) {\n\t\t\t\tvideo.focus()\n\t\t\t}\n\t\t}\n\t}, [isEditing, isLoaded, time])\n\n\tReact.useEffect(() => {\n\t\tif (prefersReducedMotion) {\n\t\t\tconst video = rVideo.current\n\t\t\tvideo.pause()\n\t\t\tvideo.currentTime = 0\n\t\t}\n\t}, [rVideo, prefersReducedMotion])\n\n\treturn (\n\t\t<>\n\t\t\t<HTMLContainer id={shape.id}>\n\t\t\t\t<div className=\"tl-counter-scaled\">\n\t\t\t\t\t{asset?.props.src ? (\n\t\t\t\t\t\t<video\n\t\t\t\t\t\t\tref={rVideo}\n\t\t\t\t\t\t\tstyle={isEditing ? { pointerEvents: 'all' } : undefined}\n\t\t\t\t\t\t\tclassName={`tl-video tl-video-shape-${shape.id.split(':')[1]}`}\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\tdisableRemotePlayback\n\t\t\t\t\t\t\tdisablePictureInPicture\n\t\t\t\t\t\t\tcontrols={isEditing && showControls}\n\t\t\t\t\t\t\tonPlay={handlePlay}\n\t\t\t\t\t\t\tonPause={handlePause}\n\t\t\t\t\t\t\tonTimeUpdate={handleSetCurrentTime}\n\t\t\t\t\t\t\tonLoadedData={handleLoadedData}\n\t\t\t\t\t\t\thidden={!isLoaded}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<source src={asset.props.src} />\n\t\t\t\t\t\t</video>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t\t{'url' in shape.props && shape.props.url && (\n\t\t\t\t<HyperlinkButton url={shape.props.url} zoomLevel={videoUtil.editor.zoomLevel} />\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
  "mappings": "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",
  "names": ["TLVideoUtilComponent"]
}