From 16621261b534b6a3cea56dcdfd14e27bc2dbf001 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 1 May 2018 10:30:26 -0400
Subject: [PATCH] Add 'flash' to differentiate video from photo mode
---
src/components/camera-modal/camera-modal.css | 21 ++++++++++++++++++--
src/components/camera-modal/camera-modal.jsx | 3 +++
2 files changed, 22 insertions(+), 2 deletions(-)
diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index a8d668ae7..c6200c14e 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -121,7 +121,7 @@ $main-button-size: 2.75rem;
.button-row button {
padding: 0.75rem 1rem;
border-radius: 0.25rem;
- background: white;
+ background: $ui-white;
border: 1px solid $ui-black-transparent;
font-weight: 600;
font-size: 0.85rem;
@@ -131,5 +131,22 @@ $main-button-size: 2.75rem;
.button-row button.ok-button {
background: $motion-primary;
border: $motion-primary;
- color: white;
+ color: $ui-white;
+}
+
+@keyframes flash {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+
+.flash-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: $ui-white;
+ animation-name: flash;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards; /* Leave at 0 opacity after animation */
}
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index f9411be11..f115a6f8a 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -72,6 +72,9 @@ const CameraModal = ({intl, ...props}) => (
ref={props.canvasRef}
width="960"
/>
+ {props.capture ? (
+ <div className={styles.flashOverlay} />
+ ) : null}
</Box>
{props.capture ?
<Box className={styles.buttonRow}>
--
GitLab