231 lines
13 KiB
HTML
231 lines
13 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
|
|
</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 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 -->
|
|
<p class="warning">
|
|
<b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
|
</p>
|
|
<span class="label">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 _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>
|
|
</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>
|
|
<div class="row">
|
|
<span class="label">Options for this site:</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 -->
|
|
|
|
<!-- VIDEO ALIGNMENT -->
|
|
<div class="row">
|
|
<span class="label">Video alignment:</span>
|
|
<div class="button-row">
|
|
<a id="_align_site_left" class="button _align _align_site_left">left</a>
|
|
<a id="_align_site_center" class="button _align _align_site_center">center</a>
|
|
<a id="_align_site_right" class="button _align _align_site_right">right</a>
|
|
</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>
|
|
<div class="row">
|
|
<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 -->
|
|
<p class="warning">
|
|
<b>Zoom settings currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
|
</p>
|
|
<span class="label">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 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>
|
|
</div>
|
|
</div>
|
|
<div class="m-t-0-33em w100 display-block">
|
|
<input id="_input_zoom_site_allow_pan"
|
|
type="checkbox"
|
|
/>
|
|
Pan with mouse
|
|
</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 -->
|
|
<p class="warning">
|
|
<b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
|
</p>
|
|
<span class="label">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>
|
|
|
|
|
|
<!-- ABOUT -->
|
|
<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>
|
|
|
|
|