tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into stable

Browse Source
This commit is contained in:
Tamius Han 2019-11-05 00:09:20 +01:00
commit b43747a59c
12 changed files with 143 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
CHANGELOG.md
View File

@ -12,7 +12,14 @@ QoL improvements for me:
* logging: allow to enable logging at will and export said logs to a file * logging: allow to enable logging at will and export said logs to a file
### v.4.4.0 (current) ### v.4.4.1 (current)
* Changes to player detection that fix issues with vk
* Extension tries to avoid setting aspect ratio pointlessly
* (Hopefully) fixed mailto: and reddit compose links.
* When reporting bugs, email/reddit template now automatically gathers browser, extension version and OS.
### v.4.4.0
* Russian users (and users of other non-latin keyboard layouts) can now use keyboard shortcuts by default, without having to rebind them manually. (NOTE: if you've changed keyboard shortcuts manually, this change will ***NOT*** be applied to your configuration.) * Russian users (and users of other non-latin keyboard layouts) can now use keyboard shortcuts by default, without having to rebind them manually. (NOTE: if you've changed keyboard shortcuts manually, this change will ***NOT*** be applied to your configuration.)
* NOTE: when using non-latin layouts, 'zoom' shortcut (`z` by default) uses the position of 'Y' on QWERTY layout. * NOTE: when using non-latin layouts, 'zoom' shortcut (`z` by default) uses the position of 'Y' on QWERTY layout.
@ -20,6 +27,8 @@ QoL improvements for me:
* Changing aspect ratio now resets zooming and panning. * Changing aspect ratio now resets zooming and panning.
* Fixed bug where keyboard shortcuts would work while typing in certain text fields * Fixed bug where keyboard shortcuts would work while typing in certain text fields
* Fixed minor bug with autodetection * Fixed minor bug with autodetection
* **[4.4.0.1]** fixed mailto and reddit compose links. When reporting issues via e-mail or reddit, extension version, browser
and OS are automatically included in email/reddit template.
### v4.3.1 ### v4.3.1

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ultravidify", "name": "ultravidify",
"version": "4.4.0", "version": "4.4.1",
"description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.", "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
"author": "Tamius Han <tamius.han@gmail.com>", "author": "Tamius Han <tamius.han@gmail.com>",
"scripts": { "scripts": {

1
src/ext/conf/BrowserDetect.js
View File

@ -4,6 +4,7 @@ const BrowserDetect = {
firefox: process.env.BROWSER === 'firefox', firefox: process.env.BROWSER === 'firefox',
chrome: process.env.BROWSER === 'chrome', chrome: process.env.BROWSER === 'chrome',
edge: process.env.BROWSER === 'edge', edge: process.env.BROWSER === 'edge',
processEnvBrowser: process.env.BROWSER,
} }
if (Debug.debug) { if (Debug.debug) {

24
src/ext/lib/Logger.js
View File

@ -120,27 +120,29 @@ class Logger {
if (!this.conf.fileOptions.enabled || this.temp_disable) { if (!this.conf.fileOptions.enabled || this.temp_disable) {
return false; return false;
} }
if (component.length ) { if (Array.isArray(component) && component.length ) {
for (const c in component) { for (const c of component) {
if (this.conf.fileOptions[component]) { if (this.conf.fileOptions[c]) {
return this.conf.fileOptions[component]; return this.conf.fileOptions[c];
} }
} }
} } else {
return this.conf.fileOptions[component]; return this.conf.fileOptions[component];
}
} }
canLogConsole(component) { canLogConsole(component) {
if (!this.conf.consoleOptions.enabled || this.temp_disable) { if (!this.conf.consoleOptions.enabled || this.temp_disable) {
return false; return false;
} }
if (Array.isArray(component) && component.length) { if (Array.isArray(component) && component.length) {
for (const c in component) { for (const c of component) {
if (this.conf.consoleOptions[component]) { if (this.conf.consoleOptions[c]) {
return this.conf.consoleOptions[component]; return this.conf.consoleOptions[c];
} }
} }
} } else {
return this.conf.consoleOptions[component]; return this.conf.consoleOptions[component];
}
} }
// level is unused as of now, but this may change in the future // level is unused as of now, but this may change in the future

4
src/ext/lib/ar-detect/ArDetector.js
View File

@ -489,7 +489,7 @@ class ArDetector {
} }
this.logger.log('info', 'debug', `%c[ArDetect::processAr] <@${this.arid}> Triggering aspect ratio change. New aspect ratio: ${trueAr}`, _ard_console_change); this.logger.log('info', 'debug', `%c[ArDetect::processAr] <@${this.arid}> Triggering aspect ratio change. New aspect ratio: ${trueAr}`, _ard_console_change);
this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: trueAr}, {type: AspectRatio.Automatic, ratio: trueAr}); this.conf.resizer.updateAr({type: AspectRatio.Automatic, ratio: trueAr}, {type: AspectRatio.Automatic, ratio: trueAr});
} }
clearImageData(id) { clearImageData(id) {
@ -582,7 +582,7 @@ class ArDetector {
// da je letterbox izginil. // da je letterbox izginil.
// If we don't detect letterbox, we reset aspect ratio to aspect ratio of the video file. The aspect ratio could // If we don't detect letterbox, we reset aspect ratio to aspect ratio of the video file. The aspect ratio could
// have been corrected manually. It's also possible that letterbox (that was there before) disappeared. // have been corrected manually. It's also possible that letterbox (that was there before) disappeared.
this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()}); this.conf.resizer.updateAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
this.guardLine.reset(); this.guardLine.reset();
this.noLetterboxCanvasReset = true; this.noLetterboxCanvasReset = true;

44
src/ext/lib/video-data/PlayerData.js
View File

@ -192,6 +192,16 @@ class PlayerData {
return false; return false;
} }
updatePlayerDimensions(element) {
const isFullScreen = PlayerData.isFullScreen();
this.dimensions = {
width: element.offsetWidth,
height: element.offsetHeight,
fullscreen: isFullScreen
};
}
getPlayer() { getPlayer() {
const host = window.location.host; const host = window.location.host;
let element = this.video.parentNode; let element = this.video.parentNode;
@ -223,6 +233,7 @@ class PlayerData {
element = element.parentNode; element = element.parentNode;
} }
if (element) { if (element) {
this.updatePlayerDimensions(element);
return element; return element;
} }
} else if (this.settings.active.sites[host].DOM.player.querySelectors) { } else if (this.settings.active.sites[host].DOM.player.querySelectors) {
@ -256,7 +267,9 @@ class PlayerData {
if (elementQ.length) { if (elementQ.length) {
// return element with biggest score // return element with biggest score
// if video player has not been found, proceed to automatic detection // if video player has not been found, proceed to automatic detection
return elementQ.sort( (a,b) => b.score - a.score)[0].element; const playerElement = elementQ.sort( (a,b) => b.score - a.score)[0].element;
this.updatePlayerDimensions(playerElement);
return playerElement;
} }
} }
} }
@ -283,17 +296,20 @@ class PlayerData {
score = 100; score = 100;
// This entire section is disabled because of some bullshit on vk and some shady CIS streaming sites.
if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id // Possibly removal of this criteria is not necessary, because there was also a bug with force player
score += 75; //
}
// if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
// score += 75;
// }
// this has only been observed on steam // this has only been observed on steam
if (element.id.indexOf('movie') !== -1) { // if (element.id.indexOf('movie') !== -1) {
score += 75; // score += 75;
} // }
if (element.classList.toString().indexOf('player') !== -1) { // prefer elements with 'player' in classlist, but a bit less than id // if (element.classList.toString().indexOf('player') !== -1) { // prefer elements with 'player' in classlist, but a bit less than id
score += 50; // score += 50;
} // }
score -= scorePenalty++; // prefer elements closer to <video> score -= scorePenalty++; // prefer elements closer to <video>
elementQ.push({ elementQ.push({
@ -307,7 +323,9 @@ class PlayerData {
if (elementQ.length) { if (elementQ.length) {
// return element with biggest score // return element with biggest score
return elementQ.sort( (a,b) => b.score - a.score)[0].element; const playerElement = elementQ.sort( (a,b) => b.score - a.score)[0].element;
this.updatePlayerDimensions(playerElement);
return playerElement;
} }
// if no candidates were found, something is obviously very, _very_ wrong. // if no candidates were found, something is obviously very, _very_ wrong.
@ -325,7 +343,7 @@ class PlayerData {
} }
forceRefreshPlayerElement() { forceRefreshPlayerElement() {
this.checkPlayerSizeChange(); this.getPlayer();
} }
checkPlayerSizeChange(){ checkPlayerSizeChange(){

42
src/ext/lib/video-transform/Resizer.js
View File

@ -120,6 +120,12 @@ class Resizer {
} }
updateAr(ar) {
if (!this.lastAr || ar.type !== this.lastAr.type || ar.ratio !== this.lastAr.ratio) {
this.setAr(ar);
}
}
setAr(ar, lastAr) { setAr(ar, lastAr) {
if (this.destroyed) { if (this.destroyed) {
return; return;
@ -408,27 +414,32 @@ class Resizer {
// mostly internal stuff // mostly internal stuff
computeOffsets(stretchFactors){ computeOffsets(stretchFactors){
this.logger.log('info', 'debug', "[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.sites['@global'].videoAlignment); this.logger.log('info', 'debug', "[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.sites['@global'].videoAlignment);
const wdiff = this.conf.player.dimensions.width - this.conf.video.offsetWidth; const wdiff = this.conf.player.dimensions.width - this.conf.video.offsetWidth;
const hdiff = this.conf.player.dimensions.height - this.conf.video.offsetHeight; const hdiff = this.conf.player.dimensions.height - this.conf.video.offsetHeight;
if (wdiff < 0 && hdiff < 0 && this.zoom.scale > 1) {
this.conf.player.re
}
const wdiffAfterZoom = this.conf.video.offsetWidth * stretchFactors.xFactor - this.conf.player.dimensions.width; const wdiffAfterZoom = this.conf.video.offsetWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;
const hdiffAfterZoom = this.conf.video.offsetHeight * stretchFactors.yFactor - this.conf.player.dimensions.height; const hdiffAfterZoom = this.conf.video.offsetHeight * stretchFactors.yFactor - this.conf.player.dimensions.height;
var translate = { const translate = {
x: wdiff * 0.5, x: wdiff * 0.5,
y: hdiff * 0.5, y: hdiff * 0.5,
}; };
if (this.pan) { if (this.pan) {
// don't offset when video is smaller than player // don't offset when video is smaller than player
if(wdiffAfterZoom < 0 && hdiffAfterZoom < 0) { if(wdiffAfterZoom >= 0 || hdiffAfterZoom >= 0) {
return translate; translate.x += wdiffAfterZoom * this.pan.relativeOffsetX * this.zoom.scale;
translate.y += hdiffAfterZoom * this.pan.relativeOffsetY * this.zoom.scale;
} }
translate.x += wdiffAfterZoom * this.pan.relativeOffsetX * this.zoom.scale;
translate.y += hdiffAfterZoom * this.pan.relativeOffsetY * this.zoom.scale;
} else { } else {
if (this.videoAlignment == VideoAlignment.Left) { if (this.videoAlignment == VideoAlignment.Left) {
translate.x += wdiffAfterZoom * 0.5; translate.x += wdiffAfterZoom * 0.5;
@ -437,15 +448,18 @@ class Resizer {
translate.x -= wdiffAfterZoom * 0.5; translate.x -= wdiffAfterZoom * 0.5;
} }
} }
this.logger.log('info', 'debug', "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n", this.logger.log('info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
'---- data in ----\n', '---- data in ----',
'player dimensions:', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height}, '\nplayer dimensions: ', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
'video dimensions: ', {w: this.conf.video.offsetWidth, h: this.conf.video.offsetHeight}, '\nvideo dimensions: ', {w: this.conf.video.offsetWidth, h: this.conf.video.offsetHeight},
'stretch factors: ', stretchFactors, '\nstretch factors: ', stretchFactors,
'pan & zoom: ', this.pan, this.zoom, '\npan & zoom: ', this.pan, this.zoom,
'\nwdiff, hdiff: ', wdiff, 'x', hdiff,
'\nwdiff, hdiffAfterZoom:', wdiffAfterZoom, 'x', hdiffAfterZoom,
'\n\n---- data out ----\n', '\n\n---- data out ----\n',
'translate:', translate); 'translate:', translate);
console.trace();
return translate; return translate;
} }
@ -513,7 +527,7 @@ class Resizer {
return; return;
} }
this.logger.log('info', 'resizer', "[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate}); this.logger.log('info', ['debug', 'resizer'], "[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
// save stuff for quick tests (before we turn numbers into css values): // save stuff for quick tests (before we turn numbers into css values):
this.currentVideoSettings = { this.currentVideoSettings = {

2
src/ext/uw.js
View File

@ -44,7 +44,7 @@ class UW {
if (!this.logger) { if (!this.logger) {
const loggingOptions = { const loggingOptions = {
logToFile: false, logToFile: false,
logToConsole: true, logToConsole: false,
fileOptions: { fileOptions: {
// really the same stuff as consoleOptions // really the same stuff as consoleOptions
}, },

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"manifest_version": 2, "manifest_version": 2,
"name": "Ultrawidify", "name": "Ultrawidify",
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.", "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
"version": "4.4.0", "version": "4.4.1",
"applications": { "applications": {
"gecko": { "gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}" "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

27
src/options/about.vue
View File

@ -5,8 +5,8 @@
<p><b>Having an issue?</b> Report <strike>undocumented features</strike> bugs using one of the following options: <p><b>Having an issue?</b> Report <strike>undocumented features</strike> bugs using one of the following options:
<ul> <ul>
<li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github</b></a> <b>(strongly preferred)</b><br/></li> <li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github</b></a> <b>(strongly preferred)</b><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="mailtoLink">tamius.han@gmail.com</a></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> <li>PM me on <a target="_blank" :href="redditLink">reddit</a><br/></li>
</ul> </ul>
</p> </p>
@ -32,11 +32,34 @@
<script> <script>
import BrowserDetect from '../ext/conf/BrowserDetect';
export default { export default {
data() { data() {
return { return {
addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version, addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version,
mailtoLink: 'mailto:tamius.han@gmail.com',
redditLink: '',
} }
},
created() {
const messageTemplate = encodeURIComponent(
`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.
Extension info (do not change or remove):
* Extension version: ${this.addonVersion}
* Browser (env): ${BrowserDetect.processEnvBrowser}
Browser-related stuff (please ensure this section is correct):
* User Agent string: ${window.navigator.userAgent}
* vendor: ${window.navigator.vendor}
* Operating system: ${window.navigator.platform}
`
);
this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
this.redditLink = `https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=${messageTemplate}`;
} }
} }
</script> </script>

27
src/popup/panels/AboutPanel.vue
View File

@ -7,8 +7,8 @@
<span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options: <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options:
<ul> <ul>
<li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li> <li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github (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="mailtoLink">tamius.han@gmail.com</a></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> <li>PM me on <a target="_blank" :href="redditLink">reddit</a><br/></li>
</ul> </ul>
<br/> <br/>
If reporting perfomrance/RAM usage issue, please include your CPU model and RAM. If reporting perfomrance/RAM usage issue, please include your CPU model and RAM.
@ -19,11 +19,34 @@
</div> </div>
</template> </template>
<script> <script>
import BrowserDetect from '../../ext/conf/BrowserDetect';
export default { export default {
data() { data() {
return { return {
addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version, addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version,
mailtoLink: 'mailto:tamius.han@gmail.com',
redditLink: '',
} }
},
created() {
const messageTemplate = encodeURIComponent(
`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.
Extension info (do not change or remove):
* Extension version: ${this.addonVersion}
* Browser (env): ${BrowserDetect.processEnvBrowser}
Browser-related stuff (please ensure this section is correct):
* User Agent string: ${window.navigator.userAgent}
* vendor: ${window.navigator.vendor}
* Operating system: ${window.navigator.platform}
`
);
this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
this.redditLink = `https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=${messageTemplate}`;
} }
} }
</script> </script>

15
src/popup/panels/WhatsNewPanel.vue
View File

@ -2,17 +2,12 @@
<div> <div>
<h2>What's new</h2> <h2>What's new</h2>
<p>Full changelog for older versions <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p> <p>Full changelog for older versions <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
<p class="label">4.4.0</p> <p class="label">4.4.1</p>
<ul> <ul>
<li>Russian users (and users of other non-latin keyboard layouts) can now use keyboard shortcuts by default, <li>Changes to player detection that fix issues with vk</li>
without having to rebind them manually. <b>NOTE: this change will only be applied to users who have <i>NOT</i> <li>Extension tries to avoid setting aspect ratio pointlessly</li>
modified their keyboard shortcuts.</b></li> <li>Fixed (hopefully) mailto: and reddit compose links.</li>
<li>NOTE: when using non-latin layouts, 'zoom' shortcut (`z` by default) uses the position of 'Y' on QWERTY layout.</li> <li>When reporting bugs, email/reddit template now automatically gathers browser, extension version and OS.</li>
<li>Ability to preserve aspect ratio between different videos (applies to current page and doesn't survive proper
page reloads)</li>
<li>Changing aspect ratio now resets zooming and panning.</li>
<li>Fixed bug where keyboard shortcuts would work while typing in certain text fields</li>
<li>Fixed a minor bug with autodetection</li>
</ul> </ul>
</div> </div>
</template> </template>