feat(client): added download feature : You can now download the curre…

…nt video on your device

src/App.js

@@ -32,6 +32,22 @@ const App = () => {
   const [muted, setMuted] = useState(true);
   const toggleMute = () => setMuted(!muted);
 
+  // Video control - Download the current video
+  const download = () => {
+    const url = videos[0].url;
+
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = url.split("/").pop();
+    anchor.target = "_blank";
+
+    document.body.appendChild(anchor);
+
+    anchor.click();
+
+    document.body.removeChild(anchor);
+  };
+
   // Member - Saves a ref to every video element on the page
   const videoRefs = useRef([]);
   const saveVideoRef = (index) => (ref) => {

src/components/BottomNavbar/index.jsx

@@ -1,16 +1,16 @@
 // Assets
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faVolumeMute, faVolumeUp } from '@fortawesome/free-solid-svg-icons';
-import './index.css';
+import { faDownload, faVolumeMute, faVolumeUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./index.css";
 
-const BottomNavbar = ({ isMuted, onToggleMute }) => {
+const BottomNavbar = ({ isMuted, onToggleMute, onDownload }) => {
   return (
     <div className="bottom-navbar">
+      <button type="button" className="nav-item" onClick={onDownload}>
+        <FontAwesomeIcon icon={faDownload} className="icon" />
+      </button>
       <button type="button" className="nav-item" onClick={onToggleMute}>
-        <FontAwesomeIcon
-          icon={!isMuted ? faVolumeUp : faVolumeMute}
-          className="icon"
-        />
+        <FontAwesomeIcon icon={!isMuted ? faVolumeUp : faVolumeMute} className="icon" />
       </button>
     </div>
   );