From 8665905a05b275334cb325538d04ef28353a341f Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Fri, 7 Mar 2025 15:16:52 +0100
Subject: [PATCH] Round Video: Mark as read when played (#5705)

---
 src/components/common/Audio.scss                    | 12 +++++-------
 src/components/common/Audio.tsx                     |  4 ++--
 src/components/middle/message/RoundVideo.scss       |  6 ++++++
 src/components/middle/message/RoundVideo.tsx        | 13 ++++++++++++-
 src/components/middle/message/_message-content.scss |  2 +-
 src/global/helpers/messageMedia.ts                  |  4 ++--
 6 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/common/Audio.scss b/src/components/common/Audio.scss
index 58f629094..132082441 100644
--- a/src/components/common/Audio.scss
+++ b/src/components/common/Audio.scss
@@ -181,13 +181,11 @@
     align-items: flex-end;
 
     &.unread::after {
-      content: "";
-      position: relative;
-      margin: 0 0 0.375rem 0.25rem;
-      width: 0.4375rem;
-      height: 0.4375rem;
-      border-radius: 50%;
-      background-color: var(--accent-color);
+      content: "•";
+      font-size: 2rem;
+      line-height: 1.3125rem;
+      color: var(--accent-color);
+      margin-inline-start: 0.125rem;
     }
   }
 
diff --git a/src/components/common/Audio.tsx b/src/components/common/Audio.tsx
index deeaab8c5..15657c3f5 100644
--- a/src/components/common/Audio.tsx
+++ b/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) {
diff --git a/src/components/middle/message/RoundVideo.scss b/src/components/middle/message/RoundVideo.scss
index 6cfacbc42..1bdcf00ce 100644
--- a/src/components/middle/message/RoundVideo.scss
+++ b/src/components/middle/message/RoundVideo.scss
@@ -94,4 +94,10 @@
       opacity: 0.8;
     }
   }
+
+  .unread::after {
+    content: "•";
+    font-size: 2rem;
+    margin-inline-start: 0.125rem;
+  }
 }
diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx
index a8c46a21a..6a668a66d 100644
--- a/src/components/middle/message/RoundVideo.tsx
+++ b/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>
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index 6d8633c32..68106c10e 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/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 {
diff --git a/src/global/helpers/messageMedia.ts b/src/global/helpers/messageMedia.ts
index 45e4222da..0cfdb0c1c 100644
--- a/src/global/helpers/messageMedia.ts
+++ b/src/global/helpers/messageMedia.ts
@@ -665,8 +665,8 @@ export function getIsDownloading(activeDownloads: ActiveDownloads, media: Downlo
 }
 
 export function getTimestampableMedia(message: MediaContainer) {
-  return getMessageVideo(message)
-    || getMessageWebPageVideo(message)
+  const video = getMessageVideo(message) || getMessageWebPageVideo(message);
+  return (video && !video.isRound && !video.isGif ? video : undefined)
     || getMessageAudio(message)
     || getMessageVoice(message);
 }