feat: add initial rendering implementation (#11)

* chore: begin work on Toyer contextx

* chore: add ToyerVideo

* feat: make the rendering sort of work

* chore: lint and break files apart

* chore: more correct render cycle

* feat: support framer-motion motionValue as input

* Create quick-masks-clean.md

* chore: update changeset to minor

* chore: switch to const

Author: DmitryDodzin

Diff for: .changeset/quick-masks-clean.md

@@ -0,0 +1,14 @@
+---
+"react-toyer": minor
+---
+
+#### Api
+
+feat: create initial api for rendering several vidos on one canvas
+
+feat: FramerMotion's motionValue support for canvas internals (not canvas itself)
+
+#### Components
+
+* Toyer (new)
+* ToyerVideo (new)

Diff for: docs/README.md

@@ -0,0 +1,3 @@
+react-toyer / [Exports](modules.md)
+
+# React Toyer

Diff for: docs/modules.md

@@ -0,0 +1,27 @@
+[react-toyer](README.md) / Exports
+
+# react-toyer
+
+## Table of contents
+
+### Namespaces
+
+- [Toyer](modules/toyer.md)
+- [ToyerVideo](modules/toyervideo.md)
+
+### Variables
+
+- [Toyer](modules.md#toyer)
+- [ToyerVideo](modules.md#toyervideo)
+
+## Variables
+
+### Toyer
+
+• `Const` **Toyer**: `FC`<`IToyerProps`\>
+
+___
+
+### ToyerVideo
+
+• `Const` **ToyerVideo**: `VFC`<`IToyerVideoProps`\>

Diff for: docs/modules/toyer.md

@@ -0,0 +1,15 @@
+[react-toyer](../README.md) / [Exports](../modules.md) / Toyer
+
+# Namespace: Toyer
+
+## Table of contents
+
+### Variables
+
+- [displayName](toyer.md#displayname)
+
+## Variables
+
+### displayName
+
+• **displayName**: `undefined` \| `string`

Diff for: docs/modules/toyervideo.md

@@ -0,0 +1,15 @@
+[react-toyer](../README.md) / [Exports](../modules.md) / ToyerVideo
+
+# Namespace: ToyerVideo
+
+## Table of contents
+
+### Variables
+
+- [displayName](toyervideo.md#displayname)
+
+## Variables
+
+### displayName
+
+• **displayName**: `undefined` \| `string`

Diff for: package.json

@@ -41,6 +41,7 @@
     "@testing-library/react": "12.0.0",
     "@types/jest": "26.0.24",
     "@types/react": "17.0.14",
+    "canvas": "2.8.0",
     "eslint-config-altnext": "1.1.6",
     "husky": "7.0.1",
     "jest": "27.0.6",

Diff for: src/__tests__/toyer.spec.tsx

@@ -1,10 +1,15 @@
 import { render } from '@testing-library/react';
 
 import { Toyer } from '../toyer';
+import { ToyerVideo } from '../toyer-video';
 
 describe('init', () => {
   it('should work', () => {
-    const { container } = render(<Toyer />);
+    const { container } = render(
+      <Toyer height={120} width={300}>
+        <ToyerVideo src={'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} playing />
+      </Toyer>,
+    );
 
     expect(container).toBeDefined();
   });

Diff for: src/index.ts

@@ -1 +1,2 @@
 export { Toyer } from './toyer';
+export { ToyerVideo } from './toyer-video';

Diff for: src/interfaces.ts

@@ -1 +1,32 @@
-export interface IToyerProps {}
+export type ValueType<T> = T | { get(): T };
+
+interface ISized {
+  width: ValueType<number>;
+  height: ValueType<number>;
+}
+
+interface IMovable {
+  top?: ValueType<number>;
+  left?: ValueType<number>;
+}
+
+export interface IVideoItem extends IMovable, ISized {
+  index: number;
+  playing: boolean;
+  element: HTMLVideoElement;
+}
+
+export interface IToyerContext {
+  latestIndex: number;
+  canvas: ISized;
+  videos: IVideoItem[];
+}
+
+export interface IToyerProps {
+  width: number;
+  height: number;
+}
+
+export interface IToyerVideoProps extends Partial<ISized & Omit<IVideoItem, 'element'>> {
+  src: string;
+}

Diff for: src/toyer-video.tsx

@@ -0,0 +1,45 @@
+import type { VFC } from 'react';
+import { useContext, useEffect, useRef } from 'react';
+
+import { ToyerContext } from './toyer.context';
+import { getIndex, registerVideo } from './toyer.helpers';
+import type { IToyerVideoProps } from './interfaces';
+
+export const ToyerVideo: VFC<IToyerVideoProps> = ({ index, src, playing, width, height, top, left }) => {
+  const context = useContext(ToyerContext);
+  const videoRef = useRef<HTMLVideoElement>();
+  const currentIndex = getIndex(context, index);
+
+  useEffect(() => {
+    const video = document.createElement('video');
+
+    video.muted = true;
+    video.src = src;
+
+    videoRef.current = video;
+
+    return () => {
+      video.remove();
+    };
+  }, [src]);
+
+  useEffect(
+    () =>
+      registerVideo(context, {
+        index: currentIndex,
+        playing: !!playing,
+        element: videoRef.current!,
+        top,
+        left,
+        width: width ?? context.canvas.width,
+        height: height ?? context.canvas.height,
+      }),
+    /* Its intentinal to keep out playing from deps here */
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [context, currentIndex, width, height, top, left],
+  );
+
+  return null;
+};
+
+ToyerVideo.displayName = 'ToyerVideo';

Diff for: src/toyer.context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import type { IToyerContext } from './interfaces';
+
+export const ToyerContext = createContext<IToyerContext>({
+  latestIndex: 0,
+  videos: [],
+  canvas: { height: 0, width: 0 },
+});

Diff for: src/toyer.helpers.ts

@@ -0,0 +1,28 @@
+import type { IToyerContext, IVideoItem, ValueType } from './interfaces';
+
+export const registerVideo = (context: IToyerContext, video: IVideoItem): (() => void) => {
+  if (video.element.readyState >= video.element.HAVE_ENOUGH_DATA) {
+    context.videos[video.index] = video;
+  } else {
+    video.element.load();
+    video.element.addEventListener('loadedmetadata', () => {
+      context.videos[video.index] = video;
+    });
+  }
+
+  return () => {
+    if (context.videos[video.index]) {
+      delete context.videos[video.index];
+    }
+  };
+};
+
+export const getIndex = (context: IToyerContext, index?: number): number => index ?? (context.latestIndex += 1);
+
+export const getValue = <T extends unknown>(value: ValueType<T>): T => {
+  if (typeof value === 'object' && value !== null && 'get' in (value as object)) {
+    return (value as { get(): T }).get();
+  }
+
+  return value as T;
+};

Diff for: src/toyer.tsx

@@ -1,5 +1,74 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
+import { useEffect, useRef } from 'react';
 
-import type { IToyerProps } from './interfaces';
+import { ToyerContext } from './toyer.context';
+import { getValue } from './toyer.helpers';
+import type { IToyerContext, IToyerProps } from './interfaces';
 
-export const Toyer: VFC<IToyerProps> = () => <div>Toyer</div>;
+export const Toyer: FC<IToyerProps> = ({ children, height, width }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const contextRef = useRef<IToyerContext>({ canvas: { height, width }, latestIndex: 0, videos: [] });
+
+  useEffect(() => {
+    let running = true;
+    let ctx = canvasRef.current?.getContext('2d');
+
+    const tick = (): void => {
+      if (!running) {
+        return;
+      }
+
+      if (!ctx) {
+        ctx = canvasRef.current?.getContext('2d');
+
+        requestAnimationFrame(tick);
+
+        return;
+      }
+
+      ctx.clearRect(0, 0, getValue(contextRef.current.canvas.width), getValue(contextRef.current.canvas.height));
+
+      for (const video of Object.values(contextRef.current.videos)) {
+        if (video.playing && video.element.paused) {
+          video.element.play().catch((error) => {
+            console.error('Error trying to initiate playback', error);
+          });
+        }
+
+        if (!video.playing && !video.element.paused) {
+          video.element.pause();
+          video.element.currentTime = 0;
+        }
+
+        if (video.playing) {
+          ctx.drawImage(
+            video.element,
+            getValue(video.left ?? 0),
+            getValue(video.top ?? 0),
+            getValue(video.width),
+            getValue(video.height),
+          );
+        }
+      }
+
+      requestAnimationFrame(tick);
+    };
+
+    requestAnimationFrame(tick);
+
+    return () => {
+      running = false;
+    };
+  }, []);
+
+  contextRef.current.latestIndex = 0;
+
+  return (
+    <div style={{ height, width }}>
+      <canvas ref={canvasRef} height={height} width={width} />
+      <ToyerContext.Provider value={contextRef.current}>{children}</ToyerContext.Provider>
+    </div>
+  );
+};
+
+Toyer.displayName = 'Toyer';