UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 4.13 kB
{ "version": 3, "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultVideoToolbar.tsx"], "sourcesContent": ["import { Box, TLVideoShape, track, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback, useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'\nimport { AltTextEditor } from './AltTextEditor'\nimport { DefaultVideoToolbarContent } from './DefaultVideoToolbarContent'\n\n/** @public */\nexport interface TLUiVideoToolbarProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport const DefaultVideoToolbar = track(function DefaultVideoToolbar({\n\tchildren,\n}: TLUiVideoToolbarProps) {\n\tconst editor = useEditor()\n\tconst videoShapeId = useValue(\n\t\t'videoShape',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape || onlySelectedShape.type !== 'video') return null\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\tconst showToolbar = editor.isInAny('select.idle', 'select.pointing_shape')\n\tconst isLocked = useValue(\n\t\t'locked',\n\t\t() => (videoShapeId ? editor.getShape<TLVideoShape>(videoShapeId)?.isLocked : false),\n\t\t[editor, videoShapeId]\n\t)\n\tif (!videoShapeId || !showToolbar || isLocked) return null\n\n\treturn (\n\t\t<ContextualToolbarInner key={videoShapeId} videoShapeId={videoShapeId}>\n\t\t\t{children}\n\t\t</ContextualToolbarInner>\n\t)\n})\n\nfunction ContextualToolbarInner({\n\tchildren,\n\tvideoShapeId,\n}: {\n\tchildren?: React.ReactNode\n\tvideoShapeId: TLVideoShape['id']\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst [isEditingAltText, setIsEditingAltText] = useState(false)\n\tconst handleEditAltTextStart = useCallback(() => setIsEditingAltText(true), [])\n\tconst onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])\n\n\tconst getSelectionBounds = useCallback(() => {\n\t\tconst fullBounds = editor.getSelectionScreenBounds()\n\t\tif (!fullBounds) return undefined\n\t\treturn new Box(fullBounds.x, fullBounds.y, fullBounds.width, 0)\n\t}, [editor])\n\n\treturn (\n\t\t<TldrawUiContextualToolbar\n\t\t\tclassName=\"tlui-media__toolbar tlui-video__toolbar\"\n\t\t\tgetSelectionBounds={getSelectionBounds}\n\t\t\tlabel={msg('tool.video-toolbar-title')}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\tchildren\n\t\t\t) : isEditingAltText ? (\n\t\t\t\t<AltTextEditor shapeId={videoShapeId} onClose={onEditAltTextClose} source=\"video-toolbar\" />\n\t\t\t) : (\n\t\t\t\t<DefaultVideoToolbarContent\n\t\t\t\t\tvideoShapeId={videoShapeId}\n\t\t\t\t\tonEditAltTextStart={handleEditAltTextStart}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiContextualToolbar>\n\t)\n}\n"], "mappings": "AAmCE;AAnCF,SAAS,KAAmB,OAAO,WAAW,gBAAgB;AAC9D,SAAS,aAAa,gBAAgB;AACtC,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAQpC,MAAM,sBAAsB,MAAM,SAASA,qBAAoB;AAAA,EACrE;AACD,GAA0B;AACzB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,oBAAoB,OAAO,qBAAqB;AACtD,UAAI,CAAC,qBAAqB,kBAAkB,SAAS,QAAS,QAAO;AACrE,aAAO,kBAAkB;AAAA,IAC1B;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AACA,QAAM,cAAc,OAAO,QAAQ,eAAe,uBAAuB;AACzE,QAAM,WAAW;AAAA,IAChB;AAAA,IACA,MAAO,eAAe,OAAO,SAAuB,YAAY,GAAG,WAAW;AAAA,IAC9E,CAAC,QAAQ,YAAY;AAAA,EACtB;AACA,MAAI,CAAC,gBAAgB,CAAC,eAAe,SAAU,QAAO;AAEtD,SACC,oBAAC,0BAA0C,cACzC,YAD2B,YAE7B;AAEF,CAAC;AAED,SAAS,uBAAuB;AAAA,EAC/B;AAAA,EACA;AACD,GAGG;AACF,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,yBAAyB,YAAY,MAAM,oBAAoB,IAAI,GAAG,CAAC,CAAC;AAC9E,QAAM,qBAAqB,YAAY,MAAM,oBAAoB,KAAK,GAAG,CAAC,CAAC;AAE3E,QAAM,qBAAqB,YAAY,MAAM;AAC5C,UAAM,aAAa,OAAO,yBAAyB;AACnD,QAAI,CAAC,WAAY,QAAO;AACxB,WAAO,IAAI,IAAI,WAAW,GAAG,WAAW,GAAG,WAAW,OAAO,CAAC;AAAA,EAC/D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,OAAO,IAAI,0BAA0B;AAAA,MAEpC,qBACA,WACG,mBACH,oBAAC,iBAAc,SAAS,cAAc,SAAS,oBAAoB,QAAO,iBAAgB,IAE1F;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,oBAAoB;AAAA;AAAA,MACrB;AAAA;AAAA,EAEF;AAEF;", "names": ["DefaultVideoToolbar"] }