Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 Fix options UI #147

Merged
merged 5 commits into from
May 26, 2023
Merged

🐛 Fix options UI #147

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
88a309e
🏷️ Add type assertion to exported options
younesaassila May 26, 2023
35614c1
🐛 Fix list bugs
younesaassila May 26, 2023
6de9ef1
🐛 Fix v2 proxy server check
younesaassila May 26, 2023
2e2c2cf
🐛 Fix default servers editing
younesaassila May 26, 2023
f3415d3
🐛 Fix import of unknown settings
younesaassila May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 75 additions & 46 deletions src/options/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import readFile from "../common/ts/readFile";
import saveFile from "../common/ts/saveFile";
import store from "../store";
import getDefaultState from "../store/getDefaultState";
import { State } from "../store/types";
import type { KeyOfType } from "../types";

//#region Types
Expand Down Expand Up @@ -35,7 +36,7 @@ const whitelistedChannelsListElement = $(
"#whitelisted-channels-list"
) as HTMLUListElement;
$;
// Proxies
// Server list
const serversListElement = $("#servers-list") as HTMLOListElement;
// Privacy
const disableVodRedirectCheckboxElement = $(
Expand All @@ -51,18 +52,19 @@ const importButtonElement = $("#import-button") as HTMLButtonElement;
const resetButtonElement = $("#reset-button") as HTMLButtonElement;
//#endregion

const DEFAULT_SERVERS = getDefaultState().servers;
const DEFAULT_LIST_OPTIONS: ListOptions = Object.freeze({
const DEFAULT_STATE_KEYS = Object.freeze(Object.keys(getDefaultState()));
const DEFAULT_SERVERS = Object.freeze(getDefaultState().servers);
const DEFAULT_LIST_OPTIONS = Object.freeze({
getAlreadyExistsAlertMessage: text => `'${text}' is already in the list`,
getItemPlaceholder: text => `Leave empty to remove '${text}' from the list`,
getPromptPlaceholder: () => "Enter text to create a new item…",
isAddAllowed: () => [true] as AllowedResult,
isEditAllowed: () => [true] as AllowedResult,
focusPrompt: false, // Is set to true once the user has added an item.
focusPrompt: false, // Is set to `true` once the user has added an item.
hidePromptMarker: false,
insertMode: "append",
spellcheck: false,
});
} as ListOptions);

if (store.readyState === "complete") main();
else store.addEventListener("load", main);
Expand Down Expand Up @@ -111,23 +113,31 @@ function main() {
}
});
// Server list
const isServerUrlValid = (url: string): AllowedResult => {
if (DEFAULT_SERVERS.includes(url))
return [false, `'${url}' is a default server URL`];
let Url: URL | undefined;
try {
Url = new URL(url);
} catch {}
if (!Url) return [false, `'${url}' is not a valid URL`];
if (
Url.protocol.endsWith(".ttvlolpro.perfprod.com:") ||
Url.hostname.endsWith(".ttvlolpro.perfprod.com")
) {
return [false, `'${url}' is a proxy server for TTV LOL PRO v2`];
}
if (Url.protocol !== "https:")
return [false, `'${url}' is not a valid HTTPS URL`];
return [true];
};
listInit(serversListElement, "servers", store.state.servers, {
getPromptPlaceholder: insertMode => {
if (insertMode == "prepend") return "Enter a server URL… (Primary)";
return "Enter a server URL… (Fallback)";
},
isAddAllowed(url) {
try {
new URL(url);
return [true];
} catch {
return [false, `'${url}' is not a valid URL`];
}
},
isEditAllowed: url => [
!DEFAULT_SERVERS.includes(url),
"Cannot edit or remove default servers",
],
isAddAllowed: isServerUrlValid,
isEditAllowed: isServerUrlValid,
hidePromptMarker: true,
insertMode: "both",
});
Expand Down Expand Up @@ -193,6 +203,7 @@ function _listAppend(
const listItem = document.createElement("li");
const textInput = document.createElement("input");
textInput.type = "text";

const [allowed] = options.isEditAllowed(text);
if (!allowed) textInput.disabled = true;

Expand All @@ -201,31 +212,41 @@ function _listAppend(
textInput.value = text;

// Highlight text when focused.
textInput.addEventListener("focus", textInput.select);
textInput.addEventListener("focus", textInput.select.bind(textInput));

// Update store when text is changed.
textInput.addEventListener("change", e => {
// Get index of item in array.
const itemIndex = store.state[storeKey].findIndex(
item => item.toLowerCase() === text.toLowerCase()
);
if (itemIndex === -1)
return console.error(`Item '${text}' not found in '${storeKey}' array`);

const textInput = e.target as HTMLInputElement;
const [allowed, errorMessage] = options.isEditAllowed(text);
if (!allowed) {
alert(errorMessage || "You cannot edit this item");
textInput.value = text;
return;
}
const newText = textInput.value.trim();
const index = store.state[storeKey].findIndex(
str => str.toLowerCase() === text.toLowerCase()
);
if (index === -1) return;
// Remove item if text field is left empty.
// Remove item if text is empty.
if (newText === "") {
store.state[storeKey].splice(index, 1);
store.state[storeKey].splice(itemIndex, 1);
listItem.remove();
} else {
store.state[storeKey][index] = newText;
return;
}
// Check if text is valid.
const [allowed, error] = options.isEditAllowed(newText);
if (!allowed) {
alert(error || "You cannot edit this item");
textInput.value = text;
return;
}
// Update item in array.
store.state[storeKey][itemIndex] = newText;
textInput.placeholder = options.getItemPlaceholder(newText);
textInput.value = newText; // Update text in case it was trimmed.
text = newText; // Update current text variable.
});
// Append list item to list.

listItem.append(textInput);

if (options.insertMode === "prepend") listElement.prepend(listItem);
else listElement.append(listItem);
}
Expand Down Expand Up @@ -253,39 +274,43 @@ function _listPrompt(
promptInput.addEventListener("change", e => {
const promptInput = e.target as HTMLInputElement;
const text = promptInput.value.trim();
// Do nothing if text is empty.
if (text === "") return;
const [allowed, errorMessage] = options.isAddAllowed(text);
// Check if text is valid.
const [allowed, error] = options.isAddAllowed(text);
if (!allowed) {
alert(errorMessage || "You cannot add this item");
alert(error || "You cannot add this item");
promptInput.value = "";
return;
}
// Check if item already exists.
const alreadyExists = store.state[storeKey].some(
str => str.toLowerCase() === text.toLowerCase()
item => item.toLowerCase() === text.toLowerCase()
);
if (alreadyExists) {
alert(options.getAlreadyExistsAlertMessage(text));
promptInput.value = "";
return;
}
// Add item to store.
const list = store.state[storeKey]; // Store a reference to the array for the proxy to work.
if (options.insertMode === "prepend") list.unshift(text);
else list.push(text);
store.state[storeKey] = list;
// Add item to array.
const newArray = store.state[storeKey];
if (options.insertMode === "prepend") newArray.unshift(text);
else newArray.push(text);
store.state[storeKey] = newArray;

listItem.remove(); // This will also remove the prompt.
listItem.remove();
_listAppend(listElement, storeKey, text, options);
_listPrompt(listElement, storeKey, {
...options,
focusPrompt: true,
});
});
// Append prompt to list.

listItem.append(promptInput);

if (options.insertMode === "prepend") listElement.prepend(listItem);
else listElement.append(listItem);
// Focus prompt if specified.

if (options.focusPrompt) promptInput.focus();
}

Expand All @@ -299,7 +324,7 @@ exportButtonElement.addEventListener("click", () => {
resetPlayerOnMidroll: store.state.resetPlayerOnMidroll,
servers: store.state.servers,
whitelistedChannels: store.state.whitelistedChannels,
}),
} as Partial<State>),
"application/json;charset=utf-8"
);
});
Expand All @@ -309,11 +334,15 @@ importButtonElement.addEventListener("click", async () => {
const data = await readFile("application/json;charset=utf-8");
const state = JSON.parse(data);
for (const [key, value] of Object.entries(state)) {
if (!DEFAULT_STATE_KEYS.includes(key)) {
console.warn(`Unknown key '${key}' in imported settings`);
continue;
}
store.state[key] = value;
}
window.location.reload(); // Reload page to update UI.
} catch (error) {
alert(`Error: ${error}}`);
alert(`An error occurred while importing settings: ${error}`);
}
});

Expand Down