Scrollable fullheight albums

Swizec · Feb 19, 2017 · 47f064d · 47f064d
1 parent 44eaca9
commit 47f064d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/Store.js b/Store.js
@@ -18,11 +18,20 @@ class Store {
     @observable index = 0;
     @observable galleryPage = 0;
     @observable albums = new observable.map();
+    @observable screenSize = {
+        width: null,
+        height: null
+    };
 
     @action changeOrientation(orientation) {
         this.orientation = orientation;
     }
 
+    @action updateScreenSize(width, height) {
+        this.screenSize.width = width;
+        this.screenSize.height = height;
+    }
+
     @action prevImage() {
         this.index = this.index - 1;
 
@@ -56,7 +65,6 @@ class Store {
               .then(fetch.throwErrors)
               .then(res => res.json())
               .then(json => {
-                  console.log('loaded', json.data.id);
                   this.albums.set(json.data.id, json.data);
               })
               .catch(err => console.log('ERROR', err.message, err));

diff --git a/components/Carousel.js b/components/Carousel.js
@@ -37,7 +37,7 @@ class TouchableImage extends Component {
     }
 
     render() {
-        const { image, store } = this.props;
+        const { image, store, height } = this.props;
 
         const uri = image.link.replace('http://', 'https://'),
               caption = image.title || image.description;
@@ -46,7 +46,9 @@ class TouchableImage extends Component {
             <TouchableHighlight onPress={this.onPress.bind(this)}
                                 style={styles.fullscreen}>
                 <Image source={{uri: uri}}
-                       style={[styles.backgroundImage, styles[store.orientation.toLowerCase()]]}
+                       style={[styles.backgroundImage,
+                               styles[store.orientation.toLowerCase()],
+                               {height: height || null}]}
                        onLayout={this.onImageLayout.bind(this)}>
                     <Text style={styles.imageLabel}>{caption}</Text>
                 </Image>
@@ -77,8 +79,13 @@ class Album extends Component {
     }
 
     renderRow(img) {
+        const { store } = this.props;
+
+        console.log(store.screenSize.height);
+
         return (
-            <TouchableImage image={img} />
+            <TouchableImage image={img}
+                            height={store.screenSize.height} />
         )
     }
 

diff --git a/index.ios.js b/index.ios.js
@@ -26,6 +26,7 @@ class ImgurApp extends Component {
         const orientation = ( width > height ) ? LANDSCAPE : PORTRAIT;
 
         Store.changeOrientation(orientation);
+        Store.updateScreenSize(width, height);
     }
 
     componentWillMount() {