Receive support for View Once photos
This commit is contained in:
parent
fccf1eec30
commit
e62a1a7812
38 changed files with 1937 additions and 102 deletions
99
ts/components/Countdown.tsx
Normal file
99
ts/components/Countdown.tsx
Normal file
|
@ -0,0 +1,99 @@
|
|||
import React from 'react';
|
||||
// import classNames from 'classnames';
|
||||
|
||||
interface Props {
|
||||
duration: number;
|
||||
expiresAt: number;
|
||||
onComplete?: () => unknown;
|
||||
}
|
||||
interface State {
|
||||
ratio: number;
|
||||
}
|
||||
|
||||
const CIRCUMFERENCE = 11.013 * 2 * Math.PI;
|
||||
|
||||
export class Countdown extends React.Component<Props, State> {
|
||||
public looping = false;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const { duration, expiresAt } = this.props;
|
||||
const ratio = getRatio(expiresAt, duration);
|
||||
|
||||
this.state = { ratio };
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.startLoop();
|
||||
}
|
||||
|
||||
public componentDidUpdate() {
|
||||
this.startLoop();
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.stopLoop();
|
||||
}
|
||||
|
||||
public startLoop() {
|
||||
if (this.looping) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.looping = true;
|
||||
requestAnimationFrame(this.loop);
|
||||
}
|
||||
|
||||
public stopLoop() {
|
||||
this.looping = false;
|
||||
}
|
||||
|
||||
public loop = () => {
|
||||
const { onComplete, duration, expiresAt } = this.props;
|
||||
if (!this.looping) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ratio = getRatio(expiresAt, duration);
|
||||
this.setState({ ratio });
|
||||
|
||||
if (ratio === 1) {
|
||||
this.looping = false;
|
||||
if (onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
} else {
|
||||
requestAnimationFrame(this.loop);
|
||||
}
|
||||
};
|
||||
|
||||
public render() {
|
||||
const { ratio } = this.state;
|
||||
const strokeDashoffset = ratio * CIRCUMFERENCE;
|
||||
|
||||
return (
|
||||
<svg className="module-countdown" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12,1 A11,11,0,1,1,1,12,11.013,11.013,0,0,1,12,1Z"
|
||||
className="module-countdown__path"
|
||||
style={{
|
||||
strokeDasharray: `${CIRCUMFERENCE}, ${CIRCUMFERENCE}`,
|
||||
strokeDashoffset,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getRatio(expiresAt: number, duration: number) {
|
||||
const start = expiresAt - duration;
|
||||
const end = expiresAt;
|
||||
|
||||
const now = Date.now();
|
||||
const totalTime = end - start;
|
||||
const elapsed = now - start;
|
||||
|
||||
return Math.min(Math.max(0, elapsed / totalTime), 1);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue