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

showing and hiding of ultrawidify UI

Browse Source
This commit is contained in:
Tamius Han 2022-06-11 15:40:36 +02:00
parent 320d35d9e5
commit 53ed81fa81
2 changed files with 73 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/csui/PlayerUiBase.vue
View File

@ -1,8 +1,20 @@
<template> <template>
<div class="uw-hover uv-hover-trigger-region uw-clickable"> <div
TEST CONTENT v-if="uwTriggerZoneVisible"
class="uw-hover uv-hover-trigger-region uw-clickable"
:style="uwTriggerRegionConf"
@mouseenter="showUwWindow"
>
<h1>Aspect ratio controls</h1>
<div>Hover to activate</div>
</div> </div>
<div class="popup-panel flex flex-column uw-clickable"> <div
v-if="uwWindowVisible"
class="popup-panel flex flex-column uw-clickable"
:class="{'fade-out': uwWindowFadeOut}"
@mouseenter="cancelUwWindowHide"
@mouseleave="hideUwWindow"
>
<div class="popup-window-header"> <div class="popup-window-header">
<div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div> <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
<div class="site-support-info"> <div class="site-support-info">
@ -121,6 +133,21 @@ export default {
}, },
data() { data() {
return { return {
uwTriggerZoneVisible: false,
uwTriggerZoneTimeout: undefined,
uwTriggerRegionConf: {
left: "10%",
top: "10%",
height: "30%",
width: "30%",
maxWidth: "24rem",
maxHeight: "13.37rem",
},
uwWindowFadeOut: false,
uwWindowCloseTimeout: undefined,
uwWindowVisible: false,
// component properties // component properties
settings: {}, settings: {},
BrowserDetect: BrowserDetect, BrowserDetect: BrowserDetect,
@ -258,6 +285,17 @@ export default {
} }
this.lastProbeTs = eventData.ts; this.lastProbeTs = eventData.ts;
// show ultrawidify trigger zone and set it to vanish after 250ms
// but don't show the trigger zone behind an active popup
if (! this.uwWindowVisible) {
this.uwTriggerZoneVisible = true;
clearTimeout(this.uwTriggerZoneTimeout);
this.uwTriggerZoneTimeout = setTimeout(
() => this.uwTriggerZoneVisible = false,
250
)
}
/* we check if our mouse is hovering over an element. /* we check if our mouse is hovering over an element.
* *
* gentleman's agreement: elements with uw-clickable inside the iframe will * gentleman's agreement: elements with uw-clickable inside the iframe will
@ -290,6 +328,22 @@ export default {
); );
}, },
showUwWindow() {
this.uwWindowFadeOut = false;
this.uwWindowVisible = true;
this.uwTriggerZoneVisible = false;
},
hideUwWindow() {
this.uwWindowCloseTimeout = setTimeout(() => this.uwWindowVisible = false, 1100);
this.uwWindowFadeOut = true;
},
cancelUwWindowHide() {
this.uwWindowFadeOut = false;
clearTimeout(this.uwWindowCloseTimeout);
},
handleBusTunnelIn(payload) { handleBusTunnelIn(payload) {
this.eventBus.send(payload.action, payload.config); this.eventBus.send(payload.action, payload.config);
}, },
@ -399,17 +453,19 @@ export default {
.uw-hover { .uw-hover {
position: absolute; position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
color: #fff;
background-color: #000;
z-index: 999999999999999999; z-index: 999999999999999999;
} }
.uw-hover:hover {
background-color: #f00; .uv-hover-trigger-region {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 0.5rem dashed #fff;
color: #fff;
backdrop-filter: blur(0.5rem) brightness(0.5);
} }
.popup-panel { .popup-panel {
@ -434,6 +490,12 @@ export default {
backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
opacity: 1;
&.fade-out {
opacity: 0;
transition: opacity 1s;
}
.popup-window-header { .popup-window-header {
padding: 1rem; padding: 1rem;
background-color: rgba(5,5,5, 0.75); background-color: rgba(5,5,5, 0.75);

1
src/csui/csui.html
View File

@ -9,7 +9,6 @@
<% } %> <% } %>
</head> </head>
<body class="uw-ultrawidify-container-root"> <body class="uw-ultrawidify-container-root">
<div stye="color: #fff; background: #000;">it works!</div>
<div id="app"></div> <div id="app"></div>
<script src="csui.js"></script> <script src="csui.js"></script>
</body> </body>