feat: download image button (wip)

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;
+    }
+  }
 }