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

Popup: functional. TODO: implement command handling in CommsClient

Browse Source
This commit is contained in:
Tamius Han 2018-09-18 00:40:05 +02:00
parent 4965529de9
commit c8f65f7fca
6 changed files with 188 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/conf/Debug.js
View File

@ -10,7 +10,8 @@ Debug = {
debugStorage: false,
comms: false,
// showArDetectCanvas: true,
flushStoredSettings: false,
flushStoredSettings: true,
// flushStoredSettings: false,
playerDetectDebug: true,
periodic: true,
videoRescan: true,

2
js/conf/ExtensionConf.js
View File

@ -203,7 +203,7 @@ var ExtensionConf = {
// arStatus: <option> // should we do autodetection on this site?
// statusEmbedded: <option> // reserved for future... maybe
//
// ar?: <ratio> // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
// defaultAar?: <ratio> // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
// stretch? <stretch mode> // automatically stretch video on this site in this manner
// videoAlignment? <left|center|right>
//

16
js/lib/Settings.js
View File

@ -275,26 +275,26 @@ class Settings {
getDefaultAr(site) {
site = this.getSiteSettings(site);
if (this.active.sites[site].ar) {
return this.active.sites[site].ar;
if (site.defaultAr) {
return site.defaultAr;
}
return this.active.miscFullscreenSettings.defaultAr;
}
getDefaultStretch(site) {
getDefaultStretchMode(site) {
site = this.getSiteSettings(site);
if (this.active.sites[site].stretch) {
return this.active.sites[site].stretch;
if (site.stretch) {
return site.stretch;
}
return this.active.miscFullscreenSettings.stretch.initialMode;
return this.active.stretch.initialMode;
}
getDefaultVideoAlignment(site) {
site = this.getSiteSettings(site);
if (this.active.sites[site].videoAlignment) {
return this.active.sites[site].videoAlignment;
if (site.videoAlignment) {
return site.videoAlignment;
}
return this.active.miscFullscreenSettings.videoFloat;
}

2
manifest.json
View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"version": "3.2.0",
"version": "3.2.0-a1",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

147
res/popup/js/popup.js
View File

@ -30,6 +30,11 @@ ExtPanel.alignment = {};
ExtPanel.alignment.left = document.getElementById("_align_ext_left");
ExtPanel.alignment.center = document.getElementById("_align_ext_center");
ExtPanel.alignment.right = document.getElementById("_align_ext_right");
ExtPanel.stretch = {};
ExtPanel.stretch['0'] = document.getElementById("_stretch_global_none");
ExtPanel.stretch['1'] = document.getElementById("_stretch_global_basic");
ExtPanel.stretch['2'] = document.getElementById("_stretch_global_hybrid");
ExtPanel.stretch['3'] = document.getElementById("_stretch_global_conditional");
//#endregion
//#region SitePanel
var SitePanel = {};
@ -46,8 +51,14 @@ SitePanel.alignment.left = document.getElementById("_align_site_left");
SitePanel.alignment.center = document.getElementById("_align_site_center");
SitePanel.alignment.right = document.getElementById("_align_site_right");
SitePanel.alignment.default = document.getElementById("_align_site_default");
SitePanel.stretch = {};
SitePanel.stretch['-1'] = document.getElementById("_stretch_site_default")
SitePanel.stretch['0'] = document.getElementById("_stretch_site_none")
SitePanel.stretch['1'] = document.getElementById("_stretch_site_basic")
SitePanel.stretch['2'] = document.getElementById("_stretch_site_hybrid")
SitePanel.stretch['3'] = document.getElementById("_stretch_site_conditional")
//#endregion
//#region VideoPanel
var VideoPanel = {};
VideoPanel.alignment = {};
VideoPanel.alignment.left = document.getElementById("_align_video_left");
@ -70,6 +81,9 @@ VideoPanel.buttons = {};
VideoPanel.buttons.zoom = {};
VideoPanel.buttons.zoom.showShortcuts = document.getElementById("_zoom_b_show_shortcuts");
VideoPanel.buttons.zoom.hideShortcuts = document.getElementById("_zoom_b_hide_shortcuts");
VideoPanel.buttons.changeAr = {};
VideoPanel.buttons.changeAr.showCustomAr = document.getElementById("_changeAr_b_show_customAr");
VideoPanel.buttons.changeAr.hideCustomAr = document.getElementById("_changeAr_b_hide_customAr");
// inputs (getting values)
VideoPanel.inputs = {};
@ -81,6 +95,12 @@ VideoPanel.inputs.allowPan = document.getElementById("_input_zoom_site_a
VideoPanel.labels = {};
VideoPanel.labels.zoomLevel = document.getElementById("_label_zoom_level");
// misc stuff
VideoPanel.misc = {};
VideoPanel.misc.zoomShortcuts = document.getElementById("_zoom_shortcuts");
VideoPanel.misc.customArChanger = document.getElementById("_changeAr_customAr");
//#endregion
var selectedMenu = "";
var hasVideos = false;
@ -179,6 +199,7 @@ function configureGlobalTab() {
"\nextension mode: ", settings.active.extensionMode,
"\narDetect mode: ", settings.active.arDetect.mode,
"\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat,
"\nstretch mode: ", settings.active.stretch.initialMode,
"\n..")
}
@ -186,19 +207,20 @@ function configureGlobalTab() {
for(var button in ExtPanel.extOptions) {
ExtPanel.extOptions[button].classList.remove("selected");
}
try{
for(var button in ExtPanel.arOptions) {
ExtPanel.arOptions[button].classList.remove("selected");
}
} catch (e) {};
for(var button in ExtPanel.alignment) {
ExtPanel.alignment[button].classList.remove("selected");
}
for(var button in ExtPanel.stretch) {
ExtPanel.stretch[button].classList.remove("selected");
}
ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected");
ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected");
ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
ExtPanel.stretch[settings.active.stretch.initialMode].classList.add("selected");
}
function configureSitesTab(site) {
@ -222,16 +244,25 @@ function configureSitesTab(site) {
for(const button in SitePanel.alignment) {
SitePanel.alignment[button].classList.remove("selected");
}
for(const button in SitePanel.stretch) {
SitePanel.stretch[button].classList.remove("selected");
}
SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
// optional settings:
if (settings.active.sites.ar) {
if (settings.active.sites[site].videoAlignment) {
SitePanel.alignment[settings.active.sites[site].videoAlignment].classList.add("selected");
} else {
SitePanel.alignment.default.classList.add('selected');
}
if(settings.active.sites[site].stretch !== undefined) { // can be 0
SitePanel.stretch[settings.active.sites[site].stretch].classList.add("selected");
} else {
SitePanel.stretch['-1'].classList.add("selected");
}
}
function configureVideoTab() {
@ -294,10 +325,18 @@ function configureVideoTab() {
VideoPanel.inputs.zoomSlider.min = Math.log2(0.5);
VideoPanel.inputs.zoomSlider.max = Math.log2(8);
VideoPanel.inputs.zoomSlider.value = 0;
VideoPanel.inputs.zoomSlider.addEventListener('input', (event) => {
var newZoom = Math.pow(2, VideoPanel.inputs.zoomSlider.value);
// TODO: send new zoom value to current tab
VideoPanel.labels.zoomLevel.textContent = (newZoom * 100).toFixed();
var command = {
cmd: 'set-zoom',
zoom: newZoom
};
port.postMessage(command);
});
}
@ -517,6 +556,7 @@ document.addEventListener("click", (e) => {
}
}
if(e.target.classList.contains("_stretch")){
// stretch, global
if (e.target.classList.contains("_ar_stretch_global")) {
if (e.target.classList.contains("_none")) {
settings.active.stretch.initialMode = 0;
@ -531,6 +571,23 @@ document.addEventListener("click", (e) => {
return;
}
// stretch, site
if (e.target.classList.contains("_ar_stretch_site")) {
if (e.target.classList.contains("_none")) {
settings.active.sites[site].stretch = 0;
} else if (e.target.classList.contains("_basic")) {
settings.active.sites[site].stretch = 1;
} else if (e.target.classList.contains("_hybrid")) {
settings.active.sites[site].stretch = 2;
} else if (e.target.classList.contains("_conditional")) {
settings.active.sites[site].stretch = 3;
} else {
delete(settings.active.sites[site].stretch);
}
settings.save();
return;
}
if(e.target.classList.contains("_ar_stretch_none")) {
command.cmd = "set-stretch";
command.mode = "NO_STRETCH";
@ -591,21 +648,83 @@ document.addEventListener("click", (e) => {
}
}
if(e.target.classList.contains("_align")){
command.global = true;
if (e.target.classList.contains("_align_left")) {
if (e.target.classList.contains("_align_ext")) {
if (e.target.classList.contains("_align_ext_left")) {
settings.active.miscFullscreenSettings.videoFloat = 'left';
} else if (e.target.classList.contains("_align_center")) {
} else if (e.target.classList.contains("_align_ext_center")) {
settings.active.miscFullscreenSettings.videoFloat = 'center';
} else if (e.target.classList.contains("_align_right")) {
settings.active.miscFullscreenSettings.videoFloat = 'left';
} else if (e.target.classList.contains("_align_ext_right")) {
settings.active.miscFullscreenSettings.videoFloat = 'right';
}
}
if (e.target.classList.contains("_align_site")) {
if (!site) {
return;
}
if (e.target.classList.contains("_align_site_left")) {
settings.active.sites[site].videoAlignment = 'left';
} else if (e.target.classList.contains("_align_site_center")) {
settings.active.sites[site].videoAlignment = 'center';
} else if (e.target.classList.contains("_align_site_right")) {
settings.active.sites[site].videoAlignment = 'right';
} else {
// default case — remove this object
delete(settings.active.sites[site].videoAlignment);
}
settings.save();
return;
}
}
if (e.target.classList.contains("_align")) {
command.cmd = "set-alignment";
if (e.target.classList.contains("_align_left")) {
command.mode = 'left';
} else if (e.target.classList.contains("_align_center")) {
command.mode = 'center';
} else if (e.target.classList.contains("_align_right")) {
command.mode = 'right';
}
return command;
}
//#region zoom buttons
if (e.target.classList.contains("_zoom_show_shortcuts")) {
VideoPanel.misc.zoomShortcuts.classList.remove("hidden");
VideoPanel.buttons.zoom.hideShortcuts.classList.remove("hidden");
VideoPanel.buttons.zoom.showShortcuts.classList.add("hidden");
return;
}
if (e.target.classList.contains("_zoom_hide_shortcuts")) {
VideoPanel.misc.zoomShortcuts.classList.add("hidden");
VideoPanel.buttons.zoom.hideShortcuts.classList.add("hidden");
VideoPanel.buttons.zoom.showShortcuts.classList.remove("hidden");
return;
}
if (e.target.classList.contains("_zoom_reset")) {
VideoPanel.labels.zoomLevel.textContent = 100;
VideoPanel.inputs.zoomSlider.value = 0; // log₂(1)
command.cmd = 'set-zoom';
command.zoom = 1;
return;
}
//#endregion
//#region show/hide custom ar
if (e.target.classList.contains("_changeAr_show_customAr")) {
VideoPanel.misc.customArChanger.classList.remove("hidden");
VideoPanel.buttons.changeAr.showCustomAr.classList.add("hidden");
VideoPanel.buttons.changeAr.hideCustomAr.classList.remove("hidden");
return;
}
if (e.target.classList.contains("_changeAr_hide_customAr")) {
VideoPanel.misc.customArChanger.classList.add("hidden");
VideoPanel.buttons.changeAr.showCustomAr.classList.remove("hidden");
VideoPanel.buttons.changeAr.hideCustomAr.classList.add("hidden");
return;
}
//#endregion
}
var command = getcmd(e);

57
res/popup/popup.html
View File

@ -61,6 +61,7 @@
</div>
<!-- TODO: default aspect ratio settings -->
<span class="label experimental">Default stretching mode</span>
<div class="button-row">
<a id="_stretch_global_none" class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
@ -74,9 +75,9 @@
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_ext_left" class="button _align _align_ext_left">left</a>
<a id="_align_ext_center" class="button _align _align_ext_center">center</a>
<a id="_align_ext_right" class="button _align _align_ext_right">right</a>
<a id="_align_ext_left" class="button _align_ext _align_ext_left">Left</a>
<a id="_align_ext_center" class="button _align_ext _align_ext_center">Center</a>
<a id="_align_ext_right" class="button _align_ext _align_ext_right">Right</a>
</div>
</div>
</div>
@ -100,16 +101,29 @@
<a id="_ar_site_options_disabled" class="button _autoAr _ar_site_options _disabled">Blacklist</a>
</div>
</div>
<!-- TODO: default aspect ratio, default settings -->
<!-- STRETCH MODE -->
<div class="row">
<span class="label experimental">Default stretching mode</span>
<div class="button-row">
<a id="_stretch_site_none" class="button _stretch _ar_stretch_site _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_basic" class="button _stretch _ar_stretch_site _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_hybrid" class="button _stretch _ar_stretch_site _hybrid w24">Hybrid<br/><span id="_b_stretch_default_hybrid_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_conditional" class="button _stretch _ar_stretch_site _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_default" class="button _stretch _ar_stretch_site _default w24">Default<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
</div>
</div>
<!-- VIDEO ALIGNMENT -->
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_site_left" class="button _align _align_video_left">left</a>
<a id="_align_site_center" class="button _align _align_video_center">center</a>
<a id="_align_site_right" class="button _align _align_video_right">right</a>
<a id="_align_site_default"class="button _align _align_site_right">default</a>
<a id="_align_site_left" class="button _align_site _align_site_left">Left</a>
<a id="_align_site_center" class="button _align_site _align_site_center">Center</a>
<a id="_align_site_right" class="button _align_site _align_site_right">Right</a>
<a id="_align_site_default"class="button _align_site _align_site_default">Default</a>
</div>
</div>
</div>
@ -129,8 +143,14 @@
<a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_custom w24">Custom<br/><span id="_b_changeAr_custom_key" class="smallcaps small darker">&nbsp;</span></a>
</div>
<div style="overflow: auto">
<div class="float-right medium-small">
<a id="_changeAr_b_show_customAr" class="_changeAr_show_customAr x-pad-1em">Set custom aspect ratio</a>
<a id="_changeAr_b_hide_customAr" class="_changeAr_hide_customAr hidden x-pad-1em">Hide custom aspect ratio settings</a>
</div>
</div>
</div>
<div class="row">
<div id="_changeAr_customAr" class="row hidden">
<span class="label">Custom aspect ratio</span>
<div>
<input id="_input_custom_ar" class="_changeAr _custom" onblur="validateCustomAr()"> &nbsp; &nbsp; <span id="_b_changeAr_save_custom_ar" class="button _ar_save_custom_ar _changeAr">Save</span>
@ -158,16 +178,25 @@
Zoom: <span id="_label_zoom_level">100</span>%
</div>
<div class="inline-block float-right medium-small">
<a class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a><a class="_zoom_hide_shortcuts hidden x-pad-1em">show shortcuts</a><a class="_zoom_reset x-pad-1em">reset</a>
<a id="_zoom_b_show_shortcuts" class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a>
<a id="_zoom_b_hide_shortcuts" class="_zoom_hide_shortcuts hidden x-pad-1em">hide shortcuts</a>
<a class="_zoom_reset x-pad-1em">reset</a>
</div>
</div>
<div class="m-t-0-33em w100 display-block">
<!-- <div class="m-t-0-33em w100 display-block">
<input id="_input_zoom_site_allow_pan"
type="checkbox"
/>
Pan with mouse
</div> -->
<div id="_zoom_shortcuts" class="row hidden">
<small>Keyboard shortcuts:<ul>
<li>Z: zoom</li>
<li>U: unzoom</li>
<li>P: toggle pan</li>
<li>shift: hold to enable/prevent pan</li>
</ul></small>
</div>
<!-- <small>Keyboard shortcuts:<ul><li>Z: zoom</li><li>U: unzoom</li><li>P: toggle pan</li><li>shift: hold to enable/prevent pan</li></ul></small> -->
</div>
<!-- STRETCH STUFF -->
@ -183,9 +212,9 @@
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_video_left" class="button _align _align_video_left">left</a>
<a id="_align_video_center" class="button _align _align_video_center">center</a>
<a id="_align_video_right" class="button _align _align_video_right">right</a>
<a id="_align_video_left" class="button _align _align_video_left">Left</a>
<a id="_align_video_center" class="button _align _align_video_center">Center</a>
<a id="_align_video_right" class="button _align _align_video_right">Right</a>
</div>
</div>
</div>