Merge pull request #4804 from coralproject/develop

v9.10.1

Author: tessalt

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "9.10.0",
+  "version": "9.10.1",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

client/src/core/client/stream/stream.tsx

@@ -2,6 +2,7 @@ import { EventEmitter2 } from "eventemitter2";
 /* eslint-disable no-restricted-globals */
 import React, {
   FunctionComponent,
+  ReactEventHandler,
   useCallback,
   useMemo,
   useState,
@@ -79,6 +80,13 @@ const hideStyle: React.CSSProperties = {
   border: "0",
 };
 
+interface LoadedCssResult {
+  id: string;
+  url: string;
+  succeed?: boolean;
+  error?: Error | string;
+}
+
 /**
  * Insert link tag is called by css loaders like style-loader or mini-css-extract plugin.
  * See webpack config.
@@ -124,48 +132,70 @@ export async function attach(options: AttachOptions) {
     onAuthError: onContextAuthError,
   });
 
-  // Amount of initial css files to be loaded.
-  let initialCSSFileNumber = options.cssAssets.length;
+  const internalCssUrls = options.cssAssets;
+  const customCssUrls: string[] = [];
 
   if (options.customCSSURL) {
-    initialCSSFileNumber++;
-  }
-  if (options.customFontsCSSURL) {
-    initialCSSFileNumber++;
+    customCssUrls.push(options.customCSSURL);
   }
   if (!options.disableDefaultFonts && options.defaultFontsCSSURL) {
-    initialCSSFileNumber++;
+    customCssUrls.push(options.defaultFontsCSSURL);
+  }
+  if (options.customFontsCSSURL) {
+    customCssUrls.push(options.customFontsCSSURL);
   }
 
-  // Current amount of loaded css files.
-  let cssLoaded = 0;
+  const expectedCssFiles = internalCssUrls.length + customCssUrls.length;
+  const processCssResults: LoadedCssResult[] = [];
 
   const Index: FunctionComponent = () => {
     // Determine whether css has finished loading, before rendering the stream to prevent
     // flash of unstyled content.
     const [isCSSLoaded, setIsCSSLoaded] = useState(false);
-    const [loadError, setLoadError] = useState(false);
+    const [hasCssLoadErrors, setHasCssLoadErrors] = useState(false);
 
     const handleLoadError = useCallback((href: string) => {
+      const message = `Failed to load CSS ${encodeURIComponent(href)}`;
+
       globalErrorReporter.report(
         // encode href, otherwise sentry will not send it.
-        `Failed to load CSS ${encodeURIComponent(href)}`
+        message
       );
-      setLoadError(true);
-      cssLoaded++;
-      // When amount of css loaded equals initial css file number, mark as ready.
-      if (cssLoaded === initialCSSFileNumber) {
-        setIsCSSLoaded(true);
-      }
-    }, []);
-    const handleCSSLoad = useCallback(() => {
-      cssLoaded++;
-      // When amount of css loaded equals initial css file number, mark as ready.
-      if (cssLoaded === initialCSSFileNumber) {
+
+      // eslint-disable-next-line no-console
+      console.warn(message);
+
+      processCssResults.push({
+        id: href,
+        url: href,
+        succeed: false,
+        error: message,
+      });
+
+      setHasCssLoadErrors(true);
+
+      if (processCssResults.length >= expectedCssFiles) {
         setIsCSSLoaded(true);
       }
     }, []);
 
+    const handleCSSLoad: ReactEventHandler<HTMLLinkElement> = useCallback(
+      (event) => {
+        const el = event.target as HTMLLinkElement;
+
+        processCssResults.push({
+          id: el.href,
+          url: el.href,
+          succeed: true,
+        });
+
+        if (processCssResults.length >= expectedCssFiles) {
+          setIsCSSLoaded(true);
+        }
+      },
+      []
+    );
+
     // CSS assets to be loaded inside of the shadow dom.
     const [shadowCSSAssets, setShadowCSSAssets] = useState<CSSAsset[]>(
       options.cssAssets.map(
@@ -222,7 +252,7 @@ export async function attach(options: AttachOptions) {
             if (linkTag.onload) {
               linkTag.onload(event.nativeEvent);
             }
-            handleCSSLoad();
+            handleCSSLoad(event);
           },
           handleLoadError
         ),
@@ -243,7 +273,7 @@ export async function attach(options: AttachOptions) {
       <EncapsulationContext.Provider value={encapsulationContext}>
         <ReactShadowRoot loadFonts>
           <ManagedCoralContextProvider>
-            {loadError && (
+            {hasCssLoadErrors && (
               // TODO: (cvle) localization?
               <CSSLoadError>
                 <div>Apologies, we weren't able to load some styles</div>

common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "common",
-  "version": "9.10.0",
+  "version": "9.10.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "common",
-  "version": "9.10.0",
+  "version": "9.10.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

locales/de-CH/stream.ftl

@@ -246,6 +246,11 @@ comments-reacted =
 comments-jumpToComment-title = Deine Antwort wird unten angezeigt
 comments-jumpToComment-GoToReply = Zur Antwort springen
 
+comments-refreshComments-closeButton = Schließen <icon></icon>
+  .aria-label = Schließen
+comments-refreshComments-refreshButton = <icon></icon> Neu laden
+  .aria-label = Neu laden
+
 ### Q&A
 
 general-tabBar-qaTab = Q&A

locales/de/stream.ftl

@@ -290,6 +290,11 @@ comments-mobileToolbar-nextUnread = Nächstes Ungelesenes
 comments-replyChangedWarning-theCommentHasJust =
   Dieser Kommentar wurde soeben bearbeitet. Die neueste Version wird oben angezeigt.
 
+comments-refreshComments-closeButton = Schließen <icon></icon>
+  .aria-label = Schließen
+comments-refreshComments-refreshButton = <icon></icon> Neu laden
+  .aria-label = Neu laden
+
 ### Q&A
 
 general-tabBar-qaTab = Fragen und Antworten

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "9.10.0",
+  "version": "9.10.1",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [