Home - zap.stream
diff --git a/src/pages/profile-page.css b/src/pages/profile-page.css
index 46418df..8ce9836 100644
--- a/src/pages/profile-page.css
+++ b/src/pages/profile-page.css
@@ -1,124 +1,3 @@
-.profile-page {
- display: flex;
- justify-content: center;
-}
-
-@media (min-width: 768px) {
- .profile-page .profile-container {
- width: 620px;
- }
-}
-
-.profile-page .profile-content {
- position: relative;
-}
-
-.profile-page .banner {
- width: 100%;
- border-radius: 16px;
-}
-
-@media (min-width: 768px) {
- .profile-page .banner {
- height: 348.75px;
- object-fit: cover;
- }
-}
-
-.profile-page .avatar {
- width: 88px;
- height: 88px;
- border-radius: 88px;
- border: 3px solid #fff;
- object-fit: cover;
- margin-left: 16px;
- margin-top: -40px;
-}
-
-.profile-page .status-indicator {
- position: absolute;
- top: 16px;
- left: 120px;
-}
-
-.profile-page .status-indicator .offline {
- margin-top: 8px;
- margin-left: 16px;
-}
-
-@media (min-width: 480px) {
- .profile-page .status-indicator {
- position: absolute;
- top: 16px;
- left: 120px;
- }
-}
-
-.profile-page .profile-actions {
- position: absolute;
- display: flex;
- align-items: flex-start;
- gap: 4px;
- top: 12px;
- right: 12px;
-}
-
-@media (min-width: 480px) {
- .profile-page .profile-actions {
- gap: 12px;
- }
-}
-
-.profile-page .profile-information {
- margin: 12px;
- margin-left: 16px;
- display: flex;
- flex-direction: column;
-}
-
-.profile-page .name {
- margin: 0;
- color: #fff;
- font-size: 21px;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-}
-
-.profile-page .bio {
- margin: 0;
- color: #adadad;
- font-size: 16px;
- font-style: normal;
- font-weight: 500;
- line-height: 24px;
-}
-
-.profile-page .zap-button {
- display: flex;
- gap: 8px;
-}
-
-.profile-page .zap-button-icon {
- color: #171717;
-}
-
-.profile-page .pill.live {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.profile-page .pill.offline {
- cursor: default;
-}
-
-.tabs-root {
- display: flex;
- flex-direction: column;
- margin-top: 20px;
- padding: 0 16px;
-}
.tabs-list {
flex-shrink: 0;
@@ -165,51 +44,10 @@
background: linear-gradient(94.73deg, #2bd9ff 0%, #8c8ded 47.4%, #f838d9 100%);
}
-.tabs-content {
- flex-grow: 1;
- padding: 6px;
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
-}
.tabs-content:focus {
box-shadow: 0 0 0 2px black;
}
-.profile-page .profile-top-zappers {
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
-.profile-page .zapper {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 18px;
- font-weight: 500;
-}
-
-.profile-page .zapper .zapper-amount {
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 18px;
- font-weight: 500;
- line-height: 22px;
-}
-
-.profile-page .stream-list {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.profile-page .stream-item {
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
.stream-item .video-tile h3 {
font-size: 20px;
font-style: normal;
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index 5803c4a..8e55d7e 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -2,12 +2,11 @@ import "./profile-page.css";
import { useMemo } from "react";
import { useNavigate, useParams } from "react-router-dom";
import * as Tabs from "@radix-ui/react-tabs";
-import { NostrPrefix, ParsedZap, encodeTLV, parseNostrLink } from "@snort/system";
+import { NostrPrefix, ParsedZap, TaggedNostrEvent, encodeTLV, parseNostrLink } from "@snort/system";
import { useUserProfile } from "@snort/system-react";
import { unwrap } from "@snort/shared";
import { FormattedMessage } from "react-intl";
-import { Profile } from "@/element/profile";
import { Icon } from "@/element/icon";
import { SendZapsDialog } from "@/element/send-zap";
import { VideoTile } from "@/element/video-tile";
@@ -15,31 +14,20 @@ import { FollowButton } from "@/element/follow-button";
import { MuteButton } from "@/element/mute-button";
import { useProfile } from "@/hooks/profile";
import useTopZappers from "@/hooks/top-zappers";
-import usePlaceholder from "@/hooks/placeholders";
import { Text } from "@/element/text";
import { StreamState } from "@/index";
import { findTag } from "@/utils";
-import { formatSats } from "@/number";
import { StatePill } from "@/element/state-pill";
+import { Avatar } from "@/element/avatar";
+import { ZapperRow } from "@/element/zapper-row";
-function Zapper({ pubkey, total }: { pubkey: string; total: number }) {
- return (
-
-
-
-
-
{formatSats(total)}
-
-
- );
-}
function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
const zappers = useTopZappers(zaps);
return (
-
+
{zappers.map(z => (
-
+
))}
);
@@ -51,7 +39,6 @@ export function ProfilePage() {
const navigate = useNavigate();
const params = useParams();
const link = parseNostrLink(unwrap(params.npub));
- const placeholder = usePlaceholder(link.id);
const profile = useUserProfile(link.id);
const zapTarget = profile?.lud16 ?? profile?.lud06;
const { streams, zaps } = useProfile(link, true);
@@ -75,106 +62,89 @@ export function ProfilePage() {
}
return (
-
-
-
-
- {profile?.picture ? (
-
- ) : (
-
- )}
-
{isLive && }
-
- {zapTarget && (
-
-
-
-
-
-
-
-
- }
- targetName={profile?.name || link.id}
- />
- )}
-
-
+
+
+
+
+
-
+
{profile?.name &&
{profile.name}
}
{profile?.about && (
-
+
)}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {pastStreams.map(ev => (
-
-
-
-
-
-
- ))}
-
-
-
-
- {futureStreams.map(ev => (
-
-
-
-
-
-
- ))}
-
-
-
+
+
+ {zapTarget && (
+
+
+
+
+ }
+ targetName={profile?.name || link.id}
+ />
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
+
+function ProfileStreamList({ streams }: { streams: Array
}) {
+ return
+ {streams.map(ev => (
+
+
+
+
+
+
+ ))}
+
;
+}
\ No newline at end of file
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index 13a3a57..ff6070a 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -151,7 +151,9 @@ export function StreamPage({ link, evPreload }: { evPreload?: NostrEvent; link:
-
+
);
}
diff --git a/src/utils.ts b/src/utils.ts
index 8339baf..a20e8bb 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -78,3 +78,7 @@ export function uniqBy
(vals: Array, key: (x: T) => string) {
}, {} as Record)
);
}
+
+export function getPlaceholder(id: string) {
+ return `https://robohash.v0l.io/${id}.png`;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index da8dfa7..5d9339a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,8 @@ module.exports = {
"gray-1": "#171717",
"gray-2": "#222",
primary: "var(--primary)",
+ secondary: "var(--secondary)",
+ zap: "var(--zap)"
},
animation: {
"ping-once": "ping 1s cubic-bezier(0, 0, 0.2, 1);",
diff --git a/tsconfig.json b/tsconfig.json
index 402044b..59f38c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
+ "esModuleInterop": true,
"noEmit": true,
"jsx": "react-jsx",
diff --git a/yarn.lock b/yarn.lock
index 0788f42..ae55bd5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4062,7 +4062,7 @@ __metadata:
languageName: node
linkType: hard
-"classnames@npm:^2.2.5":
+"classnames@npm:^2.2.5, classnames@npm:^2.3.2":
version: 2.3.2
resolution: "classnames@npm:2.3.2"
checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
@@ -7827,6 +7827,7 @@ __metadata:
"@webscopeio/react-textarea-autocomplete": ^4.9.2
autoprefixer: ^10.4.16
buffer: ^6.0.3
+ classnames: ^2.3.2
emoji-mart: ^5.5.2
eslint: ^8.48.0
eslint-plugin-formatjs: ^4.11.3