feat: download image button (wip)

src/components/modals/main/settings/Dropdown.jsx

@@ -9,7 +9,7 @@ export default class Dropdown extends React.PureComponent {
     };
   }
 
-  getLabel = () => {
+  getLabel() {
     return this.props.label ? <label>{this.props.label}</label> : null;
   }
 
@@ -39,7 +39,7 @@ export default class Dropdown extends React.PureComponent {
   render() {
     return (
       <>
-        {this.getLabel}
+        {this.getLabel()}
         <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{width: `${(8*this.state.title.length) + 50}px`}}>
           {this.props.children}
         </select>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -5,6 +5,7 @@ import Dropdown from '../../Dropdown';
 import FileUpload from '../../FileUpload';
 import Slider from '../../Slider';
 import Switch from '../../Switch';
+import Radio from '../../Radio';
 
 import ColourSettings from './Colour';
 
@@ -48,13 +49,21 @@ export default class BackgroundSettings extends React.PureComponent {
 
     let backgroundSettings;
 
+    const apiOptions = [
+      {
+        'name': 'Mue',
+        'value': 'mue'
+      },
+      {
+        'name': 'Unsplash',
+        'value': 'unsplash'
+      }
+    ]
+
     const APISettings = (
       <>
         <br/>
-        <Dropdown label={background.source.api} name='backgroundAPI'>
-          <option value='mue'>Mue</option>
-          <option value='unsplash'>Unsplash</option>
-        </Dropdown>
+        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI'/>
       </>
     );
 
@@ -90,6 +99,7 @@ export default class BackgroundSettings extends React.PureComponent {
         <h3>{background.buttons.title}</h3>
         <Checkbox name='view' text={background.buttons.view} />
         <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
+        <Checkbox name='downloadbtn' text={background.buttons.download}/>
 
         <h3>{background.effects.title}</h3>
         <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />

src/components/widgets/background/Background.jsx

@@ -16,7 +16,8 @@ export default class Background extends React.PureComponent {
         credit: '',
         location: 'N/A',
         camera: 'N/A',
-        resolution: 'N/A'
+        resolution: 'N/A',
+        url: ''
       }
     };
     this.language = window.language.widgets.background;
@@ -124,10 +125,11 @@ export default class Background extends React.PureComponent {
         this.setState({
           url: data.file,
           photoInfo: {
-            credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ' on Unsplash',
+            credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`,
             location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
             camera: data.camera || 'N/A',
-            resolution: data.resolution || 'N/A'
+            resolution: data.resolution || 'N/A',
+            url: data.file
           }
         });
       break;

src/components/widgets/background/PhotoInformation.jsx

@@ -6,6 +6,22 @@ import Camera from '@material-ui/icons/PhotoCamera';
 import Resolution from '@material-ui/icons/Crop';
 import Photographer from '@material-ui/icons/Person';
 
+const toDataURL = async (url) => {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return URL.createObjectURL(blob);
+}
+
+const downloadImage = async (info) => {
+  const link = document.createElement('a');
+  link.href = await toDataURL(info.url);
+  // todo: make this a bit cleaner
+  link.download = `mue-${info.credit.toLowerCase().replaceAll(' ', '-')}-${info.location.toLowerCase().replaceAll(',', '').replaceAll(' ', '-')}.jpg`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 export default function PhotoInformation(props) {
   const language = window.language.widgets.background;
 
@@ -28,7 +44,8 @@ export default function PhotoInformation(props) {
         <Resolution/>
         <span>{props.info.resolution}</span>
         <Photographer/>
-        <span>{props.info.credit.split(' on Unsplash')[0]}</span>
+        <span>{props.info.credit.split(` ${language.unsplash}`)[0]}</span>
+        <button className='download' onClick={() => downloadImage(props.info)}>{language.download}</button>
       </div>
     </div>
   );

src/components/widgets/background/scss/_photoinformation.scss

@@ -72,4 +72,28 @@
   &:hover {
     display: block !important;
   }
+
+  .download {
+    transition: ease 0.33s;
+    color: var(--modal-text);
+    background-color: rgba(83, 82, 237, 1);
+    cursor: pointer;
+    padding: 10px 30px;
+    font-size: 20px;
+    border-radius: 24px;
+    box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
+
+    border: 2px solid rgba(83, 82, 237, 1);
+    color: var(--modal-text);
+  
+    &:hover {
+      color: rgba(83, 82, 237, 1);
+    }
+  
+    &:hover,
+    &:active {
+      outline: none;
+      background: none;
+    }
+  }
 }

src/translations/en_GB.json

@@ -12,7 +12,9 @@
     },
     "background": {
       "credit": "Photo by",
-      "information": "Information"
+      "unsplash": "on Unsplash",
+      "information": "Information",
+      "download": "Download"
     },
     "search": "Search",
     "navbar": {
@@ -111,7 +113,8 @@
             "buttons": {
               "title": "Buttons",
               "view": "View",
-              "favourite": "Favourite"
+              "favourite": "Favourite",
+              "download": "Download"
             },
             "effects": {
               "title": "Effects",