feat(client): added blacklist manager to view and unmask previously-m…

…asked videos

src/App.css

@@ -146,6 +146,9 @@ body {
   transition: border-color 0.3s;
   border: 1px solid blue;
 }
+button.btn-alternate {
+  background: transparent;
+}
 .login-state button:hover,
 .empty-state button:hover {
   border-color: white;

src/App.js

@@ -10,6 +10,7 @@ import { faCompactDisc } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import "./App.css";
 import BottomMetadata from "./components/BottomMetadata";
+import BlacklistManager from "./components/BlacklistManager";
 
 const App = () => {
   // Misc - General niceties
@@ -157,6 +158,13 @@ const App = () => {
   const openBlacklist = () => {
     setBlacklistOpen(true);
   };
+  const hideBlacklist = () => {
+    setBlacklistOpen(false);
+  };
+  const removeFromBlacklist = (v) => {
+    _removeFromBlacklist(v);
+    setBlacklistUpdater((b) => b + 1);
+  };
 
   // Member - Saves a ref to every video element on the page
   const videoRefs = useRef([]);
@@ -354,13 +362,14 @@ const App = () => {
     const observer = new IntersectionObserver(handleIntersection, observerOptions);
 
     // Attach the observer to every video component
-    for (let i = 0; i < videoRefs.current.length; i++) observer.observe(videoRefs.current[i]);
+    for (let i = 0; i < videoRefs.current.length; i++)
+      if (videoRefs.current[i]) observer.observe(videoRefs.current[i]);
 
     // Disconnect the observer when unmounting
     return () => {
       observer.disconnect();
     };
-  }, [videos]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [videos, blackListUpdater]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="screen">
@@ -412,6 +421,20 @@ const App = () => {
                 <button type="button" onClick={_reloadPage}>
                   Refresh
                 </button>
+
+                {_getBlacklist().length > 0 && (
+                  <>
+                    <button type="button" className="btn-alternate" onClick={openBlacklist}>
+                      Manage masked videos
+                    </button>
+                    <BlacklistManager
+                      visible={blacklistOpen}
+                      videos={_getBlacklist()}
+                      onClose={hideBlacklist}
+                      onUnmask={removeFromBlacklist}
+                    />
+                  </>
+                )}
               </div>
             )}
 
@@ -437,6 +460,12 @@ const App = () => {
                   onBlacklist={blacklist}
                   onOpenBlacklist={openBlacklist}
                 />
+                <BlacklistManager
+                  visible={blacklistOpen}
+                  videos={_getBlacklist()}
+                  onClose={hideBlacklist}
+                  onUnmask={removeFromBlacklist}
+                />
               </>
             )}
           </>

src/components/BlacklistManager/index.css

@@ -0,0 +1,142 @@
+.blacklist-manager {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  transition: transform 0.3s;
+  transform: translateY(-100vh);
+}
+.blacklist-manager .blacklist-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.blacklist-inner .blacklist-header {
+  height: 60px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: blue;
+  flex-shrink: 0;
+}
+.blacklist-header span {
+  color: white;
+  font-family: "Inter", sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+}
+.blacklist-content {
+  height: 100%;
+  width: 100%;
+  background: black;
+  overflow: auto;
+}
+.blacklist-controls {
+  background: #161616;
+  height: 56px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.blacklist-controls button {
+  outline: 0;
+  border: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  height: 100%;
+  cursor: pointer;
+}
+.blacklist-controls button svg {
+  font-size: 18px;
+  color: #d4d3d3;
+  width: 24px;
+  height: 24px;
+}
+.blacklist-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.blacklist-placeholder p {
+  color: white;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 500;
+  max-width: 80%;
+  font-family: "Inter", sans-serif;
+  line-height: 150%;
+}
+.blacklist-manager.visible {
+  transform: translateY(0);
+}
+.blacklist-entry {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 96px;
+  background: white;
+  border-bottom: 1px solid #161616;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.blacklist-entry .left {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 90%;
+}
+.blacklist-entry .left p {
+  max-width: 240px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+  font-family: "Inter", sans-serif;
+  color: black;
+  font-weight: 600;
+  height: 18px;
+}
+.blacklist-entry .left a {
+  margin-top: 10px;
+  font-family: "Inter", sans-serif;
+  text-decoration: none;
+  color: #002dff;
+}
+.blacklist-entry .right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  margin-left: auto;
+  flex-shrink: 0;
+  width: 48px;
+}
+.blacklist-entry .right button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: green;
+  height: 48px;
+  width: 48px;
+  border-radius: 23051998px;
+  outline: 0;
+  border: 0;
+}
+.blacklist-entry .right button svg {
+  font-size: 18px;
+  color: white;
+}

src/components/BlacklistManager/index.jsx

@@ -0,0 +1,55 @@
+// Assets
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./index.css";
+import { faClose, faEye } from "@fortawesome/free-solid-svg-icons";
+
+const BlacklistManager = ({ visible, videos, onClose, onUnmask }) => {
+  return (
+    <div className={`blacklist-manager ${visible ? "visible" : ""}`}>
+      <div className="blacklist-inner">
+        <div className="blacklist-header">
+          <span>Masked videos</span>
+        </div>
+        <div className="blacklist-content">
+          {/* EMPTY STATE */}
+          {!videos ||
+            (videos.length === 0 && (
+              <div className="blacklist-placeholder">
+                <p>You currently have no videos masked from your feed</p>
+              </div>
+            ))}
+
+          {/* FULL STATE */}
+          {videos &&
+            videos.map((v) => (
+              <div key={v.url} className="blacklist-entry">
+                <div className="left">
+                  <p>{v.title}</p>
+                  <a href={v.url} target="_blank" rel="noreferrer">
+                    View in a new tab
+                  </a>
+                </div>
+                <div className="right">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onUnmask(v);
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faEye} />
+                  </button>
+                </div>
+              </div>
+            ))}
+        </div>
+        <div className="blacklist-controls">
+          <button type="button" onClick={onClose}>
+            <FontAwesomeIcon icon={faClose} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlacklistManager;

src/components/BottomNavbar/index.css

@@ -20,6 +20,7 @@
   background: transparent;
   outline: 0;
   border: 0;
+  cursor: pointer;
 }
 
 .bottom-navbar .icon {