removed false positive embeds

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

View File

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

View File

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

View File

@ -7,6 +7,7 @@ import {
RemoteContentOembed,
RemoteContentVideoEmbed
} from './embed';
import { useEmbed } from '~/logic/state/embed';
import { TruncatedText } from '~/views/components/TruncatedText';
import { RemoteContentWrapper } from './wrapper';
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 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 = () => {};
export function RemoteContent(props: RemoteContentProps) {
const {
@ -57,7 +77,7 @@ export function RemoteContent(props: RemoteContentProps) {
const isImage = IMAGE_REGEX.test(url);
const isAudio = AUDIO_REGEX.test(url);
const isVideo = VIDEO_REGEX.test(url);
const isOembed = hasProvider(url);
const isOembed = validOembedCheck(url);
const wrapperProps = {
url,
tall,