Merge pull request #347 from plebbit/development

Development
plebbit · May 6, 2024 · ef45201 · ef45201
2 parents 30df74e + 1bc7102
commit ef45201
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="referrer" content="no-referrer" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="theme-color" content="#000000" />

diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
@@ -1,8 +1,7 @@
 .ellipsis:after {
   overflow: hidden;
   display: inline-block;
-  position: absolute;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
   -webkit-animation: ellipsis steps(4,end) 1500ms infinite;      
   animation: ellipsis steps(4,end) 1500ms infinite;
   content: "\2026"; /* ascii code for the ellipsis character */

diff --git a/src/components/post/embed/embed.tsx b/src/components/post/embed/embed.tsx
@@ -61,10 +61,11 @@ const YoutubeEmbed = ({ parsedUrl }: EmbedComponentProps) => {
         className={styles.videoEmbed}
         height='100%'
         width='100%'
+        referrerPolicy='origin'
         allow='accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share'
         allowFullScreen
         title={parsedUrl.href}
-        src={`https://www.youtube-nocookie.com/embed/${youtubeId}`}
+        src={`https://www.youtube.com/embed/${youtubeId}`}
       />
     );
   }

diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css
@@ -53,7 +53,6 @@ a {
 }
 
 .onlineLine {
-  text-transform: lowercase;
   padding-bottom: 5px;
 }
 

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -10,6 +10,7 @@ import Markdown from '../markdown';
 import SearchBar from '../search-bar';
 import SubscribeButton from '../subscribe-button';
 import packageJson from '../../../package.json';
+import LoadingEllipsis from '../loading-ellipsis';
 
 const { version } = packageJson;
 const commitRef = process.env.REACT_APP_COMMIT_REF;
@@ -20,6 +21,7 @@ interface sidebarProps {
   cid?: string;
   createdAt?: number;
   description?: string;
+  isSubCreatedButNotYetPublished?: boolean;
   downvoteCount?: number;
   roles?: Record<string, Role>;
   rules?: string[];
@@ -123,14 +125,30 @@ const downloadAppLink = (() => {
   }
 })();
 
-const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, roles, rules, timestamp = 0, title, updatedAt, upvoteCount = 0, settings }: sidebarProps) => {
+const Sidebar = ({
+  address,
+  cid,
+  createdAt,
+  description,
+  downvoteCount = 0,
+  isSubCreatedButNotYetPublished,
+  roles,
+  rules,
+  timestamp = 0,
+  title,
+  updatedAt,
+  upvoteCount = 0,
+  settings,
+}: sidebarProps) => {
   const { t } = useTranslation();
   const { allActiveUserCount, hourActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address });
   const isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 30;
   const onlineNotice = t('users_online', { count: hourActiveUserCount });
   const offlineNotice = updatedAt && t('posts_last_synced', { dateAgo: getFormattedTimeAgo(updatedAt) });
   const onlineStatus = isOnline ? onlineNotice : offlineNotice;
 
+  const subCreatedButNotYetPublishedStatus = <LoadingEllipsis string='Publishing community over IPFS' />;
+
   const location = useLocation();
   const params = useParams();
   const isInAboutView = isAboutView(location.pathname);
@@ -208,7 +226,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
           </div>
           <div className={styles.onlineLine}>
             <span className={`${styles.onlineIndicator} ${isOnline ? styles.online : styles.offline}`} title={isOnline ? t('online') : t('offline')} />
-            <span>{onlineStatus}</span>
+            <span>{isSubCreatedButNotYetPublished ? subCreatedButNotYetPublishedStatus : onlineStatus}</span>
           </div>
           {description && (
             <div>

diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
@@ -63,6 +63,7 @@ const useSubplebbitSettingsStore = create<SubplebbitSettingsState>((set) => ({
       if (nextState.rules !== undefined) editOptions.rules = nextState.rules;
       if (nextState.roles !== undefined) editOptions.roles = nextState.roles;
       if (nextState.settings !== undefined) editOptions.settings = nextState.settings;
+      if (nextState.subplebbitAddress !== undefined) editOptions.subplebbitAddress = nextState.subplebbitAddress;
       nextState.publishSubplebbitEditOptions = editOptions;
       return nextState;
     }),
@@ -834,7 +835,7 @@ const SubplebbitSettings = () => {
       setShowSaving(true);
       await publishSubplebbitEdit();
       setShowSaving(false);
-      alert(t('settings_saved', { subplebbitAddress: shortAddress }));
+      alert(t('settings_saved', { subplebbitAddress }));
     } catch (e) {
       if (e instanceof Error) {
         console.warn(e);

diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
@@ -21,12 +21,15 @@ const Subplebbit = () => {
   const subplebbitAddress = params.subplebbitAddress;
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { createdAt, description, roles, rules, shortAddress, state, title, updatedAt, settings } = subplebbit || {};
+  const { createdAt, description, roles, rules, shortAddress, started, state, title, updatedAt, settings } = subplebbit || {};
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType, filter: timeFilter });
-  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
 
+  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
   const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
 
+  let isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 30;
+  const isSubCreatedButNotYetPublished = typeof createdAt === 'number' && !updatedAt;
+
   const { blocked } = useBlock({ address: subplebbitAddress });
 
   useEffect(() => {
@@ -36,16 +39,18 @@ const Subplebbit = () => {
   const Footer = () => {
     let footerContent;
 
-    if (feed.length === 0) {
+    if (feed.length === 0 && isOnline) {
       if (blocked) {
         footerContent = t('you_blocked_community');
       } else {
         footerContent = t('no_posts');
       }
-    }
-
-    if (hasMore || subplebbitAddresses.length === 0) {
+    } else if (feed.length === 0 && started && isSubCreatedButNotYetPublished) {
+      footerContent = t('no_posts');
+    } else if (hasMore) {
       footerContent = loadingString;
+    } else {
+      return;
     }
 
     return <div className={styles.footer}>{footerContent}</div>;
@@ -74,6 +79,7 @@ const Subplebbit = () => {
           address={subplebbitAddress}
           createdAt={createdAt}
           description={description}
+          isSubCreatedButNotYetPublished={started && isSubCreatedButNotYetPublished}
           roles={roles}
           rules={rules}
           title={title}
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,6 @@ a { @@
     }
     .onlineLine {
-      text-transform: lowercase;
       padding-bottom: 5px;
     }
@@ Expand Down @@