Verified Commit fbefc59e authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Use other zoom viewer library

parent 633dab8c
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import PhotoView from '../../../../app/ui/screens/photos/PhotoView'; import PhotoListItem from '../../../../app/ui/screens/photos/PhotoListItem';
describe('PhotoView component', () => { describe('PhotoView component', () => {
const photo = { const photo = {
...@@ -17,7 +17,7 @@ describe('PhotoView component', () => { ...@@ -17,7 +17,7 @@ describe('PhotoView component', () => {
it('renders correctly', () => { it('renders correctly', () => {
const tree = renderer const tree = renderer
.create(<PhotoView onPress={() => {}} photo={photo} size={20} token="token" />) .create(<PhotoListItem onPress={() => {}} photo={photo} size={20} token="token" />)
.toJSON(); .toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Dimensions, FlatList, TouchableOpacity, View } from 'react-native'; import {
import Gallery from 'react-native-image-gallery'; Dimensions, FlatList, TouchableOpacity, View,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import { STATUS_FAILURE, STATUS_INITIAL } from '../../../reducers/photos'; import { STATUS_FAILURE, STATUS_INITIAL } from '../../../reducers/photos';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import styles from './style/AlbumDetail'; import styles from './style/AlbumDetailScreen';
import PhotoView from './PhotoView'; import PhotoListItem from './PhotoListItem';
import PhotoViewContainer from './PhotoViewContainer'; import PhotoViewContainer from './PhotoListItemContainer';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
import StandardHeader from '../../components/standardHeader/StandardHeader'; import StandardHeader from '../../components/standardHeader/StandardHeader';
...@@ -16,6 +18,15 @@ const windowWidth = Dimensions.get('window').width; ...@@ -16,6 +18,15 @@ const windowWidth = Dimensions.get('window').width;
export const itemSize = (windowWidth - 48) / 3; export const itemSize = (windowWidth - 48) / 3;
class AlbumDetailScreen extends Component { class AlbumDetailScreen extends Component {
constructor(props) {
super(props);
this.state = {
gallery: [],
selection: null,
};
}
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(nextProps, prevState) {
const { token, photos } = nextProps; const { token, photos } = nextProps;
const gallerySources = []; const gallerySources = [];
...@@ -23,18 +34,16 @@ class AlbumDetailScreen extends Component { ...@@ -23,18 +34,16 @@ class AlbumDetailScreen extends Component {
const keys = Object.keys(photos); const keys = Object.keys(photos);
for (let i = 0; i < keys.length; i += 1) { for (let i = 0; i < keys.length; i += 1) {
const photo = photos[i]; const photo = photos[i];
gallerySources.push({ if (!photo.hidden) {
source: { gallerySources.push({
uri: photo.file.large, url: photo.file.large,
headers: { props: {
Authorization: `Token ${token}`, headers: {
Authorization: `Token ${token}`,
},
}, },
}, });
dimensions: { }
height: 1080,
width: 1920,
},
});
} }
} }
...@@ -44,15 +53,6 @@ class AlbumDetailScreen extends Component { ...@@ -44,15 +53,6 @@ class AlbumDetailScreen extends Component {
}; };
} }
constructor(props) {
super(props);
this.state = {
gallery: [],
selection: null,
};
}
openGallery(index) { openGallery(index) {
this.setState({ selection: index }); this.setState({ selection: index });
} }
...@@ -62,14 +62,16 @@ class AlbumDetailScreen extends Component { ...@@ -62,14 +62,16 @@ class AlbumDetailScreen extends Component {
} }
render() { render() {
const { t, fetching, status, photos } = this.props; const {
t, fetching, status, photos,
} = this.props;
let content = ( let content = (
<View style={styles.wrapper}> <View style={styles.wrapper}>
<FlatList <FlatList
style={styles.flatList} style={styles.flatList}
contentContainerStyle={styles.listContainer} contentContainerStyle={styles.listContainer}
data={photos} data={photos.filter(p => !p.hidden)}
renderItem={ renderItem={
data => ( data => (
<PhotoViewContainer <PhotoViewContainer
...@@ -98,26 +100,16 @@ class AlbumDetailScreen extends Component { ...@@ -98,26 +100,16 @@ class AlbumDetailScreen extends Component {
return ( return (
<View style={styles.screenWrapper}> <View style={styles.screenWrapper}>
<View style={styles.galleryWrapper}> <View style={styles.galleryWrapper}>
<Gallery <ImageViewer
initialPage={this.state.selection} index={this.state.selection}
style={styles.gallery} imageUrls={this.state.gallery}
images={this.state.gallery}
flatListProps={{
initialNumToRender: 20,
initialScrollIndex: this.state.selection,
getItemLayout: (data, index) => ({
length: Dimensions.get('screen').width,
offset: Dimensions.get('screen').width * index,
index,
}),
}}
/> />
<TouchableOpacity <TouchableOpacity
style={styles.closeGalleryTouchable} style={styles.closeGalleryTouchable}
onPress={() => this.closeGallery()} onPress={() => this.closeGallery()}
> >
<Icon <Icon
name={'close'} name="close"
style={styles.icon} style={styles.icon}
size={24} size={24}
color={Colors.white} color={Colors.white}
...@@ -140,7 +132,7 @@ class AlbumDetailScreen extends Component { ...@@ -140,7 +132,7 @@ class AlbumDetailScreen extends Component {
AlbumDetailScreen.propTypes = { AlbumDetailScreen.propTypes = {
fetching: PropTypes.bool.isRequired, fetching: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired, status: PropTypes.string.isRequired,
photos: PropTypes.arrayOf(PhotoView.propTypes.photo), photos: PropTypes.arrayOf(PhotoListItem.propTypes.photo),
// eslint-disable-next-line react/no-unused-prop-types // eslint-disable-next-line react/no-unused-prop-types
token: PropTypes.string.isRequired, token: PropTypes.string.isRequired,
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
......
...@@ -5,7 +5,7 @@ import { ...@@ -5,7 +5,7 @@ import {
} from 'react-native'; } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import Moment from 'moment/moment'; import Moment from 'moment/moment';
import PhotoView from './PhotoView'; import PhotoListItem from './PhotoListItem';
import styles from './style/AlbumListItem'; import styles from './style/AlbumListItem';
import SquareView from '../../components/memberView/SquareView'; import SquareView from '../../components/memberView/SquareView';
...@@ -52,7 +52,7 @@ AlbumListItem.propTypes = { ...@@ -52,7 +52,7 @@ AlbumListItem.propTypes = {
shareable: PropTypes.bool.isRequired, shareable: PropTypes.bool.isRequired,
accessible: PropTypes.bool.isRequired, accessible: PropTypes.bool.isRequired,
hidden: PropTypes.bool.isRequired, hidden: PropTypes.bool.isRequired,
cover: PropTypes.shape(PhotoView.propTypes.photo), cover: PropTypes.shape(PhotoListItem.propTypes.photo),
}).isRequired, }).isRequired,
openAlbum: PropTypes.func.isRequired, openAlbum: PropTypes.func.isRequired,
token: PropTypes.string.isRequired, token: PropTypes.string.isRequired,
......
...@@ -5,7 +5,7 @@ import { STATUS_FAILURE, STATUS_INITIAL } from '../../../reducers/photos'; ...@@ -5,7 +5,7 @@ import { STATUS_FAILURE, STATUS_INITIAL } from '../../../reducers/photos';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import AlbumListItem from './AlbumListItem'; import AlbumListItem from './AlbumListItem';
import styles from './style/AlbumsOverview'; import styles from './style/AlbumsOverviewScreen';
import AlbumListItemContainer from './AlbumListItemContainer'; import AlbumListItemContainer from './AlbumListItemContainer';
import { withStandardHeader } from '../../components/standardHeader/StandardHeader'; import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
......
...@@ -2,9 +2,9 @@ import React from 'react'; ...@@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Image, TouchableHighlight, ViewPropTypes } from 'react-native'; import { Image, TouchableHighlight, ViewPropTypes } from 'react-native';
import SquareView from '../../components/memberView/SquareView'; import SquareView from '../../components/memberView/SquareView';
import styles from './style/PhotoView'; import styles from './style/PhotoListItem';
const PhotoView = props => ( const PhotoListItem = props => (
<TouchableHighlight <TouchableHighlight
style={styles.touchable} style={styles.touchable}
onPress={() => props.onPress()} onPress={() => props.onPress()}
...@@ -17,13 +17,20 @@ const PhotoView = props => ( ...@@ -17,13 +17,20 @@ const PhotoView = props => (
Authorization: `Token ${props.token}`, Authorization: `Token ${props.token}`,
}, },
}} }}
style={[styles.image, { width: props.size, height: props.size }]} style={[
styles.image,
{
width: props.size,
height: props.size,
transform: [{ rotate: `${props.photo.rotation}deg` }],
},
]}
/> />
</SquareView> </SquareView>
</TouchableHighlight> </TouchableHighlight>
); );
PhotoView.propTypes = { PhotoListItem.propTypes = {
size: PropTypes.number.isRequired, size: PropTypes.number.isRequired,
style: ViewPropTypes.style, style: ViewPropTypes.style,
photo: PropTypes.shape({ photo: PropTypes.shape({
...@@ -43,8 +50,8 @@ PhotoView.propTypes = { ...@@ -43,8 +50,8 @@ PhotoView.propTypes = {
onPress: PropTypes.func.isRequired, onPress: PropTypes.func.isRequired,
}; };
PhotoView.defaultProps = { PhotoListItem.defaultProps = {
style: {}, style: {},
}; };
export default PhotoView; export default PhotoListItem;
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PhotoView from './PhotoView'; import PhotoListItem from './PhotoListItem';
import { tokenSelector } from '../../../utils/url'; import { tokenSelector } from '../../../utils/url';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
token: tokenSelector(state), token: tokenSelector(state),
}); });
export default connect(mapStateToProps)(PhotoView); export default connect(mapStateToProps)(PhotoListItem);
...@@ -39,7 +39,4 @@ export default StyleSheet.create({ ...@@ -39,7 +39,4 @@ export default StyleSheet.create({
marginRight: 8, marginRight: 8,
marginBottom: 8, marginBottom: 8,
}, },
gallery: {
flex: 1,
},
}); });
...@@ -3,7 +3,7 @@ import DeviceInfo from 'react-native-device-info'; ...@@ -3,7 +3,7 @@ import DeviceInfo from 'react-native-device-info';
let server = 'https://thalia.nu'; let server = 'https://thalia.nu';
/* istanbul ignore next line */ /* istanbul ignore next line */
if (__DEV__) { // eslint-disable-line no-undef if (__DEV__) { // eslint-disable-line no-undef
server = 'http://localhost:8000'; // server = 'http://localhost:8000';
} }
export const url = server; export const url = server;
......
...@@ -6805,7 +6805,7 @@ prompts@^2.0.1: ...@@ -6805,7 +6805,7 @@ prompts@^2.0.1:
kleur "^3.0.2" kleur "^3.0.2"
sisteransi "^1.0.0" sisteransi "^1.0.0"
prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2" version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
...@@ -6952,14 +6952,6 @@ react-lifecycles-compat@^3.0.4: ...@@ -6952,14 +6952,6 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-mixin@^3.0.5:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-mixin/-/react-mixin-3.1.1.tgz#68749756bfe32699e561372a4aeecb926db72b7f"
integrity sha512-z9fZ0aCRDjlgxLdMeWkJ9TwhmVLhQ09r8RFpin/cEPA2T6jsb7YHNWcIe0Oii+hhJNyMymdy91CSya5mRkuCkg==
dependencies:
object-assign "^4.0.1"
smart-mixin "^2.0.0"
react-native-device-info@2.1.2: react-native-device-info@2.1.2:
version "2.1.2" version "2.1.2"
resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.1.2.tgz#5c553498e8930410aa65796b83f8f8c8fb9893b4" resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.1.2.tgz#5c553498e8930410aa65796b83f8f8c8fb9893b4"
...@@ -7028,6 +7020,16 @@ react-native-image-gallery@^2.1.5: ...@@ -7028,6 +7020,16 @@ react-native-image-gallery@^2.1.5:
react-mixin "^3.0.5" react-mixin "^3.0.5"
react-timer-mixin "^0.13.3" react-timer-mixin "^0.13.3"
react-native-image-pan-zoom@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.8.tgz#2f8d8459a6f56b897b53222649e1225d8fc6e5ee"
react-native-image-zoom-viewer@^2.2.15:
version "2.2.15"
resolved "https://registry.yarnpkg.com/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.15.tgz#186734ea25473fd1c15202a157adf53fb8fa8fb6"
dependencies:
react-native-image-pan-zoom "^2.1.8"
react-native-linear-gradient@2.5.4: react-native-linear-gradient@2.5.4:
version "2.5.4" version "2.5.4"
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.4.tgz#dce133526f5a5510a639af94544f1ed0c984bd1e" resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.4.tgz#dce133526f5a5510a639af94544f1ed0c984bd1e"
...@@ -7213,11 +7215,6 @@ react-test-renderer@16.8.6: ...@@ -7213,11 +7215,6 @@ react-test-renderer@16.8.6:
react-is "^16.8.6" react-is "^16.8.6"
scheduler "^0.13.6" scheduler "^0.13.6"
react-timer-mixin@^0.13.3:
version "0.13.4"
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
react-transform-hmr@^1.0.4: react-transform-hmr@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb" resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
...@@ -7920,11 +7917,6 @@ slide@^1.1.5: ...@@ -7920,11 +7917,6 @@ slide@^1.1.5:
resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707" resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc= integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
smart-mixin@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/smart-mixin/-/smart-mixin-2.0.0.tgz#a34a1055e32a75b30d2b4e3ca323dc99cb53f437"
integrity sha1-o0oQVeMqdbMNK048oyPcmctT9Dc=
snapdragon-node@^2.0.1: snapdragon-node@^2.0.1:
version "2.1.1" version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment