aiden
/
ytDownloader
mirror of https://github.com/aandrew-me/ytDownloader
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More changes, fixing cross origin

Browse Source
pull/9/head
aandrew-me 3 years ago
parent 031a1b4ba2
commit 145b8b41e7
4 changed files with 128 additions and 72 deletions
Show Stats Download Patch File Download Diff File

151
assets/css/index.css
Unescape Escape View File

@ -20,43 +20,43 @@ body {
transition: 0.4s;
font-size: large;
}
#popupBox{
width:100vw;
height:100vh;
margin:0;
#popupBox {
width: 100vw;
height: 100vh;
margin: 0;
background-color: rgba(17, 25, 40, 0.75);
position:absolute;
top:0;
left:0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
display:none;
}
#popup{
position:absolute;
padding:20px;
top:50%;
left:50%;
width:300px;
display: none;
}
#popup {
position: absolute;
padding: 20px;
top: 50%;
left: 50%;
width: 300px;
border-radius: 10px;
transform: translate(-50%, -50%);
background-color: rgb(91, 91, 91);
color:white;
color: white;
}
#tryBtn{
background-color:rgb(137, 226, 255);
color:rgb(35, 35, 35);
border:none;
#tryBtn {
background-color: rgb(137, 226, 255);
color: rgb(35, 35, 35);
border: none;
border-bottom: 4px solid rgb(63, 169, 205);
padding:10px;
padding: 10px;
border-radius: 10px;
cursor:pointer;
position:relative;
cursor: pointer;
position: relative;
}
#tryBtn:active{
top:4px;
margin-bottom:4px;
border:none;
#tryBtn:active {
top: 4px;
margin-bottom: 4px;
border: none;
}
#menuIcon {
@ -83,7 +83,7 @@ body {
text-align: left;
opacity: 1;
font-size: large;
z-index:2;
z-index: 2;
}
.menuItem {
color: white;
@ -102,14 +102,13 @@ body {
width: 86%;
height: 100px;
background-color: var(--item-bg);
color:var(--text);
color: var(--text);
margin: 10px auto;
border-radius: 10px;
padding: 20px 10px;
align-items: center;
justify-content: space-between;
box-shadow: var(--box-shadow);
}
@media screen and (max-width: 650px) {
@ -135,31 +134,29 @@ body {
flex-direction: column;
justify-content: space-between;
}
.itemProgress{
font-weight:bold;
.itemProgress {
font-weight: bold;
cursor: pointer;
}
.itemClose{
.itemClose {
position: absolute;
top:5px;
right:5px;
top: 5px;
right: 5px;
cursor: pointer;
cursor: pointer;
width:15px;
height:15px;
width: 15px;
height: 15px;
}
#closeHidden{
bottom:5px;
#closeHidden {
bottom: 5px;
position: absolute;
right:5px;
right: 5px;
cursor: pointer;
cursor: pointer;
width:15px;
height:15px;
width: 15px;
height: 15px;
}
#hidden {
@ -170,7 +167,7 @@ body {
left: 0;
right: 0;
margin: auto;
top:20%;
top: 20%;
background-color: var(--box-main);
border-radius: 10px;
width: 80%;
@ -178,8 +175,9 @@ body {
color: var(--text);
box-shadow: var(--box-shadow);
}
.hiddenVideoProgress, .hiddenAudioProgress{
display:none;
.hiddenVideoProgress,
.hiddenAudioProgress {
display: none;
}
#btnContainer {
@ -222,24 +220,24 @@ label {
.submitBtn {
padding: 15px;
border-radius: 8px;
border-radius: 10px;
background-color: rgb(64, 227, 64);
color: white;
border: none;
border-bottom: 5px solid rgb(50, 185, 50);
border-bottom: 4px solid rgb(50, 185, 50);
font-size: large;
cursor: pointer;
display: inline-block;
outline:none;
position:relative;
outline: none;
position: relative;
}
.submitBtn:active{
.submitBtn:active {
border: none;
top:5px;
margin-bottom:5px;
top: 4px;
margin-bottom: 4px;
}
.resumeBtn{
.resumeBtn {
padding: 10px;
border-radius: 8px;
background-color: rgb(64, 227, 64);
@ -248,15 +246,21 @@ label {
border-bottom: 4px solid rgb(50, 185, 50);
cursor: pointer;
display: inline-block;
outline:none;
position:absolute;
right:10px;
outline: none;
position: absolute;
right: 10px;
bottom: 10px;
width:100px;
width: 100px;
}
.resumeBtn:active{
border:none;
bottom:6px;
.time {
padding: 8px;
border: none;
outline: none;
border-radius: 5px;
width: 60px;
font-size: large;
margin: 5px;
}
#incorrectMsg {
@ -316,6 +320,29 @@ svg {
cursor: pointer;
}
#advancedToggle {
color: white;
background-color: rgb(231, 80, 80);
border: none;
border-bottom: 4px solid rgb(180, 49, 49);
position: relative;
padding: 15px;
border-radius: 10px;
cursor: pointer;
margin: 8px;
font-size: large;
}
#advancedToggle:active {
top: 4px;
margin-bottom: 4px;
border: none;
}
#advanced {
display: none;
}
/* Scrollbar */
body::-webkit-scrollbar {

20
html/index.html
Unescape Escape View File

@ -2,6 +2,7 @@
<html lang="en">
<head>
<header ></header>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -15,8 +16,9 @@
<div id="popupBox">
<div id="popup">
<p>yt-dlp is being downloaded.</p>
<svg id="popupSvg" version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<svg id="popupSvg" version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
</circle>
@ -80,6 +82,7 @@
<br>
<input type="hidden" name="url" class="url" id="url">
<button class="submitBtn" id="videoDownload">Download</button>
<!-- <button id="advancedToggle" onClick ="advancedToggle()">Advanced</button> -->
</div>
<div id="audioList">
@ -89,10 +92,21 @@
<br>
<input type="hidden" name="url" class="url">
<button class="submitBtn" id="audioDownload">Download</button>
<!-- <button id="advancedToggle" onClick ="advancedToggle()">Advanced</button> -->
</div>
</div>
<div id="advanced">
<p>Download particular time-range</p>
<label>Start</label>
<input type="text" name="startTime" class="time">
:
<input type="text" name="endTime" class="time">
<label>End</label>
</div>
</div>
<br><br><br><br>

22
src/index.js
Unescape Escape View File

@ -75,7 +75,7 @@ function toggle() {
root.style.setProperty("--box-main", "rgb(80,80,80)");
root.style.setProperty("--box-toggle", "rgb(70,70,70)");
root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
root.style.setProperty("--item-bg", "rgb(60, 60, 60)")
root.style.setProperty("--item-bg", "rgb(60, 60, 60)");
root.style.setProperty("--box-shadow", "none");
darkTheme = true;
@ -88,10 +88,11 @@ function toggle() {
root.style.setProperty("--box-main", "rgb(174 249 224)");
root.style.setProperty("--box-toggle", "rgb(108, 231, 190)");
root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
root.style.setProperty("--item-bg", "#ececec")
root.style.setProperty("--box-shadow", "2px 2px 5px rgb(92, 92, 92), -2px -2px 5px rgb(219, 219, 219)")
root.style.setProperty("--item-bg", "#ececec");
root.style.setProperty(
"--box-shadow",
"2px 2px 5px rgb(92, 92, 92), -2px -2px 5px rgb(219, 219, 219)"
);
darkTheme = false;
localStorage.setItem("theme", "light");
@ -116,3 +117,14 @@ function clickAnimation(id) {
getId(id).style.animationName = "";
}, 500);
}
let advancedHidden = true;
function advancedToggle() {
if (advancedHidden) {
getId("advanced").style.display = "block";
advancedHidden = false;
} else {
getId("advanced").style.display = "none";
advancedHidden = true;
}
}

7
src/renderer.js
Unescape Escape View File

@ -379,7 +379,7 @@ function download(type) {
<img src="../assets/images/close.png" onClick="fadeItem('${randomId}')" class="itemClose"}" id="${
randomId + ".close"
}">
<img src="${thumbnail}" alt="thumbnail" class="itemIcon">
<img src="${thumbnail}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
<div class="itemBody">
<div class="itemTitle">${title}</div>
@ -505,7 +505,10 @@ function download(type) {
afterSave(downloadDir, filename, randomId + "prog");
}
});
})
.on("error", (error) => {
getId(randomId + "prog").textContent = "Some error has occured"
})
}
// Removing item

Write Preview
Loading…
Cancel
Save