Merge pull request desmosinc#18 from colebillys19/rithm-mute-preview

Mute preview tool when there are no frames in state
phillipson808 · Jun 26, 2019 · f2b9924 · f2b9924
2 parents ecfc5bb + f8a91c1
commit f2b9924
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Preview.css b/src/components/Preview.css
@@ -19,6 +19,11 @@
   min-height: 100vh;
 }
 
+.Preview-muted {
+  opacity: 0.2;
+  pointer-events: none;
+}
+
 .Preview-scrubber {
   text-align: center;
   width: 340px;
@@ -75,3 +80,11 @@
     opacity: 1;
   }
 }
+
+.Preview-no-frames {
+  width: 360px;
+  margin: 0 auto;
+  color: #fff;
+  text-align: center;
+  font-weight: bold;
+}
diff --git a/src/components/Preview.js b/src/components/Preview.js
@@ -104,27 +104,29 @@ class Preview extends Component {
           <h2>Preview</h2>
           <InfoIcon infoText={previewText} />
         </div>
-        <Frame
-          imageSrc={imageSrc}
-          playing={playing}
-          togglePlaying={this.handleTogglePlaying}
-        />
-        <div className="Preview-scrubber" data-testid="Preview-scrubber">
-          <input
-            type="range"
-            min="0"
-            max={numFrames - 1}
-            value={previewIdx}
-            onChange={this.handlePreviewUpdate}
-            disabled={!numFrames}
-            aria-label="preview frame index"
+        <div className={classNames({ 'Preview-muted': !numFrames })}>
+          <Frame
+            imageSrc={imageSrc}
+            playing={playing}
+            togglePlaying={this.handleTogglePlaying}
           />
-        </div>
-        <div
-          className="Preview-scrubber-counter"
-          data-testid="Preview-scrubber-counter"
-        >
-          {numFrames ? `${previewIdx + 1} / ${numFrames}` : '0 / 0'}
+          <div className="Preview-scrubber" data-testid="Preview-scrubber">
+            <input
+              type="range"
+              min="0"
+              max={numFrames - 1}
+              value={previewIdx}
+              onChange={this.handlePreviewUpdate}
+              disabled={!numFrames}
+              aria-label="preview frame index"
+            />
+          </div>
+          <div
+            className="Preview-scrubber-counter"
+            data-testid="Preview-scrubber-counter"
+          >
+            {numFrames ? `${previewIdx + 1} / ${numFrames}` : '0 / 0'}
+          </div>
         </div>
         <div
           className="Preview-create"
@@ -150,6 +152,12 @@ class Preview extends Component {
         {gifProgress === 1 ? (
           <div className="Preview-progress-success">Download Successful</div>
         ) : null}
+        {!numFrames ? (
+          <div className="Preview-no-frames">
+            No frames have been captured. Use the camera or burst tools to add
+            some!
+          </div>
+        ) : null}
       </div>
     );
   }