From 7ef737e6346c2dd23e976732a15c84eeb94555ad Mon Sep 17 00:00:00 2001
From: abawi <fares.abawi@uni-hamburg.de>
Date: Sat, 26 Apr 2025 11:01:37 +0200
Subject: [PATCH] Provided information on how to support the API

---
 README.md                 |  9 +++++++++
 src/components/Footer.tsx | 35 ++++++++++++++++++-----------------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 7562a47..e2e9513 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,15 @@ Using [WebRTC](http://www.webrtc.org), FilePizza eliminates the initial upload s
 
 A hosted instance of the Cloudflare deployed FilePizza is available at [filepizza.emaily.re](https://filepizza.emaily.re).
 
+## API requirements
+
+To use the FilePizza in your own apps, we created an unofficial [filepizza-client](https://github.com/TeXlyre/filepizza-client) API which is designed to work with this FilePizza fork. 
+
+You'd first need to install this package [locally](#running-with-docker) or [remotely (deployed with Cloudflare Tunnel)](#deployment-with-cloudflare-tunnel). 
+The [filepizza-client](https://github.com/TeXlyre/filepizza-client) API runs by default on `http://localhost:8081` which is automatically configured in the `docker-compose.yml`. 
+
+For hosting the API and this package remotely, you'd have to modify the `API_ORIGINS` variable in the `.env` file (a copy of the provided `envfile`) to include the domain or sub-domain where the API is hosted.
+
 ## What's new with FilePizza v2
 
 * A new UI with dark mode support, now built on modern browser technologies.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ab3ebe2..c225437 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import React, { JSX, useCallback } from 'react'
+// import React, { useCallback } from 'react'
+import React, { JSX } from 'react'
 
-const DONATE_HREF =
-  'https://commerce.coinbase.com/checkout/247b6ffe-fb4e-47a8-9a76-e6b7ef83ea22'
+// const DONATE_HREF =
+//   'https://commerce.coinbase.com/checkout/247b6ffe-fb4e-47a8-9a76-e6b7ef83ea22'
 
 function FooterLink({
   href,
@@ -25,26 +26,26 @@ function FooterLink({
 }
 
 export function Footer(): JSX.Element {
-  const handleDonate = useCallback(() => {
-    window.location.href = DONATE_HREF
-  }, [])
+  // const handleDonate = useCallback(() => {
+  //   window.location.href = DONATE_HREF
+  // }, [])
 
   return (
     <>
       <div className="h-[100px]" /> {/* Spacer to account for footer height */}
       <footer className="fixed bottom-0 left-0 right-0 text-center py-2.5 pb-4 text-xs border-t border-stone-200 dark:border-stone-700 shadow-[0_-1px_2px_rgba(0,0,0,0.04)] dark:shadow-[0_-1px_2px_rgba(255,255,255,0.04)] bg-white dark:bg-stone-900">
         <div className="flex flex-col items-center space-y-1 px-4 sm:px-6 md:px-8">
-          <div className="flex items-center space-x-2">
-            <p className="text-stone-600 dark:text-stone-400">
-              <strong>Like FilePizza v2?</strong> Support its development!{' '}
-            </p>
-            <button
-              className="px-1.5 py-0.5 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors duration-200 font-medium text-[10px]"
-              onClick={handleDonate}
-            >
-              Donate
-            </button>
-          </div>
+          {/*<div className="flex items-center space-x-2">*/}
+          {/*  <p className="text-stone-600 dark:text-stone-400">*/}
+          {/*    <strong>Like FilePizza v2?</strong> Support its development!{' '}*/}
+          {/*  </p>*/}
+          {/*  <button*/}
+          {/*    className="px-1.5 py-0.5 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors duration-200 font-medium text-[10px]"*/}
+          {/*    onClick={handleDonate}*/}
+          {/*  >*/}
+          {/*    Donate*/}
+          {/*  </button>*/}
+          {/*</div>*/}
 
           <p className="text-stone-600 dark:text-stone-400">
             Cooked up by{' '}