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

LinkItem: hack in onclick unread support for iframes

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-02-04 15:01:21 +10:00
parent 33eaccc589
commit 54dcb31414
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>