Rework player selector tutorial
This commit is contained in:
parent
ab1efbe9cf
commit
eaf003f5a7
@ -371,6 +371,7 @@ button,
|
|||||||
color: $info-color;
|
color: $info-color;
|
||||||
border: 1px solid $info-color;
|
border: 1px solid $info-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: $info-color;
|
color: $info-color;
|
||||||
padding-left: 35px;
|
padding-left: 35px;
|
||||||
|
|||||||
@ -1,439 +1,300 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex flex-row">
|
<div class="flex flex-row">
|
||||||
<h1>Video player options</h1>
|
<h1>Video player options</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row">
|
<div class="w-full">
|
||||||
<div style="width: 48%">
|
<div v-if="tutorialVisible" class="w-full">
|
||||||
NEW PLAYER SELECTOR
|
<button
|
||||||
<div class="sub-panel-content">
|
class="info-button"
|
||||||
<p>
|
@click="tutorialVisible = false"
|
||||||
You're probably on this page because Ultrawidify doesn't crop the player correctly.
|
>
|
||||||
</p>
|
<mdicon name="arrow-left"></mdicon>
|
||||||
<p>
|
Back
|
||||||
If you hover over the boxes below, the corresponding element will be highlighted with golden outline. Player should be the first element that covers the video player on the page.
|
</button>
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You need to reload the page for changes to take effect.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- <p>
|
<div v-if="tutorialStep == 0" class="flex flex-col w-full justify-center items-center tutorial-step">
|
||||||
<a @click="showAdvancedOptions = !showAdvancedOptions">
|
<h3>1. Start hovering over elements on this list</h3>
|
||||||
<template v-if="showAdvancedOptions">Hide advanced options</template>
|
<div class="flex flex-row w-full flex-wrap tutorial-list">
|
||||||
<template v-else>Show advanced options</template>
|
<div class="card">
|
||||||
</a>
|
<div class="card-text">
|
||||||
</p> -->
|
<p>This list contains all the elements on the webpage that could be a video player.</p>
|
||||||
|
<p>Icons to the left of the list indicate which element is currently selected as the player element, which element the extension thinks to be the player element, and which element should be the player according to manual settings.</p>
|
||||||
|
</div>
|
||||||
|
<img src="/res/img/player-select-demo/uw_player___element-list-1.webp" />
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-text">
|
||||||
|
<p>Move your mouse over the first element on the list, but do not click it.</p>
|
||||||
|
<p>Hovering over elements on the list will highlight parts of the page.</p>
|
||||||
|
</div>
|
||||||
|
<img src="/res/img/player-select-demo/uw_player___element-list-hover.webp" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button @click="tutorialStep = 1">Next</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
|
<div v-if="tutorialStep == 1" class="flex flex-col w-full justify-center items-center tutorial-step">
|
||||||
<div style="display: flex; flex-direction: column">
|
<h3>2. Observe highlight</h3>
|
||||||
<div>
|
|
||||||
<input :checked="playerManualQs"
|
<div class="flex flex-row w-full flex-wrap tutorial-list">
|
||||||
@change="togglePlayerManualQs"
|
<div class="card">
|
||||||
type="checkbox"
|
<div class="card-text">
|
||||||
/>
|
<p>Hovering over the elements will highlight part of the page. Highlighted area should cover the player area.</p>
|
||||||
<div>
|
<p>If the highlighted area covers the player, click the item on the list to select it and reload the page.</p>
|
||||||
Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
|
<p>If more than one element covers the player area, select the first (topmost) one on the list.</p>
|
||||||
<small>If defining multiple selectors, separate them with commas.</small>
|
</div>
|
||||||
|
<img src="/res/img/player-select-demo/uw_player_select___just-right.webp" />
|
||||||
|
|
||||||
|
<div class="icon correct">
|
||||||
|
<mdicon name="check-circle" size="96"></mdicon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-text">
|
||||||
|
<p>If highlight covers more than just the player area, that usually means the correct element is further down the list.</p>
|
||||||
|
<p>Move the mouse cursor down the list of elements, until you encounter the first element that covers the player area.</p>
|
||||||
|
</div>
|
||||||
|
<img src="/res/img/player-select-demo/uw_player_select___too_much.webp" />
|
||||||
|
<div class="icon wrong">
|
||||||
|
<mdicon name="close-circle" size="96"></mdicon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-text">
|
||||||
|
<p>If highlight doesn't cover the whole player area, that usually means the correct element is further down the list.</p>
|
||||||
|
<p>Move your cursor up the list of elements, until you encounter something that highlights the entire player area.</p>
|
||||||
|
<p>If more than one element covers the player area, select the first (topmost) one on the list.</p>
|
||||||
|
</div>
|
||||||
|
<img src="/res/img/player-select-demo/uw_player_select___too_little.webp" />
|
||||||
|
<div class="icon wrong">
|
||||||
|
<mdicon name="close-circle" size="96"></mdicon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button @click="tutorialStep = 0">Previous</button>
|
||||||
|
<button @click="tutorialVisible = false">Done</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div v-else class="w-full">
|
||||||
|
<button
|
||||||
|
class="info-button"
|
||||||
|
@click="showTutorial()"
|
||||||
|
>
|
||||||
|
<mdicon name="help"></mdicon>
|
||||||
|
How do I use this?
|
||||||
|
</button>
|
||||||
|
<div class="w-full flex flex-row" style="margin-top: 1rem;">
|
||||||
|
|
||||||
|
<!-- PLAYER ELEMENT SELECTOR FOR DUMMIES -->
|
||||||
|
<div style="width: 48%">
|
||||||
|
<div class="sub-panel-content">
|
||||||
|
<h2>Simple player selector</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
|
||||||
|
<div style="display: flex; flex-direction: column">
|
||||||
|
<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>
|
</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 style="display: flex; flex-direction: row;">
|
||||||
<div class="element-tree">
|
<div class="element-tree">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
<div class="status-relative">
|
<div class="status-relative">
|
||||||
Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
|
Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
|
||||||
|
|
||||||
<div v-if="showLegend" class="element-symbol-legend">
|
<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 />
|
||||||
<mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
|
<mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
|
||||||
<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>
|
|
||||||
</th>
|
|
||||||
<th>Element</th>
|
|
||||||
<!-- <th>Actions</th> -->
|
|
||||||
<!-- <th>Quick fixes</th> -->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
v-for="(element, index) of elementStack"
|
|
||||||
:key="index"
|
|
||||||
class="element-row"
|
|
||||||
>
|
|
||||||
<td>
|
|
||||||
<div class="status">
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.invalidSize"
|
|
||||||
class="invalid"
|
|
||||||
>
|
|
||||||
<mdicon name="alert-remove" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.autoMatch"
|
|
||||||
class="auto-match"
|
|
||||||
>
|
|
||||||
<mdicon name="refresh-auto" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.qsMatch"
|
|
||||||
class="qs-match"
|
|
||||||
>
|
|
||||||
<mdicon name="crosshairs" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.manualElementByParentIndex"
|
|
||||||
class="parent-offset-match"
|
|
||||||
>
|
|
||||||
<mdicon name="bookmark" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="element.heuristics?.activePlayer"
|
|
||||||
class="activePlayer"
|
|
||||||
>
|
|
||||||
<mdicon name="check-circle" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div
|
|
||||||
class="element-data"
|
|
||||||
|
|
||||||
@mouseover="markElement(index, true)"
|
|
||||||
@mouseleave="markElement(index, false)"
|
|
||||||
|
|
||||||
@click="setPlayer(index)"
|
|
||||||
>
|
|
||||||
<div class="tag">
|
|
||||||
<b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i> @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div v-if="element.classList" class="class-list">
|
|
||||||
<div v-for="cls of element.classList" :key="cls">
|
|
||||||
{{cls}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</th>
|
||||||
</div>
|
<th>Element</th>
|
||||||
</td>
|
<!-- <th>Actions</th> -->
|
||||||
<td>
|
<!-- <th>Quick fixes</th> -->
|
||||||
<div class="flex flex-row">
|
</tr>
|
||||||
<!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
|
</thead>
|
||||||
</div>
|
<tbody>
|
||||||
</td>
|
<tr
|
||||||
<!-- <td>
|
v-for="(element, index) of elementStack"
|
||||||
<div
|
:key="index"
|
||||||
class="css-fixes"
|
class="element-row"
|
||||||
>
|
>
|
||||||
<div style="width: 100%"><b>Quick fixes:</b></div>
|
<td>
|
||||||
<div
|
<div class="status">
|
||||||
class="css-line"
|
<div
|
||||||
:class="{'active': cssStack[index]?.includes('width: 100%;')}"
|
v-if="element.heuristics?.invalidSize"
|
||||||
@click="toggleCssForElement(index, 'width: 100%;')"
|
class="invalid"
|
||||||
>
|
>
|
||||||
Width: 100%
|
<mdicon name="alert-remove" />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="css-line"
|
v-if="element.heuristics?.autoMatch"
|
||||||
:class="{'active': cssStack[index]?.includes('height: 100%;')}"
|
class="auto-match"
|
||||||
@click="toggleCssForElement(index, 'height: 100%;')"
|
>
|
||||||
>
|
<mdicon name="refresh-auto" />
|
||||||
Height: 100%
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
v-if="element.heuristics?.qsMatch"
|
||||||
class="css-line"
|
class="qs-match"
|
||||||
:class="{'active': cssStack[index]?.includes('display: flex;')}"
|
>
|
||||||
@click="toggleCssForElement(index, 'display: flex;')"
|
<mdicon name="crosshairs" />
|
||||||
>
|
</div>
|
||||||
Display: flex
|
<div
|
||||||
</div>
|
v-if="element.heuristics?.manualElementByParentIndex"
|
||||||
<div class="css-line">
|
class="parent-offset-match"
|
||||||
Flex direction:
|
>
|
||||||
<span
|
<mdicon name="bookmark" />
|
||||||
class="css-line-suboption"
|
</div>
|
||||||
:class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
|
<div
|
||||||
@click="toggleCssForElement(index, 'flex-direction', 'row')"
|
v-if="element.heuristics?.activePlayer"
|
||||||
>
|
class="activePlayer"
|
||||||
row
|
>
|
||||||
</span> |
|
<mdicon name="check-circle" />
|
||||||
<span
|
</div>
|
||||||
class="css-line-suboption"
|
</div>
|
||||||
:class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
|
</td>
|
||||||
@click="toggleCssForElement(index, 'flex-direction', 'column')"
|
<td>
|
||||||
>
|
<div
|
||||||
column
|
class="element-data"
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Justify content:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-content: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-content', 'start')"
|
|
||||||
>
|
|
||||||
start
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-content: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-content', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('justify-content: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-content', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Align items:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-items: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-items', 'start')"
|
|
||||||
>
|
|
||||||
start
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-items: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-items', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-items: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-items', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="css-line">
|
@mouseover="markElement(elementStack.length - index - 1, true)"
|
||||||
Justify self:
|
@mouseleave="markElement(elementStack.length - index - 1, false)"
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
@click="setPlayer(elementStack.length - index - 1)"
|
||||||
:class="{'active': cssStack[index]?.includes('justify-self: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'justify-self', 'start')"
|
|
||||||
>
|
>
|
||||||
start
|
<div class="tag">
|
||||||
</span> |
|
<b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i> @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
</div>
|
||||||
:class="{'active': cssStack[index]?.includes('justify-self: center;')}"
|
<div v-if="element.classList" class="class-list">
|
||||||
@click="toggleCssForElement(index, 'justify-self', 'center')"
|
<div v-for="cls of element.classList" :key="cls">
|
||||||
>
|
{{cls}}
|
||||||
center
|
</div>
|
||||||
</span> |
|
</div>
|
||||||
<span
|
</div>
|
||||||
class="css-line-suboption"
|
</td>
|
||||||
:class="{'active': cssStack[index]?.includes('justify-self: end;')}"
|
<td>
|
||||||
@click="toggleCssForElement(index, 'justify-self', 'end')"
|
<div class="flex flex-row">
|
||||||
>
|
</div>
|
||||||
end
|
</td>
|
||||||
</span>
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
<div class="css-line">
|
</table>
|
||||||
Align self:
|
<div class="element-config">
|
||||||
<span
|
</div>
|
||||||
class="css-line-suboption"
|
</div>
|
||||||
:class="{'active': cssStack[index]?.includes('align-self: start;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-self', 'start')"
|
<!-- <div class="css-preview">
|
||||||
>
|
{{cssStack}}
|
||||||
start
|
</div> -->
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-self: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-self', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('align-self: end;')}"
|
|
||||||
@click="toggleCssForElement(index, 'align-self', 'end')"
|
|
||||||
>
|
|
||||||
end
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Text-align:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('text-align: left;')}"
|
|
||||||
@click="toggleCssForElement(index, 'text-align', 'left')"
|
|
||||||
>
|
|
||||||
left
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('text-align: center;')}"
|
|
||||||
@click="toggleCssForElement(index, 'text-align', 'center')"
|
|
||||||
>
|
|
||||||
center
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
|
|
||||||
@click="toggleCssForElement(index, 'text-align', 'right')"
|
|
||||||
>
|
|
||||||
right
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="css-line">
|
|
||||||
Position:
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('position: relative;')}"
|
|
||||||
@click="toggleCssForElement(index, 'position', 'relative')"
|
|
||||||
>
|
|
||||||
relative
|
|
||||||
</span> |
|
|
||||||
<span
|
|
||||||
class="css-line-suboption"
|
|
||||||
:class="{'active': cssStack[index]?.includes('position: absolute;')}"
|
|
||||||
@click="toggleCssForElement(index, 'position', 'absolute')"
|
|
||||||
>
|
|
||||||
absolute
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td> -->
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="element-config">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <div class="css-preview">
|
<!-- ADVANCED OPTIONS -->
|
||||||
{{cssStack}}
|
<div style="width: 48%" v-if="false">
|
||||||
</div> -->
|
<h2>Advanced options</h2>
|
||||||
</div>
|
|
||||||
</div>
|
<pre>{{siteSettings.raw}}</pre>
|
||||||
</div>
|
|
||||||
<div style="width: 48%">
|
<div class="">
|
||||||
<div>EXAMPLE <small style="opacity: 0.5"><br/>ps: i know this ui is shit, no need to tell me</small></div>
|
<h3>Player element</h3>
|
||||||
<div class="demo-images">
|
<div class="field">
|
||||||
<div class="fig1">
|
<div class="label">Manually specify player</div>
|
||||||
<img src="/res/img/player-select-demo/uw_player_select___too_little.webp" />
|
<input type="checkbox" />
|
||||||
<div>If you see this when hovering over the element, you need to select further down the list.</div>
|
|
||||||
</div>
|
|
||||||
<div class="fig2">
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
If you see this when hovering over the element, you're hovering over the correct element.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
In case there's more than one element that covers the entire player and nothing more, select the option that's closest to the top of the list, otherwise in-player UI could break.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
If in-player UI breaks, you can make the settings window appear from the extension popup.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="/res/img/player-select-demo/uw_player_select___just-right.webp" />
|
<div class="field">
|
||||||
</div>
|
<div class="label">Select player by/as:</div>
|
||||||
<div class="fig1">
|
<div class="select">
|
||||||
<img src="/res/img/player-select-demo/uw_player_select___too_much.webp" />
|
<select>
|
||||||
<div>If you see this when hovering over the element, you need to select an element closer to the top of the list.</div>
|
<option>n-th parent of video</option>
|
||||||
|
<option>Query selectors</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Player is n-th parent of video</div>
|
||||||
|
<div class="range-input">
|
||||||
|
<input type="range" min="0" max="100" />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Query selector for player element</div>
|
||||||
|
<div class="input">
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">In full screen, calculate crop based on monitor resolution</div>
|
||||||
|
<input type="checkbox" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Video element</h3>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Select video element automatically</div>
|
||||||
|
<input type="checkbox">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Query selectors</div>
|
||||||
|
<div class="input">
|
||||||
|
<input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Additional styles for video element</div>
|
||||||
|
<div class="input">
|
||||||
|
<textarea></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Additional css for this page</h3>
|
||||||
|
<div class="field">
|
||||||
|
<div class="label">Additional CSS for this page</div>
|
||||||
|
<textarea></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 48%" v-if="false">
|
|
||||||
<h2>Legacy advanced settings</h2>
|
|
||||||
|
|
||||||
<div class="">
|
|
||||||
<h3>Player element</h3>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Manually specify player</div>
|
|
||||||
<input type="checkbox" />
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Select player by/as:</div>
|
|
||||||
<div class="select">
|
|
||||||
<select>
|
|
||||||
<option>n-th parent of video</option>
|
|
||||||
<option>Query selectors</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Player is n-th parent of video</div>
|
|
||||||
<div class="range-input">
|
|
||||||
<input type="range" min="0" max="100" />
|
|
||||||
<input />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Query selector for player element</div>
|
|
||||||
<div class="input">
|
|
||||||
<input />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">In full screen, calculate crop based on monitor resolution</div>
|
|
||||||
<input type="checkbox" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Video element</h3>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Select video element automatically</div>
|
|
||||||
<input type="checkbox">
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Query selectors</div>
|
|
||||||
<div class="input">
|
|
||||||
<input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Additional styles for video element</div>
|
|
||||||
<div class="input">
|
|
||||||
<textarea></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Additional css for this page</h3>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Additional CSS for this page</div>
|
|
||||||
<textarea></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="sub-panel-content">
|
|
||||||
<h2>Advanced settings</h2>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
export default({
|
export default({
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
@ -444,8 +305,12 @@ export default({
|
|||||||
cssStack: [],
|
cssStack: [],
|
||||||
showLegend: false,
|
showLegend: false,
|
||||||
showAdvancedOptions: false,
|
showAdvancedOptions: false,
|
||||||
|
tutorialVisible: false,
|
||||||
|
tutorialStep: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
mixins: [],
|
mixins: [],
|
||||||
props: [
|
props: [
|
||||||
'siteSettings',
|
'siteSettings',
|
||||||
@ -471,6 +336,10 @@ export default({
|
|||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
|
showTutorial() {
|
||||||
|
this.tutorialVisible = true;
|
||||||
|
this.tutorialStep = 0;
|
||||||
|
},
|
||||||
getPlayerTree() {
|
getPlayerTree() {
|
||||||
if (this.isPopup) {
|
if (this.isPopup) {
|
||||||
this.eventBus.send('get-player-tree');
|
this.eventBus.send('get-player-tree');
|
||||||
@ -480,7 +349,7 @@ export default({
|
|||||||
},
|
},
|
||||||
handleElementStack(configBroadcast) {
|
handleElementStack(configBroadcast) {
|
||||||
if (configBroadcast.type === 'player-tree') {
|
if (configBroadcast.type === 'player-tree') {
|
||||||
this.elementStack = configBroadcast.config;
|
this.elementStack = configBroadcast.config.reverse();
|
||||||
this.$nextTick( () => this.$forceUpdate() );
|
this.$nextTick( () => this.$forceUpdate() );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -553,10 +422,95 @@ export default({
|
|||||||
<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
|
<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
|
||||||
<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
|
<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@csui/res/css/colors.scss";
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-button {
|
||||||
|
color: $info-color;
|
||||||
|
border: 1px solid $info-color;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($info-color, 0.25);
|
||||||
|
color: #eee;
|
||||||
|
border: 1px solid $info-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorial-step {
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #fa6;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorial-list {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
max-width: 32rem;
|
||||||
|
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: #121110dd;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
color: #aaa;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
padding: 0rem;
|
||||||
|
transform: translate(-50%, 50%);
|
||||||
|
|
||||||
|
background-color: #000;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.wrong {
|
||||||
|
color: #dc3c14;
|
||||||
|
}
|
||||||
|
&.correct {
|
||||||
|
color: rgb(102, 241, 218);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #000 !important;
|
||||||
|
background-color: #fa6 !important;
|
||||||
|
border-radius: 0.5rem !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #fa6 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.element-tree {
|
.element-tree {
|
||||||
.element-row {
|
.element-row {
|
||||||
// display: flex;
|
// display: flex;
|
||||||
|
|||||||
BIN
src/res/img/player-select-demo/uw_player___element-list-1.webp
Normal file
BIN
src/res/img/player-select-demo/uw_player___element-list-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue
Block a user