safari timeline

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',