tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 4.01 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx"],
"sourcesContent": ["import { TLVideoShape, track, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface DefaultVideoToolbarContentProps {\n\tvideoShapeId: TLVideoShape['id']\n\tonEditAltTextStart(): void\n}\n\n/** @public @react */\nexport const DefaultVideoToolbarContent = track(function DefaultVideoToolbarContent({\n\tvideoShapeId,\n\tonEditAltTextStart,\n}: DefaultVideoToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'video-toolbar'\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst actions = useActions()\n\n\tconst handleVideoReplace = useCallback(\n\t\t() => actions['video-replace'].onSelect('video-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleVideoDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('video-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLVideoShape>(videoShapeId)!.props.altText,\n\t\t[editor, videoShapeId]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('tool.replace-media')}\n\t\t\t\t\tonClick={handleVideoReplace}\n\t\t\t\t\tdata-testid=\"tool.video-replace\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleVideoDownload}\n\t\t\t\tdata-testid=\"tool.video-download\"\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tisActive={!!altText}\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tdata-testid=\"tool.video-alt-text\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
"mappings": "AA6CE,mBAQG,KARH;AA7CF,SAAuB,OAAO,WAAW,gBAAgB;AACzD,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAS/B,MAAM,6BAA6B,MAAM,SAASA,4BAA2B;AAAA,EACnF;AAAA,EACA;AACD,GAAoC;AACnC,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,YAAY;AAC/B,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS;AACf,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,UAAU,WAAW;AAE3B,QAAM,qBAAqB;AAAA,IAC1B,MAAM,QAAQ,eAAe,EAAE,SAAS,eAAe;AAAA,IACvD,CAAC,OAAO;AAAA,EACT;AAEA,QAAM,sBAAsB;AAAA,IAC3B,MAAM,QAAQ,mBAAmB,EAAE,SAAS,eAAe;AAAA,IAC3D,CAAC,OAAO;AAAA,EACT;AAEA,QAAM,UAAU;AAAA,IACf;AAAA,IACA,MAAM,OAAO,SAAuB,YAAY,EAAG,MAAM;AAAA,IACzD,CAAC,QAAQ,YAAY;AAAA,EACtB;AAEA,SACC,iCACE;AAAA,KAAC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,IAAI,oBAAoB;AAAA,QAC/B,SAAS;AAAA,QACT,eAAY;AAAA,QAEZ,8BAAC,sBAAmB,OAAK,MAAC,MAAK,cAAa;AAAA;AAAA,IAC7C;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,IAAI,0BAA0B;AAAA,QACrC,SAAS;AAAA,QACT,eAAY;AAAA,QAEZ,8BAAC,sBAAmB,OAAK,MAAC,MAAK,YAAW;AAAA;AAAA,IAC3C;AAAA,KACE,WAAW,CAAC,eACb;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAAC,CAAC;AAAA,QACZ,OAAO,IAAI,qBAAqB;AAAA,QAChC,eAAY;AAAA,QACZ,SAAS,MAAM;AACd,qBAAW,kBAAkB,EAAE,OAAO,CAAC;AACvC,6BAAmB;AAAA,QACpB;AAAA,QAEA,8BAAC,sBAAmB,OAAK,MAAC,MAAK,OAAM;AAAA;AAAA,IACtC;AAAA,KAEF;AAEF,CAAC;",
"names": ["DefaultVideoToolbarContent"]
}