381 lines
16 KiB
HTML
381 lines
16 KiB
HTML
<html>
|
|
<head>
|
|
<title>Ultrawidify :: settings</title>
|
|
<meta charset="UTF-8">
|
|
<base target="_blank">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext');
|
|
|
|
body{
|
|
background-image: url(data:image/png;base64,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);
|
|
background-size: 75px;
|
|
background-color: #000000;
|
|
color: #ddd;
|
|
font-family: 'Oxygen', serif;
|
|
font-size: 1.2em;
|
|
width: 100%;
|
|
border: 0px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
z-index: -1000;
|
|
}
|
|
|
|
a, a:visited{
|
|
color: #fa6607;
|
|
text-decoration: none;
|
|
}
|
|
a:hover{
|
|
color: #fa6;
|
|
}
|
|
|
|
.show{
|
|
display: block !important;
|
|
}
|
|
.hide{
|
|
display: none !important;
|
|
}
|
|
head{
|
|
width: 100%;
|
|
border: 0px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
h1,h2{
|
|
color: #ff9;
|
|
font-weight: 300;
|
|
}
|
|
h1{
|
|
font-size: 3.3em;
|
|
}
|
|
h2{
|
|
font-size: 2.2em;
|
|
}
|
|
.sites_header{
|
|
font-size: 1.6em;
|
|
color: #ff9;
|
|
}
|
|
.content{
|
|
display: inline-block;
|
|
width: 52em;
|
|
}
|
|
.center{
|
|
margin: 0 auto;
|
|
}
|
|
.basecolor: {
|
|
color: #ddd !important;
|
|
}
|
|
.red{
|
|
color: #ff3a00;
|
|
}
|
|
.disabled: {
|
|
opacity: 0.69;
|
|
}
|
|
.left{
|
|
text-align: left;
|
|
}
|
|
.block{
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
.tabline{
|
|
background-color: #000;
|
|
width: 100%;
|
|
margin-bottom: 1.5em;
|
|
padding-top: 0.3em;
|
|
padding-bottom: 0.4em;
|
|
z-index: -200;
|
|
}
|
|
.tab{
|
|
color: #fa6607;
|
|
}
|
|
.tab:hover{
|
|
text-shadow: #aa5 0px 0px 0.02em,#aa5 0px 0px 0.02em;
|
|
}
|
|
.tab-selected {
|
|
color: #ff9 !important;
|
|
}
|
|
#all{
|
|
min-width: 100%;
|
|
min-height: 100vh;
|
|
background-image: url('img/settings/about-bg.png');
|
|
background-position: calc(50vw + 20em) 10vh;
|
|
background-attachment: fixed;
|
|
background-size: auto 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.dup_keybinds{
|
|
background-color: #720 !important;
|
|
}
|
|
input[type=text]{
|
|
font-size: 1em;
|
|
padding-left: 0.6em;
|
|
margin-left: 1em;
|
|
width: 2em;
|
|
background-color: #000;
|
|
border: 1px #442 solid;
|
|
}
|
|
.uw_shortcuts_line{
|
|
padding-top: 0.25em;
|
|
padding-left: 5em;
|
|
}
|
|
.uw_shortcuts_label{
|
|
display: inline-block;
|
|
color: #fff;
|
|
width: 17.5em;
|
|
}
|
|
.uw_options_line{
|
|
margin-top: 0.75em;
|
|
font-size: 1.1em;
|
|
width: 80%;
|
|
margin-left: 5%;
|
|
}
|
|
.uw_options_option{
|
|
margin-left: 5%;
|
|
}
|
|
.uw_suboption{
|
|
margin-left: 5em;
|
|
margin-top: 0.75em;
|
|
font-size: 0.85em;
|
|
}
|
|
.uw_options_desc, .uw_suboption_desc{
|
|
margin-top: 0.33em;
|
|
font-size: 0.69em;
|
|
color: #aaa;
|
|
}
|
|
.uw_suboption_desc{
|
|
margin-left: 5em;
|
|
}
|
|
|
|
.buttonbar{
|
|
/* width: 100%; */
|
|
padding-left: 20em;
|
|
margin-bottom: 2em;
|
|
}
|
|
.button{
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
padding-top: 0.4em;
|
|
width: 4em;
|
|
text-align: center;
|
|
background-color: rgba(0,0,0,0.66);
|
|
color: #ffc;
|
|
height: 1.7em;
|
|
}optionsoptions
|
|
Shortcuts
|
|
About
|
|
Official
|
|
Shortcuts
|
|
About
|
|
Official
|
|
|
|
/** site options css **/
|
|
.site_name {
|
|
padding-left: 1em;
|
|
padding-bottom: 0.3em;
|
|
color: #fff;
|
|
font-size: 1.1em;
|
|
height: 13em !important;
|
|
|
|
}
|
|
.site_details {
|
|
font-size: 0.8em;
|
|
}
|
|
.site_title_ebox {
|
|
width: 10em !important;
|
|
font-size: 1.5em !important;
|
|
background-color: rgba(0,0,0,0) !important;
|
|
margin-left: 0px !important;
|
|
border: 0px !important;
|
|
color: #ffc !important;
|
|
}
|
|
.details_ebox {
|
|
width: 12em !important;
|
|
background-color: rgba(0,0,0,0) !important;
|
|
border: 0px !important;
|
|
color: #ffc !important;
|
|
margin-left: 0em !important;
|
|
}
|
|
.details_ebox:disabled {
|
|
color: #aaa !important;
|
|
}
|
|
.inline_button {
|
|
display: inline-block;
|
|
margin-top: -1.42em;
|
|
}
|
|
.inline_button:hover {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="all">
|
|
<header>
|
|
<div class="content center">
|
|
<div class="left">
|
|
<h1>Ultrawidify :: settings</h1>
|
|
</div>
|
|
</div>
|
|
<div class="tabline center">
|
|
<div class="content left">
|
|
<!-- <div id="tab_general_settings" class="block tab tab-selected">General settings</div> -->
|
|
<!-- <div id="tab_sites" class="block tab">Site options</div> -->
|
|
<div id="tab_shortcuts" class="block tab tab-selected">Shortcuts</div>
|
|
<div id="tab_about" class="block tab">About</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
<div id="general_settings" class="hide">
|
|
<div class="content left">
|
|
<div class="uw_options_line">
|
|
<div class="uw_options_option"><input type="checkbox" id='enable_autoar'> <strike>Enable automatic aspect ratio detection</strike></div>
|
|
<div class="uw_options_desc"><strike>This option uses 3rd party websites to determine aspect ratio. It may not work all the time or even properly. It only works with Netflix. <span class="red">This option is <b>NOT</b> available on Youtube. Also deprecated probably, tamius pls remove</span></strike></div>
|
|
</div>
|
|
<div class="uw_options_line">
|
|
<div class="uw_options_option"><input type="checkbox" id='enable_ardetect'> Enable brute-force automatic aspect ratio detection</div>
|
|
<div class="uw_options_desc">Pretend that this checkbox is checked and that you can't uncheck it. <br/><br/>This option works by checking where black pixels end on _every_ frame (technically every ~30ms). Because of this, this option may cause lagginess and increased CPU usage. <span class="red">also you can't not use it because we're doing a total rewrite lol</span></div>
|
|
</div>
|
|
<div class="uw_options_line">
|
|
<div class="uw_options_option">Yes, the UI is gone. [..] but why is the UI gone?</div>
|
|
|
|
<!-- <div class="uw_options_option"><input type="checkbox" id="enable_ui"> Show UI in the player bar</div> -->
|
|
<!-- <div class="uw_options_desc">If this option is enabled, the extension will add some extra buttons to the player bar. If this option is disabled, setting video fit and aspect ratio is only possible via keyboard shortcuts.</div> -->
|
|
<!-- <div class="uw_suboption_line" id="compact_ui_suboption"> -->
|
|
<!-- <div class="uw_suboption"><input type="checkbox" id="enable_ui_compact"> If possible, use compact UI</div> -->
|
|
<!-- <div class="uw_suboption_desc">With this option enabled, only 'more settings' button is enabled. Note that this option doesn't work on every site.</div> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="uw_sites" class="hide">
|
|
<h1>PLEASE NOTE: THIS IS COMPLETELY NON-FUNCTIONAL ATM. YOU CANT SET SITE-SPECIFIC OPTIONS ATM</h1>
|
|
<div id="uw_sites_body" class="content left">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="uw_shortcuts">
|
|
<div class="content left">
|
|
<h2>Keyboard shortcuts</h2>
|
|
|
|
<form>
|
|
<!-- BEGIN FORM -->
|
|
|
|
<!-- try autoar -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Autodetect aspect ratio</div>
|
|
<input type='checkbox' id="_kbd_autoar_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_autoar_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_autoar_altKey" > Alt +
|
|
<input type='text' id="_kbd_autoar_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- fit width -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Fit to width</div>
|
|
<input type='checkbox' id="_kbd_fitw_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_fitw_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_fitw_altKey" > Alt +
|
|
<input type='text' id="_kbd_fitw_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- fit height -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Fit to height</div>
|
|
<input type='checkbox' id="_kbd_fith_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_fith_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_fith_altKey" > Alt +
|
|
<input type='text' id="_kbd_fith_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- reset -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Reset</div>
|
|
<input type='checkbox' id="_kbd_reset_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_reset_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_reset_altKey" > Alt +
|
|
<input type='text' id="_kbd_reset_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- force 21:9 -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Force 21:9</div>
|
|
<input type='checkbox' id="_kbd_char_219_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_char_219_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_char_219_altKey" > Alt +
|
|
<input type='text' id="_kbd_char_219_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- force 2:1 -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Force 2:1 (18:9)</div>
|
|
<input type='checkbox' id="_kbd_char_189_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_char_189_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_char_189_altKey" > Alt +
|
|
<input type='text' id="_kbd_char_189_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- force 16:9 -->
|
|
<div class="uw_shortcuts_line">
|
|
<div class="uw_shortcuts_label">Force 16:9</div>
|
|
<input type='checkbox' id="_kbd_char_169_ctrlKey" > Ctrl +
|
|
<input type='checkbox' id="_kbd_char_169_shiftKey" > Shift +
|
|
<input type='checkbox' id="_kbd_char_169_altKey" > Alt +
|
|
<input type='text' id="_kbd_char_169_lettr" maxlength='1' class='shortcut_input'>
|
|
</div>
|
|
|
|
<!-- END FORM -->
|
|
</form>
|
|
<div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div>
|
|
<div id="errbox"></div>
|
|
<div><small><b>Note:</b> keyboard shortcut conflicts aren't handled by this extension. You must know your shortcuts.<br/><b>Pro tip:</b> If you don't want to have a keybind for a shortcut, just uncheck all boxes for the action and remove the letter</small></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="about" class="hide">
|
|
<div class="content left">
|
|
<h2>Ultrawidify - an aspect ratio fixer for youtube <small>(and netflix)</small></h2>
|
|
<p>Created by Tamius Han (me). If something is broken, you can shout at me on <a href="https://github.com/xternal7/ultrawidify">github</a> (shout nicely, though. Open an issue or bug report or something). If you're curious to see the source code, <a href="https://github.com/xternal7/ultrawidify">github's here</a>. If you're looking at this page because you're bored and want to be bored some more, <a href="http://tamius.net">my website's here</a>.</p>
|
|
<h2>So you want to help?</h2>
|
|
<p><strike>There's a lot of sites where you can stream videos. A lot of these sites keep failing to handle aspect ratios correctly, which means it would be great if this extension worked elsewhere. Unfortunately, a lot of these sites require me to pony up some money (ayy lmao) OR just flat out block anyone who's not from the US (or their small selection of approved regions). Some sites even do both.</strike></p>
|
|
<p><strike>This means I'd need some help. There's two ways. One of them is to use 'inspect element' option of your browser to pick up IDs (or classnames) of certain elements. More detail here(TODO: add a link to quick tutorial).</strike>probably wont be necessary</p>
|
|
<p>The second one is, well. I won't shy away from donations either. <small>Bonus respect for dank amounts!</small></p>
|
|
<p>Needless to say, I'll be happy and thankful regardless of the way you contribute.</p>
|
|
<h2>Plans for the future</h2>
|
|
<p><strike>Support for more sizes. More flexible/customizable UI. Maybe (but absolutely no promises here) a bit more advanced autodetection.</strike></p>
|
|
<p>this is the future lol. (at least as far as autodetection goes, keybinds need to make a comeback)</p>
|
|
<h2>Acknowledgements</h2>
|
|
<p>This extension uses font <a href="https://fonts.google.com/specimen/Oxygen">Oxygen</a>.</p>
|
|
<p>Special thanks to CD Project Red (The Witcher 2), Cyanide Studios (Styx, Of Orcs and Men), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p>
|
|
<small><p>More or less.</p>
|
|
<!-- <p>GW2 is also roughly how the avatar was obtained. Noone tell Anet, though.</p> --></small>
|
|
<p>Special one-finger salute to all incompetent people who don't know how to properly encode videos and upload them to youtube (to word it most nicely).</p>
|
|
<p>Special thanks to me for making this extension. You're welcome.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../js/dep/jquery-3.1.1.js" ></script>
|
|
<script src="../../js/conf/Debug.js"></script>
|
|
|
|
<script src="../../js/lib/BrowserDetect.js"></script>
|
|
<script src="../../js/lib/StorageManager.js"></script>
|
|
|
|
<script src="../../js/conf/Keybinds.js"></script>
|
|
<script src="../../js/conf/Settings.js"></script>
|
|
|
|
<script src="./settings.js"></script>
|
|
</body>
|
|
</html>
|