Amp support for Tiktok Videos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/amp",
-  "version": "2.19.0",
+  "version": "2.20.0-tiktok-task.0",
   "description": "Quintype's AMP component library for publisher apps to create amp layouts",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/__fixtures__/index.ts

@@ -6,6 +6,7 @@ import { seo } from "./seo.fixture";
 import { allElementsStory } from "./all-element-story.fixture";
 import { liveBlogStory } from "./live-blog-story.fixture";
 import { visualStory, card } from "./visual-story.fixture";
+import { tiktokElement } from "./tiktok.fixture";
 
 export {
   allElementsStory,
@@ -19,5 +20,6 @@ export {
   seo,
   liveBlogStory,
   visualStory,
-  card
+  card,
+  tiktokElement
 };

src/__fixtures__/tiktok.fixture.ts

@@ -0,0 +1,16 @@
+export const tiktokElement = {
+  description: "",
+  "embed-js":
+    "PGJsb2NrcXVvdGUgY2xhc3M9InRpa3Rvay1lbWJlZCIgY2l0ZT0iaHR0cHM6Ly93d3cudGlrdG9rLmNvbS9AZGhhcndtYW5zL3ZpZGVvLzczNjE2MzE3OTAwNTE2NDI2NTciIGRhdGEtdmlkZW8taWQ9IjczNjE2MzE3OTAwNTE2NDI2NTciIGRhdGEtZW1iZWQtZnJvbT0ib2VtYmVkIiBzdHlsZT0ibWF4LXdpZHRoOjYwNXB4OyBtaW4td2lkdGg6MzI1cHg7Ij4gPHNlY3Rpb24+IDxhIHRhcmdldD0iX2JsYW5rIiB0aXRsZT0iQGRoYXJ3bWFucyIgaHJlZj0iaHR0cHM6Ly93d3cudGlrdG9rLmNvbS9AZGhhcndtYW5zP3JlZmVyPWVtYmVkIj5AZGhhcndtYW5zPC9hPiA8cD5QYXJ0IDEuIDxhIHRpdGxlPSJmeXAiIHRhcmdldD0iX2JsYW5rIiBocmVmPSJodHRwczovL3d3dy50aWt0b2suY29tL3RhZy9meXA/cmVmZXI9ZW1iZWQiPiNmeXA8L2E+IDxhIHRpdGxlPSJ2aXJhbCIgdGFyZ2V0PSJfYmxhbmsiIGhyZWY9Imh0dHBzOi8vd3d3LnRpa3Rvay5jb20vdGFnL3ZpcmFsP3JlZmVyPWVtYmVkIj4jdmlyYWw8L2E+IDxhIHRpdGxlPSJyZWNvbW1lbmRhdGlvbnMiIHRhcmdldD0iX2JsYW5rIiBocmVmPSJodHRwczovL3d3dy50aWt0b2suY29tL3RhZy9yZWNvbW1lbmRhdGlvbnM/cmVmZXI9ZW1iZWQiPiNyZWNvbW1lbmRhdGlvbnM8L2E+IDxhIHRpdGxlPSJ4eXpiY2EiIHRhcmdldD0iX2JsYW5rIiBocmVmPSJodHRwczovL3d3dy50aWt0b2suY29tL3RhZy94eXpiY2E/cmVmZXI9ZW1iZWQiPiN4eXpiY2E8L2E+IDxhIHRpdGxlPSJtb3ZpZSIgdGFyZ2V0PSJfYmxhbmsiIGhyZWY9Imh0dHBzOi8vd3d3LnRpa3Rvay5jb20vdGFnL21vdmllP3JlZmVyPWVtYmVkIj4jbW92aWU8L2E+IDxhIHRpdGxlPSJhc21yIiB0YXJnZXQ9Il9ibGFuayIgaHJlZj0iaHR0cHM6Ly93d3cudGlrdG9rLmNvbS90YWcvYXNtcj9yZWZlcj1lbWJlZCI+I2FzbXI8L2E+IDxhIHRpdGxlPSJydWdjbGVhbmluZyIgdGFyZ2V0PSJfYmxhbmsiIGhyZWY9Imh0dHBzOi8vd3d3LnRpa3Rvay5jb20vdGFnL3J1Z2NsZWFuaW5nP3JlZmVyPWVtYmVkIj4jcnVnY2xlYW5pbmc8L2E+IDxhIHRpdGxlPSJkaGFybWFubiIgdGFyZ2V0PSJfYmxhbmsiIGhyZWY9Imh0dHBzOi8vd3d3LnRpa3Rvay5jb20vdGFnL2RoYXJtYW5uP3JlZmVyPWVtYmVkIj4jZGhhcm1hbm48L2E+PC9wPiA8YSB0YXJnZXQ9Il9ibGFuayIgdGl0bGU9IuKZrCBvcmlnaW5hbCBzb3VuZCAtIERoYXJXb21hbiAtIFRoZSBWaXJhbCBWaWRlb3MiIGhyZWY9Imh0dHBzOi8vd3d3LnRpa3Rvay5jb20vbXVzaWMvb3JpZ2luYWwtc291bmQtRGhhcldvbWFuLTczNjE2MzE4Njk0ODc1NDkyMTY/cmVmZXI9ZW1iZWQiPuKZrCBvcmlnaW5hbCBzb3VuZCAtIERoYXJXb21hbiAtIFRoZSBWaXJhbCBWaWRlb3M8L2E+IDwvc2VjdGlvbj4gPC9ibG9ja3F1b3RlPiA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly93d3cudGlrdG9rLmNvbS9lbWJlZC5qcyI+PC9zY3JpcHQ+",
+  "page-url": "/story/872a1a37-47dd-4c66-88c2-7fa87887652f/element/55cc4513-d602-4d8f-abbd-e8804fa6ad81",
+  type: "jsembed",
+  "family-id": "f764a562-a7a2-41b3-8d76-2fe4e0c123a5",
+  title: "",
+  id: "c4fba672-a3c8-462c-9cd5-0a341bf681d9",
+  metadata: {
+    "tiktok-video-url": "https://www.tiktok.com/@dharwmans/video/7361631790051642657",
+    provider: "tiktok",
+    "tiktok-video-id": "7361631790051642657"
+  },
+  subtype: "tiktok-video"
+};

src/atoms/common-types.ts

@@ -32,6 +32,7 @@ declare global {
       "amp-story-auto-ads";
       "amp-story-page-outlink";
       "amp-brightcove";
+      "amp-tiktok";
     }
   }
 }

src/atoms/story-elements/index.ts

@@ -22,6 +22,7 @@ import { ImageGalleryElement } from "./image-gallery-element";
 import { Attachment } from "./attachment";
 import { TableElement } from "./table-element";
 import { Unsupported } from "./unsupported";
+import { TiktokElement } from "./tiktok-element";
 
 const StoryElements = {
   Text,
@@ -47,7 +48,8 @@ const StoryElements = {
   Attachment,
   TableElement,
   Unsupported,
-  Brightcove
+  Brightcove,
+  TiktokElement
 };
 export {
   Text,
@@ -73,6 +75,7 @@ export {
   Attachment,
   TableElement,
   Unsupported,
-  Brightcove
+  Brightcove,
+  TiktokElement
 };
 export { StoryElements };

src/atoms/story-elements/tiktok-element/index.ts

@@ -0,0 +1,2 @@
+import { TiktokElement } from "./tiktok-element";
+export { TiktokElement };

src/atoms/story-elements/tiktok-element/tiktok-element.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { config, textStory, tiktokElement } from "../../../__fixtures__";
+import { Layout } from "../../layout";
+import { TiktokElement } from "./tiktok-element";
+
+const { metadata, ...sampleTiktokElementWithoutMetadata } = tiktokElement;
+
+storiesOf("Tiktok Element", module)
+  .addDecorator((story) => (
+    <Layout story={textStory} config={config}>
+      {story()}
+    </Layout>
+  ))
+  .add("Default", () => <TiktokElement element={tiktokElement} />)
+  .add("With a square different layout", () => (
+    <TiktokElement element={tiktokElement} layout="fixed" width="400" height="400" />
+  ))
+  .add("Tiktok without metadata", () => <TiktokElement element={sampleTiktokElementWithoutMetadata} />);

src/atoms/story-elements/tiktok-element/tiktok-element.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { config, textStory, tiktokElement } from "../../../__fixtures__";
+import { TiktokElement, TiktokElementBase } from "./tiktok-element";
+
+const { metadata, ...sampleTiktokElementWithoutMetadata } = tiktokElement;
+
+describe("Tiktok Element", () => {
+  it("should render Tiktok", () => {
+    const wrapper = mount(<TiktokElement element={tiktokElement} />);
+    expect(wrapper.find("amp-tiktok").length).toBe(1);
+  });
+  it("should call tiktokElementRender prop when passed to opts", () => {
+    const tiktokElementRender = jest.fn();
+    const modifiedConfig = { ...config, opts: { render: { storyElementRender: { tiktokElementRender } } } };
+    const wrapper = shallow(<TiktokElementBase element={tiktokElement} story={textStory} config={modifiedConfig} />);
+    expect(tiktokElementRender.mock.calls.length).toBe(1);
+    expect(wrapper.find(TiktokElement).length).toBe(0);
+  });
+  it("shouldn't render Tiktok", () => {
+    const wrapper = mount(<TiktokElement element={sampleTiktokElementWithoutMetadata} />);
+    expect(wrapper.find("amp-tiktok").length).toBe(0);
+  });
+});

src/atoms/story-elements/tiktok-element/tiktok-element.tsx

@@ -0,0 +1,66 @@
+import React, { Fragment } from "react";
+import get from "lodash.get";
+import Helmet from "react-helmet";
+import { withStoryAndConfig } from "../../../context";
+import { StoryElementProps } from "../types";
+import { TiktokTypes } from "./types";
+type TiktokElementProps = StoryElementProps & Omit<TiktokTypes, "data-src">;
+
+export const Tiktok = (props: TiktokTypes) => {
+  const { width, height } = props;
+  const setDefaultLayout = !width || !height;
+  const componentProps: TiktokTypes = setDefaultLayout
+    ? {
+        ...props,
+        width: "325",
+        height: "575"
+      }
+    : props;
+
+  return (
+    <Fragment>
+      <Helmet>
+        <script async={undefined} custom-element="amp-tiktok" src="https://cdn.ampproject.org/v0/amp-tiktok-0.1.js" />
+      </Helmet>
+      <amp-tiktok {...componentProps} />
+    </Fragment>
+  );
+};
+
+export const TiktokElementBase = ({ element, story, config, ...props }: TiktokElementProps) => {
+  const { metadata } = element;
+  const tiktokElementRender = get(config, ["opts", "render", "storyElementRender", "tiktokElementRender"], null);
+  if (!(metadata && metadata["tiktok-video-id"])) return null;
+
+  return tiktokElementRender ? (
+    tiktokElementRender({ story, config, element })
+  ) : (
+    <Tiktok data-src={metadata["tiktok-video-id"]} {...props} />
+  );
+};
+/**
+ * TiktokElement is a story element.
+ * The look of the TiktokElement can be changed using the render prop tiktokElementRender. In case tiktokElementRender is passed in the config, it is rendered. Otherwise a default TiktokElement is rendered.
+ *
+ * @param {Object} params object containing parameters passed to the render prop
+ * @param {Object} params.story story object
+ * @param {Object} params.config config object
+ * @param {Object} params.element the story element. This is same as the story element found in the story API response
+ *
+ * ```javascript
+ * ...
+ * ampRoutes(app, {
+ *  render: {
+ *    storyElementRender: {
+ *    tiktokElementRender: ({ story, config, element }) => <MyCustomTiktokElement story={story} config={config} storyElement={element}  />
+ *    }
+ *  }
+ * })
+ * ...
+ * ```
+ *
+ * @category StoryElements
+ * @module TiktokElement
+ * @component
+ */
+export const TiktokElement = withStoryAndConfig(TiktokElementBase);

src/atoms/story-elements/tiktok-element/types.ts

@@ -0,0 +1,6 @@
+import { Common } from "../../../atoms/common-types";
+
+export interface TiktokTypes extends Common {
+  "data-src": string;
+  children?: any;
+}

src/helpers/match-story-element/match-story-element.tsx

@@ -22,7 +22,8 @@ import {
   Attachment,
   TableElement,
   Unsupported,
-  Brightcove
+  Brightcove,
+  TiktokElement
 } from "../../atoms/story-elements";
 
 const anyType = "any";
@@ -51,6 +52,7 @@ const storyElementsTable = [
   ["jsembed", "social-media", Unsupported],
   ["jsembed", "tweet", TwitterElement],
   ["jsembed", "vidible-video", VidibleElement],
+  ["jsembed", "tiktok-video", TiktokElement],
   ["jsembed", anyType, Embed],
   ["polltype", "opinion-poll", Unsupported],
   ["soundcloud-audio", none, Unsupported],

src/types/config.ts

@@ -183,6 +183,7 @@ export interface ConfigOpts {
       alsoReadRender?: (props: CommonRenderPropTypes) => any;
       tableElementRender?: (props: CommonRenderPropTypes) => any;
       brightcoveElementRender?: (props: CommonRenderPropTypes) => any;
+      tiktokElementRender?: (props: CommonRenderPropTypes) => any;
     };
   };
   featureConfig?: FeatureConfigTypes;