Merge branch 'main' into feat/create-post-file-upload-a11y

.eslintrc.json

@@ -21,10 +21,6 @@
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
     "arrow-body-style": 0,
-    "jsx-a11y/anchor-is-valid": 1,
-    "jsx-a11y/aria-role": 1,
-    "jsx-a11y/click-events-have-key-events": 1,
-    "jsx-a11y/no-static-element-interactions": 1,
     "curly": 0,
     "eol-last": 0,
     "eqeqeq": 0,

src/assets/css/main.css

@@ -84,7 +84,7 @@
   margin-top: -6.5px;
 }
 
-.post-title a:visited {
+.post-title a:visited:not(:hover) {
   color: var(--bs-gray) !important;
 }
 

src/server/handlers/theme-handler.ts

@@ -11,22 +11,21 @@ export default async (req: Request, res: Response) => {
   const theme = req.params.name;
 
   if (!theme.endsWith(".css")) {
-    res.statusCode = 400;
-    res.send("Theme must be a css file");
+    return res.status(400).send("Theme must be a css file");
   }
 
   const customTheme = path.resolve(extraThemesFolder, theme);
 
   if (existsSync(customTheme)) {
-    res.sendFile(customTheme);
+    return res.sendFile(customTheme);
   } else {
     const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
 
     // If the theme doesn't exist, just send litely
     if (existsSync(internalTheme)) {
-      res.sendFile(internalTheme);
+      return res.sendFile(internalTheme);
     } else {
-      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
+      return res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
     }
   }
 };

src/server/middleware/set-default-csp.ts

@@ -3,7 +3,7 @@ import type { NextFunction, Response } from "express";
 export default function ({ res, next }: { res: Response; next: NextFunction }) {
   res.setHeader(
     "Content-Security-Policy",
-    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
+    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src * data:`
   );
 
   next();

src/shared/components/post/metadata-card.tsx

@@ -1,8 +1,7 @@
-import { Component, linkEvent } from "inferno";
+import { Component } from "inferno";
 import { Post } from "lemmy-js-client";
 import * as sanitizeHtml from "sanitize-html";
 import { relTags } from "../../config";
-import { I18NextService } from "../../services";
 import { Icon } from "../common/icon";
 
 interface MetadataCardProps {
@@ -17,10 +16,6 @@ export class MetadataCard extends Component<
   MetadataCardProps,
   MetadataCardState
 > {
-  state: MetadataCardState = {
-    expanded: false,
-  };
-
   constructor(props: any, context: any) {
     super(props, context);
   }
@@ -29,7 +24,7 @@ export class MetadataCard extends Component<
     const post = this.props.post;
     return (
       <>
-        {!this.state.expanded && post.embed_title && post.url && (
+        {post.embed_title && post.url && (
           <div className="post-metadata-card card border-secondary mt-3 mb-2">
             <div className="row">
               <div className="col-12">
@@ -61,34 +56,12 @@ export class MetadataCard extends Component<
                       }}
                     />
                   )}
-                  {post.embed_video_url && (
-                    <button
-                      className="mt-2 btn btn-secondary text-monospace"
-                      onClick={linkEvent(this, this.handleIframeExpand)}
-                    >
-                      {I18NextService.i18n.t("expand_here")}
-                    </button>
-                  )}
                 </div>
               </div>
             </div>
           </div>
         )}
-        {this.state.expanded && post.embed_video_url && (
-          <div className="ratio ratio-16x9">
-            <iframe
-              allowFullScreen
-              className="post-metadata-iframe"
-              src={post.embed_video_url}
-              title={post.embed_title}
-            ></iframe>
-          </div>
-        )}
       </>
     );
   }
-
-  handleIframeExpand(i: MetadataCard) {
-    i.setState({ expanded: !i.state.expanded });
-  }
 }

src/shared/components/post/post-listing.tsx

@@ -262,6 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const { post } = this.postView;
     const { url } = post;
 
+    // if direct video link
     if (url && isVideo(url)) {
       return (
         <div className="embed-responsive mt-3">
@@ -272,6 +273,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       );
     }
 
+    // if embedded video link
+    if (url && post.embed_video_url) {
+      return (
+        <div className="ratio ratio-16x9">
+          <iframe
+            allowFullScreen
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+            title={post.embed_title}
+          ></iframe>
+        </div>
+      );
+    }
+
     return <></>;
   }
 
@@ -338,7 +353,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </a>
       );
     } else if (url) {
-      if (!this.props.hideImage && isVideo(url)) {
+      if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
         return (
           <a
             className="text-body"
@@ -382,7 +397,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <span className="small">
-        <PersonListing person={post_view.creator} />
+        <PersonListing person={post_view.creator} muted={true} />
         {this.creatorIsMod_ && (
           <span className="mx-1 badge text-bg-light">
             {I18NextService.i18n.t("mod")}
@@ -429,8 +444,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <Link
         className={`d-inline ${
           !post.featured_community && !post.featured_local
-            ? "text-body"
-            : "text-primary"
+            ? "link-dark"
+            : "link-primary"
         }`}
         to={`/post/${post.id}`}
         title={I18NextService.i18n.t("comments")}
@@ -455,8 +470,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <a
                 className={
                   !post.featured_community && !post.featured_local
-                    ? "text-body"
-                    : "text-primary"
+                    ? "link-dark"
+                    : "link-primary"
                 }
                 href={url}
                 title={url}
@@ -539,10 +554,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const url = post.url;
 
     return (
-      <p className="d-flex text-muted align-items-center gap-1 small m-0">
+      <p className="small m-0">
         {url && !(hostname(url) === getExternalHost()) && (
           <a
-            className="text-muted fst-italic"
+            className="fst-italic link-dark link-opacity-75 link-opacity-100-hover"
             href={url}
             title={url}
             rel={relTags}
@@ -726,9 +741,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <Icon icon="message-square" classes="me-1" inline />
         {post_view.counts.comments}
         {this.unreadCount && (
-          <span className="text-muted fst-italic">
+          <>
+            {" "}
+            <span className="fst-italic">
               ({this.unreadCount} {I18NextService.i18n.t("new")})
             </span>
+          </>
         )}
       </Link>
     );

src/shared/components/search.tsx

@@ -332,7 +332,9 @@ export class Search extends Component<any, SearchState> {
   }
 
   async componentDidMount() {
-    if (!this.state.isIsomorphic) {
+    if (
+      !(this.state.isIsomorphic || this.props.history.location.state?.searched)
+    ) {
       const promises = [this.fetchCommunities()];
       if (this.state.searchText) {
         promises.push(this.search());
@@ -1095,7 +1097,9 @@ export class Search extends Component<any, SearchState> {
       sort: sort ?? urlSort,
     };
 
-    this.props.history.push(`/search${getQueryString(queryParams)}`);
+    this.props.history.push(`/search${getQueryString(queryParams)}`, {
+      searched: true,
+    });
 
     await this.search();
   }