@khanacademy/perseus 13.0.0 → 13.1.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.0.0",
+    "version": "13.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.5",
         "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/math-input": "^15.0.0",
+        "@khanacademy/math-input": "^15.0.1",
         "@khanacademy/perseus-core": "1.3.0",
         "@khanacademy/perseus-linter": "^0.3.8",
         "@khanacademy/pure-markdown": "^0.2.10",

package/src/widgets/__stories__/video.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/video.testdata";
+import {question1, question2, question3} from "../__testdata__/video.testdata";
 
 export default {
     title: "Perseus/Widgets/Video",
@@ -12,3 +12,11 @@ type StoryArgs = Record<any, any>;
 export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const Question2 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question2} />;
+};
+
+export const Question3 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question3} />;
+};

package/src/widgets/__testdata__/video.testdata.ts

@@ -19,3 +19,43 @@ export const question1: PerseusRenderer = {
     },
     replace: false,
 };
+
+export const question2: PerseusRenderer = {
+    content:
+        "Watch the WMF at Angkor Wat video to find the answer.\n\n[[\u2603 video 1]]\n\n",
+    images: {},
+    widgets: {
+        "video 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "video",
+            options: {
+                static: false,
+                location: "https://player.vimeo.com/video/4754041",
+            },
+            alignment: "block",
+        },
+    },
+    replace: false,
+};
+
+export const question3: PerseusRenderer = {
+    content:
+        "Watch the WMF at Angkor Wat video to find the answer.\n\n[[\u2603 video 1]]\n\n",
+    images: {},
+    widgets: {
+        "video 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "video",
+            options: {
+                static: false,
+                location: "https://player.vimeo.com/video/4754041?h=64fbc32a6e",
+            },
+            alignment: "block",
+        },
+    },
+    replace: false,
+};

package/src/widgets/__tests__/video.test.ts

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/video.testdata";
+import {question1, question2} from "../__testdata__/video.testdata";
 
 import {renderQuestion} from "./renderQuestion";
 
@@ -50,4 +50,20 @@ describe("video widget", () => {
         // Assert
         expect(container).toMatchSnapshot("first mobile render");
     });
+
+    it("vimeo widget should contain dnt param", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        renderQuestion(question2, apiOptions);
+
+        // Assert
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(document.getElementsByTagName("iframe")[0].src).toContain(
+            "dnt=1",
+        );
+    });
 });

package/src/widgets/video.tsx

@@ -24,6 +24,7 @@ const DEFAULT_HEIGHT = 720;
 const KA_EMBED = "{host}/embed_video?slug={slug}" + "&internal_video_only=1";
 const IS_URL = /^https?:\/\//;
 const IS_KA_SITE = /(khanacademy\.org|localhost)/;
+const IS_VIMEO = /(vimeo\.com)/;
 
 type UserInput = null;
 type Rubric = PerseusVideoWidgetOptions;
@@ -75,6 +76,16 @@ class Video extends React.Component<Props> {
 
         if (IS_URL.test(location)) {
             url = location;
+            if (IS_VIMEO.test(url)) {
+                // If this is a vimeo video, we need to add the query string
+                // parameter "dnt" so that analytics/tracking cookies aren't set.
+                // https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview
+                if (url.indexOf("?") === -1) {
+                    url += "?dnt=1";
+                } else {
+                    url += "&dnt=1";
+                }
+            }
         } else {
             url = KA_EMBED.replace("{slug}", location);
             let embedHostname = "https://www.khanacademy.org";