Improve error messages

3 years ago · d2ad8e36ef
parent d00a06efd0
commit d2ad8e36ef
6 changed files with 113 additions and 38 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -10,7 +10,7 @@
 }

 body {
-	font-family:sans-serif;
+	font-family: sans-serif;
 	text-align: center;
 	padding: 10px;
 	background-color: var(--background);
@ -95,9 +95,9 @@ body {
 	color: white;
 }

-#pasteUrl{
-	display:none;
-	margin-top:15px;
+#pasteUrl {
+	display: none;
+	margin-top: 15px;
 	font-weight: bold;
 }

@ -113,18 +113,17 @@ body {
 	align-items: center;
 	justify-content: space-between;
 }
-.playlistItem{
+.playlistItem {
 	display: flex;
 	position: relative;
 	width: 86%;
 	background-color: var(--item-bg);
 	color: var(--text);
-    padding:10px 25px;
+	padding: 10px 25px;
 	border-radius: 25px;
 	align-items: center;
 	justify-content: space-between;
 	margin: 10px auto;
-
 }

@media screen and (max-width: 650px) {
@ -153,7 +152,7 @@ body {
 .itemProgress {
 	font-weight: bold;
 	cursor: pointer;
-	margin-top:10px;
+	margin-top: 10px;
 	font-family: sans-serif;
 }
 .itemClose {
@ -165,7 +164,7 @@ body {
 	width: 15px;
 	height: 15px;
 }
-.itemType{
+.itemType {
 	font-style: italic;
 	margin-top: 5px;
 }
@ -196,17 +195,17 @@ body {
 	color: var(--text);
 }

-#audioExtract{
-	margin:10px;
-	padding:10px;
+#audioExtract {
+	margin: 10px;
+	padding: 10px;
 	background-color: var(--box-toggle);
 	border-radius: 10px;
 }

-#options{
-	display:none;
-	position:relative;
-	top:20px;
+#options {
+	display: none;
+	position: relative;
+	top: 20px;
 	background-color: var(--box-main);
 	border-radius: 10px;
 	padding: 10px;
@ -251,16 +250,16 @@ label {
 	display: none;
 }

-input[type="checkbox"]{
-    width:20px;
-    height:20px;
+input[type="checkbox"] {
+	width: 20px;
+	height: 20px;
 	position: relative;
-    left:5px;
-	top:4px;
+	left: 5px;
+	top: 4px;
 }

-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
 	appearance: none;
 }

@ -300,7 +299,8 @@ input[type=number]::-webkit-outer-spin-button {
 	width: 100px;
 }

-.time, .input {
+.time,
+.input {
 	padding: 8px;
 	border: none;
 	outline: none;
@ -311,9 +311,22 @@ input[type=number]::-webkit-outer-spin-button {
 }

 #incorrectMsg {
-	color: rgb(250, 59, 59);
+	color: rgb(237, 67, 67);
 }

+#errorBtn {
+	display: none;
+}
+#errorDetails {
+	cursor: pointer;
+	font-family: monospace;
+	padding:15px;
+	margin: 10px 0;
+	border: 2px solid rgb(189, 0, 0);
+	border-radius: 8px;
+	display: none;
+	transition: .5s all;
+}
 #loadingWrapper {
 	/* Default is flex */
 	display: none;
@ -366,11 +379,11 @@ svg {
 #savedMsg {
 	cursor: pointer;
 }
-button{
-	outline:none;
+button {
+	outline: none;
 }

-#extractBtn{
+#extractBtn {
 	color: white;
 	background-color: rgb(80, 128, 230);
 	border: none;
@ -383,7 +396,7 @@ button{
 	font-size: large;
 }

-#extractBtn:active{
+#extractBtn:active {
 	top: 4px;
 	margin-bottom: 12px;
 	border: none;
@ -443,3 +456,16 @@ body::-webkit-scrollbar-thumb {
 	color: white;
 	cursor: pointer;
 }
+
+#popupText{
+	display: none;
+	position:absolute;
+	right:30px;
+	bottom: 20px;
+	padding:10px;
+	border-radius: 2px;
+	color:white;
+	background-color: rgb(80, 80, 224);
+	cursor: pointer;
+	transition: .5s all;
+}
--- a/html/index.html
+++ b/html/index.html
@ -37,6 +37,8 @@
 </div>

 <body>
+    <!-- Popup message -->
+    <span id="popupText">Text copied</span>

    <!-- Theme toggle -->
    <div id="themeToggle" onclick="toggle()">
@ -71,6 +73,8 @@
        </svg>
    </div>
    <p id="incorrectMsg"></p>
+    <button class="advancedToggle" id="errorBtn" onclick="toggleErrorDetails()">Error Details ▼</button>
+    <div id="errorDetails" onclick="copyErrorToClipboard()"></div>
    <br>

    <div id="hidden">
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
 		"yt-dlp-wrap-plus": "^2.3.16"
 	},
 	"name": "ytdownloader",
-	"version": "3.10.6",
+	"version": "3.11.0",
 	"main": "main.js",
 	"scripts": {
 		"start": "electron .",
--- a/src/renderer.js
+++ b/src/renderer.js
@ -239,10 +239,15 @@ async function getInfo(url) {
 	onlyvideo = false;
 	let audioIsPresent = false;
 	downloadPathSelection();
+	// Cleaning text
 	getId("videoFormatSelect").innerHTML = "";
 	getId("audioFormatSelect").innerHTML = "";
 	getId("startTime").value = "";
 	getId("endTime").value = "";
+	getId("errorBtn").style.display = "none";
+	getId("errorDetails").style.display = "none";
+	getId("errorDetails").textContent = "";
+
 	if (localStorage.getItem("preferredVideoQuality")) {
 		preferredVideoQuality = localStorage.getItem("preferredVideoQuality");
 	}
@ -285,11 +290,19 @@ async function getInfo(url) {

 	infoProcess.stderr.on("data", (error) => {
 		validInfo = false;
+		// Error message handling
 		console.log(error.toString("utf8"));
 		getId("loadingWrapper").style.display = "none";
 		getId("incorrectMsg").textContent = i18n.__(
 			"Some error has occurred. Check your network and use correct URL"
 		);
+		getId("errorBtn").style.display = "inline-block";
+		getId("errorDetails").innerHTML = `
+		<strong>URL: ${url}</strong>
+		<br><br>
+		${error.toString("utf8")}
+		`;
+		getId("errorDetails").title = i18n.__("Click to copy");
 	});

 	infoProcess.on("close", () => {
@ -1031,6 +1044,26 @@ function fadeItem(id) {
 	}, 50);
 }

+// Showing and hiding error details
+function toggleErrorDetails() {
+	const status = getId("errorDetails").style.display;
+	if (status === "none") {
+		getId("errorDetails").style.display = "block";
+		getId("errorBtn").textContent = i18n.__("Error Details") + " ▲";
+	} else {
+		getId("errorDetails").style.display = "none";
+		getId("errorBtn").textContent = i18n.__("Error Details") + " ▼";
+	}
+}
+
+// Copying error txt
+
+function copyErrorToClipboard() {
+	const error = getId("errorDetails").textContent;
+	clipboard.writeText(error);
+	showPopup(i18n.__("Copied text"))
+}
+
 // After saving video

 function afterSave(location, filename, progressId) {
@ -1080,6 +1113,15 @@ function closeMenu() {
 	}, 50);
 }

+// Popup message
+function showPopup(text) {
+	getId("popupText").textContent = text
+	getId("popupText").style.display = "inline-block";
+	setTimeout(() => {
+		getId("popupText").style.display = "none"
+	}, 2000);
+}
+
 // Menu

 getId("preferenceWin").addEventListener("click", () => {
--- a/src/translate_index.js
+++ b/src/translate_index.js
@ -37,3 +37,4 @@ getId("subHeader").textContent = i18n.__("Subtitles");
 getId("subTxt").textContent = i18n.__("Download subtitles if available");
 getId("extractHeader").textContent = i18n.__("Extract Audio");
 getId("extractBtn").textContent = i18n.__("Extract");
+getId("errorBtn").textContent = i18n.__("Error Details")+" ▼"
--- a/translations/en.json
+++ b/translations/en.json
@ -87,6 +87,8 @@
 	"Use config file":"Use config file",
 	"Open app":"Open app",
 	"Paste video link":"Paste video link",
-	"Quit":"Quit"
-	
+	"Quit":"Quit",
+	"Error Details":"Error Details",
+	"Click to copy":"Click to copy",
+	"Copied text":"Copied text"
 }