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

Make the context menu slightly less rudimentary

Browse Source
This commit is contained in:
Tamius Han 2024-10-24 01:47:46 +02:00
parent 54c44b4379
commit 903f356252
6 changed files with 284 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/csui/PlayerOverlay.vue
View File

@ -1,18 +1,10 @@
<template>
<div
v-if="settingsInitialized && uwTriggerZoneVisible && !isGlobal"
class="uw-hover uv-hover-trigger-region uw-clickable"
:style="uwTriggerRegionConf"
@mouseenter="showUwWindow"
v-if="contextMenuActive || settingsInitialized && uwTriggerZoneVisible && !isGlobal"
class="context-spawn uw-clickable"
@mouseenter="preventContextMenuHide()"
@mouseleave="allowContextMenuHide()"
>
<!-- <h1>Aspect ratio controls</h1>
<div>Hover to activate</div> -->
[ |> ]
</div>
<div class="context-spawn uw-clickable">
<GhettoContextMenu alignment="right">
<template v-slot:activator>
@ -22,28 +14,43 @@
</template>
<slot>
<div class="menu-width">
<GhettoContextMenuItem :disableHover="true" :css="{'ard-blocked': true}">
<div v-if="statusFlags.hasDrm || true" class="smallcaps text-center">
<b>NOTE:</b><br/>
<b>Autodetection<br/>blocked by website</b>
</div>
<div>
</div>
</GhettoContextMenuItem>
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Crop
</div>
Crop
</template>
<slot>
<div>MEnu item 1</div>
<div>Menu item 2</div>
<div>Menu item 3</div>
<GhettoContextMenuOption
v-for="(command, index) of settings?.active.commands.crop"
:key="index"
:label="command.label"
:shortcut="getKeyboardShortcutLabel(command)"
@click="execAction(command)"
>
</GhettoContextMenuOption>
</slot>
</GhettoContextMenu>
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Stretch
</div>
Stretch
</template>
<slot>
<div>Menu item 4</div>
<div>Menu item 5</div>
<div>Menu item 6</div>
<GhettoContextMenuOption
v-for="(command, index) of settings?.active.commands.stretch"
:key="index"
:label="command.label"
:shortcut="getKeyboardShortcutLabel(command)"
@click="execAction(command)"
>
</GhettoContextMenuOption>
</slot>
</GhettoContextMenu>
<GhettoContextMenu alignment="right">
@ -52,9 +59,21 @@
Align
</div>
</template>
<slot>
<GhettoContextMenuItem :disableHover="true" :css="{'reduced-padding': true}">
<AlignmentOptionsControlComponent
:eventBus="eventBus"
>
</AlignmentOptionsControlComponent>
</GhettoContextMenuItem>
</slot>
</GhettoContextMenu>
<button @click="showUiWindow()">Extension settings</button>
<button @click="showUiWindow()">Not working?</button>
<GhettoContextMenuOption
@click="showUwWindow()"
label="Extension settings"
>
</GhettoContextMenuOption>
<button @click="showUwWindow()">Not working?</button>
</div>
</slot>
</GhettoContextMenu>
@ -65,8 +84,6 @@
v-if="settingsInitialized && uwWindowVisible"
class="uw-window flex flex-col uw-clickable"
:class="{'fade-out': uwWindowFadeOut}"
@mouseenter="cancelUwWindowHide"
@mouseleave="hideUwWindow()"
>
<PlayerUIWindow
:settings="settings"
@ -83,19 +100,29 @@
<script>
import PlayerUIWindow from './src/PlayerUIWindow.vue';
import GhettoContextMenu from './src/components/GhettoContextMenu.vue';
import GhettoContextMenuItem from './src/components/GhettoContextMenuItem.vue';
import GhettoContextMenuOption from './src/components/GhettoContextMenuOption.vue';
import AlignmentOptionsControlComponent from './src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
import BrowserDetect from '../ext/conf/BrowserDetect';
import Logger from '../ext/lib/Logger';
import Settings from '../ext/lib/Settings';
import EventBus from '../ext/lib/EventBus';
import UIProbeMixin from './src/utils/UIProbeMixin';
import KeyboardShortcutParserMixin from './src/utils/KeyboardShortcutParserMixin';
import CommsMixin from './src/utils/CommsMixin';
export default {
components: {
PlayerUIWindow,
GhettoContextMenu
GhettoContextMenu,
GhettoContextMenuItem,
GhettoContextMenuOption,
AlignmentOptionsControlComponent,
},
mixins: [
UIProbeMixin
UIProbeMixin,
KeyboardShortcutParserMixin,
CommsMixin
],
data() {
return {
@ -132,6 +159,8 @@ export default {
isGlobal: true,
disabled: false,
contextMenuActive: false,
uiVisible: true,
debugData: {
resizer: {},
@ -294,6 +323,15 @@ export default {
);
},
preventContextMenuHide() {
console.log('entered context menu ...');
this.contextMenuActive = true;
},
allowContextMenuHide() {
console.log('exited context menu ...');
this.contextMenuActive = false;
},
showUwWindow() {
this.uwWindowFadeOut = false;
this.uwWindowVisible = true;
@ -343,7 +381,12 @@ export default {
}
}
</script>
<style lang="scss">
.ard-blocked {
color: rgb(219, 125, 48) !important;
background-color: rgba(0,0,0,0.85) !important;
}
</style>
<style lang="scss" scoped>
@import 'res/css/uwui-base.scss';
@import 'res/css/colors.scss';
@ -352,12 +395,15 @@ export default {
@import 'res/css/common.scss';
@import './src/res-common/_variables';
.uw-hover {
position: absolute;
z-index: 999999999999999999;
}
.reduced-padding {
padding: 1rem !important;
}
.uv-hover-trigger-region {
display: flex;
flex-direction: column;
@ -394,6 +440,14 @@ export default {
}
}
.gib-bg {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px) saturate(120%);
width: fit-content;
block-size: fit-content;
}
.context-spawn {
position: absolute;
@ -411,14 +465,14 @@ export default {
color: #fff;
.context-item {
font-size: .95rem;
padding: 1rem 1.6rem;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px) saturate(120%);
// .context-item {
// font-size: .95rem;
// padding: 1rem 1.6rem;
// background-color: rgba(0, 0, 0, 0.5);
// backdrop-filter: blur(16px) saturate(120%);
white-space: nowrap;
}
// white-space: nowrap;
// }
}
</style>

10
src/csui/src/PlayerUIWindow.vue
View File

@ -105,13 +105,13 @@
<div class="flex flex-row panel-content">
<!-- Panel section -->
<VideoSettings
<!-- <VideoSettings
v-if="selectedTab === 'videoSettings'"
:settings="settings"
:siteSettings="siteSettings"
:eventBus="eventBus"
:site="site"
></VideoSettings>
></VideoSettings> -->
<PlayerDetectionPanel
v-if="selectedTab === 'playerDetection'"
:siteSettings="siteSettings"
@ -180,16 +180,16 @@ export default {
},
tabs: [
{id: 'videoSettings', label: 'Video settings', icon: 'crop'},
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
// {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
{id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
// {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
// {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
// {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
{id: 'changelog', label: 'What\'s new', icon: 'information-box-outline' },
{id: 'about', label: 'About', icon: 'star-four-points-circle'}
],
selectedTab: 'videoSettings',
selectedTab: 'extensionSettings',
BrowserDetect: BrowserDetect,
preventClose: false,
siteSettings: null,

128
src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
View File

@ -1,64 +1,58 @@
<template>
<div class="alignment-box">
<div class="row">
<div
class="col top left"
@click="align(VideoAlignment.Left, VideoAlignment.Top)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col top center"
@click="align(VideoAlignment.Center, VideoAlignment.Top)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col top right"
@click="align(VideoAlignment.Right, VideoAlignment.Top)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col top left"
@click="align(VideoAlignment.Left, VideoAlignment.Top)"
>
<div class="alignment-ui"></div>
</div>
<div class="row">
<div
class="col ycenter left"
@click="align(VideoAlignment.Left, VideoAlignment.Center)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col ycenter center"
@click="align(VideoAlignment.Center, VideoAlignment.Center)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col ycenter right"
@click="align(VideoAlignment.Right, VideoAlignment.Center)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col top center"
@click="align(VideoAlignment.Center, VideoAlignment.Top)"
>
<div class="alignment-ui"></div>
</div>
<div class="row">
<div
class="col bottom left"
@click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col bottom center"
@click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col bottom right"
@click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col top right"
@click="align(VideoAlignment.Right, VideoAlignment.Top)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col ycenter left"
@click="align(VideoAlignment.Left, VideoAlignment.Center)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col ycenter center"
@click="align(VideoAlignment.Center, VideoAlignment.Center)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col ycenter right"
@click="align(VideoAlignment.Right, VideoAlignment.Center)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col bottom left"
@click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col bottom center"
@click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
>
<div class="alignment-ui"></div>
</div>
<div
class="col bottom right"
@click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
>
<div class="alignment-ui"></div>
</div>
</div>
</template>
@ -87,23 +81,16 @@ export default {
<style lang="scss" scoped module>
.alignment-box {
aspect-ratio: 1;
width: 100%;
min-width: 40px;
max-width: 80px;
// width: 100%;
// min-width: 40px;
// max-width: 80px;
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
.row {
flex: 0 0 33%;
display: flex;
flex-direction: row;
}
.col {
flex: 0 0 33%;
display: flex;
align-items: center;
justify-content: center;
@ -111,7 +98,6 @@ export default {
background-color: rgba(0,0,0,0.25);
cursor: pointer;
margin: 0.125rem;
padding: 0.5rem;
width: 1.5rem;
height: 1.5rem;

78
src/csui/src/components/GhettoContextMenu.vue
View File

@ -1,28 +1,37 @@
<template>
<div class="context-container" @mouseleave="hideContextMenu()">
<div class="activator"
<GhettoContextMenuItem
class="activator"
:css="{
'expand-left': alignment === 'left',
'expand-right': alignment === 'right',
}"
@click="showContextMenu()"
@mouseenter="showContextMenu()"
>
<slot name="activator"></slot>
</GhettoContextMenuItem>
<div
v-if="contextMenuVisible"
class="context-menu"
:class="{
'menu-left': alignment === 'left',
'menu-right': alignment === 'right'
}"
@mouseleave="hideContextMenu()"
>
<slot></slot>
</div>
<div
v-if="contextMenuVisible"
class="context-menu"
:class="{
'menu-left': alignment === 'left',
'menu-right': alignment !== 'left'
}"
@mouseleave="hideContextMenu()"
>
<slot></slot>
</div>
</div>
</template>
<script>
import GhettoContextMenuItem from './GhettoContextMenuItem.vue';
export default {
components: {
GhettoContextMenuItem,
},
props: {
alignment: String,
},
@ -40,12 +49,12 @@ export default {
hideContextMenu() {
this.contextMenuHideTimeout = setTimeout( () => {
this.contextMenuVisible = false;
}, 250);
}, 50);
}
}
}
</script>
<style>
<style lang="scss" scoped>
.context-container {
position: relative;
}
@ -67,5 +76,44 @@ export default {
.menu-right {
left: 100%;
}
</style>
<style lang="scss">
.activator {
position: relative;
padding: 1rem 1.6rem;
font-size: .95rem;
padding: 1rem 1.6rem;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px) saturate(120%);
white-space: nowrap;
&:hover {
background-color: rgba(255, 128, 64, 0.5);
}
&.expand-left {
padding-left: 2.2rem;
}
&.expand-right {
padding-right: 2.2rem;
}
&.expand-left::before,
&.expand-right::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0.88rem;
}
&.expand-left::before {
content: '⮜';
left: 0.5rem;
}
&.expand-right::after {
content: '⮞';
right: 0.5rem;
}
}
</style>

45
src/csui/src/components/GhettoContextMenuItem.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div
class="flex flex-col flex-center center-text item"
:class="{
'can-hover': !disableHover,
...(css ? css : {}),
}"
>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
label: String,
shortcut: String,
childAlignment: String,
css: Object,
disableHover: Boolean,
}
}
</script>
<style lang="scss" scoped>
.item {
font-size: .95rem;
font-family: 'Overpass';
padding: 1rem 1.6rem;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px) saturate(120%);
white-space: nowrap;
&.can-hover:hover {
background-color: rgba(0,0,0,0.8);
border-bottom: 1px solid #fa6;
}
display: flex;
flex-direction: column;
}
</style>

21
src/csui/src/components/GhettoContextMenuOption.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<GhettoContextMenuItem>
{{label}} {{shortcut ? `(${shortcut})` : ''}}
</GhettoContextMenuItem>
</div>
</template>
<script>
import GhettoContextMenuItem from './GhettoContextMenuItem.vue';
export default {
components: {
GhettoContextMenuItem,
},
props: {
label: String,
shortcut: String,
}
}
</script>