Как я могу заменить миниатюру на видео по клику и запустить воспроизведение на мобильном телефоне? - PullRequest
Новая
       16

Как я могу заменить миниатюру на видео по клику и запустить воспроизведение на мобильном телефоне?

0 голосов
/ 12 февраля 2019

Я знаю, что существует несколько тем на эту тему, но я не могу найти "настоящий" ответ ....

Прежде всего, я работаю над React JS и я новичок;) СAPI YouTube, я отобразил элементы в объекте JSON для отображения миниатюр видео на карточках.В режиме рабочего стола, когда я нажимаю на миниатюру, запускается модальное видео.Но на мобильном устройстве у меня есть 2 проблемы ..... Я хочу, в то же время, заменить (может быть, заменить с, и видео-данные могут быть полезны ...) миниатюру на видео, которое соответствует, и я хочу, чтобы вызватьавтозапуск и полноэкранный режим ..... я не знаю, возможна ли вторая часть .... Несмотря на мои исследования, я все еще не знаю, смогу ли я обойти этот мобильный блок .... Большое спасибо за ответыи советы :)

Вот мой код ниже: 

import React, { Component } from 'react'
import axios from 'axios';
import posed from 'react-pose';
import ReactPlayer from 'react-player';
import { Card, CardImg, Col, Row, CardTitle, Modal, ModalBody, ModalHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import './videos.css'

const Box = posed.div({
  hidden: { opacity: 0 },
  visible: { opacity: 1 }
});

class Videos extends Component {
  constructor () {
    super();
    this.state = {
      isVisible : true,
      videos: [],
      resultsDatas: "",
      nextPage: "",
      previousPage: "",
      videoId: "",
      search: "",
      playing: false,
      modal : false,
      clickedVideoId: "",
      clickedVideoTitle: ""
    }
  }

componentDidMount() {
  axios.get('https://www.googleapis.com/youtube/v3/playlistItems?key=......API KEY........&playlistId=PL3-4jitn5YqtnR_mrYoz_Qb0z7frXZcW6&type=video&showinfo=0&iv_load_policy=3&part=snippet,id&order=date&maxResults=24')
  .then((result) => { 
    this.setState({
      videos: result.data.items,
      resultsDatas: result.data,
      nextPage: result.data.nextPageToken});
      console.log(this.state.videos);


    }
  )

  setTimeout(() => {this.setState({ isVisible: !this.state.isVisible }); 
  }, 400);

}


nextPage = () => {
  axios.get(`https://www.googleapis.com/youtube/v3/playlistItems?key=......API KEY........&playlistId=PL3-4jitn5YqtnR_mrYoz_Qb0z7frXZcW6&type=video&part=snippet,id&order=date&maxResults=24&pageToken=${this.state.nextPage}`)
  .then((result) => { 
    this.setState({
      nextPage: result.data.nextPageToken,
      previousPage: result.data.prevPageToken,
      videos: result.data.items,
      resultsDatas: result.data
    });
  })
}

previousPage = () => {
  axios.get(`https://www.googleapis.com/youtube/v3/playlistItems?key=......API KEY........&playlistId=PL3-4jitn5YqtnR_mrYoz_Qb0z7frXZcW6&type=video&part=snippet,id&order=date&maxResults=24&pageToken=${this.state.previousPage}`)
  .then((result) => { 
    this.setState({
      nextPage: result.data.nextPageToken,
      previousPage: result.data.prevPageToken,
      videos: result.data.items,
      resultsDatas: result.data});
  })
}

//For search function
inputChange = (event) => {
  this.setState({search: event.target.value })
}


playPause = (index) => {
  let element = document.getElementById(`play-pause${index}`);
  if (element.requestFullscreen) {
    this.setState({playing: !this.state.playing})
  }
}

toggleModal = () => {
  this.setState({
    modal: !this.state.modal
  });
}

onThumbnailClick = (index) => {
  this.setState({
    clickedVideoId: this.state.videos[index].snippet.resourceId.videoId,
    clickedVideoTitle: this.state.videos[index].snippet.title
  }) 
  var windowWidth = window.innerWidth;
  if(windowWidth > 768){
    this.toggleModal()
  } 
}

  render() {
    let mapedVideos = this.state.videos.filter(
      (item) => {
        return item.snippet.title.toLowerCase().indexOf(this.state.search) !==-1;
      }
    );

    return (
      <div>
        {/* <Row className="search-pages-bar pt-3 d-flex justify-content-center">
          <Pagination>
              <PaginationItem onClick={this.previousPage}>
                <PaginationLink previous href="#"/>
              </PaginationItem>
              <PaginationItem onClick={this.nextPage}>
                <PaginationLink next href="#"/>
              </PaginationItem>
            </Pagination>
        </Row> */}
        <Box pose={this.state.isVisible ? 'hidden' : 'visible'}>
        <Row className="custom-videos-row mb-5">
          {mapedVideos.map((item, index) => {
                  this.state.videos.map((item) => {
                    if(item.snippet.title.length > 38) {
                      return (item.snippet.title=`${item.snippet.title.slice(0,37)}... `);
                    }
                    })
            return (
              <Col className="custom-videos-col" lg="3" md="4" sm="6" key={index}> 
                <Card className="card-wrapper" onClick={() => {this.onThumbnailClick(index)}}>
                  <CardImg className="video-thumbnail" src={item.snippet.thumbnails.medium.url} alt="thumb"></CardImg>
                  <CardTitle className="video-card-title pl-2"><img className="play-picto" src={process.env.PUBLIC_URL + '/images/play_L.png'} alt="play-picto"/>{item.snippet.title}
                  </CardTitle>
                </Card>
              </Col>
            );
            })}
            <Modal className="video-modal" role="dialog" isOpen={this.state.modal}  toggle={this.toggleModal}>
              <ModalHeader  className="custom-modal-header" toggle={this.toggleModal}>
                <img src={process.env.PUBLIC_URL + './images/logo.png'} alt="La Baule TV logo" className="LBTV-logo"></img>
                <span className="ml-2">{this.state.clickedVideoTitle}</span></ModalHeader>
                <ModalBody>
                <ReactPlayer className="video-player"
                          url={`https://www.youtube.com/watch?v=${this.state.clickedVideoId}`}
                          playing= {true}
                          config={{
                            youtube: {
                              playerVars: { 
                                modestbranding: 1,
                                controls: 1,
                                rel: 0
                              }
                            }}}
                          />
                  </ModalBody>
              </Modal>
        </Row>
        </Box>
      </div>
    )
  }
}

export default Videos;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...