full version

Author: lingyun1010

LICENSE.MD

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 Stephen Grider
+Copyright (c) 2018 Lingyun Zhao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -12,10 +12,3 @@ furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,7 +1,5 @@
 # ReduxSimpleStarter
 
-Interested in learning [Redux](https://www.udemy.com/react-redux/)?
-
 ### Getting Started
 
 There are two methods for getting started with this repo.

package-lock.json

@@ -32,6 +32,7 @@
     "react-dom": "^0.14.3",
     "react-redux": "4.3.0",
     "react-router": "^2.0.1",
-    "redux": "^3.0.4"
+    "redux": "^3.0.4",
+    "youtube-api-search": "0.0.5"
   }
 }

package.json

@@ -0,0 +1,30 @@
+import React,  {Component} from 'react';
+
+class SearchBar extends Component {
+
+	constructor(props){
+
+		super(props);
+
+		this.state = {term: ''};
+	}
+
+	render(){
+
+		return (
+			<div className="search-bar">
+				<input 
+				value = {this.state.term}
+				onChange={event => this.onInputChange(event.target.value)}/>
+			</div>
+		);
+	}
+
+	onInputChange(term){
+		this.setState({term});
+		this.props.onSearchTermChange(term);
+
+	}
+}
+
+export default SearchBar;

src/components/app.js

@@ -0,0 +1,25 @@
+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;

src/components/search_bar.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import VideoListItem from './video_list_item';
+
+class VideoList extends Component{
+
+	constructor(props){
+
+		super(props);
+
+		this.state = {term: 'search'};
+	}
+	
+	
+
+	render(){
+		const videoItems = this.props.videos.map((video)=>{
+			return (
+				<VideoListItem 
+				onVideoSelect= {this.props.onVideoSelect}
+				key={video.etag} 
+				video={video} />
+
+			);
+		});
+
+		return(
+			
+			<ul className = "col-md-4 list-group">
+			{videoItems}
+			</ul>
+			
+		);
+	}
+}
+
+export default VideoList;

src/components/video_detail.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+const VideoListItem = ({video, onVideoSelect}) =>{
+	//const video = props.video;
+	const imgUrl = 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={imgUrl} />
+				</div>
+				<div className="media-body">
+					<div className="media-heading">{video.snippet.title} </div>
+				</div>
+		 </div>
+
+		</li>
+
+	);
+}
+
+export default VideoListItem;

src/components/video_list.js

@@ -0,0 +1,28 @@
+.search-bar{
+	margin: 20px;
+	text-align: center;
+}
+
+.search-bar input{
+	width: 75%;
+}
+
+.video-item img{
+	max-width: 64px;
+}
+
+.video-detail .details{
+	margin-top: 10px;
+	padding: 10px;
+	border: 1px solid #ddd；
+	border-radius: 4px;
+}
+
+.list-group-item{
+	cursor: pointer;
+}
+
+.list-group-item:hover{
+
+	background-color: #eee;
+}