Merge pull request #173 from cheeaun/main

Update from main
2023-06-30 23:25:52 +08:00 · 2023-06-30 23:25:52 +08:00 · 375da8d173
parent 2c31e8e04c d035d18aa0
commit 375da8d173
8 changed files with 243 additions and 39 deletions
--- a/src/app.css
+++ b/src/app.css
@ -1358,6 +1358,9 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
 .tag.collapsed {
  margin: 0;
 }
+.tag.danger {
+  background-color: var(--red-color);
+}

 /* MENU POPUP */

--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@ -12,6 +12,7 @@ import shortenNumber from '../utils/shorten-number';
 import showToast from '../utils/show-toast';
 import states, { hideAllModals } from '../utils/states';
 import store from '../utils/store';
+import { updateAccount } from '../utils/store-utils';

 import AccountBlock from './account-block';
 import Avatar from './avatar';
@ -483,6 +484,12 @@ function RelatedActions({ info, instance, authenticated }) {
    }
  }, [info, authenticated]);

+  useEffect(() => {
+    if (info && isSelf) {
+      updateAccount(info);
+    }
+  }, [info, isSelf]);
+
  const loading = relationshipUIState === 'loading';
  const menuInstanceRef = useRef(null);

@ -524,18 +531,22 @@ function RelatedActions({ info, instance, authenticated }) {
        </div>
      </div>
      <p class="actions">
-        {followedBy ? (
-          <span class="tag">Following you</span>
-        ) : !!lastStatusAt ? (
-          <small class="insignificant">
-            Last post:{' '}
-            {niceDateTime(lastStatusAt, {
-              hideTime: true,
-            })}
-          </small>
-        ) : (
-          <span />
-        )}{' '}
+        <span>
+          {followedBy ? (
+            <span class="tag">Following you</span>
+          ) : !!lastStatusAt ? (
+            <small class="insignificant">
+              Last post:{' '}
+              {niceDateTime(lastStatusAt, {
+                hideTime: true,
+              })}
+            </small>
+          ) : (
+            <span />
+          )}
+          {muting && <span class="tag danger">Muted</span>}
+          {blocking && <span class="tag danger">Blocked</span>}
+        </span>{' '}
        <span class="buttons">
          <Menu
            instanceRef={menuInstanceRef}
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@ -12,6 +12,8 @@ import Icon from './icon';
 import Link from './link';
 import { formatDuration } from './status';

+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); // https://stackoverflow.com/a/23522755
+
 /*
 Media type
 ===
@ -117,6 +119,20 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
  if (isImage) {
    // Note: type: unknown might not have width/height
    quickPinchZoomProps.containerProps.style.display = 'inherit';
+
+    useLayoutEffect(() => {
+      if (!isSafari) return;
+      if (!showOriginal) return;
+      (async () => {
+        try {
+          await fetch(mediaURL, { mode: 'no-cors' });
+          mediaRef.current.src = mediaURL;
+        } catch (e) {
+          // Ignore
+        }
+      })();
+    }, [mediaURL]);
+
    return (
      <Parent
        ref={parentRef}
@ -170,6 +186,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
            }}
            onLoad={(e) => {
              e.target.closest('.media-image').style.backgroundImage = '';
+              e.target.dataset.loaded = true;
            }}
            onError={(e) => {
              const { src } = e.target;
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@ -1,7 +1,14 @@
 import './search.css';

 import { forwardRef } from 'preact/compat';
-import { useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';
+import {
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'preact/hooks';
+import { InView } from 'react-intersection-observer';
 import { useParams, useSearchParams } from 'react-router-dom';

 import AccountBlock from '../components/account-block';
@ -13,6 +20,9 @@ import Status from '../components/status';
 import { api } from '../utils/api';
 import useTitle from '../utils/useTitle';

+const SHORT_LIMIT = 5;
+const LIMIT = 40;
+
 function Search(props) {
  const params = useParams();
  const { masto, instance, authenticated } = api({
@ -40,35 +50,78 @@ function Search(props) {
    `/search`,
  );

+  const [showMore, setShowMore] = useState(false);
+  const offsetRef = useRef(0);
+  useEffect(() => {
+    offsetRef.current = 0;
+  }, [type]);
+
+  const scrollableRef = useRef();
+  useLayoutEffect(() => {
+    scrollableRef.current?.scrollTo?.(0, 0);
+  }, [q, type]);
+
  const [statusResults, setStatusResults] = useState([]);
  const [accountResults, setAccountResults] = useState([]);
  const [hashtagResults, setHashtagResults] = useState([]);
+
+  function loadResults(firstLoad) {
+    setUiState('loading');
+    if (firstLoad && !type) {
+      setStatusResults(statusResults.slice(0, SHORT_LIMIT));
+      setAccountResults(accountResults.slice(0, SHORT_LIMIT));
+      setHashtagResults(hashtagResults.slice(0, SHORT_LIMIT));
+    }
+
+    (async () => {
+      const params = {
+        q,
+        resolve: authenticated,
+        limit: SHORT_LIMIT,
+      };
+      if (type) {
+        params.limit = LIMIT;
+        params.type = type;
+        params.offset = offsetRef.current;
+      }
+      try {
+        const results = await masto.v2.search(params);
+        console.log(results);
+        if (type && !firstLoad) {
+          if (type === 'statuses') {
+            setStatusResults((prev) => [...prev, ...results.statuses]);
+          } else if (type === 'accounts') {
+            setAccountResults((prev) => [...prev, ...results.accounts]);
+          } else if (type === 'hashtags') {
+            setHashtagResults((prev) => [...prev, ...results.hashtags]);
+          }
+          offsetRef.current = offsetRef.current + LIMIT;
+          setShowMore(!!results[type]?.length);
+        } else {
+          setStatusResults(results.statuses);
+          setAccountResults(results.accounts);
+          setHashtagResults(results.hashtags);
+        }
+        setUiState('default');
+      } catch (err) {
+        console.error(err);
+        setUiState('error');
+      }
+    })();
+  }
+
  useEffect(() => {
    // searchFieldRef.current?.focus?.();
    // searchFormRef.current?.focus?.();
    if (q) {
      // searchFieldRef.current.value = q;
      searchFormRef.current?.setValue?.(q);
-
-      setUiState('loading');
-      (async () => {
-        const results = await masto.v2.search({
-          q,
-          limit: type ? 40 : 5,
-          resolve: authenticated,
-          type,
-        });
-        console.log(results);
-        setStatusResults(results.statuses);
-        setAccountResults(results.accounts);
-        setHashtagResults(results.hashtags);
-        setUiState('default');
-      })();
+      loadResults(true);
    }
  }, [q, type, instance]);

  return (
-    <div id="search-page" class="deck-container">
+    <div id="search-page" class="deck-container" ref={scrollableRef}>
      <div class="timeline-deck deck">
        <header>
          <div class="header-grid">
@ -110,7 +163,7 @@ function Search(props) {
                ))}
            </div>
          )}
-          {!!q && uiState !== 'loading' ? (
+          {!!q ? (
            <>
              {(!type || type === 'accounts') && (
                <>
@ -121,7 +174,7 @@ function Search(props) {
                    <>
                      <ul class="timeline flat accounts-list">
                        {accountResults.map((account) => (
-                          <li>
+                          <li key={account.id}>
                            <AccountBlock
                              account={account}
                              instance={instance}
@ -141,7 +194,14 @@ function Search(props) {
                      )}
                    </>
                  ) : (
-                    <p class="ui-state">No accounts found.</p>
+                    !type &&
+                    (uiState === 'loading' ? (
+                      <p class="ui-state">
+                        <Loader abrupt />
+                      </p>
+                    ) : (
+                      <p class="ui-state">No accounts found.</p>
+                    ))
                  )}
                </>
              )}
@ -154,7 +214,7 @@ function Search(props) {
                    <>
                      <ul class="link-list hashtag-list">
                        {hashtagResults.map((hashtag) => (
-                          <li>
+                          <li key={hashtag.name}>
                            <Link
                              to={
                                instance
@ -180,7 +240,14 @@ function Search(props) {
                      )}
                    </>
                  ) : (
-                    <p class="ui-state">No hashtags found.</p>
+                    !type &&
+                    (uiState === 'loading' ? (
+                      <p class="ui-state">
+                        <Loader abrupt />
+                      </p>
+                    ) : (
+                      <p class="ui-state">No hashtags found.</p>
+                    ))
                  )}
                </>
              )}
@ -193,7 +260,7 @@ function Search(props) {
                    <>
                      <ul class="timeline">
                        {statusResults.map((status) => (
-                          <li>
+                          <li key={status.id}>
                            <Link
                              class="status-link"
                              to={
@ -219,10 +286,50 @@ function Search(props) {
                      )}
                    </>
                  ) : (
-                    <p class="ui-state">No posts found.</p>
+                    !type &&
+                    (uiState === 'loading' ? (
+                      <p class="ui-state">
+                        <Loader abrupt />
+                      </p>
+                    ) : (
+                      <p class="ui-state">No posts found.</p>
+                    ))
                  )}
                </>
              )}
+              {!!type &&
+                (uiState === 'default' ? (
+                  showMore ? (
+                    <InView
+                      onChange={(inView) => {
+                        if (inView) {
+                          loadResults();
+                        }
+                      }}
+                    >
+                      <button
+                        type="button"
+                        class="plain block"
+                        onClick={() => loadResults()}
+                        style={{ marginBlockEnd: '6em' }}
+                      >
+                        Show more&hellip;
+                      </button>
+                    </InView>
+                  ) : (
+                    <p class="ui-state insignificant">The end.</p>
+                  )
+                ) : (
+                  !!(
+                    hashtagResults.length ||
+                    accountResults.length ||
+                    statusResults.length
+                  ) && (
+                    <p class="ui-state">
+                      <Loader abrupt />
+                    </p>
+                  )
+                ))}
            </>
          ) : uiState === 'loading' ? (
            <p class="ui-state">
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@ -119,7 +119,10 @@ function StatusPage(params) {
            instance={instance}
            index={mediaIndex - 1}
            onClose={() => {
-              if (snapStates.prevLocation) {
+              if (
+                !window.matchMedia('(min-width: calc(40em + 350px))').matches &&
+                snapStates.prevLocation
+              ) {
                history.back();
              } else {
                if (showMediaOnly) {
@ -638,6 +641,14 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
      } ${initialPageState.current === 'status' ? 'slide-in' : ''} ${
        viewMode ? `deck-view-${viewMode}` : ''
      }`}
+      onAnimationEnd={(e) => {
+        // Fix the bounce effect when switching viewMode
+        // `slide-in` animation kicks in when switching viewMode
+        if (initialPageState.current === 'status') {
+          // e.target.classList.remove('slide-in');
+          initialPageState.current = null;
+        }
+      }}
    >
      <header
        class={`${heroInView ? 'inview' : ''} ${
--- a/src/pages/trending.jsx
+++ b/src/pages/trending.jsx
@ -1,9 +1,10 @@
 import { Menu, MenuItem } from '@szhsin/react-menu';
-import { useRef } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'preact/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';

 import Icon from '../components/icon';
+import Link from '../components/link';
 import Menu2 from '../components/menu2';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
@ -25,12 +26,23 @@ function Trending(props) {
  const navigate = useNavigate();
  const latestItem = useRef();

+  const [hashtags, setHashtags] = useState([]);
  const trendIterator = useRef();
  async function fetchTrend(firstLoad) {
    if (firstLoad || !trendIterator.current) {
      trendIterator.current = masto.v1.trends.listStatuses({
        limit: LIMIT,
      });
+
+      // Get hashtags
+      try {
+        const iterator = masto.v1.trends.listTags();
+        const { value: tags } = await iterator.next();
+        console.log(tags);
+        setHashtags(tags);
+      } catch (e) {
+        console.error(e);
+      }
    }
    const results = await trendIterator.current.next();
    let { value } = results;
@ -71,6 +83,28 @@ function Trending(props) {
    }
  }

+  const TimelineStart = useMemo(() => {
+    if (!hashtags.length) return null;
+    return (
+      <div class="filter-bar">
+        <Icon icon="chart" class="insignificant" size="l" />
+        {hashtags.map((tag, i) => {
+          const { name, history } = tag;
+          const total = history.reduce((acc, cur) => acc + +cur.uses, 0);
+          return (
+            <Link to={`/${instance}/t/${name}`}>
+              <span>
+                <span class="more-insignificant">#</span>
+                {name}
+              </span>
+              <span class="filter-count">{total.toLocaleString()}</span>
+            </Link>
+          );
+        })}
+      </div>
+    );
+  }, [hashtags]);
+
  return (
    <Timeline
      key={instance}
@ -92,6 +126,7 @@ function Trending(props) {
      headerStart={<></>}
      boostsCarousel={snapStates.settings.boostsCarousel}
      allowFilters
+      timelineStart={TimelineStart}
      headerEnd={
        <Menu2
          portal
--- a/src/utils/isMastodonLinkMaybe.jsx
+++ b/src/utils/isMastodonLinkMaybe.jsx
@ -3,6 +3,7 @@ export default function isMastodonLinkMaybe(url) {
  return (
    /^\/.*\/\d+$/i.test(pathname) ||
    /^\/@[^/]+\/statuses\/\w+$/i.test(pathname) || // GoToSocial
-    /^\/notes\/[a-z0-9]+$/i.test(pathname) // Misskey, Calckey
+    /^\/notes\/[a-z0-9]+$/i.test(pathname) || // Misskey, Calckey
+    /^\/(notice|objects)\/[a-z0-9-]+$/i.test(pathname) // Pleroma
  );
 }
--- a/src/utils/store-utils.js
+++ b/src/utils/store-utils.js
@ -34,6 +34,25 @@ export function saveAccount(account) {
  store.session.set('currentAccount', account.info.id);
 }

+export function updateAccount(accountInfo) {
+  // Only update if displayName or avatar or avatar_static is different
+  const accounts = store.local.getJSON('accounts') || [];
+  const acc = accounts.find((a) => a.info.id === accountInfo.id);
+  if (acc) {
+    if (
+      acc.info.displayName !== accountInfo.displayName ||
+      acc.info.avatar !== accountInfo.avatar ||
+      acc.info.avatar_static !== accountInfo.avatar_static
+    ) {
+      acc.info = {
+        ...acc.info,
+        ...accountInfo,
+      };
+      store.local.setJSON('accounts', accounts);
+    }
+  }
+}
+
 let currentInstance = null;
 export function getCurrentInstance() {
  if (currentInstance) return currentInstance;