feat: sponsor banner link

daisy · Dec 1, 2024 · bea6a2d · bea6a2d
1 parent 7284f02
commit bea6a2d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/src/renderer/components/Splash.js b/src/renderer/components/Splash.js
@@ -9,7 +9,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import { withStyles } from '@material-ui/core/styles';
 
-import { ipcRenderer } from 'electron';
+import { shell, ipcRenderer } from 'electron';
 import { IPC_EVENT_showEpubFileOrFolderBrowseDialog, IPC_EVENT_showEpubFileBrowseDialog, IPC_EVENT_showEpubFolderBrowseDialog } from "../../shared/main-renderer-events";
 
 import { localizer } from './../../shared/l10n/localize';
@@ -31,6 +31,7 @@ const styles = theme => ({
 class Splash extends React.Component {
 
   state = {
+    hideSponsor: false,
   };
 
   onBrowseFileOrFolderClick = e => {
@@ -53,7 +54,21 @@ class Splash extends React.Component {
 
     return false;
   };
-
+  componentDidMount() {
+    const dateStr = localStorage.getItem('DAISY-ACE-SPONSOR-HIDE');
+    // console.log(`===> ${window.location.href} ${dateStr}`);
+    if (dateStr) {
+      if ((new Date().getTime() - new Date(dateStr).getTime()) > (7*24*60*60*1000)) { // 7*24h
+        localStorage.removeItem('DAISY-ACE-SPONSOR-HIDE');
+        this.setState({ hideSponsor: false });
+      } else {
+        this.setState({ hideSponsor: true });
+        // setTimeout(()=>{document.getElementById('sponsorship').remove()}, 0);
+      }
+    } else {
+      this.setState({ hideSponsor: false });
+    }
+  }
   render() {
     let {classes, processingAce} = this.props;
 
@@ -93,6 +108,17 @@ class Splash extends React.Component {
               }
           </p>
           }
+        {!this.state.hideSponsor &&
+          <div id="sponsorship">
+            <span>{localize("sponsorship_prompt")}</span>
+            <a href="#" onClick={() => { shell.openExternal('https://daisy.org/AceAppSponsor'); }}>{localize("sponsorship_link")}</a>
+            <input onClick={() => {
+              // document.getElementById('sponsorship').remove();
+              localStorage.setItem('DAISY-ACE-SPONSOR-HIDE', new Date().toISOString());
+              this.setState({ hideSponsor: true });
+            }} type="button" value="X" aria-label={localize("sponsorship_close")} title={localize("sponsorship_close")} />
+          </div>
+        }
         </div>
     );
   }
@@ -102,7 +128,7 @@ function mapStateToProps(state) {
   let { app: {processing: {ace}}, preferences: {language} } = state;
   return {
     language,
-    processingAce: ace
+    processingAce: ace,
   };
 }
 

diff --git a/src/renderer/styles/Splash.scss b/src/renderer/styles/Splash.scss
@@ -1,3 +1,36 @@
+#sponsorship {
+display: flex;
+width: 100%;
+column-gap: 1em;
+align-items: center;
+background-color: rgb(255,255,240);
+color: black;
+font-size: 90%;
+border:0;
+border-top: 0.1rem solid lightgrey;
+border-bottom: 0.1rem solid lightgrey;
+padding: 0;
+padding: 0.5em;
+margin: 0;
+margin-top: 0.5em;
+margin-bottom: 0.5em;
+}
+#sponsorship > span {
+color: black;
+}
+#sponsorship > a {
+font-weight: bold;
+color: blue;
+}
+#sponsorship > input {
+margin-left: auto;
+border: 1px solid grey;
+border-radius: 6px;
+background-color: lightgrey;
+font-weight: bold;
+font-size: 90%;
+}
+
 .splash {
   font-size: larger;
   text-align: center;

diff --git a/src/shared/l10n/locales/en.json b/src/shared/l10n/locales/en.json
@@ -157,6 +157,9 @@
         "orDropSidebar": "or on the __ button in the sidebar,",
         "title": "Ace, by DAISY"
     },
+    "sponsorship_close": "Close",
+    "sponsorship_link": "Support our work",
+    "sponsorship_prompt": "If you find DAISY Ace useful, please help us by donating to support its ongoing maintenance.",
     "tablePagination": {
         "firstPage": "First Page",
         "lastPage": "Last Page",