From fa0181815b94c4f617cb3b16cebbd55329d94f73 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Fri, 30 Nov 2018 22:18:58 +0100 Subject: [PATCH] Settings page: Ui accessible via settingsvars.js --- res/settings/js/settings.js | 60 ----------- res/settings/js/settingsvars.js | 46 +++++++++ res/settings/settings.html | 171 +++++++++++++++----------------- 3 files changed, 128 insertions(+), 149 deletions(-) create mode 100644 res/settings/js/settingsvars.js diff --git a/res/settings/js/settings.js b/res/settings/js/settings.js index 7bd61c5..e69de29 100644 --- a/res/settings/js/settings.js +++ b/res/settings/js/settings.js @@ -1,60 +0,0 @@ -function showAbout(){ - clearPage(); - - document.getElementById("about").classList.remove("hide"); - document.getElementById("tab_about").classList.add("tab-selected"); -} -function showShortcuts(){ - clearPage(); - - document.getElementById("uw_shortcuts").classList.remove("hide"); - document.getElementById("tab_shortcuts").classList.add("tab-selected"); -} -function showGeneralSettings(){ - clearPage(); - - document.getElementById("general_settings").classList.remove("hide"); - document.getElementById("tab_general_settings").classList.add("tab-selected"); -} - -function showSites(){ - clearPage(); - document.getElementById("uw_sites").classList.remove("hide"); - document.getElementById("tab_sites").classList.add("tab-selected"); -} - -function clearPage(){ - // Hide you sections - document.getElementById("uw_shortcuts").classList.add("hide"); - document.getElementById("about").classList.add("hide"); - document.getElementById("general_settings").classList.add("hide"); - document.getElementById("uw_sites").classList.add("hide"); - - // Hide you tabs - document.getElementById("tab_shortcuts").classList.remove("tab-selected"); - document.getElementById("tab_about").classList.remove("tab-selected"); - document.getElementById("tab_general_settings").classList.remove("tab-selected"); - document.getElementById("tab_sites").classList.remove("tab-selected"); - -} - - - - - -// page init -// document.addEventListener("DOMContentLoaded", loadopts); - -document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts); -document.querySelector("#tab_about").addEventListener("click", showAbout); -// document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings); -// document.querySelector("#tab_sites").addEventListener("click", showSites); - -document.querySelector("#kb_save").addEventListener("click", saveKeybinds); -document.querySelector("#kb_cancel").addEventListener("click", loadKeybinds); - -// document.querySelector("#enable_autoar").addEventListener("click",saveAutoar); -// document.querySelector("#enable_ui").addEventListener("click", saveUI); -// document.querySelector("#enable_ui_compact").addEventListener("click", saveUI); - -loadKeybinds(); diff --git a/res/settings/js/settingsvars.js b/res/settings/js/settingsvars.js new file mode 100644 index 0000000..47824e7 --- /dev/null +++ b/res/settings/js/settingsvars.js @@ -0,0 +1,46 @@ +var ui = { + general: { + extensionSettings: { + buttonContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global_settings')), + buttons: [], + whitelistTextbox: document.getElementById('_general_extension_whitelist'), + blacklistTextbox: document.getElementById('_general_extension_blacklist') + }, + autoarSettings: { + buttonContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global')), + buttons: [] + }, + alignmentSettings: { + buttonsContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global_alignment')), + buttons: [] + }, + stretchSettings: { + buttonContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global_stretch')), + buttons: [], + thinBordersTresholdInput: document.getElementById('_general_extension_global_stretch_thin_borders_treshold_input') + } + }, + + + // Automatic detection settings: + autoar: { + autoarSettings: { + buttonContainer: BaseElement.fromExisting(document.getElementById('_autoar_global_settings')), + buttons: [], + whitelistTextbox: document.getElementById('_autoar_whitelist'), + blacklistTextbox: document.getElementById('_autoar_blacklist') + }, + checkFrequency: { + playingCheckFrequencyInput: document.getElementById('_autoar_checkFrequency_playing'), + pausedCheckFrequencyInput: document.getElementById('_autoar_checkFrequency_paused'), + errorCheckFrequencyInput: document.getElementById('_autoar_checkFrequency_error') + } + }, + + + // Customization settings + customization: { + actionList: BaseElement.fromExisting(document.getElementById('_customization_actions')), + actionItems: [], + } +} diff --git a/res/settings/settings.html b/res/settings/settings.html index df606c7..44b8f43 100644 --- a/res/settings/settings.html +++ b/res/settings/settings.html @@ -81,7 +81,7 @@
Default stretch mode
-
+
None: do not stretch the video at all. This is the default option, for men of culture.
@@ -96,7 +96,7 @@ Thin border treshold (%):
- +
@@ -106,108 +106,101 @@
- -
- Enable autodetection: - -
- -
- - Always enables autodetection on every site you visit that you didn't blacklist.
- On whitelisted sites enables autodetection only on sites you explicitly whitelisted.
- Never disables autodetection on all sites, even on those you whitelisted. - -
- -
-
-
Whitelisted sites
-
List of whitelisted sites. One per line.
- -
-
-
Blacklisted sites
-
List of blacklisted sites. One per line.
- -
-
- -

Advanced automatic detection options

- -
-
Aspect ratio check frequency
-
-

Options here decide how often the extension will check for changes in aspect ratio of a given video.

-

Values are given in milliseconds. Longer intervals increase delay between aspect ratio changing and extension re-correcting for the change. Using shorter intervals than the default ones can cause lage and immense RAM usage.

-
-
-
-
- Check frequency when video is playing (ms): -
-
- -
+
+
+ Enable autodetection: + +
+
-
-
- Check frequency when video is paused (ms): -
-
- -
+ + Always enables autodetection on every site you visit that you didn't blacklist.
+ On whitelisted sites enables autodetection only on sites you explicitly whitelisted.
+ Never disables autodetection on all sites, even on those you whitelisted. + +
+ +
+
+
Whitelisted sites
+
List of whitelisted sites. One per line.
+
-
-
- Recheck delay on error (ms): +
+
Blacklisted sites
+
List of blacklisted sites. One per line.
+ +
+
+ +

Advanced automatic detection options

+ +
+
Aspect ratio check frequency
+
+

Options here decide how often the extension will check for changes in aspect ratio of a given video.

+

Values are given in milliseconds. Longer intervals increase delay between aspect ratio changing and extension re-correcting for the change. Using shorter intervals than the default ones can cause lage and immense RAM usage.

+
+
+
+
+ Check frequency when video is playing (ms): +
+
+ +
-
- +
+
+ Check frequency when video is paused (ms): +
+
+ +
+
+
+
+ Recheck delay on error (ms): +
+
+ +
- -
-
-
Fallback mode
-
-

In order for autodetection to work, the extension grabs a frame of the video you're watching and takes a look at it. - Some websites use DRM, which prevents you from using the HTML5-blessed way of getting a frame from a video. - Some browsers offer some features that can be used to circumvent DRM protection. - With this option enabled, the extension will use said features to basically do that. -

-

At the moment, Firefox is the only browser to support this.

-
- This browser doesn't support fallback mode. +
+
Fallback mode
+
+

In order for autodetection to work, the extension grabs a frame of the video you're watching and takes a look at it. + Some websites use DRM, which prevents you from using the HTML5-blessed way of getting a frame from a video. + Some browsers offer some features that can be used to circumvent DRM protection. + With this option enabled, the extension will use said features to basically do that. +

+

At the moment, Firefox is the only browser to support this.

+
+ This browser doesn't support fallback mode. +
+
Enable fallback mode
-
Enable fallback mode
-
+
-
-
Actions
-
-

In this sections, you can define custom actions, add or change keyboard shortcut or hide buttons from the popup.

-
-
+
+
Actions
+
+

In this sections, you can define custom actions, add or change keyboard shortcut or hide buttons from the popup.

+
+
-
-
+
+
+
@@ -229,7 +222,6 @@

Special thanks to me for making this extension. You're welcome.

-
@@ -240,6 +232,7 @@ +