Round Video: Mark as read when played (#5705)

src/components/common/Audio.scss

@@ -181,13 +181,11 @@
     align-items: flex-end;
 
     &.unread::after {
-      content: "";
+      content: "•";
-      position: relative;
+      font-size: 2rem;
-      margin: 0 0 0.375rem 0.25rem;
+      line-height: 1.3125rem;
-      width: 0.4375rem;
+      color: var(--accent-color);
-      height: 0.4375rem;
+      margin-inline-start: 0.125rem;
-      border-radius: 50%;
-      background-color: var(--accent-color);
     }
   }
 

src/components/common/Audio.tsx

@@ -242,10 +242,10 @@ const Audio: FC<OwnProps> = ({
   });
 
   useEffect(() => {
-    if (onReadMedia && isMediaUnread && (isPlaying || isDownloading)) {
+    if (onReadMedia && isMediaUnread && isPlaying) {
       onReadMedia();
     }
-  }, [isPlaying, isMediaUnread, onReadMedia, isDownloading]);
+  }, [isPlaying, isMediaUnread, onReadMedia]);
 
   const handleDownloadClick = useLastCallback(() => {
     if (isDownloading) {

src/components/middle/message/RoundVideo.scss

@@ -94,4 +94,10 @@
       opacity: 0.8;
     }
   }
+
+  .unread::after {
+    content: "•";
+    font-size: 2rem;
+    margin-inline-start: 0.125rem;
+  }
 }

src/components/middle/message/RoundVideo.tsx

@@ -91,6 +91,7 @@ const RoundVideo: FC<OwnProps> = ({
   const isIntersecting = useIsIntersecting(ref, observeIntersection);
 
   const video = message.content.video!;
+  const isMediaUnread = message.isMediaUnread;
 
   const [isLoadAllowed, setIsLoadAllowed] = useState(canAutoLoad);
   const shouldLoad = Boolean(isLoadAllowed && isIntersecting);
@@ -219,6 +220,12 @@ const RoundVideo: FC<OwnProps> = ({
     togglePlaying();
   });
 
+  useEffect(() => {
+    if (onReadMedia && isMediaUnread && isActivated) {
+      onReadMedia();
+    }
+  }, [isActivated, isMediaUnread, onReadMedia]);
+
   const handleTimeUpdate = useLastCallback((e: React.UIEvent<HTMLVideoElement>) => {
     const playerEl = e.currentTarget;
     setProgress(playerEl.currentTime / playerEl.duration);
@@ -322,7 +329,11 @@ const RoundVideo: FC<OwnProps> = ({
         <Icon name="download" />
       )}
       {!isInOneTimeModal && (
-        <div className="message-media-duration">
+        <div
+          className={buildClassName(
+            'message-media-duration', isMediaUnread && 'unread',
+          )}
+        >
           {isActivated ? formatMediaDuration(playerRef.current!.currentTime) : formatMediaDuration(video.duration)}
           {(!isActivated || playerRef.current!.paused) && <Icon name="muted" />}
         </div>

src/components/middle/message/_message-content.scss

@@ -788,7 +788,7 @@
   .message-media-duration .icon-muted {
     vertical-align: -0.1875rem;
     margin-left: 0.375rem;
-    font-size: 1.0625rem;
+    font-size: 1rem;
   }
 
   .message-media-duration .playback-failed {

src/global/helpers/messageMedia.ts

@@ -665,8 +665,8 @@ export function getIsDownloading(activeDownloads: ActiveDownloads, media: Downlo
 }
 
 export function getTimestampableMedia(message: MediaContainer) {
-  return getMessageVideo(message)
+  const video = getMessageVideo(message) || getMessageWebPageVideo(message);
-    || getMessageWebPageVideo(message)
+  return (video && !video.isRound && !video.isGif ? video : undefined)
     || getMessageAudio(message)
     || getMessageVoice(message);
 }