Update video player style on mobile

- Add a new gridicon play icon, from: https://github.com/Automattic/gridicons/blob/87c9fce08b4a9f184b9fb4963228757fdd4f4e74/svg-min/gridicons-play.svg - Replace the Dashicon play by this one - Update icon size and icon color - Update the overlay color
WordPress · Aug 21, 2019 · 22aafff · 22aafff
1 parent 2f9d0e2
commit 22aafff
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/packages/block-library/src/video/gridicon-play.native.js b/packages/block-library/src/video/gridicon-play.native.js
@@ -0,0 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-2 14.5v-9l6 4.5z" fill="white" /></SVG>;
+
diff --git a/packages/block-library/src/video/video-player.native.js b/packages/block-library/src/video/video-player.native.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { Dashicon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,6 +15,7 @@ import { default as VideoPlayer } from 'react-native-video';
  * Internal dependencies
  */
 import styles from './video-player.scss';
+import PlayIcon from './gridicon-play';
 
 class Video extends Component {
 	constructor() {
@@ -92,10 +93,9 @@ class Video extends Component {
 				{ showPlayButton &&
 				// If we add the play icon as a subview to VideoPlayer then react-native-video decides to show control buttons
 				// even if we set controls={ false }, so we are adding our play button as a sibling overlay view.
-				<TouchableOpacity disabled={ ! isSelected } onPress={ this.onPressPlay } style={ [ style, styles.overlay ] }>
-					<View style={ styles.playIcon }>
-						<Dashicon icon={ 'controls-play' } ariaPressed={ 'dashicon-active' } size={ styles.playIcon.width } />
-					</View>
+				<TouchableOpacity disabled={ ! isSelected } onPress={ this.onPressPlay } style={ [ style, styles.overlayContainer ] }>
+					<View style={ styles.blackOverlay } />
+					<Icon icon={ PlayIcon } style={ styles.playIcon } size={ styles.playIcon.size } />
 				</TouchableOpacity>
 				}
 			</View>

diff --git a/packages/block-library/src/video/video-player.native.scss b/packages/block-library/src/video/video-player.native.scss
@@ -8,25 +8,22 @@ $play-icon-size: 50;
 	align-items: center;
 }
 
-.overlay {
+.overlayContainer {
 	justify-content: center;
 	align-items: center;
 	align-self: center;
 	position: absolute;
-	background-color: transparent;
-	opacity: 0.3;
+}
+
+.blackOverlay {
+	width: 100%;
+	height: 100%;
+	background-color: $black;
+	opacity: 0.4;
 }
 
 .playIcon {
-	justify-content: center;
-	align-items: center;
-	align-self: center;
 	position: absolute;
-	background-color: #000;
-	height: $play-icon-size;
-	width: $play-icon-size;
-	border-bottom-left-radius: $play-icon-size/8;
-	border-bottom-right-radius: $play-icon-size/8;
-	border-top-right-radius: $play-icon-size/8;
-	border-top-left-radius: $play-icon-size/8;
+	opacity: 0.7;
+	size: 64;
 }