Created
November 21, 2017 01:18
-
-
Save jmercedes/043a22ff0101fd44f1dfb58b2045dbc6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import _ from 'lodash'; | |
import React, { Component } from 'react'; | |
import ReactDOM from 'react-dom'; | |
import YTSearch from 'youtube-api-search'; | |
import SearchBar from './components/search_bar'; | |
import VideoList from './components/video_list'; | |
import VideoDetail from './components/video_detail'; | |
const API_KEY = 'AIzaSyD2FMgxtPtxdPh04VEEokZ3PMel76xjJ4g'; | |
class App extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
videos: [], | |
selectedVideo:null | |
}; | |
this.videoSearch('surfboards'); | |
} | |
videoSearch(term) { | |
YTSearch( {key: API_KEY, term: term}, (videos) => { | |
this.setState({ | |
videos: videos, | |
selectedVideo: videos[0] | |
}); // this.setState({ videos }) is equal to this.setState({ videos: videos }) | |
}); | |
} | |
render() { | |
const videoSearch = _.debounce((term) => {this.videoSearch(term)}, 300) | |
return( | |
<div> | |
<SearchBar onSearchTermChange={videoSearch} /> | |
<VideoDetail video={this.state.selectedVideo} /> | |
<VideoList | |
onVideoSelect={selectedVideo => this.setState({selectedVideo})} | |
videos={this.state.videos} /> | |
</div> | |
); | |
} | |
} | |
// Create a react component. This component should produce | |
// some html | |
// Take this component's generated and put it in the page | |
ReactDOM.render(<App />, document.querySelector('.container')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
const VideoDetail = ({video}) => { | |
if (!video) { | |
return <div>Loading...</div>; | |
} | |
const videoId = video.id.videoId; | |
const url = `https://www.youtube.com/embed/${videoId}`; | |
return ( | |
<div className="video-detail col-md-8"> | |
<div className="embed-responsive embed-responsive-16by9"> | |
<iframe className="embed-responsive-item" src={url}></iframe> | |
</div> | |
<div className="details"> | |
<div>{video.snippet.title}</div> | |
<div>{video.snippet.description}</div> | |
</div> | |
</div> | |
); | |
}; | |
export default VideoDetail; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import VideoListItem from './video_list_item'; | |
const VideoList = (props) => { | |
const videoItems = props.videos.map( (video) => { | |
return ( | |
<VideoListItem | |
onVideoSelect={props.onVideoSelect} | |
key={video.etag} | |
video={video} | |
/> | |
); | |
}); | |
return ( | |
<ul className="col-md-4 list-group"> | |
{videoItems} | |
</ul> | |
); | |
}; | |
export default VideoList; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
const VideoListItem = ({video, onVideoSelect}) => { | |
const imageURL = video.snippet.thumbnails.default.url; | |
return ( | |
<li onClick={() => onVideoSelect(video)} className="list-group-item" > | |
<div className="video-list media"> | |
<div className="media-left"> | |
<img className="media-object" src={imageURL} /> | |
</div> | |
<div className="media-body"> | |
<div className="media-heading" >{video.snippet.title}</div> | |
</div> | |
</div> | |
</li> | |
); | |
} | |
export default VideoListItem; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment