summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/lib/app/index.js1
-rw-r--r--client/src/lib/timeline/timelineFull.js1
-rw-r--r--client/src/lib/views/information.js233
-rw-r--r--client/src/lib/views/livestream.js18
4 files changed, 197 insertions, 56 deletions
diff --git a/client/src/lib/app/index.js b/client/src/lib/app/index.js
index d6e8e61..53e16f4 100644
--- a/client/src/lib/app/index.js
+++ b/client/src/lib/app/index.js
@@ -106,6 +106,7 @@ class App extends Component {
)}/>
<Route path='/information' render={(props) => (
<Information
+ essays={this.state.db.essay}
content={this.state.db.about}
onLinkPress={this.onLinkPress}
{...props}
diff --git a/client/src/lib/timeline/timelineFull.js b/client/src/lib/timeline/timelineFull.js
index 9fb8179..8490ce2 100644
--- a/client/src/lib/timeline/timelineFull.js
+++ b/client/src/lib/timeline/timelineFull.js
@@ -172,6 +172,7 @@ const styles = StyleSheet.create({
},
metadataContainer: {
position: 'absolute',
+ top: 0,
left: '60%',
width: '40%',
},
diff --git a/client/src/lib/views/information.js b/client/src/lib/views/information.js
index 77d1af2..9dc5ced 100644
--- a/client/src/lib/views/information.js
+++ b/client/src/lib/views/information.js
@@ -1,42 +1,206 @@
import React, { Component } from 'react';
import {
StyleSheet,
+ View,
Image,
+ TouchableOpacity,
+ ScrollView,
} from 'react-native';
+import HTMLView from 'react-native-htmlview'
+import Modal from 'react-native-modal'
+
+import htmlStyles from '../components/htmlStyles'
+
import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'
+import Button from '../components/button'
+import Close from '../components/close'
+import Heading from '../components/heading'
export default class Information extends Component {
constructor(props) {
super()
+ this.state = {
+ essay: { title: '', byline: '', body: '' },
+ essayModalVisible: false,
+ biosVisible: false,
+ }
+ }
+ showEssay(essay) {
+ let essayBody = essay.body.split('\n').map( (s) => {
+ s = s.replace(/\r/g,'').trim()
+ if (! s.length) return ''
+ if (s.match(/^<h2>/i)) return s.toUpperCase()
+ return '<p>' + s + '</p>'
+ }).join('')
+ if (essay.id == 'notes-on-surveillance') {
+ essayBody += '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'
+ }
+ else {
+ essayBody += '\n\n\n\n\n'
+ }
+ this.setState({ essay, essayBody, essayModalVisible: true })
+ }
+ hideEssay() {
+ this.setState({ essayModalVisible: false })
+ }
+ showBios() {
+ this.setState({ biosVisible: true })
+ }
+ hideBios() {
+ this.setState({ biosVisible: false })
}
render() {
const content = this.props.content
+ const essays = this.props.essays.map( (essay, i) => {
+ return (
+ <TouchableOpacity key={i} onPress={() => this.showEssay(essay)}>
+ <View style={styles.essayContainer}>
+ <ClearText style={styles.essayTitle}>{essay.title}</ClearText>
+ <ClearText style={styles.essayByline}>{essay.byline}</ClearText>
+ </View>
+ </TouchableOpacity>
+ )
+ })
return (
<ScrollableContainer heading="ABOUT THIS WORK" bodyStyle={styles.bodyStyle}>
- <ClearText style={styles.body}>
- {this.props.content.show}
- </ClearText>
+ <View style={styles.essays}>
+ {essays}
- <Image source={require('../../img/aiweiwei.png')} resizeMode='cover' style={styles.face} />
- <ClearText style={styles.body}>
- {this.props.content.aiWeiWeiBio}
- </ClearText>
- <Image source={require('../../img/herzogDeMeuron.png')} resizeMode='cover' style={styles.face} />
- <ClearText style={styles.body}>
- {this.props.content.herzogBio}
- </ClearText>
- <ClearText style={styles.body}>
- {this.props.content.deMeuronBio}
- </ClearText>
- <ClearText style={styles.footer}>
- </ClearText>
+ <TouchableOpacity onPress={() => this.showBios()}>
+ <View style={styles.essayContainer}>
+ <ClearText style={styles.essayTitle}>Artist Biographies</ClearText>
+ <ClearText style={styles.essayByline}>Ai Weiwei, Jacques Herzog, Phillipe de Meuron</ClearText>
+ </View>
+ </TouchableOpacity>
+ </View>
+
+ <Modal style={styles.modal} isVisible={this.state.biosVisible}>
+ <ScrollView contentContainerStyle={styles.modalContainer}>
+ <View style={styles.modalBody}>
+
+ <Image source={require('../../img/aiweiwei.png')} resizeMode='cover' style={styles.face} />
+ <ClearText style={styles.bio}>
+ {this.props.content.aiWeiWeiBio}
+ </ClearText>
+ <Image source={require('../../img/herzogDeMeuron.png')} resizeMode='cover' style={styles.face} />
+ <ClearText style={styles.bio}>
+ {this.props.content.herzogBio}
+ </ClearText>
+ <ClearText style={styles.bio}>
+ {this.props.content.deMeuronBio}
+ </ClearText>
+ <ClearText style={styles.footer}>
+ </ClearText>
+
+ </View>
+ </ScrollView>
+ <Close onPress={() => this.hideBios()} />
+ </Modal>
+
+ <Modal style={styles.modal} isVisible={this.state.essayModalVisible}>
+ <ScrollView contentContainerStyle={styles.modalContainer}>
+ <View style={styles.modalBody}>
+ <Heading style={styles.essayHeader}>{this.state.essay.title.toUpperCase()}</Heading>
+ <Heading style={styles.essayBylineHeader}>{this.state.essay.byline}</Heading>
+ <HTMLView value={this.state.essayBody} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
+ </View>
+ </ScrollView>
+ <Close onPress={() => this.hideEssay()} />
+ </Modal>
</ScrollableContainer>
);
}
}
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'flex-start',
+ alignItems: 'flex-start',
+ },
+ bodyStyle: {
+ marginRight: 10,
+ },
+ video: {
+ alignSelf: 'stretch',
+ height: 400,
+ width: '100%',
+ backgroundColor: 'black',
+ marginVertical: 10
+ },
+ body: {
+ textAlign: 'left',
+ paddingRight: 10,
+ width: '90%',
+ marginBottom: 20,
+ },
+
+
+ bio: {
+ textAlign: 'left',
+ paddingRight: 10,
+ marginBottom: 20,
+ },
+ face: {
+ width: 550,
+ height: 350,
+ marginBottom: 20,
+ },
+ footer: {
+ marginBottom: 80,
+ },
+
+ essays: {
+ marginLeft: -55,
+ marginBottom: 20,
+ },
+ essayContainer: {
+ padding: 10,
+ margin: 5,
+ },
+ essayTitle: {
+ textDecorationColor: '#bbb',
+ textDecorationLine: 'underline',
+ },
+ essayByline: {
+ fontSize: 12,
+ fontWeight: 'bold',
+ },
+ essayHeader: {
+ paddingBottom: 0,
+ marginBottom: 0,
+ },
+ essayBylineHeader: {
+ fontSize: 16,
+ fontWeight: 'bold',
+ marginBottom: 0,
+ },
+
+ modal: {
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ backgroundColor: 'rgb(0,0,0)',
+ margin: 0,
+ padding: 0,
+ },
+ modalContainer: {
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ },
+ modalBody: {
+ marginTop: 20,
+ width: '90%',
+ backgroundColor: 'black',
+ padding: 40,
+ marginBottom: 200,
+ },
+
+})
+
+
+
/*
<YouTube
ref={(ref) => this.youtubePlayer = ref}
@@ -75,40 +239,3 @@ export default class Information extends Component {
style={styles.video}
/>
*/
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'flex-start',
- alignItems: 'flex-start',
- },
- bodyStyle: {
- marginRight: 10,
- },
- video: {
- alignSelf: 'stretch',
- height: 400,
- width: '100%',
- backgroundColor: 'black',
- marginVertical: 10
- },
- body: {
- textAlign: 'left',
- paddingRight: 10,
- width: '90%',
- marginBottom: 20,
- maxWidth: 600,
- },
- hero: {
- width: '90%',
- height: 300,
- },
- face: {
- width: '90vw',
- height: 450,
- marginBottom: 20,
- },
- footer: {
- marginBottom: 80,
- },
-})
diff --git a/client/src/lib/views/livestream.js b/client/src/lib/views/livestream.js
index d3df460..ff06d0c 100644
--- a/client/src/lib/views/livestream.js
+++ b/client/src/lib/views/livestream.js
@@ -43,6 +43,8 @@ export default class Livestream extends Component {
/>
)
}).filter(button => !!button)
+ const first_buttons = buttons.slice(0, 3)
+ const second_buttons = buttons.slice(3)
return (
<Container heading='Livestream' bodyStyle={styles.bodyStyle}>
@@ -51,7 +53,10 @@ export default class Livestream extends Component {
<View style={styles.overlay}></View>
</View>
<View style={styles.buttons}>
- {buttons}
+ {first_buttons}
+ </View>
+ <View style={styles.buttons}>
+ {second_buttons}
</View>
<View style={styles.contentContainer}>
<ClearText style={styles.body}>{this.props.content.body}</ClearText>
@@ -116,13 +121,20 @@ const styles = StyleSheet.create({
},
buttons: {
width: '100%',
- paddingTop: 20,
+ marginLeft: -25,
+ paddingTop: 30,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
+ secondButtons: {
+ paddingTop: 0,
+ },
button: {
- margin: 20,
+ marginTop: 0,
+ marginLeft: 10,
+ marginRight: 10,
+ marginBottom: 0,
},
activeButtonText: {
color: 'red',
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 16:32:42 +0000