Some work on settings
This commit is contained in:
parent
335bcd64fc
commit
872bc4ece7
@ -194,13 +194,13 @@ var ExtensionConf = {
|
||||
status: "enabled", // should extension work on this site?
|
||||
arStatus: "default", // should we enable autodetection
|
||||
statusEmbedded: "enabled", // should extension work for this site when embedded on other sites?
|
||||
override: true // ignore value localStorage in favour of this
|
||||
override: false // ignore value localStorage in favour of this
|
||||
},
|
||||
"www.netflix.com" : {
|
||||
status: "enabled",
|
||||
arStatus: BrowserDetect.firefox ? "default" : "disabled",
|
||||
statusEmbedded: "enabled",
|
||||
override: true
|
||||
override: false
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext');
|
||||
|
||||
.show{
|
||||
display: block !important;
|
||||
}
|
||||
.uw_hide{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.uw_submenu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.66);
|
||||
}
|
||||
/*
|
||||
.uw-setmenu{
|
||||
padding-left: 2em !important;
|
||||
padding-right: 2em !important;
|
||||
}*/
|
||||
|
||||
.uw_submenu_bottom0{
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.display_relative{
|
||||
display: relative;
|
||||
}
|
||||
|
||||
.uw-setmenu-item{
|
||||
padding-right: 2em !important;
|
||||
padding-left: 2em !important;
|
||||
}
|
||||
|
||||
.common_anchor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uw_button{
|
||||
display: inline-block;
|
||||
/* height: 100% !important; */
|
||||
background-size: 75% 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.uw_ui_anchor{
|
||||
display: inline-block;
|
||||
}
|
||||
#uw_ui_anchor{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
.uw-button{
|
||||
display: inline-block;
|
||||
/* height: 100% !important; */
|
||||
background-size: 75% 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.uw-button-row {
|
||||
display: inline-block !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 99% !important;
|
||||
height: 100% !important;
|
||||
z-index: 1337 !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.uw-button:hover{
|
||||
background-color: rgba(192,0,0,0.66);
|
||||
}
|
||||
.uw-setmenu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.66);
|
||||
right: 0px;
|
||||
}
|
||||
.uw-setmenu-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: "Oxygen";
|
||||
color: #ffffff !important;
|
||||
width: 90%;
|
||||
padding-left: 10%;
|
||||
}
|
||||
.uw-setmenu-item:hover{
|
||||
background-color: rgba(192,0,0,0.66);
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
/* yeah this is also a placeholder file, this time for 'settings' page */
|
||||
@ -1,28 +0,0 @@
|
||||
.uw-button{
|
||||
display: inline-block;
|
||||
height: 100% !important;
|
||||
background-size: 75% 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.uw-button:hover{
|
||||
background-color: rgba(192,0,0,0.66);
|
||||
}
|
||||
.uw-setmenu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.66);
|
||||
right: 0px;
|
||||
}
|
||||
.uw-setmenu-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: "Oxygen";
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.uw-setmenu-item:hover{
|
||||
background-color: rgba(192,0,0,0.66);
|
||||
}
|
||||
.uw_top{
|
||||
z-index: 1337;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
<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/uw-common.css'>
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
@ -21,32 +22,9 @@
|
||||
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;
|
||||
}
|
||||
@ -57,10 +35,6 @@
|
||||
color: #ffe;
|
||||
}
|
||||
|
||||
.smallcaps{
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.selected{
|
||||
color: #ffddaa;
|
||||
background-color: #433221;
|
||||
@ -76,10 +50,7 @@
|
||||
color: #777 !important;
|
||||
background-color: #222 !important;
|
||||
}
|
||||
.invalid-input {
|
||||
border: 1px solid #720 !important;
|
||||
background-color: #410 !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #7f1416;
|
||||
color: #fff;
|
||||
@ -126,66 +97,13 @@
|
||||
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>
|
||||
@ -215,23 +133,6 @@
|
||||
<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>
|
||||
|
||||
|
||||
@ -4,213 +4,7 @@
|
||||
<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>
|
||||
@ -224,9 +18,9 @@
|
||||
</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_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>
|
||||
@ -234,30 +28,146 @@
|
||||
|
||||
|
||||
|
||||
<div id="general_settings" class="hide">
|
||||
<!-- GENERAL SETTINGS -->
|
||||
|
||||
<div id="general_settings">
|
||||
<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 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">
|
||||
@ -265,7 +175,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="uw_shortcuts">
|
||||
|
||||
<!-- REMOVE PLOX -->
|
||||
|
||||
<div id="uw_shortcuts" class="hide">
|
||||
<div class="content left">
|
||||
<h2>Keyboard shortcuts</h2>
|
||||
|
||||
@ -343,6 +256,9 @@
|
||||
</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>
|
||||
@ -366,7 +282,6 @@
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user