beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: pairing complete overlay

Browse source
This commit is contained in:
httpjamesm 2023-11-23 17:35:43 -05:00
parent 81328324d2
commit 19b223c996
No known key found for this signature in database
6 changed files with 197 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/cast/package.json
View file

@ -19,6 +19,7 @@
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.0.2",
"sass": "^1.69.5",
"typescript": "^5"
}
}

51
apps/cast/src/components/FilledCircleCheck/FilledCircleCheck.module.scss Normal file
View file

@ -0,0 +1,51 @@
.circle {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
&.animate {
animation: scaleIn 0.3s ease-in-out forwards;
}
}
@keyframes scaleIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.checkmark {
width: 100px;
height: 100px;
&__circle {
fill: green;
}
&__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
stroke: white;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
}
@keyframes strokeCheck {
100% {
stroke-dashoffset: 0;
}
}

34
apps/cast/src/components/FilledCircleCheck/index.tsx Normal file
View file

@ -0,0 +1,34 @@
import { useEffect, useState } from 'react';
import styles from './FilledCircleCheck.module.scss'; // Import our CSS module
const FilledCircleCheck = () => {
const [animate, setAnimate] = useState(false);
useEffect(() => {
setAnimate(true);
}, []);
return (
<div className={`${styles.circle} ${animate ? styles.animate : ''}`}>
<svg
className={styles.checkmark}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52">
<circle
className={styles.checkmark__circle}
cx="26"
cy="26"
r="25"
fill="green"
/>
<path
className={styles.checkmark__check}
fill="none"
d="M14.1 27.2l7.1 7.2 16.7-16.8"
/>
</svg>
</div>
);
};
export default FilledCircleCheck;

42
apps/cast/src/components/PairedSuccessfullyOverlay.tsx Normal file
View file

@ -0,0 +1,42 @@
import FilledCircleCheck from './FilledCircleCheck';
export default function PairedSuccessfullyOverlay() {
return (
<div
style={{
position: 'fixed',
top: 0,
right: 0,
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
backgroundColor: 'black',
}}>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
textAlign: 'center',
}}>
<FilledCircleCheck />
<h2
style={{
marginBottom: 0,
}}>
Pairing Complete
</h2>
<p
style={{
lineHeight: '1.5rem',
}}>
We're preparing your album.
<br /> This should only take a few seconds.
</p>
</div>
</div>
);
}

9
apps/cast/src/pages/index.tsx
View file

@ -9,6 +9,7 @@ import {
import { useRouter } from 'next/router';
import { SESSION_KEYS, setKey } from '@ente/shared/storage/sessionStorage';
import TimerBar from 'components/TimerBar';
import PairedSuccessfullyOverlay from 'components/PairedSuccessfullyOverlay';
const colourPool = [
'#87CEFA', // Light Blue
@ -61,6 +62,9 @@ export default function PairingMode() {
const [borderWidthPercentage, setBorderWidthPercentage] = useState(100);
const [showPairingCompleteOverlay, setShowPairingCompleteOverlay] =
useState(false);
useEffect(() => {
init();
const interval = setInterval(() => {
@ -114,8 +118,6 @@ export default function PairingMode() {
new TextDecoder().decode(nonB64)
);
console.log(decryptedPayloadObj);
return decryptedPayloadObj;
};
@ -154,6 +156,8 @@ export default function PairingMode() {
storePayloadLocally(data);
setShowPairingCompleteOverlay(true);
router.push('/slideshow');
}, 1000);
@ -272,6 +276,7 @@ export default function PairingMode() {
</p>
</div>
</div>
{showPairingCompleteOverlay && <PairedSuccessfullyOverlay />}
</>
);
}

68
yarn.lock
View file

@ -1378,6 +1378,14 @@ ansi-styles@^6.0.0:
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
anymatch@~3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
dependencies:
normalize-path "^3.0.0"
picomatch "^2.0.4"
argparse@^2.0.1:
version "2.0.1"
resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
@ -1603,6 +1611,11 @@ base-x@^4.0.0:
resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
binary-extensions@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
bip39@^3.0.4:
version "3.0.4"
resolved "https://registry.npmjs.org/bip39/-/bip39-3.0.4.tgz"
@ -1638,7 +1651,7 @@ brace-expansion@^2.0.1:
dependencies:
balanced-match "^1.0.0"
braces@^3.0.2:
braces@^3.0.2, braces@~3.0.2:
version "3.0.2"
resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@ -1721,6 +1734,21 @@ chalk@^4.0.0, chalk@^4.1.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
"chokidar@>=3.0.0 <4.0.0":
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
dependencies:
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.2"
chrono-node@^2.2.6:
version "2.3.1"
resolved "https://registry.npmjs.org/chrono-node/-/chrono-node-2.3.1.tgz"
@ -2918,7 +2946,7 @@ get-user-locale@^2.1.3:
"@types/lodash.memoize" "^4.1.7"
lodash.memoize "^4.1.1"
glob-parent@^5.1.2:
glob-parent@^5.1.2, glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@ -3208,6 +3236,11 @@ immediate@~3.0.5:
resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
immutable@^4.0.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
import-fresh@^3.0.0, import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@ -3296,6 +3329,13 @@ is-bigint@^1.0.1:
dependencies:
has-bigints "^1.0.1"
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
dependencies:
binary-extensions "^2.0.0"
is-boolean-object@^1.1.0:
version "1.1.2"
resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
@ -3369,7 +3409,7 @@ is-generator-function@^1.0.10:
dependencies:
has-tostringtag "^1.0.0"
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
version "4.0.3"
resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@ -4021,7 +4061,7 @@ node-fetch@^2.6.1, node-fetch@^2.6.7, node-fetch@~2.6.1:
dependencies:
whatwg-url "^5.0.0"
normalize-path@^3.0.0:
normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@ -4324,7 +4364,7 @@ picocolors@^1.0.0:
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
picomatch@^2.3.1:
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
version "2.3.1"
resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -4642,6 +4682,13 @@ readable-web-to-node-stream@^3.0.0:
dependencies:
readable-stream "^3.6.0"
readdirp@~3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
dependencies:
picomatch "^2.2.1"
reflect.getprototypeof@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@ -4800,6 +4847,15 @@ sanitize-filename@^1.6.3:
dependencies:
truncate-utf8-bytes "^1.0.0"
sass@^1.69.5:
version "1.69.5"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.5.tgz#23e18d1c757a35f2e52cc81871060b9ad653dfde"
integrity sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
sax@^1.2.4:
version "1.2.4"
resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
@ -4942,7 +4998,7 @@ slice-ansi@^5.0.0:
ansi-styles "^6.0.0"
is-fullwidth-code-point "^4.0.0"
source-map-js@^1.0.2:
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==