Merge pull request #1625 from StoDevX/webcams-two-column-android

Fix column layout in Webcams list

Author: hawkrives

source/views/streaming/webcams.js

@@ -5,7 +5,15 @@
  */
 
 import React from 'react'
-import {StyleSheet, View, Text, FlatList, Image, Platform} from 'react-native'
+import {
+  StyleSheet,
+  View,
+  Text,
+  ScrollView,
+  Image,
+  Platform,
+  Dimensions,
+} from 'react-native'
 import delay from 'delay'
 import {reportNetworkProblem} from '../../lib/report-network-problem'
 import {TabBarIcon} from '../components/tabbar-icon'
@@ -15,6 +23,8 @@ import * as defaultData from '../../../docs/webcams.json'
 import {webcamImages} from '../../../images/webcam-images'
 import {trackedOpenUrl} from '../components/open-url'
 import LinearGradient from 'react-native-linear-gradient'
+import {Column} from '../components/layout'
+import {partitionByIndex} from '../../lib/partition-by-index'
 
 const transparentPixel = require('../../../images/transparent.png')
 const GITHUB_URL = 'https://stodevx.github.io/AAO-React-Native/webcams.json'
@@ -32,6 +42,7 @@ type WebcamType = {
 type Props = {}
 
 type State = {
+  width: number,
   webcams: Array<WebcamType>,
   loading: boolean,
   refreshing: boolean,
@@ -44,15 +55,25 @@ export class WebcamsView extends React.PureComponent<void, Props, State> {
   }
 
   state = {
+    width: Dimensions.get('window').width,
     webcams: defaultData.data,
     loading: false,
     refreshing: false,
   }
 
   componentWillMount() {
+    Dimensions.addEventListener('change', this.handleResizeEvent)
     this.fetchData()
   }
 
+  componentWillUnmount() {
+    Dimensions.removeEventListener('change', this.handleResizeEvent)
+  }
+
+  handleResizeEvent = (event: {window: {width: number}}) => {
+    this.setState(() => ({width: event.window.width}))
+  }
+
   refresh = async () => {
     const start = Date.now()
     this.setState(() => ({refreshing: true}))
@@ -83,32 +104,33 @@ export class WebcamsView extends React.PureComponent<void, Props, State> {
     this.setState(() => ({webcams, loading: false}))
   }
 
-  renderItem = ({item}: {item: WebcamType}) =>
-    <StreamThumbnail key={item.name} webcam={item} />
-
-  keyExtractor = (item: WebcamType) => item.name
-
   render() {
+    const columns = partitionByIndex(this.state.webcams)
+
     return (
-      <FlatList
-        keyExtractor={this.keyExtractor}
-        renderItem={this.renderItem}
-        refreshing={this.state.refreshing}
-        onRefresh={this.refresh}
-        data={this.state.webcams}
-        numColumns={2}
-        columnWrapperStyle={styles.row}
-        contentContainerStyle={styles.container}
-      />
+      <ScrollView contentContainerStyle={styles.container}>
+        {columns.map((contents, i) =>
+          <Column key={i} style={styles.column}>
+            {contents.map(webcam =>
+              <StreamThumbnail
+                key={webcam.name}
+                webcam={webcam}
+                viewportWidth={this.state.width}
+              />,
+            )}
+          </Column>,
+        )}
+      </ScrollView>
     )
   }
 }
 
-class StreamThumbnail extends React.PureComponent {
-  props: {
-    webcam: WebcamType,
-  }
+type ThumbnailProps = {
+  webcam: WebcamType,
+  viewportWidth: number,
+}
 
+class StreamThumbnail extends React.PureComponent<void, ThumbnailProps, void> {
   handlePress = () => {
     const {streamUrl, name, pageUrl} = this.props.webcam
     if (Platform.OS === 'ios') {
@@ -121,18 +143,17 @@ class StreamThumbnail extends React.PureComponent {
   }
 
   render() {
-    const {
-      name,
-      thumbnail,
-      accentColor,
-      textColor,
-      thumbnailUrl,
-    } = this.props.webcam
+    const {viewportWidth, webcam} = this.props
+    const {name, thumbnail, accentColor, textColor, thumbnailUrl} = webcam
 
     const [r, g, b] = accentColor
     const baseColor = `rgba(${r}, ${g}, ${b}, 1)`
     const startColor = `rgba(${r}, ${g}, ${b}, 0.1)`
 
+    const width = viewportWidth / 2 - CELL_MARGIN * 1.5
+    const cellRatio = 2.15625
+    const height = width / cellRatio
+
     const img = thumbnailUrl
       ? {uri: thumbnailUrl}
       : webcamImages.hasOwnProperty(thumbnail)
@@ -145,9 +166,8 @@ class StreamThumbnail extends React.PureComponent {
         underlayColor={baseColor}
         activeOpacity={0.7}
         onPress={this.handlePress}
-        containerStyle={styles.cell}
       >
-        <Image source={img} style={styles.image}>
+        <Image source={img} style={[styles.image, {width, height}]}>
           <View style={styles.titleWrapper}>
             <LinearGradient
               colors={[startColor, baseColor]}
@@ -168,27 +188,16 @@ const CELL_MARGIN = 10
 
 const styles = StyleSheet.create({
   container: {
-    marginVertical: CELL_MARGIN / 2,
+    padding: CELL_MARGIN / 2,
+    flexDirection: 'row',
   },
-  row: {
-    justifyContent: 'center',
-    marginHorizontal: CELL_MARGIN / 2,
-  },
-  cell: {
+  column: {
     flex: 1,
-    overflow: 'hidden',
-    margin: CELL_MARGIN / 2,
-    justifyContent: 'center',
-
-    elevation: 2,
-
-    // TODO: Android doesn't currently (0.42) respect both
-    // overflow:hidden and border-radius.
-    borderRadius: Platform.OS === 'android' ? 0 : 6,
+    alignItems: 'center',
   },
   image: {
-    width: '100%',
-    height: '100%',
+    margin: CELL_MARGIN / 2,
+    borderRadius: 6,
   },
   titleWrapper: {
     flex: 1,