trycatchkamal/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

deck icon & media grid

Browse Source
This commit is contained in:
Martti Malmi 2023-12-06 10:13:01 +02:00
parent a50aaba752
commit 8e77535a6a
11 changed files with 62 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app/custom.d.ts vendored
View File

@ -66,6 +66,7 @@ declare const CONFIG: {
hideFromNavbar: Array<string>;
// Limit deck to certain subscriber tier
deckSubKind?: number;
showDeck?: boolean;
// Create toast notifications when publishing notes
noteCreatorToast?: boolean;
eventLinkPrefix: NostrPrefix;

2
packages/app/src/Element/Feed/DisplayAsSelector.tsx
View File

@ -36,7 +36,7 @@ export const DisplayAsSelector = ({ activeSelection, onSelect, show }: DisplaySe
<div className="flex mb-px md:mb-1">
<div className={getClasses("list")} onClick={() => myOnSelect("list")}>
<span className="rotate-90">
<Icon name="deck" />
<Icon name="deck-solid" />
</span>
</div>
<div className={getClasses("grid")} onClick={() => myOnSelect("grid")}>

12
packages/app/src/Element/Feed/TimelineRenderer.tsx
View File

@ -53,11 +53,15 @@ export function TimelineRenderer(props: TimelineRendererProps) {
const isVideo = media[0].mimeType?.startsWith("video/");
const noteId = NostrLink.fromEvent(e).encode(CONFIG.eventLinkPrefix);
const onClick = (clickEvent: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
if (props.noteOnClick) {
props.noteOnClick(e);
clickEvent.preventDefault();
}
};
return (
<Link
to={`/${noteId}`}
className="aspect-square cursor-pointer hover:opacity-80 relative"
onClick={() => props.noteOnClick?.(e)}>
<Link to={`/${noteId}`} className="aspect-square cursor-pointer hover:opacity-80 relative" onClick={onClick}>
<img src={proxy(media[0].content, 256)} alt="Note Media" className="w-full h-full object-cover" />
{isVideo && <Icon name="play-square-outline" className="absolute right-2 top-2 text-white opacity-80" />}
</Link>

0
packages/app/src/Element/SpotlightMedia.css → packages/app/src/Element/Spotlight/SpotlightMedia.css
View File

0
packages/app/src/Element/SpotlightMedia.tsx → packages/app/src/Element/Spotlight/SpotlightMedia.tsx
View File

32
packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx Normal file
View File

@ -0,0 +1,32 @@
import Modal from "@/Element/Modal";
import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
import { Thread } from "@/Element/Event/Thread";
import { useContext } from "react";
import { transformTextCached } from "@/Hooks/useTextTransformCache";
import { SpotlightMedia } from "@/Element/Spotlight/SpotlightMedia";
import { NostrLink } from "@snort/system";
export function SpotlightThreadModal(props: { thread: NostrLink; onClose?: () => void; onBack?: () => void }) {
const onClose = () => props.onClose?.();
const onBack = () => props.onBack?.();
return (
<Modal id="thread-overlay" onClose={onClose} className="thread-overlay thread">
<ThreadContextWrapper link={props.thread}>
<SpotlightFromThread onClose={onClose} />
<div>
<Thread onBack={onBack} disableSpotlight={true} />
</div>
</ThreadContextWrapper>
</Modal>
);
}
function SpotlightFromThread({ onClose }: { onClose: () => void }) {
const thread = useContext(ThreadContext);
const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
if (images.length === 0) return;
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
}

2
packages/app/src/Element/Text.tsx
View File

@ -9,7 +9,7 @@ import HyperText from "@/Element/Embed/HyperText";
import CashuNuts from "@/Element/Embed/CashuNuts";
import RevealMedia from "./Event/RevealMedia";
import { ProxyImg } from "./ProxyImg";
import { SpotlightMediaModal } from "./SpotlightMedia";
import { SpotlightMediaModal } from "./Spotlight/SpotlightMedia";
import HighlightedText from "./HighlightedText";
import { useTextTransformer } from "@/Hooks/useTextTransformCache";

33
packages/app/src/Pages/DeckLayout.tsx
View File

@ -1,5 +1,5 @@
import "./Deck.css";
import { createContext, useContext, useEffect, useState } from "react";
import { createContext, useEffect, useState } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";
import { FormattedMessage } from "react-intl";
import { NostrLink, TaggedNostrEvent } from "@snort/system";
@ -13,10 +13,7 @@ import { transformTextCached } from "@/Hooks/useTextTransformCache";
import Icon from "@/Icons/Icon";
import NotificationsPage from "./Notifications/Notifications";
import Modal from "@/Element/Modal";
import { Thread } from "@/Element/Event/Thread";
import { RootTabs } from "@/Element/Feed/RootTabs";
import { SpotlightMedia } from "@/Element/SpotlightMedia";
import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
import Toaster from "@/Toaster";
import useLogin from "@/Hooks/useLogin";
import { LongFormText } from "@/Element/Event/LongFormText";
@ -24,6 +21,7 @@ import NavSidebar from "@/Pages/Layout/NavSidebar";
import ErrorBoundary from "@/Element/ErrorBoundary";
import { getCurrentSubscription } from "@/Subscription";
import { mapPlanName } from "./subscribe";
import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
@ -60,7 +58,8 @@ export function SnortDeckLayout() {
}, [login]);
if (!login.publicKey) return null;
if (CONFIG.deckSubKind !== undefined && (sub?.type ?? -1) < CONFIG.deckSubKind) {
const showDeck = CONFIG.showDeck || !(CONFIG.deckSubKind !== undefined && (sub?.type ?? -1) < CONFIG.deckSubKind);
if (!showDeck) {
return (
<div className="deck-layout">
<NavSidebar narrow={true} />
@ -115,16 +114,11 @@ export function SnortDeckLayout() {
})}
</div>
{deckState.thread && (
<>
<Modal id="thread-overlay" onClose={() => setDeckState({})} className="thread-overlay thread">
<ThreadContextWrapper link={deckState.thread}>
<SpotlightFromThread onClose={() => setDeckState({})} />
<div>
<Thread onBack={() => setDeckState({})} disableSpotlight={true} />
</div>
</ThreadContextWrapper>
</Modal>
</>
<SpotlightThreadModal
thread={deckState.thread}
onClose={() => setDeckState({})}
onBack={() => setDeckState({})}
/>
)}
{deckState.article && (
<>
@ -146,15 +140,6 @@ export function SnortDeckLayout() {
);
}
function SpotlightFromThread({ onClose }: { onClose: () => void }) {
const thread = useContext(ThreadContext);
const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
if (images.length === 0) return;
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
}
function NotesCol() {
return (
<div>

4
packages/app/src/Pages/Layout/NavSidebar.tsx
View File

@ -91,6 +91,8 @@ export default function NavSidebar({ narrow = false }) {
</span>
);
const showDeck = CONFIG.showDeck || !(CONFIG.deckSubKind !== undefined && (sub?.type ?? -1) < CONFIG.deckSubKind);
return (
<div className={className}>
<LogoHeader showText={!narrow} />
@ -104,7 +106,7 @@ export default function NavSidebar({ narrow = false }) {
if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
return false;
}
if (a.link == "/deck" && CONFIG.deckSubKind !== undefined && (sub?.type ?? -1) < CONFIG.deckSubKind) {
if (a.link == "/deck" && !showDeck) {
return false;
}
return true;

2
packages/app/src/Pages/Profile/ProfilePage.tsx
View File

@ -45,7 +45,7 @@ import { EmailRegex } from "@/Const";
import useLogin from "@/Hooks/useLogin";
import { ZapTarget } from "@/Zapper";
import { useStatusFeed } from "@/Feed/StatusFeed";
import { SpotlightMediaModal } from "@/Element/SpotlightMedia";
import { SpotlightMediaModal } from "@/Element/Spotlight/SpotlightMedia";
import ProfileTab, {
BookMarksTab,
FollowersTab,

7
packages/app/src/icons.svg
View File

@ -413,10 +413,15 @@
<symbol id="sign-in" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C6.44772 3 6 3.44772 6 4C6 4.55228 6.44772 5 7 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H7C6.44772 19 6 19.4477 6 20C6 20.5523 6.44772 21 7 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H7ZM12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289C10.9024 7.68342 10.9024 8.31658 11.2929 8.70711L13.5858 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H13.5858L11.2929 15.2929C10.9024 15.6834 10.9024 16.3166 11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L16.7071 12.7071C17.0976 12.3166 17.0976 11.6834 16.7071 11.2929L12.7071 7.29289Z" fill="currentColor"/>
</symbol>
<symbol id="deck" viewBox="0 0 20 20" fill="none">
<symbol id="deck-solid" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3011 1.66602H14.8653C15.3046 1.666 15.6836 1.66599 15.9957 1.69149C16.3251 1.71841 16.6528 1.77784 16.9681 1.9385C17.4386 2.17818 17.821 2.56064 18.0607 3.03104C18.2213 3.34636 18.2808 3.67404 18.3077 4.00349C18.3332 4.31564 18.3332 4.69462 18.3332 5.13392V14.8648C18.3332 15.3041 18.3332 15.6831 18.3077 15.9952C18.2808 16.3247 18.2213 16.6523 18.0607 16.9677C17.821 17.4381 17.4386 17.8205 16.9681 18.0602C16.6528 18.2209 16.3251 18.2803 15.9957 18.3072C15.6836 18.3327 15.3046 18.3327 14.8653 18.3327H14.301C13.8618 18.3327 13.4828 18.3327 13.1706 18.3072C12.8412 18.2803 12.5135 18.2209 12.1982 18.0602C11.7278 17.8205 11.3453 17.4381 11.1057 16.9677C10.945 16.6523 10.8856 16.3247 10.8586 15.9952C10.8331 15.6831 10.8332 15.3041 10.8332 14.8648V5.1339C10.8332 4.69461 10.8331 4.31564 10.8586 4.00349C10.8856 3.67404 10.945 3.34636 11.1057 3.03104C11.3453 2.56064 11.7278 2.17818 12.1982 1.9385C12.5135 1.77784 12.8412 1.71841 13.1706 1.69149C13.4828 1.66599 13.8618 1.666 14.3011 1.66602Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.13439 1.66602H5.69863C6.13792 1.666 6.51689 1.66599 6.82903 1.69149C7.15848 1.71841 7.48617 1.77784 7.80148 1.9385C8.27189 2.17818 8.65434 2.56064 8.89402 3.03104C9.05468 3.34636 9.11411 3.67404 9.14103 4.00349C9.16653 4.31564 9.16652 4.69462 9.16651 5.13392V14.8648C9.16652 15.3041 9.16653 15.6831 9.14103 15.9952C9.11411 16.3247 9.05468 16.6523 8.89402 16.9677C8.65434 17.4381 8.27189 17.8205 7.80148 18.0602C7.48617 18.2209 7.15848 18.2803 6.82903 18.3072C6.51689 18.3327 6.13793 18.3327 5.69864 18.3327H5.13437C4.69508 18.3327 4.31612 18.3327 4.00398 18.3072C3.67453 18.2803 3.34685 18.2209 3.03153 18.0602C2.56112 17.8205 2.17867 17.4381 1.93899 16.9677C1.77833 16.6523 1.7189 16.3247 1.69198 15.9952C1.66648 15.6831 1.66649 15.3041 1.6665 14.8648V5.1339C1.66649 4.69461 1.66648 4.31564 1.69198 4.00349C1.7189 3.67404 1.77833 3.34636 1.93899 3.03104C2.17867 2.56064 2.56112 2.17818 3.03153 1.9385C3.34685 1.77784 3.67453 1.71841 4.00398 1.69149C4.31613 1.66599 4.69509 1.666 5.13439 1.66602Z" fill="currentColor"/>
</symbol>
<symbol id="deck-outline" viewBox="0 0 18 18" fill="none">
<path d="M4.66667 1.5H4.16667C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667V13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H4.66667C5.60009 16.5 6.0668 16.5 6.42332 16.3183C6.73692 16.1586 6.99189 15.9036 7.15168 15.59C7.33333 15.2335 7.33333 14.7668 7.33333 13.8333V4.16667C7.33333 3.23325 7.33333 2.76654 7.15168 2.41002C6.99189 2.09641 6.73692 1.84144 6.42332 1.68166C6.0668 1.5 5.60009 1.5 4.66667 1.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.8333 1.5H13.3333C12.3999 1.5 11.9332 1.5 11.5767 1.68166C11.2631 1.84144 11.0081 2.09641 10.8483 2.41002C10.6667 2.76654 10.6667 3.23325 10.6667 4.16667V13.8333C10.6667 14.7668 10.6667 15.2335 10.8483 15.59C11.0081 15.9036 11.2631 16.1586 11.5767 16.3183C11.9332 16.5 12.3999 16.5 13.3333 16.5H13.8333C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84144 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="graph-outline" viewBox="0 0 20 22" fill="none">
<path d="M6.59 12.51L13.42 16.49M13.41 5.51L6.59 9.49M19 4C19 5.65685 17.6569 7 16 7C14.3431 7 13 5.65685 13 4C13 2.34315 14.3431 1 16 1C17.6569 1 19 2.34315 19 4ZM7 11C7 12.6569 5.65685 14 4 14C2.34315 14 1 12.6569 1 11C1 9.34315 2.34315 8 4 8C5.65685 8 7 9.34315 7 11ZM19 18C19 19.6569 17.6569 21 16 21C14.3431 21 13 19.6569 13 18C13 16.3431 14.3431 15 16 15C17.6569 15 19 16.3431 19 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 125 KiB