Merge branch 'media-compat' into beta

src/components/post/attachments/visual/attachment.jsx

@@ -44,11 +44,15 @@ export function VisualAttachment({
   const pixRatio = usePixelRatio();
 
   const handleMouseEnter = useEvent((e) => {
-    e.target.play();
+    if (window.matchMedia?.('(hover: hover)').matches) {
+      e.target.play();
+    }
   });
   const handleMouseLeave = useEvent((e) => {
-    e.target.pause();
-    e.target.currentTime = 0;
+    if (window.matchMedia?.('(hover: hover)').matches) {
+      e.target.pause();
+      e.target.currentTime = 0;
+    }
   });
   const [currentTime, setCurrentTime] = useState(0);
   const handleTimeUpdate = useEvent((e) => setCurrentTime(Math.floor(e.target.currentTime)));

src/components/uploader/progress.jsx

@@ -1,3 +1,4 @@
+import { filesize } from 'filesize';
 import cn from 'classnames';
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -7,6 +8,7 @@ import { ButtonLink } from '../button-link';
 import { Icon } from '../fontawesome-icons';
 import { initialAsyncState } from '../../redux/async-helpers';
 import style from './progress.module.scss';
+import { useSpeed } from './use-speed';
 
 export function UploadProgress({ uploadIds, statuses, unfinishedFiles }) {
   return (
@@ -26,39 +28,41 @@ export function UploadProgress({ uploadIds, statuses, unfinishedFiles }) {
 function ProgressRow({ id, status, file }) {
   const dispatch = useDispatch();
   const allUploads = useSelector((state) => state.attachmentUploads);
+  const upl = allUploads[id];
 
   const remove = useCallback(() => dispatch(resetAttachmentUpload(id)), [dispatch, id]);
   const retry = useCallback(() => dispatch(createAttachment(id, file)), [dispatch, id, file]);
 
+  const speed = useSpeed(status.progress * (upl?.size ?? 0));
+
   if (!status.loading && !status.error) {
     return null;
   }
 
   return (
     <div className={cn(style.row, status.error && style.rowError)}>
-      <div className={style.name}>{allUploads[id]?.name ?? 'File'}</div>
-      <div
-        className={style.progress}
-        style={{ width: `${(status.error ? 1 : status.progress) * 100}%` }}
-      />
-      {status.error && (
+      <div className={style.name}>{upl?.name ?? 'File'}</div>
+      {status.error ? (
         <>
-          <ButtonLink className={style.closeIcon} onClick={remove} data-id={id}>
-            <Icon icon={faTimesCircle} />
-          </ButtonLink>
           <div className={style.error}>
             <Icon icon={faExclamationTriangle} /> {status.errorText}
-            {status.errorText === 'Network error' && (
-              <>
-                &nbsp;
-                <button className="btn btn-xs btn-default" onClick={retry}>
-                  Retry
-                </button>
-              </>
-            )}
           </div>
+          {status.errorText === 'Network error' && (
+            <button className="btn btn-xs btn-default" onClick={retry}>
+              Retry
+            </button>
+          )}
+          <ButtonLink className={style.closeIcon} onClick={remove} data-id={id}>
+            <Icon icon={faTimesCircle} />
+          </ButtonLink>
         </>
+      ) : (
+        <div className={style.speed}>{filesize(speed, { bits: true })}/s</div>
       )}
+      <div
+        className={style.progress}
+        style={{ width: `${(status.error ? 1 : status.progress) * 100}%` }}
+      />
     </div>
   );
 }

src/components/uploader/progress.module.scss

@@ -23,6 +23,9 @@
   border-bottom: 2px solid var(--progress-bg);
   position: relative;
   margin-bottom: 0.33em;
+  display: flex;
+  align-items: flex-end;
+  gap: 1em;
 }
 
 .rowError {
@@ -49,13 +52,17 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin-right: 20px;
+  flex: 1;
+}
+
+.speed {
+  flex: none;
+  opacity: 0.8;
+  font-size: 0.9em;
 }
 
 .closeIcon {
-  position: absolute;
-  top: -4px;
-  right: 0;
+  flex: none;
   padding: 4px;
   display: flex;
   border-radius: 50%;

src/components/uploader/use-speed.js

@@ -0,0 +1,34 @@
+import { useRef } from 'react';
+
+const smoothInterval = 2; // 2 seconds
+
+export function useSpeed(bytes) {
+  const state = useRef({
+    lastBytes: null,
+    lastTime: null,
+    currentSpeed: 0,
+  });
+
+  const { lastBytes, lastTime, currentSpeed } = state.current;
+
+  const time = Date.now() / 1000;
+  state.current.lastTime = time;
+  state.current.lastBytes = bytes;
+
+  if (lastTime === null) {
+    // First call
+    return 0;
+  }
+
+  const elapsed = time - lastTime;
+  const bytesDiff = bytes - lastBytes;
+  const momentSpeed = bytesDiff / elapsed;
+
+  const alpha = 1 - Math.exp(-elapsed / smoothInterval);
+  const smoothedSpeed =
+    currentSpeed > 0 ? momentSpeed * alpha + currentSpeed * (1 - alpha) : momentSpeed;
+
+  state.current.currentSpeed = smoothedSpeed;
+
+  return smoothedSpeed;
+}

src/redux/action-creators.js

@@ -1150,7 +1150,7 @@ export function createAttachment(uploadId, file) {
   return {
     type: ActionTypes.CREATE_ATTACHMENT,
     asyncOperation: Api.createAttachment,
-    payload: { uploadId, file, name: file.name },
+    payload: { uploadId, file, name: file.name, size: file.size },
   };
 }
 

src/redux/reducers/attachment-uploads.js

@@ -17,6 +17,7 @@ export function attachmentUploads(state = defaultState, action) {
         [id]: {
           ...state[id],
           name: action.payload.name,
+          size: action.payload.size,
           attachment: null,
         },
       };