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

Update popup appearance

Browse Source
This commit is contained in:
Tamius Han 2025-04-26 23:27:09 +02:00
parent b974111eb4
commit adedfec1d0
12 changed files with 225 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/csui/Popup.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="popup-panel"> <div class="popup-panel" style="height: 100vh">
<!-- <!--
NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
extension is being displayed in a normal or a small/overflow popup breaks the popup extension is being displayed in a normal or a small/overflow popup breaks the popup
@ -10,6 +10,7 @@
further than that. further than that.
--> -->
<div v-if="settingsInitialized" <div v-if="settingsInitialized"
style="height: 100vh"
class="popup flex flex-col no-overflow" class="popup flex flex-col no-overflow"
:class="{'popup-chrome': ! BrowserDetect?.firefox}" :class="{'popup-chrome': ! BrowserDetect?.firefox}"
> >
@ -78,7 +79,7 @@
</div> </div>
<!-- CONTENT --> <!-- CONTENT -->
<div class="scrollable" style="flex: 7 7; padding: 1rem;"> <div class="scrollable window-content" style="flex: 7 7; padding: 1rem;">
<template v-if="settings && siteSettings"> <template v-if="settings && siteSettings">
<PopupVideoSettings <PopupVideoSettings
v-if="selectedTab === 'videoSettings'" v-if="selectedTab === 'videoSettings'"
@ -86,14 +87,6 @@
:eventBus="eventBus" :eventBus="eventBus"
:siteSettings="siteSettings" :siteSettings="siteSettings"
></PopupVideoSettings> ></PopupVideoSettings>
<!-- <PlayerDetectionPanel
v-if="selectedTab === 'playerDetection'"
:settings="settings"
:eventBus="eventBus"
:siteSettings="siteSettings"
:site="site.host"
>
</PlayerDetectionPanel> -->
<BaseExtensionSettings <BaseExtensionSettings
v-if="selectedTab === 'extensionSettings'" v-if="selectedTab === 'extensionSettings'"
:settings="settings" :settings="settings"
@ -610,4 +603,10 @@ pre {
h1 { h1 {
margin: 0; padding: 0; font-weight: 400; font-size:24px; margin: 0; padding: 0; font-weight: 400; font-size:24px;
} }
.window-content {
height: 100%;
width: 100%;
overflow: auto;
}
</style> </style>

6
src/csui/csui-popup.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" style="position: relative"> <html lang="en" style="position: relative; height: 600px">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Title</title>
@ -10,9 +10,9 @@
<% } %> <% } %>
</head> </head>
<body <body
style="width: 100%; height: 100%; overflow-x: hidden; min-width: 750px" style="width: 100%; height: 100vh; overflow-x: hidden; min-width: 750px;"
> >
<div id="app"> <div id="app" style="max-height: 100vh;">
</div> </div>
<script src="csui-popup.js"></script> <script src="csui-popup.js"></script>

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

@ -1,5 +1,5 @@
<template> <template>
<div class="alignment-box"> <div class="alignment-box" :class="{large: large}">
<div <div
class="col top left" class="col top left"
@click="align(VideoAlignment.Left, VideoAlignment.Top)" @click="align(VideoAlignment.Left, VideoAlignment.Top)"
@ -60,10 +60,10 @@
<script> <script>
import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum'; import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
export default { export default {
props: [ props: [
'eventBus' 'eventBus',
'large',
], ],
data() { data() {
return { return {
@ -89,6 +89,14 @@ export default {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.5rem; gap: 0.5rem;
&.large {
max-width: 15rem;
.col {
width: 4rem;
height: 4rem;
}
}
.col { .col {
display: flex; display: flex;

2
src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-row w-full h-full"> <div class="flex flex-row w-full h-full">
<div class="flex flex-col"> <div class="flex flex-col w-full">
<!-- TAB ROW --> <!-- TAB ROW -->
<div class="flex flex-row"> <div class="flex flex-row">

1
src/csui/src/PlayerUiPanels/ChangelogPanel.vue
View File

@ -11,6 +11,7 @@
<li>Keyboard zoom now works</li> <li>Keyboard zoom now works</li>
<li><code>www.youtube-nocookie.com</code> has been added to the "officially supported" list</li> <li><code>www.youtube-nocookie.com</code> has been added to the "officially supported" list</li>
<li>Fixed the bug where UI would sometimes refuse to stay hidden</li> <li>Fixed the bug where UI would sometimes refuse to stay hidden</li>
<li>New experimental zoom options</li>
</ul> </ul>
</div> </div>
<div style="width: 1rem; height: 0px;"></div> <div style="width: 1rem; height: 0px;"></div>

11
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
View File

@ -3,8 +3,12 @@
<ShortcutButton <ShortcutButton
v-for="(command, index) of settings?.active.commands.crop" v-for="(command, index) of settings?.active.commands.crop"
class="flex b3 button" class="flex button"
:class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}" :class="{
active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command),
'b3-compact': compact,
b3: !compact
}"
:key="index" :key="index"
:label="command.label" :label="command.label"
:shortcut="getKeyboardShortcutLabel(command)" :shortcut="getKeyboardShortcutLabel(command)"
@ -170,7 +174,8 @@ export default {
'siteSettings', 'siteSettings',
'eventBus', 'eventBus',
'isEditing', 'isEditing',
'allowSettingSiteDefault' 'allowSettingSiteDefault',
'compact',
], ],
computed: { computed: {
siteDefaultCrop() { siteDefaultCrop() {

8
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
View File

@ -3,7 +3,10 @@
<ShortcutButton <ShortcutButton
v-for="(command, index) of settings?.active.commands.stretch" v-for="(command, index) of settings?.active.commands.stretch"
class="b3 button" class="b3 button"
:class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}" :class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command),
'b3-compact': compact,
b3: !compact
}"
:key="index" :key="index"
:label="command.label" :label="command.label"
:shortcut="getKeyboardShortcutLabel(command)" :shortcut="getKeyboardShortcutLabel(command)"
@ -184,7 +187,8 @@ export default {
'siteSettings', 'siteSettings',
'eventBus', 'eventBus',
'isEditing', 'isEditing',
'allowSettingSiteDefault' 'allowSettingSiteDefault',
'compact',
], ],
components: { components: {
ShortcutButton, ShortcutButton,

168
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
View File

@ -5,8 +5,11 @@
<ShortcutButton <ShortcutButton
v-for="(command, index) of settings?.active.commands.zoom" v-for="(command, index) of settings?.active.commands.zoom"
class="flex b3 button" class="flex button"
:class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}" :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command),
'b3-compact': compact,
b3: !compact
}"
:key="index" :key="index"
:label="command.label" :label="command.label"
:shortcut="getKeyboardShortcutLabel(command)" :shortcut="getKeyboardShortcutLabel(command)"
@ -131,80 +134,81 @@
min, max and value need to be implemented in js as this slider min, max and value need to be implemented in js as this slider
should use logarithmic scale should use logarithmic scale
--> -->
<div class="flex flex-row flex-end"> <div class="flex flex-row w-full" style="margin-top: 0.66rem">
<Button <div style="position:relative;" class="grow">
v-if="zoomAspectRatioLocked" <template v-if="zoomAspectRatioLocked">
label="Unlock aspect ratio" <div class="slider-label">
icon="lock-open" Zoom: {{getZoomForDisplay('x')}}
:fixedWidth="true" </div>
@click="toggleZoomAr()" <input id="_input_zoom_slider"
> class="input-slider"
</Button> type="range"
<Button step="any"
v-else min="-1"
label="Lock aspect ratio" max="3"
icon="lock" :value="zoom.x"
:fixedWidth="true" @input="changeZoom($event.target.value)"
@click="toggleZoomAr()" />
> </template>
</Button> <template v-else>
<div class="slider-label">Horizontal zoom: {{getZoomForDisplay('x')}}</div>
<input id="_input_zoom_slider"
class="input-slider"
type="range"
step="any"
min="-1"
max="4"
:value="zoom.x"
@input="changeZoom($event.target.value, 'x')"
/>
<div class="slider-label">Vertical zoom: {{getZoomForDisplay('y')}}</div>
<input id="_input_zoom_slider_2"
class="input-slider"
type="range"
step="any"
min="-1"
max="3"
:value="zoom.y"
@input="changeZoom($event.target.value, 'y')"
/>
</template>
</div>
<div class="flex flex-row items-center justify-center" style="padding-left: 1rem">
<Button
v-if="zoomAspectRatioLocked"
icon="lock"
:iconSize="16"
:fixedWidth="true"
:noPad="true"
@click="toggleZoomAr()"
>
</Button>
<Button
v-else
icon="lock-open-variant"
:iconSize="16"
:fixedWidth="true"
:noPad="true"
@click="toggleZoomAr()"
>
</Button>
<Button
icon="restore"
:iconSize="16"
:noPad="true"
@click="resetZoom()"
></Button>
</div>
</div> </div>
<template v-if="zoomAspectRatioLocked">
<input id="_input_zoom_slider"
class="input-slider"
type="range"
step="any"
min="-1"
max="3"
:value="zoom.x"
@input="changeZoom($event.target.value)"
/>
<div style="overflow: auto" class="flex flex-row">
<div class="flex flex-grow medium-small x-pad-1em">
Zoom: {{getZoomForDisplay('x')}}
</div>
<div class="flex flex-nogrow flex-noshrink medium-small">
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
</div>
</div>
</template>
<template v-else>
<div>Horizontal zoom</div>
<input id="_input_zoom_slider"
class="input-slider"
type="range"
step="any"
min="-1"
max="4"
:value="zoom.x"
@input="changeZoom($event.target.value, 'x')"
/>
<div>Vertical zoom</div>
<input id="_input_zoom_slider"
class="input-slider"
type="range"
step="any"
min="-1"
max="3"
:value="zoom.y"
@input="changeZoom($event.target.value, 'y')"
/>
<div style="overflow: auto" class="flex flex-row">
<div class="flex flex-grow medium-small x-pad-1em">
Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
</div>
<div class="flex flex-nogrow flex-noshrink medium-small">
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
</div>
</div>
</template>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import Button from '@csui/src/components/Button.vue';
import ShortcutButton from '@csui/src/components/ShortcutButton.vue'; import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
import EditShortcutButton from '@csui/src/components/EditShortcutButton'; import EditShortcutButton from '@csui/src/components/EditShortcutButton';
import EditModeMixin from '@csui/src/utils/EditModeMixin'; import EditModeMixin from '@csui/src/utils/EditModeMixin';
@ -214,6 +218,7 @@ import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
export default { export default {
components: { components: {
Button,
ShortcutButton, ShortcutButton,
EditShortcutButton, EditShortcutButton,
}, },
@ -246,7 +251,8 @@ export default {
'settings', // required for buttons and actions, which are global 'settings', // required for buttons and actions, which are global
'siteSettings', 'siteSettings',
'eventBus', 'eventBus',
'isEditing' 'isEditing',
'compact',
], ],
created() { created() {
if (this.isEditing) { if (this.isEditing) {
@ -282,8 +288,7 @@ export default {
// this.eventBus.send('set-zoom', {zoom: 1, axis: 'y'}); // this.eventBus.send('set-zoom', {zoom: 1, axis: 'y'});
// this.eventBus.send('set-zoom', {zoom: 1, axis: 'x'}); // this.eventBus.send('set-zoom', {zoom: 1, axis: 'x'});
this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'y'}); this.eventBus?.sendToTunnel('set-zoom', {zoom: 1});
this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'x'});
}, },
changeZoom(newZoom, axis) { changeZoom(newZoom, axis) {
// we store zoom logarithmically on this compnent // we store zoom logarithmically on this compnent
@ -297,10 +302,9 @@ export default {
newZoom = Math.pow(2, newZoom); newZoom = Math.pow(2, newZoom);
if (this.zoomAspectRatioLocked) { if (this.zoomAspectRatioLocked) {
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'y'}); this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom});
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'x'});
} else { } else {
this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'}); this.eventBus?.sendToTunnel('set-zoom', {zoom: {[axis ?? 'x']: newZoom}});
} }
}, },
isActiveZoom(command) { isActiveZoom(command) {
@ -314,3 +318,17 @@ export default {
<style lang="scss" src="../../../../res/css/flex.scss" scoped></style> <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style> <style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style> <style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
<style lang="scss" scoped>
.input-slider {
width: 100%;
box-sizing:border-box;
margin-right: 1rem;
margin-left: 0rem;
}
.slider-label {
margin-bottom: -0.5rem;
color: #aaa;
font-size: 0.75rem;
text-transform: uppercase;
}
</style>

2
src/csui/src/PlayerUiPanels/VideoSettings.vue
View File

@ -38,7 +38,7 @@
<!-- CROP OPTIONS --> <!-- CROP OPTIONS -->
<div v-if="settings" class="sub-panel"> <div v-if="settings" class="sub-panel">
<div class="flex flex-row"> <div class="flex flex-row">
<mdicon name="crop" :size="32" /> <mdicon name="crop" :size="16" />
<h1>Crop video:</h1> <h1>Crop video:</h1>
</div> </div>

11
src/csui/src/components/Button.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<div class="button center-text" <div class="button center-text"
:class="{'setting-selected': selected }" :class="{
'setting-selected': selected,
'no-pad': noPad,
}"
> >
<mdicon v-if="icon" :name="icon" :size="iconSize ?? 24"></mdicon>
<div class="label"> <div class="label">
{{label}} {{label}}
</div> </div>
@ -15,6 +19,8 @@ export default {
selected: Boolean, selected: Boolean,
label: String, label: String,
icon: String, icon: String,
iconSize: Number,
noPad: Boolean
} }
} }
</script> </script>
@ -40,4 +46,7 @@ export default {
} }
} }
.no-pad {
padding: 0.5rem 1rem !important;
}
</style> </style>

104
src/csui/src/popup/panels/PopupVideoSettings.vue
View File

@ -12,61 +12,86 @@
</template> </template>
<div class="flex flex-row"> <div class="flex flex-row">
<mdicon name="crop" :size="24" />&nbsp;&nbsp; <mdicon name="crop" :size="16" />&nbsp;&nbsp;
<h1>Crop video:</h1> <span>CROP</span>
</div> </div>
<div
<CropOptionsPanel style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
style="margin-top: -2rem"
:settings="settings"
:eventBus="eventBus"
:siteSettings="siteSettings"
:isEditing="false"
> >
</CropOptionsPanel> <CropOptionsPanel
:settings="settings"
:eventBus="eventBus"
:siteSettings="siteSettings"
:isEditing="false"
:compact="true"
>
</CropOptionsPanel>
</div>
<div class="flex flex-row"> <div class="flex flex-row">
<mdicon name="crop" :size="24" />&nbsp;&nbsp; <mdicon name="crop" :size="16" />&nbsp;&nbsp;
<h1>Stretch video:</h1> <span>STRETCH</span>
</div>
<div
style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
>
<StretchOptionsPanel
:settings="settings"
:eventBus="eventBus"
:siteSettings="siteSettings"
:isEditing="false"
:compact="true"
></StretchOptionsPanel>
</div> </div>
<StretchOptionsPanel
style="margin-top: -2rem"
:settings="settings"
:eventBus="eventBus"
:siteSettings="siteSettings"
:isEditing="false"
></StretchOptionsPanel>
<div class="flex flex-row"> <div class="flex flex-row">
<mdicon name="crop" :size="24" />&nbsp;&nbsp; <mdicon name="crop" :size="16" />&nbsp;&nbsp;
<h1>Zoom:</h1> <span>ZOOM</span>
</div>
<div
style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
>
<ZoomOptionsPanel
:settings="settings"
:eventBus="eventBus"
:siteSettings="siteSettings"
:isEditing="false"
:compact="true"
>
</ZoomOptionsPanel>
</div> </div>
<ZoomOptionsPanel <div class="flex flex-row">
:settings="settings" <mdicon name="crop" :size="16" />&nbsp;&nbsp;
:eventBus="eventBus" <span>ALIGN</span>
:siteSettings="siteSettings" </div>
:isEditing="false" <div
style="margin-bottom: 0.88rem;"
> >
</ZoomOptionsPanel> <AlignmentOptionsControlComponent
:eventBus="eventBus"
:large="true"
> </AlignmentOptionsControlComponent>
</div>
</div> </div>
</template> </template>
<script> <script>
import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel'; import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'; import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'; import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts'; import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
export default { export default {
data() { components: {
return { CropOptionsPanel,
exec: null, StretchOptionsPanel,
ExtensionMode: ExtensionMode, ZoomOptionsPanel,
}; AlignmentOptionsControlComponent
}, },
mixins: [ mixins: [
@ -76,8 +101,11 @@ export default {
'siteSettings', 'siteSettings',
'eventBus', 'eventBus',
], ],
components: { data() {
CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel return {
exec: null,
ExtensionMode: ExtensionMode,
};
}, },
created() { created() {
this.eventBus.subscribe( this.eventBus.subscribe(

18
src/csui/src/res-common/common.scss
View File

@ -163,6 +163,7 @@ button, .button {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
max-width: 24rem; max-width: 24rem;
min-width: 16rem;
} }
.has-hint { .has-hint {
@ -174,8 +175,15 @@ button, .button {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
min-width: 12px;
max-width: 24rem;
select { select {
background: rgba($blackBg, $hoverTransparentOpacity); background: rgba($blackBg, $hoverTransparentOpacity);
min-width: 12px;
max-width: 100%;
color: #fff; color: #fff;
// border: 0px solid transparent; // border: 0px solid transparent;
border: 1px solid rgba(255, 171, 102, 0.42); border: 1px solid rgba(255, 171, 102, 0.42);
@ -217,9 +225,15 @@ button, .button {
padding-left: 0.33rem; padding-left: 0.33rem;
padding-right: 0.33rem; padding-right: 0.33rem;
} }
.input-slider { .b3-compact {
width: 480px; width: 7rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
} }
// .input-slider {
// width: 480px;
// }
.warning-lite { .warning-lite {
padding-right: 16px; padding-right: 16px;
padding-bottom: 16px; padding-bottom: 16px;