neminem1203/me-cube

YouTube Clone

Me Cube

This is a clone of YouTube. This site allows you to view and upload videos if you're signed in.

AWS

AWS allowed me to upload videos, thumbnails, and profile pictures. With the AWS and ActiveStorage, I was able to attach the files to the related model and retrieve the url when necessary.

---

Features

Channel

One of the features I had the most issues with was channel. I used the model to give me an array of the users videos and pass it in when getting the user from the database. I used a component that I previously made called VideoList and added a new conditional that when passed in an array via this.props.filter, we would use the array passed in return a list of react components which contains the videos thumbnails, and essential information (views not working currently).

Video Show

The Video Show Page was the most difficult because it has a bunch of different features with some specific styling choices. I made it so the editting of the video is built in. The way we retrieved videos in Channel is also the way we retrieve comments on this page. Recommendations is just a VideoList with a limited width. Because it has flex-wrap: wrap in it's CSS, it allowed the list to be displayed vertically.

---

Code

VideoList

if(this.props.filter === undefined){
	const random_order = Object.values(this.props.videos);
	const video_len = random_order.length;
	for(let i = 0; i < video_len; i++){
		const random_num = Math.floor(Math.random()*video_len)
		const temp = random_order[random_num];
		random_order[random_num] = random_order[i];
		random_order[i] = temp;
	}
	const theVideos = (this.props.limit) ? random_order.slice(0, this.props.limit) : random_order;
	return(
		<ul className="video-list">
			{theVideos.map(vid => <VideoThumb vid={vid} key={`video-${vid.id}`} currentVideo={this.props.currentVideo}/>)}
		</ul>
)} else {
	const videos = this.props.filter.map(vidId => {
		return <VideoThumb vid={this.props.videos[vidId]} key={`video-${vidId}`} />
	})
	return(
		<ul className="video-list">
			{videos}
		</ul>
	)
}

In this code, I have a bunch of different things going on. this.props.filter is an optional argument (Array).

If it's defined, we would go to line 26 and render all the videos passed in (this implementation is for the channels page).

If it's undefined, we would get all the videos inside this.props.videos (which is all the videos in the store) and randomly mix it up. If we are given a limit passed in via this.props.limit we will slice the first n elements (n being the number passed in by this.props.limit and then return a ul with the videos as list elements. (This feature is used for the front page)

VideoShow

// like and comment functionality for signed in users
let likeFnc = this.thumbAction(true);
let dislikeFnc = this.thumbAction(false);
let commentFnc = this.createComment;
if (this.props.currentUser === null){
	likeFnc = this.props.showSignup;
	dislikeFnc = this.props.showSignup;
	commentFnc = this.props.showSignup;
}

This is another code snippet. This may be simple, but most of my application has conditionals so I think this encapsulates most of my application and how it functions. Usually, a user like, dislike, and create a comment to a video. However, we check if they're logged in with this.props.currentUser which just grabs the userId of whoever is logged in. However, if this.props.currentUser is null, we set it so clicking any of the buttons previously mentioned would instead do this.props.showSignup, which displays the Signup modal.

me-cube's Issues

Code Review 02/13/19

Hey Paul, project is looking good! A few comments below:

1. Reformat the sign in button to look more like that of the real site
2. Looks like YouTube redirects to a new url when clicking the signup button, perhaps consider doing the same
3. Once logged in, for the little account menu, make sure the labels are centered and are all the same size ("Your Channel" is larger than the rest)
4. After signing up, I am unable to logout; there are errors present in the console

Keep up the great progress!

Code / Style Review

Hey Paul, great progress on the app, it's looking awesome. A few comments below:

1. Consider resizing the upload and profile icons in the top righthand corner of the window, particularly the profile icon
2. When I click on the profile icon and see the dropdown, it might look a bit cleaner if it were shifted down a few more pixels so that it's not touching the profile icon itself
3. When I click on "Your Channel" in the profile dropdown menu, the app errors out
4. Consider tweaking the positioning of the elements on the "Your Account" page from the dropdown; as it currently stands, it seems a bit unorganized
5. The profile dropdown should close automatically if I click somewhere else on the page; the user should have to manually close it
6. I'd consider tweaking the formatting / positioning of elements on the upload page, it looks a bit bare as it currently stands

Overall, this is coming along really great. Keep it up Paul!