fleetback-camera-roll-picker/ImageItem.js

A React Native component providing images selection from camera roll

import React, { Component } from 'react';
import {
  View,
  Image,
  StyleSheet,
  TouchableOpacity,
  Text,
} from 'react-native';
import PropTypes from 'prop-types';

const checkIcon = require('./circle-check.png');

const styles = StyleSheet.create({
  marker: {
    position: 'absolute',
    top: 5,
    right: 5,
    backgroundColor: 'transparent',
  },
  flex1: { flex: 1 },
  videoDuration: {
    position: 'absolute',
    bottom: 5,
    left: 5,
    color: 'white',
    fontWeight: 'bold',
  }
});

class ImageItem extends Component {
  render() {
    const { item /* nullable */, selected, selectedMarker, imageMargin, colIndex, rowIndex } = this.props;
    if (!item) {
      return <View style={{ marginBottom: imageMargin, marginRight: imageMargin, flex: 1, aspectRatio: 1 }}/>;
    }

    const marker = selectedMarker || (<Image
      style={[styles.marker, { width: 25, height: 25 }]}
      source={checkIcon}
    />);

    const { image } = item.node;

    return (
      <TouchableOpacity
        style={{ marginBottom: imageMargin, marginRight: imageMargin, flex: 1, aspectRatio: 1 }}
        onPress={() => this.props.onClick(image)}
        testID={`camera-roll-picker-${rowIndex}-${colIndex}`}
      >
        <Image
          source={{ uri: image.uri }}
          style={styles.flex1}
        />
        {(selected) ? marker : null}
        {image.playableDuration !== null && <Text style={styles.videoDuration} testID={`camera-roll-picker-${rowIndex}-${colIndex}-video`}>
          {formatDuration(image.playableDuration)}
        </Text>}
      </TouchableOpacity>
    );
  }
}

ImageItem.defaultProps = {
  item: {},
  selected: false,
};

ImageItem.propTypes = {
  item: PropTypes.object,
  selected: PropTypes.bool,
  selectedMarker: PropTypes.element,
  imageMargin: PropTypes.number,
  onClick: PropTypes.func,
};

export default ImageItem;

function formatDuration(totalSeconds) {
  if (typeof totalSeconds !== 'number') return '';

  totalSeconds = Math.round(totalSeconds);

  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = totalSeconds % 60;

  const format = n => n.toString().padStart(2, '0');

  const displayHours = hours > 0 ? `${format(hours)}:` : '';
  return `${displayHours}${format(minutes)}:${format(seconds)}`;
}