From da8010307502952c19d9592e1ca5cdc528055b0e Mon Sep 17 00:00:00 2001 From: Tycho Bokdam Date: Thu, 29 Nov 2018 19:15:36 +0100 Subject: [PATCH] feat(#13): Added quality selector before playing movies / episodes --- android/app/build.gradle | 7 +- app/components/IconButton/IconButton.js | 2 +- app/modules/db/Bookmarks.js | 2 +- app/screens/Item/Cover/Cover.js | 2 +- app/screens/Item/Episode/Episode.js | 4 +- app/screens/Item/ItemScreen.js | 42 ++++-- .../Item/QualitySelector/QualitySelector.js | 124 ++++++++++++++++++ app/screens/Item/QualitySelector/index.js | 1 + app/screens/Mode/ModeScreen.js | 6 +- app/screens/index.js | 4 +- 10 files changed, 172 insertions(+), 22 deletions(-) create mode 100644 app/screens/Item/QualitySelector/QualitySelector.js create mode 100644 app/screens/Item/QualitySelector/index.js diff --git a/android/app/build.gradle b/android/app/build.gradle index bd92b66..a833f9b 100644 --- a/android/app/build.gradle +++ b/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" diff --git a/app/components/IconButton/IconButton.js b/app/components/IconButton/IconButton.js index b4ab3f4..f8335db 100644 --- a/app/components/IconButton/IconButton.js +++ b/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' diff --git a/app/modules/db/Bookmarks.js b/app/modules/db/Bookmarks.js index cc9434f..c757456 100644 --- a/app/modules/db/Bookmarks.js +++ b/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 } diff --git a/app/screens/Item/Cover/Cover.js b/app/screens/Item/Cover/Cover.js index 6e0be9c..cb800b7 100644 --- a/app/screens/Item/Cover/Cover.js +++ b/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' diff --git a/app/screens/Item/Episode/Episode.js b/app/screens/Item/Episode/Episode.js index e04465c..d562fcd 100644 --- a/app/screens/Item/Episode/Episode.js +++ b/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} /> diff --git a/app/screens/Item/ItemScreen.js b/app/screens/Item/ItemScreen.js index 069661b..1ce17fd 100644 --- a/app/screens/Item/ItemScreen.js +++ b/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 ( - + {item && item.summary && ( @@ -148,7 +167,7 @@ export default class Item extends React.Component { @@ -177,7 +196,7 @@ export default class Item extends React.Component { this.getAiredEpisodes().map(episode => ( )) )} @@ -186,6 +205,11 @@ export default class Item extends React.Component { + + ) } diff --git a/app/screens/Item/QualitySelector/QualitySelector.js b/app/screens/Item/QualitySelector/QualitySelector.js new file mode 100644 index 0000000..05c7f06 --- /dev/null +++ b/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 ( + + + {qualities && ( + + + + + + {qualities.map((quality) => ( + this.playQuality(quality)}> + + {quality} + + + ))} + + )} + + + ) + } + +} diff --git a/app/screens/Item/QualitySelector/index.js b/app/screens/Item/QualitySelector/index.js new file mode 100644 index 0000000..3baef9b --- /dev/null +++ b/app/screens/Item/QualitySelector/index.js @@ -0,0 +1 @@ +export { default } from './QualitySelector' diff --git a/app/screens/Mode/ModeScreen.js b/app/screens/Mode/ModeScreen.js index 19fb0a7..0849e3d 100644 --- a/app/screens/Mode/ModeScreen.js +++ b/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> diff --git a/app/screens/index.js b/app/screens/index.js index 63fc557..a37249a 100644 --- a/app/screens/index.js +++ b/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 }) => (