aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/image_loop.tsx72
1 files changed, 0 insertions, 72 deletions
diff --git a/packages/website/ts/@next/components/image_loop.tsx b/packages/website/ts/@next/components/image_loop.tsx
deleted file mode 100644
index 2dc6c7aee..000000000
--- a/packages/website/ts/@next/components/image_loop.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import * as _ from 'lodash/collection';
-import styled from 'styled-components';
-
-interface Props {
- name: string;
- size?: 'small' | 'medium' | 'large' | number;
-}
-
-export class ImageLoop extends React.Component<Props> {
- private _img: Image;
- private _ctx: CanvasRenderingContext2D;
- private _x = 0;
- private _speed = -1;
- private _canvas = React.createRef();
-
- constructor(props: Props) {
- super(props);
- }
- public componentDidMount(): void {
- const domImage = React.Children.only(this.props.children);
-
- this._img = new Image(1446, 407);
- this._img.src = domImage.props.src;
- this._ctx = this._canvas.current.getContext('2d');
-
- this._img.onload = this.updateCanvas.bind(this);
- }
- public render(): React.ReactNode {
- return (
- <Wrapper {...this.props}>
- <canvas id="canvas" style={{ width: '100vw', height: '407px' }} ref={this._canvas} />
- </Wrapper>
- );
- }
- public updateCanvas(): void {
- this.move();
-
- const { width, height } = this._canvas.current;
-
- this._ctx.clearRect(0, 0, width, height);
- this.draw();
-
- requestAnimationFrame(this.updateCanvas.bind(this));
- }
- public move(): void {
- this._x += this._speed;
- this._x %= this._canvas.current.width;
- }
- public draw(): void {
- const img = this._img;
- const imgWidth = img.naturalWidth / 2;
- const imgHeight = img.naturalHeight / 2;
- const currentPosition = this._x;
- const canvasWidth = this._canvas.current.width;
-
- this._ctx.drawImage(img, currentPosition, 0, imgWidth, imgHeight);
-
- if (this._speed < 0) {
- this._ctx.drawImage(img, currentPosition + canvasWidth, 0, imgWidth, imgHeight);
- } else {
- this._ctx.drawImage(img, currentPosition - imgWidth, 0, imgWidth, imgHeight);
- }
- }
-}
-
-export const Wrapper = styled.div`
- margin: 0 0;
- display: flex;
- align-items: center;
- justify-content: center;
-`;