In this article, we will make a basic application that looks for any film/web series trailers. We will utilize 'film trailer' npm bundle to discover such URLs and show the substance utilizing another npm bundle called 'respond player'.
Prerequisites: The pre-requisites for this project are:
- React.
- React Hooks.
- JavaScript ES6.
- React Axios & API
- Functional Components
Approach: Our application contains two areas i.e a part for taking the client input and the other for showing the video. At whatever point a client looks for a video, we will store that inside a state variable and at whatever point a client taps on the hunt button we will consider a capacity that will get the necessary video URL and store it in another state variable. Presently we have the necessary URL, we will essentially deliver that video utilizing the 'ReactPlayer' segment.
Creating React app and installing module:
Step 1: Create a react application by typing the following command in the terminal:
npx create-react-app movie-app
Step 2: Now, go to the project folder i.e movie-app by running the following command:
cd movie-app
Step 3: Let’s install some npm packages required for this project:
movie-trailer: Fetch Youtube trailers for any movies/series.
npm install --save movie-trailer
react-player: A react component for playing a variety of URLs, including file paths, YouTube, etc.
npm install react-player
Project Structure: It should look like this:
Example code:
Edit src/App.js file: This file contains our app logic:
javascript:
import './App.css';
import { useState } from 'react';
import ReactPlayer from 'react-player';
import movieTrailer from 'movie-trailer';
function App() {
//Setting up the initial states using
// react hook 'useState"
const [video, setVideo] = useState("inception");
const [videoURL, setVideoURL] =
useState("https://youtu.be/sa9l-dTv9Gk");
//A function to fetch the required URL
// and storing it inside the
// videoURL state variable
function handleSearch() {
movieTrailer(video).then((res) => {
setVideoURL(res);
});
}
return (
<div className="App">
<div className="search-box">
<label>
Search for any movies/shows:{ " " }
</label>
<input type="text" onChange=
{(e) => { setVideo(e.target.value) }} />
<button onClick={()=>{handleSearch()}}>
Search
</button>
</div>
// Using 'ReactPlayer' component to
// display the video
<ReactPlayer url={videoURL} controls={true}/>
</div>
);
}
export default App;
Edit src/App.css file: This file contains all the required styling for that app:
CSS:
.App {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
width: 100%;
font-size: 22px;
}
.search-box {
height: 10vh;
}
.search-box>input,
button {
box-sizing: border-box;
height: 25px;
font-size: 20px;
}
Step to run application: Type the following command in the terminal:
npm start
Output: Now Open http://localhost:3000/ in your browser to see our working app.
#viastudy
.gif)
0 Comments