Violet/SimpleTube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Searching!!!

Browse source
This commit is contained in:
Violet 2023-10-29 00:08:28 +00:00
parent 5e6dddb8c1
commit 00eb2b5979
5 changed files with 168 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
index.js
View file

@ -16,6 +16,7 @@ const resources = path.join(__dirname, 'resources')
const cachePath = path.join(__dirname, 'cache') const cachePath = path.join(__dirname, 'cache')
const playerPath = path.join(resources, 'player.html') const playerPath = path.join(resources, 'player.html')
const searchPath = path.join(resources, 'searchPage.html')
const cssHeader = `<style> ${fs.readFileSync(cssPath)} </style>` const cssHeader = `<style> ${fs.readFileSync(cssPath)} </style>`
@ -39,6 +40,44 @@ app.listen(PORT, () => {
console.log("Simpletube is now listening on port: " + PORT) console.log("Simpletube is now listening on port: " + PORT)
}) })
app.get("/search", async (req, res) => {
var search = req.query.q || "How to search on SimpleTube"
res.setHeader("Content-Type", "text/html")
youtube.search(search).then((results) => {
var videos = results.videos
var html = fs.readFileSync(searchPath).toString()
html = html.replace("{SEARCH}", search)
var addedHTML = ""
for (let index = 0; index < videos.length; index++) {
const result = videos[index];
addedHTML += `
<div class="videoResult container row">
<div class="col-md-4 col-sm-6">
<a class="videoLink" href="/watch?q=${result.id}">
<img src="${result.thumbnail}">
</a>
</div>
<div class="col-md-8 col-sm-6">
<a class="videoLink" href="/watch?q=${result.id}">
<h3>${result.title}</h3>
<p>${result.description}</p><br>
<img src="${result.channel.thumbnail}" class="minipfp">
<a style="color: white; class="videoLink" href="${result.channel.link}">${result.channel.name}</a>
</a>
</div>
</div>
`
console.log(result)
}
res.send(html.replace("{RESULTS}", addedHTML))
})
})
app.get("/video", async (req, res) => { app.get("/video", async (req, res) => {
var id = req.query.q || req.query.v var id = req.query.q || req.query.v
@ -134,7 +173,7 @@ app.get("/video", async (req, res) => {
}) })
app.get("/watch", async (req, res) => { app.get("/watch", async (req, res) => {
var id = req.query.q || req.query.v var id = req.query.q || req.query.v || "ubFq-wV3Eic"
res.setHeader("Content-Type", "text/html") res.setHeader("Content-Type", "text/html")
@ -157,8 +196,11 @@ app.get("/watch", async (req, res) => {
html = html.replace("{CSS_HEADER}", cssHeader) html = html.replace("{CSS_HEADER}", cssHeader)
for (let index = 0; index < 2; index++) {
html = html.replace("{VIDEO_TITLE}", vidInfo.title) html = html.replace("{VIDEO_TITLE}", vidInfo.title)
}
html = html.replace("{VIDEO_DESCRIPTION}", vidInfo.description || "No Description.") html = html.replace("{VIDEO_DESCRIPTION}", vidInfo.description || "No Description.")
if (!(id in videoCache && videoCache[id]["downloaded"] == true)) { if (!(id in videoCache && videoCache[id]["downloaded"] == true)) {

16
resources/player.html
View file

@ -5,15 +5,25 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
{CSS_HEADER} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="/mainStyle.css">
<title>Document</title>
<title>{VIDEO_TITLE}</title>
</head> </head>
<body> <body>
<div id="titleBar"> <div id="titleBar" class="row container-fluid">
<div class="col-sm-5">
<h1><a href="/">Simpletube</a></h1> <h1><a href="/">Simpletube</a></h1>
</div> </div>
<div class="col-sm-7">
<form action="/search">
<input type="text" placeholder="Search" name="q">
</form>
</div>
</div>
<div id="videoContainer"> <div id="videoContainer">
<video id="videoPlayer" controls autoplay poster="{VIDEO_THUMBNAIL}"> <video id="videoPlayer" controls autoplay poster="{VIDEO_THUMBNAIL}">
<source src="/video?q={VIDEOID}" type="video/mp4"> <source src="/video?q={VIDEOID}" type="video/mp4">

33
resources/searchPage.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="./mainStyle.css">
<title>SimpleTube</title>
</head>
<body>
<div id="titleBar" class="row container-fluid">
<div class="col-sm-5">
<h1><a href="/">Simpletube</a></h1>
</div>
<div class="col-sm-7">
<form action="/search">
<input type="text" placeholder="Search" name="q" value="{SEARCH}">
</form>
</div>
</div>
<main>
<div class="container-fluid row" style="margin: 0; padding: 0;">
{RESULTS}
</div>
</main>
</body>
</html>

13
static/index.html
View file

@ -5,14 +5,23 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="./mainStyle.css"> <link rel="stylesheet" href="./mainStyle.css">
<title>SimpleTube</title> <title>SimpleTube</title>
</head> </head>
<body> <body>
<div id="titleBar"> <div id="titleBar" class="row container">
<h1>SimpleTube</h1> <div class="col-sm-5">
<h1><a href="/">Simpletube</a></h1>
</div>
<div class="col-sm-7">
<form action="/search">
<input type="text" placeholder="Search" name="q">
</form>
</div>
</div> </div>
<main> <main>
<h1>Welcome to SimpleTube</h1> <h1>Welcome to SimpleTube</h1>

76
static/mainStyle.css
View file

@ -1,5 +1,5 @@
body { body, html {
height: 100vh; min-height: 100vh;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: rgb(40, 30, 50); background-color: rgb(40, 30, 50);
@ -8,10 +8,15 @@ body {
* { * {
color: white; color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 2.5rem; line-height: 1.5rem;
} }
a:not(h1 > a) { /* div {
padding: 0 !important;
margin: 0 !important;
} */
a:not(h1 > a):not(.videoLink) {
font-size: 1.5rem; font-size: 1.5rem;
background-color: black; background-color: black;
padding: 8px; padding: 8px;
@ -22,7 +27,13 @@ a:not(h1 > a) {
text-decoration: none; text-decoration: none;
} }
h1:not(#titleBar > h1), h2, p, a { .videoLink {
text-decoration: none;
padding: 0;
margin: 0;
}
*:not(input) {
text-align: center; text-align: center;
} }
@ -31,20 +42,45 @@ h1:not(#titleBar > h1), h2, p, a {
} }
#titleBar { #titleBar {
width: 100vw;
background-color: rgb(5, 0, 10); background-color: rgb(5, 0, 10);
/* border: 0px; */ /* border: 0px; */
border: 2px transparent solid; border: 2px transparent solid;
border-bottom-color: white; border-bottom-color: white;
position: sticky; position: sticky;
top: 0px; top: 0px;
margin: 0;
padding: 0;
} }
#titleBar > h1 { #titleBar > div > * {
margin: 10px; display: inline-block;
padding: 0;
margin: 0;
} }
#titleBar > h1 > a { #titleBar > div > form > input {
/* text-align: right; */
margin: auto;
padding: 5px;
width: 100%;
background-color: rgb(10, 5, 15);
border: 2px gray solid;
}
#titleBar > div {
padding: 0;
margin: 0;
}
#titleBar > div > form {
display: inline-block;
width: 100%;
}
#titleBar > div > h1 > a {
text-decoration: none; text-decoration: none;
color: white;
} }
#description { #description {
@ -68,8 +104,6 @@ h1:not(#titleBar > h1), h2, p, a {
#videoContainer { #videoContainer {
max-width: 100vw; max-width: 100vw;
padding: 0;
margin: 0;
display: flex; display: flex;
background-color: black; background-color: black;
} }
@ -77,3 +111,25 @@ h1:not(#titleBar > h1), h2, p, a {
p { p {
padding: 5px; padding: 5px;
} }
.videoResult {
background-color: black;
border: 2px gray solid;
border-radius: 10px;
padding: 10px;
margin: 10px;
text-align: left;
}
img {
width: 70%;
}
.minipfp {
width: 60px;
height: 60px;
border: 2px white solid;
border-radius: 50%;
padding: 0;
margin: 0;
}