yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Functional Component Refactor: Pitch, Prezi, Spotify, Trello (#4264)

Browse Source
This commit is contained in:
mastqe
2022-10-15 10:02:02 -04:00
committed by GitHub
parent 7b69f7a6e2
commit ca31823228
4 changed files with 77 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
shared/editor/embeds/Pitch.tsx
View File

@@ -2,22 +2,22 @@ import * as React from "react";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https?://app\\.pitch\\.com/app/(?:presentation/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|public/player)/(.*)$"
);
export default class Pitch extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const shareId = this.props.attrs.matches[1];
return (
<Frame
{...this.props}
src={`https://pitch.com/embed/${shareId}`}
title="Pitch Embed"
height="414px"
/>
);
}
function Pitch(props: Props) {
const shareId = props.attrs.matches[1];
return (
<Frame
{...props}
src={`https://pitch.com/embed/${shareId}`}
title="Pitch Embed"
height="414px"
/>
);
}
Pitch.ENABLED = [
new RegExp(
"^https?://app\\.pitch\\.com/app/(?:presentation/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|public/player)/(.*)$"
),
];
export default Pitch;

18
shared/editor/embeds/Prezi.tsx
View File

@@ -2,15 +2,11 @@ import * as React from "react";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https://prezi\\.com/view/(.*)$");
export default class Prezi extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const url = this.props.attrs.href.replace(/\/embed$/, "");
return (
<Frame {...this.props} src={`${url}/embed`} title="Prezi Embed" border />
);
}
function Prezi(props: Props) {
const url = props.attrs.href.replace(/\/embed$/, "");
return <Frame {...props} src={`${url}/embed`} title="Prezi Embed" border />;
}
Prezi.ENABLED = [new RegExp("^https://prezi\\.com/view/(.*)$")];
export default Prezi;

63
shared/editor/embeds/Spotify.tsx
View File

@@ -1,42 +1,39 @@
import * as React from "react";
import Frame from "../components/Frame";
const URL_REGEX = new RegExp("https?://open\\.spotify\\.com/(.*)$");
import { EmbedProps as Props } from ".";
export default class Spotify extends React.Component<Props> {
static ENABLED = [URL_REGEX];
get pathname() {
try {
const parsed = new URL(this.props.attrs.href);
return parsed.pathname;
} catch (err) {
return "";
}
function Spotify(props: Props) {
let pathname = "";
try {
const parsed = new URL(props.attrs.href);
pathname = parsed.pathname;
} catch (err) {
pathname = "";
}
render() {
const normalizedPath = this.pathname.replace(/^\/embed/, "/");
let height;
const normalizedPath = pathname.replace(/^\/embed/, "/");
let height;
if (normalizedPath.includes("episode") || normalizedPath.includes("show")) {
height = 232;
} else if (normalizedPath.includes("track")) {
height = 80;
} else {
height = 380;
}
return (
<Frame
{...this.props}
width="100%"
height={`${height}px`}
src={`https://open.spotify.com/embed${normalizedPath}`}
title="Spotify Embed"
allow="encrypted-media"
/>
);
if (normalizedPath.includes("episode") || normalizedPath.includes("show")) {
height = 232;
} else if (normalizedPath.includes("track")) {
height = 80;
} else {
height = 380;
}
return (
<Frame
{...props}
width="100%"
height={`${height}px`}
src={`https://open.spotify.com/embed${normalizedPath}`}
title="Spotify Embed"
allow="encrypted-media"
/>
);
}
Spotify.ENABLED = [new RegExp("https?://open\\.spotify\\.com/(.*)$")];
export default Spotify;

46
shared/editor/embeds/Trello.tsx
View File

@@ -2,34 +2,32 @@ import * as React from "react";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /^https:\/\/trello\.com\/(c|b)\/([^/]*)(.*)?$/;
export default class Trello extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const { matches } = this.props.attrs;
const objectId = matches[2];
if (matches[1] === "c") {
return (
<Frame
width="316px"
height="158px"
src={`https://trello.com/embed/card?id=${objectId}`}
title={`Trello Card (${objectId})`}
/>
);
}
function Trello(props: Props) {
const { matches } = props.attrs;
const objectId = matches[2];
if (matches[1] === "c") {
return (
<Frame
{...this.props}
width="248px"
height="185px"
src={`https://trello.com/embed/board?id=${objectId}`}
title={`Trello Board (${objectId})`}
width="316px"
height="158px"
src={`https://trello.com/embed/card?id=${objectId}`}
title={`Trello Card (${objectId})`}
/>
);
}
return (
<Frame
{...props}
width="248px"
height="185px"
src={`https://trello.com/embed/board?id=${objectId}`}
title={`Trello Board (${objectId})`}
/>
);
}
Trello.ENABLED = [/^https:\/\/trello\.com\/(c|b)\/([^/]*)(.*)?$/];
export default Trello;