chore: tweaks
This commit is contained in:
parent
0f6fe23f18
commit
07e42405a0
@ -18,27 +18,22 @@ export function MediaElement(props: MediaElementProps) {
|
|||||||
|
|
||||||
if (props.mime.startsWith("image/")) {
|
if (props.mime.startsWith("image/")) {
|
||||||
return (
|
return (
|
||||||
// constant height container avoids layout shift when images load
|
<ProxyImg key={props.url} src={props.url} onClick={props.onMediaClick} className="max-h-[80vh] mx-auto" />
|
||||||
<div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
|
|
||||||
<ProxyImg key={props.url} src={props.url} onClick={props.onMediaClick} className="max-h-[80vh] md:max-h-80" />
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
} else if (props.mime.startsWith("audio/")) {
|
} else if (props.mime.startsWith("audio/")) {
|
||||||
return <audio key={props.url} src={props.url} controls />;
|
return <audio key={props.url} src={props.url} controls />;
|
||||||
} else if (props.mime.startsWith("video/")) {
|
} else if (props.mime.startsWith("video/")) {
|
||||||
return (
|
return (
|
||||||
<div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
|
<video
|
||||||
<video
|
autoPlay={autoplay}
|
||||||
autoPlay={autoplay}
|
loop={true}
|
||||||
loop={true}
|
muted={autoplay}
|
||||||
muted={autoplay}
|
key={props.url}
|
||||||
key={props.url}
|
src={props.url}
|
||||||
src={props.url}
|
controls
|
||||||
controls
|
poster={proxy(props.url)}
|
||||||
poster={proxy(props.url)}
|
className="max-h-[80vh] mx-auto"
|
||||||
className="max-h-[80vh] md:max-h-80"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
|
@ -1,17 +1,19 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState, useSyncExternalStore } from "react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { HexKey } from "@snort/system";
|
import { HexKey } from "@snort/system";
|
||||||
|
|
||||||
import { ApiHost, DeveloperAccounts, SnortPubKey } from "@/Const";
|
import { ApiHost, DeveloperAccounts, SnortPubKey } from "@/Const";
|
||||||
import ProfilePreview from "@/Element/User/ProfilePreview";
|
import ProfilePreview from "@/Element/User/ProfilePreview";
|
||||||
import ZapButton from "@/Element/Event/ZapButton";
|
import ZapButton from "@/Element/Event/ZapButton";
|
||||||
import { bech32ToHex } from "@/SnortUtils";
|
import { bech32ToHex, unwrap } from "@/SnortUtils";
|
||||||
import SnortApi, { RevenueSplit, RevenueToday } from "@/External/SnortApi";
|
import SnortApi, { RevenueSplit, RevenueToday } from "@/External/SnortApi";
|
||||||
import Modal from "@/Element/Modal";
|
import Modal from "@/Element/Modal";
|
||||||
import AsyncButton from "@/Element/Button/AsyncButton";
|
import AsyncButton from "@/Element/Button/AsyncButton";
|
||||||
import QrCode from "@/Element/QrCode";
|
import QrCode from "@/Element/QrCode";
|
||||||
import Copy from "@/Element/Copy";
|
import Copy from "@/Element/Copy";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
import { ZapPoolController, ZapPoolRecipientType } from "@/ZapPoolController";
|
||||||
|
import { ZapPoolTarget } from "./ZapPool";
|
||||||
|
|
||||||
const Contributors = [
|
const Contributors = [
|
||||||
bech32ToHex("npub10djxr5pvdu97rjkde7tgcsjxzpdzmdguwacfjwlchvj7t88dl7nsdl54nf"), // ivan
|
bech32ToHex("npub10djxr5pvdu97rjkde7tgcsjxzpdzmdguwacfjwlchvj7t88dl7nsdl54nf"), // ivan
|
||||||
@ -59,6 +61,10 @@ const DonatePage = () => {
|
|||||||
const [today, setSumToday] = useState<RevenueToday>();
|
const [today, setSumToday] = useState<RevenueToday>();
|
||||||
const [onChain, setOnChain] = useState("");
|
const [onChain, setOnChain] = useState("");
|
||||||
const api = new SnortApi(ApiHost);
|
const api = new SnortApi(ApiHost);
|
||||||
|
const zapPool = useSyncExternalStore(
|
||||||
|
c => unwrap(ZapPoolController).hook(c),
|
||||||
|
() => unwrap(ZapPoolController).snapshot(),
|
||||||
|
);
|
||||||
|
|
||||||
async function getOnChainAddress() {
|
async function getOnChainAddress() {
|
||||||
const { address } = await api.onChainDonation();
|
const { address } = await api.onChainDonation();
|
||||||
@ -95,14 +101,11 @@ const DonatePage = () => {
|
|||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
defaultMessage="{site} is an open source project built by passionate people in their free time"
|
defaultMessage="{site} is an open source project built by passionate people in their free time, your donations are greatly appreciated"
|
||||||
id="6TfgXX"
|
id="XhpBfA"
|
||||||
values={{ site: CONFIG.appNameCapitalized }}
|
values={{ site: CONFIG.appNameCapitalized }}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
<FormattedMessage defaultMessage="Your donations are greatly appreciated" id="nn1qb3" />
|
|
||||||
</p>
|
|
||||||
<p>
|
<p>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
defaultMessage="Check out the code here: {link}"
|
defaultMessage="Check out the code here: {link}"
|
||||||
@ -129,12 +132,6 @@ const DonatePage = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Each contributor will get paid a percentage of all donations and NIP-05 orders, you can see the split amounts below"
|
|
||||||
id="mH91FY"
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col g12">
|
<div className="flex flex-col g12">
|
||||||
<div className="b br p">
|
<div className="b br p">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
@ -173,6 +170,29 @@ const DonatePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
)}
|
)}
|
||||||
|
{CONFIG.features.zapPool && <>
|
||||||
|
<h3>
|
||||||
|
<FormattedMessage defaultMessage="ZapPool" id="pRess9" />
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage defaultMessage="Fund the services that you use by splitting a portion of all your zaps into a pool of funds!" id="x/Fx2P" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Link to="/zap-pool" className="underline">
|
||||||
|
<FormattedMessage defaultMessage="Configure zap pool" id="kqPQJD" />
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
<ZapPoolTarget
|
||||||
|
target={
|
||||||
|
zapPool.find(b => b.pubkey === bech32ToHex(SnortPubKey) && b.type === ZapPoolRecipientType.Generic) ?? {
|
||||||
|
type: ZapPoolRecipientType.Generic,
|
||||||
|
pubkey: bech32ToHex(SnortPubKey),
|
||||||
|
split: 0,
|
||||||
|
sum: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>}
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage defaultMessage="Primary Developers" id="4IPzdn" />
|
<FormattedMessage defaultMessage="Primary Developers" id="4IPzdn" />
|
||||||
</h3>
|
</h3>
|
||||||
|
@ -100,7 +100,7 @@ export default function NavSidebar({ narrow = false }) {
|
|||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
{ "xl:items-start": !narrow, "xl:gap-2": !narrow },
|
{ "xl:items-start": !narrow, "xl:gap-2": !narrow },
|
||||||
"gap-1 flex flex-col items-center text-lg",
|
"gap-1 flex flex-col items-center text-lg font-bold",
|
||||||
)}>
|
)}>
|
||||||
{MENU_ITEMS.filter(a => {
|
{MENU_ITEMS.filter(a => {
|
||||||
if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
|
if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
|
||||||
|
@ -58,6 +58,7 @@ import { useMuteList, usePinList } from "@/Hooks/useLists";
|
|||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
import FollowedBy from "@/Element/User/FollowedBy";
|
import FollowedBy from "@/Element/User/FollowedBy";
|
||||||
|
import AsyncButton from "@/Element/Button/AsyncButton";
|
||||||
|
|
||||||
interface ProfilePageProps {
|
interface ProfilePageProps {
|
||||||
id?: string;
|
id?: string;
|
||||||
@ -192,14 +193,14 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
|
|||||||
targets={
|
targets={
|
||||||
lnurl?.lnurl && id
|
lnurl?.lnurl && id
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
type: "lnurl",
|
type: "lnurl",
|
||||||
value: lnurl?.lnurl,
|
value: lnurl?.lnurl,
|
||||||
weight: 1,
|
weight: 1,
|
||||||
name: user?.display_name || user?.name,
|
name: user?.display_name || user?.name,
|
||||||
zap: { pubkey: id },
|
zap: { pubkey: id },
|
||||||
} as ZapTarget,
|
} as ZapTarget,
|
||||||
]
|
]
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
show={showLnQr}
|
show={showLnQr}
|
||||||
@ -299,6 +300,9 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
|
|||||||
<div className="profile-actions">
|
<div className="profile-actions">
|
||||||
{renderIcons()}
|
{renderIcons()}
|
||||||
{!isMe && id && <FollowButton pubkey={id} />}
|
{!isMe && id && <FollowButton pubkey={id} />}
|
||||||
|
{isMe && id && <AsyncButton className="secondary">
|
||||||
|
<FormattedMessage defaultMessage="Edit" id="wEQDC6" />
|
||||||
|
</AsyncButton>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -21,7 +21,7 @@ const DataProviders = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
function ZapTarget({ target }: { target: ZapPoolRecipient }) {
|
export function ZapPoolTarget({ target }: { target: ZapPoolRecipient }) {
|
||||||
if (!ZapPoolController) return;
|
if (!ZapPoolController) return;
|
||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const profile = useUserProfile(target.pubkey);
|
const profile = useUserProfile(target.pubkey);
|
||||||
@ -158,7 +158,7 @@ export default function ZapPoolPage() {
|
|||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<ZapTarget
|
<ZapPoolTarget
|
||||||
target={
|
target={
|
||||||
zapPool.find(b => b.pubkey === bech32ToHex(SnortPubKey) && b.type === ZapPoolRecipientType.Generic) ?? {
|
zapPool.find(b => b.pubkey === bech32ToHex(SnortPubKey) && b.type === ZapPoolRecipientType.Generic) ?? {
|
||||||
type: ZapPoolRecipientType.Generic,
|
type: ZapPoolRecipientType.Generic,
|
||||||
@ -175,7 +175,7 @@ export default function ZapPoolPage() {
|
|||||||
{relayConnections.map(a => (
|
{relayConnections.map(a => (
|
||||||
<div>
|
<div>
|
||||||
<h4>{getRelayName(a.address)}</h4>
|
<h4>{getRelayName(a.address)}</h4>
|
||||||
<ZapTarget
|
<ZapPoolTarget
|
||||||
target={
|
target={
|
||||||
zapPool.find(b => b.pubkey === a.pubkey && b.type === ZapPoolRecipientType.Relay) ?? {
|
zapPool.find(b => b.pubkey === a.pubkey && b.type === ZapPoolRecipientType.Relay) ?? {
|
||||||
type: ZapPoolRecipientType.Relay,
|
type: ZapPoolRecipientType.Relay,
|
||||||
@ -193,7 +193,7 @@ export default function ZapPoolPage() {
|
|||||||
{UploaderServices.map(a => (
|
{UploaderServices.map(a => (
|
||||||
<div>
|
<div>
|
||||||
<h4>{a.name}</h4>
|
<h4>{a.name}</h4>
|
||||||
<ZapTarget
|
<ZapPoolTarget
|
||||||
target={
|
target={
|
||||||
zapPool.find(b => b.pubkey === a.owner && b.type === ZapPoolRecipientType.FileHost) ?? {
|
zapPool.find(b => b.pubkey === a.owner && b.type === ZapPoolRecipientType.FileHost) ?? {
|
||||||
type: ZapPoolRecipientType.FileHost,
|
type: ZapPoolRecipientType.FileHost,
|
||||||
@ -211,7 +211,7 @@ export default function ZapPoolPage() {
|
|||||||
{DataProviders.map(a => (
|
{DataProviders.map(a => (
|
||||||
<div>
|
<div>
|
||||||
<h4>{a.name}</h4>
|
<h4>{a.name}</h4>
|
||||||
<ZapTarget
|
<ZapPoolTarget
|
||||||
target={
|
target={
|
||||||
zapPool.find(b => b.pubkey === a.owner && b.type === ZapPoolRecipientType.DataProvider) ?? {
|
zapPool.find(b => b.pubkey === a.owner && b.type === ZapPoolRecipientType.DataProvider) ?? {
|
||||||
type: ZapPoolRecipientType.DataProvider,
|
type: ZapPoolRecipientType.DataProvider,
|
||||||
|
Loading…
Reference in New Issue
Block a user