Merge pull request #4379 from urbit/lf/link-unreads

links: set read on iframe interaction

pkg/interface/src/views/apps/links/LinkWindow.tsx

@@ -84,19 +84,18 @@ export function LinkWindow(props: LinkWindowProps) {
           ...props,
           node,
           measure,
-          key: index.toString()
         };
         if(index.eq(first ?? bigInt.zero)) {
           return (
-            <>
+            <React.Fragment key={index.toString()}>
             <Col key={index.toString()} mx="auto" mt="4" maxWidth="768px" width="100%" flexShrink={0} px={3}>
               <LinkSubmit s3={props.s3} name={name} ship={ship.slice(1)} api={api} />
             </Col>
               <LinkItem {...linkProps} />
-            </>
+            </React.Fragment>
           )
         }
-        return <LinkItem {...linkProps} />;
+        return <LinkItem key={index.toString()} {...linkProps} />;
       }}
       loadRows={fetchLinks}
     />

pkg/interface/src/views/apps/links/components/LinkItem.tsx

@@ -35,6 +35,29 @@ export const LinkItem = (props: LinkItemProps) => {
   } = props;
 
   const ref = useRef<HTMLDivElement | null>(null);
+  const remoteRef = useRef<typeof RemoteContent | null>(null);
+
+  const markRead = useCallback(() => {
+    api.hark.markEachAsRead(props.association, '/', `/${index}`, 'link', 'link');
+  }, [props.association, index]);
+
+  useEffect(() => {
+    function onBlur() {
+      // FF will only update on next tick
+      setTimeout(() => {
+        console.log(remoteRef.current);
+        if(document.activeElement instanceof HTMLIFrameElement 
+          && remoteRef?.current?.containerRef?.contains(document.activeElement)) {
+          markRead();
+        }
+      });
+    }
+    window.addEventListener('blur', onBlur);
+    return () => {
+      window.removeEventListener('blur', onBlur);
+    }
+
+  }, [markRead]);
 
   const URLparser = new RegExp(
     /((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/
@@ -71,9 +94,6 @@ export const LinkItem = (props: LinkItemProps) => {
   const commColor = (props.unreads.graph?.[appPath]?.[`/${index}`]?.unreads ?? 0) > 0 ? 'blue' : 'gray';
   const isUnread = props.unreads.graph?.[appPath]?.['/']?.unreads?.has(node.post.index);
 
-  const markRead = () => {
-    api.hark.markEachAsRead(props.association, '/', `/${index}`, 'link', 'link');
-  }
 
 
   const onMeasure = useCallback(() => {
@@ -100,6 +120,7 @@ export const LinkItem = (props: LinkItemProps) => {
         onClick={markRead}
       >
         <RemoteContent
+          ref={r => { remoteRef.current = r}}
           url={contents[1].url}
           text={contents[0].text}
           unfold={true}
@@ -108,6 +129,7 @@ export const LinkItem = (props: LinkItemProps) => {
           oembedProps={{
             p: 2,
             className: 'links embed-container',
+            onClick: markRead
           }}
           imageProps={{
             marginLeft: 'auto',

pkg/interface/src/views/components/RemoteContent.tsx

@@ -31,6 +31,7 @@ const VIDEO_REGEX = new RegExp(/(mov|mp4|ogv)$/i);
 
 class RemoteContent extends PureComponent<RemoteContentProps, RemoteContentState> {
   private fetchController: AbortController | undefined;
+  containerRef: HTMLDivElement | null = null;
   constructor(props) {
     super(props);
     this.state = {
@@ -187,7 +188,8 @@ class RemoteContent extends PureComponent<RemoteContentProps, RemoteContentState
           >
             {this.state.embed && this.state.embed.html && this.state.unfold
             ? <EmbedContainer markup={this.state.embed.html}>
-              <div dangerouslySetInnerHTML={{__html: this.state.embed.html}}></div>
+              <div ref={el => { this.containerRef = el; }}
+                dangerouslySetInnerHTML={{__html: this.state.embed.html}}></div>
             </EmbedContainer>
             : null}
           </Box>
@@ -201,4 +203,4 @@ class RemoteContent extends PureComponent<RemoteContentProps, RemoteContentState
   }
 }
 
-export default withLocalState(RemoteContent, ['remoteContentPolicy']);
+export default withLocalState(RemoteContent, ['remoteContentPolicy']);