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

Improve UI in advanced settings

Browse Source
This commit is contained in:
Tamius Han 2021-07-05 00:49:35 +02:00
parent 5c9112a07b
commit 1cc76ab3b1
2 changed files with 63 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/popup/panels/SiteDetailsPanel.vue
View File

@ -46,9 +46,21 @@
@change="togglePlayerManualQs"
type="checkbox"
/> Manually specify player
<span v-if="playerManualQs" class="small-samecolor">
&nbsp;
<a
v-if="playerByNodeIndex"
@click="toggleByNodeIndex"
>(show advanced options)</a>
<a
v-if="!playerByNodeIndex"
@click="toggleByNodeIndex"
>(hide advanced options)</a>
</span>
</div>
<div class="flex flex-column">
<div v-if="playerManualQs">
<div v-if="!playerByNodeIndex" class="flex flex-column">
<div class="">Query selectors for player:</div>
<input type="text"
v-model="playerQs"
@ -58,17 +70,12 @@
/>
</div>
<div class="flex flex-row">
<input :checked="playerByNodeIndex"
:disabled="!playerManualQs"
@change="toggleByNodeIndex"
type="checkbox"
/>
<div v-if="playerByNodeIndex" class="flex flex-row">
<div>
Player is n-th parent of video:
</div>
<input v-model="playerParentNodeIndex"
:disabled="!playerByNodeIndex || !playerManualQs"
:disabled="!playerManualQs"
@change="updatePlayerParentNodeIndex"
@blur="updatePlayerParentNodeIndex"
type="number"
@ -78,11 +85,13 @@
<div class="description">
<small>
<b>Hint:</b> Player is a HTML element that represents the portion of the page you expect the video to play in.
You can provide player's query selector, or you can tick the 'player is the n-th parent of video'
checkbox and try entering values 1-12ish and see if anything works. Note that you need to save
settings and reload the page every time you change the number.
The correct value for n-th player value should normally between 1-10 (depends on the site). If none of these
values works, then the site probably has a different issue.
Note that you need to save settings and reload the page every time you change the number.
</small>
</div>
</div>
<div class="flex flex-row">
<input :checked="usePlayerAr"
@ -235,7 +244,7 @@ export default {
playerManualQs: false,
playerQs: '',
playerCss: '',
playerByNodeIndex: false,
playerByNodeIndex: true,
playerParentNodeIndex: undefined,
usePlayerAr: false,
BrowserDetect
@ -434,4 +443,8 @@ export default {
box-shadow: 0 2rem 3rem 1rem $selected-color;
}
}
.small-samecolor {
font-size: 0.8em;
}
</style>