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

Rework player selector tutorial

Browse Source
This commit is contained in:
Tamius Han 2025-07-16 22:26:25 +02:00
parent ab1efbe9cf
commit eaf003f5a7
4 changed files with 367 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/csui/res/css/common.scss
View File

@ -371,6 +371,7 @@ button,
color: $info-color;
border: 1px solid $info-color;
}
.info {
color: $info-color;
padding-left: 35px;

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

@ -1,28 +1,100 @@
<template>
<div class="flex flex-col">
<div class="flex flex-col w-full">
<div class="flex flex-row">
<h1>Video player options</h1>
</div>
<div class="flex flex-row">
<div style="width: 48%">
NEW PLAYER SELECTOR
<div class="sub-panel-content">
<p>
You're probably on this page because Ultrawidify doesn't crop the player correctly.
</p>
<p>
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.
</p>
<p>
You need to reload the page for changes to take effect.
</p>
<div class="w-full">
<div v-if="tutorialVisible" class="w-full">
<button
class="info-button"
@click="tutorialVisible = false"
>
<mdicon name="arrow-left"></mdicon>
Back
</button>
<div v-if="tutorialStep == 0" class="flex flex-col w-full justify-center items-center tutorial-step">
<h3>1. Start hovering over elements on this list</h3>
<div class="flex flex-row w-full flex-wrap tutorial-list">
<div class="card">
<div class="card-text">
<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="tutorialStep == 1" class="flex flex-col w-full justify-center items-center tutorial-step">
<h3>2. Observe highlight</h3>
<div class="flex flex-row w-full flex-wrap tutorial-list">
<div class="card">
<div class="card-text">
<p>Hovering over the elements will highlight part of the page. Highlighted area should cover the player area.</p>
<p>If the highlighted area covers the player, click the item on the list to select it and reload the page.</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___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>
<!-- <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">
@ -118,10 +190,10 @@
<div
class="element-data"
@mouseover="markElement(index, true)"
@mouseleave="markElement(index, false)"
@mouseover="markElement(elementStack.length - index - 1, true)"
@mouseleave="markElement(elementStack.length - index - 1, false)"
@click="setPlayer(index)"
@click="setPlayer(elementStack.length - index - 1)"
>
<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>
@ -136,192 +208,8 @@
</td>
<td>
<div class="flex flex-row">
<!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
</div>
</td>
<!-- <td>
<div
class="css-fixes"
>
<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%;')"
>
Width: 100%
</div>
<div
class="css-line"
:class="{'active': cssStack[index]?.includes('height: 100%;')}"
@click="toggleCssForElement(index, 'height: 100%;')"
>
Height: 100%
</div>
<div
class="css-line"
:class="{'active': cssStack[index]?.includes('display: flex;')}"
@click="toggleCssForElement(index, 'display: flex;')"
>
Display: flex
</div>
<div class="css-line">
Flex direction:
<span
class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
@click="toggleCssForElement(index, 'flex-direction', 'row')"
>
row
</span> |
<span
class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
@click="toggleCssForElement(index, 'flex-direction', 'column')"
>
column
</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">
Justify self:
<span
class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-self: start;')}"
@click="toggleCssForElement(index, 'justify-self', 'start')"
>
start
</span> |
<span
class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-self: center;')}"
@click="toggleCssForElement(index, 'justify-self', 'center')"
>
center
</span> |
<span
class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('justify-self: end;')}"
@click="toggleCssForElement(index, 'justify-self', 'end')"
>
end
</span>
</div>
<div class="css-line">
Align self:
<span
class="css-line-suboption"
:class="{'active': cssStack[index]?.includes('align-self: start;')}"
@click="toggleCssForElement(index, 'align-self', 'start')"
>
start
</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>
@ -335,35 +223,12 @@
</div>
</div>
</div>
<div style="width: 48%">
<div>EXAMPLE <small style="opacity: 0.5"><br/>ps: i know this ui is shit, no need to tell me</small></div>
<div class="demo-images">
<div class="fig1">
<img src="/res/img/player-select-demo/uw_player_select___too_little.webp" />
<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>
<img src="/res/img/player-select-demo/uw_player_select___just-right.webp" />
</div>
<div class="fig1">
<img src="/res/img/player-select-demo/uw_player_select___too_much.webp" />
<div>If you see this when hovering over the element, you need to select an element closer to the top of the list.</div>
</div>
</div>
</div>
<!-- ADVANCED OPTIONS -->
<div style="width: 48%" v-if="false">
<h2>Legacy advanced settings</h2>
<h2>Advanced options</h2>
<pre>{{siteSettings.raw}}</pre>
<div class="">
<h3>Player element</h3>
@ -424,16 +289,12 @@
</div>
</div>
<!-- <div class="sub-panel-content">
<h2>Advanced settings</h2>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default({
components: {
@ -444,8 +305,12 @@ export default({
cssStack: [],
showLegend: false,
showAdvancedOptions: false,
tutorialVisible: false,
tutorialStep: 0
};
},
computed: {
},
mixins: [],
props: [
'siteSettings',
@ -471,6 +336,10 @@ export default({
},
computed: {},
methods: {
showTutorial() {
this.tutorialVisible = true;
this.tutorialStep = 0;
},
getPlayerTree() {
if (this.isPopup) {
this.eventBus.send('get-player-tree');
@ -480,7 +349,7 @@ export default({
},
handleElementStack(configBroadcast) {
if (configBroadcast.type === 'player-tree') {
this.elementStack = configBroadcast.config;
this.elementStack = configBroadcast.config.reverse();
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/common.scss" scoped module></style>
<style lang="scss" scoped>
@import "@csui/res/css/colors.scss";
p {
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-row {
// display: flex;

BIN
src/res/img/player-select-demo/uw_player___element-list-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/res/img/player-select-demo/uw_player___element-list-hover.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB