DiscoverPlaces Raport #9 – podgląd zdjęć i filmów

Czas na raport numer 9 odnośnie tworzenia projektu DiscoverPlaces, a w nim tworzenie podglądu zdjęć i filmów, poprawione odświeżanie wiadomości oraz drobne zmiany w backendzie.

Zmiany w backendzie

Po stronie API została zmieniona jedynie kolejność zwracania wiadomości oraz komentarzy, tak aby najnowsze zawsze były u góry. Co zostało zmienione można znaleźć tutaj Commit #1b2a505. Dzięki skonfigurowanemu CI (Travis CI) taka zmiana trwała dosłownie kilka sekund, kwestia dopisania dwóch linijek, utworzenia commita i push do mastera, a reszta wykonała się automatycznie i można było wracać do pracy nad aplikacją mobilną.

Poprawione odświeżanie wiadomości

Wersja z poprzedniego raportu przy odświeżaniu wiadomości zamykała rozwiniętą już listę wiadomości, a to dlatego, że były one po prostu nadpisywane przy ponownym pobieraniu. Teraz dodana została poniższa metoda:

updateMessages (messages) {
    messages.forEach(message => {
      const existingMessage = this.state.messages.find(item => item.id === message.id);
      if (existingMessage) {
        message.showComments = existingMessage.showComments;
      }
    });

    this.setState({
      messages: messages
    });
  }

Ta metoda ma za zadanie sprawdzić przy aktualizacji wiadomości, czy któraś z nich miała otwarte komentarze i jeśli miała to po prostu ten stan jest ponownie ustawiany w nowej kolekcji obiektów.

Podgląd zdjęć i filmów

Zarówno wiadomość jak i komentarz może zawierać zdjęcie lubi film, dlatego też postanowiłem zrobić możliwość „podglądu”, tak aby można je było powiększyć, obejrzeć.

Component odpowiedzialny za podgląd zdjęć:

import React, { Component } from 'react';
import { Modal, View } from 'react-native';
import { Button } from 'react-native-elements';
import FitImage from 'react-native-fit-image';

export default class ImagePreviewModal extends Component
{
  constructor(props) {
    super(props);
    this.state = {
      show: props.show,
      image: props.image,
      onHide: props.onHide
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      show: nextProps.show,
      image: nextProps.image,
      onHide: nextProps.onHide
    });
  }

  render () {
    return (
      <Modal
        animationType={'slide'}
        transparent={false}
        visible={this.props.show}
        onRequestClose={() => {
          console.log('Image Modal has been closed.');
        }}
      >
       <View style={{margin:0}}>
         <Button
           buttonStyle={{
             position: 'absolute',
             top: 0,
             right: 0,
             zIndex: 9999
           }}
           title="Close"
           icon={{name: 'window-close-o', type: 'font-awesome'}}
           backgroundColor="red"
           onPress={() => this.state.onHide()}
         />
         <FitImage
           resizeMode="contain"
           source={this.state.image}
         />
       </View>
      </Modal>
    );
  }
}

Component odpowiedzialny za wyświetlanie odtwarzacza wideo:

import React, { Component } from 'react';
import { Modal, View } from 'react-native';
import { Button } from 'react-native-elements';
import VideoPlayer from 'react-native-video-player';

export default class VideoPreviewModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: props.show,
      video: props.video,
      onHide: props.onHide
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      show: nextProps.show,
      video: nextProps.video,
      onHide: nextProps.onHide
    });
  }

  render () {
    return (
      <Modal
        animationType={'slide'}
        transparent={false}
        visible={this.props.show}
        onRequestClose={() => {
          console.log('Modal has been closed.');
        }}
      >
       <View style={{margin:0}}>
         <Button
           buttonStyle={{
             position: 'absolute',
             top: 0,
             right: 0,
             zIndex: 9999
           }}
           title="Close"
           icon={{name: 'window-close-o', type: 'font-awesome'}}
           backgroundColor="red"
           onPress={() => this.state.onHide()}
         />
        <VideoPlayer
          video={this.state.video}
          resizeMode="cover"
        />
       </View>
      </Modal>
    );
  }
}

Cały kod można znaleźć na githubie.

Dodatkowe paczki jakie zostały użyte:

• react-native-fit-image – ułatwia wstawienie responsywnego obrazka
• react-native-video – odtwarzanie wideo
• react-native-video-player – odtwarzacz wideo

Jak to obecnie wygląda?

 

Obecnie wszystkie elementy są wstawione po prostu z react-native-elements, bez przejmowania się jak to wygląda, jedynie ma działać. Dopiero na koniec planuję stworzyć jakiś znośny wygląd.

Podczas nagrywania zauważyłem bug, a mianowicie gdy otworze wideo i później przejdę do podglądu zdjęcia to brakuje przycisku Close.

Dalsze plany

W kolejnych dniach pracował będę nad dodawaniem nowych wiadomości. Do następnego!

 

DiscoverPlacesdspmodalreact-native