Settings page: basic html
This commit is contained in:
parent
a5639ad394
commit
2404cd7757
15
res/settings/css/flex.css
Normal file
15
res/settings/css/flex.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-auto {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
@ -5,8 +5,10 @@
|
|||||||
<base target="_blank">
|
<base target="_blank">
|
||||||
<link rel='stylesheet' type='text/css' href='../css/font/overpass.css'>
|
<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/font/overpass-mono.css'>
|
||||||
|
<link rel='stylesheet' type='text/css' href='./css/flex.css'>
|
||||||
<link rel='stylesheet' type='text/css' href='../css/common.css'>
|
<link rel='stylesheet' type='text/css' href='../css/common.css'>
|
||||||
<link rel='stylesheet' type='text/css' href='./css/settings.css'>
|
<link rel='stylesheet' type='text/css' href='./css/settings.css'>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="all">
|
<div id="all">
|
||||||
@ -31,91 +33,141 @@
|
|||||||
<!-- GENERAL SETTINGS -->
|
<!-- GENERAL SETTINGS -->
|
||||||
|
|
||||||
<div id="general_settings">
|
<div id="general_settings">
|
||||||
<div class="content left">
|
<div class="content left">
|
||||||
|
<div class="row">
|
||||||
<div class="row">
|
<span class="label">Enable this extension:</span>
|
||||||
<span class="label">Enable this extension:</span>
|
<!-- Buttons go here -->
|
||||||
<div class="button-row">
|
<div class="button-row" id="_general_extension_global_settings">
|
||||||
<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>
|
||||||
|
<span class="description">
|
||||||
<div class="row">
|
<b>Always</b> enables this extension on every site you visit that you didn't blacklist.<br/>
|
||||||
<span class="label">Enable autodetection:</span>
|
<b>On whitelisted sites</b> enables this extension only on sites you explicitly whitelisted.<br/>
|
||||||
<div class="button-row">
|
<b>Never</b> disables extension on all sites, even on those you whitelisted.
|
||||||
<a id="_general_ar_global_options_blacklist" class="button _autoAr _ar_global_options _blacklist">Always</a>
|
</span>
|
||||||
<a id="_general_ar_global_options_whitelist" class="button _autoAr _ar_global_options _whitelist">On whitelisted sites</a>
|
</div>
|
||||||
<a id="_general_ar_global_options_disabled" class="button _autoAr _ar_global_options _disabled" >Never</a>
|
|
||||||
</div>
|
<div class="flex flex-row">
|
||||||
<span class="description">
|
<div class="flex flex-column flex-auto">
|
||||||
<b>Always</b> enables autodetection on every site this extension is enabled for, unless blacklisted.
|
<div class="label">Whitelisted sites</div>
|
||||||
<b>On whitelisted sites</b> enables autodetection only for sites that you explicitly enabled.
|
<div class="description">List of whitelisted sites. One per line.</div>
|
||||||
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.
|
<textarea id="_general_extension_whitelist"></textarea>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-column flex-auto">
|
||||||
|
<div class="label">Blacklisted sites</div>
|
||||||
|
<div class="description">List of blacklisted sites. One per line.</div>
|
||||||
|
<textarea id="_general_extension_blacklist"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">In-player UI</span>
|
<span class="label">Enable autodetection:</span>
|
||||||
<div class="button-row">
|
<div class="button-row" id="_general_extension_global_autoar">
|
||||||
<a id="_ar_global_options_blacklist" class="button _ui _ui_global_options _blacklist">Always/a>
|
</div>
|
||||||
<a id="_ar_global_options_whitelist" class="button _ui _ui_global_options _whitelist">On whitelisted sites</a>
|
<span class="description">
|
||||||
<a id="_ar_global_options_disabled" class="button _ui _ui_global_options _disabled" >Never</a>
|
<b>Always</b> enables autodetection on every site this extension is enabled for, unless blacklisted.<br/>
|
||||||
|
<b>On whitelisted sites</b> enables autodetection only for sites that you explicitly enabled.<br/>
|
||||||
|
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.<br/>
|
||||||
|
<br/>
|
||||||
|
For more settings related to autodetection, please check the 'Autodetection' tab.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<span class="label">Default video alignment:</span>
|
||||||
|
<div class="button-row" id="_general_extension_global_alignment">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="label">Default stretch mode</div>
|
||||||
|
<div class="button-row" id="_general_extension_global_alignment">
|
||||||
|
</div>
|
||||||
|
<span class="description">
|
||||||
|
<b>None:</b> do not stretch the video at all. This is the default option, for men of culture.<br/>
|
||||||
|
<b>Basic:</b> stretches video to fit the player or screen unconditionally. If video has letterbox encoded, this option <i>will not</i> try to remove letterbox before stretching. You probably shouldn't be using this option.<br/>
|
||||||
|
<b>Hybrid:</b> stretches the video to fit the player, but only if cropping didn't completely remove the black bars.<br/>
|
||||||
|
<b>Thin borders:</b> stretches only if the width of black borders after cropping is thin.
|
||||||
|
<br/>
|
||||||
|
Treshold for thin borders can be defined below.
|
||||||
|
</span>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex flex-input-label">
|
||||||
|
Thin border treshold (%):
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-input">
|
||||||
|
<input type="number">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- AUTOMATIC DETECTION SETTINGS -->
|
<!-- AUTOMATIC DETECTION SETTINGS -->
|
||||||
|
|
||||||
<div id="autoar_settings">
|
<div id="autoar_settings">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Enable autodetection:</span>
|
<span class="label">Enable autodetection:</span>
|
||||||
<div class="button-row">
|
<!-- Buttons go here -->
|
||||||
<a id="_ar_global_options_blacklist" class="button _autoAr _ar_global_options _blacklist">Always</a>
|
<div class="button-row" id="_general_autoar_global_settings">
|
||||||
<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>
|
||||||
<div class="description">
|
<span class="description">
|
||||||
<b>Always</b> enables autodetection on every site this extension is enabled for, unless blacklisted.
|
<b>Always</b> enables autodetection on every site you visit that you didn't blacklist.<br/>
|
||||||
<b>On whitelisted sites</b> enables autodetection only for sites that you explicitly enabled.
|
<b>On whitelisted sites</b> enables autodetection only on sites you explicitly whitelisted.<br/>
|
||||||
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.
|
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex flex-column flex-auto">
|
||||||
|
<div class="label">Whitelisted sites</div>
|
||||||
|
<div class="description">List of whitelisted sites. One per line.</div>
|
||||||
|
<textarea id="_general_autoar_whitelist"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column flex-auto">
|
||||||
|
<div class="label">Blacklisted sites</div>
|
||||||
|
<div class="description">List of blacklisted sites. One per line.</div>
|
||||||
|
<textarea id="_general_autoar_blacklist"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2>Advanced automatic detection options</h2>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Checking for aspect ratio changes</span>
|
<div class="label">Aspect ratio check frequency</div>
|
||||||
<div>
|
<div class="description">
|
||||||
|
<p>Options here decide how often the extension will check for changes in aspect ratio of a given video.</p>
|
||||||
|
<p>Values are given in milliseconds. Longer intervals increase delay between aspect ratio changing and extension re-correcting for the change. Using shorter intervals than the default ones can cause lage and <i>immense</i> RAM usage.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column">
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex flex-input-label">
|
||||||
|
Check frequency when video is playing (ms):
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-input">
|
||||||
|
<input type="number">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex flex-input-label">
|
||||||
|
Check frequency when video is paused (ms):
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-input">
|
||||||
|
<input type="number">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex flex-input-label">
|
||||||
|
Recheck delay on error (ms):
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-input">
|
||||||
|
<input type="number">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div>
|
||||||
When video is playing: <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms
|
When video is playing: <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
@ -123,139 +175,39 @@
|
|||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
On error: <input id="_input_autoAr_timer_error" class="_autoAr _autoAr_timer_error" type="number" min="5" max="10000"> ms
|
On error: <input id="_input_autoAr_timer_error" class="_autoAr _autoAr_timer_error" type="number" min="5" max="10000"> ms
|
||||||
<div>
|
<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>
|
||||||
|
|
||||||
<div id="_autoar_fallback_mode_top" class="row">
|
<div id="_autoar_fallback_mode_top" class="row">
|
||||||
<label>Enable fallback mode</label>
|
<div class="label">Fallback mode</div>
|
||||||
todo: insert checkbox
|
|
||||||
<div class="description">
|
<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.
|
<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 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.
|
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.
|
With this option enabled, the extension will use said features to basically do that.
|
||||||
</p>
|
</p>
|
||||||
<p><b>Technical details: tl;dr — only works in Firefox and maybe its forks.</b><br/>
|
<p>At the moment, Firefox is the only browser to support this.</p>
|
||||||
Fallback mode depends on two things:
|
<div>
|
||||||
<ol>
|
This browser doesn't support fallback mode.
|
||||||
<li>Attempting to grab a video frame from DRM protected video stream must return an error (Chrome returns black image)</li>
|
</div>
|
||||||
<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 class="">Enable fallback mode</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- INTERFACE AND SHORTCUTS -->
|
<!-- CUSTOMIZATION (INTERFACE AND SHORTCUTS) -->
|
||||||
|
|
||||||
<div id="interface_shortcut_settings">
|
<div id="interface_shortcut_settings">
|
||||||
|
<div class="label">Actions</div>
|
||||||
</div>
|
<div class="description">
|
||||||
|
<p>In this sections, you can define custom actions, add or change keyboard shortcut or hide buttons from the popup.</p>
|
||||||
|
|
||||||
<!-- 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>
|
||||||
</div>
|
<div class="flex flex-column" id="_customization_action_list">
|
||||||
|
|
||||||
|
|
||||||
<!-- 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- ABOUT -->
|
<!-- ABOUT -->
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user