Functional Component Refactor: Pitch, Prezi, Spotify, Trello (#4264)
This commit is contained in:
@@ -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];
|
||||
function Pitch(props: Props) {
|
||||
const shareId = props.attrs.matches[1];
|
||||
return (
|
||||
<Frame
|
||||
{...this.props}
|
||||
{...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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,23 +1,17 @@
|
||||
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() {
|
||||
function Spotify(props: Props) {
|
||||
let pathname = "";
|
||||
try {
|
||||
const parsed = new URL(this.props.attrs.href);
|
||||
return parsed.pathname;
|
||||
const parsed = new URL(props.attrs.href);
|
||||
pathname = parsed.pathname;
|
||||
} catch (err) {
|
||||
return "";
|
||||
}
|
||||
pathname = "";
|
||||
}
|
||||
|
||||
render() {
|
||||
const normalizedPath = this.pathname.replace(/^\/embed/, "/");
|
||||
const normalizedPath = pathname.replace(/^\/embed/, "/");
|
||||
let height;
|
||||
|
||||
if (normalizedPath.includes("episode") || normalizedPath.includes("show")) {
|
||||
@@ -30,7 +24,7 @@ export default class Spotify extends React.Component<Props> {
|
||||
|
||||
return (
|
||||
<Frame
|
||||
{...this.props}
|
||||
{...props}
|
||||
width="100%"
|
||||
height={`${height}px`}
|
||||
src={`https://open.spotify.com/embed${normalizedPath}`}
|
||||
@@ -38,5 +32,8 @@ export default class Spotify extends React.Component<Props> {
|
||||
allow="encrypted-media"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Spotify.ENABLED = [new RegExp("https?://open\\.spotify\\.com/(.*)$")];
|
||||
|
||||
export default Spotify;
|
||||
|
||||
@@ -2,13 +2,8 @@ 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;
|
||||
function Trello(props: Props) {
|
||||
const { matches } = props.attrs;
|
||||
const objectId = matches[2];
|
||||
|
||||
if (matches[1] === "c") {
|
||||
@@ -24,12 +19,15 @@ export default class Trello extends React.Component<Props> {
|
||||
|
||||
return (
|
||||
<Frame
|
||||
{...this.props}
|
||||
{...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;
|
||||
|
||||
Reference in New Issue
Block a user