Created
March 14, 2018 16:32
-
-
Save faddah/d9838508c7302c93c3dd166e32db8b1e to your computer and use it in GitHub Desktop.
My Video Search & Play Project from Stephen Grider's "Modern React With Redux" Udemy Course
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="/style/style.css"> | |
| <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css"> | |
| <script src="https://maps.googleapis.com/maps/api/js"></script> | |
| </head> | |
| <body> | |
| <div class="container"></div> | |
| </body> | |
| <script src="/bundle.js"></script> | |
| </html> |
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, { Component } from 'react' | |
| import ReactDOM from 'react-dom' | |
| import _ from 'lodash' | |
| import YTSearch from 'youtube-api-search' | |
| import SearchBar from './components/search_bar' | |
| import VideoList from './components/video_list' | |
| import VideoDetail from './components/video_detail' | |
| /* Create a new React Component — this Component should render/produce some HTML. */ | |
| const API_KEY = 'AIzaSyBTkpPiwmwEHq7tox6vzbN8p2kzENWerOU' | |
| class App extends Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| videos: [], | |
| selectedVideo: null, | |
| } | |
| this.videoSearch('cute corgi puppies') | |
| } | |
| videoSearch(term) { | |
| YTSearch({ key: API_KEY, term: 'cute corgi puppies' }, videos => { | |
| this.setState({ | |
| videos: videos, | |
| selectedVideo: videos[0] | |
| }) | |
| }) | |
| } | |
| 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> | |
| ) | |
| } | |
| } | |
| /* Take this Component's generated HTML and put it on the page (in the DOM). */ | |
| 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
| class SearchBar extends Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| term: '', | |
| } | |
| } | |
| render() { | |
| return ( | |
| <div className="search-bar"> | |
| <input | |
| placeholder='Type your search term in here.' | |
| value={this.state.term} | |
| onChange={event => this.onInputChange(event.target.value)} | |
| /> | |
| {/* <h4>The Value of the Input is: <span>{this.state.term}</span></h4> */} | |
| </div> | |
| ); | |
| } | |
| onInputChange(term) { | |
| this.setState({ term: term }) | |
| this.props.onSearchTermChange(term) | |
| } | |
| } | |
| export default SearchBar |
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
| .search-bar { | |
| background-color: #ccc; | |
| border: 2px solid #000; | |
| border-radius: .3125rem; | |
| margin: 20px; | |
| padding: .5rem; | |
| text-align: center; | |
| } | |
| .search-bar input { | |
| font-size: 18px; | |
| height: auto; | |
| width: 75%; | |
| } | |
| .search-bar input:placeholder { | |
| color: #AAA; | |
| } | |
| .video-item img { | |
| max-width: 64px; | |
| } | |
| .video-detail .details { | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| height: auto; | |
| margin-top: 10px; | |
| padding: 10px; | |
| } | |
| .list-group-item { | |
| cursor: pointer; | |
| } | |
| .list-group-item:hover { | |
| background-color: lemonchiffon; | |
| } |
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 VideoDetailLabel from './video_detail_label' | |
| 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 className="media-body"> | |
| <div className="media-heading"> | |
| {video.snippet.title} | |
| </div> | |
| </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