diff --git a/README.md b/README.md index a0e60f6..c12d266 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay ### Permanent install -~~[v0.9.9.5 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change. It hasn't been tested whether autoupdating works, and it probably doesn't.~~ +[v1.0-rc1 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change. It hasn't been tested whether autoupdating works, and it probably doesn't. [v0.9.9 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) — more stable and with AMO's approval. No experimental features either. (NOTE: there's a version number hiccup going on with AMO version. Stuff here on Github is the freshest, regardless of what manifest says) @@ -32,7 +32,7 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay ## How do I use it? -This is the interface (**NOTE: AMO version doesn't have buttons yet!**): +This is the interface: ![GUI buttons - ELI5](img-demo/interface-explained.jpg "If you know me and came looking for the obligatory »it's a wyvern, not a dragon« comment ... well, you just found it.") @@ -54,7 +54,7 @@ If you can read this, you'll probably figure out the rest of the way. ¹These ratios are calculated using the number in the brackets, as 1920/1080 does not strictly equal to 16/9 (same goes for 21:9). -**Please note that these keybindings could change at any time, and some definitely will** (apparently some of them conflict with youtube player)**.** I'll try to get them sorted out by the end of october. +![Jesus Christ.](img-demo/example-jasonbourne.png "This is indeed worse than Snowden.") ## What works @@ -110,3 +110,7 @@ Keybind `a` just doesn't work at all, so no 16:10. * All buttons in the player's control bar are now also in the settings popup. * Had to scrap settings page in its current form * TODO: sometimes not all buttons can fit in the control bar. Such occurences should be detected. + +###v1.0-rc1 + +* Settings page is added and mostly working. diff --git a/img-demo/example-jasonbourne.png b/img-demo/example-jasonbourne.png new file mode 100644 index 0000000..0cd7541 Binary files /dev/null and b/img-demo/example-jasonbourne.png differ diff --git a/js/uw.js b/js/uw.js index 5560115..dd17746 100644 --- a/js/uw.js +++ b/js/uw.js @@ -66,49 +66,49 @@ if(page_url.indexOf("youtu") != -1){ // Yeah hi /r/badcode. // Anyway, because nazi localstorage flat out refuses to store arrays: var DEFAULT_KEYBINDINGS = { - 1:{ action: "fitw", + 0:{ action: "fitw", key: 'w', modifiers: [] }, - 2:{ + 1:{ action: "fith", key: 'e', modifiers: [] }, - 3: { + 2: { action: "reset", key: 'r', modifiers: [] }, - 4: { + 3: { action: "zoom", key: "z", modifiers: [] }, - 5: { + 4: { action: "unzoom", key: "u", modifiers: [] }, - 6: { + 5: { action: "char", targetAR: (21/9), key: "d", modifiers: [] }, - 7: { + 6: { action: "char", targetAR: (16/9), key: "s", modifiers: [] }, - 8: { + 7: { action: "char", targetAR: (16/10), key: "x", modifiers: [] }, - 9: { + 8: { action: "char", targetAR: (4/3), key: "a", @@ -423,7 +423,7 @@ function addCtlButtons(provider_id){ smenu_ar_options[2].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/9 )); }; smenu_ar_options[3].onclick = function(event) {event.stopPropagation(); changeCSS("char", (21/9 )); }; -// smenu_el[0].onclick = function() { showSettings() }; + smenu_el[0].onclick = function (event) {event.stopPropagation(); showSettings() }; smenu_el[5].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fitw" ) }; smenu_el[4].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fith" ) }; @@ -431,58 +431,6 @@ function addCtlButtons(provider_id){ smenu_el[1].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"zoom" ) }; smenu_el[2].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"unzoom") }; - - //BEGIN SETTINGS WINDOW -// var e_player; -// -// if(inIframe()) -// e_player = document.getElementById("player"); -// else -// e_player = document.getElementById("movie_player"); -// - - var menu_panel = document.createElement('div'); - menu_panel.id = "uw_settings_panel"; - menu_panel.className = "uw-ext-settings-bg uw_element"; - - var kbs_actions = [ - {action:"fitw", label:"Fit width:"}, - {action:"fith",label:"Fit height:"}, - {action:"reset",label:"Reset:"}, - {action:"zoom",label:"Zoom in:"}, - {action:"unzoom",label:"Zoom out:"}, - {action:"ar219",label:"Force 21:9"}, - {action:"ar169",label:"Force 16:9"}, - {action:"ar1610",label:"Force 16:10"}, - {action:"ar43",label:"Force 4:3"} - ]; - - var form = ""; - for( var i = 0; i < kbs_actions.length; i++){ - form += "
\ -
" + kbs_actions[i].label + "
\ - Ctrl + \ - Shift + \ - Alt + \ -
"; - } - - var settings_content = document.createElement('div'); - var savekb = document.createElement('div'); - savekb.className = 'uw_kbshortcuts_button'; - savekb.onclick = function() { saveKeybinds() }; - savekb.innerHTML = "Save"; - settings_content.className = "uw-ext-settings-content"; - settings_content.innerHTML = ""; - - e_player.appendChild(menu_panel); -// menu_panel.appendChild(settings_content); - - - - document.getElementById('uw_close_settings_view').onclick = function() { hideSettings() }; - - //END SETTINGS WINDOW } @@ -493,16 +441,25 @@ function addCtlButtons(provider_id){ //END UI -function showSettings(){ - document.getElementById("uw_settings_panel").style.display = "block"; +function onOpen(){ + if(debugmsg) + console.log("uw | Options page opened"); } -function hideSettings(){ - document.getElementById("uw_settings_panel").style.display = "none"; -} -// function saveKeybinds(){ -// console.log($('uw_kbshortcuts_form').serializeArray()); -// } +function onError(err){ + if(debug){ + console.log(`Error: ${error}`); + console.log("uw | Error opening the page", err); + } +} + +function showSettings(){ + var prettypls = browser.runtime.openOptionsPage(); + prettypls.then(onOpen, onError); + + console.log(prettypls); + +} // Ta funkcija se proži, ko vstopimo ali izstopimo iz celozaslonskega načina // This function gets triggered by full screen state change diff --git a/manifest.json b/manifest.json index 9ec013d..ac0cdd5 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Ultrawidify-git", - "version": "0.9.9.6", + "version": "1.0rc1", "icons": { "32":"res/icons/uw-32.png", @@ -41,6 +41,7 @@ ], "options_ui" : { - "page": "res/settings.html" + "page": "res/settings.html", + "open_in_tab": true } } diff --git a/res/settings.html b/res/settings.html index 92cbcbf..0688c1b 100644 --- a/res/settings.html +++ b/res/settings.html @@ -76,50 +76,63 @@ .tab{ color: #fa6607; } - .tab-selected{ + .tab:hover{ + text-shadow: #aa5 0px 0px 0.02em,#aa5 0px 0px 0.02em; + } + .tab-selected { color: #ff9 !important; } #all{ min-width: 100%; min-height: 100vh; - background-image: url('res/img/settings/about-bg.png'); + background-image: url('img/settings/about-bg.png'); background-position: calc(50vw + 20em) 10vh; background-attachment: fixed; background-size: auto 100%; background-repeat: no-repeat; } - + .dup_keybinds{ + background-color: #720 !important; + } + input[type=text]{ + font-size: 1em; + padding-left: 0.6em; + margin-left: 1em; + width: 2em; + background-color: #000; + border: 1px #442 solid; + } + .uw_shortcuts_line{ + padding-top: 0.25em; + padding-left: 10em; + } + .uw_shortcuts_label{ + display: inline-block; + color: #fff; + width: 7.5em; + } + .buttonbar{ + width: 100%; + padding-left: 20em; + margin-bottom: 2em; + } + .button{ + display: inline-block; + margin-left: 1em; + margin-right: 1em; + padding-left: 1em; + padding-right: 1em; + padding-top: 0.4em; + width: 4em; + text-align: center; + background-color: rgba(0,0,0,0.66); + color: #ffc; + height: 1.7em; + } - - +
@@ -129,98 +142,100 @@
-
Shortcuts
-
About
+
Shortcuts
+
About
+
Fit to width
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Fit to height
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Reset
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Zoom
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Unzoom
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Fit to height
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Fit to height
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Fit to height
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
Fit to height
- Ctrl + - Shift + - Alt + - + Ctrl + + Shift + + Alt + +
+
-
Cancel | Close
+
Cancel
Save
-
Note: keyboard shortcut conflicts aren't handled by this extension. You must know your shortcuts.
Pro tip: If you don't want to have a keybind for a shortcut, just uncheck all boxes for the action and remove the letter
+
Note: keyboard shortcut conflicts aren't handled by this extension. You must know your shortcuts.
Pro tip: If you don't want to have a keybind for a shortcut, just uncheck all boxes for the action and remove the letter
@@ -239,6 +254,9 @@

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

- + + + + diff --git a/res/settings.js b/res/settings.js new file mode 100644 index 0000000..cc98590 --- /dev/null +++ b/res/settings.js @@ -0,0 +1,150 @@ +function showAbout(){ + document.getElementById("uw_shortcuts").classList.add("hide"); + document.getElementById("about").classList.remove("hide"); + + document.getElementById("tab_shortcuts").classList.remove("tab-selected"); + document.getElementById("tab_about").classList.add("tab-selected"); +} +function showShortcuts(){ + document.getElementById("uw_shortcuts").classList.remove("hide"); + document.getElementById("about").classList.add("hide"); + + document.getElementById("tab_shortcuts").classList.add("tab-selected"); + document.getElementById("tab_about").classList.remove("tab-selected"); + +} + +function saveopts(){ + + var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"]; + var new_keybinds = {}; + + // Preberemo naš obrazec in iz njega naredimo nov objekt z bližnjicami. + // Let's read our form and make a new object with keybinds. + + for(var i = 0; i < actions.length; i++){ + var action = actions[i]; + var targetAR = ""; + + if(action == "ar219"){ + action = "char"; + targetAR = (21/9); + } + if(action == "ar169"){ + action = "char"; + targetAR = (16/9); + } + if(action == "ar1610"){ + action = "char"; + targetAR = (16/10); + } + if(action == "ar43"){ + action = "char"; + targetAR = (4/3); + } + + if(targetAR != ""){ + var keybind = { + action: action, + targetAR: targetAR, + key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""), + modifiers: [] + } + } + else{ + var keybind = { + action: action, + key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""), + modifiers: [] + } + } + + if(document.querySelector("#" + actions[i] + "_ctrl").checked) + keybind.modifiers.push("ctrl"); + if(document.querySelector("#" + actions[i] + "_alt").checked) + keybind.modifiers.push("alt"); + if(document.querySelector("#" + actions[i] + "_shift").checked) + keybind.modifiers.push("shift"); + + new_keybinds[i] = keybind; + } + + // Preveriti moramo, da nismo dvema možnostima dodali isto bližnjico. + // We need to check if all keybinds are unique. + + var fail = false; + + for(var i = 0; i < actions.length; i++) + document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds"); + + for(var i = 0; i < actions.length; i++){ + if(new_keybinds[i].key == "") + continue; + + for(var j = i + 1; j < actions.length; j++){ + if(new_keybinds[i].key == new_keybinds[j].key){ + if(compareModifiers(new_keybinds[i].modifiers, new_keybinds[j].modifiers)){ + fail = true; + document.querySelector("#" + actions[i] + "_letter").classList.add("dup_keybinds"); + document.querySelector("#" + actions[j] + "_letter").classList.add("dup_keybinds"); + } + } + } + } + + if (!fail){ + browser.storage.local.set({ultrawidify_keybinds:new_keybinds}); + } + +} + +function compareModifiers(a,b){ + //NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj + // dobro, saj 'ctrl' vedno pride pred 'alt' in 'alt' vedno pride pred 'shift' (če se sploh pojavijo). + //NOTE: this is bad and totally unfoolproof practice. In our example comparing arrays the way we do works + // because values ALWAYS appear in the same order: 'ctrl' always appears before 'alt' (or it doesn't + // appear at all). 'alt' always appears before 'shift' (or it doesn't appear at all). + if(a.length != b.length) + return false; + + var match = true; + for(var i = 0; i < a.length; i++) + match &= a[i] == b[i] + + return match; +} + +function printerr(err){ + console.log(err); +} + +function gotopts(opts){ + var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];}); + + var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"]; + for(var i = 0; i < actions.length; i++){ + document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds"); + document.querySelector("#" + actions[i] + "_letter").value = KEYBINDS[i].key; + for(var j = 0; j < KEYBINDS[i].modifiers.length; j++){ + if(KEYBINDS[i].modifiers[j] == "ctrl") + document.querySelector("#" + actions[i] + "_ctrl").checked = true; + if(KEYBINDS[i].modifiers[j] == "alt") + document.querySelector("#" + actions[i] + "_alt").checked = true; + if(KEYBINDS[i].modifiers[j] == "shift") + document.querySelector("#" + actions[i] + "_shift").checked = true; + } + } +} + +function loadopts(){ + var ask4keybinds = browser.storage.local.get("ultrawidify_keybinds"); + ask4keybinds.then(gotopts, printerr); +} + +document.addEventListener("DOMContentLoaded", loadopts); + +document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts); +document.querySelector("#tab_about").addEventListener("click", showAbout); + +document.querySelector("#kb_save").addEventListener("click", saveopts); +document.querySelector("#kb_cancel").addEventListener("click",loadopts); diff --git a/ultrawidify.zip b/ultrawidify.zip new file mode 100644 index 0000000..c734bf2 Binary files /dev/null and b/ultrawidify.zip differ