@ndla/video-search 4.1.44 → 4.1.46

package/es/PreviewVideo.js

@@ -1,9 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -18,22 +12,24 @@ import { ButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var classes = new BEMHelper({
+const classes = new BEMHelper({
   name: 'video-preview',
   prefix: 'c-'
 });
 export default function PreviewVideo(_ref) {
-  var onVideoPreview = _ref.onVideoPreview,
-    children = _ref.children;
-  return _jsxs("div", _objectSpread(_objectSpread({}, classes()), {}, {
-    children: [_jsx(ButtonV2, _objectSpread(_objectSpread({}, classes('close')), {}, {
+  let {
+    onVideoPreview,
+    children
+  } = _ref;
+  return _jsxs("div", {
+    ...classes(),
+    children: [_jsx(ButtonV2, {
+      ...classes('close'),
       variant: "stripped",
-      onClick: function onClick() {
-        return onVideoPreview(undefined);
-      },
+      onClick: () => onVideoPreview(undefined),
       children: _jsx(Cross, {})
-    })), children]
-  }));
+    }), children]
+  });
 }
 PreviewVideo.propTypes = {
   children: PropTypes.node,

package/es/VideoLoadMoreButton.js

@@ -1,9 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -17,26 +11,31 @@ import BEMHelper from 'react-bem-helper';
 import { ButtonV2 } from '@ndla/button';
 import { BrightcoveShape, YouTubeShape } from './shapes';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var classes = new BEMHelper({
+const classes = new BEMHelper({
   name: 'video-search',
   prefix: 'c-'
 });
-var VideoLoadMoreButton = function VideoLoadMoreButton(props) {
-  var videos = props.videos,
-    searching = props.searching,
-    limit = props.limit,
-    translations = props.translations,
-    loadMoreVideos = props.loadMoreVideos;
+const VideoLoadMoreButton = props => {
+  const {
+    videos,
+    searching,
+    limit,
+    translations,
+    loadMoreVideos
+  } = props;
   if (!videos || videos.length === 0 || videos.length % limit !== 0) {
     return null;
   }
-  return _jsx("div", _objectSpread(_objectSpread({}, classes('load-videos')), {}, {
+  return _jsx("div", {
+    ...classes('load-videos'),
     children: _jsx(ButtonV2, {
       disabled: searching,
       onClick: loadMoreVideos,
-      children: searching ? _jsx("div", _objectSpread({}, classes('spinner'))) : translations.loadMoreVideos
+      children: searching ? _jsx("div", {
+        ...classes('spinner')
+      }) : translations.loadMoreVideos
     })
-  }));
+  });
 };
 VideoLoadMoreButton.propTypes = {
   searching: PropTypes.bool.isRequired,

package/es/VideoSearch.js

@@ -1,19 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -22,29 +6,25 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
  *
  */
 
-import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Component } from 'react';
 import BEMHelper from 'react-bem-helper';
 import Pager from '@ndla/pager';
+import { getLastPage } from './videoHelpers';
+import VideoLoadMoreButton from './VideoLoadMoreButton';
 import VideoSearchForm from './VideoSearchForm';
 import VideoSearchList from './VideoSearchList';
-import VideoLoadMoreButton from './VideoLoadMoreButton';
 import VideoTabs from './VideoTabs';
-import { getLastPage } from './videoHelpers';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var classes = new BEMHelper({
+const classes = new BEMHelper({
   name: 'video-search',
   prefix: 'c-'
 });
-var VideoSearch = /*#__PURE__*/function (_Component) {
-  _inherits(VideoSearch, _Component);
-  var _super = _createSuper(VideoSearch);
-  function VideoSearch() {
-    var _this;
-    _classCallCheck(this, VideoSearch);
-    _this = _super.call(this);
-    _this.state = {
+class VideoSearch extends Component {
+  constructor() {
+    super();
+    this.state = {
       queryObject: {
         query: '',
         offset: 0,
@@ -57,218 +37,209 @@ var VideoSearch = /*#__PURE__*/function (_Component) {
       lastPage: 0,
       searching: false
     };
-    _this.submitVideoSearchQuery = _this.submitVideoSearchQuery.bind(_assertThisInitialized(_this));
-    _this.changeQueryPage = _this.changeQueryPage.bind(_assertThisInitialized(_this));
-    _this.onSearchTypeChange = _this.onSearchTypeChange.bind(_assertThisInitialized(_this));
-    _this.searchVideos = _this.searchVideos.bind(_assertThisInitialized(_this));
-    _this.onVideoPreview = _this.onVideoPreview.bind(_assertThisInitialized(_this));
-    _this.onSelectVideo = _this.onSelectVideo.bind(_assertThisInitialized(_this));
-    _this.loadMoreVideos = _this.loadMoreVideos.bind(_assertThisInitialized(_this));
-    return _this;
+    this.submitVideoSearchQuery = this.submitVideoSearchQuery.bind(this);
+    this.changeQueryPage = this.changeQueryPage.bind(this);
+    this.onSearchTypeChange = this.onSearchTypeChange.bind(this);
+    this.searchVideos = this.searchVideos.bind(this);
+    this.onVideoPreview = this.onVideoPreview.bind(this);
+    this.onSelectVideo = this.onSelectVideo.bind(this);
+    this.loadMoreVideos = this.loadMoreVideos.bind(this);
   }
-  _createClass(VideoSearch, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.searchVideos(this.state.queryObject);
-    }
-  }, {
-    key: "onVideoPreview",
-    value: function onVideoPreview(video) {
-      this.setState({
-        selectedVideo: video
-      });
+  componentDidMount() {
+    this.searchVideos(this.state.queryObject);
+  }
+  onVideoPreview(video) {
+    this.setState({
+      selectedVideo: video
+    });
+  }
+  onSelectVideo(video) {
+    const {
+      selectedType
+    } = this.state;
+    const {
+      onVideoSelect
+    } = this.props;
+    this.setState({
+      selectedVideo: undefined
+    });
+    onVideoSelect(video, selectedType);
+  }
+  onSearchTypeChange(type) {
+    let queryObject;
+    if (type === 'youtube') {
+      queryObject = {
+        query: '',
+        offset: undefined,
+        limit: undefined,
+        page: 1,
+        start: 1
+      };
+    } else {
+      queryObject = {
+        query: '',
+        offset: 0,
+        limit: 10,
+        page: undefined,
+        start: undefined
+      };
     }
-  }, {
-    key: "onSelectVideo",
-    value: function onSelectVideo(video) {
-      var selectedType = this.state.selectedType;
-      var onVideoSelect = this.props.onVideoSelect;
+    this.setState({
+      queryObject,
+      selectedType: type,
+      selectedVideo: undefined,
+      videos: [],
+      searching: true
+    }, this.searchVideos(queryObject, type));
+  }
+  loadMoreVideos() {
+    const {
+      queryObject,
+      videos,
+      selectedType
+    } = this.state;
+    const {
+      searchVideos,
+      onError
+    } = this.props;
+    this.setState({
+      searching: true
+    });
+    searchVideos({
+      ...queryObject,
+      offset: queryObject.offset + 10
+    }, selectedType).then(result => {
+      this.setState(prevState => ({
+        queryObject: {
+          ...prevState.queryObject,
+          offset: prevState.queryObject.offset + 10
+        },
+        videos: videos.concat(result),
+        searching: false
+      }));
+    }).catch(err => {
+      onError(err);
       this.setState({
-        selectedVideo: undefined
+        searching: false
       });
-      onVideoSelect(video, selectedType);
-    }
-  }, {
-    key: "onSearchTypeChange",
-    value: function onSearchTypeChange(type) {
-      var queryObject;
-      if (type === 'youtube') {
-        queryObject = {
-          query: '',
-          offset: undefined,
-          limit: undefined,
-          page: 1,
-          start: 1
-        };
-      } else {
-        queryObject = {
-          query: '',
-          offset: 0,
-          limit: 10,
-          page: undefined,
-          start: undefined
-        };
+    });
+  }
+  changeQueryPage(page) {
+    this.setState({
+      lastPage: 0
+    });
+    const {
+      queryObject
+    } = this.state;
+    const nextIndex = queryObject.start + (page.page - queryObject.page) * 10;
+    const newQueryObject = {
+      ...queryObject,
+      ...page,
+      start: nextIndex
+    };
+    this.searchVideos(newQueryObject);
+  }
+  submitVideoSearchQuery(query) {
+    const queryObject = {
+      ...this.state.queryObject,
+      query
+    };
+    this.searchVideos(queryObject);
+  }
+  searchVideos(queryObject) {
+    let selectedType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.selectedType;
+    const {
+      searchVideos,
+      onError
+    } = this.props;
+    searchVideos(queryObject, selectedType).then(result => {
+      if (selectedType === this.state.selectedType) {
+        this.setState(prevState => ({
+          queryObject: {
+            ...prevState.queryObject,
+            query: queryObject.query,
+            page: queryObject.page,
+            start: queryObject.start,
+            offset: 0
+          },
+          videos: selectedType === 'youtube' ? result.items : result,
+          searching: false,
+          lastPage: getLastPage(result, selectedType)
+        }));
       }
+    }).catch(err => {
+      onError(err);
       this.setState({
-        queryObject: queryObject,
-        selectedType: type,
-        selectedVideo: undefined,
-        videos: [],
-        searching: true
-      }, this.searchVideos(queryObject, type));
-    }
-  }, {
-    key: "loadMoreVideos",
-    value: function loadMoreVideos() {
-      var _this2 = this;
-      var _this$state = this.state,
-        queryObject = _this$state.queryObject,
-        videos = _this$state.videos,
-        selectedType = _this$state.selectedType;
-      var _this$props = this.props,
-        searchVideos = _this$props.searchVideos,
-        onError = _this$props.onError;
-      this.setState({
-        searching: true
-      });
-      searchVideos(_objectSpread(_objectSpread({}, queryObject), {}, {
-        offset: queryObject.offset + 10
-      }), selectedType).then(function (result) {
-        _this2.setState(function (prevState) {
-          return {
-            queryObject: _objectSpread(_objectSpread({}, prevState.queryObject), {}, {
-              offset: prevState.queryObject.offset + 10
-            }),
-            videos: videos.concat(result),
-            searching: false
-          };
-        });
-      }).catch(function (err) {
-        onError(err);
-        _this2.setState({
-          searching: false
-        });
-      });
-    }
-  }, {
-    key: "changeQueryPage",
-    value: function changeQueryPage(page) {
-      this.setState({
-        lastPage: 0
-      });
-      var queryObject = this.state.queryObject;
-      var nextIndex = queryObject.start + (page.page - queryObject.page) * 10;
-      var newQueryObject = _objectSpread(_objectSpread(_objectSpread({}, queryObject), page), {}, {
-        start: nextIndex
-      });
-      this.searchVideos(newQueryObject);
-    }
-  }, {
-    key: "submitVideoSearchQuery",
-    value: function submitVideoSearchQuery(query) {
-      var queryObject = _objectSpread(_objectSpread({}, this.state.queryObject), {}, {
-        query: query
-      });
-      this.searchVideos(queryObject);
-    }
-  }, {
-    key: "searchVideos",
-    value: function searchVideos(queryObject) {
-      var _this3 = this;
-      var selectedType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.selectedType;
-      var _this$props2 = this.props,
-        searchVideos = _this$props2.searchVideos,
-        onError = _this$props2.onError;
-      searchVideos(queryObject, selectedType).then(function (result) {
-        if (selectedType === _this3.state.selectedType) {
-          _this3.setState(function (prevState) {
-            return {
-              queryObject: _objectSpread(_objectSpread({}, prevState.queryObject), {}, {
-                query: queryObject.query,
-                page: queryObject.page,
-                start: queryObject.start,
-                offset: 0
-              }),
-              videos: selectedType === 'youtube' ? result.items : result,
-              searching: false,
-              lastPage: getLastPage(result, selectedType)
-            };
-          });
-        }
-      }).catch(function (err) {
-        onError(err);
-        _this3.setState({
-          searching: false
-        });
+        searching: false
       });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var _this$props3 = this.props,
-        translations = _this$props3.translations,
-        locale = _this$props3.locale,
-        enabledSources = _this$props3.enabledSources;
-      var _this$state2 = this.state,
-        queryObject = _this$state2.queryObject,
-        lastPage = _this$state2.lastPage,
-        videos = _this$state2.videos,
-        selectedVideo = _this$state2.selectedVideo,
-        selectedType = _this$state2.selectedType,
-        searching = _this$state2.searching;
-      var query = queryObject.query,
-        page = queryObject.page;
-      var paginationItem = function paginationItem() {
-        if (selectedType === 'brightcove') {
-          return _jsx(VideoLoadMoreButton, {
-            searching: searching,
-            videos: videos,
-            loadMoreVideos: _this4.loadMoreVideos,
-            limit: queryObject.limit,
-            translations: translations
-          });
-        }
-        return _jsx(Pager, {
-          page: page || 1,
-          lastPage: lastPage,
-          onClick: _this4.changeQueryPage
+    });
+  }
+  render() {
+    const {
+      translations,
+      locale,
+      enabledSources
+    } = this.props;
+    const {
+      queryObject,
+      lastPage,
+      videos,
+      selectedVideo,
+      selectedType,
+      searching
+    } = this.state;
+    const {
+      query,
+      page
+    } = queryObject;
+    const paginationItem = () => {
+      if (selectedType === 'brightcove') {
+        return _jsx(VideoLoadMoreButton, {
+          searching: searching,
+          videos: videos,
+          loadMoreVideos: this.loadMoreVideos,
+          limit: queryObject.limit,
+          translations: translations
         });
-      };
-      var searchListTabs = enabledSources.map(function (source) {
-        return {
-          title: source,
-          id: source,
-          content: _jsx("div", _objectSpread(_objectSpread({}, classes('list')), {}, {
-            children: selectedType === source.toLowerCase() && _jsx(VideoSearchList, {
-              translations: translations,
-              selectedType: source.toLowerCase(),
-              selectedVideo: selectedVideo,
-              videos: videos,
-              locale: locale,
-              onVideoPreview: _this4.onVideoPreview,
-              searching: searching,
-              onSelectVideo: _this4.onSelectVideo
-            })
-          }))
-        };
+      }
+      return _jsx(Pager, {
+        page: page || 1,
+        lastPage: lastPage,
+        onClick: this.changeQueryPage
       });
-      return _jsxs("div", _objectSpread(_objectSpread({}, classes()), {}, {
-        children: [_jsx(VideoSearchForm, {
-          onSearchQuerySubmit: this.submitVideoSearchQuery,
-          query: query,
+    };
+    const searchListTabs = enabledSources.map(source => ({
+      title: source,
+      id: source,
+      content: _jsx("div", {
+        ...classes('list'),
+        children: selectedType === source.toLowerCase() && _jsx(VideoSearchList, {
+          translations: translations,
+          selectedType: source.toLowerCase(),
+          selectedVideo: selectedVideo,
+          videos: videos,
+          locale: locale,
+          onVideoPreview: this.onVideoPreview,
           searching: searching,
-          translations: translations
-        }), _jsx(VideoTabs, {
-          searchTypes: selectedType,
-          tabs: searchListTabs,
-          onSearchTypeChange: this.onSearchTypeChange
-        }), paginationItem()]
-      }));
-    }
-  }]);
-  return VideoSearch;
-}(Component);
+          onSelectVideo: this.onSelectVideo
+        })
+      })
+    }));
+    return _jsxs("div", {
+      ...classes(),
+      children: [_jsx(VideoSearchForm, {
+        onSearchQuerySubmit: this.submitVideoSearchQuery,
+        query: query,
+        searching: searching,
+        translations: translations
+      }), _jsx(VideoTabs, {
+        searchTypes: selectedType,
+        tabs: searchListTabs,
+        onSearchTypeChange: this.onSearchTypeChange
+      }), paginationItem()]
+    });
+  }
+}
 VideoSearch.propTypes = {
   onVideoSelect: PropTypes.func.isRequired,
   searchVideos: PropTypes.func.isRequired,