From 0bcf69e99b1119684781eca612cd4e02e7a75d8a Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Sun, 1 May 2022 16:55:13 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8D=9C=20bugfixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- src/pages/popup/main.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 2d74d2c..0db5333 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "scripts": { "build:assets": "cpx \"src/**/*.{json,png,svg}\" dist/", "watch:assets": "cpx --watch -v \"src/**/*.{json,png,svg}\" dist/", - "build:parcel": "cross-env NODE_ENV=production parcel build --no-source-maps --no-minify \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\"", - "watch:parcel": "parcel watch --no-hmr --no-source-maps \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\"", + "build:parcel": "cross-env NODE_ENV=production parcel build --no-source-maps --no-minify \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\" \"src/**/*.md\"", + "watch:parcel": "parcel watch --no-hmr --no-source-maps \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\" \"src/**/*.md\"", "build:webext": "web-ext build --source-dir ./dist --overwrite-dest", "build": "npm-run-all -l -p build:parcel build:assets", "watch": "npm-run-all -l -p watch:parcel watch:assets", diff --git a/src/pages/popup/main.tsx b/src/pages/popup/main.tsx index 818c7fe..16b2b88 100644 --- a/src/pages/popup/main.tsx +++ b/src/pages/popup/main.tsx @@ -154,7 +154,7 @@ function WatchOnLbryPopup(params: { profile: Awaited
- + Subscription Converter
From 6aa507c53d90e83e698aa5e92bfca09f5b61a509 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Sun, 1 May 2022 21:20:59 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8D=99=20custom=20dialogs=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 97 ++++++++++++++++++++++++ src/assets/styles/common.css | 6 +- src/components/Row/index.tsx | 33 --------- src/components/Row/style.css | 6 -- src/components/dialogs.tsx | 138 +++++++++++++++++++++++++++++++++++ src/modules/crypto/index.ts | 23 +++--- src/pages/popup/main.tsx | 36 ++++++--- src/pages/popup/style.css | 1 + 8 files changed, 278 insertions(+), 62 deletions(-) delete mode 100644 src/components/Row/index.tsx delete mode 100644 src/components/Row/style.css create mode 100644 src/components/dialogs.tsx diff --git a/package-lock.json b/package-lock.json index 86aaa75..a88d951 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4826,6 +4826,91 @@ "timsort": "^0.3.0" } }, + "css-loader": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz", + "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==", + "dev": true, + "requires": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.7", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.5" + }, + "dependencies": { + "nanoid": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz", + "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==", + "dev": true + }, + "postcss": { + "version": "8.4.13", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.13.tgz", + "integrity": "sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==", + "dev": true, + "requires": { + "nanoid": "^3.3.3", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true + }, + "postcss-modules-local-by-default": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", + "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, + "postcss-modules-scope": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", + "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.4" + } + }, + "postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0" + } + }, + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, + "semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, "css-modules-loader-core": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz", @@ -7838,6 +7923,12 @@ "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", "dev": true }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true + }, "ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -14874,6 +14965,12 @@ "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, "source-map-resolve": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css index 0d863d9..5e232ce 100644 --- a/src/assets/styles/common.css +++ b/src/assets/styles/common.css @@ -9,8 +9,8 @@ --gradient-animation: gradient-animation 5s linear infinite alternate; } -:root { - font-size: .95rem; +body { + font-size: .75rem; font-family: Arial, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; letter-spacing: .2ch; } @@ -81,7 +81,7 @@ h6 { border-radius: .5em; border: unset; - font-size: inherit; + font: inherit; } .button.active { diff --git a/src/components/Row/index.tsx b/src/components/Row/index.tsx deleted file mode 100644 index 5e916a2..0000000 --- a/src/components/Row/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ComponentChildren, h } from 'preact' -import './style.css' - -/* - Re-implementation of https://github.com/DeepDoge/svelte-responsive-row -*/ - -export function Row(params: { - children: ComponentChildren - type?: "fit" | "fill", - idealSize?: string, - gap?: string, - maxColumnCount?: number, - justifyItems?: "center" | "start" | "end" | "stretch" -}) { - if (!params.type) params.type = 'fill' - if (!params.gap) params.gap = '0' - if (!params.idealSize) params.idealSize = '100%' - if (!params.maxColumnCount) params.maxColumnCount = Number.MAX_SAFE_INTEGER - if (!params.justifyItems) params.justifyItems = 'center' - - return
- {params.children} -
-} diff --git a/src/components/Row/style.css b/src/components/Row/style.css deleted file mode 100644 index 940b1d4..0000000 --- a/src/components/Row/style.css +++ /dev/null @@ -1,6 +0,0 @@ -.responsive-row { - display: grid; - grid-template-columns: repeat(var(--type), minmax(min(max(100% / var(--max-column-count) - var(--gap), var(--ideal-size)), 100%), 1fr)); - gap: var(--gap); - justify-items: var(--justify-items); -} \ No newline at end of file diff --git a/src/components/dialogs.tsx b/src/components/dialogs.tsx new file mode 100644 index 0000000..b225482 --- /dev/null +++ b/src/components/dialogs.tsx @@ -0,0 +1,138 @@ +import { h } from 'preact' +import { useEffect, useRef, useState } from 'preact/hooks' + +type Message = string +type Alert = { type: 'alert' | 'prompt' | 'confirm', message: Message, resolve: (data: string | boolean | null) => void } +export type DialogManager = ReturnType + +export function createDialogManager() { + const [alerts, setAlerts] = useState({} as Record) + const id = crypto.randomUUID() + + function add(alert: Alert) { + setAlerts({ ...alerts, alert }) + } + function remove() { + delete alerts[id] + setAlerts({ ...alerts }) + } + + return { + useAlerts() { return alerts }, + async alert(message: Message) { + return await new Promise((resolve) => add({ + message, type: 'alert', resolve: () => { + resolve() + remove() + } + })) + }, + async prompt(message: Message) { + return await new Promise((resolve) => add({ + message, type: 'prompt', resolve: (data) => { + resolve(data?.toString() ?? null) + remove() + } + })) + }, + async confirm(message: Message) { + return await new Promise((resolve) => add({ + message, type: 'confirm', resolve: (data) => { + resolve(!!data) + remove() + } + })) + } + } +} + +interface DialogElement extends HTMLDivElement { + open: boolean + showModal(): void +} + +export function Dialogs(params: { manager: ReturnType }) { + const alerts = params.manager.useAlerts() + let currentAlert = Object.values(alerts)[0] + if (!currentAlert) return + + const [value, setValue] = useState(null as Parameters[0]) + + let cancelled = false + + const dialog = useRef(null as any as DialogElement) + useEffect(() => { + if (!dialog.current) return + if (!dialog.current.open) dialog.current.showModal() + const onClose = () => currentAlert.resolve(null) + dialog.current.addEventListener('close', onClose) + return dialog.current.removeEventListener('close', onClose) + }) + return + +
{ + event.preventDefault() + currentAlert.resolve(cancelled ? null : currentAlert.type === 'confirm' ? true : value) + }}> +
+ + {currentAlert.type === 'prompt' && setValue(event.currentTarget.value)} />} +
+
+ {currentAlert.type !== 'alert' && } + +
+
+ +} diff --git a/src/modules/crypto/index.ts b/src/modules/crypto/index.ts index 0991102..70b29b5 100644 --- a/src/modules/crypto/index.ts +++ b/src/modules/crypto/index.ts @@ -1,4 +1,5 @@ import path from 'path' +import { DialogManager } from '../../components/dialogs' import { getExtensionSettingsAsync, setExtensionSetting, ytUrlResolversSettings } from "../../settings" async function generateKeys() { @@ -91,15 +92,15 @@ async function apiRequest(method: 'GET' | 'POST', pathname: st throw new Error((await respond.json()).message) } -export async function generateProfileAndSetNickname(overwrite = false) { +export async function generateProfileAndSetNickname(dialogManager: DialogManager, overwrite = false) { let { publicKey, privateKey } = await getExtensionSettingsAsync() let nickname while (true) { - nickname = prompt("Pick a nickname") + nickname = await dialogManager.prompt("Pick a nickname") if (nickname) break if (nickname === null) return - alert("Invalid nickname") + await dialogManager.alert("Invalid nickname") } try { @@ -113,21 +114,21 @@ export async function generateProfileAndSetNickname(overwrite = false) { setExtensionSetting('privateKey', privateKey) } await apiRequest('POST', '/profile', { nickname }) - alert(`Your nickname has been set to ${nickname}`) + await dialogManager.alert(`Your nickname has been set to ${nickname}`) } catch (error: any) { resetProfileSettings() - alert(error.message) + await dialogManager.alert(error.message) } } -export async function purgeProfile() { +export async function purgeProfile(dialogManager: DialogManager) { try { - if (!confirm("This will purge all of your online and offline profile data.\nStill wanna continue?")) return + if (!await dialogManager.confirm("This will purge all of your online and offline profile data.\nStill wanna continue?")) return await apiRequest('POST', '/profile/purge', {}) resetProfileSettings() - alert(`Your profile has been purged`) + await dialogManager.alert(`Your profile has been purged`) } catch (error: any) { - alert(error.message) + await dialogManager.alert(error.message) } } @@ -189,7 +190,7 @@ export async function exportProfileKeysAsFile() { download(json, `watch-on-lbry-profile-export-${friendlyPublicKey(publicKey)}.wol-keys.json`, 'application/json') } -export async function importProfileKeysFromFile() { +export async function importProfileKeysFromFile(dialogManager: DialogManager) { try { const json = await readFile() if (!json) throw new Error("Invalid") @@ -197,6 +198,6 @@ export async function importProfileKeysFromFile() { setExtensionSetting('publicKey', publicKey) setExtensionSetting('privateKey', privateKey) } catch (error: any) { - alert(error.message) + await dialogManager.alert(error.message) } } \ No newline at end of file diff --git a/src/pages/popup/main.tsx b/src/pages/popup/main.tsx index 16b2b88..7a0fa32 100644 --- a/src/pages/popup/main.tsx +++ b/src/pages/popup/main.tsx @@ -1,5 +1,6 @@ import { h, render } from 'preact' import { useState } from 'preact/hooks' +import { createDialogManager, Dialogs } from '../../components/dialogs' import { exportProfileKeysAsFile, friendlyPublicKey, generateProfileAndSetNickname, getProfile, importProfileKeysFromFile, purgeProfile, resetProfileSettings } from '../../modules/crypto' import { LbryPathnameCache } from '../../modules/yt/urlCache' import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, setExtensionSetting, useExtensionSettings } from '../../settings' @@ -28,8 +29,10 @@ function WatchOnLbryPopup(params: { profile: Awaited + const dialogManager = createDialogManager() + return @@ -86,7 +100,7 @@ function WatchOnLbryPopup(params: { profile: AwaitedPurge your profile data online and offline.

@@ -95,7 +109,11 @@ function WatchOnLbryPopup(params: { profile: AwaitedGenerate new profile

Generate a new keypair.

@@ -107,10 +125,10 @@ function WatchOnLbryPopup(params: { profile: AwaitedYou don't have a profile.

You can either import keypair for an existing profile or generate a new profile keypair.

@@ -148,7 +166,7 @@ function WatchOnLbryPopup(params: { profile: Awaited )} - startAsyncOperation(LbryPathnameCache.clearAll()).then(() => alert("Cleared Cache!"))} className={`button active`}> + startAsyncOperation(LbryPathnameCache.clearAll().then(() => dialogManager.alert("Cleared Cache!")))} className={`button active`}> Clear Resolver Cache diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index 8adad0d..1598973 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -5,6 +5,7 @@ header { position: sticky; top: 0; background: rgba(19, 19, 19, 0.5); + justify-items: center; } main { From cddd415e22150a252ace8dede7831a4d567418e2 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Mon, 2 May 2022 01:09:11 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8D=A3=20more=20bugfixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/common.css | 7 +++++- src/components/dialogs.tsx | 12 +++++++-- src/manifest.json | 1 + src/modules/crypto/index.ts | 39 ++++++++++++++-------------- src/pages/import/index.html | 14 +++++++++++ src/pages/import/main.tsx | 47 ++++++++++++++++++++++++++++++++++ src/pages/import/style.css | 35 ++++++++++++++++++++++++++ src/pages/popup/main.tsx | 49 +++++++++++++++++++++++------------- src/pages/popup/style.css | 13 +++++++++- 9 files changed, 176 insertions(+), 41 deletions(-) create mode 100644 src/pages/import/index.html create mode 100644 src/pages/import/main.tsx create mode 100644 src/pages/import/style.css diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css index 5e232ce..bf219fb 100644 --- a/src/assets/styles/common.css +++ b/src/assets/styles/common.css @@ -59,13 +59,17 @@ h6 { margin: 0; } +pre { + margin: 0; + white-space: break-spaces; +} + .options { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(3em, 1fr)); justify-content: center; gap: .25em; - padding: 0 1.5em; } .button { @@ -82,6 +86,7 @@ h6 { border: unset; font: inherit; + cursor: pointer; } .button.active { diff --git a/src/components/dialogs.tsx b/src/components/dialogs.tsx index b225482..6135e96 100644 --- a/src/components/dialogs.tsx +++ b/src/components/dialogs.tsx @@ -79,6 +79,7 @@ export function Dialogs(params: { manager: ReturnType
- + 
{currentAlert.message}
{currentAlert.type === 'prompt' && setValue(event.currentTarget.value)} />}
+ {/* This is here to capture, return key */} + + {currentAlert.type !== 'alert' && }