add feed index indicator

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>");
+  });
+});

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">

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 {

webpack/css/image_flipper.scss

@@ -75,3 +75,12 @@
     }
   }
 }
+
+.index-indicator {
+  position: absolute;
+  background: $white;
+  height: 3px;
+  top: 3rem;
+  bottom: 0;
+  right: 0;
+}