From 7bba161c50611f16d0bd94678e6c987faa1d0ec9 Mon Sep 17 00:00:00 2001
From: Adriel Sand <61815862+thebiblelover7@users.noreply.github.com>
Date: Tue, 6 Aug 2024 07:59:03 +0000
Subject: [PATCH] Initial support for Unsplash images (#713)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 🌄 Added initial support for Unsplash images
* 🌄 Fixed description causing load failure
* 🌄 Fixed Unsplash icon
---
.../components/drawer/media/Media.svelte | 16 ++++++--
.../components/drawer/media/unsplash.ts | 39 +++++++++++++++++++
.../components/main/popups/About.svelte | 1 +
src/frontend/values/icons.ts | 2 +
4 files changed, 55 insertions(+), 3 deletions(-)
create mode 100644 src/frontend/components/drawer/media/unsplash.ts
diff --git a/src/frontend/components/drawer/media/Media.svelte b/src/frontend/components/drawer/media/Media.svelte
index 90f5612c..8e9b88aa 100644
--- a/src/frontend/components/drawer/media/Media.svelte
+++ b/src/frontend/components/drawer/media/Media.svelte
@@ -22,6 +22,7 @@
import Media from "./MediaCard.svelte"
import MediaGrid from "./MediaGrid.svelte"
import { loadFromPixabay } from "./pixabay"
+ import { loadFromUnsplash } from "./unsplash"
import { send } from "../../../utils/request"
import { clearBackground } from "../../output/clear"
@@ -39,9 +40,13 @@
async function loadFilesAsync() {
fullFilteredFiles = []
- if (onlineTab !== "pixabay" || activeView === "folder") return
+ if ((onlineTab !== "pixabay" && onlineTab !== "unsplash") || activeView === "folder") return
- fullFilteredFiles = await loadFromPixabay(searchValue || "landscape", activeView === "video")
+ if (onlineTab === "pixabay") {
+ fullFilteredFiles = await loadFromPixabay(searchValue || "landscape", activeView === "video")
+ } else if (onlineTab === "unsplash") {
+ fullFilteredFiles = await loadFromUnsplash(searchValue || "landscape")
+ }
loadAllFiles(fullFilteredFiles)
}
@@ -49,6 +54,7 @@
let onlineTab = "youtube"
$: if (active === "online" && onlineTab === "pixabay" && (searchValue !== null || activeView)) loadFilesAsync()
+ $: if (active === "online" && onlineTab === "unsplash" && (searchValue !== null || activeView)) loadFilesAsync()
// only for info!
$: if (onlineTab) activeDrawerOnlineTab.set(onlineTab)
@@ -348,6 +354,10 @@
Pixabay
+
{:else}
{:else}
- {#if active === "online"}
+ {#if active === "online" && onlineTab === "pixabay"}
diff --git a/src/frontend/components/drawer/media/unsplash.ts b/src/frontend/components/drawer/media/unsplash.ts
new file mode 100644
index 00000000..c04a93c6
--- /dev/null
+++ b/src/frontend/components/drawer/media/unsplash.ts
@@ -0,0 +1,39 @@
+import { getExtension } from "../../helpers/media"
+
+// https://unsplash.com/documentation
+
+let cache: any = {}
+
+export async function loadFromUnsplash(query: string = ""): Promise {
+ return new Promise((resolve) => {
+ console.log(query)
+ if (cache[query]) return resolve(cache[query])
+
+ let url: string = "https://api.unsplash.com/search/photos/?client_id=CaXvP_plzuAivss1MbiwGU3-rXd3zZphCifOVplX6Cg&content_filter=high&per_page=30&query=" // this is still a demo key, so it should be changed before release
+ url += encodeURIComponent(query)
+ console.log(url)
+
+ let results: any = []
+ fetch(url)
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("UNSPLASH", data)
+
+
+ results = data.results.map((media) => {
+ // previewURL
+ let path = media.urls.regular
+ return { path, name: media.alt_description, extension: getExtension(path) }
+ })
+
+ cache[query] = results
+
+ // let img = { path, favourite: a.favourite === true, name, extension: p.extension, audio: a.audio === true }
+ return resolve(results)
+ })
+ .catch((error) => {
+ console.log(error)
+ return resolve([])
+ })
+ })
+}
diff --git a/src/frontend/components/main/popups/About.svelte b/src/frontend/components/main/popups/About.svelte
index 290f74e2..365b1714 100644
--- a/src/frontend/components/main/popups/About.svelte
+++ b/src/frontend/components/main/popups/About.svelte
@@ -8,6 +8,7 @@
"Google Fonts (Icons)": "https://fonts.google.com/icons/",
"Icons8 (Icons)": "https://icons8.com/",
"Pixabay (Web Images)": "https://pixabay.com/",
+ "Unsplash (Web Images)": "https://unsplash.com/",
"Electron (Cross-platform desktop apps)": "https://www.electronjs.org/",
"Svelte (DOM framework)": "https://svelte.dev/",
"Rollup (Module bundler)": "https://rollupjs.org/",
diff --git a/src/frontend/values/icons.ts b/src/frontend/values/icons.ts
index 52891bb4..ecfa2553 100644
--- a/src/frontend/values/icons.ts
+++ b/src/frontend/values/icons.ts
@@ -297,6 +297,8 @@ const icons: { [key: string]: string } = {
// special (icons8)
pixabay:
'',
+ unsplash:
+ '',
youtube:
'',
vimeo: '',