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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div id="root" />
|
||||||
<div id="root" />
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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 { h, render } from 'preact'
|
||||||
import { useState } from 'preact/hooks'
|
import { useState } from 'preact/hooks'
|
||||||
import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio'
|
import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries } from '../common/settings'
|
||||||
import { loginAndSetNickname } from '../common/crypto'
|
|
||||||
import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, TargetPlatformName, YTUrlResolverName } from '../common/settings'
|
|
||||||
import { setSetting, useLbrySettings } from '../common/useSettings'
|
import { setSetting, useLbrySettings } from '../common/useSettings'
|
||||||
|
import '../common/common.css'
|
||||||
|
import './popup.css'
|
||||||
import { LbryPathnameCache } from '../common/yt/urlCache'
|
import { LbryPathnameCache } from '../common/yt/urlCache'
|
||||||
import './popup.sass'
|
import { loginAndSetNickname } from '../common/crypto'
|
||||||
|
|
||||||
|
|
||||||
/** Gets all the options for redirect destinations as selection options */
|
/** Gets all the options for redirect destinations as selection options */
|
||||||
const platformOptions: SelectionOption[] = getTargetPlatfromSettingsEntiries()
|
const targetPlatforms = getTargetPlatfromSettingsEntiries()
|
||||||
.map(([value, { displayName: display }]) => ({ value, display }))
|
|
||||||
|
|
||||||
const ytUrlResolverOptions: SelectionOption[] = getYtUrlResolversSettingsEntiries()
|
const ytUrlResolverOptions = getYtUrlResolversSettingsEntiries()
|
||||||
.map(([value, { name: display }]) => ({ value, display }))
|
|
||||||
|
|
||||||
function WatchOnLbryPopup() {
|
function WatchOnLbryPopup() {
|
||||||
const { redirect, targetPlatform, urlResolver, privateKey, publicKey } = useLbrySettings()
|
const { redirect, targetPlatform, urlResolver, privateKey, publicKey } = useLbrySettings()
|
||||||
let [clearingCache, updateClearingCache] = useState(() => false)
|
let [clearingCache, updateClearingCache] = useState(() => false)
|
||||||
|
|
||||||
return <div className='container'>
|
return <div className='popup'>
|
||||||
<section>
|
<header>
|
||||||
<label className='radio-label'>Enable Redirection:</label>
|
<div className='profile'>
|
||||||
<ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
|
{publicKey
|
||||||
onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
|
? <span className='name'>{publicKey}</span>
|
||||||
</section>
|
: <a className='button' onClick={() => loginAndSetNickname()}>Login</a>}
|
||||||
<section>
|
</div>
|
||||||
<label className='radio-label'>Where would you like to redirect?</label>
|
</header>
|
||||||
<ButtonRadio value={targetPlatform} options={platformOptions}
|
<main>
|
||||||
onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
|
<section>
|
||||||
</section>
|
<label>Pick a mode !</label>
|
||||||
<section>
|
<div className='options'>
|
||||||
<label className='radio-label'>Resolve URL with:</label>
|
<a onClick={() => setSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}>
|
||||||
<ButtonRadio value={urlResolver} options={ytUrlResolverOptions}
|
Redirect
|
||||||
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>
|
|
||||||
</a>
|
</a>
|
||||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
<a onClick={() => setSetting('redirect', false)} className={`button ${redirect ? '' : 'active'}`}>
|
||||||
<button type='button' className='btn1 button is-primary'>Import Account</button>
|
Show a button
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</div>
|
||||||
:
|
</section>
|
||||||
<span class="options">
|
<section>
|
||||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
<label>Where would you like to redirect ?</label>
|
||||||
<button type='button' className='btn1 button is-primary'>Update Nickname</button>
|
<div className='options'>
|
||||||
</a>
|
{targetPlatforms.map(([name, value]) =>
|
||||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
<a onClick={() => setSetting('targetPlatform', name)} className={`button ${targetPlatform === name ? 'active' : ''}`}>
|
||||||
<button type='button' className='btn1 button is-primary'>Export Account</button>
|
{value.displayName}
|
||||||
</a>
|
</a>
|
||||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
)}
|
||||||
<button type='button' className='btn1 button is-primary'>Logout</button>
|
</div>
|
||||||
</a>
|
</section>
|
||||||
<a onClick={() => loginAndSetNickname()} target='_blank'>
|
<section>
|
||||||
<button type='button' className='btn1 button is-primary'>Purge Account</button>
|
<label>Which resolver API you want to use ?</label>
|
||||||
</a>
|
<div className='options'>
|
||||||
</span>
|
{ytUrlResolverOptions.map(([name, value]) =>
|
||||||
}
|
<a onClick={() => setSetting('urlResolver', name)} className={`button ${urlResolver === name ? 'active' : ''}`}>
|
||||||
</section>
|
{value.name}
|
||||||
<section>
|
</a>
|
||||||
<label className='radio-label'>Other useful tools:</label>
|
)}
|
||||||
<a href='/tools/YTtoLBRY.html' target='_blank'>
|
</div>
|
||||||
<button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
|
<a onClick={async () => {
|
||||||
</a>
|
updateClearingCache(true)
|
||||||
</section>
|
await LbryPathnameCache.clearAll()
|
||||||
|
updateClearingCache(false)
|
||||||
|
alert("Cleared Cache!")
|
||||||
|
}} className={`button active ${clearingCache ? 'disabled' : ''}`}>
|
||||||
|
Clear Resolver Cache
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue