Skip to content

Instantly share code, notes, and snippets.

@DanteDeRuwe
Last active Mar 17, 2021
Embed
What would you like to do?
netflix-watch-pilet
import * as React from 'react';
import { PiletApi } from 'netflix-piral';
import MovieTile from './components/MovieTile';
import WatchPage from './components/WatchPage';
import './style.scss';
export function setup(app: PiletApi) {
// Get the registered extension for a toggle from the pilet api
const Toggle = props => <app.Extension name="ListToggle" params={props}></app.Extension>;
// pass the extension down to the component that needs it
const MovieTileExtension = props => <MovieTile {...props.params} Toggle={Toggle}></MovieTile>
// ^^^
app.registerExtension('MovieTile', MovieTileExtension)
// register page
app.registerPage('/watch/:media_type/:video_id', WatchPage);
}
import * as React from 'react';
import { Link } from 'react-router-dom';
export interface MovieTileProps {
backdrop: string;
title: string;
score: string;
overview: string;
movieId: string;
media_type: 'tv' | 'movie';
Toggle?: React.FC<ToggleProps>
}
const MovieTile: React.FC<MovieTileProps> = props => {
const backDrop = props.backdrop.match(/.*(null|undefined)$/) ? 'https://i.imgur.com/QVaMho2.png' : props.backdrop;
return (
<div
className="MovieTile"
id={props.movieId}
data-mediatype={props.media_type}
style={{ backgroundImage: `url(${backDrop})` }}
>
<div className="overlay">
<Link to={`/watch/${props.media_type}/${props.movieId}`}>
<div className="title">{props.title}</div>
<div className="rating">{props.score} / 10</div>
<div className="plot">{props.overview}</div>
</Link>
<props.Toggle {...props}></props.Toggle>
</div>
</div>
);
};
export default MovieTile;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment