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

Additional details in the popup

Browse Source
This commit is contained in:
Tamius Han 2021-05-11 22:45:08 +02:00
parent e5c1bcded1
commit fba6a8d604
1 changed files with 45 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,18 +38,18 @@
Player detection settings<br/><small>for {{site}}</small> Player detection settings<br/><small>for {{site}}</small>
</div> </div>
<div class="description"> <div class="description">
Player is the frame around the video. Extension crops/stretches the video to fit the player. If extension doesn't work, you can help a little by telling it where to look for the player.<br/>
</div> </div>
<div class=""> <div class="">
<div class=""> <div class="">
<input :checked="!playerManualQs" <input :checked="playerManualQs"
@change="togglePlayerManualQs" @change="togglePlayerManualQs"
type="checkbox" type="checkbox"
/> Detect automatically /> Manually specify player
</div> </div>
<div class="flex flex-column"> <div class="flex flex-column">
<div class="">Query selectors:</div> <div class="">Query selectors for player:</div>
<input type="text" <input type="text"
v-model="playerQs" v-model="playerQs"
@change="updatePlayerQuerySelector" @change="updatePlayerQuerySelector"
@ -58,24 +58,48 @@
/> />
</div> </div>
<div class=""> <div class="flex flex-row">
<input :checked="playerByNodeIndex" <input :checked="playerByNodeIndex"
:disabled="!playerManualQs" :disabled="!playerManualQs"
@change="toggleByNodeIndex" @change="toggleByNodeIndex"
type="checkbox" type="checkbox"
/> Specify player node parent index instead />
</div> <div>
Player is n-th parent of video:
<div class="flex flex-column"> </div>
<div class="">Player node parent index:</div> <input v-model="playerParentNodeIndex"
<input v-model="playerParentNodeIndex"
:disabled="!playerByNodeIndex || !playerManualQs" :disabled="!playerByNodeIndex || !playerManualQs"
@change="updatePlayerParentNodeIndex" @change="updatePlayerParentNodeIndex"
@blur="updatePlayerParentNodeIndex" @blur="updatePlayerParentNodeIndex"
type="number" 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"
/>
<div>
Do not use monitor AR in fullscreen
</div>
</div>
<div class="description">
<small>
<b>Hint:</b> When in full screen, the extension will assume that player element is as big as your screen.
You generally want to keep this option off, unless you like to browse in fullscreen a lot.
</small>
</div> </div>
</div> </div>
<div class="label"> <div class="label">
@ -213,6 +237,7 @@ export default {
playerCss: '', playerCss: '',
playerByNodeIndex: false, playerByNodeIndex: false,
playerParentNodeIndex: undefined, playerParentNodeIndex: undefined,
usePlayerAr: false,
BrowserDetect BrowserDetect
}; };
}, },
@ -234,6 +259,7 @@ export default {
this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors; this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors;
this.playerByNodeIndex = this.settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex; this.playerByNodeIndex = this.settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex;
this.playerParentNodeIndex = this.settings.active.sites[this.site].DOM.player.videoAncestor; this.playerParentNodeIndex = this.settings.active.sites[this.site].DOM.player.videoAncestor;
this.usePlayerAr = this.settings.active.sites[this.site].usePlayerArInFullscreen;
} catch (e) { } catch (e) {
// that's here just in case relevant settings for this site don't exist yet // that's here just in case relevant settings for this site don't exist yet
} }
@ -330,6 +356,12 @@ export default {
this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex; this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex;
this.settings.save(); this.settings.save();
}, },
toggleUsePlayerAr() {
this.ensureSettings('player');
this.usePlayerAr = !this.usePlayerAr;
this.settings.active.sites[this.site].usePlayerArInFullscreen = this.usePlayerAr;
this.settings.save();
},
setMitigation(mitigation, value) { setMitigation(mitigation, value) {
// ensure mitigations object exists. // ensure mitigations object exists.
// it may not exist in the settings on first load // it may not exist in the settings on first load