Skip to content

Commit

Permalink
refactor: remove all inline functions
Browse files Browse the repository at this point in the history
  • Loading branch information
knownblackhat committed Aug 19, 2023
1 parent c8fd5df commit d53e8d3
Show file tree
Hide file tree
Showing 16 changed files with 365 additions and 347 deletions.
50 changes: 50 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
/build
build
6 changes: 3 additions & 3 deletions build/asset-manifest.json
Original file line number Diff line number Diff line change
@@ -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"
]
}
2 changes: 1 addition & 1 deletion build/index.html
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 0 additions & 3 deletions build/static/js/main.a52a01da.js

This file was deleted.

56 changes: 0 additions & 56 deletions build/static/js/main.a52a01da.js.LICENSE.txt

This file was deleted.

1 change: 0 additions & 1 deletion build/static/js/main.a52a01da.js.map

This file was deleted.

8 changes: 1 addition & 7 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -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 () {
Expand All @@ -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}/>

</>
Expand Down
112 changes: 112 additions & 0 deletions src/components/Main.js
Original file line number Diff line number Diff line change
@@ -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>


</>
)
}
85 changes: 85 additions & 0 deletions src/components/MediaCard.js
Original file line number Diff line number Diff line change
@@ -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>
)
}

Loading

0 comments on commit d53e8d3

Please sign in to comment.