Notes for flatpaks

assets/css/extra.css

@@ -48,12 +48,12 @@
 	--blueBtn-bottom: rgb(44, 78, 180);
 }
 :root[theme="onedark"] {
-	--background: #282C34	;
+	--background: #282c34;
 	--text: #d2d6df;
-	--box-main: #4D515D;
-	--box-toggle: #2F333D;
+	--box-main: #4d515d;
+	--box-toggle: #2f333d;
 	--box-toggleOn: #13a3b7;
-	--item-bg: #4D515D;
+	--item-bg: #4d515d;
 	--select: #57b6c2;
 	--greenBtn: #85cf50;
 	--greenBtn-bottom: #406923;
@@ -63,13 +63,13 @@
 	--blueBtn-bottom: rgb(44, 78, 180);
 }
 :root[theme="matrix"] {
-	--background: #0D0208;
-	--text: #00FF41;
+	--background: #0d0208;
+	--text: #00ff41;
 	--box-main: #0c2216;
 	--box-toggle: #214338;
 	--box-toggleOn: #24782e;
 	--item-bg: #214338;
-	--select: #00FF41;
+	--select: #00ff41;
 	--greenBtn: #19b42b;
 	--greenBtn-bottom: #10701c;
 	--redBtn: #19b42b;
@@ -79,18 +79,18 @@
 }
 
 :root[theme="github"] {
-	--background: #F6F8FA;
-	--text: #292D31;
-	--box-main: #FFFFFF;
-	--box-toggle: #F3f3f3;
+	--background: #f6f8fa;
+	--text: #292d31;
+	--box-main: #ffffff;
+	--box-toggle: #f3f3f3;
 	--box-toggleOn: #cce5ff;
-	--item-bg: #3A66D150;
+	--item-bg: #3a66d150;
 	--select: #cce5ff;
 	--greenBtn: #0a9431;
 	--greenBtn-bottom: #0c6826;
 	--redBtn: #d73a49;
 	--redBtn-bottom: #9b2733;
-	--blueBtn: #005CC5;
+	--blueBtn: #005cc5;
 	--blueBtn-bottom: #00428e;
 }
 
@@ -111,10 +111,10 @@
 }
 
 :root[theme="solarized-dark"] {
-	--background: #002B36;
+	--background: #002b36;
 	--text: #a4b1b3;
 	--box-main: #003745;
-	--box-toggle: #2E4C52;
+	--box-toggle: #2e4c52;
 	--box-toggleOn: #005a6f;
 	--item-bg: #003745;
 	--select: #2aa198;
@@ -171,6 +171,14 @@ input[type="text"],
 	background-color: var(--box-main);
 }
 
+#flatpakTxt {
+	margin: 0 15px;
+	padding: 20px 15px;
+	cursor: pointer;
+	text-decoration: underline;
+	color: var(--blueBtn);
+}
+
 .prefBox {
 	flex-direction: row;
 }

html/preferences.html

@@ -109,8 +109,7 @@
 
     </div>
 
-
-    <br>
+    <p id="flatpakTxt"></p>
     <div class="prefBox">
         <span id="browserTxt">Select browser to use cookies from</span>
         <span id="browserInfo"> ℹ️</span>
@@ -126,7 +125,6 @@
             <option value="vivaldi">Vivaldi</option>
         </select>
     </div>
-
     <br>
     <div id="pathConfig">
 

package.json

@@ -4,7 +4,7 @@
 		"yt-dlp-wrap-plus": "^2.3.18"
 	},
 	"name": "ytdownloader",
-	"version": "3.16.0",
+	"version": "3.16.1",
 	"main": "main.js",
 	"scripts": {
 		"start": "electron .",

src/translate_preferences.js

@@ -1,3 +1,5 @@
+const { shell } = require("electron");
+
 function getId(id) {
 	return document.getElementById(id);
 }
@@ -37,3 +39,12 @@ getId("trayTxt").textContent = i18n.__("Close app to system tray");
 getId("autoUpdateTxt").textContent = i18n.__("Disable auto updates");
 getId("showMoreFormatsTxt").textContent = i18n.__("Show more format options");
 getId("preferredVideoCodecTxt").textContent = i18n.__("Preferred video codec");
+
+if (process.env.FLATPAK_ID) {
+	getId("flatpakTxt").textContent = i18n.__(
+		"You need to give the app permission to access home directory to use this. You can do it with Flatseal by enabling the permission with text 'filesystem=home'"
+	);
+	getId("flatpakTxt").addEventListener("click", () => {
+		shell.openExternal("https://flathub.org/apps/com.github.tchx84.Flatseal")
+	})
+}

translations/en.json

@@ -108,5 +108,6 @@
 	"Matrix": "Matrix",
 	"Solarized Dark": "Solarized Dark",
 	"Preferred video codec": "Preferred video codec",
-	"Show more format options": "Show more format options"
+	"Show more format options": "Show more format options",
+	"You need to give the app permission to access home directory to use this. You can do it with Flatseal by enabling the permission with text 'filesystem=home'": "You need to give the app permission to access home directory to use this. You can do it with Flatseal by enabling the permission with text 'filesystem=home'"
 }