From d2ad8e36eff2c2de56e788db9495a9eff6eac10d Mon Sep 17 00:00:00 2001
From: Andrew <66430340+aandrew-me@users.noreply.github.com>
Date: Sun, 29 Jan 2023 15:34:13 +0600
Subject: [PATCH] Improve error messages

---
 assets/css/index.css   | 92 +++++++++++++++++++++++++++---------------
 html/index.html        |  8 +++-
 package.json           |  2 +-
 src/renderer.js        | 42 +++++++++++++++++++
 src/translate_index.js |  1 +
 translations/en.json   |  6 ++-
 6 files changed, 113 insertions(+), 38 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 5f20eba..b38d3a8 100644
--- 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;
-    border-radius: 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,17 +250,17 @@ label {
 	display: none;
 }
 
-input[type="checkbox"]{
-    width:20px;
-    height:20px;
-    position: relative;
-    left:5px;
-	top:4px;
+input[type="checkbox"] {
+	width: 20px;
+	height: 20px;
+	position: relative;
+	left: 5px;
+	top: 4px;
 }
 
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
-  appearance: none; 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	appearance: none;
 }
 
 .submitBtn {
@@ -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;
@@ -442,4 +455,17 @@ body::-webkit-scrollbar-thumb {
 	cursor: pointer;
 	color: white;
 	cursor: pointer;
-}  
\ No newline at end of file
+}
+
+#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;
+}
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index a52296c..e9786a5 100644
--- 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">
@@ -134,7 +138,7 @@
             </select>
             <button id="extractBtn">Extract</button>
         </div>
-       
+
         <!-- Extraction options end -->
 
 
@@ -142,7 +146,7 @@
     <!-- Downloads list -->
     <div id="list"></div>
 
-    <div id="goToTop"></div> 
+    <div id="goToTop"></div>
 
     <script>
         require("../src/translate_index")
diff --git a/package.json b/package.json
index 1a94c1f..feb271d 100644
--- 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 .",
diff --git a/src/renderer.js b/src/renderer.js
index 71a2121..cb199ff 100644
--- 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", () => {
diff --git a/src/translate_index.js b/src/translate_index.js
index e85774f..d644936 100644
--- 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")+" ▼"
diff --git a/translations/en.json b/translations/en.json
index e0eae7b..ffc0545 100644
--- 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"
 }