This commit is contained in:
TylerCG 2025-04-27 19:54:42 -04:00
parent ff586b48ee
commit a95479bf62
5 changed files with 471 additions and 3 deletions

View File

@ -12,7 +12,7 @@ app = FastAPI()
app.mount("/data", StaticFiles(directory="/data"), name="data")
templates = Jinja2Templates(directory="templates")
templates = Jinja2Templates(directory="app/templates")
loop = asyncio.get_running_loop()
# JSON cache
@ -74,7 +74,7 @@ async def ydl(url: str, location: str):
return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
@app.get("/", response_class=HTMLResponse)
@app.get("/", include_in_schema=False, response_class=HTMLResponse)
async def index(request: Request):
global cached_data
try:
@ -98,4 +98,11 @@ async def index(request: Request, show = str):
except Exception as e:
return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
except Exception as e:
return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})
@app.get("/ydl", include_in_schema=False)
async def webpage(request: Request):
try:
return templates.TemplateResponse("ydl.html", {"request": request})
except Exception as e:
return JSONResponse(status_code=500, content={"status": "error", "message": str(e)})

350
app/static/css/style.css Normal file
View File

@ -0,0 +1,350 @@
:root {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 17px;
background-color: #292F36;
color: #ccc;
}
nav {
width: 100%;
text-align: left;
position: fixed;
z-index: 5;
top: 0;
left: 0;
text-decoration: unset;
background-color: #1b1f24;
& ul {
padding-inline-start: unset;
display: flex;
align-items: center;
margin-block-start: .4em;
margin-block-end: .4em;
& li {
text-align: left;
display: inline-block;
font-size: 1.5em;
& hover {
cursor: pointer;;
}
& a {
display: block;
text-decoration: none; /* no underline */
color: #ccc;
padding: .4em .75em .4em .75em;
}
& a:hover {
color: #f0f0f0;
}
& i {
padding-top: .1em;
}
& .bx-search {
text-align: right;
}
}
& b {
display: unset;
position: absolute;
right: 1em;
padding: .75em .2em;
z-index: 5;
}
}
& form {
all: unset;
display: inline-block;
border: solid 2px #ccc;
border-radius: 2em;
padding: .15em 1em;
top: 0;
& input {
display: block;
all: unset;
}
& button {
all: unset;
top: 5em;
cursor: pointer;
& a {
font-size: 1.5em;
display: block;
position: relative;
bottom: -5;
}
}
}
#dropSearch {
color: #ccc;
& form {
all: unset;
text-align: left;
text-indent: 1em;
& input {
z-index: 6;
float: left;
height: 2.4em;
font-size: 1.2em;
background-color: #1b1f24;
}
}
}
}
#searchFilters {
margin-bottom: 1em;
/* display:none; */
& .selects-container {
display: inline-block;
background-color: #1b1f24;
margin: 0.2em;
text-align: left;
border-radius: .25em;
cursor: pointer;
position: relative;
}
& select {
left:0;
top:0;
all: unset;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #1b1f24;
width: 11ch;
padding: 0.5em;
border-radius: inherit;
}
& a {
padding: 0.5em;
background-color: #2163a1;
border-radius: inherit;
cursor: pointer;
}
& a:hover{
color: #f0f0f0;
}
& i {
right: 0.4em;
top: 0.65em;
position: relative;
float: right;
}
}
#searchButton{
display: none;
}
#searchButton:hover {
cursor: pointer;
}
#glass {
position: fixed;
pointer-events: unset;
height: 100%;
width: 100%;
z-index: 4;
backdrop-filter: blur(10px);
left:0;
top: 0;
}
/* .background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('background.jpg');
background-size: cover;
filter: blur(10px);
z-index: -1;
opacity: 50%;
} */
body {
text-align: center;
margin-top: 5em;
}
@media (min-width: 1171px) {
.downloader{
height: 50px;
}
}
@media (max-width: 1170px) {
:root {
font-size: 40px;
}
.movie {
margin: 75em;
}
#desktopSearch {
display: none;
}
#searchButton {
display: block;
}
#searchFilters {
font-size: 1.2em;
}
#redirect{
width: 300;
height: 300;
}
nav {
text-align: right;
& ul {
display: block;
& b {
left: 1em;
right: unset;
}
}
& li {
border-radius: .5em;
margin-right: .25em;
background-color: rgba(255, 255, 255, 0.10);
box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
}
}
.pageButton {
margin-bottom: 3em;
font-size: 1.1em;
}
.downloader{
height: 125px;
width: 700px;
}
}
.description {
width: 10em;
height: 3em;
overflow: hidden;
& h4 {
margin-block-start: .1em;
margin-block-end: .1em;
display: -webkit-box;
-webkit-line-clamp: 2; /* Number of visible lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
.resDownload {
bottom: 0;
display: unset;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
& .resolution {
font-weight: bold;
color: white;
text-decoration: unset;
display: inline-block;
padding: .25em 1em .5em 1em;
border-radius: .5em;
vertical-align: bottom;
}
& .resError {
background-color: red;
}
}
.resolution_exists {
background-color: #525252;
cursor: not-allowed;
}
.resolution_available {
background-color: #2163a1;
cursor: pointer;
& .resolution_available:active {
background-color: #184875;
}
}
.details {
position: absolute;
margin: .25em;
margin-top: unset;
z-index: 3;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
& .chip {
background-color: rgba(0, 0, 0, 0.45);
border-radius: .5em;
font-size: .75em;
padding: .075em .3em;
display: inline-block;
backdrop-filter: blur(10px);
color: #ccc;
}
& .rating {
color: #fcba03;
}
}
.movie {
margin: .25em;
margin-bottom: 1em;
padding: .5em;
display: inline-block;
border-radius: .75em;
width: 10em;
color: whitesmoke;
background-color: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(10px);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
}
.movie img {
border-radius: .45em;
width: 10em;
height: auto;
position: relative;
z-index: 2;
}
#search {
height: 2em;
}
.pageButton {
margin: auto;
margin-bottom: 2em;
margin-top: 1em;
width: fit-content;
border-radius: 2em;
padding: .5em 0em;
background-color: rgba(255, 255, 255, 0.10);
& a {
padding: .5em 1em;
}
& a:hover {
background-color: #ccc;
cursor: pointer;
color: #292F36;
}
& #leftArrow {
border-radius: 2em 0 0 2em;
}
& #rightArrow {
border-radius: 0 2em 2em 0;
}
}
.disabled-button {
color: rgb(116, 116, 116);
pointer-events: none;
}
.activePage {
text-decoration: underline;
}
.downloader {
font-size: 1.25em;
padding: 0.5em;
border-radius: 0.5em;
margin-bottom: 20px;
}
#redirect{
border-radius: 40px;
margin: 50px;
}

View File

@ -0,0 +1,57 @@
// function showPopup(movie_name) {
// var alert = "Sending download request for " + movie_name + "\n\n" + "Press OK to continue."
// window.alert(alert);
// }
document.addEventListener("DOMContentLoaded", function() {
var inputField = document.getElementById("searchDropdown");
var searchButton = document.getElementById("searchButton");
var matches = document.getElementById("matches");
var dropSearch = document.getElementById("dropSearch");
// window.addEventListener('scroll', () => {
// dropSearch.style.display = 'none';
// });
// Add a click event listener to the element
searchButton.addEventListener("click", function() {
// Toggle the 'display' style property
if (dropSearch.style.display === "none") {
dropSearch.style.display = "unset";
matches.style.display = "none";
} else {
dropSearch.style.display = "none";
matches.style.display = "unset";
}
});
searchButton.addEventListener("click", function() {
inputField.focus(); // Activate the input field
});
});
$(document).ready(function () {
$('.download-link').click(function (event) {
event.preventDefault(); // Prevent the default link behavior
var url = $(this).data('url');
var filename = $(this).data('filename');
var clickedLink = $(this);
// Use AJAX to download the file and save it with the provided filename
$.ajax({
type: 'GET',
url: '/download',
data: { url: url, filename: filename },
success: function (response) {
alert(response); // Display a message indicating success or failure
clickedLink.addClass('resolution_exists');
clickedLink.removeClass('resolution_available');
clickedLink.removeClass('download-link');
},
error: function () {
alert('Error downloading the file.');
}
});
});
});

View File

@ -0,0 +1,21 @@
function clearInput() {
$('#download_field').val(''); // Clear the input field
}
// Handle the form submission with AJAX
$(document).ready(function () {
$('#ydl_download').submit(function (event) {
event.preventDefault(); // Prevent the default form submission
alert("File is now downloading");
$.ajax({
type: 'POST', // Use POST method to send data
url: '/ydl', // Target URL for the CherryPy handler
data: $('#ydl_download').serializeArray(), // Serialize the form data
success: function (data) {
$('#downloadResult').html(data); // Display the result in the specified div
alert("File has finished downloading");
}
});
});
});

33
app/templates/ydl.html Normal file
View File

@ -0,0 +1,33 @@
<html>
<head>
<title>YDL</title>
<link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
<link rel="manifest" href="static/site.webmanifest">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/css/boxicons.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- <div id="glass"></div> -->
<!-- {navBar} -->
<form id="ydl_download">
<input class="downloader" name="url" type="text" id="download_field" placeholder="Enter URL">
<select class="downloader" name="location" id="download_location">
<option value="/nsfw">NSFW</option>
<option value="/podcasts">Podcast</option>
<option value="/asmr">ASMR</option>
<option value="/youtube">YouTube</option>
</select><br>
<button class="downloader" type="submit">Download</button> <!-- Added a submit button -->
</form>
<div id="downloadResult"></div>
</body>
<script type="text/javascript" src="static/javascript/general.js"></script>
<script type="text/javascript" src="static/javascript/ydl.js"></script>
</html>