iframes broken on some browsers, show link url
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
86906682f9
commit
e5f8bebb53
@ -3,15 +3,21 @@ const AppleMusicEmbed = ({ link }: { link: string }) => {
|
|||||||
const isSongLink = /\?i=\d+$/.test(convertedUrl);
|
const isSongLink = /\?i=\d+$/.test(convertedUrl);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<iframe
|
<>
|
||||||
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
|
<iframe
|
||||||
frameBorder="0"
|
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
frameBorder="0"
|
||||||
credentialless=""
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
height={isSongLink ? 175 : 450}
|
credentialless=""
|
||||||
style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
|
height={isSongLink ? 175 : 450}
|
||||||
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
|
style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
|
||||||
src={convertedUrl}></iframe>
|
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
|
||||||
|
src={convertedUrl}
|
||||||
|
/>
|
||||||
|
<a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -46,17 +46,22 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
|
|||||||
|
|
||||||
if (youtubeId) {
|
if (youtubeId) {
|
||||||
return (
|
return (
|
||||||
<iframe
|
<>
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
<iframe
|
||||||
credentialless=""
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
className="-mx-4 md:mx-0 w-max my-2"
|
credentialless=""
|
||||||
src={`https://www.youtube.com/embed/${youtubeId}`}
|
className="-mx-4 md:mx-0 w-max my-2"
|
||||||
title="YouTube video player"
|
src={`https://www.youtube.com/embed/${youtubeId}`}
|
||||||
key={youtubeId}
|
title="YouTube video player"
|
||||||
frameBorder="0"
|
key={youtubeId}
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
frameBorder="0"
|
||||||
allowFullScreen={true}
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
/>
|
allowFullScreen={true}
|
||||||
|
/>
|
||||||
|
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
|
||||||
|
{a}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
} else if (tidalId) {
|
} else if (tidalId) {
|
||||||
return <TidalEmbed link={a} />;
|
return <TidalEmbed link={a} />;
|
||||||
|
@ -18,6 +18,9 @@ const MixCloudEmbed = ({ link }: { link: string }) => {
|
|||||||
frameBorder="0"
|
frameBorder="0"
|
||||||
src={`https://www.mixcloud.com/widget/iframe/?hide_cover=1&${lightParams}&feed=%2F${feedPath}%2F`}
|
src={`https://www.mixcloud.com/widget/iframe/?hide_cover=1&${lightParams}&feed=%2F${feedPath}%2F`}
|
||||||
/>
|
/>
|
||||||
|
<a href={link} target="_blank" rel="noreferrer">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,13 +1,19 @@
|
|||||||
const SoundCloudEmbed = ({ link }: { link: string }) => {
|
const SoundCloudEmbed = ({ link }: { link: string }) => {
|
||||||
return (
|
return (
|
||||||
<iframe
|
<>
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
<iframe
|
||||||
credentialless=""
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
width="100%"
|
credentialless=""
|
||||||
height="166"
|
width="100%"
|
||||||
scrolling="no"
|
height="166"
|
||||||
allow="autoplay"
|
scrolling="no"
|
||||||
src={`https://w.soundcloud.com/player/?url=${link}`}></iframe>
|
allow="autoplay"
|
||||||
|
src={`https://w.soundcloud.com/player/?url=${link}`}
|
||||||
|
/>
|
||||||
|
<a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -2,16 +2,22 @@ const SpotifyEmbed = ({ link }: { link: string }) => {
|
|||||||
const convertedUrl = link.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
|
const convertedUrl = link.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<iframe
|
<>
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
<iframe
|
||||||
credentialless=""
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
style={{ borderRadius: 12 }}
|
credentialless=""
|
||||||
src={convertedUrl}
|
style={{ borderRadius: 12 }}
|
||||||
width="100%"
|
src={convertedUrl}
|
||||||
height="352"
|
width="100%"
|
||||||
frameBorder="0"
|
height="352"
|
||||||
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
frameBorder="0"
|
||||||
loading="lazy"></iframe>
|
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
<a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -53,8 +53,18 @@ const TidalEmbed = ({ link }: { link: string }) => {
|
|||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
const iframe = (
|
||||||
return <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} credentialless="" />;
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
|
<iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} credentialless="" />
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{iframe}
|
||||||
|
<a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TidalEmbed;
|
export default TidalEmbed;
|
||||||
|
@ -3,13 +3,18 @@ const TwitchEmbed = ({ link }: { link: string }) => {
|
|||||||
|
|
||||||
const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
|
const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
|
||||||
return (
|
return (
|
||||||
<iframe
|
<>
|
||||||
src={`https://player.twitch.tv/${args}`}
|
<iframe
|
||||||
className="w-max"
|
src={`https://player.twitch.tv/${args}`}
|
||||||
allowFullScreen={true}
|
className="w-max"
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
allowFullScreen={true}
|
||||||
credentialless=""
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
/>
|
credentialless=""
|
||||||
|
/>
|
||||||
|
<a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -2,15 +2,21 @@ const WavlakeEmbed = ({ link }: { link: string }) => {
|
|||||||
const convertedUrl = link.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
|
const convertedUrl = link.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<iframe
|
<>
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
<iframe
|
||||||
credentialless=""
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
style={{ borderRadius: 12 }}
|
credentialless=""
|
||||||
src={convertedUrl}
|
style={{ borderRadius: 12 }}
|
||||||
width="100%"
|
src={convertedUrl}
|
||||||
height="380"
|
width="100%"
|
||||||
frameBorder="0"
|
height="380"
|
||||||
loading="lazy"></iframe>
|
frameBorder="0"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
<a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
|
||||||
|
{link}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -10,7 +10,6 @@ import BackButton from "@/Components/Button/BackButton";
|
|||||||
import Collapsed from "@/Components/Collapsed";
|
import Collapsed from "@/Components/Collapsed";
|
||||||
import Note from "@/Components/Event/EventComponent";
|
import Note from "@/Components/Event/EventComponent";
|
||||||
import NoteGhost from "@/Components/Event/Note/NoteGhost";
|
import NoteGhost from "@/Components/Event/Note/NoteGhost";
|
||||||
import ScrollToTop from "@/Components/ScrollToTop";
|
|
||||||
import { chainKey } from "@/Utils/Thread/ChainKey";
|
import { chainKey } from "@/Utils/Thread/ChainKey";
|
||||||
import { ThreadContext } from "@/Utils/Thread/ThreadContext";
|
import { ThreadContext } from "@/Utils/Thread/ThreadContext";
|
||||||
import { ThreadContextWrapper } from "@/Utils/Thread/ThreadContextWrapper";
|
import { ThreadContextWrapper } from "@/Utils/Thread/ThreadContextWrapper";
|
||||||
|
@ -6,6 +6,7 @@ import { Outlet, useLocation } from "react-router-dom";
|
|||||||
import CloseButton from "@/Components/Button/CloseButton";
|
import CloseButton from "@/Components/Button/CloseButton";
|
||||||
import ErrorBoundary from "@/Components/ErrorBoundary";
|
import ErrorBoundary from "@/Components/ErrorBoundary";
|
||||||
import { LoginUnlock } from "@/Components/PinPrompt/PinPrompt";
|
import { LoginUnlock } from "@/Components/PinPrompt/PinPrompt";
|
||||||
|
import ScrollToTop from "@/Components/ScrollToTop";
|
||||||
import Toaster from "@/Components/Toaster/Toaster";
|
import Toaster from "@/Components/Toaster/Toaster";
|
||||||
import useLoginFeed from "@/Feed/LoginFeed";
|
import useLoginFeed from "@/Feed/LoginFeed";
|
||||||
import { useCommunityLeaders } from "@/Hooks/useCommunityLeaders";
|
import { useCommunityLeaders } from "@/Hooks/useCommunityLeaders";
|
||||||
@ -20,7 +21,6 @@ import { LoginStore } from "@/Utils/Login";
|
|||||||
|
|
||||||
import NavSidebar from "./NavSidebar";
|
import NavSidebar from "./NavSidebar";
|
||||||
import RightColumn from "./RightColumn";
|
import RightColumn from "./RightColumn";
|
||||||
import ScrollToTop from "@/Components/ScrollToTop";
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
@ -15,8 +15,6 @@ import { getNotificationContext } from "./getNotificationContext";
|
|||||||
import { NotificationGroup } from "./NotificationGroup";
|
import { NotificationGroup } from "./NotificationGroup";
|
||||||
const NotificationGraph = lazy(() => import("@/Pages/Notifications/NotificationChart"));
|
const NotificationGraph = lazy(() => import("@/Pages/Notifications/NotificationChart"));
|
||||||
|
|
||||||
import ScrollToTop from "@/Components/ScrollToTop";
|
|
||||||
|
|
||||||
export default function NotificationsPage({ onClick }: { onClick?: (link: NostrLink) => void }) {
|
export default function NotificationsPage({ onClick }: { onClick?: (link: NostrLink) => void }) {
|
||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const { isMuted } = useModeration();
|
const { isMuted } = useModeration();
|
||||||
|
Loading…
Reference in New Issue
Block a user