Merge pull request #47 from TriPSs/feature/new-design

Feature/new design

Author: TriPSs

.babelrc

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img height="200" width="200" src="./app/images/logo.png" alt="logo" />
+  <img height="200" width="200" src="./logo.png" alt="logo" />
   <br />
   Popcorn Native
 </h1>
@@ -57,9 +57,9 @@ Please see the [contributing guide](https://github.com/tripss/popcorn-native/blo
 
 Home Screen | Home Screen
 :-------------------------:|:-------------------------:
-![Home Screen](./.github/home.jpg)  | ![Home Screen](./.github/home-bottom.jpg)
+![Home Screen](./.github/home.png)  | ![Home Screen](./.github/home-bottom.png)
 
 Show Screen |  Movie Screen
 :-------------------------:|:-------------------------:
-![Shows Screen](./.github/show.jpg)  |![Show Screen](./.github/movie.jpg)
+![Shows Screen](./.github/show.png)  |![Show Screen](./.github/movie.png)
 

.github/home-bottom.jpg

@@ -122,8 +122,8 @@ android {
         applicationId "com.popcorn"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 20
-        versionName "v0.15.0"
+        versionCode 21
+        versionName "v0.16.0"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

.github/home-bottom.png

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

.github/home.jpg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

.github/home.png

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="background">#111214</color>
-    <color name="background_secondary">#0D0E0F</color>
-    <color name="dropdown_background">#212225</color>
+    <color name="background">#000000</color>
 
     <color name="text_color">#FAFAFA</color>
 </resources>

.github/movie.jpg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#000000</color>
+</resources>

.github/movie.png

@@ -6,9 +6,7 @@
         <item name="colorAccent">@color/text_color</item>
 
         <item name="android:windowBackground">@color/background</item>
-        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
-        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
-        <item name="android:navigationBarColor">@color/background_secondary</item>
+        <item name="android:navigationBarColor">@color/background</item>
 
         <item name="castExpandedControllerToolbarStyle">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
         <item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>
@@ -24,19 +22,4 @@
         <item name="android:windowBackground">@color/background</item>
     </style>
 
-    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
-        <item name="android:textColor">@color/text_color</item>
-        <item name="android:textSize">18dp</item>
-        <item name="android:fontFamily">Roboto-Bold</item>
-        <item name="android:gravity">center</item>
-    </style>
-
-    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
-        <item name="android:textColor">@color/text_color</item>
-        <item name="android:textSize">18dp</item>
-        <item name="android:fontFamily">Roboto-Bold</item>
-        <item name="android:background">@color/dropdown_background</item>
-        <item name="android:gravity">center</item>
-    </style>
-
 </resources>

.github/show.jpg

@@ -15,7 +15,7 @@ buildscript {
         google()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.2.0'
+        classpath 'com.android.tools.build:gradle:3.3.0'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -42,8 +42,7 @@ allprojects {
 subprojects {
     project.configurations.all {
         resolutionStrategy.eachDependency { details ->
-            if (details.requested.group == 'com.android.support'
-                    && !details.requested.name.contains('multidex')) {
+            if (details.requested.group == 'com.android.support' && !details.requested.name.contains('multidex')) {
                 details.useVersion "26.0.0"
             }
         }

.github/show.png

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

README.md

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
 
 import colors from 'modules/colors'
+import dimensions from 'modules/dimensions'
 
 import TextButton from '../TextButton'
 
 const defaultPadding = {
-  paddingLeft  : 16,
-  paddingRight : 16,
-  paddingTop   : 8,
-  paddingBottom: 8,
-  borderRadius : 4,
+  paddingLeft  : dimensions.UNIT * 2,
+  paddingRight : dimensions.UNIT * 2,
+  paddingTop   : dimensions.UNIT,
+  paddingBottom: dimensions.UNIT,
+  borderRadius : dimensions.BORDER_RADIUS,
 }
 
 export const styles = StyleSheet.create({

android/app/build.gradle

@@ -1,130 +1,82 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View, Image, Dimensions, StatusBar } from 'react-native'
+import { StyleSheet, View, Dimensions } from 'react-native'
 import Device from 'modules/DeviceDetection'
 
-import posterHolderImage from 'images/posterholder.png'
+import colors from 'modules/colors'
+import dimensions from 'modules/dimensions'
 
 import BaseButton from '../BaseButton'
+import Overlay from '../Overlay'
+import Image from '../Image'
 
-const { width, height } = Dimensions.get('window')
-
-const smallHeight = (height - StatusBar.currentHeight) / 4
-const smallWidth = (width - 40) / 3.1
-const mediumHeight = height - StatusBar.currentHeight / 3.3
-const mediumWidth = (width - 40) / 3.5
+const { width } = Dimensions.get('window')
 
 const rootWidth = (width - (Device.isTablet ? 40 : 32)) / (Device.isTablet ? 4 : 3)
 
 const styles = StyleSheet.create({
 
   root: {
-    height     : (rootWidth * 1.5),
-    width      : rootWidth,
-    marginLeft : 4,
-    marginRight: 4,
-    alignSelf  : 'stretch',
-    position   : 'relative',
+    height         : (rootWidth * 1.5),
+    width          : rootWidth,
+    alignSelf      : 'stretch',
+    position       : 'relative',
+    borderRadius   : dimensions.BORDER_RADIUS,
+    overflow       : 'hidden',
+    backgroundColor: colors.BACKGROUND_LIGHTER,
   },
 
   default: {},
 
   small: {
-    height: smallHeight,
-    width : smallWidth,
+    height: dimensions.CARD_SMALL_HEIGHT,
+    width : dimensions.CARD_SMALL_WIDTH,
   },
 
-  // For now is this only correct for Tablet
   medium: {
-    height: mediumHeight,
-    width : mediumWidth,
-  },
-
-  image: {
-    height: '100%',
-    width : '100%',
+    height: dimensions.CARD_MEDIUM_HEIGHT,
+    width : dimensions.CARD_MEDIUM_WIDTH,
   },
 
-  overlay: {
-    position: 'absolute',
-    top     : 0,
-    left    : 0,
-    height  : '100%',
-    width   : '100%',
-    opacity : 0.8,
+})
 
-    backgroundColor: '#000',
-  },
+export const Card = ({ item, variant, empty, ...rest }) => {
+  return (
+    <BaseButton
+      // onLongPress={() => console.warn(item.title)}
+      // onPress={() => this.openItem(item)}
+      {...rest}>
+      <View style={[styles.root, styles[variant]]}>
+        <Image
+          images={
+            empty
+              ? {}
+              : item.images
+          } />
+
+        {item && item.watched && item.watched.complete && (
+          <Overlay variant={'dark'} />
+        )}
+
+      </View>
+    </BaseButton>
+  )
+}
 
-})
+Card.propTypes = {
+  item   : PropTypes.object,
+  empty  : PropTypes.bool,
+  variant: PropTypes.oneOf([
+    'default',
+    'medium',
+    'small',
+  ]),
+}
 
-export default class Card extends React.PureComponent {
-
-  static propTypes = {
-    item   : PropTypes.object,
-    empty  : PropTypes.bool,
-    variant: PropTypes.oneOf([
-      'default',
-      'medium',
-      'small',
-    ]),
-  }
-
-  static defaultProps = {
-    item   : null,
-    empty  : false,
-    variant: 'default',
-  }
-
-  constructor(props) {
-    super(props)
-
-    const { item, empty } = props
-
-    this.state = {
-      showPlaceholder: empty || !item.images.poster.thumb,
-    }
-  }
-
-  handleImageError = () => {
-    this.setState({
-      showPlaceholder: true,
-    })
-  }
-
-  getImage = () => {
-    const { item, empty } = this.props
-    const { showPlaceholder } = this.state
-
-    if (showPlaceholder || empty) {
-      return posterHolderImage
-    }
-
-    return { uri: item.images.poster.thumb }
-  }
-
-  render() {
-    const { item, variant, empty, ...rest } = this.props
-
-    return (
-      <BaseButton
-        // onLongPress={() => console.warn(item.title)}
-        // onPress={() => this.openItem(item)}
-        {...rest}>
-        <View style={[styles.root, styles[variant]]}>
-          <Image
-            style={styles.image}
-            defaultSource={posterHolderImage}
-            onError={this.handleImageError}
-            source={this.getImage()}
-          />
-
-          {item && item.watched && item.watched.complete && (
-            <View style={styles.overlay} />
-          )}
-
-        </View>
-      </BaseButton>
-    )
-  }
+Card.defaultProps = {
+  item   : null,
+  empty  : false,
+  variant: 'default',
 }
+
+export default Card