372 lines
16 KiB
HTML
372 lines
16 KiB
HTML
<html>
|
|
<head>
|
|
<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'>
|
|
<style>
|
|
|
|
html, body {
|
|
width: 780px !important;
|
|
max-width: 800px !important;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
/* width: 100%; */
|
|
color: #f8f8f8;
|
|
background-color: #1f1f1f;
|
|
font-family: "overpass";
|
|
font-size: 1em;
|
|
}
|
|
strike {
|
|
opacity: 0.5;
|
|
}
|
|
a {
|
|
color: #af7f37;
|
|
}
|
|
a:hover {
|
|
color: #c0924e;
|
|
}
|
|
|
|
input {
|
|
border: 1px solid #322;
|
|
padding: 0.5em;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
small{
|
|
font-size: 0.75em;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.85em;
|
|
}
|
|
.darker {
|
|
color: #666;
|
|
}
|
|
|
|
.label{
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
color: #ffe;
|
|
}
|
|
|
|
.smallcaps{
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.selected{
|
|
color: #ffddaa;
|
|
background-color: #433221;
|
|
}
|
|
.disabled {
|
|
color: #666;
|
|
}
|
|
.disabled-button {
|
|
color: #666 !important;
|
|
cursor: not-allowed !important;
|
|
}
|
|
.disabled-button:hover {
|
|
color: #777 !important;
|
|
background-color: #222 !important;
|
|
}
|
|
.invalid-input {
|
|
border: 1px solid #720 !important;
|
|
background-color: #410 !important;
|
|
}
|
|
.header {
|
|
background-color: #7f1416;
|
|
color: #fff;
|
|
margin: 0px;
|
|
margin-top: 0px;
|
|
padding-top: 8px;
|
|
padding-left: 15px;
|
|
padding-bottom: 1px;
|
|
font-size: 2.7em;
|
|
}
|
|
|
|
.menu-item-inline-desc{
|
|
font-size: 0.60em;
|
|
font-weight: 300;
|
|
font-variant: normal;
|
|
}
|
|
|
|
.left-side {
|
|
display: inline-block;
|
|
width: 39%;
|
|
float: left;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.right-side {
|
|
display: inline-block;
|
|
width: 60%;
|
|
float: right;
|
|
}
|
|
|
|
.menu-item {
|
|
padding-left: 15px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.suboption {
|
|
display: block;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
padding-top: 5px;
|
|
padding-bottom: 20px;
|
|
min-height: 250px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding-top: 8px;
|
|
padding-bottom: 3px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
border: 1px solid #444;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
color: #dbb;
|
|
text-align: center;
|
|
}
|
|
.w24 {
|
|
width: 100px;
|
|
}
|
|
|
|
.color_warn {
|
|
color: #d6ba4a;
|
|
}
|
|
.warning {
|
|
/*background-*/color: #d6ba4a;
|
|
/* color: #000; */
|
|
padding-left: 35px;
|
|
float: right;
|
|
}
|
|
.warning::before {
|
|
content: "⚠ ";
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
font-size: 2.5em;
|
|
margin-left: -35px;
|
|
padding-right: 10px;
|
|
/* top: 0px; */
|
|
float: left;
|
|
}
|
|
|
|
.button:hover {
|
|
color: #fff;
|
|
background-color: #433221;
|
|
}
|
|
|
|
.row {
|
|
display: block;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.button-row {
|
|
display: block;
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
#no-videos-display {
|
|
height: 100%;
|
|
padding-top: 50px;
|
|
/* text-align: center; */
|
|
}
|
|
.center{
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
|
</div>
|
|
<div class="left-side">
|
|
<div id="_menu_this_site" class="menu-item _menu_this_site">
|
|
Settings for this site
|
|
</div>
|
|
<div id="_menu_autoar" class="menu-item _menu_autoar">
|
|
Automatic aspect ratio detection (auto-ar)
|
|
</div>
|
|
<div id="_menu_aspectratio" class="menu-item selected _menu_aspectratio">
|
|
Crop settings
|
|
</div>
|
|
<div id="_menu_stretch" class="menu-item _menu_stretch">
|
|
Stretch settings
|
|
</div>
|
|
<div id="_menu_csshacks" class="menu-item disabled hidden _menu_hacks">
|
|
CSS hacks for this site
|
|
</div>
|
|
<div id="_menu_about" class="menu-item _menu_about">
|
|
About Ultrawidify<span class="menu-item-inline-desc"><br/>See for bug reports</span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
<div id="extension-mode" class="suboption hidden">
|
|
<p>How should extension work in general?<br/><small>NOTE: settings will be applied when page is reloaded.</small></p>
|
|
|
|
<form action="">
|
|
<input type="radio" name="mode" value="white"> Enable everywhere except blacklist<br/>
|
|
<input type="radio" name="mode" value="black"> Enable only on whitelisted sites<br/>
|
|
<input type="radio" name="mode" value="block"> Disable extension on all sites
|
|
</form>
|
|
|
|
<p>How should extension work on this site?<br><small class="important">NOTE: this doesn't apply to embedded videos!<br/>NOTE: settings will be applied when page is reloaded.</small></p>
|
|
<form action="">
|
|
<input type="radio" name="mode" value="default"> Follow global rules<br/>
|
|
<input type="radio" name="mode" value="black"> Always block (blacklist)<br/>
|
|
<input type="radio" name="mode" value="white"> Always allow (whitelist)
|
|
</form>
|
|
</div>
|
|
|
|
<div id="settings-for-current-site" class="suboption hidden">
|
|
<div class="warn">Some settings will only apply after reload. Settings don't apply to videos embedded from other sites.</div>
|
|
|
|
<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>
|
|
|
|
<div class="row">
|
|
<span class="label">Options for this site:</span>
|
|
<div class="button-row">
|
|
<a id="_ext_site_options_blacklist" class="button _ext _ext_site_options _blacklist">Blacklist</a>
|
|
<a id="_ext_site_options_default" class="button _ext _ext_site_options _default" >Default</a>
|
|
<a id="_ext_site_options_whitelist" class="button _ext _ext_site_options _whitelist">Whitelist</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="autoar-basic-settings" class="suboption hidden">
|
|
<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>
|
|
<!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
|
|
|
|
<p>Check every <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms — <span class="button _save_autoAr_frequency _autoAr">Save</span></p>
|
|
|
|
<div class="row">
|
|
<span class="label">Options for this site:</span>
|
|
<div class="button-row">
|
|
<a id="_ar_site_options_blacklist" class="button _autoAr _ar_site_options _blacklist">Blacklist</a>
|
|
<a id="_ar_site_options_default" class="button _autoAr _ar_site_options _default" >Default</a>
|
|
<a id="_ar_site_options_whitelist" class="button _autoAr _ar_site_options _whitelist">Whitelist</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="aspect-ratio-settings" class="suboption hidden">
|
|
<div id="no-videos-warning"></div>
|
|
<!-- <div id="no-videos-warning" class="warning">No videos were detected on this page. The buttons may not work at all. Check that this site is not blacklisted and reload the page.</div> -->
|
|
<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>
|
|
<div class="row">
|
|
<span class="label">Video alignment:</span>
|
|
<div class="button-row">
|
|
<a id="_align_left" class="button _align _align_left">left</a>
|
|
<a id="_align_center" class="button _align _align_center">center</a>
|
|
<a id="_align_right" class="button _align _align_right">right</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="stretch-settings" class="suboption hidden">
|
|
<p class="warning">
|
|
Stretching video is currently experimental and has <strike>been tested even less rigorously than the rest of this addon</strike> not been tested thoroughly. If you notice any bugs, please consider reporting them.
|
|
</p>
|
|
|
|
<span class="label">Default stretching mode<br><small>You may need to reload for this option to take effect. NOTE: Stretching is independent of crop mode. Crop gets applied before stretching.</small></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>
|
|
|
|
<span class="label">Temporary stretching mode<br><small>Temporarily overrides default stretching mode.</small></span>
|
|
<div class="button-row">
|
|
<a class="button _stretch _ar_stretch_none w24">Never<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>
|
|
</div>
|
|
|
|
<div id="css-hacks-settings" class="suboption hidden">
|
|
<p>If zoomed in video doesn't align properly, try enabling or disabling certain CSS rules below:</p>
|
|
</div>
|
|
|
|
<div id="panel-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 via one of the following channels:<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>
|
|
<p>When reporting an issue, don't forget to include some details. <b>Don't forget to mention your <u><i>BROWSER</i></u></b> (Firefox or Chrome), browser version, and <b>extension version</b> (see above).</p>
|
|
<p>Please DON'T just say "dont work pls fix"</p>
|
|
<p>Please DO Provide some information about the issue. Briefly describe what did you do to make the issue appear. If issue only happens with certain videos, include links to problematic videos.</p></div>
|
|
</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/StorageManager.js"></script>
|
|
<script src="../../js/lib/Comms.js"></script>
|
|
|
|
<script src="../../js/conf/Settings.js"></script>
|
|
|
|
<script src="./js/popup.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|