Video block has black background when upload is in progress or upload…

… has failed (#15991) * Fixed issue with a black background when the upload is in progress or upload has failed
WordPress · Jun 5, 2019 · 4c2eb54 · 4c2eb54
1 parent 01db600
commit 4c2eb54
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -212,16 +212,18 @@ class VideoEdit extends React.Component {
 							return (
 								<View onLayout={ this.onVideoContanerLayout } style={ containerStyle }>
 									{ showVideo && isURL( src ) &&
-										<Video
-											isSelected={ isSelected }
-											style={ videoStyle }
-											source={ { uri: src } }
-											paused={ true }
-											muted={ true }
-										/>
+										<View style={ style.videoContainer }>
+											<Video
+												isSelected={ isSelected }
+												style={ videoStyle }
+												source={ { uri: src } }
+												paused={ true }
+												muted={ true }
+											/>
+										</View>
 									}
 									{ ! showVideo &&
-										<View style={ { ...videoStyle, ...style.placeholder } }>
+										<View style={ { height: videoContainerHeight, width: '100%', ...style.placeholder } }>
 											{ videoContainerHeight > 0 && iconContainer }
 											{ isUploadFailed && <Text style={ style.uploadFailedText }>{ retryMessage }</Text> }
 										</View>

diff --git a/packages/block-library/src/video/style.ios.scss b/packages/block-library/src/video/style.ios.scss
diff --git a/packages/block-library/src/video/style.native.scss b/packages/block-library/src/video/style.native.scss
@@ -4,6 +4,11 @@
 	width: 100%;
 }
 
+.videoContainer {
+	flex: 1;
+	background-color: #000;
+}
+
 .placeholder {
 	flex: 1;
 	justify-content: center;