293 lines
14 KiB
HTML
293 lines
14 KiB
HTML
<html>
|
|
<head>
|
|
<title>Ultrawidify :: settings</title>
|
|
<meta charset="UTF-8">
|
|
<base target="_blank">
|
|
<style>
|
|
|
|
</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">Shortcuts</div>
|
|
<div id="tab_about" class="block tab">About</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
<!-- GENERAL SETTINGS -->
|
|
|
|
<div id="general_settings">
|
|
<div class="content left">
|
|
|
|
<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>
|
|
<span class="description">
|
|
<b>Always</b> enables this extension on every site you visit that you didn't blacklist.
|
|
<b>On whitelisted sites</b> enables this extension only on sites you explicitly whitelisted.
|
|
<b>Never</b> disables extension on all sites, even on those you whitelisted.
|
|
</span>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<span class="label">Enable autodetection:</span>
|
|
<div class="button-row">
|
|
<a id="_general_ar_global_options_blacklist" class="button _autoAr _ar_global_options _blacklist">Always</a>
|
|
<a id="_general_ar_global_options_whitelist" class="button _autoAr _ar_global_options _whitelist">On whitelisted sites</a>
|
|
<a id="_general_ar_global_options_disabled" class="button _autoAr _ar_global_options _disabled" >Never</a>
|
|
</div>
|
|
<span class="description">
|
|
<b>Always</b> enables autodetection on every site this extension is enabled for, unless blacklisted.
|
|
<b>On whitelisted sites</b> enables autodetection only for sites that you explicitly enabled.
|
|
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.
|
|
</span>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<span class="label">In-player UI</span>
|
|
<div class="button-row">
|
|
<a id="_ar_global_options_blacklist" class="button _ui _ui_global_options _blacklist">Always/a>
|
|
<a id="_ar_global_options_whitelist" class="button _ui _ui_global_options _whitelist">On whitelisted sites</a>
|
|
<a id="_ar_global_options_disabled" class="button _ui _ui_global_options _disabled" >Never</a>
|
|
</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 class="row">
|
|
<div class="button-row">
|
|
<a id="_stretch_global_none" class="button _stretch _ar_stretch_global _none">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">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">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">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- AUTOMATIC DETECTION SETTINGS -->
|
|
|
|
<div id="autoar_settings">
|
|
|
|
<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 class="description">
|
|
<b>Always</b> enables autodetection on every site this extension is enabled for, unless blacklisted.
|
|
<b>On whitelisted sites</b> enables autodetection only for sites that you explicitly enabled.
|
|
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<span class="label">Checking for aspect ratio changes</span>
|
|
<div>
|
|
When video is playing: <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms
|
|
<div>
|
|
<div>
|
|
When video is paused: <input id="_input_autoAr_timer_pause" class="_autoAr _autoAr_timer_pause" type="number" min="5" max="10000"> ms
|
|
<div>
|
|
<div>
|
|
On error: <input id="_input_autoAr_timer_error" class="_autoAr _autoAr_timer_error" type="number" min="5" max="10000"> ms
|
|
<div>
|
|
|
|
<div class="description">
|
|
All values are in milliseconds.
|
|
The values determine how often the autodetection script will scan video for changes in aspect ratio under different circumstances.
|
|
Using shorter intervals can cause lag and increases resource usage.
|
|
Using longer intervals increases delay between aspect ratio changing and said change being detected.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="_autoar_fallback_mode_top" class="row">
|
|
<label>Enable fallback mode</label>
|
|
todo: insert checkbox
|
|
<div class="description">
|
|
<p>In order for autodetection to work, the extension grabs a frame of the video you're watching and takes a look at it.
|
|
Some websites use DRM, which prevents you from using the HTML5-blessed way of getting a frame from a video.
|
|
Some browsers offer some features that can be used to circumvent DRM protection.
|
|
With this option enabled, the extension will use said features to basically do that.
|
|
</p>
|
|
<p><b>Technical details: tl;dr — only works in Firefox and maybe its forks.</b><br/>
|
|
Fallback mode depends on two things:
|
|
<ol>
|
|
<li>Attempting to grab a video frame from DRM protected video stream must return an error (Chrome returns black image)</li>
|
|
<li>Supports <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawWindow" target="_blank">CanvasRenderingContext2D.drawWindow()</a> method, which pretty much only Firefox does</li>
|
|
</ol>
|
|
</p>
|
|
<p><b>But I thought it's <a href="http://www.dmlp.org/legal-guide/circumventing-copyright-controls" target="_blank">illegal</a> to circumvent DRM?</b><br/>
|
|
Courts <a href="https://arstechnica.com/information-technology/2010/07/court-breaking-drm-for-a-fair-use-is-legal/" target="_blank">disagree</a> (at least as far as our use-case is concerned).
|
|
At this point I'd also throw in some choice words about DRM and everyone using it, but AMO gives me "you're breaking terms of conduct" warnings over use of the word for thing you flush down the toilet, prepended by a word for male cow*, in the code comments.<small><br/>*'cow' is term for the female</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- INTERFACE AND SHORTCUTS -->
|
|
|
|
<div id="interface_shortcut_settings">
|
|
|
|
</div>
|
|
|
|
|
|
<!-- SITE SETTINGS -->
|
|
|
|
<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>
|
|
|
|
|
|
<!-- REMOVE PLOX -->
|
|
|
|
<div id="uw_shortcuts" class="hide">
|
|
<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>
|
|
|
|
|
|
<!-- ABOUT -->
|
|
|
|
<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>Alan pls add quick description.</p>
|
|
<h2>Plans for the future</h2>
|
|
<h2>Acknowledgements</h2>
|
|
<p>This extension uses font <a href="http://overpassfont.org/">Overpass</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/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>
|