r17x/re-papi

Tinker: Picture-In-Picture Web API w/ ReasonML

Tinker: RE:pip (Picture-In-Picture Web API)

• https://caniuse.com/#feat=picture-in-picture
• https://w3c.github.io/picture-in-picture/

ReasonReact Template & Examples

This is:

• A template for your new ReasonReact project.
• A collection of thin examples illustrating ReasonReact usage.
• Extra helper documentation for ReasonReact (full ReasonReact docs here).

src contains 4 sub-folders, each an independent, self-contained ReasonReact example. Feel free to delete any of them and shape this into your project! This template's more malleable than you might be used to =).

The point of this template and examples is to let you understand and personally tweak the entirely of it. We don't give you an opaque, elaborate mega build setup just to put some boxes on the screen. It strikes to stay transparent, learnable, and simple. You're encouraged to read every file; it's a great feeling, having the full picture of what you're using and being able to touch any part.

Run

npm install
npm run server
# in a new tab
npm start

Open a new web page to http://localhost:8000/. Change any .re file in src to see the page auto-reload. You don't need any bundler when you're developing!

How come we don't need any bundler during development? We highly encourage you to open up index.html to check for yourself!

Features Used

	Blinking Greeting	Reducer from ReactJS Docs	Fetch Dog Pictures	Reason Using JS Using Reason
No props		✓
Has props				✓
Children props	✓
No state				✓
Has state	✓		✓
Has state with useReducer		✓
ReasonReact using ReactJS				✓
ReactJS using ReasonReact				✓
useEffect	✓		✓
Dom attribute	✓	✓		✓
Styling	✓	✓	✓	✓
React.array			✓

Bundle for Production

We've included a convenience UNUSED_webpack.config.js, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.

We've also provided a barebone indexProduction.html, to serve your bundle.

npm install webpack webpack-cli
# rename file
mv UNUSED_webpack.config.js webpack.config.js
# call webpack to bundle for production
./node_modules/.bin/webpack
open indexProduction.html

re-papi's Issues

Roadmap: make it as package

Roadmap

• use picture-in-picture as Wrapper component

open Pip;

module App = {
 @react.component
 let make = {
   let videoRef = React.useRef(Js.Nullable.null)
   <>
      <Pip target={videoRef}>
         <video ref={ReactDOM.Ref.domRef(videoRef)} />
      </Pip>
   </>
 }
}