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("", () => {
@@ -16,3 +16,22 @@ describe("", () => {
expect(el.text()).toContain(feed2.body.name);
});
});
+
+describe("", () => {
+ it("renders index indicator: position 1", () => {
+ const wrapper = mount();
+ expect(wrapper.find("div").props().style)
+ .toEqual({ left: "calc(-10px + 0 * 50%)", width: "50%" });
+ });
+
+ it("renders index indicator: position 2", () => {
+ const wrapper = mount();
+ expect(wrapper.find("div").props().style)
+ .toEqual({ left: "calc(-10px + 1 * 25%)", width: "25%" });
+ });
+
+ it("doesn't render index indicator", () => {
+ const wrapper = mount();
+ expect(wrapper.html()).toEqual("
");
+ });
+});
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 ? : ;
+}
+
export class Show extends React.Component {
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 {
{t("Edit")}
{unsaved ? "*" : ""}
+
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;
+}