netflix-watch-pilet

index.tsx

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);
}

MovieTile.tsx

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;