chore: formating and cleanup
This commit is contained in:
parent
dbd0406ce8
commit
a4bc3fd0ce
23
TODO.md
23
TODO.md
@ -1,16 +1,21 @@
|
|||||||
# TODO
|
# TODO
|
||||||
|
|
||||||
|
- hashtag view (single hasttag), header
|
||||||
|
- masonry, mit subtitles (user displayname, tags (most imporant), desc?, date) (ggf. nur desktop)
|
||||||
|
- NIP 46
|
||||||
|
- header für multiple tags??
|
||||||
|
- follow button für user view
|
||||||
|
- navigation entry points:
|
||||||
|
- Curated Topics, i.e. defined hashtags -> topic view
|
||||||
|
- Search (custom hashtags, profile search, content search, community seaarch)
|
||||||
|
- Global
|
||||||
|
- community view
|
||||||
|
- community links in detail view (/masonry)
|
||||||
|
|
||||||
- Avatar display is laggy, needs caching
|
- Avatar display is laggy, needs caching
|
||||||
- video mute icon position needs to be better arranged
|
|
||||||
- add zap/like to the scroll view
|
|
||||||
- grid profile: add banner/bio, maybe name to the right of the logo
|
|
||||||
- turn settings dialog into a "search" and improve display on mbile
|
- turn settings dialog into a "search" and improve display on mbile
|
||||||
- bring back the desktop view of the details dialog
|
- bring back the desktop view of the details dialog (maybe!?)
|
||||||
- nip-46 nsecbunker login
|
- nip-46 nsecbunker login
|
||||||
- think about use of ui framework, and redesign settings dialog
|
- think about use of ui framework, and redesign settings dialog
|
||||||
- move NSFW block list into a list event on an slidestr.net profile
|
- move NSFW block list into a list event on an slidestr.net profile (public nsfw mute list)
|
||||||
- direct link to profile (from nostrudel) should go to the grid.
|
|
||||||
- Add key/salt to imageproxy, see snort impl
|
- Add key/salt to imageproxy, see snort impl
|
||||||
- Add Follow button to profile page
|
|
||||||
- After seleting a profile, I get to the grid for that user: How to I get back to the previous search?
|
|
||||||
-
|
|
46
src/components/AuthorProfile/AuthorProfile.css
Normal file
46
src/components/AuthorProfile/AuthorProfile.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
|
||||||
|
.author-info {
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2em;
|
||||||
|
left: 2em;
|
||||||
|
z-index: 200;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-image {
|
||||||
|
display: block;
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 12px;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
animation-name: showAuthor;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.author-image {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-info {
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.author-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,8 @@
|
|||||||
import './SlideShow.css';
|
import './AuthorProfile.css';
|
||||||
import useImageLoaded from '../utils/useImageLoaded';
|
import useImageLoaded from '../../utils/useImageLoaded';
|
||||||
import { createImgProxyUrl } from './nostrImageDownload';
|
import { createImgProxyUrl } from '../nostrImageDownload';
|
||||||
import useNav from '../utils/useNav';
|
import useNav from '../../utils/useNav';
|
||||||
import { ViewMode } from './SlideShow';
|
import { ViewMode } from '../SlideShow';
|
||||||
|
|
||||||
type AvatarImageProps = {
|
type AvatarImageProps = {
|
||||||
src?: string;
|
src?: string;
|
@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
@ -49,7 +47,6 @@
|
|||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.details-contents .detail-image {
|
.details-contents .detail-image {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -134,7 +131,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.details {
|
.details {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
@ -68,6 +68,10 @@
|
|||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-header h2 {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.profile-header .author-info {
|
.profile-header .author-info {
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: initial;
|
bottom: initial;
|
||||||
|
@ -3,7 +3,7 @@ import { NostrImage, urlFix } from '../nostrImageDownload';
|
|||||||
import './GridView.css';
|
import './GridView.css';
|
||||||
import GridImage from './GridImage';
|
import GridImage from './GridImage';
|
||||||
import { Settings } from '../../utils/useNav';
|
import { Settings } from '../../utils/useNav';
|
||||||
import AuthorProfile from '../AuthorProfile';
|
import AuthorProfile from '../AuthorProfile/AuthorProfile';
|
||||||
import { useSwipeable } from 'react-swipeable';
|
import { useSwipeable } from 'react-swipeable';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import useProfile from '../../utils/useProfile';
|
import useProfile from '../../utils/useProfile';
|
||||||
@ -84,19 +84,18 @@ const GridView = ({ settings, images, currentImage, setCurrentImage, setViewMode
|
|||||||
<DetailsView images={sortedImages} currentImage={currentImage} setCurrentImage={setCurrentImage} />
|
<DetailsView images={sortedImages} currentImage={currentImage} setCurrentImage={setCurrentImage} />
|
||||||
) : null}
|
) : null}
|
||||||
*/}
|
*/}
|
||||||
{activeProfile && (
|
{(activeProfile || settings.tags.length == 1) && (
|
||||||
<div className="profile-header">
|
<div className="profile-header">
|
||||||
|
{activeProfile ? (
|
||||||
<AuthorProfile
|
<AuthorProfile
|
||||||
src={urlFix(activeProfile.image || '')}
|
src={urlFix(activeProfile.image || '')}
|
||||||
author={activeProfile.displayName || activeProfile.name}
|
author={activeProfile.displayName || activeProfile.name}
|
||||||
npub={activeProfile.npub}
|
npub={activeProfile.npub}
|
||||||
setViewMode={setViewMode}
|
setViewMode={setViewMode}
|
||||||
></AuthorProfile>
|
></AuthorProfile>
|
||||||
{/*
|
) : (
|
||||||
<span>{activeProfile.banner}</span>
|
settings.tags.map(t => <h2>#{t}</h2>)
|
||||||
<span>{activeProfile.bio}</span>
|
)}
|
||||||
{activeProfile.website}
|
|
||||||
*/}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
const IconSettings = () => (
|
const IconSettings = () => (
|
||||||
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<path
|
||||||
|
d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import { uniq } from 'lodash';
|
import uniq from 'lodash/uniq';
|
||||||
import { NostrImage, urlFix } from '../nostrImageDownload';
|
import { NostrImage, urlFix } from '../nostrImageDownload';
|
||||||
import useNav, { Settings } from '../../utils/useNav';
|
import useNav, { Settings } from '../../utils/useNav';
|
||||||
import './InfoPanel.css';
|
import './InfoPanel.css';
|
||||||
import IconChevronDown from '../Icons/IconChevronDown';
|
import IconChevronDown from '../Icons/IconChevronDown';
|
||||||
import { ViewMode } from '../SlideShow';
|
import { ViewMode } from '../SlideShow';
|
||||||
import AuthorProfile from '../AuthorProfile';
|
import AuthorProfile from '../AuthorProfile/AuthorProfile';
|
||||||
import useProfile from '../../utils/useProfile';
|
import useProfile from '../../utils/useProfile';
|
||||||
import { useGlobalState } from '../../utils/globalState';
|
import { useGlobalState } from '../../utils/globalState';
|
||||||
import IconLink from '../Icons/IconLink';
|
import IconLink from '../Icons/IconLink';
|
||||||
@ -48,8 +48,7 @@ const InfoPanel = ({ image, onClose, setViewMode, settings }: InfoPanelProps) =>
|
|||||||
|
|
||||||
{image.tags.length > 0 && (
|
{image.tags.length > 0 && (
|
||||||
<div className="info-panel-tags">
|
<div className="info-panel-tags">
|
||||||
{uniq(image?.tags)
|
{uniq(image?.tags).map(t => (
|
||||||
.map(t => (
|
|
||||||
<>
|
<>
|
||||||
<span
|
<span
|
||||||
className="tag"
|
className="tag"
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { NostrImage, urlFix } from '../nostrImageDownload';
|
import { NostrImage, urlFix } from '../nostrImageDownload';
|
||||||
import { Settings } from '../../utils/useNav';
|
import { Settings } from '../../utils/useNav';
|
||||||
import AuthorProfile from '../AuthorProfile';
|
import AuthorProfile from '../AuthorProfile/AuthorProfile';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import useProfile from '../../utils/useProfile';
|
import useProfile from '../../utils/useProfile';
|
||||||
import ScrollImage from './ScrollImage';
|
import ScrollImage from './ScrollImage';
|
@ -81,29 +81,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-info {
|
|
||||||
cursor: pointer;
|
|
||||||
color: white;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 2em;
|
|
||||||
left: 2em;
|
|
||||||
z-index: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-image {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
display: block;
|
|
||||||
transition: opacity 1s ease-in-out;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
border-radius: 12px;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
animation-name: showAuthor;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide {
|
.slide {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -297,19 +274,4 @@
|
|||||||
.controls {
|
.controls {
|
||||||
top: 2em;
|
top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-image {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-info {
|
|
||||||
width: 80vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.author-name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
@ -24,15 +24,15 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|||||||
import { useGlobalState } from '../utils/globalState';
|
import { useGlobalState } from '../utils/globalState';
|
||||||
import useAutoLogin from '../utils/useAutoLogin';
|
import useAutoLogin from '../utils/useAutoLogin';
|
||||||
import IconUser from './Icons/IconUser';
|
import IconUser from './Icons/IconUser';
|
||||||
import ScrollView from './GridView/ScrollView';
|
import ScrollView from './ScrollView/ScrollView';
|
||||||
import IconPlay from './Icons/IconPlay';
|
import IconPlay from './Icons/IconPlay';
|
||||||
import IconGrid from './Icons/IconGrid';
|
import IconGrid from './Icons/IconGrid';
|
||||||
import IconFullScreen from './Icons/IconFullScreen';
|
import IconFullScreen from './Icons/IconFullScreen';
|
||||||
import GridView from './GridView';
|
|
||||||
import useZapsAndReations from '../utils/useZapAndReaction';
|
import useZapsAndReations from '../utils/useZapAndReaction';
|
||||||
import IconHeart from './Icons/IconHeart';
|
import IconHeart from './Icons/IconHeart';
|
||||||
import IconBolt from './Icons/IconBolt';
|
import IconBolt from './Icons/IconBolt';
|
||||||
import IconSearch from './Icons/IconSearch';
|
import IconSearch from './Icons/IconSearch';
|
||||||
|
import GridView from './GridView';
|
||||||
|
|
||||||
// type AlbyNostr = typeof window.nostr & { enabled: boolean };
|
// type AlbyNostr = typeof window.nostr & { enabled: boolean };
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { MutableRefObject, useEffect, useRef, useState } from 'react';
|
import { MutableRefObject, useEffect, useRef, useState } from 'react';
|
||||||
import AuthorProfile from '../AuthorProfile';
|
import AuthorProfile from '../AuthorProfile/AuthorProfile';
|
||||||
import Slide from './Slide';
|
import Slide from './Slide';
|
||||||
import { NostrImage, urlFix } from '../nostrImageDownload';
|
import { NostrImage, urlFix } from '../nostrImageDownload';
|
||||||
import useDebouncedEffect from '../../utils/useDebouncedEffect';
|
import useDebouncedEffect from '../../utils/useDebouncedEffect';
|
||||||
|
@ -2,6 +2,25 @@ import { nip19 } from 'nostr-tools';
|
|||||||
|
|
||||||
export const appName = 'slidestr.net';
|
export const appName = 'slidestr.net';
|
||||||
|
|
||||||
|
export const topics = {
|
||||||
|
art: ['art', 'artstr', 'beautiful', 'colorful', 'psychedelic'],
|
||||||
|
bitcoin: ['bitcoin', 'plebchain'],
|
||||||
|
nostr: ['coffeechain', 'nostr', 'zapathon', 'grownostr', 'freedom'],
|
||||||
|
animals: ['catstr', 'cute', 'dogstr'],
|
||||||
|
photography: [
|
||||||
|
'naturephotography',
|
||||||
|
'photo',
|
||||||
|
'photography',
|
||||||
|
'photos',
|
||||||
|
'photostr',
|
||||||
|
'picoftheday',
|
||||||
|
'streetphotography',
|
||||||
|
'picstr',
|
||||||
|
],
|
||||||
|
lifestyle: ['fashion', 'flowerstr', 'foodstr', 'style', 'weedstr', 'travel', 'travelstr', 'happy', 'life', 'love'],
|
||||||
|
gardening: ['gardening', 'gardenstr', 'nature'],
|
||||||
|
};
|
||||||
|
|
||||||
export const defaultHashTags = [
|
export const defaultHashTags = [
|
||||||
'artstr',
|
'artstr',
|
||||||
'catstr',
|
'catstr',
|
||||||
|
Loading…
Reference in New Issue
Block a user