added shadow root, purged css and reduced plugin size from 13mb to 308kb

Kehinded · Sep 24, 2021 · 79fb67f · 79fb67f
1 parent 5a6a4b5
commit 79fb67f
Show file tree

Hide file tree

Showing 21 changed files with 14,778 additions and 23,668 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-# uploads/**
+uploads/**
 .idea
 
 # Logs

diff --git a/backend/controllers/file.controller.js b/backend/controllers/file.controller.js
@@ -159,7 +159,7 @@ exports.fileDetails = async (req, res) => {
 exports.fileUpdate = async (req, res) => {
   const { id: fileId } = req.params;
   const { data: [file] } = await File.fetchOne({ _id: fileId });
-
+  
   if (!file) throw new NotFoundError();
 
   await File.update(fileId, body);
@@ -256,21 +256,23 @@ exports.searchFileByIsDeleted = async (req, res) => {
 
 // handle file searching by is starred is true
 exports.searchStarredFiles = async (req, res) => {
-  try {
-    const { data } = await File.fetchAll();
+  const allFiles = await File.fetchAll();
+
+  if (!allFiles) throw new InternalServerError()
 
-    // loop through response object and check if isStarred is true
-    const starredFiles = [];
-    data.map((data) => {
-      return data.isStarred ? starredFiles.push(data) : null;
-    });
+  const data = allFiles.data.filter(file => {
 
-    response = await RealTime.publish('starred_files', starredFiles)
+    return file.isStarred === true;
 
-    return res.status(200).json({ status: 200, statusText: 'success', ...response });
+  })
+
 
-  } catch (error) {
-    return res.send({ error })
+  if ((data.length)<1) {
+    await RealTime.publish('starred_files', {})
+    return res.status(200).send(appResponse('No Starred File(s)!', {}, true));
+  } else {
+    await RealTime.publish('starred_files',data)
+    res.status(200).send(appResponse("Starred files", data, true));
   }
 }
 

diff --git a/frontend/src/components/AudioPreview/index.js b/frontend/src/components/AudioPreview/index.js
@@ -1,12 +1,22 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState, useLayoutEffect } from "react";
 import Nav from "../Subcomponents/nav";
-import { FaPlay, FaPause, FaForward, FaBackward } from "react-icons/fa/index";
-import { GiSpeaker } from "react-icons/gi";
+import {
+  FaPlay,
+  FaPause,
+  FaForward,
+  FaBackward,
+  FaUndo,
+} from "react-icons/fa/index";
+import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import Minimize from "../../../public/Icons/minimize/active.svg";
 
 function index({ file, setOpenStatus }) {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [time, setTime] = useState(0);
+  const [progress, setProgress] = useState(0);
   const [audio] = useState(new Audio(file.url));
+  audio.volume = 0.1;
 
   function playPause() {
     if (isPlaying) {
@@ -17,12 +27,54 @@ function index({ file, setOpenStatus }) {
     setIsPlaying(!isPlaying);
   }
 
-  useEffect(() => {
-    console.log(audio.duration);
-    console.log(audio.currentTime);
-  }, [isPlaying]);
+  function muteUnmute() {
+    setIsMuted(!isMuted);
+    audio.muted = !audio.muted;
+  }
+
+  function forward() {
+    if (audio.currentTime < audio.duration) {
+      audio.currentTime += 10;
+    }
+  }
+
+  function backward() {
+    if (audio.currentTime > 0) {
+      audio.currentTime -= 10;
+    }
+  }
+
+  function restart() {
+    // restart audio from the beginning
+    audio.currentTime = 0;
+    if (!isPlaying) {
+      audio.play();
+      setIsPlaying(true);
+    }
+  }
 
-  useEffect(() => {
+  function setPosition(e) {
+    console.log(this);
+    const width = e.target.clientWidth;
+    const clickX = e.nativeEvent.offsetX;
+    console.log(width, clickX, e);
+    const duration = audio.duration;
+    audio.currentTime = (clickX / width) * duration;
+  }
+
+  useLayoutEffect(() => {
+    function formatTime(seconds) {
+      let minutes = Math.floor(seconds / 60);
+      minutes = minutes >= 10 ? minutes : "0" + minutes;
+      seconds = Math.floor(seconds % 60);
+      seconds = seconds >= 10 ? seconds : "0" + seconds;
+      return minutes + ":" + seconds;
+    }
+    audio.addEventListener("timeupdate", () => {
+      setTime(formatTime(audio.currentTime));
+      setProgress((audio.currentTime / audio.duration) * 100);
+    });
+    console.log(time, progress, audio.volume);
     audio.addEventListener("ended", () => setIsPlaying(false));
     return () => {
       audio.removeEventListener("ended", () => setIsPlaying(false));
@@ -34,44 +86,74 @@ function index({ file, setOpenStatus }) {
       <Nav file={file} setOpenStatus={setOpenStatus} />
       <div className="flex flex-col justify-between items-center h-3/4 w-full">
         <div className="flex h-full w-full md:px-6 px-2 justify-center">
-          <div className="flex w-3/4 items-center justify-center relative bg-black px-4 md:px-48">
+          <div className="flex w-3/5 items-center justify-center relative bg-black px-4 md:px-48">
             <img
               src="https://images.unsplash.com/photo-1548032885-b5e38734688a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2455&q=80"
               alt="music"
-              className="h-60 w-80"
+              className="h-60 w-96"
             />
-            <div className="absolute bottom-7">
-              <div className="bg-green-100 min-w-max h-1">
-                <div className="bg-green-400 h-1"></div>
+            <div className="absolute bottom-7 w-full px-3">
+              <div
+                className="bg-green-100 min-w-max h-1"
+                onClick={(e) => setPosition(e)}
+              >
+                <div
+                  className="bg-green-400 h-1"
+                  style={{ width: `${progress}%` }}
+                ></div>
               </div>
-              <div className="flex justify-between">
-                <div>
-                  <GiSpeaker className="text-white text-xl" />
+              <div className="flex justify-between mt-3">
+                <div className="flex items-center">
+                  {!isMuted ? (
+                    <GiSpeaker
+                      className="text-white text-xl"
+                      onClick={() => muteUnmute()}
+                      title="Mute"
+                    />
+                  ) : (
+                    <GiSpeakerOff
+                      className="text-white text-xl"
+                      onClick={() => muteUnmute()}
+                      title="Unmute"
+                    />
+                  )}
                 </div>
-                <div className="flex flex-row">
-                  <FaBackward className="text-white text-xl" />
+                <div className="flex flex-row items-center">
+                  <FaUndo
+                    className="text-white text-sm: md:text-xl mr-2"
+                    onClick={() => restart()}
+                    title="Restart"
+                  />
+                  <FaBackward
+                    className="text-white text-sm: md:text-xl hover:text-green-300 mr-2"
+                    onClick={() => backward()}
+                    title="Backward"
+                  />
                   {!isPlaying ? (
                     <FaPlay
-                      className="text-green-500 text-xl"
+                      className="text-green-500 text-sm: md:text-xl mr-2"
                       onClick={() => playPause()}
+                      title="Play"
                     />
                   ) : (
                     <FaPause
-                      className="text-green-500 text-xl"
+                      className="text-green-500 text-sm: md:text-xl mr-2"
                       onClick={() => playPause()}
+                      title="Pause"
                     />
                   )}
-                  <FaForward className="text-white text-xl" />
-                  <span>0:02</span>
+                  <FaForward
+                    className="text-white text-sm: md:text-xl hover:text-green-300 mr-2"
+                    onClick={() => forward()}
+                    title="Forward"
+                  />
+                  <span className="text-white text-sm: md:text-xl">{time}</span>
                 </div>
-                <div>
-                  <img src={Minimize} alt="minimize" />
+                <div className="flex items-center">
+                  <img src={Minimize} alt="minimize" title="minimize" />
                 </div>
               </div>
             </div>
-            {/* <audio src={file.url} ref={audioFile}>
-              Your browser does not support the <code>audio</code> element
-            </audio> */}
           </div>
         </div>
       </div>

diff --git a/frontend/src/components/FileUpload/SelectFileModal.js b/frontend/src/components/FileUpload/SelectFileModal.js
@@ -98,7 +98,7 @@ const SelectFileModal = ({
                   onChange={handleFileSelection}
                 />
 
-                <span className="hover:text-white px-3 py-2 hover:bg-green-500 rounded-md text-center cursor-pointer">
+                <span className="border border-green-100 hover:text-white px-3 py-2 hover:bg-green-500 rounded-md text-center cursor-pointer">
                   Choose Files
                 </span>
                 {files && <span>{`${files.length} selected`}</span>}
@@ -123,7 +123,7 @@ const SelectFileModal = ({
                     key={file.name}
                   >
                     <div className="w-[350px] truncate">{file.name}</div>
-                    <div>{(file.size / 1000000).toFixed(3)}MB</div>
+                    <div>{(file.size / 1000000).toFixed(2)}MB</div>
                   </div>
                 ))}
               </div>