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

UI design for player selection is mostly done

Browse Source
This commit is contained in:
Tamius Han 2022-06-16 00:07:03 +02:00
parent 340ee05443
commit 78f350b72b
2 changed files with 414 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
View File

@ -20,7 +20,49 @@
should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover. should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
</p> </p>
<p>
<a @click="showAdvancedOptions = !showAdvancedOptions">
<template v-if="showAdvancedOptions">Hide advanced options</template>
<template v-else>Show advanced options</template>
</a>
</p>
<div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
<div style="display: flex; flex-direction: column">
<div> <div>
<input :checked="playerManualQs"
@change="togglePlayerManualQs"
type="checkbox"
/>
<div>
Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
<small>If defining multiple selectors, separate them with commas.</small>
</div>
</div>
<div>Selector</div>
<input type="text"
v-model="playerQs"
@change="updatePlayerQuerySelector"
@blur="updatePlayerQuerySelector"
:disabled="playerByNodeIndex || !playerManualQs"
/>
</div>
<div style="display: flex; flex-direction: column">
<b>Custom CSS for site</b>
<textarea></textarea>
</div>
</div>
<div style="display: flex; flex-direction: row;">
<div class="element-tree">
<table>
<thead>
<tr>
<th>
<div class="status-relative">
Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
<div v-if="showLegend" class="element-symbol-legend">
<b>Symbols:</b><br /> <b>Symbols:</b><br />
<mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br /> <mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
<mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br /> <mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
@ -28,14 +70,19 @@
<mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br /> <mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
<mdicon name="check-circle" class="activePlayer" /> Element that is actually the player <mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
</div> </div>
</div>
<div class="element-tree"> </th>
<div class="html-element-boxes"> <th>Element</th>
<div <th>Quick fixes</th>
</tr>
</thead>
<tbody>
<tr
v-for="(element, index) of elementStack" v-for="(element, index) of elementStack"
:key="index" :key="index"
class="element-row" class="element-row"
> >
<td>
<div class="status"> <div class="status">
<div <div
v-if="element.heuristics?.invalidSize" v-if="element.heuristics?.invalidSize"
@ -67,8 +114,9 @@
> >
<mdicon name="check-circle" /> <mdicon name="check-circle" />
</div> </div>
</div> </div>
</td>
<td>
<div <div
class="element-data" class="element-data"
@ -87,27 +135,30 @@
</div> </div>
</div> </div>
</div> </div>
<div class="css-fixes"> </td>
<div><b>Quick fixes:</b></div> <td>
<!-- todo: generate buttons with some of the common css lines I always end up adding -->
<div <div
class="ccs-line" class="css-fixes"
:class="{'active': cssStack[index]?.includes('width: 100%')}" >
<div style="width: 100%"><b>Quick fixes:</b></div>
<div
class="css-line"
:class="{'active': cssStack[index]?.includes('width: 100%;')}"
@click="toggleCssForElement(index, 'width: 100%;')" @click="toggleCssForElement(index, 'width: 100%;')"
> >
Width: 100% Width: 100%
</div> </div>
<div <div
class="css-line" class="css-line"
:class="{'active': cssStack[index]?.includes('height: 100%')}" :class="{'active': cssStack[index]?.includes('height: 100%;')}"
@click="toggleCssForElement(index, 'height: 100%')" @click="toggleCssForElement(index, 'height: 100%;')"
> >
Height: 100% Height: 100%
</div> </div>
<div <div
class="css-line" class="css-line"
:class="{'active': cssStack[index]?.includes('display: flex')}" :class="{'active': cssStack[index]?.includes('display: flex;')}"
@click="toggleCssForElement(index, 'display: flex')" @click="toggleCssForElement(index, 'display: flex;')"
> >
Display: flex Display: flex
</div> </div>
@ -115,14 +166,14 @@
Flex direction: Flex direction:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('flex-direction: row')}" :class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
@click="toggleCssForElement(index, 'flex-direction', 'row')" @click="toggleCssForElement(index, 'flex-direction', 'row')"
> >
row row
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('flex-direction: column')}" :class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
@click="toggleCssForElement(index, 'flex-direction', 'column')" @click="toggleCssForElement(index, 'flex-direction', 'column')"
> >
column column
@ -132,21 +183,21 @@
Justify content: Justify content:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-content: start')}" :class="{'active': cssStack[index]?.includes('justify-content: start;')}"
@click="toggleCssForElement(index, 'justify-content', 'start')" @click="toggleCssForElement(index, 'justify-content', 'start')"
> >
start start
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-content: center')}" :class="{'active': cssStack[index]?.includes('justify-content: center;')}"
@click="toggleCssForElement(index, 'justify-content', 'center')" @click="toggleCssForElement(index, 'justify-content', 'center')"
> >
center center
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-content: end')}" :class="{'active': cssStack[index]?.includes('justify-content: end;')}"
@click="toggleCssForElement(index, 'justify-content', 'end')" @click="toggleCssForElement(index, 'justify-content', 'end')"
> >
end end
@ -156,21 +207,21 @@
Align items: Align items:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-items: start')}" :class="{'active': cssStack[index]?.includes('align-items: start;')}"
@click="toggleCssForElement(index, 'align-items', 'start')" @click="toggleCssForElement(index, 'align-items', 'start')"
> >
start start
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-items: center')}" :class="{'active': cssStack[index]?.includes('align-items: center;')}"
@click="toggleCssForElement(index, 'align-items', 'center')" @click="toggleCssForElement(index, 'align-items', 'center')"
> >
center center
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-items: end')}" :class="{'active': cssStack[index]?.includes('align-items: end;')}"
@click="toggleCssForElement(index, 'align-items', 'end')" @click="toggleCssForElement(index, 'align-items', 'end')"
> >
end end
@ -181,21 +232,21 @@
Justify self: Justify self:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-self: start')}" :class="{'active': cssStack[index]?.includes('justify-self: start;')}"
@click="toggleCssForElement(index, 'justify-self', 'start')" @click="toggleCssForElement(index, 'justify-self', 'start')"
> >
start start
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-self: center')}" :class="{'active': cssStack[index]?.includes('justify-self: center;')}"
@click="toggleCssForElement(index, 'justify-self', 'center')" @click="toggleCssForElement(index, 'justify-self', 'center')"
> >
center center
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-self: end')}" :class="{'active': cssStack[index]?.includes('justify-self: end;')}"
@click="toggleCssForElement(index, 'justify-self', 'end')" @click="toggleCssForElement(index, 'justify-self', 'end')"
> >
end end
@ -205,21 +256,21 @@
Align self: Align self:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-self: start')}" :class="{'active': cssStack[index]?.includes('align-self: start;')}"
@click="toggleCssForElement(index, 'align-self', 'start')" @click="toggleCssForElement(index, 'align-self', 'start')"
> >
start start
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-self: center')}" :class="{'active': cssStack[index]?.includes('align-self: center;')}"
@click="toggleCssForElement(index, 'align-self', 'center')" @click="toggleCssForElement(index, 'align-self', 'center')"
> >
center center
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-self: end')}" :class="{'active': cssStack[index]?.includes('align-self: end;')}"
@click="toggleCssForElement(index, 'align-self', 'end')" @click="toggleCssForElement(index, 'align-self', 'end')"
> >
end end
@ -229,21 +280,21 @@
Text-align: Text-align:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('text-align: left')}" :class="{'active': cssStack[index]?.includes('text-align: left;')}"
@click="toggleCssForElement(index, 'align-self', 'start')" @click="toggleCssForElement(index, 'text-align', 'left')"
> >
left left
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('text-align: center')}" :class="{'active': cssStack[index]?.includes('text-align: center;')}"
@click="toggleCssForElement(index, 'text-align', 'center')" @click="toggleCssForElement(index, 'text-align', 'center')"
> >
center center
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('text-align: right')}" :class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
@click="toggleCssForElement(index, 'text-align', 'right')" @click="toggleCssForElement(index, 'text-align', 'right')"
> >
right right
@ -253,25 +304,32 @@
Position: Position:
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('position: relative')}" :class="{'active': cssStack[index]?.includes('position: relative;')}"
@click="toggleCssForElement(index, 'position', 'relative')" @click="toggleCssForElement(index, 'position', 'relative')"
> >
relative relative
</span> | </span> |
<span <span
class="css-line-suboption" class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('position: absolute')}" :class="{'active': cssStack[index]?.includes('position: absolute;')}"
@click="toggleCssForElement(index, 'position', 'absolute')" @click="toggleCssForElement(index, 'position', 'absolute')"
> >
absolute absolute
</span> </span>
</div> </div>
</div> </div>
</div> </td>
</div> </tr>
</tbody>
</table>
<div class="element-config"> <div class="element-config">
</div> </div>
</div> </div>
<!-- <div class="css-preview">
{{cssStack}}
</div> -->
</div>
</div> </div>
</div> </div>
</div> </div>
@ -288,6 +346,8 @@ export default({
return { return {
elementStack: [], elementStack: [],
cssStack: [], cssStack: [],
showLegend: false,
showAdvancedOptions: false,
}; };
}, },
mixins: [], mixins: [],
@ -335,51 +395,49 @@ export default({
* cssValue is optional and can be included in cssRule argument * cssValue is optional and can be included in cssRule argument
*/ */
toggleCssForElement(index, cssRule, cssValue) { toggleCssForElement(index, cssRule, cssValue) {
// we will handle elements that put cssValue as a separate argument elsewhere
if (cssValue) { if (cssValue) {
// this is "toggle off" case for calls that put cssRule and cssValue as separate arguments return this.toggleCssForElement_3arg(index,cssRule, cssValue);
if (this.cssStack[index]?.includes(cssRule) && this.cssStack[index]?.includes(cssValue)) {
this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
//TODO: update settings!
return;
}
} }
// this rule applies to current element — remove it! // this rule applies to current element — remove it!
if (this.cssStack[index]?.includes(cssRule)) { if (this.cssStack[index]?.includes(cssRule)) {
this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule)); this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
} else {
if (!this.cssStack[index]) {
this.cssStack[index] = [];
}
this.cssStack[index].push(cssRule)
}
// exception: if cssValue is given separately, we aren't removing it //TODO: update settings!
// in that case, we're overwriting it },
if (cssValue) { toggleCssForElement_3arg(index, cssRule, cssValue) {
const matching = this.cssStack[index]?.find(x => x.includes(cssRule))
if (matching) {
this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
if (!matching.includes(cssValue)) {
this.cssStack[index].push(`${cssRule}: ${cssValue};`); this.cssStack[index].push(`${cssRule}: ${cssValue};`);
} }
} else { } else {
if (!this.cssStack[index]) { if (!this.cssStack[index]) {
this.cssStack[index] = []; this.cssStack[index] = [];
} }
if (cssValue) {
this.cssStack[index].push(`${cssRule}: ${cssValue};`); this.cssStack[index].push(`${cssRule}: ${cssValue};`);
} else {
this.cssStack[index].push(cssRule)
}
} }
//TODO: update settings! //TODO: update settings!
} }
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.element-tree { .element-tree {
.html-element-boxes {
display: flex;
flex-direction: column;
.element-row { .element-row {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
margin: 0.5rem; margin: 0.5rem;
.status { .status {
@ -430,7 +488,49 @@ export default({
color: #473c85; color: #473c85;
} }
} }
} }
}
// .css-fixes {
// // display: flex;
// // flex-direction: row;
// // flex-wrap: wrap;
// // align-items: flex-start;
// // justify-content:flex-start;
// }
.css-line {
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.5);
background: #000;
margin: 0.125rem 0.25rem;
padding: 0.125rem 0.25rem;
&.active, >span.active {
background: rgb(255, 174, 107);
color: #000;
}
}
.status-relative {
position: relative;
.element-symbol-legend {
position: absolute;
top: 100%;
left: 0;
z-index: 20000;
width: 32rem;
text-align: left;
background-color: #000;
padding: 1rem;
border: 1px solid rgba(255,255,255,0.5);
} }
} }

2
src/popup/App.vue
View File

@ -104,7 +104,7 @@
@click="selectTab('site-details')" @click="selectTab('site-details')"
> >
<div class=""> <div class="">
Advanced settings Extension settings
</div> </div>
<div v-if="selectedTab === 'site-details' && activeSites.length > 1" <div v-if="selectedTab === 'site-details' && activeSites.length > 1"
class="" class=""