README

NetClips

NetClips is a clone of the popular video streaming service Netflix.

This project was designed and built in under two weeks.

You can find it here!

Technologies Used

• Ruby on Rails -v 5.2.3

• Javascript

• HTML

• SCSS

• PostgreSQL

Libraries used:

• React.js

• Redux

• JQuery

• React-Player

• BCrypt

Login/Signup

The login/signup screen features fully functional frontend and backend user authentication. User passwords are salted and hashed using the Ruby gem 'Bcrypt'.

Home Page

The Home page features the use of the 'React-Player' api, as well as advanced css styling techniques such as transitions and animations.

Hover Animation

The row and hovered video shift and resize as you navigate the page.

Dropdown Content

On dropdown, the selected videos information is displayed as well as a preview.

Making the Dropdown

The dropdown content is divided into three parts, the left info box, the video preview on the right, and the divider in the middle to transition between the two halves.

<div className='drop-content'>
  <div className='drop-background'>
    <div className='left'></div>
    <div className='right'>
      <ReactPlayer
        className='drop-movie'
        url={this.state.currentMovie.video_url}
        playing={true}
        controls={false}
        width={'68vw'}
        height={'42vw'}
        loop={false}
        volume={0}
        muted={true}
      />
    <div className='right-X' onClick={this.hideResults}>X</div>
  </div>
</div>

Gradient

The SCSS below is my solution to seamlessly connecting the content and the video player.

.left {
  background: black;
  color: white;
  width: 30%;
  position: relative;
}

.left:before {
  content: '';
  position: absolute;
  background-image: linear-gradient(to right,#000, transparent);
  top: 0;
  bottom: 0;
  left: 100%;
  width: 275px;
  z-index: 1;
}

.right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

Dropdown Content Position

I ran into the problem of having the dropdown content appear in a different location depending on which row the selected film was located in. This was my solution.

First I defined what the Movie dropdown would look like.

const MovieShow = (this.state.showResults) ? (
      
      <div className='drop-content'>
        <div className='drop-background'>
          <div className='left'></div>
          <div className='right'>

Next I set a new variable equal to MovieShow depending on the selected movies genre.

if (this.state.currentMovie) {
  if (this.state.currentMovie.genres === ('TV Comedy')) {
    this.MovieShow1 = MovieShow;
  } else if (this.state.currentMovie.genres === ('Sci-Fi & Fantasy')) {
    this.MovieShow2 = MovieShow;
  } else if(this.state.currentMovie.genres === ('Drama')) {
    this.MovieShow3 = MovieShow;
  } else if(this.state.currentMovie.genres === ('Critically Acclaimed' {
    this.MovieShow4 = MovieShow;
  }
}

Finally, each MovieShow variable is rendered directly underneath their respective genre. The MovieShow for the current film will render the dropdown content while the rest will render empty div tags.

<div className='genre-div'>     
  <ul className='movie-ul'>
    <div>
      <h3 className='genre-title'>TV Comedy</h3>
    </div>
    <div className='movie-lis'>
    {
      tv_comedy.map( movie => (
        <MovieItem
        key={movie.id}
        movie={movie}
        that={this}
        state={this.state}
        />
      ))
    }
    </div>
  </ul>
  <div>
    {this.MovieShow1}
  </div>
</div>