refactor: remove all inline functions

KnownBlackHat · Aug 19, 2023 · d53e8d3 · d53e8d3
1 parent c8fd5df
commit d53e8d3
Show file tree

Hide file tree

Showing 16 changed files with 365 additions and 347 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: build
+        env:
+          BASE_PATH: '/Reddit-Media'
+        run: |
+          npm run build
+          touch build/.nojekyll
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
+/build
+build
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,12 +1,12 @@
 {
   "files": {
-    "main.js": "/static/js/main.a52a01da.js",
+    "main.js": "/static/js/main.bc997fcd.js",
     "static/media/search_icon.svg": "/static/media/search_icon.49bacb095624436cefc2d9ddfb4faf93.svg",
     "static/media/loading.svg": "/static/media/loading.3b880ed28667ba8a691cd8639b2269c6.svg",
     "index.html": "/index.html",
-    "main.a52a01da.js.map": "/static/js/main.a52a01da.js.map"
+    "main.bc997fcd.js.map": "/static/js/main.bc997fcd.js.map"
   },
   "entrypoints": [
-    "static/js/main.a52a01da.js"
+    "static/js/main.bc997fcd.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><script defer="defer" src="https://cdn.tailwindcss.com"></script><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="./static/js/main.a52a01da.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><script defer="defer" src="https://cdn.tailwindcss.com"></script><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.bc997fcd.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/static/js/main.a52a01da.js b/build/static/js/main.a52a01da.js
diff --git a/build/static/js/main.a52a01da.js.LICENSE.txt b/build/static/js/main.a52a01da.js.LICENSE.txt
diff --git a/build/static/js/main.a52a01da.js.map b/build/static/js/main.a52a01da.js.map
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import LoadingBar from "react-top-loading-bar";
 import Navbar from "./components/Navbar";
-import VideoForm from "./components/NewsForm";
+import VideoForm from "./components/Main.js";
 
 
 export default function App () {
@@ -20,12 +20,6 @@ export default function App () {
 			<LoadingBar  height={3}  progress={progress} />
 				<Navbar unsafe_filter={unsafe_filter} setunsafe_filter={setunsafe_filter} setquery={setquery} setspeed={setspeed} setsubreddit={setsubreddit} />
 
-                <div className="text-center text-white rounded font-bold bg-yellow-500">
-                    We Have a discord server! <a href="https://discord.gg/2uYRT2KmBU" className="text-blue-500">Join Now</a>
-        <br />
-                    Give feedback on our discord server and get the latest updates!
-                </div>
-
 				<VideoForm unsafe_filter={unsafe_filter} setProgress={setProgress} key={query.concat(subreddit)} amount={size} speed={speed} query={query} subreddit={subreddit}/>
 
 			</>

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -0,0 +1,112 @@
+import { useState, useEffect, useRef } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import MediaCard from "./MediaCard";
+import Spinner from "./Spinner";
+export default function Main (props) {
+
+    const [content,setcontent] = useState([])
+    const [after, setafter] = useState()
+    const [loading,setloading] = useState(false)
+    const [error,seterror] = useState(null)
+    const prop = useRef(props)
+    const url = useRef()
+    const fetchMoreData= async () => {
+        if (props.query) {
+            url.current = `https://www.reddit.com/r/${props.subreddit}/search.json?raw_json=1&limit=${props.amount}&include_over_18=${props.unsafe_filter}&type=link&after=${after}&q=${props.query}`
+        }
+        else {
+            url.current=`https://www.reddit.com/r/${props.subreddit}.json?raw_json=1&limit=${props.amount}&include_over_18=${props.unsafe_filter}&type=link&after=${after}`
+        }
+
+        try {
+            const data = await fetch(url.current)
+            const parsedData = await data.json()
+            setcontent(content.concat(parsedData.data.children))
+            setafter(parsedData.data.after)
+        }
+
+        catch { 
+            seterror("Unable To Find")
+        }}
+
+    useEffect(()=>{
+        const fetchinit = async ()=>{
+            prop.current.setProgress(10)
+            setloading(true)
+            if (prop.current.query) {
+                url.current = `https://www.reddit.com/r/${prop.current.subreddit}/search.json?raw_json=1&limit=${prop.current.amount}&include_over_18=${prop.current.unsafe_filter}&type=link&q=${prop.current.query}`
+            }
+            else {
+                url.current =`https://www.reddit.com/r/${prop.current.subreddit}.json?raw_json=1&limit=${prop.current.amount}&include_over_18=${prop.current.unsafe_filter}&type=link`
+            }
+            prop.current.setProgress(40)
+            try {
+                const data = await fetch(url.current)
+                prop.current.setProgress(60)
+                const parsedData = await data.json()
+                prop.current.setProgress(80)
+                setcontent(parsedData.data.children)
+                setafter(parsedData.data.after)
+                prop.current.setProgress(100)
+                setloading(false)
+            }
+
+            catch { 
+                setloading(false)
+                seterror("Unable To Find")
+                prop.current.setProgress(100)
+            }}
+
+        fetchinit()
+    },[prop])
+
+    return (
+        <>
+        { loading ? <Spinner />: <div className="text-center text-white"> {props.query?<strong>Topic: </strong>:null}{props.query} <strong>Subreddit: </strong>{props.subreddit} </div>}
+
+        <div className="text-red-600 text-center font-bold">{error}</div>
+
+        <InfiniteScroll 
+        dataLength={content.length}
+        next={fetchMoreData}
+        loader={<Spinner />}
+        hasMore={ after?true:false }
+        endMessage={ content.length>0?<div 
+            className="text-center p-4"><strong>Yay! You have seen it all</strong></div>:null}	
+        >
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 m-4 p-2 gap-5">
+
+
+
+        {content && content.map((item) => {
+
+            return <MediaCard
+
+
+            key={item.data.id}
+
+            headline={item.data.title}
+
+            newslink={item.data.url}
+
+
+            media={
+                item.data.is_video?(item.data.media && item.data.media.reddit_video && item.data.media.reddit_video.fallback_url):(item.data.preview && item.data.preview.reddit_video_preview && item.data.preview.reddit_video_preview.fallback_url)
+
+            }
+
+            image={
+                (item.data.url.match(/.*\.(gif|gifv|jpg|png|jpeg)$/) && item.data.url)	||	(item.data.preview && item.data.preview.images[0].variants.gif && item.data.preview.images[0].variants.gif.url)	||	(item.data.preview &&  item.data.preview.images[0].source?item.data.preview.images[0].source.url:item.data.thumbnail) 
+            }
+            speed={props.speed}
+
+                />
+        })}
+
+        </div>
+        </InfiniteScroll>
+
+
+        </>
+    )
+}
diff --git a/src/components/MediaCard.js b/src/components/MediaCard.js
@@ -0,0 +1,85 @@
+import { useRef } from "react";
+export default function MediaCard (props) {
+    const { image, media, headline, newslink, speed } = props
+    const video = useRef();
+    const handleFocus = () => {
+        video.current && !video.current.classList.contains("fixed") &&  video.current.play();
+        video.current && (video.current.playbackRate = speed) 
+    };
+    const handleBlur = () => {video.current && !video.current.classList.contains("fixed") && video.current.pause()};
+    const handleVideoError = (e) => {
+        e.target.onerror = null;
+        e.target.src = "https://st4.depositphotos.com/1760000/26984/v/600/depositphotos_269846914-stock-video-neon-frame-light-on-brick.mp4" 
+    };
+    const handleClickVideo = (e) => {
+        document.body.classList.add("overflow-y-hidden"); 
+        e.target.classList.add("fixed", "inset-0", "w-screen", "h-screen","z-20");
+        e.target.controls = "controls";
+        e.target.play();
+        let element = document.createElement("span");
+        document.addEventListener("keydown", (key)=>{key.code==="KeyF" && element.click()});
+        element.classList.add("fixed", "top-0", "right-0", "p-2", "mx-4", "my-2", "cursor-pointer","z-20");
+        element.innerHTML = '<svg class="h-10 md:h-[4rem] w-fit" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72px" height="72px" viewBox="0,0,256,256"><g fill="#2300ff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(3.55556,3.55556)"><path d="M58,29.5v13c0,14.375 -1.125,15.5 -15.5,15.5h-13c-14.375,0 -15.5,-1.125 -15.5,-15.5v-13c0,-14.375 1.125,-15.5 15.5,-15.5h13c14.375,0 15.5,1.125 15.5,15.5zM45.485,41.243c-0.254,-0.254 -2.542,-2.543 -5.242,-5.243c2.7,-2.7 4.989,-4.989 5.243,-5.243c1.171,-1.171 1.172,-3.071 0,-4.243c-1.172,-1.172 -3.071,-1.172 -4.243,0c-0.254,0.255 -2.543,2.543 -5.243,5.243c-2.7,-2.7 -4.989,-4.989 -5.243,-5.243c-1.171,-1.172 -3.071,-1.172 -4.243,0c-1.172,1.172 -1.171,3.071 0,4.243c0.254,0.254 2.542,2.542 5.243,5.243c-2.7,2.7 -4.989,4.989 -5.243,5.243c-1.171,1.172 -1.172,3.071 0,4.243c1.172,1.172 3.071,1.171 4.243,0c0.254,-0.254 2.542,-2.542 5.243,-5.243c2.7,2.7 4.989,4.989 5.243,5.243c1.171,1.171 3.071,1.172 4.243,0c1.171,-1.172 1.171,-3.072 -0.001,-4.243z"></path></g></g></svg>';
+        element.addEventListener("click", () => { e.target.pause();
+            e.target.classList.remove("fixed", "inset-0", "w-screen", "h-screen","z-20");
+            e.target.controls = null;
+            document.body.classList.remove("overflow-y-hidden");
+            element.remove();});
+        document.body.append(element);
+    };
+    const handleClickImage = (e) => {
+        document.body.classList.add("overflow-y-hidden") ;
+        e.target.classList.add("h-screen","z-20");
+        e.target.parentElement.classList.add("fixed","z-20");
+        let element = document.createElement("span") ;
+        element.classList.add("fixed", "top-0", "right-0", "p-2", "mx-4", "my-2", "cursor-pointer","z-20") ;
+        document.addEventListener("keydown", (key)=>{key.code==="KeyF" && element.click()});
+        element.innerHTML = '<svg class="h-10 md:h-[4rem] w-fit" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72px" height="72px" viewBox="0,0,256,256"><g fill="#2300ff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(3.55556,3.55556)"><path d="M58,29.5v13c0,14.375 -1.125,15.5 -15.5,15.5h-13c-14.375,0 -15.5,-1.125 -15.5,-15.5v-13c0,-14.375 1.125,-15.5 15.5,-15.5h13c14.375,0 15.5,1.125 15.5,15.5zM45.485,41.243c-0.254,-0.254 -2.542,-2.543 -5.242,-5.243c2.7,-2.7 4.989,-4.989 5.243,-5.243c1.171,-1.171 1.172,-3.071 0,-4.243c-1.172,-1.172 -3.071,-1.172 -4.243,0c-0.254,0.255 -2.543,2.543 -5.243,5.243c-2.7,-2.7 -4.989,-4.989 -5.243,-5.243c-1.171,-1.172 -3.071,-1.172 -4.243,0c-1.172,1.172 -1.171,3.071 0,4.243c0.254,0.254 2.542,2.542 5.243,5.243c-2.7,2.7 -4.989,4.989 -5.243,5.243c-1.171,1.172 -1.172,3.071 0,4.243c1.172,1.172 3.071,1.171 4.243,0c0.254,-0.254 2.542,-2.542 5.243,-5.243c2.7,2.7 4.989,4.989 5.243,5.243c1.171,1.171 3.071,1.172 4.243,0c1.171,-1.172 1.171,-3.072 -0.001,-4.243z"></path></g></g></svg>' ;
+        element.addEventListener("click", () => { e.target.classList.remove("h-screen","h-20") ;
+            e.target.parentElement.classList.remove("fixed","z-20")
+            e.target.controls = null ;
+            document.body.classList.remove("overflow-y-hidden") ;
+            element.remove() ;
+        }) ;
+        document.body.append(element) ;
+    };
+    const handleMouseEnter = () => {video.current && video.current.focus()};
+
+
+
+    return (
+        <div className="container bg-gradient-to-r from-black to-blue-800 border-2 border-white rounded h-fit mx-auto flex flex-col" 
+
+        onFocus={handleFocus}
+
+        onBlur={handleBlur}
+
+        onMouseEnter={handleMouseEnter}>
+
+
+        {media ?
+            <>
+            <div className="flex justify-end"> <span className="bg-red-600 absolute rounded p-1 text-xs"> Video </span> </div>
+            <video defer ref={video}
+            preload="auto" 
+            onError={handleVideoError}
+            loop
+            onClick={handleClickVideo}
+
+            className="rounded h-[15em] w-[100%] bg-black" src={media} alt="Failed to load" /></>
+            :
+            <div className="bg-black inset-0"> <img
+            preload="auto" defer
+            onClick={handleClickImage}
+
+            src={image ? image : "https://media.tenor.com/IHdlTRsmcS4AAAAM/404.gif"} alt="Failed to Load" onError={(e) => { e.target.onerror = null; e.target.src = "https://media.tenor.com/IHdlTRsmcS4AAAAM/404.gif" }} className="rounded  h-[15em] mx-auto bg-black" /></div>}
+
+        <div className="brief p-2 text-sm md:text-lg text-white">
+        <div className="heading p-2 m-2 font-bold "> {headline} </div>
+        </div>
+
+        <div className="text-white text-center mb-4"><a className="p-2 bg-blue-700 rounded" href={newslink} target="_blank" rel="noreferrer">Visit Me</a></div>
+        </div>
+    )
+}
+