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

Move 'show in-player UI' to popup header

Browse Source
This commit is contained in:
Tamius Han 2025-03-14 02:46:59 +01:00
parent b0425b37c0
commit 08c86615a0
2 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/csui/Popup.vue
View File

@ -13,28 +13,39 @@
class="popup flex flex-col no-overflow" class="popup flex flex-col no-overflow"
:class="{'popup-chrome': ! BrowserDetect?.firefox}" :class="{'popup-chrome': ! BrowserDetect?.firefox}"
> >
<div class="flex-row flex-nogrow flex-noshrink relative header" <div class="flex flex-col w-full relative header"
> >
<div class="grow shrink"> <div class="flex flex-row w-full" style="height: 42px">
<h1> <h1 class="flex-grow">
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small> <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
</h1> </h1>
<div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row"> <button
class="settings-header-button"
style="align-self: stretch"
@click="showInPlayerUi()"
>
Show settings window
</button>
</div>
<div class="flex flex-row w-full">
<div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row flex-grow items-center">
<div>site: {{site.host}}</div> <div>site: {{site.host}}</div>
<SupportLevelIndicator <SupportLevelIndicator
:siteSupportLevel="siteSupportLevel" :siteSupportLevel="siteSupportLevel"
> >
</SupportLevelIndicator> </SupportLevelIndicator>
</div> </div>
</div>
<div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info"> <!-- Version info -->
Build channel: {{BrowserDetect?.processEnvChannel}} <br/> <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
<label>Version:</label> <br/> <label>Version:</label> <br/>
{{ settings.getExtensionVersion() }} {{ settings.getExtensionVersion() }} (non-stable)
</div> </div>
<div v-else class="version-info"> <div v-else class="version-info">
<label>Version:</label> <br/> <label>Version:</label> <br/>
{{ settings.getExtensionVersion() }} {{ settings.getExtensionVersion() }}
</div>
</div> </div>
</div> </div>
@ -152,10 +163,10 @@ export default {
logger: undefined, logger: undefined,
site: undefined, site: undefined,
siteSettings: undefined, siteSettings: undefined,
selectedTab: 'playerUiCtl', selectedTab: 'videoSettings',
tabs: [ tabs: [
// see this for icons: https://pictogrammers.com/library/mdi/ // see this for icons: https://pictogrammers.com/library/mdi/
{id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'}, // {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
{id: 'videoSettings', label: 'Video settings', icon: 'crop'}, {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
// {id: 'playerDetection', label: 'Player detection', icon: 'television-play'}, // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
{id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' }, {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
@ -259,6 +270,9 @@ export default {
}, },
methods: { methods: {
showInPlayerUi() {
this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
},
async sleep(t) { async sleep(t) {
return new Promise( (resolve,reject) => { return new Promise( (resolve,reject) => {
setTimeout(() => resolve(), t); setTimeout(() => resolve(), t);
@ -365,12 +379,15 @@ export default {
.header { .header {
background-color: rgb(90, 28, 13); background-color: rgb(90, 28, 13);
background-color: rgb(0,0,0);
color: #fff; color: #fff;
padding: 8px; padding: 8px;
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
justify-content: space-between; // justify-content: space-between;
border-bottom: 1px dotted #fa6;
h1 { h1 {
@ -388,6 +405,21 @@ export default {
} }
.settings-header-button {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 2rem;
text-transform: lowercase;
font-variant: small-caps;
background-color: #000;
border: 1px solid #fa68;
color: #eee;
}
.site-support-info { .site-support-info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

3
src/csui/res/css/flex.scss
View File

@ -27,6 +27,9 @@
flex-shrink: 0; flex-shrink: 0;
} }
.items-center {
align-items: center;
}
.flex-wrap { .flex-wrap {
flex-wrap: wrap; flex-wrap: wrap;