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

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

@ -46,43 +46,52 @@
@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 class="">Query selectors for player:</div> <div v-if="!playerByNodeIndex" class="flex flex-column">
<input type="text" <div class="">Query selectors for player:</div>
v-model="playerQs" <input type="text"
@change="updatePlayerQuerySelector" v-model="playerQs"
@blur="updatePlayerQuerySelector" @change="updatePlayerQuerySelector"
:disabled="playerByNodeIndex || !playerManualQs" @blur="updatePlayerQuerySelector"
/> :disabled="playerByNodeIndex || !playerManualQs"
</div> />
</div>
<div class="flex flex-row">
<input :checked="playerByNodeIndex" <div v-if="playerByNodeIndex" class="flex flex-row">
:disabled="!playerManualQs" <div>
@change="toggleByNodeIndex" Player is n-th parent of video:
type="checkbox" </div>
/> <input v-model="playerParentNodeIndex"
<div> :disabled="!playerManualQs"
Player is n-th parent of video: @change="updatePlayerParentNodeIndex"
@blur="updatePlayerParentNodeIndex"
type="number"
/>
</div>
<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.
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>
<input v-model="playerParentNodeIndex"
:disabled="!playerByNodeIndex || !playerManualQs"
@change="updatePlayerParentNodeIndex"
@blur="updatePlayerParentNodeIndex"
type="number"
/>
</div> </div>
<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.
</small>
</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>