Bug 1797851 - Add telemetry to video section in onboarding r=pdahiya,…

…emcminn Differential Revision: https://phabricator.services.mozilla.com/D161704
dothq · Nov 16, 2022 · d79a56c · d79a56c
1 parent 8066add
commit d79a56c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 11 deletions.
diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@@ -386,19 +386,26 @@ const SecondaryCTA = props => {
   })));
 };
 const OnboardingVideo = props => {
-  var _props$content, _props$content2;
+  const vidUrl = props.content.video_url;
+  const autoplay = props.content.autoPlay;
+
+  const handleVideoAction = event => {
+    props.handleAction({
+      currentTarget: {
+        value: event
+      }
+    });
+  };
 
-  const vidUrl = (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.video_url;
-  const autoplay = (_props$content2 = props.content) === null || _props$content2 === void 0 ? void 0 : _props$content2.autoPlay;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
     // eslint-disable-line jsx-a11y/media-has-caption
     controls: true,
     autoPlay: autoplay,
     src: vidUrl,
     width: "604px",
     height: "340px",
-    value: "video_container",
-    onEnded: props.handleAction
+    onPlay: () => handleVideoAction("video_start"),
+    onEnded: () => handleVideoAction("video_end")
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
     src: vidUrl
   })));
@@ -485,9 +492,9 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       // Populate MULTI_ACTION data actions property with selected checkbox actions from tiles data
       action.data = {
         actions: this.props.activeMultiSelect.map(id => {
-          var _props$content3, _props$content3$tiles, _props$content3$tiles2;
+          var _props$content, _props$content$tiles, _props$content$tiles$;
 
-          return (_props$content3 = props.content) === null || _props$content3 === void 0 ? void 0 : (_props$content3$tiles = _props$content3.tiles) === null || _props$content3$tiles === void 0 ? void 0 : (_props$content3$tiles2 = _props$content3$tiles.data.find(ckbx => ckbx.id === id)) === null || _props$content3$tiles2 === void 0 ? void 0 : _props$content3$tiles2.action;
+          return (_props$content = props.content) === null || _props$content === void 0 ? void 0 : (_props$content$tiles = _props$content.tiles) === null || _props$content$tiles === void 0 ? void 0 : (_props$content$tiles$ = _props$content$tiles.data.find(ckbx => ckbx.id === id)) === null || _props$content$tiles$ === void 0 ? void 0 : _props$content$tiles$.action;
         })
       };
     }

diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
@@ -253,8 +253,17 @@ export const SecondaryCTA = props => {
 };
 
 export const OnboardingVideo = props => {
-  const vidUrl = props.content?.video_url;
-  const autoplay = props.content?.autoPlay;
+  const vidUrl = props.content.video_url;
+  const autoplay = props.content.autoPlay;
+
+  const handleVideoAction = event => {
+    props.handleAction({
+      currentTarget: {
+        value: event,
+      },
+    });
+  };
+
   return (
     <div>
       <video // eslint-disable-line jsx-a11y/media-has-caption
@@ -263,8 +272,8 @@ export const OnboardingVideo = props => {
         src={vidUrl}
         width="604px"
         height="340px"
-        value="video_container"
-        onEnded={props.handleAction}
+        onPlay={() => handleVideoAction("video_start")}
+        onEnded={() => handleVideoAction("video_end")}
       >
         <source src={vidUrl}></source>
       </video>

diff --git a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAboutWelcome.test.jsx b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAboutWelcome.test.jsx
@@ -4,6 +4,7 @@ import {
   SecondaryCTA,
   StepsIndicator,
   WelcomeScreen,
+  OnboardingVideo,
 } from "content-src/aboutwelcome/components/MultiStageAboutWelcome";
 import { Themes } from "content-src/aboutwelcome/components/Themes";
 import React from "react";
@@ -438,6 +439,34 @@ describe("MultiStageAboutWelcome module", () => {
           },
         });
       });
+      it("should handle video_start action when video is played", () => {
+        SCREEN_PROPS = {
+          content: {
+            title: "Test title",
+            video_container: {
+              video_url: "test url",
+            },
+          },
+        };
+        const handleAction = sandbox.stub();
+        const wrapper = mount(
+          <OnboardingVideo handleAction={handleAction} {...SCREEN_PROPS} />
+        );
+        wrapper.find("video").simulate("play");
+        assert.calledWith(handleAction, {
+          currentTarget: { value: "video_start" },
+        });
+      });
+      it("should handle video_end action when video has completed playing", () => {
+        const handleAction = sandbox.stub();
+        const wrapper = mount(
+          <OnboardingVideo handleAction={handleAction} {...SCREEN_PROPS} />
+        );
+        wrapper.find("video").simulate("ended");
+        assert.calledWith(handleAction, {
+          currentTarget: { value: "video_end" },
+        });
+      });
     });
   });
 });