diff --git a/prebuilt/basic-embed/components/Call.js b/prebuilt/basic-embed/components/Call.js index d840be7..9c46762 100644 --- a/prebuilt/basic-embed/components/Call.js +++ b/prebuilt/basic-embed/components/Call.js @@ -8,8 +8,8 @@ import { CardHeader, CardFooter, } from '@dailyjs/shared/components/Card'; -import ExpiryTimer from '@dailyjs/shared/components/ExpiryTimer'; import TextInput from '@dailyjs/shared/components/Input'; +import ExpiryTimer from '../components/ExpiryTimer'; const CALL_OPTIONS = { showLeaveButton: true, diff --git a/prebuilt/basic-embed/components/ExpiryTimer.js b/prebuilt/basic-embed/components/ExpiryTimer.js new file mode 100644 index 0000000..9c652f8 --- /dev/null +++ b/prebuilt/basic-embed/components/ExpiryTimer.js @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; + +export const ExpiryTimer = ({ expiry }) => { + const [secs, setSecs] = useState('--:--'); + + // If room has an expiry time, we'll calculate how many seconds until expiry + useEffect(() => { + if (!expiry) { + return false; + } + const i = setInterval(() => { + const timeLeft = Math.round(expiry - Date.now() / 1000); + if (timeLeft < 0) { + return setSecs(null); + } + setSecs(`${Math.floor(timeLeft / 60)}:${`0${timeLeft % 60}`.slice(-2)}`); + }, 1000); + + return () => clearInterval(i); + }, [expiry]); + + if (!secs) { + return null; + } + + return ( +
+ {secs} + +
+ ); +}; + +ExpiryTimer.propTypes = { + expiry: PropTypes.number, +}; + +export default ExpiryTimer;