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