import * as React from "react";
import { Widget, WidgetHeader, FallbackImg, WidgetBody } from "../../ui/index";
import { ToolTips } from "../../constants";
import { WebcamPanelProps } from "./interfaces";
import { PLACEHOLDER_FARMBOT } from "../../farmware/images/image_flipper";
import { Flipper } from "./flipper";
import { sortedFeeds } from "./edit";
import { t } from "../../i18next_wrapper";
type State = {
/** Current index in the webcam feed list.
*
* We might need to move this in to Redux and use a UUID instead of an index,
* depending on user needs.
*/
current: number;
};
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.`);
getMessage(currentUrl: string) {
if (this.props.feeds.length) {
if (currentUrl.includes(PLACEHOLDER_FARMBOT)) {
return this.PLACEHOLDER_FEED;
} else {
return "";
}
} else {
return this.NO_FEED;
}
}
state: State = { current: 0 };
render() {
const { props } = this;
const feeds = sortedFeeds(this.props.feeds).map(x => x.body);
const flipper = new Flipper(feeds, FALLBACK_FEED, this.state.current);
const title = flipper.current.name || t("Webcam Feeds");
const msg = this.getMessage(flipper.current.url);
const imageClass = msg.length > 0 ? "no-flipper-image-container" : "";
return