From a7286df381cd82729c776a67f975c2de17045920 Mon Sep 17 00:00:00 2001 From: Tycho Bokdam Date: Tue, 13 Oct 2020 17:49:38 +0200 Subject: [PATCH 1/2] refactor: Started updating searchbar in mode screen We are going to add options there to further filter / sort the content --- android/app/build.gradle | 2 +- android/build.gradle | 2 +- app/mobile/screens/Home/HomeScreen.js | 2 +- app/mobile/screens/Mode/ModeScreen.js | 46 +++++++++--- .../screens/Mode/SearchBar/SearchBar.js | 72 +++++++++++-------- .../BottomSheetManager/BottomSheetProvider.js | 2 +- app/modules/GraphQL/BookmarksGraphQL.js | 13 ++++ app/modules/GraphQL/MoviesGraphQL.js | 4 +- app/modules/GraphQL/ShowsGraphQL.js | 10 +++ app/modules/dimensions.js | 4 ++ package.json | 2 +- yarn.lock | 8 +-- 12 files changed, 115 insertions(+), 52 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 6eaaa1e..7d4feee 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -6,7 +6,7 @@ import com.android.build.OutputFile project.ext.react = [ entryFile: "index.js", - enableHermes: false + enableHermes: true ] apply from: "../../node_modules/react-native/react.gradle" diff --git a/android/build.gradle b/android/build.gradle index 2cf040e..543b7f3 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -16,7 +16,7 @@ buildscript { } dependencies { - classpath 'com.android.tools.build:gradle:4.0.1' + classpath 'com.android.tools.build:gradle:4.0.2' classpath 'com.google.gms:google-services:4.3.2' // NOTE: Do not place your application dependencies here; they belong diff --git a/app/mobile/screens/Home/HomeScreen.js b/app/mobile/screens/Home/HomeScreen.js index 23ad53e..7aca772 100644 --- a/app/mobile/screens/Home/HomeScreen.js +++ b/app/mobile/screens/Home/HomeScreen.js @@ -48,7 +48,7 @@ export const styles = StyleSheet.create({ }) export const Home = ({ navigation }) => { - const { data: moviesData, fetchMore: moviesFetchMore } = useQuery( + const { data: moviesData, fetchMore: moviesFetchMore} = useQuery( MoviesQuery, { variables: { diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js index 5b82359..9c919d0 100644 --- a/app/mobile/screens/Mode/ModeScreen.js +++ b/app/mobile/screens/Mode/ModeScreen.js @@ -10,8 +10,8 @@ import colors from 'modules/colors' import dimensions from 'modules/dimensions' import useBackButton from 'modules/hooks/useBackButton' import { MoviesModeQuery } from 'modules/GraphQL/MoviesGraphQL' -import ShowsQuery from 'modules/GraphQL/ShowsGraphQL' -import BookmarksQuery from 'modules/GraphQL/BookmarksGraphQL' +import { ShowsModeQuery } from 'modules/GraphQL/ShowsGraphQL' +import { BookmarksModeQuery } from 'modules/GraphQL/BookmarksGraphQL' import fetchMoreUpdateQuery from 'modules/GraphQL/helpers/fetchMoreUpdateQuery' import Card from 'components/Card' @@ -39,26 +39,51 @@ const styles = StyleSheet.create({ }, }) -export const getQuery = (mode) => { +export const useMode = (mode) => React.useMemo(() => { + const defaultSortingContent = 'trending' + const sortingOptionsContent = ['trending', 'name', 'rating', 'released', 'added', 'year'] + switch (mode) { case 'movies': - return MoviesModeQuery + return { + query: MoviesModeQuery, + sort: defaultSortingContent, + sortOptions: sortingOptionsContent, + } case 'shows': - return ShowsQuery + return { + query: ShowsModeQuery, + sort: defaultSortingContent, + sortOptions: sortingOptionsContent, + } + case 'bookmarks': - return BookmarksQuery + return { + query: BookmarksModeQuery, + sort: null, + } + + default: + return { + query: null, + sort: null, + } } -} +}, [mode]) export const Mode = ({ mode, navigation }) => { const flatListRef = useRef(null) + const modeInfo = useMode(mode) + const [sort, setSorting] = useState(modeInfo.sort) const [query, setQuery] = useState(null) + const [executeQuery, { loading, data, fetchMore }] = useLazyQuery( - getQuery(mode), + modeInfo.query, { variables: { offset: 0, query, + sort, }, }, ) @@ -134,7 +159,7 @@ export const Mode = ({ mode, navigation }) => { ListEmptyComponent={renderNothingFound} ListHeaderComponent={() => ( )} ListFooterComponent={() => } @@ -157,7 +182,8 @@ export const Mode = ({ mode, navigation }) => { + search={setQuery} + /> ) diff --git a/app/mobile/screens/Mode/SearchBar/SearchBar.js b/app/mobile/screens/Mode/SearchBar/SearchBar.js index 5b67bc9..a3394d7 100644 --- a/app/mobile/screens/Mode/SearchBar/SearchBar.js +++ b/app/mobile/screens/Mode/SearchBar/SearchBar.js @@ -7,6 +7,7 @@ import { useCollapsibleStack } from 'react-navigation-collapsible' import colors from 'modules/colors' import dimensions from 'modules/dimensions' +import constants from 'modules/constants' import Container from 'components/Container' import Icon from 'components/Icon' @@ -17,7 +18,7 @@ export const styles = StyleSheet.create({ root: { position: 'absolute', width: '100%', - height: 50, + height: dimensions.SEARCH_BAR_HEIGHT, top: StatusBar.currentHeight + dimensions.UNIT, display: 'flex', justifyContent: 'center', @@ -26,28 +27,21 @@ export const styles = StyleSheet.create({ container: { width: dimensions.SCREEN_WIDTH - (dimensions.UNIT * 2), - height: '100%', - borderRadius: dimensions.BORDER_RADIUS, + borderRadius: dimensions.SEARCH_BAR_BORDER_RADIOS, overflow: 'hidden', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', }, input: { height: '100%', - width: '80%', + flex: 1, color: colors.ICON.WHITE, - marginLeft: 40, - }, - - cancel: { - position: 'absolute', - right: dimensions.UNIT, - top: dimensions.UNIT, }, icon: { - position: 'absolute', - left: dimensions.UNIT, - top: dimensions.UNIT, + margin: dimensions.UNIT, }, }) @@ -120,35 +114,51 @@ export const SearchBar = ({ searchedQuery, search, flatListRef }) => { elevation={1} style={styles.container}> - {searchedQuery && ( - 0 ? 'zoomIn' : 'zoomOut'} - duration={300} - useNativeDriver> - - - )} - + {searchedQuery && ( + 0 ? 'zoomIn' : 'zoomOut'} + duration={constants.ANIMATION_DURATIONS.enteringScreen} + useNativeDriver> + + + )} + + {!searchedQuery && ( + 0 ? 'zoomOut' : 'zoomIn'} + duration={constants.ANIMATION_DURATIONS.enteringScreen} + useNativeDriver> + + + )} diff --git a/app/modules/BottomSheetManager/BottomSheetProvider.js b/app/modules/BottomSheetManager/BottomSheetProvider.js index a3d093b..23f0a3c 100644 --- a/app/modules/BottomSheetManager/BottomSheetProvider.js +++ b/app/modules/BottomSheetManager/BottomSheetProvider.js @@ -127,7 +127,7 @@ export const BottomSheetProvider = ({ children }) => { style={{ height: bottomSheetConfig.biggestSnapPoint, }}> - {visible && bottomSheetConfig.renderContent()} + {bottomSheetConfig.renderContent()} )} /> diff --git a/app/modules/GraphQL/BookmarksGraphQL.js b/app/modules/GraphQL/BookmarksGraphQL.js index 9f0f57b..3bea2cd 100644 --- a/app/modules/GraphQL/BookmarksGraphQL.js +++ b/app/modules/GraphQL/BookmarksGraphQL.js @@ -42,6 +42,19 @@ export const BookmarkedSubscription = gql` ${showBookmarkFragment} ` +export const BookmarksModeQuery = gql` + query bookmarks($offset: Float!, $query: String) { + bookmarks(limit: 25, offset: $offset, query: $query) { + ...movieBookmark + + ...showBookmark + } + } + + ${movieBookmarkFragment} + ${showBookmarkFragment} +` + export default gql` query bookmarks($offset: Float!) { bookmarks(limit: 25, offset: $offset) { diff --git a/app/modules/GraphQL/MoviesGraphQL.js b/app/modules/GraphQL/MoviesGraphQL.js index b1e51db..8f45545 100644 --- a/app/modules/GraphQL/MoviesGraphQL.js +++ b/app/modules/GraphQL/MoviesGraphQL.js @@ -3,8 +3,8 @@ import { gql } from '@apollo/client' import movieFragment, { movieMinimalFragment } from './fragments/movieFragment' export const MoviesModeQuery = gql` - query movies($offset: Float!, $query: String) { - movies(limit: 25, offset: $offset, query: $query) { + query movies($offset: Float!, $query: String, $sort: String!) { + movies(limit: 25, offset: $offset, query: $query, sort: $sort) { ...movieMinimal } } diff --git a/app/modules/GraphQL/ShowsGraphQL.js b/app/modules/GraphQL/ShowsGraphQL.js index e1074e2..1230501 100644 --- a/app/modules/GraphQL/ShowsGraphQL.js +++ b/app/modules/GraphQL/ShowsGraphQL.js @@ -22,6 +22,16 @@ export const MostWatchedShowsQuery = gql` ${showMinimalFragment} ` +export const ShowsModeQuery = gql` + query shows($offset: Float!, $query: String, $sort: String!) { + shows(limit: 25, offset: $offset, query: $query, sort: $sort) { + ...showMinimal + } + } + + ${showMinimalFragment} +` + export default gql` query shows($offset: Float!, $query: String) { shows(limit: 25, offset: $offset, query: $query) { diff --git a/app/modules/dimensions.js b/app/modules/dimensions.js index 57c9386..1518c0d 100644 --- a/app/modules/dimensions.js +++ b/app/modules/dimensions.js @@ -36,6 +36,10 @@ export default { BORDER_WIDTH: 1.5, BORDER_RADIUS: 5, + SEARCH_BAR_HEIGHT: getHeight(40), + SEARCH_BAR_BORDER_RADIOS: getHeight(6), + SEARCH_BAR_ICON_SIZE: getHeight(24), + CARD_HEIGHT: getHeight(useCorrect(130, null, 252)), CARD_WIDTH: getWidth(useCorrect(90, null, 175)), CARD_HEIGHT_SMALL: getHeight(useCorrect(116, null, 252)), diff --git a/package.json b/package.json index 2bed679..969c1f9 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "test:watch": "yarn test --watch" }, "dependencies": { - "@apollo/client": "^3.2.2", + "@apollo/client": "^3.2.3", "@react-native-community/async-storage": "1.12.1", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/netinfo": "5.9.7", diff --git a/yarn.lock b/yarn.lock index e9cb174..413dd4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,10 +2,10 @@ # yarn lockfile v1 -"@apollo/client@^3.2.2": - version "3.2.2" - resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.2.2.tgz#fe5cad4d53373979f13a925e9da02d8743e798a5" - integrity sha512-lw80L0i8PHhv863iLEwf5AvNak9STPNC6/0MWQYGZHV4yEryj7muLAueRzXkZHpoddGAou80xL8KqLAODNy0/A== +"@apollo/client@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.2.3.tgz#d13e4efa501a1fadefa3cd93e2de99cba2b53999" + integrity sha512-AraRQRG4HinqcsuDtRzuavMuSxkK46TO4zh4zfLLCazMYSYP1xY9E5cQEeUHZ993HQMs4A7tyATPaEMfn8UZfA== dependencies: "@graphql-typed-document-node/core" "^3.0.0" "@types/zen-observable" "^0.8.0" From d4b9298764b5a81eb3d42a0363afb14a868f1753 Mon Sep 17 00:00:00 2001 From: Tycho Bokdam Date: Wed, 14 Oct 2020 18:37:48 +0200 Subject: [PATCH 2/2] feat: Added filtering / sorting in mode screens --- .../components/ItemOptions/ItemOptions.js | 2 +- .../OptionsItem/OptionsItemInner.js | 54 +++++--- .../OptionsItemTorrent/OptionsItemTorrent.js | 14 +- app/mobile/screens/Mode/ModeScreen.js | 51 +++---- .../screens/Mode/SearchBar/SearchBar.js | 131 +++++++++++++----- app/mobile/screens/index.js | 14 +- app/modules/GraphQL/BookmarksGraphQL.js | 4 +- app/modules/GraphQL/EpisodesGraphQL.js | 12 +- app/modules/GraphQL/ItemGraphQL.js | 72 ---------- app/modules/GraphQL/MoviesGraphQL.js | 2 +- app/modules/GraphQL/SearchForBetterGraphQL.js | 14 +- app/modules/GraphQL/ShowsGraphQL.js | 14 +- app/modules/GraphQL/fragments.js | 84 ----------- .../GraphQL/fragments/movieFragment.js | 12 +- app/modules/GraphQL/fragments/showFragment.js | 60 -------- app/modules/constants.js | 7 +- app/modules/hooks/useDownload.js | 2 +- app/modules/i18n/translations/en.json | 11 +- app/modules/i18n/translations/nl.json | 11 +- 19 files changed, 231 insertions(+), 340 deletions(-) delete mode 100644 app/modules/GraphQL/fragments.js diff --git a/app/mobile/components/ItemOptions/ItemOptions.js b/app/mobile/components/ItemOptions/ItemOptions.js index 91b1925..4542871 100644 --- a/app/mobile/components/ItemOptions/ItemOptions.js +++ b/app/mobile/components/ItemOptions/ItemOptions.js @@ -138,7 +138,7 @@ export const ItemOptions = ({ disabled icon={'content-copy'} label={i18n.t('Copy to phone')} - subLabel={'Item needs to be downloaded for this to become available'} /> + labelLine2={'Item needs to be downloaded for this to become available'} /> )} diff --git a/app/mobile/components/OptionsItem/OptionsItemInner.js b/app/mobile/components/OptionsItem/OptionsItemInner.js index 2b1b633..d9340e4 100644 --- a/app/mobile/components/OptionsItem/OptionsItemInner.js +++ b/app/mobile/components/OptionsItem/OptionsItemInner.js @@ -16,19 +16,17 @@ export const styles = StyleSheet.create({ marginRight: dimensions.UNIT, }, - labels: { + labelsContainer: { flex: 1, }, - label: {}, - - subLabels: { + labels: { flexDirection: 'row', }, }) -export const SettingsItem = ({ label, subLabel, subLabelLine2, icon, disabled, loading, downloading }) => { +export const SettingsItem = ({ label, labelLine2, subLabel, subLabelLine2, icon, disabled, loading, downloading }) => { return ( <> {loading && ( @@ -73,21 +71,39 @@ export const SettingsItem = ({ label, subLabel, subLabelLine2, icon, disabled, l } /> )} - - - {label} - + + {(label || subLabel) && ( + + + {label} + - {(subLabel || subLabelLine2) && ( - {subLabel && ( + + {subLabel} + + )} + + )} + + {(labelLine2 || subLabelLine2) && ( + + {labelLine2 && ( - {subLabel} + {labelLine2} )} diff --git a/app/mobile/components/OptionsItemTorrent/OptionsItemTorrent.js b/app/mobile/components/OptionsItemTorrent/OptionsItemTorrent.js index bdf1b3c..71cc2b5 100644 --- a/app/mobile/components/OptionsItemTorrent/OptionsItemTorrent.js +++ b/app/mobile/components/OptionsItemTorrent/OptionsItemTorrent.js @@ -35,7 +35,7 @@ export const OptionsItemTorrent = ({ return !(download.torrentType === torrent.type && download.quality === torrent.quality) }, [download, disabled]) - const itemSubLabel = React.useMemo(() => { + const labelLine2 = React.useMemo(() => { if (!isItemDisabled && download?.status === constants.STATUS_DOWNLOADING) { return download.timeRemaining } @@ -43,6 +43,15 @@ export const OptionsItemTorrent = ({ return `${torrent.provider} - ${torrent.sizeString}` }, [download, isItemDisabled]) + const subLabel = React.useMemo(() => { + if (!isItemDisabled && download?.status === constants.STATUS_DOWNLOADING) { + return `${download.numPeers} peer${download.numPeers > 1 ? 's' : ''}` + } + + return null + + }, [download, isItemDisabled]) + const subLabelLine2 = React.useMemo(() => { if (!isItemDisabled && download?.status === constants.STATUS_DOWNLOADING) { return `${download.progress}% / ${download.speed}` @@ -96,7 +105,8 @@ export const OptionsItemTorrent = ({ ].includes(download.status) } label={torrent.quality} - subLabel={itemSubLabel} + labelLine2={labelLine2} + subLabel={subLabel} subLabelLine2={subLabelLine2} onPress={handleOnTorrentClick()} /> diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js index 9c919d0..d431a32 100644 --- a/app/mobile/screens/Mode/ModeScreen.js +++ b/app/mobile/screens/Mode/ModeScreen.js @@ -8,6 +8,7 @@ import { getDefaultHeaderHeight } from 'react-navigation-collapsible/lib/src/uti import i18n from 'modules/i18n' import colors from 'modules/colors' import dimensions from 'modules/dimensions' +import constants from 'modules/constants' import useBackButton from 'modules/hooks/useBackButton' import { MoviesModeQuery } from 'modules/GraphQL/MoviesGraphQL' import { ShowsModeQuery } from 'modules/GraphQL/ShowsGraphQL' @@ -40,57 +41,44 @@ const styles = StyleSheet.create({ }) export const useMode = (mode) => React.useMemo(() => { - const defaultSortingContent = 'trending' - const sortingOptionsContent = ['trending', 'name', 'rating', 'released', 'added', 'year'] - switch (mode) { - case 'movies': - return { - query: MoviesModeQuery, - sort: defaultSortingContent, - sortOptions: sortingOptionsContent, - } - case 'shows': - return { - query: ShowsModeQuery, - sort: defaultSortingContent, - sortOptions: sortingOptionsContent, - } - - case 'bookmarks': - return { - query: BookmarksModeQuery, - sort: null, - } + case constants.MODE_MOVIES: + return MoviesModeQuery + + case constants.MODE_SHOWS: + return ShowsModeQuery + + case constants.MODE_BOOKMARKS: + return BookmarksModeQuery default: - return { - query: null, - sort: null, - } + return null } }, [mode]) export const Mode = ({ mode, navigation }) => { const flatListRef = useRef(null) - const modeInfo = useMode(mode) - const [sort, setSorting] = useState(modeInfo.sort) - const [query, setQuery] = useState(null) + const modeQuery = useMode(mode) + const [sort, setSorting] = useState(undefined) + const [filter, setFilter] = useState(undefined) + const [query, setQuery] = useState(undefined) const [executeQuery, { loading, data, fetchMore }] = useLazyQuery( - modeInfo.query, + modeQuery, { variables: { offset: 0, query, sort, + filter, }, }, ) useBackButton(() => { - if (query?.trim()?.length > 0 && navigation.isFocused()) { + if ((query?.trim()?.length > 0 || filter) && navigation.isFocused()) { setQuery(null) + setFilter(undefined) return true } @@ -183,6 +171,9 @@ export const Mode = ({ mode, navigation }) => { flatListRef={flatListRef} searchedQuery={query} search={setQuery} + mode={mode} + setSorting={setSorting} + setFilter={setFilter} /> diff --git a/app/mobile/screens/Mode/SearchBar/SearchBar.js b/app/mobile/screens/Mode/SearchBar/SearchBar.js index a3394d7..c761bfc 100644 --- a/app/mobile/screens/Mode/SearchBar/SearchBar.js +++ b/app/mobile/screens/Mode/SearchBar/SearchBar.js @@ -1,17 +1,21 @@ import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' -import { StyleSheet, StatusBar, TextInput, Animated } from 'react-native' -import * as Animatable from 'react-native-animatable' +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' import constants from 'modules/constants' +import i18n from 'modules/i18n' +import { useBottomSheet } from 'modules/BottomSheetManager' import Container from 'components/Container' import Icon from 'components/Icon' import IconButton from 'components/IconButton' +import OptionsGroup from 'mobile/components/OptionsGroup' +import OptionsHeader from 'mobile/components/OptionsHeader' +import OptionsItem from 'mobile/components/OptionsItem' export const styles = StyleSheet.create({ @@ -46,11 +50,32 @@ export const styles = StyleSheet.create({ }) -export const SearchBar = ({ searchedQuery, search, flatListRef }) => { +export const SearchBar = ({ searchedQuery, search, flatListRef, mode, setSorting, setFilter }) => { + const [openBottomSheet, updateBottomSheet, closeBottomSheet] = useBottomSheet() const navigation = useNavigation() const [query, setQuery] = useState(searchedQuery) const [timeout, setTheTimeout] = useState(null) + const bottomSheetOptions = React.useMemo(() => { + if (mode === constants.MODE_BOOKMARKS) { + return [ + { label: i18n.t('None'), value: undefined }, + { label: i18n.t('Movies'), value: 'movies' }, + { label: i18n.t('Shows'), value: 'shows' }, + ] + } + + return [ + { label: i18n.t('Default'), value: 'trending' }, + { label: i18n.t('Popularity'), value: 'popularity' }, + { label: i18n.t('Name'), value: 'name' }, + { label: i18n.t('Rating'), value: 'rating' }, + { label: i18n.t('Released'), value: 'released' }, + { label: i18n.t('Year'), value: 'year' }, + { label: i18n.t('Added'), value: 'added' }, + ] + }, [mode]) + useEffect(() => { // Search is cleared also clear it here if (searchedQuery === null) { @@ -91,17 +116,61 @@ export const SearchBar = ({ searchedQuery, search, flatListRef }) => { } } - const handleLayout = ({ - nativeEvent: { - layout: { height = 0 }, - }, - }) => { + const handleLayout = ({ nativeEvent: { layout: { height = 0 } } }) => { navigation.setParams({ collapsibleSubHeaderHeight: height + StatusBar.currentHeight + dimensions.UNIT, isCollapsibleDirty: true, }) } + const handleFilterOrSortPress = React.useCallback((option) => () => { + if (mode === constants.MODE_BOOKMARKS) { + setFilter(option.value) + + } else { + setSorting(option.value) + } + + closeBottomSheet() + }, [mode, closeBottomSheet]) + + const renderBottomSheetContent = React.useCallback(() => { + return ( + + + + + {bottomSheetOptions.map((option) => ( + + ))} + + + ) + }, [mode]) + + const showBottomSheet = () => { + const contentHeight = 100 + (bottomSheetOptions.length * 30) + + openBottomSheet({ + renderContent: renderBottomSheetContent, + snapPoints: [ + contentHeight, + contentHeight, + 0, + ], + contentHeight: contentHeight, + onClose: null, + }) + } + return ( { value={query} /> {searchedQuery && ( - 0 ? 'zoomIn' : 'zoomOut'} - duration={constants.ANIMATION_DURATIONS.enteringScreen} - useNativeDriver> - - + name={'close-circle'} + color={'primary'} + onPress={cancelSearch} + size={dimensions.SEARCH_BAR_ICON_SIZE} + animatable={{ + animation: searchedQuery.trim().length > 0 ? 'zoomIn' : 'zoomOut', + duration: constants.ANIMATION_DURATIONS.enteringScreen, + useNativeDriver: true, + }} + /> )} {!searchedQuery && ( - 0 ? 'zoomOut' : 'zoomIn'} - duration={constants.ANIMATION_DURATIONS.enteringScreen} - useNativeDriver> - - + name={'dots-vertical'} + color={'primary'} + emphasis={'medium'} + onPress={showBottomSheet} + size={dimensions.SEARCH_BAR_ICON_SIZE} + animatable={{ + animation: query?.trim()?.length > 0 ? 'zoomOut' : 'zoomIn', + duration: constants.ANIMATION_DURATIONS.enteringScreen, + useNativeDriver: true, + }} + /> )} diff --git a/app/mobile/screens/index.js b/app/mobile/screens/index.js index e13d4bd..43aa483 100644 --- a/app/mobile/screens/index.js +++ b/app/mobile/screens/index.js @@ -2,6 +2,8 @@ import React from 'react' import { createStackNavigator } from '@react-navigation/stack' import { createCollapsibleStack } from 'react-navigation-collapsible' +import constants from 'modules/constants' + import HomeScreen from './Home' import ItemScreen from './Item' import PlayerScreen from './Player' @@ -26,7 +28,9 @@ export default () => ( {createCollapsibleStack( - {(props) => } + {(props) => ( + + )} , {}, 1, @@ -34,7 +38,9 @@ export default () => ( {createCollapsibleStack( - {(props) => } + {(props) => ( + + )} , {}, 1, @@ -42,7 +48,9 @@ export default () => ( {createCollapsibleStack( - {(props) => } + {(props) => ( + + )} , {}, 1, diff --git a/app/modules/GraphQL/BookmarksGraphQL.js b/app/modules/GraphQL/BookmarksGraphQL.js index 3bea2cd..cbdf815 100644 --- a/app/modules/GraphQL/BookmarksGraphQL.js +++ b/app/modules/GraphQL/BookmarksGraphQL.js @@ -43,8 +43,8 @@ export const BookmarkedSubscription = gql` ` export const BookmarksModeQuery = gql` - query bookmarks($offset: Float!, $query: String) { - bookmarks(limit: 25, offset: $offset, query: $query) { + query bookmarks($offset: Float!, $query: String, $filter: String) { + bookmarks(limit: 25, offset: $offset, query: $query, filter: $filter) { ...movieBookmark ...showBookmark diff --git a/app/modules/GraphQL/EpisodesGraphQL.js b/app/modules/GraphQL/EpisodesGraphQL.js index 646f1d9..0f187a9 100644 --- a/app/modules/GraphQL/EpisodesGraphQL.js +++ b/app/modules/GraphQL/EpisodesGraphQL.js @@ -1,5 +1,7 @@ import { gql } from '@apollo/client' +import torrentFragment from 'modules/GraphQL/fragments/torrentFragment' + export default gql` query episodes { episodes: myEpisodes { @@ -33,15 +35,13 @@ export default gql` } } torrents { - quality - sizeString - type + ...torrent } searchedTorrents { - quality - sizeString - type + ...torrent } } } + + ${torrentFragment} ` diff --git a/app/modules/GraphQL/ItemGraphQL.js b/app/modules/GraphQL/ItemGraphQL.js index e79f35a..6d1aa90 100644 --- a/app/modules/GraphQL/ItemGraphQL.js +++ b/app/modules/GraphQL/ItemGraphQL.js @@ -47,78 +47,6 @@ export const MovieQuery = gql` } ` -export const ShowQuery = gql` - query show($_id: String!) { - item: show(_id: $_id) { - _id - title - genres - synopsis - type - bookmarked - trailer - rating { - percentage - } - images { - backdrop { - high - } - poster { - thumb - high - } - } - seasons { - _id - title - number - type - images { - poster { - thumb - } - } - episodes { - _id - title - number - season - synopsis - firstAired - type - watched { - complete - progress - } - download { - downloadStatus - downloading - downloadComplete - downloadQuality - } - images { - poster { - thumb - high - } - } - torrents { - quality - sizeString - type - } - searchedTorrents { - quality - sizeString - type - } - } - } - } - } -` - export const EpisodeQuery = gql` query episode($_id: String!) { item: episode(_id: $_id) { diff --git a/app/modules/GraphQL/MoviesGraphQL.js b/app/modules/GraphQL/MoviesGraphQL.js index 8f45545..1ed6b24 100644 --- a/app/modules/GraphQL/MoviesGraphQL.js +++ b/app/modules/GraphQL/MoviesGraphQL.js @@ -3,7 +3,7 @@ import { gql } from '@apollo/client' import movieFragment, { movieMinimalFragment } from './fragments/movieFragment' export const MoviesModeQuery = gql` - query movies($offset: Float!, $query: String, $sort: String!) { + query movies($offset: Float!, $query: String, $sort: String) { movies(limit: 25, offset: $offset, query: $query, sort: $sort) { ...movieMinimal } diff --git a/app/modules/GraphQL/SearchForBetterGraphQL.js b/app/modules/GraphQL/SearchForBetterGraphQL.js index bfeb68c..59f1908 100644 --- a/app/modules/GraphQL/SearchForBetterGraphQL.js +++ b/app/modules/GraphQL/SearchForBetterGraphQL.js @@ -1,16 +1,18 @@ import { gql } from '@apollo/client' +import torrentFragment from 'modules/GraphQL/fragments/torrentFragment' + export const SearchForBetterEpisode = gql` mutation SearchForBetterEpisode($_id: String!) { getBetterQualitiesForEpisode(_id: $_id) { _id searchedTorrents { - quality - sizeString - type + ...torrent } } } + + ${torrentFragment} ` export const SearchForBetterMovie = gql` @@ -18,10 +20,10 @@ export const SearchForBetterMovie = gql` getBetterQualitiesForMovie(_id: $_id) { _id searchedTorrents { - quality - sizeString - type + ...torrent } } } + + ${torrentFragment} ` diff --git a/app/modules/GraphQL/ShowsGraphQL.js b/app/modules/GraphQL/ShowsGraphQL.js index 1230501..43faed7 100644 --- a/app/modules/GraphQL/ShowsGraphQL.js +++ b/app/modules/GraphQL/ShowsGraphQL.js @@ -1,16 +1,6 @@ import { gql } from '@apollo/client' -import showFragment, { showMinimalFragment } from './fragments/showFragment' - -export const DownloadedShows = gql` - query shows($offset: Float!, $query: String) { - shows(limit: 25, offset: $offset, query: $query, downloadsOnly: true) { - ...show - } - } - - ${showFragment} -` +import { showMinimalFragment } from './fragments/showFragment' export const MostWatchedShowsQuery = gql` query mostWatchedShows { @@ -23,7 +13,7 @@ export const MostWatchedShowsQuery = gql` ` export const ShowsModeQuery = gql` - query shows($offset: Float!, $query: String, $sort: String!) { + query shows($offset: Float!, $query: String, $sort: String) { shows(limit: 25, offset: $offset, query: $query, sort: $sort) { ...showMinimal } diff --git a/app/modules/GraphQL/fragments.js b/app/modules/GraphQL/fragments.js deleted file mode 100644 index 6755238..0000000 --- a/app/modules/GraphQL/fragments.js +++ /dev/null @@ -1,84 +0,0 @@ -import { gql } from '@apollo/client' - -export const movieFragment = gql` - fragment movie on Movie { - _id - title - genres - synopsis - type - bookmarked - watched { - complete - progress - } - torrents { - quality - sizeString - type - } - searchedTorrents { - quality - sizeString - type - } - images { - backdrop { - high - } - poster { - thumb - } - } - } -` - -export const showFragment = gql` - fragment show on Show { - _id - title - genres - synopsis - type - bookmarked - images { - backdrop { - high - } - poster { - thumb - } - } - seasons { - _id - title - number - images { - poster { - thumb - } - } - episodes { - _id - title - number - synopsis - images { - poster { - thumb - } - } - torrents { - quality - sizeString - type - } - searchedTorrents { - quality - sizeString - type - } - } - } - } -` diff --git a/app/modules/GraphQL/fragments/movieFragment.js b/app/modules/GraphQL/fragments/movieFragment.js index 89784e1..075a38d 100644 --- a/app/modules/GraphQL/fragments/movieFragment.js +++ b/app/modules/GraphQL/fragments/movieFragment.js @@ -1,5 +1,7 @@ import { gql } from '@apollo/client' +import torrentFragment from 'modules/GraphQL/fragments/torrentFragment' + export const movieBookmarkFragment = gql` fragment movieBookmark on Movie { ... on Movie { @@ -57,14 +59,10 @@ export default gql` progress } torrents { - quality - sizeString - type + ...torrent } searchedTorrents { - quality - sizeString - type + ...torrent } images { backdrop { @@ -76,4 +74,6 @@ export default gql` } } } + + ${torrentFragment} ` diff --git a/app/modules/GraphQL/fragments/showFragment.js b/app/modules/GraphQL/fragments/showFragment.js index fa48b2c..b96b988 100644 --- a/app/modules/GraphQL/fragments/showFragment.js +++ b/app/modules/GraphQL/fragments/showFragment.js @@ -30,63 +30,3 @@ export const showMinimalFragment = gql` } } ` - -export default gql` - fragment show on Show { - _id - title - type - bookmarked - images { - poster { - thumb - full - } - backdrop { - full - } - } - seasons { - _id - images { - poster { - thumb - full - } - } - episodes { - _id - title - number - season - synopsis - firstAired - type - show { - title - images { - poster { - thumb - high - } - } - } - watched { - complete - progress - } - download { - downloadStatus - downloading - downloadComplete - downloadQuality - } - images { - poster { - thumb - } - } - } - } - } -` diff --git a/app/modules/constants.js b/app/modules/constants.js index 56768ec..d9bcfb9 100644 --- a/app/modules/constants.js +++ b/app/modules/constants.js @@ -14,8 +14,11 @@ export default { STATUS_FAILED: 'failed', STATUS_REMOVED: 'removed', - KEY_DEFAULT_SUBTITLE: '@Pct.defaultSubtitle', + MODE_MOVIES: 'movies', + MODE_SHOWS: 'shows', + MODE_BOOKMARKS: 'bookmarks', + KEY_DEFAULT_SUBTITLE: '@Pct.defaultSubtitle', ANIMATION_DURATIONS: { complex: 375, @@ -25,6 +28,6 @@ export default { shorter: 200, shortest: 150, standard: 300, - } + }, } diff --git a/app/modules/hooks/useDownload.js b/app/modules/hooks/useDownload.js index a953cd1..2fc6955 100644 --- a/app/modules/hooks/useDownload.js +++ b/app/modules/hooks/useDownload.js @@ -10,7 +10,7 @@ export const useDownload = (item) => { return [ downloadManager.getDownload(item._id), - downloadManager + downloadManager, ] } diff --git a/app/modules/i18n/translations/en.json b/app/modules/i18n/translations/en.json index dedc86c..d0d7ff8 100644 --- a/app/modules/i18n/translations/en.json +++ b/app/modules/i18n/translations/en.json @@ -74,5 +74,14 @@ "Remove from queue": "Remove from queue", "Stop downloading": "Stop downloading", "Copy to phone": "Copy to phone", - "Similar to {{name}}": "Similar to {{name}}" + "Similar to {{name}}": "Similar to {{name}}", + "Filter": "Filter", + "Sorting": "Sorting", + "Default": "Default", + "Popularity": "Popularity", + "Name": "Name", + "Rating": "Rating", + "Released": "Released", + "Year": "Year", + "Added": "Added" } diff --git a/app/modules/i18n/translations/nl.json b/app/modules/i18n/translations/nl.json index 69c4c60..5de8863 100644 --- a/app/modules/i18n/translations/nl.json +++ b/app/modules/i18n/translations/nl.json @@ -72,5 +72,14 @@ "Remove from queue": "Remove from queue", "Stop downloading": "Stop downloading", "Copy to phone": "Copy to phone", - "Similar to {{name}}": "Similar to {{name}}" + "Similar to {{name}}": "Similar to {{name}}", + "Filter": "Filter", + "Sorting": "Sorteren", + "Default": "Standaard", + "Popularity": "Populariteit", + "Name": "Naam", + "Rating": "Beoordeling", + "Released": "Uitgebracht", + "Year": "Jaar", + "Added": "Toegevoegd" }