ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2025-01-07 07:30:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

removed false positive embeds

Browse Source
This commit is contained in:
rcrdlbl 2022-04-14 05:45:39 -04:00
parent 25d56c5cfd
commit 3ded98e052
3 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/logic/state/embed.tsx
View File

@ -23,7 +23,7 @@ const useEmbedState = create<EmbedState>((set, get) => ({
const search = new URLSearchParams({ const search = new URLSearchParams({
url url
}); });
const embed = await jsonFetch(`${OEMBED_PROVIDER}?${search.toString()}`); const embed = await jsonFetch(`${OEMBED_PROVIDER}?${search.toString()}`)
const { embeds: es } = get(); const { embeds: es } = get();
set({ embeds: { ...es, [url]: embed } }); set({ embeds: { ...es, [url]: embed } });
return embed; return embed;

5
pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx
View File

@ -8,8 +8,7 @@ import {
Box, Box,
CenterProps CenterProps
} from '@tlon/indigo-react'; } from '@tlon/indigo-react';
import { hasProvider } from 'oembed-parser'; import { AUDIO_REGEX, IMAGE_REGEX, validOembedCheck } from '~/views/components/RemoteContent';
import { AUDIO_REGEX, IMAGE_REGEX } from '~/views/components/RemoteContent';
import { AudioPlayer } from '~/views/components/AudioPlayer'; import { AudioPlayer } from '~/views/components/AudioPlayer';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { useHovering } from '~/logic/lib/util'; import { useHovering } from '~/logic/lib/util';
@ -57,7 +56,7 @@ export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
const isImage = IMAGE_REGEX.test(url); const isImage = IMAGE_REGEX.test(url);
const isAudio = AUDIO_REGEX.test(url); const isAudio = AUDIO_REGEX.test(url);
const isOembed = hasProvider(url); const isOembed = validOembedCheck(url);
const history = useHistory(); const history = useHistory();
const { hovering, bind } = useHovering(); const { hovering, bind } = useHovering();
const onClick = () => { const onClick = () => {

22
pkg/interface/src/views/components/RemoteContent/index.tsx
View File

@ -7,6 +7,7 @@ import {
RemoteContentOembed, RemoteContentOembed,
RemoteContentVideoEmbed RemoteContentVideoEmbed
} from './embed'; } from './embed';
import { useEmbed } from '~/logic/state/embed';
import { TruncatedText } from '~/views/components/TruncatedText'; import { TruncatedText } from '~/views/components/TruncatedText';
import { RemoteContentWrapper } from './wrapper'; import { RemoteContentWrapper } from './wrapper';
import AsyncFallback from '../AsyncFallback'; import AsyncFallback from '../AsyncFallback';
@ -43,6 +44,25 @@ export const IMAGE_REGEX = new RegExp(
export const AUDIO_REGEX = new RegExp(/(\.mp3|\.wav|\.ogg|\.m4a)$/i); export const AUDIO_REGEX = new RegExp(/(\.mp3|\.wav|\.ogg|\.m4a)$/i);
export const VIDEO_REGEX = new RegExp(/(\.mov|\.mp4|\.ogv)$/i); export const VIDEO_REGEX = new RegExp(/(\.mov|\.mp4|\.ogv)$/i);
// This is used to prevent our oembed parser from
// trying to embed facebook/instagram links, which require an API key
const isFacebookGraphDependent = (url: string) => {
const caseDesensitizedURL = url.toLowerCase()
return (caseDesensitizedURL.includes('facebook.com') || caseDesensitizedURL.includes('instagram.com'))
}
export const validOembedCheck = (url: string) => {
if (hasProvider(url) && !isFacebookGraphDependent(url)) {
const oembed = useEmbed(url)
const embed = oembed.read()
if (!embed.hasOwnProperty("error")) {
return true
}
}
return false
}
const emptyRef = () => {}; const emptyRef = () => {};
export function RemoteContent(props: RemoteContentProps) { export function RemoteContent(props: RemoteContentProps) {
const { const {
@ -57,7 +77,7 @@ export function RemoteContent(props: RemoteContentProps) {
const isImage = IMAGE_REGEX.test(url); const isImage = IMAGE_REGEX.test(url);
const isAudio = AUDIO_REGEX.test(url); const isAudio = AUDIO_REGEX.test(url);
const isVideo = VIDEO_REGEX.test(url); const isVideo = VIDEO_REGEX.test(url);
const isOembed = hasProvider(url); const isOembed = validOembedCheck(url);
const wrapperProps = { const wrapperProps = {
url, url,
tall, tall,