ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-02 07:06:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
links: set read on iframe interaction
This commit is contained in:
matildepark 2021-02-04 19:36:52 -05:00 committed by GitHub
commit 0394e03920
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pkg/interface/src/views/apps/links/LinkWindow.tsx
View File

@ -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}
/>

28
pkg/interface/src/views/apps/links/components/LinkItem.tsx
View File

@ -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',

4
pkg/interface/src/views/components/RemoteContent.tsx
View File

@ -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>