aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/image_loop.tsx74
-rw-r--r--packages/website/ts/@next/pages/instant.tsx5
2 files changed, 77 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/image_loop.tsx b/packages/website/ts/@next/components/image_loop.tsx
new file mode 100644
index 000000000..8b3ee2eb9
--- /dev/null
+++ b/packages/website/ts/@next/components/image_loop.tsx
@@ -0,0 +1,74 @@
+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);
+
+ debugger;
+
+ this._img = new Image(1446, 407);
+ this._img.src = domImage.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;
+`;
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index d3ed96bc8..686c48533 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -8,6 +8,7 @@ import {colors} from 'ts/style/colors';
import {Banner} from 'ts/@next/components/banner';
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
import {Icon} from 'ts/@next/components/Icon';
+import {ImageLoop} from 'ts/@next/components/image_loop';
import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -80,9 +81,9 @@ export const Next0xInstant = () => (
<Section isFullWidth={true} isNoPadding={true}>
<Wrap width="full">
{/* Note: This should be another component, this is just for mocking */}
- <ImageCarousel>
+ <ImageLoop>
<img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
- </ImageCarousel>
+ </ImageLoop>
</Wrap>
</Section>