From 6b5876658ba9fedec5e7828deb655c431caba2ad Mon Sep 17 00:00:00 2001 From: Joshua Pinter Date: Sun, 19 Jul 2020 23:00:57 -0600 Subject: [PATCH] Show video icon marker for video files. Otherwise, you can't tell which thumbnail is an image and which is a video, a very important distinction in most cases. Addresses https://github.com/jeanpan/react-native-camera-roll-picker/issues/19. Also add `accessibilityLabel` for "videoMarker" for ease of targetting in automated testing. --- ImageItem.js | 14 ++++++++++++++ videocam.png | Bin 0 -> 6263 bytes 2 files changed, 14 insertions(+) create mode 100644 videocam.png diff --git a/ImageItem.js b/ImageItem.js index cfc3e73..4ea779f 100644 --- a/ImageItem.js +++ b/ImageItem.js @@ -8,6 +8,7 @@ import { import PropTypes from 'prop-types'; const checkIcon = require('./circle-check.png'); +const videoIcon = require('./videocam.png'); const styles = StyleSheet.create({ marker: { @@ -16,6 +17,14 @@ const styles = StyleSheet.create({ right: 5, backgroundColor: 'transparent', }, + videoMarker: { + position: 'absolute', + bottom: 5, + right: 5, + backgroundColor: 'transparent', + width: 50, + height: 30 + }, }); class ImageItem extends Component { @@ -38,6 +47,10 @@ class ImageItem extends Component { item, selected, selectedMarker, imageMargin, } = this.props; + let videoMarker; + if ( item.node.type.startsWith( "video" ) ) + videoMarker = ; + const marker = selectedMarker || ( + {videoMarker} {(selected) ? marker : null} ); diff --git a/videocam.png b/videocam.png new file mode 100644 index 0000000000000000000000000000000000000000..5ab0ce5d1a09e3ff3a099185ed089194bfff2edf GIT binary patch literal 6263 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 G!~X{l#Lbrg literal 0 HcmV?d00001