import * as React from 'react' ; import { StyleSheet , Image } from 'react-native' ; import { ListRow , Detail , Title } from '@frogpond/lists' ; import { Column , Row } from '@frogpond/layout' ; import { innerTextWithSpaces , parseHtml } from '@frogpond/html-lib' ; import { trackedOpenUrl } from '@frogpond/open-url' ; import moment from 'moment' ; import type { StreamType } from './types' ; const styles = StyleSheet . create ( { image : { marginRight : 12 , height : 40 , width : 70 , } , } ) ; function Name ( { item } ) { let title = innerTextWithSpaces ( parseHtml ( item . title ) ) ; return title ? < Title > { title } < /Title> : null; } function Info ( { item } ) { let detail = innerTextWithSpaces ( parseHtml ( item . subtitle || item . performer || '' ) ) ; return detail ? < Detail > { detail } < /Detail> : null; } function Time ( { item } ) { let showTime = item . status !== 'archived' ; return showTime ? ( < Detail > { moment ( item . date ) . format ( 'h:mm A – ddd, MMM. Do, YYYY' ) } < /Detail>) : null; } function Thumbnail ( { item } ) { return item . thumb ? ( < Image accessibilityIgnoresInvertColors = { true } source = { { uri : item . thumb } } style = { styles . image } / > ) : null ; } type Props = { stream : StreamType ; } ; export class StreamRow extends React . PureComponent < Props > { onPressStream = ( ) => { let { stream } = this . props ; trackedOpenUrl ( { url : stream . player , id : 'StreamingMedia_StreamView' } ) ; } ; render ( ) { let { stream } = this . props ; return ( < ListRow arrowPosition = "center" onPress = { this . onPressStream } > < Row alignItems = "center" > < Thumbnail item = { stream } /> < Column flex = { 1 } > < Name item = { stream } /> < Info item = { stream } / > < Time item = { stream } /> < /Column> < /Row> < /ListRow>); } }