Development

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@capacitor/app": "1.1.1",
     "@floating-ui/react": "0.26.1",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#00aabcce2276c671c0f4a371d459c93eb39c936a",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#176d361ce4dfecc4fdc3c3675a9777099d47d8ce",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "13.0.0",
     "@testing-library/user-event": "13.2.1",

src/components/post/embed/embed.tsx

@@ -7,7 +7,7 @@ interface EmbedProps {
 const Embed = ({ url }: EmbedProps) => {
   const parsedUrl = new URL(url);
 
-  if (youtubeHosts.has(parsedUrl.host) || parsedUrl.host.startsWith('yt.')) {
+  if (youtubeHosts.has(parsedUrl.host) || (parsedUrl.host.startsWith('yt.') && parsedUrl.searchParams.has('v'))) {
     return <YoutubeEmbed parsedUrl={parsedUrl} />;
   }
   if (xHosts.has(parsedUrl.host)) {

src/components/post/post.module.css

@@ -220,11 +220,6 @@
   border: 1px dashed gray;
 }
 
-.subscribeButtonWrapper {
-  padding-right: 14px;
-  position: relative;
-}
-
 .subscribeButton {
   position: absolute;
   border: none;
@@ -256,3 +251,7 @@
 .subscribeButtonWrapper:hover + .subplebbit {
   color: var(--green-bright) !important;
 }
+
+.subscribeButtonWrapper {
+  padding-right: 14px;
+}

src/components/post/post.tsx

@@ -39,7 +39,12 @@ const PostAuthor = ({ authorAddress, authorRole, cid, displayName, index, shortA
   return (
     <>
       <Link to={cid ? `/u/${authorAddress}/c/${cid}` : `/profile/${index}`} className={`${styles.author} ${moderatorClass}`}>
-        {displayName && <span className={`${styles.displayName} ${moderatorClass}`}> {shortDisplayName}</span>}{' '}
+        {displayName && (
+          <>
+            {' '}
+            <span className={`${styles.displayName} ${moderatorClass}`}>{shortDisplayName}</span>
+          </>
+        )}{' '}
         <span className={`${styles.authorAddressWrapper} ${moderatorClass}`}>
           <span className={styles.authorAddressHidden}>u/{shortAddress || shortAuthorAddress}</span>
           <span className={`${styles.authorAddressVisible} ${authorAddressChanged && styles.authorAddressChanged}`}>u/{shortAuthorAddress}</span>

src/components/reply/reply.tsx

@@ -289,7 +289,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
   const { t } = useTranslation();
-  let score = upvoteCount - downvoteCount + 1;
+  let score = upvoteCount - downvoteCount + 1 || 1;
   if ((upvoteCount === 0 && downvoteCount === 0) || (upvoteCount === 1 && downvoteCount === 0)) {
     score = 1;
   }

src/lib/utils/media-utils.ts

@@ -29,8 +29,6 @@ const getYouTubeVideoId = (url: URL): string | null => {
     return url.pathname.slice(1);
   } else if (url.searchParams.has('v')) {
     return url.searchParams.get('v');
-  } else if (url.host.startsWith('yt.')) {
-    return url.searchParams.get('v');
   }
   return null;
 };

src/views/post-page/post-page.module.css

@@ -1,6 +1,5 @@
 .content {
   padding: 7px 5px 0px 5px;
-  margin-bottom: 25px;
 }
 
 .replyArea {

src/views/post-page/post-page.tsx

@@ -54,7 +54,7 @@ const Post = ({ post }: { post: Comment }) => {
         <div className={styles.replyArea}>
           {!isSingleComment && (
             <div className={styles.repliesTitle}>
-              <span className={styles.title}>{replyCount !== undefined ? commentCount : <LoadingEllipsis string={t('loading_comments')} />}</span>
+              <span className={styles.title}>{replyCount !== undefined ? commentCount : t('loading_comments')}</span>
             </div>
           )}
           <div className={styles.menuArea}>
@@ -66,7 +66,6 @@ const Post = ({ post }: { post: Comment }) => {
             </div>
             <div className={styles.spacer} />
             {!isSingleComment && subplebbitAddress && cid && <ReplyForm cid={cid} subplebbitAddress={subplebbitAddress} />}
-            <span className={styles.loadingString}>{loadingString && loadingString}</span>
           </div>
           {isSingleComment && (
             <div className={styles.singleCommentInfobar}>
@@ -85,6 +84,7 @@ const Post = ({ post }: { post: Comment }) => {
           </div>
         </div>
       )}
+      <span className={styles.loadingString}>{loadingString && loadingString}</span>
     </>
   );
 };

src/views/settings/avatar-settings/avatar-settings.module.css

@@ -14,6 +14,15 @@
   height: 70px;
 }
 
+.emptyAvatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  cursor: pointer;
+}
+
 .avatarSettingsForm {
   padding-top: 10px;
 }

src/views/settings/avatar-settings/avatar-settings.tsx

@@ -5,11 +5,13 @@ import styles from './avatar-settings.module.css';
 import { Trans, useTranslation } from 'react-i18next';
 
 interface AvatarSettingsProps {
+  areSettingsShown?: boolean;
   avatar?: any;
   showSettings?: () => void;
 }
 
-const AvatarPreview = ({ avatar, showSettings }: AvatarSettingsProps) => {
+const AvatarPreview = ({ areSettingsShown, avatar, showSettings }: AvatarSettingsProps) => {
+  const { t } = useTranslation();
   const account = useAccount();
   let author = useMemo(() => ({ ...account?.author, avatar }), [account, avatar]);
 
@@ -29,8 +31,14 @@ const AvatarPreview = ({ avatar, showSettings }: AvatarSettingsProps) => {
 
   return (
     <>
-      <div className={styles.avatar} onClick={showSettings}>
-        {imageUrl && state !== 'initializing' && <img src={imageUrl} alt='' />}
+      <div className={styles.avatar}>
+        {imageUrl && state !== 'initializing' ? (
+          <img src={imageUrl} alt='avatar' />
+        ) : (
+          <span className={styles.emptyAvatar} onClick={showSettings}>
+            {areSettingsShown ? '–' + t('hide') : '+' + t('add')}
+          </span>
+        )}
       </div>
       {state !== 'succeeded' && account?.author?.avatar && (
         <div className={styles.state}>
@@ -120,7 +128,7 @@ const AvatarSettings = () => {
 
   return (
     <div className={styles.avatarSettings}>
-      <AvatarPreview avatar={avatar} showSettings={() => setShowSettings(!showSettings)} />
+      <AvatarPreview avatar={avatar} showSettings={() => setShowSettings(!showSettings)} areSettingsShown={showSettings} />
       {showSettings && (
         <div className={styles.avatarSettingsForm}>
           <div className={styles.avatarSettingInput}>

src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx

@@ -47,27 +47,23 @@ const useSubplebbitSettingsStore = create<SubplebbitSettingsState>((set) => ({
   settings: undefined,
   subplebbitAddress: undefined,
   publishSubplebbitEditOptions: {},
-  setSubplebbitSettingsStore: ({ challenges, title, description, address, suggested, rules, roles, settings, subplebbitAddress }) =>
+  setSubplebbitSettingsStore: (props) =>
     set((state) => {
       const nextState = { ...state };
-      if (challenges !== undefined) nextState.challenges = challenges;
-      if (title !== undefined) nextState.title = title;
-      if (description !== undefined) nextState.description = description;
-      if (address !== undefined) nextState.address = address;
-      if (suggested?.avatarUrl !== undefined) {
-        nextState.suggested = { ...state.suggested, avatarUrl: suggested.avatarUrl };
-      }
-      if (rules !== undefined) nextState.rules = rules;
-      if (roles !== undefined) nextState.roles = roles;
-      if (settings?.challenges !== undefined) {
-        nextState.settings = { ...state.settings, challenges: settings.challenges };
-      }
-      if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress;
-
-      nextState.publishSubplebbitEditOptions = {
-        ...nextState,
-      };
-
+      Object.entries(props).forEach(([key, value]) => {
+        if (value !== undefined) {
+          (nextState as any)[key] = value;
+        }
+      });
+      const editOptions: Partial<SubplebbitSettingsState> = {};
+      if (nextState.title !== undefined) editOptions.title = nextState.title;
+      if (nextState.description !== undefined) editOptions.description = nextState.description;
+      if (nextState.address !== undefined) editOptions.address = nextState.address;
+      if (nextState.suggested !== undefined) editOptions.suggested = nextState.suggested;
+      if (nextState.rules !== undefined) editOptions.rules = nextState.rules;
+      if (nextState.roles !== undefined) editOptions.roles = nextState.roles;
+      if (nextState.settings !== undefined) editOptions.settings = nextState.settings;
+      nextState.publishSubplebbitEditOptions = editOptions;
       return nextState;
     }),
   resetSubplebbitSettingsStore: () =>

yarn.lock

@@ -3450,6 +3450,68 @@
     uuid "9.0.1"
     viem "1.5.2"
 
+"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89":
+  version "0.0.3"
+  resolved "https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89"
+  dependencies:
+    "@bonfida/spl-name-service" "2.3.8"
+    "@chainsafe/libp2p-gossipsub" "12.0.0"
+    "@chainsafe/libp2p-noise" "15.0.0"
+    "@chainsafe/libp2p-yamux" "6.0.2"
+    "@ensdomains/eth-ens-namehash" "2.0.15"
+    "@keyv/sqlite" "3.6.7"
+    "@libp2p/autonat" "1.0.12"
+    "@libp2p/bootstrap" "10.0.15"
+    "@libp2p/circuit-relay-v2" "^1.0.15"
+    "@libp2p/identify" "1.0.14"
+    "@libp2p/kad-dht" "12.0.7"
+    "@libp2p/mplex" "10.0.15"
+    "@libp2p/peer-id-factory" "4.0.6"
+    "@libp2p/webrtc" "4.0.19"
+    "@libp2p/webtransport" "4.0.19"
+    "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger#355a96d7659ed820047980049dfa627d30d83a69"
+    "@plebbit/proper-lockfile" "github:plebbit/node-proper-lockfile#7fd6332117340c1d3d98dd0afee2d31cc06f72b8"
+    "@types/proper-lockfile" "4.1.2"
+    "@types/uuid" "8.3.4"
+    assert "2.1.0"
+    better-sqlite3 "9.3.0"
+    buffer "6.0.3"
+    captcha-canvas "3.2.1"
+    cbor "9.0.1"
+    debounce "1.2.1"
+    err-code "3.0.1"
+    ethers "6.10.0"
+    ext-name "5.0.0"
+    file-type "16.5.4"
+    hpagent "1.2.0"
+    ipfs-only-hash "4.0.0"
+    jose "4.11.0"
+    js-sha256 "0.9.0"
+    keyv "4.5.4"
+    knex "3.1.0"
+    kubo-rpc-client "3.0.3"
+    libp2p "1.2.1"
+    libp2p-crypto "0.21.2"
+    limiter-es6-compat "2.1.2"
+    localforage "1.10.0"
+    lodash-es "4.17.21"
+    lru-cache "10.1.0"
+    open-graph-scraper "6.3.3"
+    p-limit "4.0.0"
+    p-timeout "6.1.2"
+    peer-id "0.16.0"
+    probe-image-size "7.2.3"
+    retry "0.13.1"
+    rpc-websockets "7.9.0"
+    safe-stable-stringify "2.4.3"
+    sha1-uint8array "0.10.7"
+    skia-canvas "1.0.0"
+    tiny-typed-emitter "2.1.0"
+    tinycache "1.1.2"
+    ts-custom-error "3.3.1"
+    uuid "9.0.1"
+    viem "1.5.2"
+
 "@plebbit/plebbit-logger@github:plebbit/plebbit-logger#355a96d7659ed820047980049dfa627d30d83a69":
   version "0.0.1"
   uid "355a96d7659ed820047980049dfa627d30d83a69"
@@ -3479,11 +3541,11 @@
     uuid "8.3.2"
     zustand "4.0.0"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#63833e978ca25f9846544d32b9c67810af0daf19":
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#176d361ce4dfecc4fdc3c3675a9777099d47d8ce":
   version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#63833e978ca25f9846544d32b9c67810af0daf19"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#176d361ce4dfecc4fdc3c3675a9777099d47d8ce"
   dependencies:
-    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#073d5f501ccf9521942d93f6522d1125058c196a"
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89"
     "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
     assert "2.0.0"
     ethers "5.6.9"