Put player window into its own component
This commit is contained in:
parent
5a2e33ccd2
commit
cacb0f1ea0
395
src/csui/src/PlayerUIWindow.vue
Normal file
395
src/csui/src/PlayerUIWindow.vue
Normal file
@ -0,0 +1,395 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="popup-panel flex flex-column uw-clickable"
|
||||||
|
>
|
||||||
|
<div class="popup-window-header">
|
||||||
|
<div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
|
||||||
|
<div class="site-support-info">
|
||||||
|
<div class="site-support-site">{{site}}</div>
|
||||||
|
<div v-if="siteSupportLevel === 'official'" class="site-support official">
|
||||||
|
<mdicon name="check-decagram" />
|
||||||
|
<div>Verified</div>
|
||||||
|
<div class="tooltip">The extension is being tested and should work on this site.</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="siteSupportLevel === 'community'" class="site-support community">
|
||||||
|
<mdicon name="handshake" />
|
||||||
|
<div>Community</div>
|
||||||
|
<div class="tooltip">
|
||||||
|
People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
|
||||||
|
Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
|
||||||
|
is geoblocked.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="siteSupportLevel === 'no-support'" class="site-support no-support">
|
||||||
|
<mdicon name="help-circle-outline" />
|
||||||
|
<div>Unknown</div>
|
||||||
|
<div class="tooltip">
|
||||||
|
Not officially supported. Extension will try to fix things, but no promises.<br/><br/>
|
||||||
|
Tamius (the dev) does not test the extension on this site for various reasons
|
||||||
|
(unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="siteSupportLevel === 'user-added'" class="site-support user-added">
|
||||||
|
<mdicon name="account" />
|
||||||
|
<div>Custom</div>
|
||||||
|
<div class="tooltip">
|
||||||
|
You have manually changed settings for this site. The extension is doing what you told it to do.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
|
||||||
|
</div>
|
||||||
|
<div><a @click="uwWindowFadeOutDisabled = !uwWindowFadeOutDisabled">{{uwWindowFadeOutDisabled ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-main flex flex-row">
|
||||||
|
<div class="tab-row flex flex-column">
|
||||||
|
<div
|
||||||
|
v-for="tab of tabs"
|
||||||
|
:key="tab.id"
|
||||||
|
class="tab"
|
||||||
|
:class="{'active': tab.id === selectedTab}"
|
||||||
|
@click="selectTab(tab.id)"
|
||||||
|
>
|
||||||
|
<div class="icon-container">
|
||||||
|
<mdicon
|
||||||
|
:name="tab.icon"
|
||||||
|
:size="32"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="label">
|
||||||
|
{{tab.label}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content flex flex-column">
|
||||||
|
<!-- autodetection warning -->
|
||||||
|
|
||||||
|
<div class="warning-area">
|
||||||
|
<div
|
||||||
|
v-if="statusFlags.hasDrm"
|
||||||
|
class="warning-box"
|
||||||
|
>
|
||||||
|
<div class="icon-container">
|
||||||
|
<mdicon name="alert" :size="32" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
This site is blocking automatic aspect ratio detection. You will have to adjust aspect ratio manually.<br/>
|
||||||
|
<a>Learn more ...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row panel-content">
|
||||||
|
<!-- Panel section -->
|
||||||
|
<template v-if="settingsInitialized">
|
||||||
|
<VideoSettings
|
||||||
|
v-if="selectedTab === 'videoSettings'"
|
||||||
|
:settings="settings"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
:site="site"
|
||||||
|
></VideoSettings>
|
||||||
|
<PlayerDetectionPanel
|
||||||
|
v-if="selectedTab === 'playerDetection'"
|
||||||
|
:settings="settings"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
:site="site"
|
||||||
|
>
|
||||||
|
</PlayerDetectionPanel>
|
||||||
|
<BaseExtensionSettings
|
||||||
|
v-if="selectedTab === 'extensionSettings'"
|
||||||
|
:settings="settings"
|
||||||
|
:site="site"
|
||||||
|
></BaseExtensionSettings>
|
||||||
|
<AutodetectionSettingsPanel
|
||||||
|
v-if="selectedTab === 'autodetectionSettings'"
|
||||||
|
:settings="settings"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
:site="site"
|
||||||
|
>
|
||||||
|
</AutodetectionSettingsPanel>
|
||||||
|
<DebugPanel
|
||||||
|
v-if="selectedTab === 'debugging'"
|
||||||
|
:settings="settings"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
:site="site"
|
||||||
|
></DebugPanel>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import DebugPanel from './PlayerUiPanels/DebugPanel.vue'
|
||||||
|
import AutodetectionSettingsPanel from './PlayerUiPanels/AutodetectionSettingsPanel.vue'
|
||||||
|
import BaseExtensionSettings from './PlayerUiPanels/BaseExtensionSettings.vue'
|
||||||
|
import PlayerDetectionPanel from './PlayerUiPanels/PlayerDetectionPanel.vue'
|
||||||
|
import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
|
||||||
|
import BrowserDetect from '../../ext/conf/BrowserDetect'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
VideoSettings,
|
||||||
|
PlayerDetectionPanel,
|
||||||
|
BaseExtensionSettings,
|
||||||
|
AutodetectionSettingsPanel,
|
||||||
|
DebugPanel
|
||||||
|
},
|
||||||
|
mixins: [],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusFlags: {
|
||||||
|
hasDrm: undefined,
|
||||||
|
},
|
||||||
|
|
||||||
|
tabs: [
|
||||||
|
{id: 'videoSettings', label: 'Video settings', icon: 'crop'},
|
||||||
|
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
|
||||||
|
{id: 'extensionSettings', label: 'Extension options', icon: 'cogs' },
|
||||||
|
{id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
|
||||||
|
{id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
|
||||||
|
{id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
|
||||||
|
],
|
||||||
|
selectedTab: 'videoSettings',
|
||||||
|
BrowserDetect: BrowserDetect,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'settings',
|
||||||
|
'eventBus',
|
||||||
|
'logger'
|
||||||
|
],
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* Gets URL of the browser settings page (i think?)
|
||||||
|
*/
|
||||||
|
getUrl(url) {
|
||||||
|
return BrowserDetect.getURL(url);
|
||||||
|
},
|
||||||
|
selectTab(tab) {
|
||||||
|
this.selectedTab = tab;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../res/css/uwui-base.scss';
|
||||||
|
@import '../res/css/colors.scss';
|
||||||
|
@import '../res/css/font/overpass.css';
|
||||||
|
@import '../res/css/font/overpass-mono.css';
|
||||||
|
@import '../res/css/common.scss';
|
||||||
|
@import '../src/res-common/_variables';
|
||||||
|
|
||||||
|
// .relative-wrapper {
|
||||||
|
// position: relative;
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.tab-main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-support-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.site-support-site {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-support {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-left: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0rem 1.5rem 0rem 1rem;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
padding: 1rem;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateY(110%);
|
||||||
|
width: 42em;
|
||||||
|
|
||||||
|
background-color: rgba(0,0,0,0.90);
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdi {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.official {
|
||||||
|
background-color: #fa6;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
.mdi {
|
||||||
|
fill: #000 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.community {
|
||||||
|
background-color: rgb(47, 47, 97);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.mdi {
|
||||||
|
fill: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.no-support {
|
||||||
|
background-color: rgb(138, 65, 126);
|
||||||
|
color: #eee;
|
||||||
|
|
||||||
|
.mdi {
|
||||||
|
fill: #eee !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.user-added {
|
||||||
|
border: 1px solid #ff0;
|
||||||
|
|
||||||
|
color: #ff0;
|
||||||
|
|
||||||
|
.mdi {
|
||||||
|
fill: #ff0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.warning-area {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-box {
|
||||||
|
background: rgb(255, 174, 107);
|
||||||
|
color: #000;
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-container {
|
||||||
|
margin-right: 1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(0,0,0,0.7);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-panel {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
|
||||||
|
z-index: 999999999999999999;
|
||||||
|
|
||||||
|
width: 2500px;
|
||||||
|
height: 1200px;
|
||||||
|
max-width: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
|
||||||
|
pointer-events: all !important;
|
||||||
|
|
||||||
|
background-color: rgba(0,0,0,0.50);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
backdrop-filter: blur(16px) saturate(120%);
|
||||||
|
|
||||||
|
opacity: 1;
|
||||||
|
&.fade-out {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-window-header {
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: rgba(5,5,5, 0.75);
|
||||||
|
}
|
||||||
|
.tab-row {
|
||||||
|
background-color: rgba(11,11,11, 0.75);
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 2rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
height: 4rem;
|
||||||
|
|
||||||
|
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
|
||||||
|
border-top: 1px solid rgba(128, 128, 128, 0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
opacity: 1.0;
|
||||||
|
background-color: $primaryBg;
|
||||||
|
color: rgb(255, 174, 107);
|
||||||
|
border-bottom: 1px solid rgba(116, 78, 47, 0.5);
|
||||||
|
border-top: 1px solid rgba(116, 78, 47, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-container {
|
||||||
|
width: 64px;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title, .popup-title h1 {
|
||||||
|
font-size: 48px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* NOTE: we cannot get rid of this js file. I tried for 30 seconds and I couldn't get
|
* NOTE: we cannot get rid of this js file. I tried for 30 seconds and I couldn't get
|
||||||
* extension to work unless I kept this part of extension out of the ts file.
|
* extension to work unless I kept this part of extension out of the ts file.
|
||||||
*/
|
*/
|
||||||
import UWContent from './UWContent';
|
import UWContent from './UWContent';
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user