Merge pull request #46 from TriPSs/feature/search-for-better

Feature/search for better

android/app/build.gradle

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

app/components/QualitySelector/QualitySelector.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, ActivityIndicator } from 'react-native'
 import * as Animatable from 'react-native-animatable'
 import { material } from 'react-native-typography'
 
@@ -8,6 +8,7 @@ import i18n from 'modules/i18n'
 import BaseButton from 'components/BaseButton'
 import Button from 'components/Button'
 import IconButton from 'components/IconButton'
+import Typography from 'components/Typography'
 
 import colors from 'modules/colors'
 
@@ -54,6 +55,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom  : 20,
   },
+
+  fetchingBetter: {
+    position: 'absolute',
+    top     : 100,
+  },
 })
 
 export default class QualitySelector extends React.Component {
@@ -68,15 +74,21 @@ export default class QualitySelector extends React.Component {
     return {}
   }
 
+  static defaultProps = {
+    myEpisodesScreen: false,
+  }
+
   state = {
     hidden   : false,
     qualities: null,
   }
 
   playQuality = (quality) => {
-    const { playItem, torrents } = this.props
+    const { playItem, torrents, fetchingBetter } = this.props
 
-    playItem(torrents[quality])
+    if (!fetchingBetter) {
+      playItem(torrents[quality])
+    }
   }
 
   handleAnimationEnd = () => {
@@ -94,11 +106,20 @@ export default class QualitySelector extends React.Component {
   }
 
   handleSearchForBetter = () => {
+    const { fetchedBetterOnes, item, episodeToPlay, myEpisodesScreen } = this.props
+
+    fetchedBetterOnes(
+      item.show
+        ? item.show
+        : item,
 
+      episodeToPlay,
+      myEpisodesScreen,
+    )
   }
 
   render() {
-    const { torrents, cancel } = this.props
+    const { torrents, cancel, fetchingBetter } = this.props
     const { hidden, qualities } = this.state
 
     if (hidden && !torrents) {
@@ -125,29 +146,54 @@ export default class QualitySelector extends React.Component {
               />
             </View>
 
-            {/*<View style={styles.searchForBetter}>*/}
-              {/*<Button*/}
-                {/*onPress={this.handleSearchForBetter}*/}
-                {/*variant={'primary'}>*/}
-                {/*{i18n.t('search for better')}*/}
-              {/*</Button>*/}
-            {/*</View>*/}
+            {fetchingBetter && (
+              <Animatable.View
+                animation={'fadeIn'}
+                duration={200}
+                style={styles.fetchingBetter}
+                useNativeDriver>
+                <ActivityIndicator
+                  size={60}
+                  color={'#FFF'} />
+              </Animatable.View>
+            )}
+
+            <View style={styles.searchForBetter}>
+              <Button
+                onPress={this.handleSearchForBetter}
+                variant={'primary'}>
+                {qualities.length > 0
+                  ? i18n.t('search for better')
+                  : i18n.t('search for qualities')
+                }
+              </Button>
+            </View>
+
+            {qualities.length === 0 && (
+              <Typography variant={'title'}>
+                {i18n.t('No qualities available! Try to search')}
+              </Typography>
+            )}
 
             {qualities.map((quality) => (
-              <BaseButton
+              <Animatable.View
                 key={quality}
-                onPress={() => this.playQuality(quality)}>
-                <Text style={[
-                  styles.quality,
-                  {
-                    borderBottomColor: torrents
-                      ? torrents[quality].health.color
-                      : null,
-                  },
-                ]}>
-                  {quality}
-                </Text>
-              </BaseButton>
+                animation={'fadeIn'}
+                duration={200}
+                useNativeDriver>
+                <BaseButton onPress={() => this.playQuality(quality)}>
+                  <Text style={[
+                    styles.quality,
+                    {
+                      borderBottomColor: torrents
+                        ? torrents[quality].health.color
+                        : null,
+                    },
+                  ]}>
+                    {quality}
+                  </Text>
+                </BaseButton>
+              </Animatable.View>
             ))}
           </View>
         )}

app/components/QualitySelector/QualitySelectorContainer.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+
+import { getFetchingBetter } from 'screens/Item/ItemSelectors'
+import * as QualtiySelectorActions from './QualtiySelectorActions'
+
+import QualitySelector from './QualitySelector'
+
+const mapStateToProps = state => ({
+  fetchingBetter: getFetchingBetter(state),
+})
+
+export default connect(mapStateToProps, QualtiySelectorActions)(QualitySelector)

app/components/QualitySelector/QualtiySelectorActions.js

@@ -0,0 +1,42 @@
+import { Constants } from 'popcorn-sdk'
+import Popcorn from 'modules/PopcornSDK'
+
+import * as ItemConstants from 'screens/Item/ItemConstants'
+import * as HomeConstants from 'screens/Home/HomeConstants'
+
+export const fetchedBetterOnes = (item, episode = null, inMyEpisodes = false) => (dispatch) => {
+  const method = episode ? 'searchEpisode' : 'search'
+
+  dispatch({
+    type: ItemConstants.FETCH_BETTER,
+  })
+
+  Popcorn[method](
+    item,
+    episode,
+  ).then((results) => {
+    if (item.type === Constants.TYPE_MOVIE) {
+      dispatch({
+        type   : ItemConstants.FETCHED_BETTER_FOR_MOVIE,
+        payload: {
+          item,
+          newTorrents: results,
+        },
+      })
+
+    } else if (item.type === Constants.TYPE_SHOW) {
+      dispatch({
+        type: inMyEpisodes
+          ? HomeConstants.FETCHED_BETTER_FOR_MY_EPISODE
+          : ItemConstants.FETCHED_BETTER_FOR_EPISODE,
+
+        payload: {
+          episodeId  : episode.id,
+          season     : episode.season,
+          episode    : episode.number,
+          newTorrents: results,
+        },
+      })
+    }
+  })
+}

app/components/QualitySelector/index.js

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

app/components/SubSelector/SubSelector.js

@@ -123,6 +123,8 @@ export default class SubSelector extends React.Component {
               initialNumToRender={12}
               windowSize={32}
               renderItem={this.renderSub}
+              showsHorizontalScrollIndicator={false}
+              showsVerticalScrollIndicator={false}
               keyExtractor={(item, index) => `${item.language}-${index}`}
               ListHeaderComponent={() => <View style={{ marginBottom: 100 }} />}
               ListFooterComponent={() => (

app/modules/i18n/translations/en.json

@@ -30,5 +30,7 @@
   "Episodes aired within the last 7 days from shows you follow will appear here": "Episodes aired within the last 7 days from shows you follow will appear here",
   "Subtitles": "Subtitles",
   "None": "None",
-  "search for better": "search for better"
+  "search for better": "search for better",
+  "search for qualities": "search for qualities",
+  "No qualities available! Try to search": "No qualities available! Try to search"
 }

app/modules/i18n/translations/nl.json

@@ -30,5 +30,7 @@
   "Episodes aired within the last 7 days from shows you follow will appear here": "Afleveringen die de afgelopen 7 dagen uitgekomen zijn van series die je volgt komen hier",
   "Subtitles": "Ondertiteling",
   "None": "Geen",
-  "search for better": "zoek naar betere"
+  "search for better": "zoek naar betere",
+  "search for qualities": "zoeken",
+  "No qualities available! Try to search": "Niks beschikbaar! Probeer zoeken"
 }

app/screens/Home/HomeConstants.js

@@ -24,3 +24,5 @@ export const REFRESH_MY_EPISODES = `${REDUCER_NAME}.refresh.my.episodes`
 export const FETCHED_MY_EPISODES = `${REDUCER_NAME}.fetched.my.episodes`
 export const CLEAR_ITEMS = `${REDUCER_NAME}.clear.items`
 export const ERROR_NO_CON = `${REDUCER_NAME}.error.no.internet`
+
+export const FETCHED_BETTER_FOR_MY_EPISODE = `${REDUCER_NAME}.fetched.better.for.my.episode`

app/screens/Home/HomeReducer.js

@@ -45,6 +45,28 @@ export default (state = HomeConstants.INITIAL_STATE, action) => {
         },
       }
 
+    case HomeConstants.FETCHED_BETTER_FOR_MY_EPISODE:
+      return {
+        ...state,
+        isLoading: false,
+        modes    : {
+          ...state.modes,
+          myEpisodes: {
+            ...state.modes.myEpisodes,
+            items: state.modes.myEpisodes.items.map((item) => {
+              if (item.id !== action.payload.episodeId) {
+                return item
+              }
+
+              return {
+                ...item,
+                torrents: action.payload.newTorrents,
+              }
+            }),
+          },
+        },
+      }
+
     case HomeConstants.REFRESH_MY_EPISODES:
       return {
         ...state,

app/screens/Item/ItemConstants.js

@@ -1,12 +1,10 @@
 export const REDUCER_NAME = 'item'
 
 export const INITIAL_STATE = {
-  fetchingEpisodeTorrents: false,
-  isLoading              : false,
-  item                   : null,
-  playerStatus           : null,
-  selectedSeason         : null,
-  selectedEpisode        : null,
+  fetchingBetter: false,
+
+  isLoading: false,
+  item     : null,
 }
 
 export const FETCH_ITEM = `${REDUCER_NAME}.fetch.item`
@@ -18,3 +16,7 @@ export const REMOVE_FROM_BOOKMARKS = `${REDUCER_NAME}.remove.from.bookmarks`
 
 export const MARK_MOVIE_WATCHED = `${REDUCER_NAME}.mark.watched.movie`
 export const MARK_MOVIE_UNWATCHED = `${REDUCER_NAME}.mark.unwatched.movie`
+
+export const FETCH_BETTER = `${REDUCER_NAME}.fetch.better`
+export const FETCHED_BETTER_FOR_EPISODE = `${REDUCER_NAME}.fetched.better.for.episode`
+export const FETCHED_BETTER_FOR_MOVIE = `${REDUCER_NAME}.fetched.better.for.movie`

app/screens/Item/ItemContainer.js

@@ -13,8 +13,6 @@ export const mapDispatchToProps = dispatch => ({
 export const mapStateToProps = state => ({
   item           : Selectors.getItem(state),
   isLoading      : Selectors.getIsLoading(state),
-  selectedSeason : Selectors.getSelectedSeason(state),
-  selectedEpisode: Selectors.getSelectedEpisode(state),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Item)

app/screens/Item/ItemOrRecommendations/SeasonsAndEpisodes/Episode/Episode.js

@@ -70,11 +70,9 @@ export default class Episode extends React.Component {
   }
 
   handlePlayItem = () => {
-    const { playItem, hasTorrents, torrents, ...episode } = this.props
+    const { playItem, ...episode } = this.props
 
-    if (hasTorrents) {
-      playItem(torrents, episode)
-    }
+    playItem(episode.torrents, this.props)
   }
 
   getAirsDate = () => {
@@ -87,7 +85,7 @@ export default class Episode extends React.Component {
   }
 
   render() {
-    const { hasTorrents, title, summary, number, images, hasAired } = this.props
+    const { title, summary, number, images, hasAired } = this.props
     const { showPlaceholder } = this.props
 
     return (
@@ -113,8 +111,8 @@ export default class Episode extends React.Component {
                     iconStyle={{ margin: 0 }}
                     backgroundColor={'transparent'}
                     borderRadius={0}
-                    name={hasTorrents ? 'play-circle-outline' : 'cancel'}
-                    color={hasTorrents ? '#FFF' : 'red'}
+                    name={'play-circle-outline'}
+                    color={'#FFF'}
                     size={60} />
                 )}