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

push the popup thing a bit further

Browse Source
This commit is contained in:
Tamius Han 2021-10-22 00:30:56 +02:00
parent 6c1d666fdf
commit 268ef7dae3
5 changed files with 198 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/csui/PlayerUiComponent.vue
View File

@ -2,31 +2,74 @@
<div class="uw-hover uv-hover-trigger-region">
TEST CONTENT
</div>
<div class="popup-panel flex flex-row">
<div class="tab-row flex flex-column">
<div class="tab">
todo: icon<br/>
Video options
</div>
<div class="tab">
Autodetection options
</div>
<div class="tab">
Advanced options
</div>
<div class="tab">
Debugging
<div class="popup-panel flex flex-column">
<div>
<div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
<div class="">
Site: {{site}}
<div v-if="siteSupportLevel === 'supported'" class="site-support supported">
<mdicon name="check-decagram" />
<div>Officially supported</div>
</div>
<div v-if="siteSupportLevel === 'community'" class="site-support community">
<mdicon name="handshake" />
<div>Supported through contributions from community.</div>
</div>
<div v-if="siteSupportLevel === 'community'" class="site-support no-support">
<mdicon name="help-circle-outline" />
<div>Not officially supported. Extension will try to fix things, but no promises.</div>
</div>
<div v-if="siteSupportLevel === 'user-added'" class="site-support user-added">
<mdicon name="account" />
<div>Extension follows your personal configuration for this site.</div>
</div>
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
</div>
</div>
<div>
<!-- Panel section -->
<template v-if="settingsInitialized">
<VideoSettings
:settings="settings"
></VideoSettings>
<ResizerDebugPanel :debugData="debugData">
</ResizerDebugPanel>
</template>
<div class="flex flex-row">
<div class="tab-row flex flex-column">
<div class="tab">
<mdicon name="crop" />
Video options
</div>
<div class="tab">
Autodetection options
</div>
<div class="tab">
<mdicon name="cogs" />
Advanced options
</div>
<div class="tab">
<mdicon name="bug-outline" />
Debugging
</div>
</div>
<div class="content flex flex-column">
<!-- autodetection warning -->
<div class="warning-area">
<div class="warning-box">
<div>
<mdicon name="alert" :size="42" />
</div>
<div>
This site uses <a href="https://en.wikipedia.org/wiki/Digital_rights_management" target="_blank">digital rights management</a> solutions that prevent this
extension from automatically detecting aspect ratio. You will have to adjust aspect ratio manually.
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Panel section -->
<template v-if="settingsInitialized">
<VideoSettings
:settings="settings"
></VideoSettings>
<!-- <ResizerDebugPanel :debugData="debugData">
</ResizerDebugPanel> -->
</template>
</div>
</div>
</div>
</div>
</template>
@ -50,6 +93,7 @@ export default {
return {
// component properties
settings: {},
BrowserDetect: BrowserDetect,
settingsInitialized: false,
execAction: new ExecAction(),
logger: null,
@ -125,6 +169,7 @@ export default {
<style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
<style lang="scss" src="../res/css/flex.scss" scoped></style>
<style lang="scss" src="./res-common/common.scss" scoped></style>
<style lang="scss" scoped>
@import '../res/css/uwui-base.scss';
@import '../res/css/colors.scss';
@ -169,11 +214,17 @@ export default {
pointer-events: all !important;
background-color: rgba(0,0,0,0.69);
background-color: rgba(0,0,0,0.50);
color: #fff;
overflow-y: auto;
backdrop-filter: blur(16px) saturate(120%);
.popup-title, .popup-title h1 {
font-size: 48px !important;
}
.tab {
display: block;
height: 42px;

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

@ -1,7 +1,10 @@
<template>
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
<div class="sub-panel">
<h1>Crop video:</h1>
<div class="flex flex-row">
<mdicon name="crop" :size="32" />
<h1>Crop video:</h1>
</div>
<div class="sub-panel-content flex flex-row flex-wrap">
<ShortcutButton v-for="(action, index) of aspectRatioActions"
class="flex b3 flex-grow button"
@ -14,7 +17,10 @@
</div>
</div>
<div class="sub-panel">
<h1>Stretch video:</h1>
<div class="flex flex-row">
<mdicon name="stretch-to-page-outline" :size="32" />
<h1>Stretch video:</h1>
</div>
<div class="flex flex-row flex-wrap">
<ShortcutButton v-for="(action, index) of stretchActions"
class="flex b3 flex-grow button"
@ -27,13 +33,69 @@
</div>
</div>
<div class="sub-panel">
<h1>Manual zoom:</h1>
<div class="flex flex-row flex-wrap">
<div class="flex flex-row">
<mdicon name="magnify-plus-outline" :size="32" />
<h1>Manual zoom:</h1>
</div>
<div class="flex flex-column">
<!--
min, max and value need to be implemented in js as this slider
should use logarithmic scale
-->
<div class="flex flex-row">
<ShortcutButton
class="flex b3 flex-grow button"
label="-5 %"
>
</ShortcutButton>
<ShortcutButton
class="flex b3 flex-grow button"
label="-1 %"
>
</ShortcutButton>
<div class="flex-grow"></div>
<ShortcutButton
class="flex b3 flex-grow button"
label="+1 %"
>
</ShortcutButton>
<ShortcutButton
class="flex b3 flex-grow button"
label="+5 %"
>
</ShortcutButton>
</div>
<input id="_input_zoom_slider"
class="input-slider"
type="range"
step="any"
min="-1"
max="4"
:value="logarithmicZoom"
@input="changeZoom($event.target.value)"
/>
<div style="overflow: auto" class="flex flex-row">
<div class="flex flex-grow medium-small x-pad-1em">
Zoom: {{(zoom * 100).toFixed()}}%
</div>
<div class="flex flex-nogrow flex-noshrink medium-small">
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
</div>
</div>
<div class="m-t-0-33em display-block">
<input id="_input_zoom_site_allow_pan"
type="checkbox"
/>
Pan with mouse
</div>
</div>
</div>
<div class="sub-panel">
<h1>Video alignment:</h1>
<div class="flex flex-row">
<mdicon name="align-horizontal-center" :size="32" />
<h1>Video alignment:</h1>
</div>
<div class="flex flex-row flex-wrap">
</div>
@ -68,15 +130,15 @@ export default {
'cropModePersistence',
],
created() {
this.exec = new ExecAction(this.settings, window.location.hostname, window.ultrawidify);
this.exec = new ExecAction(this.settings, window.location.hostname);
},
components: {
ShortcutButton,
},
computed: {
// logarithmicZoom: function(){
// return Math.log2(this.zoom);
// }
logarithmicZoom: function(){
return Math.log2(this.zoom || 1);
}
},
methods: {
async openOptionsPage() {
@ -100,21 +162,26 @@ export default {
resetZoom() {
this.zoom = 1;
},
changeZoom(nz) {
nz = Math.pow(2, nz);
this.$emit('zoom-change', nz);
// this.exec.exec(
// {cmd: [{action: 'set-zoom', arg: nz}]},
// 'page',
// this.frame
// );
changeZoom(newZoom) {
newZoom = Math.pow(2, newZoom);
this.exec.exec(
{
cmd: [{action: 'set-zoom', arg: newZoom}]
},
'page',
this.frame,
true
);
},
}
}
</script>
<style lang="scss" src="../../res/css/flex.scss" scoped></style>
<style lang="scss" src="../res-common/panels.scss"></style>
<style lang="scss" src="../res-common/panels.scss" scoped></style>
<style lang="scss" src="../res-common/common.scss" scoped></style>
<style lang="scss" scoped>
.b3 {
width: 9rem;

1
src/csui/res-common/_variables.scss Normal file
View File

@ -0,0 +1 @@
$warning-color: #d6ba4a;

33
src/csui/res-common/common.scss Normal file
View File

@ -0,0 +1,33 @@
@import './_variables.scss';
.uw-ultrawidify-container-root {
div, p, span {
font-size: 16px;
}
.warning-box {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid $warning-color;
color: $warning-color;
margin: 0px 16px;
padding: 16px;
font-size: 16;
border-radius: 2px;
*:not(:first-child) {
margin-left: 24px;
}
}
h1, h2, h3 {
font-family: 'Overpass' !important;
font-weight: 100 !important;
}
}

4
src/csui/res-common/panels.scss
View File

@ -1,6 +1,10 @@
.sub-panel {
max-width: 52rem;
margin: 2rem;
h1:not(:first-child) {
margin-left: 16px;
}
}
.sub-panel-content {
margin-top: 1.5rem;