Add online image to backgrounds

src/plugins/backgrounds/index.ts

@@ -2,8 +2,9 @@ import colour from "./colour";
 import giphy from "./giphy";
 import gradient from "./gradient";
 import image from "./image";
+import online from "./online";
 import unsplash from "./unsplash";
 
-export const backgroundConfigs = [colour, giphy, gradient, image, unsplash];
+export const backgroundConfigs = [colour, giphy, gradient, image, online, unsplash];
 
 backgroundConfigs.sort((a, b) => a.name.localeCompare(b.name));

src/plugins/backgrounds/online/Online.sass

@@ -0,0 +1,6 @@
+.Online
+    background-position: 50% 50%
+    background-size: cover
+
+    &.default
+        background-color: #212121

src/plugins/backgrounds/online/Online.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Backdrop from "../../../views/shared/Backdrop";
+import "./Online.sass";
+import { defaultData, Props } from "./types";
+
+const Online: React.FC<Props> = ({ data = defaultData }) => {
+  const url = data.url;
+
+  if (!url) return <div className="Online default fullscreen" />;
+
+  return (
+    <Backdrop
+      className="Online fullscreen"
+      style={{ backgroundImage: url ? `url(${url})` : undefined }}
+    />
+  );
+};
+
+export default Online;

src/plugins/backgrounds/online/OnlineSettings.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { DebounceInput } from "../../shared";
+import { defaultData, Props } from "./types";
+
+const OnlineSettings: React.FC<Props> = ({ data = defaultData, setData }) => (
+  <div className="OnlineSettings">
+    <label>
+      Image URL
+      <DebounceInput
+        type="text"
+        value={data.url}
+        onChange={(value) => setData({ url: value })}
+        wait={1000}
+      />
+    </label>
+  </div>
+);
+
+export default OnlineSettings;

src/plugins/backgrounds/online/index.ts

@@ -0,0 +1,14 @@
+import { Config } from "../../types";
+import Online from "./Online";
+import OnlineSettings from "./OnlineSettings";
+
+const config: Config = {
+  key: "background/online",
+  name: "Online Image",
+  description: "Show online image",
+  dashboardComponent: Online,
+  settingsComponent: OnlineSettings,
+  supportsBackdrop: true,
+};
+
+export default config;

src/plugins/backgrounds/online/types.ts

@@ -0,0 +1,9 @@
+import { API } from "../../types";
+
+export type Data = {
+    url?: string;
+};
+
+export type Props = API<Data>;
+
+export const defaultData: Data = {};