Fix an issue where the video size was not drawn correctly (#3047)

Fixed an issue where the video size was drawing larger than the shape
size.


After:
![スクリーンショット 2024-03-04 15 38
10](https://github.com/tldraw/tldraw/assets/20399854/5839f4a3-913b-4d3a-a816-003d58f89d50)

Before:
![スクリーンショット 2024-03-04 15 37
32](https://github.com/tldraw/tldraw/assets/20399854/188bd0cb-50aa-4ea9-a0a5-7748d747eae0)

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

no tests

### Release Notes

- Fix an issue where the video size was not drawn correctly.

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
hirano 2024-03-05 01:21:41 +09:00 committed by GitHub
parent ce782dc70b
commit 5e4bca9961
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -149,39 +149,42 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
<>
<HTMLContainer
id={shape.id}
className="tl-video-container tl-counter-scaled"
style={{
color: 'var(--color-text-3)',
backgroundColor: asset ? 'transparent' : 'var(--color-low)',
border: asset ? 'none' : '1px solid var(--color-low-border)',
}}
>
{asset?.props.src ? (
<video
ref={rVideo}
style={isEditing ? { pointerEvents: 'all' } : undefined}
className={`tl-video tl-video-shape-${shape.id.split(':')[1]}`}
width="100%"
height="100%"
draggable={false}
playsInline
autoPlay
muted
loop
disableRemotePlayback
disablePictureInPicture
controls={isEditing && showControls}
onPlay={handlePlay}
onPause={handlePause}
onTimeUpdate={handleSetCurrentTime}
onLoadedData={handleLoadedData}
hidden={!isLoaded}
>
<source src={asset.props.src} />
</video>
) : (
<BrokenAssetIcon />
)}
<div className="tl-counter-scaled">
<div className="tl-video-container">
{asset?.props.src ? (
<video
ref={rVideo}
style={isEditing ? { pointerEvents: 'all' } : undefined}
className={`tl-video tl-video-shape-${shape.id.split(':')[1]}`}
width="100%"
height="100%"
draggable={false}
playsInline
autoPlay
muted
loop
disableRemotePlayback
disablePictureInPicture
controls={isEditing && showControls}
onPlay={handlePlay}
onPause={handlePause}
onTimeUpdate={handleSetCurrentTime}
onLoadedData={handleLoadedData}
hidden={!isLoaded}
>
<source src={asset.props.src} />
</video>
) : (
<BrokenAssetIcon />
)}
</div>
</div>
</HTMLContainer>
{'url' in shape.props && shape.props.url && (
<HyperlinkButton url={shape.props.url} zoomLevel={editor.getZoomLevel()} />