From f4e80f210f3e436f653330a6a7533dc1fd2467b9 Mon Sep 17 00:00:00 2001
From: Zhong Lufan <lufanzhong@gmail.com>
Date: Tue, 2 Jan 2024 21:17:19 +0000
Subject: [PATCH] Add online images to backgrounds

---
 src/plugins/backgrounds/index.ts              |  3 ++-
 src/plugins/backgrounds/online/Online.sass    |  6 ++++++
 src/plugins/backgrounds/online/Online.tsx     | 19 +++++++++++++++++++
 .../backgrounds/online/OnlineSettings.tsx     | 19 +++++++++++++++++++
 src/plugins/backgrounds/online/index.ts       | 14 ++++++++++++++
 src/plugins/backgrounds/online/types.ts       |  9 +++++++++
 6 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/backgrounds/online/Online.sass
 create mode 100644 src/plugins/backgrounds/online/Online.tsx
 create mode 100644 src/plugins/backgrounds/online/OnlineSettings.tsx
 create mode 100644 src/plugins/backgrounds/online/index.ts
 create mode 100644 src/plugins/backgrounds/online/types.ts

diff --git a/src/plugins/backgrounds/index.ts b/src/plugins/backgrounds/index.ts
index ffd6fea4..c4530c8c 100644
--- a/src/plugins/backgrounds/index.ts
+++ b/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));
diff --git a/src/plugins/backgrounds/online/Online.sass b/src/plugins/backgrounds/online/Online.sass
new file mode 100644
index 00000000..63f85f5e
--- /dev/null
+++ b/src/plugins/backgrounds/online/Online.sass
@@ -0,0 +1,6 @@
+.Online
+    background-position: 50% 50%
+    background-size: cover
+
+    &.default
+        background-color: #212121
diff --git a/src/plugins/backgrounds/online/Online.tsx b/src/plugins/backgrounds/online/Online.tsx
new file mode 100644
index 00000000..bd237c83
--- /dev/null
+++ b/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;
diff --git a/src/plugins/backgrounds/online/OnlineSettings.tsx b/src/plugins/backgrounds/online/OnlineSettings.tsx
new file mode 100644
index 00000000..ca3e3c09
--- /dev/null
+++ b/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;
diff --git a/src/plugins/backgrounds/online/index.ts b/src/plugins/backgrounds/online/index.ts
new file mode 100644
index 00000000..a909de43
--- /dev/null
+++ b/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;
diff --git a/src/plugins/backgrounds/online/types.ts b/src/plugins/backgrounds/online/types.ts
new file mode 100644
index 00000000..abce7cc4
--- /dev/null
+++ b/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 = {};