Merge pull request #93 from pct-org/feature/improvements

Feature/improvements
pct-org · Dec 3, 2020 · 6e5f8db · 6e5f8db
2 parents be910f6 + 41d5af5
commit 6e5f8db
Show file tree

Hide file tree

Showing 18 changed files with 1,042 additions and 827 deletions.
diff --git a/app/mobile/components/ItemOptions/ItemOptions.js b/app/mobile/components/ItemOptions/ItemOptions.js
@@ -102,49 +102,47 @@ export const ItemOptions = ({
       onTorrentPress(torrent, download)
     }, [])
 
-  const renderBottomSheetContent = React.useCallback(() => {
-    return (
-      <View>
-        <OptionsHeader
-          label={
-            item.type === constants.TYPE_EPISODE
-              ? `${item.number}. ${item.title}`
-              : item.title
-          } />
-
-        <ItemTorrents
-          item={item}
-          variant={variant}
-          torrents={allTorrents}
-          onPress={handleTorrentPress} />
-
-        {variant === constants.TYPE_DOWNLOAD && (
-          <>
-            <OptionsGroup
-              withDivider={variant === constants.TYPE_DOWNLOAD}
-              style={styles.marginBottomOnly}>
-              <OptionsItem
-                disabled
-                icon={'eye-outline'}
-                label={
-                  item.watched.complete
-                    ? i18n.t('Mark Unwatched')
-                    : i18n.t('Mark Watched')
-                } />
-            </OptionsGroup>
-
-            <OptionsGroup>
-              <OptionsItem
-                disabled
-                icon={'content-copy'}
-                label={i18n.t('Copy to phone')}
-                labelLine2={'Item needs to be downloaded for this to become available'} />
-            </OptionsGroup>
-          </>
-        )}
-      </View>
-    )
-  }, [item, variant])
+  const renderBottomSheetContent = React.useCallback(() => (
+    <View>
+      <OptionsHeader
+        label={
+          item.type === constants.TYPE_EPISODE
+            ? `${item.number}. ${item.title}`
+            : item.title
+        } />
+
+      <ItemTorrents
+        item={item}
+        variant={variant}
+        torrents={allTorrents}
+        onPress={handleTorrentPress} />
+
+      {variant === constants.TYPE_DOWNLOAD && (
+        <>
+          <OptionsGroup
+            withDivider={variant === constants.TYPE_DOWNLOAD}
+            style={styles.marginBottomOnly}>
+            <OptionsItem
+              disabled
+              icon={'eye-outline'}
+              label={
+                item.watched.complete
+                  ? i18n.t('Mark Unwatched')
+                  : i18n.t('Mark Watched')
+              } />
+          </OptionsGroup>
+
+          <OptionsGroup>
+            <OptionsItem
+              disabled
+              icon={'content-copy'}
+              label={i18n.t('Copy to phone')}
+              labelLine2={'Item needs to be downloaded for this to become available'} />
+          </OptionsGroup>
+        </>
+      )}
+    </View>
+  ), [item, variant])
 
   if (variant === constants.TYPE_STREAM) {
     return (

diff --git a/app/mobile/components/ItemOptions/ItemTorrents/ItemTorrents.js b/app/mobile/components/ItemOptions/ItemTorrents/ItemTorrents.js
@@ -6,7 +6,7 @@ import { SearchForBetterEpisode, SearchForBetterMovie } from 'modules/GraphQL/Se
 import dimensions from 'modules/dimensions'
 import constants from 'modules/constants'
 import i18n from 'modules/i18n'
-import useDownload from 'modules/hooks/useDownload'
+import usePollingForDownload from 'modules/hooks/usePollingForDownload'
 
 import Divider from 'components/Divider'
 
@@ -28,7 +28,7 @@ export const styles = StyleSheet.create({
 })
 
 export const ItemTorrents = ({ item, torrents, variant, onPress }) => {
-  const [download, downloadManager] = useDownload(item)
+  const [download, downloadManager] = usePollingForDownload(item)
   const [searchForBetter, { loading }] = useMutation(
     item.type === constants.TYPE_EPISODE
       ? SearchForBetterEpisode

diff --git a/app/mobile/components/OptionsItem/OptionsItemInner.js b/app/mobile/components/OptionsItem/OptionsItemInner.js
@@ -36,7 +36,7 @@ export const SettingsItem = ({ label, labelLine2, subLabel, subLabelLine2, icon,
           duration={constants.ANIMATION_DURATIONS.enteringScreen}
           useNativeDriver>
           <ActivityIndicator
-            size={18}
+            size={dimensions.ICON_SIZE_SMALL}
             color={colors.PRIMARY_COLOR_200} />
         </Animatable.View>
       )}
@@ -49,8 +49,8 @@ export const SettingsItem = ({ label, labelLine2, subLabel, subLabelLine2, icon,
           useNativeDriver>
           <LottieView
             style={{
-              width: 18,
-              height: 18,
+              width: dimensions.ICON_SIZE_SMALL,
+              height: dimensions.ICON_SIZE_SMALL
             }}
             source={require('assets/lottie/cloud-download.json')}
             autoPlay
@@ -62,7 +62,7 @@ export const SettingsItem = ({ label, labelLine2, subLabel, subLabelLine2, icon,
         <Icon
           color={'primary'}
           style={styles.icon}
-          size={18}
+          size={dimensions.ICON_SIZE_SMALL}
           name={icon}
           emphasis={
             disabled

diff --git a/app/mobile/screens/Item/ItemGraphQL.js b/app/mobile/screens/Item/ItemGraphQL.js
@@ -4,7 +4,7 @@ import torrentFragment from 'modules/GraphQL/fragments/torrentFragment'
 
 export const MovieQuery = gql`
   query movie($_id: String!) {
-    item: movie(_id: $_id) {
+    movie(_id: $_id) {
       _id
       title
       genres
@@ -48,7 +48,7 @@ export const MovieQuery = gql`
 
 export const ShowQuery = gql`
   query show($_id: String!) {
-    item: show(_id: $_id) {
+    show(_id: $_id)  {
       _id
       title
       genres

diff --git a/app/mobile/screens/Item/ItemScreen.js b/app/mobile/screens/Item/ItemScreen.js
@@ -55,12 +55,10 @@ const styles = StyleSheet.create({
 })
 
 export const Item = ({ route: { params } }) => {
-  const Query = params.type === 'movie'
-    ? MovieQuery
-    : ShowQuery
-
   const [executeQuery, { loading: itemLoading, data }] = useLazyQuery(
-    Query,
+    params.type === 'movie'
+      ? MovieQuery
+      : ShowQuery,
     {
       variables: {
         _id: params._id,
@@ -79,7 +77,7 @@ export const Item = ({ route: { params } }) => {
   }, [])
 
   const loading = itemLoading || !data
-  const item = loading ? null : data.item
+  const item = loading ? null : data[params.type]
 
   const handleTrailer = () => {
     if (item && item.trailer) {
@@ -100,7 +98,6 @@ export const Item = ({ route: { params } }) => {
           {!loading && (
             <Bookmarked
               style={styles.icon}
-              Query={Query}
               {...item}
             />
           )}

diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, StatusBar, Animated, InteractionManager } from 'react-native'
 import { useLazyQuery } from '@apollo/client'
-import { useCollapsibleStack } from 'react-navigation-collapsible'
+import { useCollapsibleSubHeader, CollapsibleSubHeaderAnimator } from 'react-navigation-collapsible'
 import { getDefaultHeaderHeight } from 'react-navigation-collapsible/lib/src/utils'
 
 import i18n from 'modules/i18n'
@@ -87,7 +87,7 @@ export const Mode = ({ mode, navigation }) => {
     return false
   })
 
-  const { onScroll, scrollIndicatorInsetTop } = useCollapsibleStack()
+  const { onScroll, scrollIndicatorInsetTop, translateY } = useCollapsibleSubHeader()
 
   useEffect(() => {
     // Execute the query after the component is done navigation
@@ -168,14 +168,16 @@ export const Mode = ({ mode, navigation }) => {
         scrollIndicatorInsets={{ top: scrollIndicatorInsetTop - getDefaultHeaderHeight(true) }}
       />
 
-      <SearchBar
-        flatListRef={flatListRef}
-        searchedQuery={query}
-        search={setQuery}
-        mode={mode}
-        setSorting={setSorting}
-        setFilter={setFilter}
-      />
+      <CollapsibleSubHeaderAnimator translateY={translateY}>
+        <SearchBar
+          flatListRef={flatListRef}
+          searchedQuery={query}
+          search={setQuery}
+          mode={mode}
+          setSorting={setSorting}
+          setFilter={setFilter}
+        />
+      </CollapsibleSubHeaderAnimator>
 
     </View>
   )

diff --git a/app/mobile/screens/Mode/SearchBar/SearchBar.js b/app/mobile/screens/Mode/SearchBar/SearchBar.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, StatusBar, TextInput, Animated, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
-import { useCollapsibleStack } from 'react-navigation-collapsible'
 
 import colors from 'modules/colors'
 import dimensions from 'modules/dimensions'
@@ -20,10 +19,10 @@ import OptionsItem from 'mobile/components/OptionsItem'
 export const styles = StyleSheet.create({
 
   root: {
-    position: 'absolute',
     width: '100%',
     height: dimensions.SEARCH_BAR_HEIGHT,
-    top: StatusBar.currentHeight + dimensions.UNIT,
+    marginTop: StatusBar.currentHeight + dimensions.UNIT,
+    marginBottom: dimensions.UNIT,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -83,8 +82,6 @@ export const SearchBar = ({ searchedQuery, search, flatListRef, mode, setSorting
     }
   }, [searchedQuery])
 
-  const { translateY } = useCollapsibleStack()
-
   const cancelSearch = () => {
     setQuery(null)
     search(null)
@@ -174,10 +171,7 @@ export const SearchBar = ({ searchedQuery, search, flatListRef, mode, setSorting
   return (
     <Animated.View
       onLayout={handleLayout}
-      style={{
-        transform: [{ translateY }],
-        ...styles.root,
-      }}>
+      style={styles.root}>
 
       <Container
         elevation={1}

diff --git a/app/mobile/screens/index.js b/app/mobile/screens/index.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { createStackNavigator } from '@react-navigation/stack'
-import { createCollapsibleStack } from 'react-navigation-collapsible'
 
 import constants from 'modules/constants'
 
@@ -26,34 +25,22 @@ export default () => (
     <Stack.Screen name={'Settings'} component={SettingsScreen} />
     <Stack.Screen name={'AppChangelog'} component={AppChangelogScreen} />
 
-    {createCollapsibleStack(
-      <Stack.Screen name={'Movies'}>
-        {(props) => (
-          <ModeScreen mode={constants.MODE_MOVIES} {...props} />
-        )}
-      </Stack.Screen>,
-      {},
-      1,
-    )}
-
-    {createCollapsibleStack(
-      <Stack.Screen name={'Shows'}>
-        {(props) => (
-          <ModeScreen mode={constants.MODE_SHOWS} {...props} />
-        )}
-      </Stack.Screen>,
-      {},
-      1,
-    )}
-
-    {createCollapsibleStack(
-      <Stack.Screen name={'MyList'}>
-        {(props) => (
-          <ModeScreen mode={constants.MODE_BOOKMARKS} {...props} />
-        )}
-      </Stack.Screen>,
-      {},
-      1,
-    )}
+    <Stack.Screen name={'Movies'}>
+      {(props) => (
+        <ModeScreen mode={constants.MODE_MOVIES} {...props} />
+      )}
+    </Stack.Screen>
+
+    <Stack.Screen name={'Shows'}>
+      {(props) => (
+        <ModeScreen mode={constants.MODE_SHOWS} {...props} />
+      )}
+    </Stack.Screen>
+
+    <Stack.Screen name={'MyList'}>
+      {(props) => (
+        <ModeScreen mode={constants.MODE_BOOKMARKS} {...props} />
+      )}
+    </Stack.Screen>
   </Stack.Navigator>
 )
diff --git a/app/modules/BottomSheetManager/BottomSheetProvider.js b/app/modules/BottomSheetManager/BottomSheetProvider.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, TouchableWithoutFeedback } from 'react-native'
 import BottomSheet from 'reanimated-bottom-sheet'
 import ReAnimated from 'react-native-reanimated'
 
@@ -109,7 +109,10 @@ export const BottomSheetProvider = ({ children }) => {
             outputRange: [0.8, 0],
           }),
         }}>
-        <View style={[styles.overlayContainer, styles.overlay]} />
+
+        <TouchableWithoutFeedback onPress={closeBottomSheet}>
+          <View style={[styles.overlayContainer, styles.overlay]} />
+        </TouchableWithoutFeedback>
       </ReAnimated.View>
 
       <BottomSheet

diff --git a/app/modules/DownloadManager/DownloadManager.js b/app/modules/DownloadManager/DownloadManager.js
@@ -105,14 +105,14 @@ export class DownloadManager extends React.Component {
     this.handleStopPollDownload(item)
 
     this.setState({
-      downloads: downloads.filter(down => down._id !== item._id),
+      downloads: downloads.filter((down) => down._id !== item._id),
     })
   }
 
   handleGetDownload = (_id) => {
     const { downloads } = this.state
 
-    return downloads.find(down => down._id === _id)
+    return downloads.find((down) => down._id === _id)
   }
 
   handleGetDownloads = () => {

diff --git a/app/modules/GraphQL/Apollo.js b/app/modules/GraphQL/Apollo.js
@@ -1,11 +1,11 @@
 import AsyncStorage from '@react-native-community/async-storage'
 import FSStorage from 'redux-persist-fs-storage'
-import { ApolloClient, split, HttpLink, InMemoryCache, defaultDataIdFromObject } from '@apollo/client'
+import { ApolloClient, split, HttpLink, InMemoryCache } from '@apollo/client'
 import { CachePersistor } from 'apollo-cache-persist'
 import { WebSocketLink } from '@apollo/client/link/ws'
 import { getMainDefinition } from '@apollo/client/utilities'
 
-const SCHEMA_VERSION = '9' // Must be a string.
+const SCHEMA_VERSION = '10' // Must be a string.
 const SCHEMA_VERSION_KEY = 'apollo-schema-version'
 
 export default async(host) => {