Initial support for Unsplash images (#713)

* 🌄 Added initial support for Unsplash images * 🌄 Fixed description causing load failure * 🌄 Fixed Unsplash icon
ChurchApps · Aug 6, 2024 · 7bba161 · 7bba161
1 parent 3070971
commit 7bba161
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 3 deletions.
diff --git 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,16 +40,21 @@
 
     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)
     }
 
     let screenTab = "screens"
 
     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 @@
                 <Icon style="fill: {onlineTab !== 'pixabay' ? 'white' : '#00ab6b'};" size={1.2} id="pixabay" box={48} right />
                 <p>Pixabay</p>
             </Button>
+            <Button style="flex: 1;" active={onlineTab === "unsplash"} on:click={() => (onlineTab = "unsplash")} center>
+                <Icon style="fill: {onlineTab !== 'unsplash' ? 'white' : '#00ab6b'};" size={1.2} id="unsplash" right />
+                <p>Unsplash</p>
+            </Button>
         {:else}
             <Button disabled={rootPath === path} title={$dictionary.actions?.back} on:click={goBack}>
                 <Icon size={1.3} id="back" />
@@ -392,7 +402,7 @@
                     {#if !$labelsDisabled}<T id="settings.add" />{/if}
                 </Button>
             {:else}
-                {#if active === "online"}
+                {#if active === "online" && onlineTab === "pixabay"}
                     <Button title={$dictionary.media?.image} on:click={() => (activeView = "image")}>
                         <Icon size={1.3} id="image" white={activeView !== "image"} />
                     </Button>

diff --git a/src/frontend/components/drawer/media/unsplash.ts 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<any[]> {
+    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
@@ -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
@@ -297,6 +297,8 @@ const icons: { [key: string]: string } = {
     // special (icons8)
     pixabay:
         '<path d="M25,20.5C25,13.607,19.393,8,12.5,8S0,13.607,0,20.5v24h5V34h7.5C19.393,34,25,28.393,25,21.5V20.5z M20,21.5c0,4.136-3.364,7.5-7.5,7.5H5v-8.5c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V21.5z"/><polygon points="37.903,20.326 46.787,8 40.739,8 34.879,16.13 29.019,8 22.971,8 31.855,20.326 22,34 28.048,34 34.879,24.522 41.71,34 47.758,34"/>',
+    unsplash:
+        '<path d="M20.774,10.728v9.725H3.321v-9.725h5.491v4.852h6.45v-4.852H20.774z M15.282,3h-6.47v4.872h6.45V3H15.282z"/>',   
     youtube:
         '<path d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"/>',
     vimeo: '<path d="M 21.988281 7.96875 C 21.902344 9.878906 20.539063 12.488281 17.910156 15.804688 C 15.191406 19.269531 12.890625 21 11.007813 21 C 9.84375 21 8.855469 19.945313 8.050781 17.835938 C 7.511719 15.902344 6.976563 13.96875 6.4375 12.035156 C 5.839844 9.925781 5.195313 8.871094 4.511719 8.871094 C 4.359375 8.871094 3.835938 9.179688 2.941406 9.792969 L 2 8.605469 C 2.988281 7.757813 3.960938 6.90625 4.917969 6.058594 C 6.234375 4.941406 7.222656 4.355469 7.882813 4.296875 C 9.4375 4.148438 10.398438 5.191406 10.757813 7.425781 C 11.144531 9.832031 11.414063 11.332031 11.5625 11.917969 C 12.011719 13.914063 12.507813 14.910156 13.046875 14.910156 C 13.464844 14.910156 14.09375 14.265625 14.933594 12.96875 C 15.769531 11.671875 16.21875 10.6875 16.277344 10.007813 C 16.398438 8.890625 15.949219 8.328125 14.933594 8.328125 C 14.453125 8.328125 13.960938 8.4375 13.453125 8.652344 C 14.433594 5.496094 16.3125 3.964844 19.085938 4.050781 C 21.140625 4.109375 22.109375 5.414063 21.988281 7.96875 Z"/>',