From 9eb6c0d08a0ad52ec340086ba8351f66e24a4d91 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Wed, 20 Sep 2017 16:01:29 -0700
Subject: [PATCH] add feed index indicator

---
 .../controls/webcam/__tests__/show_test.tsx   | 21 ++++++++++++++++++-
 webpack/controls/webcam/show.tsx              | 11 ++++++++++
 webpack/css/global.scss                       |  5 ++++-
 webpack/css/image_flipper.scss                |  9 ++++++++
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/webpack/controls/webcam/__tests__/show_test.tsx b/webpack/controls/webcam/__tests__/show_test.tsx
index c907ef607..91aacfca1 100644
--- a/webpack/controls/webcam/__tests__/show_test.tsx
+++ b/webpack/controls/webcam/__tests__/show_test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { fakeWebcamFeed } from "../../../__test_support__/fake_state/resources";
 import { mount } from "enzyme";
-import { Show } from "../show";
+import { Show, IndexIndicator } from "../show";
 import { props } from "../test_helpers";
 
 describe("<Show/>", () => {
@@ -16,3 +16,22 @@ describe("<Show/>", () => {
     expect(el.text()).toContain(feed2.body.name);
   });
 });
+
+describe("<IndexIndicator/>", () => {
+  it("renders index indicator: position 1", () => {
+    const wrapper = mount(<IndexIndicator i={0} total={2} />);
+    expect(wrapper.find("div").props().style)
+      .toEqual({ left: "calc(-10px + 0 * 50%)", width: "50%" });
+  });
+
+  it("renders index indicator: position 2", () => {
+    const wrapper = mount(<IndexIndicator i={1} total={4} />);
+    expect(wrapper.find("div").props().style)
+      .toEqual({ left: "calc(-10px + 1 * 25%)", width: "25%" });
+  });
+
+  it("doesn't render index indicator", () => {
+    const wrapper = mount(<IndexIndicator i={0} total={1} />);
+    expect(wrapper.html()).toEqual("<div></div>");
+  });
+});
diff --git a/webpack/controls/webcam/show.tsx b/webpack/controls/webcam/show.tsx
index 191a4f9a1..7be833b4d 100644
--- a/webpack/controls/webcam/show.tsx
+++ b/webpack/controls/webcam/show.tsx
@@ -19,6 +19,16 @@ type State = {
 
 const FALLBACK_FEED = { name: "", url: PLACEHOLDER_FARMBOT };
 
+export function IndexIndicator(props: { i: number, total: number }): JSX.Element {
+  const percentWidth = 100 / props.total;
+  return props.total > 1 ? <div
+    className="index-indicator"
+    style={{
+      width: `${percentWidth}%`,
+      left: `calc(-10px + ${props.i} * ${percentWidth}%)`
+    }} /> : <div />;
+}
+
 export class Show extends React.Component<WebcamPanelProps, State> {
   NO_FEED = t(`No webcams yet. Click the edit button to add a feed URL.`);
   PLACEHOLDER_FEED = t(`Click the edit button to add or edit a feed URL.`);
@@ -57,6 +67,7 @@ export class Show extends React.Component<WebcamPanelProps, State> {
             {t("Edit")}
             {unsaved ? "*" : ""}
           </button>
+          <IndexIndicator i={this.state.current} total={feeds.length} />
         </WidgetHeader>
         <div className="widget-body">
           <div className="image-flipper">
diff --git a/webpack/css/global.scss b/webpack/css/global.scss
index fae43bcdb..6fb8b30bb 100644
--- a/webpack/css/global.scss
+++ b/webpack/css/global.scss
@@ -217,8 +217,11 @@ fieldset {
 }
 
 .webcam-stream-valid img {
-  min-width: 100%;
+  display: flex;
   max-width: 100%;
+  margin: auto;
+  max-height: 650px;
+  min-height: 300px;
 }
 
 .webcam-stream-unavailable text {
diff --git a/webpack/css/image_flipper.scss b/webpack/css/image_flipper.scss
index a62fc368d..de1a24169 100644
--- a/webpack/css/image_flipper.scss
+++ b/webpack/css/image_flipper.scss
@@ -75,3 +75,12 @@
     }
   }
 }
+
+.index-indicator {
+  position: absolute;
+  background: $white;
+  height: 3px;
+  top: 3rem;
+  bottom: 0;
+  right: 0;
+}