Duplicated Expiry Timer code

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,

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 (
+    <div className="countdown">
+      {secs}
+      <style jsx>{`
+        .countdown {
+          position: fixed;
+          top: 0px;
+          right: 0px;
+          width: 48px;
+          text-align: center;
+          padding: 4px 0;
+          font-size: 0.875rem;
+          font-weight: var(--weight-medium);
+          border-radius: 0 0 0 var(--radius-sm);
+          background: var(--secondary-dark);
+          color: white;
+          z-index: 999;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+ExpiryTimer.propTypes = {
+  expiry: PropTypes.number,
+};
+
+export default ExpiryTimer;