2017-11-13 23:34:24 +01:00
< html >
< head >
2018-07-09 23:40:26 +02:00
<!-- shit like this really makes you appreciate angular and similar frameworks, doesn't it? -->
2017-11-13 23:34:24 +01:00
< title > < / title >
< meta charset = "utf-8" >
2018-03-14 21:43:58 +01:00
< link rel = 'stylesheet' type = 'text/css' href = '../css/font/overpass.css' >
< link rel = 'stylesheet' type = 'text/css' href = '../css/font/overpass-mono.css' >
2018-09-14 22:21:39 +02:00
< link rel = 'stylesheet' type = 'text/css' href = '../css/common.css' >
< link rel = 'stylesheet' type = 'text/css' href = './css/popup.css' >
2017-11-13 23:34:24 +01:00
< / head >
< body >
2017-12-02 21:09:08 +01:00
< div class = "header" >
U< span class = "smallcaps" > ltrawidify< / span > : < small > Quick settings< / small >
2017-11-13 23:34:24 +01:00
< / div >
2018-09-14 22:21:39 +02:00
<!-- TABS/SIDEBAR -->
2017-12-02 21:09:08 +01:00
< div class = "left-side" >
2018-09-14 22:21:39 +02:00
< div id = "_menu_tab_settings_ext" class = "menu-item _menu_tab_settings_ext" >
Extension settings
2018-06-29 00:30:42 +02:00
< / div >
2018-09-16 14:14:16 +02:00
< div id = "_menu_tab_settings_site" class = "menu-item _menu_tab_settings_site" >
2018-09-14 22:21:39 +02:00
Site settings
2018-09-19 23:34:47 +02:00
< span class = "menu-item-inline-desc" > < br / > Settings for < span id = "_menu_tab_settings_site_site_label" > < / span > < / span >
2017-12-02 21:09:08 +01:00
< / div >
2018-09-16 14:14:16 +02:00
< div id = "_menu_tab_settings_video" class = "menu-item _menu_tab_settings_video" >
2018-09-14 22:21:39 +02:00
Video settings
< span class = "menu-item-inline-desc" > < br / > Crop & stretch options for current video< / span >
2017-12-02 21:09:08 +01:00
< / div >
2018-09-14 22:21:39 +02:00
< div id = "_menu_tab_about" class = "menu-item _menu_tab_about" >
2017-12-30 02:58:24 +01:00
About Ultrawidify< span class = "menu-item-inline-desc" > < br / > See for bug reports< / span >
< / div >
2017-11-13 23:34:24 +01:00
< / div >
2018-09-14 22:21:39 +02:00
<!-- PANELS/CONTENT -->
2017-12-02 21:09:08 +01:00
< div class = "right-side" >
2018-02-02 00:21:29 +01:00
< div id = "script-not-running-warning" class = "warning" > If you see this line, then your browser didn't start the popup script yet. This is a problem caused by the browser. Please wait a few seconds.< / div >
2018-07-19 23:05:39 +02:00
2018-09-14 22:21:39 +02:00
<!-- EXTENSION SETTINGS -->
< div id = "_menu_settings_ext" class = "suboption hidden" >
< p > These settings can be overriden on per-site basis.< / p >
2018-06-28 23:43:52 +02:00
< div class = "row" >
< span class = "label" > Enable this extension:< / span >
< div class = "button-row" >
< a id = "_ext_global_options_blacklist" class = "button _ext _ext_global_options _blacklist" > Always< / a >
< a id = "_ext_global_options_whitelist" class = "button _ext _ext_global_options _whitelist" > On whitelisted sites< / a >
< a id = "_ext_global_options_disabled" class = "button _ext _ext_global_options _disabled" > Never< / a >
< / div >
2018-06-27 23:55:37 +02:00
2018-09-20 22:02:15 +02:00
< div id = "_ext_only_when_ext_enabled" >
< div class = "row" >
< span class = "label" > Enable autodetection:< / span >
< div class = "button-row" >
< a id = "_ar_global_options_blacklist" class = "button _autoAr _ar_global_options _blacklist" > Always< / a >
< a id = "_ar_global_options_whitelist" class = "button _autoAr _ar_global_options _whitelist" > On whitelisted sites< / a >
< a id = "_ar_global_options_disabled" class = "button _autoAr _ar_global_options _disabled" > Never< / a >
< / div >
2018-06-28 23:43:52 +02:00
< / div >
2018-09-20 22:02:15 +02:00
<!-- TODO: default aspect ratio settings -->
2018-09-18 00:40:05 +02:00
2018-09-20 22:02:15 +02:00
< div class = "row" >
< 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 >
< a id = "_stretch_global_basic" class = "button _stretch _ar_stretch_global _basic w24" > Basic< br / > < span id = "_b_stretch_default_basic_key" class = "smallcaps small darker" > < / span > < / a >
< a id = "_stretch_global_hybrid" class = "button _stretch _ar_stretch_global _hybrid w24" > Hybrid< br / > < span id = "_b_stretch_default_hybrid_key" class = "smallcaps small darker" > < / span > < / a >
< a id = "_stretch_global_conditional" class = "button _stretch _ar_stretch_global _conditional w24" > Thin borders< br / > < span id = "_b_stretch_default_conditional_key" class = "smallcaps small darker" > < / span > < / a >
< / div >
< / div >
2018-09-16 14:14:16 +02:00
2018-09-20 22:02:15 +02:00
<!-- VIDEO ALIGNMENT -->
< div class = "row" >
< span class = "label" > Video alignment:< / span >
< div class = "button-row" >
< 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 >
2018-09-16 14:14:16 +02:00
< / div >
< / div >
2018-09-14 22:21:39 +02:00
< / div >
<!-- SITE SETTINGS -->
< div id = "_menu_settings_site" class = "suboption hidden" >
< div class = "row" >
< span class = "label" > Options for this site:< / span >
< div class = "button-row" >
< a id = "_ext_site_options_whitelist" class = "button _ext _ext_site_options _whitelist" > Whitelist< / a >
< a id = "_ext_site_options_default" class = "button _ext _ext_site_options _default" > Default< / a >
< a id = "_ext_site_options_blacklist" class = "button _ext _ext_site_options _blacklist" > Blacklist< / a >
< / div >
< / div >
2018-09-18 00:40:05 +02:00
2018-09-19 23:34:47 +02:00
<!-- things that are disabled if site is disabled -->
< div id = "_site_only_when_site_enabled" >
< div class = "row" >
< span class = "label" > Automatic detection:< / span >
< div class = "button-row" >
< a id = "_ar_site_options_enabled" class = "button _autoAr _ar_site_options _enabled" > Whitelist< / a >
< a id = "_ar_site_options_default" class = "button _autoAr _ar_site_options _default" > Default< / a >
< a id = "_ar_site_options_disabled" class = "button _autoAr _ar_site_options _disabled" > Blacklist< / a >
< / div >
< / div >
<!-- TODO: default aspect ratio, default settings -->
2018-09-16 14:14:16 +02:00
2018-09-19 23:34:47 +02:00
<!-- 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 >
2018-09-18 00:40:05 +02:00
< / div >
2018-09-19 23:34:47 +02:00
<!-- VIDEO ALIGNMENT -->
< div class = "row" >
< span class = "label" > Video alignment:< / span >
< div class = "button-row" >
< 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 >
2018-09-16 14:14:16 +02:00
< / div >
< / div >
2018-03-07 21:42:40 +01:00
< / div >
2018-09-14 22:21:39 +02:00
<!-- VIDEO SETTINGS -->
< div id = "_menu_settings_video" class = "suboption" >
<!-- CROP STUFF -->
2017-12-29 23:34:40 +01:00
< div class = "row" >
2018-05-06 00:36:38 +02:00
< span class = "label" > Cropping mode< / span >
2017-12-29 23:34:40 +01:00
< div class = "button-row" >
2018-07-09 23:30:11 +02:00
< a class = "button _changeAr _ar_auto w24" > Auto-detect< br / > < span id = "_b_changeAr_auto-ar_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _changeAr _ar_reset w24" > Reset< br / > < span id = "_b_changeAr_reset_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _changeAr _ar_219 w24" > 21:9< br / > < span id = "_b_changeAr_219_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _changeAr _ar_189 w24" > 2:1 (18:9)< br / > < span id = "_b_changeAr_189_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _changeAr _ar_169 w24" > 16:9< br / > < span id = "_b_changeAr_169_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _changeAr _ar_custom w24" > Custom< br / > < span id = "_b_changeAr_custom_key" class = "smallcaps small darker" > < / span > < / a >
2017-12-29 23:34:40 +01:00
< / div >
2018-09-18 00:40:05 +02:00
< 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 >
2017-12-29 23:34:40 +01:00
< / div >
2018-09-18 00:40:05 +02:00
< div id = "_changeAr_customAr" class = "row hidden" >
2018-07-09 23:30:11 +02:00
< span class = "label" > Custom aspect ratio< / span >
< div >
< input id = "_input_custom_ar" class = "_changeAr _custom" onblur = "validateCustomAr()" > < span id = "_b_changeAr_save_custom_ar" class = "button _ar_save_custom_ar _changeAr" > Save< / span >
< br / > < small > Aspect ratio can be entered in any of these forms (without quotes):
< ul style = "display: block; padding-top: 0px; margin-top: 0px" >
< li > fraction (< i > width/height< / i > , e.g. < i > 16/10< / i > , < i > 2560/1080< / i > , etc.)< / li >
< li > ratio (e.g. < i > 1:2.35< / i > or simply < i > 2.35< / i > — < i > 1:< / i > bit can be left out)< / li >
< / ul > < / small >
2017-12-29 23:34:40 +01:00
< / div >
2018-07-09 23:30:11 +02:00
< / div >
2018-09-14 22:21:39 +02:00
<!-- ZOOM STUFF -->
2018-09-16 23:24:01 +02:00
< span class = "label experimental" > Manual zooming and panning< / span >
2017-12-29 23:34:40 +01:00
< div class = "row" >
2018-09-14 22:21:39 +02:00
<!--
min, max and value need to be implemented in js as this slider
should use logarithmic scale
-->
2018-09-16 14:14:16 +02:00
< input id = "_input_zoom_slider" class = "w100"
2018-09-14 22:21:39 +02:00
type="range"
2018-09-16 14:14:16 +02:00
step="any"
2018-09-14 22:21:39 +02:00
/>
< div style = "overflow: auto" >
< div class = "inline-block float-left medium-small x-pad-1em" >
2018-09-16 14:14:16 +02:00
Zoom: < span id = "_label_zoom_level" > 100< / span > %
2018-09-14 22:21:39 +02:00
< / div >
< div class = "inline-block float-right medium-small" >
2018-09-18 00:40:05 +02:00
< 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 >
2018-09-14 22:21:39 +02:00
< / div >
< / div >
2018-09-18 00:40:05 +02:00
<!-- <div class="m - t - 0 - 33em w100 display - block">
2018-09-16 14:14:16 +02:00
< input id = "_input_zoom_site_allow_pan"
type="checkbox"
/>
2018-09-14 22:21:39 +02:00
Pan with mouse
2018-09-18 00:40:05 +02:00
< / 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 >
2017-12-30 02:58:24 +01:00
< / div >
2017-12-29 23:34:40 +01:00
< / div >
2018-09-14 22:21:39 +02:00
<!-- STRETCH STUFF -->
2018-09-16 23:24:01 +02:00
< span class = "label experimental" > Stretching mode< / span >
2018-06-29 00:30:42 +02:00
< div class = "button-row" >
2018-09-16 14:14:16 +02:00
< a class = "button _stretch _ar_stretch_none w24" > Normal< br / > < span id = "_b_stretch_none_key" class = "smallcaps small darker" > < / span > < / a >
2018-07-09 23:30:11 +02:00
< a class = "button _stretch _ar_stretch_basic w24" > Basic< br / > < span id = "_b_stretch_basic_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_hybrid w24" > Hybrid< br / > < span id = "_b_stretch_hybrid_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_conditional w24" > Thin borders< br / > < span id = "_b_stretch_conditional_key" class = "smallcaps small darker" > < / span > < / a >
2018-06-29 00:30:42 +02:00
< / div >
2018-09-14 22:21:39 +02:00
<!-- VIDEO ALIGNMENT -->
< div class = "row" >
< span class = "label" > Video alignment:< / span >
< div class = "button-row" >
2018-09-18 00:40:05 +02:00
< 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 >
2018-09-14 22:21:39 +02:00
< / div >
< / div >
< / div >
2018-09-16 14:14:16 +02:00
2018-09-16 19:28:40 +02:00
<!-- ABOUTR -->
2018-09-16 14:14:16 +02:00
< div id = "_menu_about" class = "suboption hidden" >
2017-12-30 02:58:24 +01:00
< div class = "row" >
2017-12-30 18:36:08 +01:00
< span class = "label" > Ultrawidify version:< / span > < br / > < span id = "uw-version" > < / span >
2017-12-30 02:58:24 +01:00
< / div >
< div class = "row" >
2018-07-15 16:35:08 +02:00
< span class = "label" > Having an issue?< / span > < br / > Report < strike > undocumented features< / strike > bugs using one of the following options:< ul > < li > < a target = "_blank" href = "https://github.com/xternal7/ultrawidify/issues" > < b > Github (strongly preferred)< / b > < / a > < br / > < / li >
2018-05-10 18:37:03 +02:00
< li > PM me on < a target = "_blank" href = "https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM" > reddit< / a > < br / > < / li >
< li > Email: < a target = "_blank" href = "mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D+ENTER+SUMMARY+OF+YOUR+ISSUE+HERE&body=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM" > tamius.han@gmail.com< / a > < / li >
2018-05-06 00:36:38 +02:00
< / ul >
2017-12-30 02:58:24 +01:00
< / div >
< / div >
2017-11-13 23:34:24 +01:00
< / div >
2017-12-02 21:09:08 +01:00
<!-- load all scripts. ordering is important! -->
2017-12-29 23:34:40 +01:00
< script src = "../../js/conf/Debug.js" > < / script >
< script src = "../../js/lib/BrowserDetect.js" > < / script >
2018-01-06 22:58:31 +01:00
< script src = "../../js/lib/Comms.js" > < / script >
2017-12-02 21:09:08 +01:00
2018-08-30 00:56:15 +02:00
< script src = "../../js/conf/ExtensionConf.js" > < / script >
2018-08-21 23:48:47 +02:00
< script src = "../../js/lib/Settings.js" > < / script >
2017-12-29 23:34:40 +01:00
< script src = "./js/popup.js" > < / script >
2017-11-13 23:34:24 +01:00
< / body >
< / html >
2017-12-02 21:09:08 +01:00
