tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some basic settings for keyboard shortcuts.

Browse Source
This commit is contained in:
Tamius Han 2017-12-30 20:53:15 +01:00
parent d0373820fe
commit ec6dfadb41
8 changed files with 221 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/conf/Keybinds.js
View File

@ -137,16 +137,14 @@ var _kbd_process = function (event) { // Tukaj ugotovimo, katero tipko
} }
} }
var _kbd_load = async function() {
var _kbd_setup = async function() {
if(Debug.debug) if(Debug.debug)
console.log("[Keybinds::_kbd_setup_init] Setting up keybinds"); console.log("[Keybinds::_kbd_setup_init] Setting up keybinds");
var ret = await StorageManager.getopt_async("keybinds"); var ret = await StorageManager.getopt_async("keybinds");
var keybinds = ret.keybinds; var keybinds = ret.keybinds;
if(Array.isArray(keybinds)){ if(Array.isArray(keybinds)){
StorageManager.delopt("keybinds"); StorageManager.delopt("keybinds");
keybinds = DEFAULT_KEYBINDINGS; keybinds = DEFAULT_KEYBINDINGS;
@ -165,11 +163,24 @@ var _kbd_setup = async function() {
} }
_kbd_keybinds = keybinds; _kbd_keybinds = keybinds;
}
var _kbd_setup = async function() {
await _kbd_load();
$(document).keydown(_kbd_process); $(document).keydown(_kbd_process);
} }
var _kbd_fetch = async function(){
if($.isEmptyObject(_kbd_keybinds)){
await _kbd_load();
}
return _kbd_keybinds;
}
var Keybinds = { var Keybinds = {
init: _kbd_setup init: _kbd_setup,
fetch: _kbd_fetch,
mods: _kbd_ModKeys
} }

4
js/uw.js
View File

@ -51,8 +51,8 @@ async function main(){
if(Settings.arDetect.enable == "global")
ArDetect.arSetup(); ArDetect.arSetup();
document.addEventListener("mozfullscreenchange", function( event ) { document.addEventListener("mozfullscreenchange", function( event ) {
if(Debug.debug){ if(Debug.debug){

2
manifest.json
View File

@ -77,7 +77,7 @@
], ],
"options_ui" : { "options_ui" : {
"page": "res/settings.html", "page": "res/settings/settings.html",
"open_in_tab": true "open_in_tab": true
} }
} }

4
res/popup/js/popup.js
View File

@ -33,7 +33,7 @@ var hasVideos = false;
var _config; var _config;
function check4videos(){ async function check4videos(){
var command = {}; var command = {};
command.cmd = "has-videos"; command.cmd = "has-videos";
command.sender = "popup"; command.sender = "popup";
@ -57,7 +57,7 @@ function check4videos(){
}); });
} }
function check4conf(){ async function check4conf(){
var command = {}; var command = {};
command.cmd = "get-config"; command.cmd = "get-config";
command.sender = "popup"; command.sender = "popup";

13
res/popup/popup.html
View File

@ -80,7 +80,9 @@
.suboption { .suboption {
display: block; display: block;
padding-left: 15px; padding-left: 15px;
padding-right: 15px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 20px;
min-height: 250px; min-height: 250px;
} }
@ -112,8 +114,12 @@
} }
#no-videos-display { #no-videos-display {
height: 100%; height: 100%;
padding-top: 120px; padding-top: 50px;
/* text-align: center; */
}
.center{
text-align: center; text-align: center;
width: 100%;
} }
</style> </style>
</head> </head>
@ -137,7 +143,10 @@
</div> </div>
<div class="right-side"> <div class="right-side">
<div id="no-videos-display" class="suboption"> <div id="no-videos-display" class="suboption">
No videos have been found on this page.<br/><small>NOTE: iframes are <b>not</b> detected by this popup. You need a keyboard / to enable automatic aspect ratio detection to fix aspect ratio in embedded players.<br/>Embedded players must also be in full screen.</small> <p class="label center">No videos have been found on this page.</p><p>If there <i>is</i> a video on this page, then you're seeing this message for one of these reasons:</p>
<ul><li>Page hasn't finished loading<small><br/><span class="smallcaps">Note</span>: webextensions only start working when page is fully loaded.</small></li>
<li>The video is embedded / in an iframe.<small><br/>This is a known issue/limitation. Use keyboard shortcuts to correct aspect ratio.</small></li>
<li>Hamster Rajko is on strike.<small><br/>(Close this popup and reopen in a few seconds)</small></li></ul>
</div> </div>
<div id="extension-mode" class="suboption hidden"> <div id="extension-mode" class="suboption hidden">

127
res/settings.html → res/settings/settings.html
View File

@ -224,9 +224,9 @@
</div> </div>
<div class="tabline center"> <div class="tabline center">
<div class="content left"> <div class="content left">
<div id="tab_general_settings" class="block tab tab-selected">General settings</div> <!-- <div id="tab_general_settings" class="block tab tab-selected">General settings</div> -->
<div id="tab_sites" class="block tab">Site options</div> <!-- <div id="tab_sites" class="block tab">Site options</div> -->
<div id="tab_shortcuts" class="block tab">Shortcuts</div> <div id="tab_shortcuts" class="block tab tab-selected">Shortcuts</div>
<div id="tab_about" class="block tab">About</div> <div id="tab_about" class="block tab">About</div>
</div> </div>
</div> </div>
@ -234,7 +234,7 @@
<div id="general_settings"> <div id="general_settings" class="hide">
<div class="content left"> <div class="content left">
<div class="uw_options_line"> <div class="uw_options_line">
<div class="uw_options_option"><input type="checkbox" id='enable_autoar'> <strike>Enable automatic aspect ratio detection</strike></div> <div class="uw_options_option"><input type="checkbox" id='enable_autoar'> <strike>Enable automatic aspect ratio detection</strike></div>
@ -265,101 +265,76 @@
</div> </div>
</div> </div>
<div id="uw_shortcuts" class="hide"> <div id="uw_shortcuts">
<h1>Guess which thing doesn't do shit at the moment either?</h1>
<h2>If you guessed this page ... well.</h2>
<div class="content left"> <div class="content left">
<h2>Keyboard shortcuts</h2>
<form> <form>
<!-- BEGIN FORM --> <!-- BEGIN FORM -->
<!-- try autoar -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Autodetect aspect ratio</div>
<input type='checkbox' id="_kbd_autoar_ctrlKey" > Ctrl +
<input type='checkbox' id="_kbd_autoar_shiftKey" > Shift +
<input type='checkbox' id="_kbd_autoar_altKey" > Alt +
<input type='text' id="_kbd_autoar_lettr" maxlength='1' class='shortcut_input'>
</div>
<!-- fit width --> <!-- fit width -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to width</div> <div class="uw_shortcuts_label">Fit to width</div>
<input type='checkbox' id='fitw_ctrl' > Ctrl + <input type='checkbox' id="_kbd_fitw_ctrlKey" > Ctrl +
<input type='checkbox' id='fitw_shift' > Shift + <input type='checkbox' id="_kbd_fitw_shiftKey" > Shift +
<input type='checkbox' id='fitw_alt' > Alt + <input type='checkbox' id="_kbd_fitw_altKey" > Alt +
<input type='text' id='fitw_letter' maxlength='1' class='shortcut_input'> <input type='text' id="_kbd_fitw_lettr" maxlength='1' class='shortcut_input'>
</div> </div>
<!-- fit height --> <!-- fit height -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to height</div> <div class="uw_shortcuts_label">Fit to height</div>
<input type='checkbox' id='fith_ctrl' > Ctrl + <input type='checkbox' id="_kbd_fith_ctrlKey" > Ctrl +
<input type='checkbox' id='fith_shift' > Shift + <input type='checkbox' id="_kbd_fith_shiftKey" > Shift +
<input type='checkbox' id='fith_alt' > Alt + <input type='checkbox' id="_kbd_fith_altKey" > Alt +
<input type='text' id='fith_letter' maxlength='1' class='shortcut_input'> <input type='text' id="_kbd_fith_lettr" maxlength='1' class='shortcut_input'>
</div> </div>
<!-- reset --> <!-- reset -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Reset</div> <div class="uw_shortcuts_label">Reset</div>
<input type='checkbox' id='reset_ctrl' > Ctrl + <input type='checkbox' id="_kbd_reset_ctrlKey" > Ctrl +
<input type='checkbox' id='reset_shift' > Shift + <input type='checkbox' id="_kbd_reset_shiftKey" > Shift +
<input type='checkbox' id='reset_alt' > Alt + <input type='checkbox' id="_kbd_reset_altKey" > Alt +
<input type='text' id='reset_letter' maxlength='1' class='shortcut_input'> <input type='text' id="_kbd_reset_lettr" maxlength='1' class='shortcut_input'>
</div>
<!-- zoom -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Zoom</div>
<input type='checkbox' id='zoom_ctrl' > Ctrl +
<input type='checkbox' id='zoom_shift' > Shift +
<input type='checkbox' id='zoom_alt' > Alt +
<input type='text' id='zoom_letter' maxlength='1' class='shortcut_input'>
</div>
<!-- unzoom -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Unzoom</div>
<input type='checkbox' id='unzoom_ctrl' > Ctrl +
<input type='checkbox' id='unzoom_shift' > Shift +
<input type='checkbox' id='unzoom_alt' > Alt +
<input type='text' id='unzoom_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 21:9 --> <!-- force 21:9 -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Force 21:9</div> <div class="uw_shortcuts_label">Force 21:9</div>
<input type='checkbox' id='ar219_ctrl' > Ctrl + <input type='checkbox' id="_kbd_char_219_ctrlKey" > Ctrl +
<input type='checkbox' id='ar219_shift' > Shift + <input type='checkbox' id="_kbd_char_219_shiftKey" > Shift +
<input type='checkbox' id='ar219_alt' > Alt + <input type='checkbox' id="_kbd_char_219_altKey" > Alt +
<input type='text' id='ar219_letter' maxlength='1' class='shortcut_input'> <input type='text' id="_kbd_char_219_lettr" maxlength='1' class='shortcut_input'>
</div>
<!-- force 2:1 -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Force 2:1 (18:9)</div>
<input type='checkbox' id="_kbd_char_189_ctrlKey" > Ctrl +
<input type='checkbox' id="_kbd_char_189_shiftKey" > Shift +
<input type='checkbox' id="_kbd_char_189_altKey" > Alt +
<input type='text' id="_kbd_char_189_lettr" maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 16:9 --> <!-- force 16:9 -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Force 16:9</div> <div class="uw_shortcuts_label">Force 16:9</div>
<input type='checkbox' id='ar169_ctrl' > Ctrl + <input type='checkbox' id="_kbd_char_169_ctrlKey" > Ctrl +
<input type='checkbox' id='ar169_shift' > Shift + <input type='checkbox' id="_kbd_char_169_shiftKey" > Shift +
<input type='checkbox' id='ar169_alt' > Alt + <input type='checkbox' id="_kbd_char_169_altKey" > Alt +
<input type='text' id='ar169_letter' maxlength='1' class='shortcut_input'> <input type='text' id="_kbd_char_169_lettr" maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 16:10 -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Force 16:10</div>
<input type='checkbox' id='ar1610_ctrl' > Ctrl +
<input type='checkbox' id='ar1610_shift' > Shift +
<input type='checkbox' id='ar1610_alt' > Alt +
<input type='text' id='ar1610_letter' maxlength='1' class='shortcut_input'>
</div>
<!-- force 4:3 -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Force 4:3</div>
<input type='checkbox' id='ar43_ctrl' > Ctrl +
<input type='checkbox' id='ar43_shift' > Shift +
<input type='checkbox' id='ar43_alt' > Alt +
<input type='text' id='ar43_letter' maxlength='1' class='shortcut_input'>
</div>
<!-- try autoar -->
<div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Autodetect aspect ratio (Netflix only)</div>
<input type='checkbox' id='autoar_ctrl' > Ctrl +
<input type='checkbox' id='autoar_shift' > Shift +
<input type='checkbox' id='autoar_alt' > Alt +
<input type='text' id='autoar_letter' maxlength='1' class='shortcut_input'>
</div>
<!-- END FORM --> <!-- END FORM -->
</form> </form>
<div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div> <div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div>
@ -382,7 +357,7 @@
<p>this is the future lol. (at least as far as autodetection goes, keybinds need to make a comeback)</p> <p>this is the future lol. (at least as far as autodetection goes, keybinds need to make a comeback)</p>
<h2>Acknowledgements</h2> <h2>Acknowledgements</h2>
<p>This extension uses font <a href="https://fonts.google.com/specimen/Oxygen">Oxygen</a>.</p> <p>This extension uses font <a href="https://fonts.google.com/specimen/Oxygen">Oxygen</a>.</p>
<p>Special thanks to CD Project Red (The Witcher 2), Anet (Guild Wars 2), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p> <p>Special thanks to CD Project Red (The Witcher 2), Cyanide Studios (Styx, Of Orcs and Men), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p>
<small><p>More or less.</p> <small><p>More or less.</p>
<!-- <p>GW2 is also roughly how the avatar was obtained. Noone tell Anet, though.</p> --></small> <!-- <p>GW2 is also roughly how the avatar was obtained. Noone tell Anet, though.</p> --></small>
<p>Special one-finger salute to all incompetent people who don't know how to properly encode videos and upload them to youtube (to word it most nicely).</p> <p>Special one-finger salute to all incompetent people who don't know how to properly encode videos and upload them to youtube (to word it most nicely).</p>
@ -391,6 +366,14 @@
</div> </div>
</div> </div>
<script src="../../js/dep/jquery-3.1.1.js" ></script>
<script src="../../js/conf/Debug.js"></script>
<script src="../../js/lib/BrowserDetect.js"></script>
<script src="../../js/lib/StorageManager.js"></script>
<script src="../../js/conf/Keybinds.js"></script>
<script src="../../js/conf/Settings.js"></script>
<script src="./settings.js"></script> <script src="./settings.js"></script>
</body> </body>

134
res/settings/settings.js Normal file
View File

@ -0,0 +1,134 @@
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");
}
async function loadKeybinds(){
// load showShortcuts
var keybinds = await Keybinds.fetch();
for(var key in keybinds){
if(Debug.debug)
console.log("[settings.js::loadKeybinds] we're looking at this key:", key, "it splits like this:", key.toLowerCase().split("_"));
var keypressArr = key.split("_");
var opts = keybinds[key];
var query = "_kbd_" + opts.action + "_";
if(opts.action == "char"){
if(opts.targetAr == 2.39)
query += ("219_");
else if(opts.targetAr == 2.0)
query += ("189_");
else if(opts.targetAr == 1.78)
query += ("169_");
}
var q2;
for(var modKey of Keybinds.mods){
q2 = "#" + query + modKey;
document.querySelector(q2).checked = keypressArr.indexOf(modKey) != -1;
}
q2 = "#" + query + "lettr";
document.querySelector(q2).value = keypressArr[keypressArr.length - 1].toLowerCase();
}
}
async function saveKeybinds(){
var actions = [ "autoar", "fitw", "fith", "reset", "char_219", "char_189", "char_169" ];
var savedShortcuts = {};
for(var action of actions){
var queryBase = "#_kbd_" + action;
var letter = document.querySelector(queryBase + "_lettr").value.trim();
if(letter === "" || letter === undefined)
continue; // we don't make a shortcut for this action
var shortcutKeypress = "";
for(mod of Keybinds.mods)
if(document.querySelector(queryBase + "_" + mod).checked)
shortcutKeypress += (mod + "_");
shortcutKeypress += letter;
savedShortcuts[shortcutKeypress] = {};
if(action.startsWith("char_")){
savedShortcuts[shortcutKeypress].action = "char";
if(action == "char_219")
savedShortcuts[shortcutKeypress].targetAr = 2.39;
else if(action == "char_189")
savedShortcuts[shortcutKeypress].targetAr = 2.0;
else if(action == "char_169")
savedShortcuts[shortcutKeypress].targetAr = 1.78;
}
else{
savedShortcuts[shortcutKeypress].action = action;
}
}
// out with the old
await StorageManager.delopt("keybinds");
//in with the new
StorageManager.setopt({"keybinds":savedShortcuts});
}
// 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();

0
res/settings.js → res/settings/settings.js.old
View File