260 lines
14 KiB
HTML
260 lines
14 KiB
HTML
<html>
|
|
<head>
|
|
<!-- shit like this really makes you appreciate angular and similar frameworks, doesn't it? -->
|
|
<title></title>
|
|
<meta charset="utf-8">
|
|
<link rel='stylesheet' type='text/css' href='../css/font/overpass.css'>
|
|
<link rel='stylesheet' type='text/css' href='../css/font/overpass-mono.css'>
|
|
<link rel='stylesheet' type='text/css' href='../css/common.css'>
|
|
<link rel='stylesheet' type='text/css' href='./css/popup.css'>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- TABS/SIDEBAR -->
|
|
<div class="left-side">
|
|
|
|
<div id="_menu_tab_settings_ext" class="menu-item _menu_tab_settings_ext">
|
|
Extension settings
|
|
</div>
|
|
<div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_site">
|
|
Site settings
|
|
<span class="menu-item-inline-desc"><br/>Settings for <span id="_menu_tab_settings_site_site_label"></span></span>
|
|
</div>
|
|
<div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_video">
|
|
Video settings
|
|
<span class="menu-item-inline-desc"><br/>Crop & stretch options for current video</span>
|
|
</div>
|
|
<div id="_menu_tab_about" class="menu-item _menu_tab_about">
|
|
About Ultrawidify<span class="menu-item-inline-desc"><br/>See for bug reports</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- PANELS/CONTENT -->
|
|
<div class="right-side">
|
|
<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>
|
|
|
|
|
|
<!-- EXTENSION SETTINGS -->
|
|
<div id="_menu_settings_ext" class="suboption hidden">
|
|
<p>These settings can be overriden on per-site basis.</p>
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<!-- TODO: default aspect ratio settings -->
|
|
|
|
<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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- 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 -->
|
|
|
|
<!-- 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_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>
|
|
</div>
|
|
|
|
|
|
<!-- VIDEO SETTINGS -->
|
|
<div id="_menu_settings_video" class="suboption">
|
|
|
|
<!-- CROP STUFF -->
|
|
<div class="row">
|
|
<span class="label">Cropping mode</span>
|
|
<div class="button-row">
|
|
<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>
|
|
</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 id="_changeAr_customAr" class="row hidden">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ZOOM STUFF -->
|
|
<span class="label experimental">Manual zooming and panning</span>
|
|
<div class="row">
|
|
<!--
|
|
min, max and value need to be implemented in js as this slider
|
|
should use logarithmic scale
|
|
-->
|
|
<input id="_input_zoom_slider" class="w100"
|
|
type="range"
|
|
step="any"
|
|
/>
|
|
<div style="overflow: auto">
|
|
<div class="inline-block float-left medium-small x-pad-1em">
|
|
Zoom: <span id="_label_zoom_level">100</span>%
|
|
</div>
|
|
<div class="inline-block float-right medium-small">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- STRETCH STUFF -->
|
|
<span class="label experimental">Stretching mode</span>
|
|
<div class="button-row">
|
|
<a class="button _stretch _ar_stretch_none w24">Normal<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- VIDEO ALIGNMENT -->
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ABOUTR -->
|
|
<div id="_menu_about" class="suboption hidden">
|
|
<div class="row">
|
|
<span class="label">Ultrawidify version:</span><br/> <span id="uw-version"></span>
|
|
</div>
|
|
<div class="row">
|
|
<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>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- load all scripts. ordering is important! -->
|
|
|
|
<script src="../../js/conf/Debug.js"></script>
|
|
|
|
<script src="../../js/lib/BrowserDetect.js"></script>
|
|
<script src="../../js/lib/Comms.js"></script>
|
|
|
|
<script src="../../js/conf/ExtensionConf.js"></script>
|
|
<script src="../../js/lib/Settings.js"></script>
|
|
|
|
<script src="./js/popup.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|