Commit 83e86459 authored by negin's avatar negin
Browse files

Bug 1800126 - [Cleanup] Refactor OnboardingVideo in its own component r=yozhang 

Differential Revision: https://phabricator.services.mozilla.com/D162420
parent 6d161c60

browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

+44 −31
Original line number Diff line number Diff line
@@ -165,7 +165,6 @@ __webpack_require__.r(__webpack_exports__); 
/* harmony export */ __webpack_require__.d(__webpack_exports__, {

/* harmony export */   "MultiStageAboutWelcome": () => (/* binding */ MultiStageAboutWelcome),

/* harmony export */   "SecondaryCTA": () => (/* binding */ SecondaryCTA),

/* harmony export */   "OnboardingVideo": () => (/* binding */ OnboardingVideo),

/* harmony export */   "StepsIndicator": () => (/* binding */ StepsIndicator),

/* harmony export */   "WelcomeScreen": () => (/* binding */ WelcomeScreen)

/* harmony export */ });
@@ -175,7 +174,7 @@ __webpack_require__.r(__webpack_exports__); 
/* harmony import */ var _lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);

/* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);

/* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);

/* harmony import */ var _asrouter_templates_FirstRun_addUtmParams__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);

/* harmony import */ var _asrouter_templates_FirstRun_addUtmParams__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this file,

 * You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -382,31 +381,6 @@ const SecondaryCTA = props => { 
    onClick: props.handleAction

  })));

};

const OnboardingVideo = props => {

  const vidUrl = props.content.video_url;

  const autoplay = props.content.autoPlay;



  const handleVideoAction = event => {

    props.handleAction({

      currentTarget: {

        value: event

      }

    });

  };



  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",

    onPlay: () => handleVideoAction("video_start"),

    onEnded: () => handleVideoAction("video_end")

  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {

    src: vidUrl

  })));

};

const StepsIndicator = props => {

  let steps = [];
@@ -668,6 +642,7 @@ __webpack_require__.r(__webpack_exports__); 
/* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);

/* harmony import */ var _CTAParagraph__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);

/* harmony import */ var _HeroImage__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(13);

/* harmony import */ var _OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(14);

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this file,

 * You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -681,6 +656,7 @@ __webpack_require__.r(__webpack_exports__); 








const MultiStageProtonScreen = props => {

  const {

    autoAdvance,
@@ -963,7 +939,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom 
    })), content.cta_paragraph ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_CTAParagraph__WEBPACK_IMPORTED_MODULE_8__.CTAParagraph, {

      content: content.cta_paragraph,

      handleAction: this.props.handleAction

    }) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.OnboardingVideo, {

    }) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, {

      content: content.video_container,

      handleAction: this.props.handleAction

    }) : null, this.renderContentTiles(), this.renderLanguageSwitcher(), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreenActionButtons, {
@@ -1670,6 +1646,43 @@ const HeroImage = props => { 
/* 14 */

/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {



__webpack_require__.r(__webpack_exports__);

/* harmony export */ __webpack_require__.d(__webpack_exports__, {

/* harmony export */   "OnboardingVideo": () => (/* binding */ OnboardingVideo)

/* harmony export */ });

/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);



const OnboardingVideo = props => {

  const vidUrl = props.content.video_url;

  const autoplay = props.content.autoPlay;



  const handleVideoAction = event => {

    props.handleAction({

      currentTarget: {

        value: event

      }

    });

  };



  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",

    onPlay: () => handleVideoAction("video_start"),

    onEnded: () => handleVideoAction("video_end")

  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {

    src: vidUrl

  })));

};



/***/ }),

/* 15 */

/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {



__webpack_require__.r(__webpack_exports__);

/* harmony export */ __webpack_require__.d(__webpack_exports__, {

/* harmony export */   "BASE_PARAMS": () => (/* binding */ BASE_PARAMS),
@@ -1709,7 +1722,7 @@ function addUtmParams(url, utmTerm) { 
}



/***/ }),

/* 15 */

/* 16 */

/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {



__webpack_require__.r(__webpack_exports__);
@@ -1720,7 +1733,7 @@ __webpack_require__.r(__webpack_exports__); 
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);

/* harmony import */ var _lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);

/* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);

/* harmony import */ var _asrouter_templates_FirstRun_addUtmParams__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);

/* harmony import */ var _asrouter_templates_FirstRun_addUtmParams__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this file,

 * You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -1915,7 +1928,7 @@ __webpack_require__.r(__webpack_exports__); 
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);

/* harmony import */ var _lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);

/* harmony import */ var _components_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);

/* harmony import */ var _components_ReturnToAMO__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(15);

/* harmony import */ var _components_ReturnToAMO__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }



/* This Source Code Form is subject to the terms of the Mozilla Public

browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx

+0 −29
Original line number Diff line number Diff line
@@ -252,35 +252,6 @@ export const SecondaryCTA = props => { 
  );

};



export const OnboardingVideo = props => {

  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

        controls={true}

        autoPlay={autoplay}

        src={vidUrl}

        width="604px"

        height="340px"

        onPlay={() => handleVideoAction("video_start")}

        onEnded={() => handleVideoAction("video_end")}

      >

        <source src={vidUrl}></source>

      </video>

    </div>

  );

};



export const StepsIndicator = props => {

  let steps = [];

  for (let i = 0; i < props.totalNumberOfScreens; i++) {

browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx

+2 −5
Original line number Diff line number Diff line
@@ -8,14 +8,11 @@ import { Colorways } from "./MRColorways"; 
import { MobileDownloads } from "./MobileDownloads";

import { MultiSelect } from "./MultiSelect";

import { Themes } from "./Themes";

import {

  OnboardingVideo,

  SecondaryCTA,

  StepsIndicator,

} from "./MultiStageAboutWelcome";

import { SecondaryCTA, StepsIndicator } from "./MultiStageAboutWelcome";

import { LanguageSwitcher } from "./LanguageSwitcher";

import { CTAParagraph } from "./CTAParagraph";

import { HeroImage } from "./HeroImage";

import { OnboardingVideo } from "./OnboardingVideo";



export const MultiStageProtonScreen = props => {

  const { autoAdvance, handleAction, order } = props;

browser/components/newtab/content-src/aboutwelcome/components/OnboardingVideo.jsx

0 → 100644
+34 −0
Original line number Diff line number Diff line 
/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this file,

 * You can obtain one at http://mozilla.org/MPL/2.0/. */



import React from "react";



export const OnboardingVideo = props => {

  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

        controls={true}

        autoPlay={autoplay}

        src={vidUrl}

        width="604px"

        height="340px"

        onPlay={() => handleVideoAction("video_start")}

        onEnded={() => handleVideoAction("video_end")}

      >

        <source src={vidUrl}></source>

      </video>

    </div>

  );

};