Merge pull request #14 from TriPSs/feature/switch

feat(#13): Added quality selector before playing movies / episodes

android/app/build.gradle

@@ -79,7 +79,7 @@ project.ext.react = [
 apply from: "../../node_modules/react-native/react.gradle"
 
 project.ext.vectoricons = [
-    iconFontNames: [ 'MaterialIcons.ttf' ] // Name of the font files you want to copy
+    iconFontNames: [ 'MaterialCommunityIcons.ttf' ] // Name of the font files you want to copy
 ]
 
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
@@ -107,8 +107,8 @@ android {
         applicationId "com.popcorn"
         minSdkVersion 16
         targetSdkVersion 26
-        versionCode 10
-        versionName "v0.7.0"
+        versionCode 11
+        versionName "v0.8.0"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
@@ -146,6 +146,7 @@ android {
         }
     }
     buildTypes {
+
         release {
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"

app/components/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import BaseButton from '../BaseButton'
 

app/modules/db/Bookmarks.js

@@ -16,7 +16,7 @@ export default new (class BookmarksDB extends Base {
 
     if (bookmarks) {
       this.bookmarks = JSON.parse(bookmarks)
-      console.log('this.bookmarks', this.bookmarks)
+
       return this.bookmarks
     }
 

app/screens/Item/Cover/Cover.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Image, StyleSheet, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { Constants } from 'popcorn-sdk'
 
 import CoverGradient from 'components/CoverGradient'

app/screens/Item/Episode/Episode.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, Image } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import posterHolderImage from 'images/posterholder.png'
 
@@ -72,7 +72,7 @@ export const Episode = ({ playItem, hasTorrents, title, summary, images, torrent
                 iconStyle={{ margin: 0 }}
                 backgroundColor={'transparent'}
                 borderRadius={0}
-                name={hasTorrents ? 'play-circle-outline' : 'highlight-off'}
+                name={hasTorrents ? 'play-circle-outline' : 'cancel'}
                 color={hasTorrents ? '#FFF' : 'red'}
                 size={60} />
             </View>

app/screens/Item/ItemScreen.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, View, ActivityIndicator, Picker } from 'react-native'
 import Orientation from 'react-native-orientation'
-import { utils, Constants } from 'popcorn-sdk'
+import { Constants } from 'popcorn-sdk'
 
 import i18n from 'modules/i18n'
 
@@ -13,6 +13,7 @@ import colors from 'modules/colors'
 
 import Cover from './Cover'
 import Episode from './Episode'
+import QualitySelector from './QualitySelector'
 
 const styles = StyleSheet.create({
 
@@ -53,6 +54,9 @@ export default class Item extends React.Component {
 
   state = {
     activeSeason: null,
+
+    selectFromTorrents: null,
+    episodeToPlay     : {},
   }
 
   componentDidMount() {
@@ -80,18 +84,33 @@ export default class Item extends React.Component {
     }
   }
 
-  playItem = (torrents, episode = {}) => {
+  playItem = (magnet) => {
     const { navigation: { navigate, state: { params: item } } } = this.props
+    const { episodeToPlay } = this.state
 
     navigate('Player', {
-      magnet: utils.getBestTorrent(torrents),
-      item  : {
+      magnet,
+      item: {
         ...item,
-        ...episode,
+        ...episodeToPlay,
       },
     })
   }
 
+  selectQuality = (torrents, episode = {}) => {
+    this.setState({
+      selectFromTorrents: torrents,
+
+      episodeToPlay: episode,
+    })
+  }
+
+  cancelQualitySelect = () => {
+    this.setState({
+      selectFromTorrents: null,
+    })
+  }
+
   getAiredEpisodes = () => {
     const { activeSeason } = this.state
     const today = Date.now()
@@ -129,14 +148,14 @@ export default class Item extends React.Component {
 
   render() {
     const { item, isLoading } = this.props
-    const { activeSeason } = this.state
+    const { activeSeason, selectFromTorrents } = this.state
 
     return (
       <View style={styles.root}>
 
         <ScrollViewWithStatusBar>
 
-          <Cover item={item} playMovie={this.playItem} />
+          <Cover item={item} playMovie={this.selectQuality} />
 
           {item && item.summary && (
             <View style={styles.container}>
@@ -148,7 +167,7 @@ export default class Item extends React.Component {
             <View style={styles.container}>
               <IconButton
                 onPress={this.handleToggleBookmarks}
-                name={item.bookmarked ? 'playlist-add-check' : 'playlist-add'}
+                name={item.bookmarked ? 'check' : 'plus'}
                 color={'#FFF'}
                 size={40}
               />
@@ -177,7 +196,7 @@ export default class Item extends React.Component {
             this.getAiredEpisodes().map(episode => (
               <Episode
                 key={episode.key}
-                playItem={this.playItem}
+                playItem={this.selectQuality}
                 {...episode} />
             ))
           )}
@@ -186,6 +205,11 @@ export default class Item extends React.Component {
 
         </ScrollViewWithStatusBar>
 
+        <QualitySelector
+          cancel={this.cancelQualitySelect}
+          torrents={selectFromTorrents}
+          playItem={this.playItem} />
+
       </View>
     )
   }

app/screens/Item/QualitySelector/QualitySelector.js

@@ -0,0 +1,124 @@
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import * as Animatable from 'react-native-animatable'
+import { material } from 'react-native-typography'
+
+import BaseButton from 'components/BaseButton'
+import IconButton from 'components/IconButton'
+
+import colors from 'modules/colors'
+
+const styles = StyleSheet.create({
+
+  root: {
+    flex    : 1,
+    position: 'absolute',
+    top     : 0,
+    left    : 0,
+    width   : '100%',
+    height  : '100%',
+  },
+
+  container: {
+    opacity        : 0.8,
+    display        : 'flex',
+    justifyContent : 'center',
+    alignItems     : 'center',
+    backgroundColor: colors.BACKGROUND,
+  },
+
+  closeIcon: {
+    position: 'absolute',
+    top     : 34,
+    right   : 14,
+  },
+
+  quality: {
+    ...material.titleWhiteObject,
+    margin: 8,
+  },
+
+})
+
+export default class QualitySelector extends React.Component {
+
+  static getDerivedStateFromProps(props) {
+    if (props.torrents) {
+      return {
+        qualities: Object.keys(props.torrents).filter(quality => !!props.torrents[quality]),
+      }
+    }
+
+    return {}
+  }
+
+  state = {
+    hidden   : false,
+    qualities: null,
+  }
+
+  playQuality = (quality) => {
+    const { playItem, torrents } = this.props
+
+    playItem(torrents[quality])
+  }
+
+  handleAnimationEnd = () => {
+    const { torrents } = this.props
+
+    this.setState({
+      hidden: !torrents,
+    })
+  }
+
+  handleAnimationBegin = () => {
+    this.setState({
+      hidden: false,
+    })
+  }
+
+  render() {
+    const { torrents, cancel } = this.props
+    const { hidden, qualities } = this.state
+
+    if (hidden && !torrents) {
+      return null
+    }
+
+    return (
+      <Animatable.View
+        animation={torrents ? 'fadeIn' : 'fadeOut'}
+        duration={200}
+        style={[styles.root]}
+        onAnimationBegin={this.handleAnimationBegin}
+        onAnimationEnd={this.handleAnimationEnd}
+        useNativeDriver>
+
+        {qualities && (
+          <View style={[styles.root, styles.container]}>
+            <View style={styles.closeIcon}>
+              <IconButton
+                onPress={cancel}
+                name={'close'}
+                color={'#FFF'}
+                size={40}
+              />
+            </View>
+
+            {qualities.map((quality) => (
+              <BaseButton
+                key={quality}
+                onPress={() => this.playQuality(quality)}>
+                <Text style={styles.quality}>
+                  {quality}
+                </Text>
+              </BaseButton>
+            ))}
+          </View>
+        )}
+
+      </Animatable.View>
+    )
+  }
+
+}

app/screens/Item/QualitySelector/index.js

@@ -0,0 +1 @@
+export { default } from './QualitySelector'

app/screens/Mode/ModeScreen.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { StyleSheet, Text, View, FlatList, StatusBar, TextInput } from 'react-native'
 import Orientation from 'react-native-orientation'
 import * as Animatable from 'react-native-animatable'
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { Constants } from 'popcorn-sdk'
 
 import colors from 'modules/colors'
@@ -175,7 +175,7 @@ export default class Mode extends React.Component {
             duration={firstSearch ? 1 : 300}
             useNativeDriver>
             <IconButton
-              name={'cancel'}
+              name={'close-circle'}
               color={'#FFF'}
               onPress={this.handleCancelSearch}
               size={32}
@@ -184,7 +184,7 @@ export default class Mode extends React.Component {
 
           <Icon
             style={styles.searchIcon}
-            name={'search'}
+            name={'magnify'}
             color={'#FFF'}
             size={32}
           />

app/screens/index.js

@@ -1,7 +1,7 @@
 /* eslint react/prop-types: 0 */
 
 import React from 'react'
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
 import { Constants } from 'popcorn-sdk'
 
@@ -67,7 +67,7 @@ export default createStackNavigator({
           tabBarLabel: i18n.t('Shows'),
           tabBarIcon : ({ tintColor }) => (
             <Icon
-              name={'subscriptions'}
+              name={'animation-play'}
               color={tintColor}
               size={25}
             />