feat: Added disk stats to settings screen

app/mobile/components/ItemOptions/ItemOptions.js

@@ -22,7 +22,16 @@ export const styles = StyleSheet.create({
 
 })
 
-export const ItemOptions = ({ item, style, variant, visible, onClose, onTorrentPress, canOpenBottomSheet }) => {
+export const ItemOptions = ({
+  item,
+  style,
+  variant,
+  visible,
+  animatable,
+  onClose,
+  onTorrentPress,
+  canOpenBottomSheet
+}) => {
   const [openBottomSheet, updateBottomSheet] = useBottomSheet()
 
   const getBottomSheetConfig = () => {
@@ -61,7 +70,13 @@ export const ItemOptions = ({ item, style, variant, visible, onClose, onTorrentP
     // The order that we want it in
     const order = ['2160p', '3D', '1080p', '1080p-bl', '720p', '720p-ish', '480p']
 
-    return [...item.torrents, ...item.searchedTorrents].sort((torrentA, torrentB) => (
+    let torrents = [...item.torrents]
+
+    if (item.searchedTorrents && item.searchedTorrents.length > 0) {
+      torrents = [...item.torrents, ...item.searchedTorrents]
+    }
+
+    return torrents.sort((torrentA, torrentB) => (
       order.indexOf(torrentA.quality) - order.indexOf(torrentB.quality)
     ))
 
@@ -121,7 +136,7 @@ export const ItemOptions = ({ item, style, variant, visible, onClose, onTorrentP
         )}
       </View>
     )
-  }, [item])
+  }, [item, variant])
 
   if (variant === constants.TYPE_STREAM) {
     return (
@@ -147,6 +162,7 @@ export const ItemOptions = ({ item, style, variant, visible, onClose, onTorrentP
     <IconButton
       onPress={handleSettingsPress}
       style={style}
+      animatable={animatable}
       name={'dots-vertical'}
       color={'primary'}
       emphasis={'medium'}
@@ -160,6 +176,7 @@ ItemOptions.defaultProps = {
   onClose: null,
   onTorrentPress: null,
   canOpenBottomSheet: null,
+  animatable: null,
 }
 
 export default ItemOptions

app/mobile/screens/Item/ItemScreen.js

@@ -12,7 +12,7 @@ import Container from 'components/Container'
 import ScrollViewWithStatusBar from 'components/ScrollViewWithStatusBar'
 import IconButton from 'components/IconButton'
 import Typography from 'components/Typography'
-import QualitySelector from 'mobile/components/QualitySelector'
+import ItemOptions from 'mobile/components/ItemOptions'
 import MainCover from 'mobile/components/MainCover'
 
 import { MovieQuery, ShowQuery } from './ItemGraphQL'
@@ -98,17 +98,6 @@ export const Item = ({ route: { params } }) => {
           item={item} />
 
         <View style={styles.iconsContainer}>
-          {/*{!loading && item.type === constants.TYPE_MOVIE && (*/}
-          {/*  <QualitySelector*/}
-          {/*    item={item}*/}
-          {/*    variant={constants.TYPE_DOWNLOAD}*/}
-          {/*    style={{*/}
-          {/*      ...styles.icon,*/}
-          {/*      ...styles.iconDownload,*/}
-          {/*    }}*/}
-          {/*  />*/}
-          {/*)}*/}
-
           {!loading && (
             <Bookmarked
               style={styles.icon}
@@ -131,6 +120,21 @@ export const Item = ({ route: { params } }) => {
               emphasis={'medium'}
               size={dimensions.ICON_SIZE_MEDIUM} />
           )}
+
+          {!loading && item.type === constants.TYPE_MOVIE && (
+            <ItemOptions
+              item={item}
+              animatable={{
+                animation: 'fadeIn',
+                useNativeDriver: true,
+                duration: constants.ANIMATION_DURATIONS.enteringScreen,
+              }}
+              style={{
+                ...styles.icon,
+                ...styles.iconDownload,
+              }}
+            />
+          )}
         </View>
 
         <WatchedBar item={item} />

app/mobile/screens/Settings/About/About.js

@@ -4,6 +4,7 @@ import { View, Linking } from 'react-native'
 import Updater from 'update-react-native-app'
 
 import dimensions from 'modules/dimensions'
+import colors from 'modules/colors'
 import i18n from 'modules/i18n'
 import { navigate } from 'modules/RootNavigation'
 import withIpFinder from 'modules/IpFinder/withIpFinder'
@@ -13,6 +14,8 @@ import Icon from 'components/Icon'
 import Typography from 'components/Typography'
 import TextButton from 'components/TextButton'
 
+const DISK_BAR_HEIGHT = 8
+
 export const styles = {
 
   root: {
@@ -42,6 +45,28 @@ export const styles = {
     justifyContent: 'center',
     margin: dimensions.UNIT,
   },
+
+  diskContainer: {
+    width: dimensions.SCREEN_WIDTH - dimensions.UNIT * 3 - dimensions.ICON_SIZE_DEFAULT,
+  },
+
+  diskBar: {
+    width: '100%',
+    flexDirection: 'row',
+    marginTop: dimensions.UNIT,
+  },
+
+  diskStats: {
+    flexDirection: 'row',
+    marginTop: dimensions.UNIT,
+  },
+
+  diskStat: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
 }
 
 export const About = ({ data, ipFinder }) => (
@@ -117,6 +142,81 @@ export const About = ({ data, ipFinder }) => (
       </View>
     </Container>
 
+    <Container
+      style={[styles.container, styles.divider]}
+      elevation={2}>
+
+      <View style={styles.iconContainer}>
+        <Icon name={'cloud-download'} />
+      </View>
+
+      <View style={styles.diskContainer}>
+        <Typography variant={'subtitle2'}>Downloads</Typography>
+
+        <View style={styles.diskBar}>
+          <View style={{
+            width: `${data?.status?.disk?.sizePercentage ?? 100}%`,
+            height: DISK_BAR_HEIGHT,
+            backgroundColor: colors.ON_SURFACE_MEDIUM,
+          }} />
+
+          <View style={{
+            width: `${data?.status?.disk?.usedPercentage ?? 0}%`,
+            height: DISK_BAR_HEIGHT,
+            backgroundColor: colors.PRIMARY_COLOR_200,
+          }} />
+
+          <View style={{
+            width: `${data?.status?.disk?.freePercentage ?? 0}%`,
+            height: DISK_BAR_HEIGHT,
+            backgroundColor: colors.WHITE,
+          }} />
+        </View>
+
+        <View style={styles.diskStats}>
+          <View style={styles.diskStat}>
+            <View style={{
+              width: (DISK_BAR_HEIGHT),
+              height: DISK_BAR_HEIGHT,
+              backgroundColor: colors.ON_SURFACE_MEDIUM,
+              borderRadius: 10,
+              marginRight: dimensions.UNIT / 2,
+            }} />
+            <Typography variant={'caption'}>
+              Size: {data?.status?.disk?.size ?? 0}
+            </Typography>
+          </View>
+
+          <View style={styles.diskStat}>
+            <View style={{
+              width: (DISK_BAR_HEIGHT),
+              height: DISK_BAR_HEIGHT,
+              backgroundColor: colors.PRIMARY_COLOR_200,
+              borderRadius: 10,
+              marginRight: dimensions.UNIT / 2,
+            }} />
+            <Typography variant={'caption'}>
+              Used: {data?.status?.disk?.used ?? 0}
+            </Typography>
+          </View>
+
+          <View style={styles.diskStat}>
+            <View style={{
+              width: (DISK_BAR_HEIGHT),
+              height: DISK_BAR_HEIGHT,
+              backgroundColor: colors.WHITE,
+              borderRadius: 10,
+              marginRight: dimensions.UNIT / 2,
+            }} />
+            <Typography variant={'caption'}>
+              Free: {data?.status?.disk?.free ?? 0}
+            </Typography>
+          </View>
+        </View>
+      </View>
+
+    </Container>
+
     <TextButton onPress={() => navigate('AppChangelog')}>
       Changelog
     </TextButton>

app/mobile/screens/Settings/SettingsQuery.js

@@ -7,7 +7,14 @@ export const AboutQuery =  gql`
       version
       totalMovies
       totalShows
-      totalEpisodes
+      disk {
+        free
+        used
+        size
+        freePercentage
+        usedPercentage
+        sizePercentage
+      }
     }
     
     scraper {

app/modules/GraphQL/Apollo.js

@@ -5,7 +5,7 @@ import { CachePersistor } from 'apollo-cache-persist'
 import { WebSocketLink } from '@apollo/client/link/ws'
 import { getMainDefinition } from '@apollo/client/utilities'
 
-const SCHEMA_VERSION = '5' // Must be a string.
+const SCHEMA_VERSION = '6' // Must be a string.
 const SCHEMA_VERSION_KEY = 'apollo-schema-version'
 
 export default async(host) => {

app/modules/GraphQL/MoviesQuery.js

@@ -1,67 +1,33 @@
 import gql from 'graphql-tag'
 
+import movieFragment, { movieMinimalFragment } from './fragments/movieFragment'
+
 export const MoviesModeQuery = gql`
   query movies($offset: Float!, $query: String) {
     movies(limit: 25, offset: $offset, query: $query) {
-      _id
-      __typename
-      title
-      type
-      watched {
-        complete
-      }
-      images {
-        poster {
-          thumb
-        }
-      }
+      ...movieMinimal
+    }
+  }
+
+  ${movieMinimalFragment}
+`
+
+export const RelatedMoviesQuery = gql`
+  query relatedMovies($_id: String!) {
+    relatedMovies(_id: $_id) {
+      ...movieMinimal
     }
   }
+
+  ${movieMinimalFragment}
 `
 
 export default gql`
   query movies($offset: Float!, $query: String) {
     movies(limit: 25, offset: $offset, query: $query) {
-      _id
-      __typename
-      title
-      genres
-      synopsis
-      type
-      bookmarked
-      trailer
-      download {
-        downloadStatus
-        downloading
-        downloadComplete
-        downloadQuality
-      }
-      rating {
-        percentage
-      }
-      watched {
-        complete
-        progress
-      }
-      torrents {
-        quality
-        sizeString
-        type
-      }
-      searchedTorrents {
-        quality
-        sizeString
-        type
-      }
-      images {
-        backdrop {
-          full
-          high
-        }
-        poster {
-          thumb
-        }
-      }
+      ...movie
     }
   }
+
+  ${movieFragment}
 `