diff options
Diffstat (limited to 'app/javascript/flavours/glitch/components')
4 files changed, 126 insertions, 152 deletions
diff --git a/app/javascript/flavours/glitch/components/animated_number.jsx b/app/javascript/flavours/glitch/components/animated_number.jsx deleted file mode 100644 index dd21d97f0..000000000 --- a/app/javascript/flavours/glitch/components/animated_number.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ShortNumber from 'mastodon/components/short_number'; -import TransitionMotion from 'react-motion/lib/TransitionMotion'; -import spring from 'react-motion/lib/spring'; -import { reduceMotion } from 'flavours/glitch/initial_state'; - -const obfuscatedCount = count => { - if (count < 0) { - return 0; - } else if (count <= 1) { - return count; - } else { - return '1+'; - } -}; - -export default class AnimatedNumber extends React.PureComponent { - - static propTypes = { - value: PropTypes.number.isRequired, - obfuscate: PropTypes.bool, - }; - - state = { - direction: 1, - }; - - componentWillReceiveProps (nextProps) { - if (nextProps.value > this.props.value) { - this.setState({ direction: 1 }); - } else if (nextProps.value < this.props.value) { - this.setState({ direction: -1 }); - } - } - - willEnter = () => { - const { direction } = this.state; - - return { y: -1 * direction }; - }; - - willLeave = () => { - const { direction } = this.state; - - return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) }; - }; - - render () { - const { value, obfuscate } = this.props; - const { direction } = this.state; - - if (reduceMotion) { - return obfuscate ? obfuscatedCount(value) : <ShortNumber value={value} />; - } - - const styles = [{ - key: `${value}`, - data: value, - style: { y: spring(0, { damping: 35, stiffness: 400 }) }, - }]; - - return ( - <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}> - {items => ( - <span className='animated-number'> - {items.map(({ key, data, style }) => ( - <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span> - ))} - </span> - )} - </TransitionMotion> - ); - } - -} diff --git a/app/javascript/flavours/glitch/components/animated_number.tsx b/app/javascript/flavours/glitch/components/animated_number.tsx new file mode 100644 index 000000000..1673ff41b --- /dev/null +++ b/app/javascript/flavours/glitch/components/animated_number.tsx @@ -0,0 +1,58 @@ +import React, { useCallback, useState } from 'react'; +import ShortNumber from './short_number'; +import { TransitionMotion, spring } from 'react-motion'; +import { reduceMotion } from '../initial_state'; + +const obfuscatedCount = (count: number) => { + if (count < 0) { + return 0; + } else if (count <= 1) { + return count; + } else { + return '1+'; + } +}; + +type Props = { + value: number; + obfuscate?: boolean; +} +export const AnimatedNumber: React.FC<Props> = ({ + value, + obfuscate, +})=> { + const [previousValue, setPreviousValue] = useState(value); + const [direction, setDirection] = useState<1|-1>(1); + + if (previousValue !== value) { + setPreviousValue(value); + setDirection(value > previousValue ? 1 : -1); + } + + const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]); + const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]); + + if (reduceMotion) { + return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />; + } + + const styles = [{ + key: `${value}`, + data: value, + style: { y: spring(0, { damping: 35, stiffness: 400 }) }, + }]; + + return ( + <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}> + {items => ( + <span className='animated-number'> + {items.map(({ key, data, style }) => ( + <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span> + ))} + </span> + )} + </TransitionMotion> + ); +}; + +export default AnimatedNumber; diff --git a/app/javascript/flavours/glitch/components/gifv.jsx b/app/javascript/flavours/glitch/components/gifv.jsx deleted file mode 100644 index 1ce7e7c29..000000000 --- a/app/javascript/flavours/glitch/components/gifv.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class GIFV extends React.PureComponent { - - static propTypes = { - src: PropTypes.string.isRequired, - alt: PropTypes.string, - lang: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - onClick: PropTypes.func, - }; - - state = { - loading: true, - }; - - handleLoadedData = () => { - this.setState({ loading: false }); - }; - - componentWillReceiveProps (nextProps) { - if (nextProps.src !== this.props.src) { - this.setState({ loading: true }); - } - } - - handleClick = e => { - const { onClick } = this.props; - - if (onClick) { - e.stopPropagation(); - onClick(); - } - }; - - render () { - const { src, width, height, alt, lang } = this.props; - const { loading } = this.state; - - return ( - <div className='gifv' style={{ position: 'relative' }}> - {loading && ( - <canvas - width={width} - height={height} - role='button' - tabIndex={0} - aria-label={alt} - title={alt} - lang={lang} - onClick={this.handleClick} - /> - )} - - <video - src={src} - role='button' - tabIndex={0} - aria-label={alt} - title={alt} - lang={lang} - muted - loop - autoPlay - playsInline - onClick={this.handleClick} - onLoadedData={this.handleLoadedData} - style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }} - /> - </div> - ); - } - -} diff --git a/app/javascript/flavours/glitch/components/gifv.tsx b/app/javascript/flavours/glitch/components/gifv.tsx new file mode 100644 index 000000000..8968170c5 --- /dev/null +++ b/app/javascript/flavours/glitch/components/gifv.tsx @@ -0,0 +1,68 @@ +import React, { useCallback, useState } from 'react'; + +type Props = { + src: string; + key: string; + alt?: string; + lang?: string; + width: number; + height: number; + onClick?: () => void; +} + +export const GIFV: React.FC<Props> = ({ + src, + alt, + lang, + width, + height, + onClick, +})=> { + const [loading, setLoading] = useState(true); + + const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> = useCallback(() => { + setLoading(false); + }, [setLoading]); + + const handleClick: React.MouseEventHandler = useCallback((e) => { + if (onClick) { + e.stopPropagation(); + onClick(); + } + }, [onClick]); + + return ( + <div className='gifv' style={{ position: 'relative' }}> + {loading && ( + <canvas + width={width} + height={height} + role='button' + tabIndex={0} + aria-label={alt} + title={alt} + lang={lang} + onClick={handleClick} + /> + )} + + <video + src={src} + role='button' + tabIndex={0} + aria-label={alt} + title={alt} + lang={lang} + muted + loop + autoPlay + playsInline + onClick={handleClick} + onLoadedData={handleLoadedData} + style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }} + /> + </div> + ); +}; + +export default GIFV; |