commit
dda14587c0
1873
package-lock.json
generated
1873
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -23,7 +23,7 @@
|
|||
"mem": "~9.0.2",
|
||||
"p-retry": "~5.1.2",
|
||||
"preact": "~10.12.1",
|
||||
"react-hotkeys-hook": "~4.3.5",
|
||||
"react-hotkeys-hook": "~4.3.6",
|
||||
"react-intersection-observer": "~9.4.2",
|
||||
"react-router-dom": "6.6.2",
|
||||
"string-length": "~5.0.1",
|
||||
|
@ -41,7 +41,7 @@
|
|||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.0.1",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.1.2",
|
||||
"vite": "~4.1.3",
|
||||
"vite-plugin-html-config": "~1.0.11",
|
||||
"vite-plugin-html-env": "~1.2.7",
|
||||
"vite-plugin-pwa": "~0.14.4",
|
||||
|
|
|
@ -618,10 +618,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
|
||||
}
|
||||
.status-carousel
|
||||
.content-container:is(
|
||||
[style*='content-text-weight:1'],
|
||||
[style*='content-text-weight: 1']
|
||||
)
|
||||
.content-container[data-content-text-weight='1']
|
||||
.media-container.media-eq1 {
|
||||
/* LOL, this is madness, reading a value from the style attribute */
|
||||
height: auto;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import './account.css';
|
||||
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
import emojifyText from '../utils/emojify-text';
|
||||
|
@ -17,12 +17,6 @@ import Link from './link';
|
|||
|
||||
function Account({ account, instance: propInstance, onClose }) {
|
||||
const { masto, instance, authenticated } = api({ instance: propInstance });
|
||||
const {
|
||||
masto: currentMasto,
|
||||
instance: currentInstance,
|
||||
authenticated: currentAuthenticated,
|
||||
} = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const isString = typeof account === 'string';
|
||||
const [info, setInfo] = useState(isString ? null : account);
|
||||
|
@ -88,89 +82,6 @@ function Account({ account, instance: propInstance, onClose }) {
|
|||
username,
|
||||
} = info || {};
|
||||
|
||||
const [relationshipUIState, setRelationshipUIState] = useState('default');
|
||||
const [relationship, setRelationship] = useState(null);
|
||||
const [familiarFollowers, setFamiliarFollowers] = useState([]);
|
||||
useEffect(() => {
|
||||
if (info) {
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
let accountID;
|
||||
(async () => {
|
||||
if (sameInstance && authenticated) {
|
||||
accountID = id;
|
||||
} else if (!sameInstance && currentAuthenticated) {
|
||||
// Grab this account from my logged-in instance
|
||||
const acctHasInstance = info.acct.includes('@');
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
q: acctHasInstance ? info.acct : `${info.username}@${instance}`,
|
||||
type: 'accounts',
|
||||
limit: 1,
|
||||
resolve: true,
|
||||
});
|
||||
console.log('🥏 Fetched account from logged-in instance', results);
|
||||
accountID = results.accounts[0].id;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!accountID) return;
|
||||
|
||||
if (currentAccount === accountID) {
|
||||
// It's myself!
|
||||
return;
|
||||
}
|
||||
|
||||
setRelationshipUIState('loading');
|
||||
setFamiliarFollowers([]);
|
||||
|
||||
const fetchRelationships = currentMasto.v1.accounts.fetchRelationships([
|
||||
accountID,
|
||||
]);
|
||||
const fetchFamiliarFollowers =
|
||||
currentMasto.v1.accounts.fetchFamiliarFollowers(accountID);
|
||||
|
||||
try {
|
||||
const relationships = await fetchRelationships;
|
||||
console.log('fetched relationship', relationships);
|
||||
if (relationships.length) {
|
||||
const relationship = relationships[0];
|
||||
setRelationship(relationship);
|
||||
|
||||
if (!relationship.following) {
|
||||
try {
|
||||
const followers = await fetchFamiliarFollowers;
|
||||
console.log('fetched familiar followers', followers);
|
||||
setFamiliarFollowers(followers[0].accounts.slice(0, 10));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
setRelationshipUIState('default');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setRelationshipUIState('error');
|
||||
}
|
||||
})();
|
||||
}
|
||||
}, [info, authenticated]);
|
||||
|
||||
const {
|
||||
following,
|
||||
showingReblogs,
|
||||
notifying,
|
||||
followedBy,
|
||||
blocking,
|
||||
blockedBy,
|
||||
muting,
|
||||
mutingNotifications,
|
||||
requested,
|
||||
domainBlocking,
|
||||
endorsed,
|
||||
} = relationship || {};
|
||||
|
||||
return (
|
||||
<div
|
||||
id="account-container"
|
||||
|
@ -300,6 +211,119 @@ function Account({ account, instance: propInstance, onClose }) {
|
|||
</span>
|
||||
)}
|
||||
</p>
|
||||
<RelatedActions
|
||||
info={info}
|
||||
instance={instance}
|
||||
authenticated={authenticated}
|
||||
/>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RelatedActions({ info, instance, authenticated }) {
|
||||
if (!info) return null;
|
||||
const {
|
||||
masto: currentMasto,
|
||||
instance: currentInstance,
|
||||
authenticated: currentAuthenticated,
|
||||
} = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
|
||||
const [relationshipUIState, setRelationshipUIState] = useState('default');
|
||||
const [relationship, setRelationship] = useState(null);
|
||||
const [familiarFollowers, setFamiliarFollowers] = useState([]);
|
||||
|
||||
const { id, locked } = info;
|
||||
const accountID = useRef(id);
|
||||
|
||||
const {
|
||||
following,
|
||||
showingReblogs,
|
||||
notifying,
|
||||
followedBy,
|
||||
blocking,
|
||||
blockedBy,
|
||||
muting,
|
||||
mutingNotifications,
|
||||
requested,
|
||||
domainBlocking,
|
||||
endorsed,
|
||||
} = relationship || {};
|
||||
|
||||
useEffect(() => {
|
||||
if (info) {
|
||||
const currentAccount = store.session.get('currentAccount');
|
||||
let currentID;
|
||||
(async () => {
|
||||
if (sameInstance && authenticated) {
|
||||
currentID = id;
|
||||
} else if (!sameInstance && currentAuthenticated) {
|
||||
// Grab this account from my logged-in instance
|
||||
const acctHasInstance = info.acct.includes('@');
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
q: acctHasInstance ? info.acct : `${info.username}@${instance}`,
|
||||
type: 'accounts',
|
||||
limit: 1,
|
||||
resolve: true,
|
||||
});
|
||||
console.log('🥏 Fetched account from logged-in instance', results);
|
||||
currentID = results.accounts[0].id;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!currentID) return;
|
||||
|
||||
if (currentAccount === currentID) {
|
||||
// It's myself!
|
||||
return;
|
||||
}
|
||||
|
||||
accountID.current = currentID;
|
||||
|
||||
setRelationshipUIState('loading');
|
||||
setFamiliarFollowers([]);
|
||||
|
||||
const fetchRelationships = currentMasto.v1.accounts.fetchRelationships([
|
||||
currentID,
|
||||
]);
|
||||
const fetchFamiliarFollowers =
|
||||
currentMasto.v1.accounts.fetchFamiliarFollowers(currentID);
|
||||
|
||||
try {
|
||||
const relationships = await fetchRelationships;
|
||||
console.log('fetched relationship', relationships);
|
||||
if (relationships.length) {
|
||||
const relationship = relationships[0];
|
||||
setRelationship(relationship);
|
||||
|
||||
if (!relationship.following) {
|
||||
try {
|
||||
const followers = await fetchFamiliarFollowers;
|
||||
console.log('fetched familiar followers', followers);
|
||||
setFamiliarFollowers(followers[0].accounts.slice(0, 10));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
setRelationshipUIState('default');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setRelationshipUIState('error');
|
||||
}
|
||||
})();
|
||||
}
|
||||
}, [info, authenticated]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{familiarFollowers?.length > 0 && (
|
||||
<p class="common-followers">
|
||||
Common followers{' '}
|
||||
|
@ -336,23 +360,29 @@ function Account({ account, instance: propInstance, onClose }) {
|
|||
disabled={relationshipUIState === 'loading'}
|
||||
onClick={() => {
|
||||
setRelationshipUIState('loading');
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
let newRelationship;
|
||||
|
||||
if (following || requested) {
|
||||
const yes = confirm(
|
||||
requested
|
||||
? 'Withdraw follow request?'
|
||||
: `Unfollow @${info.acct || info.username}?`,
|
||||
);
|
||||
|
||||
if (yes) {
|
||||
newRelationship =
|
||||
await currentMasto.v1.accounts.unfollow(id);
|
||||
newRelationship = await currentMasto.v1.accounts.unfollow(
|
||||
accountID.current,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
newRelationship =
|
||||
await currentMasto.v1.accounts.follow(id);
|
||||
newRelationship = await currentMasto.v1.accounts.follow(
|
||||
accountID.current,
|
||||
);
|
||||
}
|
||||
|
||||
if (newRelationship) setRelationship(newRelationship);
|
||||
setRelationshipUIState('default');
|
||||
} catch (e) {
|
||||
|
@ -382,11 +412,7 @@ function Account({ account, instance: propInstance, onClose }) {
|
|||
</button>
|
||||
)}
|
||||
</p>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -590,7 +590,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
|
|||
max-width: 480px;
|
||||
/* max-height: 160px; */
|
||||
}
|
||||
.status.large .card.large {
|
||||
.status.large .card.large,
|
||||
.status-carousel .content-container[data-content-text-weight='1'] .card.large {
|
||||
border-radius: 16px;
|
||||
flex-direction: column;
|
||||
max-height: none;
|
||||
|
@ -618,7 +619,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
|
|||
.status.large .card .card-image {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.status.large .card.large .card-image {
|
||||
.status.large .card.large .card-image,
|
||||
.status-carousel
|
||||
.content-container[data-content-text-weight='1']
|
||||
.card.large
|
||||
.card-image {
|
||||
flex-grow: 1;
|
||||
aspect-ratio: 1.91 / 1;
|
||||
width: 100%;
|
||||
|
|
|
@ -79,7 +79,7 @@ function Status({
|
|||
avatar,
|
||||
avatarStatic,
|
||||
id: accountId,
|
||||
url,
|
||||
url: accountURL,
|
||||
displayName,
|
||||
username,
|
||||
emojis: accountEmojis,
|
||||
|
@ -108,6 +108,7 @@ function Status({
|
|||
mediaAttachments,
|
||||
reblog,
|
||||
uri,
|
||||
url,
|
||||
emojis,
|
||||
// Non-API props
|
||||
_deleted,
|
||||
|
@ -128,7 +129,7 @@ function Status({
|
|||
(mention) => mention.id === inReplyToAccountId,
|
||||
);
|
||||
if (!inReplyToAccountRef && inReplyToAccountId === id) {
|
||||
inReplyToAccountRef = { url, username, displayName };
|
||||
inReplyToAccountRef = { url: accountURL, username, displayName };
|
||||
}
|
||||
const [inReplyToAccount, setInReplyToAccount] = useState(inReplyToAccountRef);
|
||||
if (!withinContext && !inReplyToAccount && inReplyToAccountId) {
|
||||
|
@ -207,6 +208,9 @@ function Status({
|
|||
|
||||
const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this status from another instance.`;
|
||||
|
||||
const textWeight = () =>
|
||||
Math.round((spoilerText.length + htmlContentLength(content)) / 140) || 1;
|
||||
|
||||
return (
|
||||
<article
|
||||
ref={statusRef}
|
||||
|
@ -232,7 +236,7 @@ function Status({
|
|||
)}
|
||||
{size !== 's' && (
|
||||
<a
|
||||
href={url}
|
||||
href={accountURL}
|
||||
tabindex="-1"
|
||||
// target="_blank"
|
||||
title={`@${acct}`}
|
||||
|
@ -268,7 +272,7 @@ function Status({
|
|||
)} */}
|
||||
{/* </span> */}{' '}
|
||||
{size !== 'l' &&
|
||||
(uri ? (
|
||||
(url ? (
|
||||
<Link
|
||||
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
||||
class="time"
|
||||
|
@ -325,12 +329,10 @@ function Status({
|
|||
class={`content-container ${
|
||||
spoilerText || sensitive ? 'has-spoiler' : ''
|
||||
} ${showSpoiler ? 'show-spoiler' : ''}`}
|
||||
data-content-text-weight={contentTextWeight ? textWeight() : null}
|
||||
style={
|
||||
(size === 'l' || contentTextWeight) && {
|
||||
'--content-text-weight':
|
||||
Math.round(
|
||||
(spoilerText.length + htmlContentLength(content)) / 140,
|
||||
) || 1,
|
||||
'--content-text-weight': textWeight(),
|
||||
}
|
||||
}
|
||||
>
|
||||
|
@ -467,7 +469,7 @@ function Status({
|
|||
<>
|
||||
<div class="extra-meta">
|
||||
<Icon icon={visibilityIconsMap[visibility]} alt={visibility} />{' '}
|
||||
<a href={uri} target="_blank">
|
||||
<a href={url} target="_blank">
|
||||
<time class="created" datetime={createdAtDate.toISOString()}>
|
||||
{Intl.DateTimeFormat('en', {
|
||||
// Show year if not current year
|
||||
|
|
|
@ -40,8 +40,12 @@ function resetScrollPosition(id) {
|
|||
|
||||
function StatusPage() {
|
||||
const { id, ...params } = useParams();
|
||||
const { masto, instance, authenticated } = api({ instance: params.instance });
|
||||
const { masto: currentMasto, instance: currentInstance } = api();
|
||||
const { masto, instance } = api({ instance: params.instance });
|
||||
const {
|
||||
masto: currentMasto,
|
||||
instance: currentInstance,
|
||||
authenticated,
|
||||
} = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
const navigate = useNavigate();
|
||||
const snapStates = useSnapshot(states);
|
||||
|
@ -622,19 +626,31 @@ function StatusPage() {
|
|||
size="l"
|
||||
/>
|
||||
</InView>
|
||||
{!sameInstance && uiState !== 'loading' && (
|
||||
{uiState !== 'loading' && !authenticated ? (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
You're not logged in. Interactions (reply, boost,
|
||||
etc) are not possible.
|
||||
</p>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
!sameInstance && (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
This post is from another instance (
|
||||
<b>{instance}</b>). Interactions (reply, boost, etc)
|
||||
are not possible.
|
||||
<b>{instance}</b>). Interactions (reply, boost,
|
||||
etc) are not possible.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
(async () => {
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
const results =
|
||||
await currentMasto.v2.search({
|
||||
q: heroStatus.url,
|
||||
type: 'statuses',
|
||||
resolve: true,
|
||||
|
@ -642,7 +658,11 @@ function StatusPage() {
|
|||
});
|
||||
if (results.statuses.length) {
|
||||
const status = results.statuses[0];
|
||||
navigate(`/s/${status.id}`);
|
||||
navigate(
|
||||
currentInstance
|
||||
? `/${currentInstance}/s/${status.id}`
|
||||
: `/s/${status.id}`,
|
||||
);
|
||||
} else {
|
||||
throw new Error('No results');
|
||||
}
|
||||
|
@ -657,19 +677,7 @@ function StatusPage() {
|
|||
enable interactions
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{sameInstance &&
|
||||
!authenticated &&
|
||||
uiState !== 'loading' && (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
You're not logged in. Interactions (reply, boost,
|
||||
etc) are not possible.
|
||||
</p>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
|
|
Loading…
Reference in a new issue