From bbd8202513f22105878beed36d1a15e784086388 Mon Sep 17 00:00:00 2001
From: Kimberlee Johnson <hello@kimberlee.dev>
Date: Fri, 17 Sep 2021 09:04:19 -0700
Subject: [PATCH] Duplicated Expiry Timer code

---
 prebuilt/basic-embed/components/Call.js       |  2 +-
 .../basic-embed/components/ExpiryTimer.js     | 54 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 prebuilt/basic-embed/components/ExpiryTimer.js

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 (
+    <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;