From 5e4bca9961bf31ecfc791bed1d92248e70dff7e9 Mon Sep 17 00:00:00 2001
From: hirano <bubweiser@users.noreply.github.com>
Date: Tue, 5 Mar 2024 01:21:41 +0900
Subject: [PATCH] Fix an issue where the video size was not drawn correctly
 (#3047)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/lib/shapes/video/VideoShapeUtil.tsx   | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
index 89eb5f83c..796bf84ff 100644
--- a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx
@@ -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()} />