diff options
| -rw-r--r-- | packages/website/ts/@next/components/image_loop.tsx | 74 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 5 |
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> |