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

14
src/popup/App.vue
View File

@ -8,7 +8,7 @@
non-firefox builds of this extension and be done with it. No need to complicate things
further than that.
-->
<div v-if="settingsInitialized"
<div v-if="settingsInitialized"
class="popup flex flex-column no-overflow"
:class="{'popup-chrome': ! BrowserDetect.firefox}"
>
@ -20,7 +20,7 @@
Build channel: {{BrowserDetect.processEnvChannel}}
</div>
</div>
<div
<div
v-if="narrowPopup"
class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
@click="toggleSideMenu()"
@ -160,7 +160,7 @@
</div>
<!-- PANELS/CONTENT -->
<div id="tab-content"
<div id="tab-content"
v-show="!(narrowPopup && sideMenuVisible)"
class="flex-grow h100 overflow-y-auto"
:class="{'narrow-content': narrowPopup}"
@ -184,7 +184,7 @@
:settings="settings"
:site="selectedSite"
/>
<PerformancePanel v-if="selectedTab === 'performance-metrics'"
<PerformancePanel v-if="selectedTab === 'performance-metrics'"
:performance="performance" />
<WhatsNewPanel v-if="selectedTab === 'whats-new'" />
<AboutPanel v-if="selectedTab === 'about'" />
@ -279,7 +279,7 @@ export default {
}
await this.sleep(5000);
}
}
},
async updated() {
const body = document.getElementsByTagName('body')[0];
@ -287,7 +287,7 @@ export default {
// ensure that narrowPopup only gets set the first time the popup renders
// if popup was rendered before, we don't do anything because otherwise
// we'll be causing an unwanted re-render
//
//
// another thing worth noting — the popup gets first initialized with
// offsetWidth set to 0. This means proper popup will be displayed as a
// mini popup if we don't check for that.
@ -695,7 +695,7 @@ html {
non-firefox builds of this extension and be done with it. No need to complicate things
further than that.
It also seems that Chrome doesn't like if we set the width of the popup all the way to
It also seems that Chrome doesn't like if we set the width of the popup all the way to
800px (probably something something scrollbar), so let's just take away a few px.
*/
.popup-chrome {

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

@ -6,7 +6,7 @@
If extension doesn't detect player correctly, you can override it.
<small>(NOTE: this currently doesn't work for embedded videos)</small>
</div>
<div>Meaning of outlines:</div>
<div class="flex flex-row flex-wrap">
@ -44,50 +44,59 @@
<div class="">
<input :checked="playerManualQs"
@change="togglePlayerManualQs"
type="checkbox"
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 class="">Query selectors for player:</div>
<input type="text"
v-model="playerQs"
@change="updatePlayerQuerySelector"
@blur="updatePlayerQuerySelector"
:disabled="playerByNodeIndex || !playerManualQs"
/>
</div>
<div class="flex flex-row">
<input :checked="playerByNodeIndex"
:disabled="!playerManualQs"
@change="toggleByNodeIndex"
type="checkbox"
/>
<div>
Player is n-th parent of video:
<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"
@change="updatePlayerQuerySelector"
@blur="updatePlayerQuerySelector"
:disabled="playerByNodeIndex || !playerManualQs"
/>
</div>
<div v-if="playerByNodeIndex" class="flex flex-row">
<div>
Player is n-th parent of video:
</div>
<input v-model="playerParentNodeIndex"
:disabled="!playerManualQs"
@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>
<input v-model="playerParentNodeIndex"
:disabled="!playerByNodeIndex || !playerManualQs"
@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.
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">
<input :checked="usePlayerAr"
@change="toggleUsePlayerAr"
type="checkbox"
type="checkbox"
/>
<div>
Do not use monitor AR in fullscreen
@ -116,7 +125,7 @@
>
</textarea>
</div>
<div class="label">
Video detection settings<br/><small>for {{site}}</small>
</div>
@ -125,7 +134,7 @@
<div class="">
<input :checked="!videoManualQs"
@change="toggleVideoManualQs"
type="checkbox"
type="checkbox"
/> Detect automatically
</div>
<div class="flex flex-column">
@ -161,7 +170,7 @@
<div class="flex label-secondary form-label">
<input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"
@change="setMitigation(['zoomLimit', 'enabled'], $event.target.checked)"
type="checkbox"
type="checkbox"
/> Limit zoom.
</div>
<div class="flex flex-row">
@ -181,7 +190,7 @@
<input :checked="settings?.active?.mitigations?.zoomLimit?.fullscreenOnly"
@change="setMitigation(['zoomLimit', 'fullscreenOnly'], $event.target.checked)"
:disabled="!settings?.active?.mitigations?.zoomLimit?.enabled"
type="checkbox"
type="checkbox"
/> Limit zoom only while in fullscreen
</div>
<div class="description">
@ -235,7 +244,7 @@ export default {
playerManualQs: false,
playerQs: '',
playerCss: '',
playerByNodeIndex: false,
playerByNodeIndex: true,
playerParentNodeIndex: undefined,
usePlayerAr: false,
BrowserDetect
@ -253,7 +262,7 @@ export default {
} catch (e) {
// that's here just in case relevant settings for this site don't exist yet
}
try {
this.playerManualQs = this.settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors;
@ -278,7 +287,7 @@ export default {
const saveButtonBait = document.getElementById('save-banner-observer-bait');
const saveButton = document.getElementById('save-banner');
const observer = new IntersectionObserver(
const observer = new IntersectionObserver(
([e]) => {
// console.log('observer triggered. intersection ratio?', e.intersectionRatio)
saveButton.classList.toggle('floating', e.intersectionRatio < 0.95);
@ -380,7 +389,7 @@ export default {
}
currentMitigationsParent[mitigation[mitigation.length - 1]] = value;
} else {
this.settings.active.mitigations[mitigation] = value;
}
@ -434,4 +443,8 @@ export default {
box-shadow: 0 2rem 3rem 1rem $selected-color;
}
}
.small-samecolor {
font-size: 0.8em;
}
</style>