mirror of
https://github.com/LBRYFoundation/Watch-on-LBRY.git
synced 2025-08-23 17:47:26 +00:00
🍙 updating UI
This commit is contained in:
Shiba
parent
a0f66bc062
commit
81f1742289
5 changed files with 184 additions and 96 deletions
61
src/common/common.css
Normal file
61
src/common/common.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
:root {
|
||||
--color-master: #488e77;
|
||||
--color-slave: #458593;
|
||||
--color-error: rgb(245, 81, 69);
|
||||
--color-gradient-0: linear-gradient(130deg, var(--color-master), var(--color-slave));
|
||||
--color-gradient-1: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
|
||||
--color-dark: #0e1117;
|
||||
--color-light: rgb(235, 237, 241);
|
||||
--gradient-animation: gradient-animation 5s linear infinite alternate;
|
||||
}
|
||||
|
||||
:root {
|
||||
letter-spacing: .2ch;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to left top, var(--color-master), var(--color-slave));
|
||||
background-attachment: fixed;
|
||||
color: var(--color-light);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: .5em 1em;
|
||||
|
||||
background: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
.button.active {
|
||||
background: var(--color-gradient-0);
|
||||
}
|
||||
|
||||
.button.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-gradient-0);
|
||||
filter: blur(.5em);
|
||||
z-index: -1;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
filter: saturate(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
69
src/popup/popup.css
Normal file
69
src/popup/popup.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.popup {
|
||||
width: 35em;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
justify-content: end;
|
||||
background: rgba(19, 19, 19, 0.95);
|
||||
padding: .5em .2em;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
gap: .25em;
|
||||
}
|
||||
|
||||
.profile .name {
|
||||
display: inline-block;
|
||||
width: 10em;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.profile::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4ch;
|
||||
aspect-ratio: 1/1;
|
||||
background: var(--color-gradient-0);
|
||||
border-radius: 100000%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
section {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: .75em;
|
||||
background: rgba(19, 19, 19, 0.75);
|
||||
border-radius: 1em;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
|
||||
justify-content: center;
|
||||
gap: .25em;
|
||||
}
|
||||
|
|
@ -6,9 +6,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="root" />
|
||||
</div>
|
||||
<div id="root" />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.radio-label
|
||||
font-size: 1.1rem
|
||||
display: block
|
||||
|
||||
.container
|
||||
display: grid
|
||||
grid-auto-flow: row
|
||||
gap: 1.5em
|
||||
|
||||
.container section
|
||||
display: grid
|
||||
grid-auto-flow: row
|
||||
gap: 1em
|
||||
|
||||
button
|
||||
cursor: pointer
|
||||
|
||||
.container .options
|
||||
display: flex
|
||||
gap: .25em
|
||||
white-space: nowrap
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
|
|
@ -1,88 +1,71 @@
|
|||
import { h, render } from 'preact'
|
||||
import { useState } from 'preact/hooks'
|
||||
import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio'
|
||||
import { loginAndSetNickname } from '../common/crypto'
|
||||
import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, TargetPlatformName, YTUrlResolverName } from '../common/settings'
|
||||
import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries } from '../common/settings'
|
||||
import { setSetting, useLbrySettings } from '../common/useSettings'
|
||||
import '../common/common.css'
|
||||
import './popup.css'
|
||||
import { LbryPathnameCache } from '../common/yt/urlCache'
|
||||
import './popup.sass'
|
||||
import { loginAndSetNickname } from '../common/crypto'
|
||||
|
||||
|
||||
/** Gets all the options for redirect destinations as selection options */
|
||||
const platformOptions: SelectionOption[] = getTargetPlatfromSettingsEntiries()
|
||||
.map(([value, { displayName: display }]) => ({ value, display }))
|
||||
const targetPlatforms = getTargetPlatfromSettingsEntiries()
|
||||
|
||||
const ytUrlResolverOptions: SelectionOption[] = getYtUrlResolversSettingsEntiries()
|
||||
.map(([value, { name: display }]) => ({ value, display }))
|
||||
const ytUrlResolverOptions = getYtUrlResolversSettingsEntiries()
|
||||
|
||||
function WatchOnLbryPopup() {
|
||||
const { redirect, targetPlatform, urlResolver, privateKey, publicKey } = useLbrySettings()
|
||||
let [clearingCache, updateClearingCache] = useState(() => false)
|
||||
|
||||
return <div className='container'>
|
||||
<section>
|
||||
<label className='radio-label'>Enable Redirection:</label>
|
||||
<ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
|
||||
onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
|
||||
</section>
|
||||
<section>
|
||||
<label className='radio-label'>Where would you like to redirect?</label>
|
||||
<ButtonRadio value={targetPlatform} options={platformOptions}
|
||||
onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
|
||||
</section>
|
||||
<section>
|
||||
<label className='radio-label'>Resolve URL with:</label>
|
||||
<ButtonRadio value={urlResolver} options={ytUrlResolverOptions}
|
||||
onChange={(urlResolver: YTUrlResolverName) => setSetting('urlResolver', urlResolver)} />
|
||||
</section>
|
||||
<section>
|
||||
<a onClick={async () => {
|
||||
await LbryPathnameCache.clearAll()
|
||||
alert('Cleared Cache.')
|
||||
}}>
|
||||
<button type='button' className='btn1 button is-primary'>{clearingCache ? 'Clearing Cache...' : 'Clear Cache'}</button>
|
||||
</a>
|
||||
</section>
|
||||
<section>
|
||||
<label className='radio-label'>Madiator Finder:</label>
|
||||
<a href='https://finder.madiator.com/leaderboard' target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Leaderboard</button>
|
||||
</a>
|
||||
</section>
|
||||
<section>
|
||||
<label className='radio-label'>Madiator Finder Profile:</label>
|
||||
{(!privateKey || !publicKey) ?
|
||||
<span class="options">
|
||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Login and join the Leaderboard</button>
|
||||
return <div className='popup'>
|
||||
<header>
|
||||
<div className='profile'>
|
||||
{publicKey
|
||||
? <span className='name'>{publicKey}</span>
|
||||
: <a className='button' onClick={() => loginAndSetNickname()}>Login</a>}
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<label>Pick a mode !</label>
|
||||
<div className='options'>
|
||||
<a onClick={() => setSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}>
|
||||
Redirect
|
||||
</a>
|
||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Import Account</button>
|
||||
<a onClick={() => setSetting('redirect', false)} className={`button ${redirect ? '' : 'active'}`}>
|
||||
Show a button
|
||||
</a>
|
||||
</span>
|
||||
:
|
||||
<span class="options">
|
||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Update Nickname</button>
|
||||
</a>
|
||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Export Account</button>
|
||||
</a>
|
||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Logout</button>
|
||||
</a>
|
||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Purge Account</button>
|
||||
</a>
|
||||
</span>
|
||||
}
|
||||
</section>
|
||||
<section>
|
||||
<label className='radio-label'>Other useful tools:</label>
|
||||
<a href='/tools/YTtoLBRY.html' target='_blank'>
|
||||
<button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<label>Where would you like to redirect ?</label>
|
||||
<div className='options'>
|
||||
{targetPlatforms.map(([name, value]) =>
|
||||
<a onClick={() => setSetting('targetPlatform', name)} className={`button ${targetPlatform === name ? 'active' : ''}`}>
|
||||
{value.displayName}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<label>Which resolver API you want to use ?</label>
|
||||
<div className='options'>
|
||||
{ytUrlResolverOptions.map(([name, value]) =>
|
||||
<a onClick={() => setSetting('urlResolver', name)} className={`button ${urlResolver === name ? 'active' : ''}`}>
|
||||
{value.name}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<a onClick={async () => {
|
||||
updateClearingCache(true)
|
||||
await LbryPathnameCache.clearAll()
|
||||
updateClearingCache(false)
|
||||
alert("Cleared Cache!")
|
||||
}} className={`button active ${clearingCache ? 'disabled' : ''}`}>
|
||||
Clear Resolver Cache
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue