@ndla/video-search 4.1.46 → 5.0.0

package/es/VideoSearch.js

@@ -1,3 +1,4 @@
+import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -6,253 +7,97 @@
  *
  */
 
-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 VideoTabs from './VideoTabs';
+import { useCallback, useEffect, useState } from 'react';
+import { ButtonV2 } from '@ndla/button';
+import { colors, misc, spacing } from '@ndla/core';
+import { FormControl, InputV3, Label } from '@ndla/forms';
+import { Spinner } from '@ndla/icons';
+import { usePrevious } from '@ndla/util';
+import { VideoResultList } from './VideoResultList';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const classes = new BEMHelper({
-  name: 'video-search',
-  prefix: 'c-'
-});
-class VideoSearch extends Component {
-  constructor() {
-    super();
-    this.state = {
-      queryObject: {
-        query: '',
-        offset: 0,
+const VideoSearchWrapper = /*#__PURE__*/_styled("div", {
+  target: "eyp4xih1",
+  label: "VideoSearchWrapper"
+})("display:flex;flex-direction:column;align-items:center;gap:", spacing.normal, ";border:1px solid ", colors.brand.light, ";border-radius:", misc.borderRadius, ";padding:", spacing.normal, ";>form{width:100%;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpZGVvU2VhcmNoLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ3FDIiwiZmlsZSI6IlZpZGVvU2VhcmNoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ2hhbmdlRXZlbnQsIEZvcm1FdmVudCwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBjb2xvcnMsIG1pc2MsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IEZvcm1Db250cm9sLCBJbnB1dFYzLCBMYWJlbCB9IGZyb20gJ0BuZGxhL2Zvcm1zJztcbmltcG9ydCB7IFNwaW5uZXIgfSBmcm9tICdAbmRsYS9pY29ucyc7XG5pbXBvcnQgeyBCcmlnaHRjb3ZlQXBpVHlwZSB9IGZyb20gJ0BuZGxhL3R5cGVzLWVtYmVkJztcbmltcG9ydCB7IHVzZVByZXZpb3VzIH0gZnJvbSAnQG5kbGEvdXRpbCc7XG5pbXBvcnQgeyBWaWRlb1Jlc3VsdExpc3QgfSBmcm9tICcuL1ZpZGVvUmVzdWx0TGlzdCc7XG5cbmV4cG9ydCB0eXBlIFRyYW5zbGF0aW9ucyA9IHtcbiAgc2VhcmNoUGxhY2Vob2xkZXI6IHN0cmluZztcbiAgc2VhcmNoQnV0dG9uVGl0bGU6IHN0cmluZztcbiAgbG9hZE1vcmVWaWRlb3M6IHN0cmluZztcbiAgbm9SZXN1bHRzOiBzdHJpbmc7XG4gIGlzMzYwVmlkZW86IHN0cmluZztcbiAgcHJldmlld1ZpZGVvOiBzdHJpbmc7XG4gIGFkZFZpZGVvOiBzdHJpbmc7XG59O1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBvblZpZGVvU2VsZWN0OiAodmlkZW86IEJyaWdodGNvdmVBcGlUeXBlKSA9PiB2b2lkO1xuICBzZWFyY2hWaWRlb3M6IChxdWVyeTogVmlkZW9RdWVyeVR5cGUpID0+IFByb21pc2U8QnJpZ2h0Y292ZUFwaVR5cGVbXT47XG4gIG9uRXJyb3I6IChlOiB1bmtub3duKSA9PiB2b2lkO1xuICB0cmFuc2xhdGlvbnM6IFRyYW5zbGF0aW9ucztcbiAgbG9jYWxlOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgVmlkZW9RdWVyeVR5cGUge1xuICBxdWVyeTogc3RyaW5nO1xuICBvZmZzZXQ6IG51bWJlcjtcbiAgbGltaXQ6IG51bWJlcjtcbn1cblxuY29uc3QgVmlkZW9TZWFyY2hXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLm5vcm1hbH07XG4gID4gZm9ybSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEZvcm1Db250cm9sID0gc3R5bGVkKEZvcm1Db250cm9sKWBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBidXR0b24ge1xuICAgIG1pbi13aWR0aDogJHtzcGFjaW5nLnh4bGFyZ2V9O1xuICAgIGhlaWdodDogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFZpZGVvU2VhcmNoID0gKHsgb25WaWRlb1NlbGVjdCwgc2VhcmNoVmlkZW9zLCBvbkVycm9yLCB0cmFuc2xhdGlvbnMsIGxvY2FsZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbcXVlcnksIHNldFF1ZXJ5XSA9IHVzZVN0YXRlKCcnKTtcbiAgY29uc3QgW29mZnNldCwgc2V0T2Zmc2V0XSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBbdmlkZW9zLCBzZXRWaWRlb3NdID0gdXNlU3RhdGU8QnJpZ2h0Y292ZUFwaVR5cGVbXT4oW10pO1xuICBjb25zdCBbaXNMb2FkaW5nLCBzZXRJc0xvYWRpbmddID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBwcmV2aW91c1F1ZXJ5ID0gdXNlUHJldmlvdXMocXVlcnkpO1xuXG4gIGNvbnN0IGZldGNoVmlkZW9zID0gdXNlQ2FsbGJhY2soXG4gICAgYXN5bmMgKHF1ZXJ5OiBzdHJpbmcsIG9mZnNldDogbnVtYmVyKSA9PiB7XG4gICAgICBzZXRJc0xvYWRpbmcodHJ1ZSk7XG4gICAgICB0cnkge1xuICAgICAgICBjb25zdCBpc0FwcGVuZGluZyA9IHF1ZXJ5ID09PSBwcmV2aW91c1F1ZXJ5O1xuICAgICAgICBjb25zdCByZXN1bHRzID0gYXdhaXQgc2VhcmNoVmlkZW9zKHsgcXVlcnksIG9mZnNldDogb2Zmc2V0LCBsaW1pdDogMTAgfSk7XG4gICAgICAgIHNldFZpZGVvcygocHJldikgPT4gKGlzQXBwZW5kaW5nID8gcHJldi5jb25jYXQocmVzdWx0cykgOiByZXN1bHRzKSk7XG4gICAgICB9IGNhdGNoIChlKSB7XG4gICAgICAgIG9uRXJyb3IoZSk7XG4gICAgICB9XG4gICAgICBzZXRJc0xvYWRpbmcoZmFsc2UpO1xuICAgIH0sXG4gICAgW3NlYXJjaFZpZGVvcywgcHJldmlvdXNRdWVyeSwgb25FcnJvcl0sXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmZXRjaFZpZGVvcygnJywgMCk7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbXSk7XG5cbiAgY29uc3Qgb25TdWJtaXQgPSB1c2VDYWxsYmFjayhcbiAgICAoZTogRm9ybUV2ZW50PEhUTUxGb3JtRWxlbWVudD4pID0+IHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICBzZXRPZmZzZXQoMCk7XG4gICAgICBmZXRjaFZpZGVvcyhxdWVyeSwgb2Zmc2V0KTtcbiAgICB9LFxuICAgIFtmZXRjaFZpZGVvcywgb2Zmc2V0LCBxdWVyeV0sXG4gICk7XG5cbiAgY29uc3Qgb25TaG93TW9yZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBjb25zdCBuZXdPZmZzZXQgPSBvZmZzZXQgKyAxMDtcbiAgICBzZXRPZmZzZXQobmV3T2Zmc2V0KTtcbiAgICBmZXRjaFZpZGVvcyhxdWVyeSwgbmV3T2Zmc2V0KTtcbiAgfSwgW2ZldGNoVmlkZW9zLCBvZmZzZXQsIHF1ZXJ5XSk7XG5cbiAgY29uc3Qgb25RdWVyeUNoYW5nZSA9IHVzZUNhbGxiYWNrKChlOiBDaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgIHNldFF1ZXJ5KGUudGFyZ2V0LnZhbHVlKTtcbiAgfSwgW10pO1xuXG4gIHJldHVybiAoXG4gICAgPFZpZGVvU2VhcmNoV3JhcHBlcj5cbiAgICAgIDxmb3JtIG9uU3VibWl0PXtvblN1Ym1pdH0+XG4gICAgICAgIDxTdHlsZWRGb3JtQ29udHJvbCBpZD1cInZpZGVvLXNlYXJjaC1maWVsZFwiPlxuICAgICAgICAgIDxMYWJlbCB2aXN1YWxseUhpZGRlbj57dHJhbnNsYXRpb25zLnNlYXJjaFBsYWNlaG9sZGVyfTwvTGFiZWw+XG4gICAgICAgICAgPElucHV0VjMgdHlwZT1cInNlYXJjaFwiIHZhbHVlPXtxdWVyeX0gb25DaGFuZ2U9e29uUXVlcnlDaGFuZ2V9IHBsYWNlaG9sZGVyPXt0cmFuc2xhdGlvbnMuc2VhcmNoUGxhY2Vob2xkZXJ9IC8+XG4gICAgICAgICAgPEJ1dHRvblYyIHR5cGU9XCJzdWJtaXRcIj57dHJhbnNsYXRpb25zLnNlYXJjaEJ1dHRvblRpdGxlfTwvQnV0dG9uVjI+XG4gICAgICAgIDwvU3R5bGVkRm9ybUNvbnRyb2w+XG4gICAgICA8L2Zvcm0+XG4gICAgICB7dmlkZW9zLmxlbmd0aCA9PT0gMCAmJiAhaXNMb2FkaW5nID8gKFxuICAgICAgICA8cD57dHJhbnNsYXRpb25zLm5vUmVzdWx0c308L3A+XG4gICAgICApIDogKFxuICAgICAgICA8VmlkZW9SZXN1bHRMaXN0IHZpZGVvcz17dmlkZW9zfSBsb2NhbGU9e2xvY2FsZX0gb25TZWxlY3RWaWRlbz17b25WaWRlb1NlbGVjdH0gdHJhbnNsYXRpb25zPXt0cmFuc2xhdGlvbnN9IC8+XG4gICAgICApfVxuICAgICAge2lzTG9hZGluZyA/IDxTcGlubmVyIC8+IDogPEJ1dHRvblYyIG9uQ2xpY2s9e29uU2hvd01vcmV9Pnt0cmFuc2xhdGlvbnMubG9hZE1vcmVWaWRlb3N9PC9CdXR0b25WMj59XG4gICAgPC9WaWRlb1NlYXJjaFdyYXBwZXI+XG4gICk7XG59O1xuIl19 */"));
+const StyledFormControl = /*#__PURE__*/_styled(FormControl, {
+  target: "eyp4xih0",
+  label: "StyledFormControl"
+})("display:flex;gap:", spacing.small, ";flex-direction:row;align-items:center;button{min-width:", spacing.xxlarge, ";height:", spacing.large, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpZGVvU2VhcmNoLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RDZDIiwiZmlsZSI6IlZpZGVvU2VhcmNoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ2hhbmdlRXZlbnQsIEZvcm1FdmVudCwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBjb2xvcnMsIG1pc2MsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IEZvcm1Db250cm9sLCBJbnB1dFYzLCBMYWJlbCB9IGZyb20gJ0BuZGxhL2Zvcm1zJztcbmltcG9ydCB7IFNwaW5uZXIgfSBmcm9tICdAbmRsYS9pY29ucyc7XG5pbXBvcnQgeyBCcmlnaHRjb3ZlQXBpVHlwZSB9IGZyb20gJ0BuZGxhL3R5cGVzLWVtYmVkJztcbmltcG9ydCB7IHVzZVByZXZpb3VzIH0gZnJvbSAnQG5kbGEvdXRpbCc7XG5pbXBvcnQgeyBWaWRlb1Jlc3VsdExpc3QgfSBmcm9tICcuL1ZpZGVvUmVzdWx0TGlzdCc7XG5cbmV4cG9ydCB0eXBlIFRyYW5zbGF0aW9ucyA9IHtcbiAgc2VhcmNoUGxhY2Vob2xkZXI6IHN0cmluZztcbiAgc2VhcmNoQnV0dG9uVGl0bGU6IHN0cmluZztcbiAgbG9hZE1vcmVWaWRlb3M6IHN0cmluZztcbiAgbm9SZXN1bHRzOiBzdHJpbmc7XG4gIGlzMzYwVmlkZW86IHN0cmluZztcbiAgcHJldmlld1ZpZGVvOiBzdHJpbmc7XG4gIGFkZFZpZGVvOiBzdHJpbmc7XG59O1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBvblZpZGVvU2VsZWN0OiAodmlkZW86IEJyaWdodGNvdmVBcGlUeXBlKSA9PiB2b2lkO1xuICBzZWFyY2hWaWRlb3M6IChxdWVyeTogVmlkZW9RdWVyeVR5cGUpID0+IFByb21pc2U8QnJpZ2h0Y292ZUFwaVR5cGVbXT47XG4gIG9uRXJyb3I6IChlOiB1bmtub3duKSA9PiB2b2lkO1xuICB0cmFuc2xhdGlvbnM6IFRyYW5zbGF0aW9ucztcbiAgbG9jYWxlOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgVmlkZW9RdWVyeVR5cGUge1xuICBxdWVyeTogc3RyaW5nO1xuICBvZmZzZXQ6IG51bWJlcjtcbiAgbGltaXQ6IG51bWJlcjtcbn1cblxuY29uc3QgVmlkZW9TZWFyY2hXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLm5vcm1hbH07XG4gID4gZm9ybSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEZvcm1Db250cm9sID0gc3R5bGVkKEZvcm1Db250cm9sKWBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBidXR0b24ge1xuICAgIG1pbi13aWR0aDogJHtzcGFjaW5nLnh4bGFyZ2V9O1xuICAgIGhlaWdodDogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFZpZGVvU2VhcmNoID0gKHsgb25WaWRlb1NlbGVjdCwgc2VhcmNoVmlkZW9zLCBvbkVycm9yLCB0cmFuc2xhdGlvbnMsIGxvY2FsZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbcXVlcnksIHNldFF1ZXJ5XSA9IHVzZVN0YXRlKCcnKTtcbiAgY29uc3QgW29mZnNldCwgc2V0T2Zmc2V0XSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBbdmlkZW9zLCBzZXRWaWRlb3NdID0gdXNlU3RhdGU8QnJpZ2h0Y292ZUFwaVR5cGVbXT4oW10pO1xuICBjb25zdCBbaXNMb2FkaW5nLCBzZXRJc0xvYWRpbmddID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBwcmV2aW91c1F1ZXJ5ID0gdXNlUHJldmlvdXMocXVlcnkpO1xuXG4gIGNvbnN0IGZldGNoVmlkZW9zID0gdXNlQ2FsbGJhY2soXG4gICAgYXN5bmMgKHF1ZXJ5OiBzdHJpbmcsIG9mZnNldDogbnVtYmVyKSA9PiB7XG4gICAgICBzZXRJc0xvYWRpbmcodHJ1ZSk7XG4gICAgICB0cnkge1xuICAgICAgICBjb25zdCBpc0FwcGVuZGluZyA9IHF1ZXJ5ID09PSBwcmV2aW91c1F1ZXJ5O1xuICAgICAgICBjb25zdCByZXN1bHRzID0gYXdhaXQgc2VhcmNoVmlkZW9zKHsgcXVlcnksIG9mZnNldDogb2Zmc2V0LCBsaW1pdDogMTAgfSk7XG4gICAgICAgIHNldFZpZGVvcygocHJldikgPT4gKGlzQXBwZW5kaW5nID8gcHJldi5jb25jYXQocmVzdWx0cykgOiByZXN1bHRzKSk7XG4gICAgICB9IGNhdGNoIChlKSB7XG4gICAgICAgIG9uRXJyb3IoZSk7XG4gICAgICB9XG4gICAgICBzZXRJc0xvYWRpbmcoZmFsc2UpO1xuICAgIH0sXG4gICAgW3NlYXJjaFZpZGVvcywgcHJldmlvdXNRdWVyeSwgb25FcnJvcl0sXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmZXRjaFZpZGVvcygnJywgMCk7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbXSk7XG5cbiAgY29uc3Qgb25TdWJtaXQgPSB1c2VDYWxsYmFjayhcbiAgICAoZTogRm9ybUV2ZW50PEhUTUxGb3JtRWxlbWVudD4pID0+IHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICBzZXRPZmZzZXQoMCk7XG4gICAgICBmZXRjaFZpZGVvcyhxdWVyeSwgb2Zmc2V0KTtcbiAgICB9LFxuICAgIFtmZXRjaFZpZGVvcywgb2Zmc2V0LCBxdWVyeV0sXG4gICk7XG5cbiAgY29uc3Qgb25TaG93TW9yZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBjb25zdCBuZXdPZmZzZXQgPSBvZmZzZXQgKyAxMDtcbiAgICBzZXRPZmZzZXQobmV3T2Zmc2V0KTtcbiAgICBmZXRjaFZpZGVvcyhxdWVyeSwgbmV3T2Zmc2V0KTtcbiAgfSwgW2ZldGNoVmlkZW9zLCBvZmZzZXQsIHF1ZXJ5XSk7XG5cbiAgY29uc3Qgb25RdWVyeUNoYW5nZSA9IHVzZUNhbGxiYWNrKChlOiBDaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgIHNldFF1ZXJ5KGUudGFyZ2V0LnZhbHVlKTtcbiAgfSwgW10pO1xuXG4gIHJldHVybiAoXG4gICAgPFZpZGVvU2VhcmNoV3JhcHBlcj5cbiAgICAgIDxmb3JtIG9uU3VibWl0PXtvblN1Ym1pdH0+XG4gICAgICAgIDxTdHlsZWRGb3JtQ29udHJvbCBpZD1cInZpZGVvLXNlYXJjaC1maWVsZFwiPlxuICAgICAgICAgIDxMYWJlbCB2aXN1YWxseUhpZGRlbj57dHJhbnNsYXRpb25zLnNlYXJjaFBsYWNlaG9sZGVyfTwvTGFiZWw+XG4gICAgICAgICAgPElucHV0VjMgdHlwZT1cInNlYXJjaFwiIHZhbHVlPXtxdWVyeX0gb25DaGFuZ2U9e29uUXVlcnlDaGFuZ2V9IHBsYWNlaG9sZGVyPXt0cmFuc2xhdGlvbnMuc2VhcmNoUGxhY2Vob2xkZXJ9IC8+XG4gICAgICAgICAgPEJ1dHRvblYyIHR5cGU9XCJzdWJtaXRcIj57dHJhbnNsYXRpb25zLnNlYXJjaEJ1dHRvblRpdGxlfTwvQnV0dG9uVjI+XG4gICAgICAgIDwvU3R5bGVkRm9ybUNvbnRyb2w+XG4gICAgICA8L2Zvcm0+XG4gICAgICB7dmlkZW9zLmxlbmd0aCA9PT0gMCAmJiAhaXNMb2FkaW5nID8gKFxuICAgICAgICA8cD57dHJhbnNsYXRpb25zLm5vUmVzdWx0c308L3A+XG4gICAgICApIDogKFxuICAgICAgICA8VmlkZW9SZXN1bHRMaXN0IHZpZGVvcz17dmlkZW9zfSBsb2NhbGU9e2xvY2FsZX0gb25TZWxlY3RWaWRlbz17b25WaWRlb1NlbGVjdH0gdHJhbnNsYXRpb25zPXt0cmFuc2xhdGlvbnN9IC8+XG4gICAgICApfVxuICAgICAge2lzTG9hZGluZyA/IDxTcGlubmVyIC8+IDogPEJ1dHRvblYyIG9uQ2xpY2s9e29uU2hvd01vcmV9Pnt0cmFuc2xhdGlvbnMubG9hZE1vcmVWaWRlb3N9PC9CdXR0b25WMj59XG4gICAgPC9WaWRlb1NlYXJjaFdyYXBwZXI+XG4gICk7XG59O1xuIl19 */"));
+export const VideoSearch = _ref => {
+  let {
+    onVideoSelect,
+    searchVideos,
+    onError,
+    translations,
+    locale
+  } = _ref;
+  const [query, setQuery] = useState('');
+  const [offset, setOffset] = useState(0);
+  const [videos, setVideos] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const previousQuery = usePrevious(query);
+  const fetchVideos = useCallback(async (query, offset) => {
+    setIsLoading(true);
+    try {
+      const isAppending = query === previousQuery;
+      const results = await searchVideos({
+        query,
+        offset: offset,
         limit: 10
-      },
-      videos: [],
-      selectedType: 'brightcove',
-      // Default
-      selectedVideo: undefined,
-      lastPage: 0,
-      searching: false
-    };
-    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);
-  }
-  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
-      };
-    }
-    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({
-        searching: false
-      });
-    });
-  }
-  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({
-        searching: false
       });
-    });
-  }
-  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
-        });
-      }
-      return _jsx(Pager, {
-        page: page || 1,
-        lastPage: lastPage,
-        onClick: this.changeQueryPage
-      });
-    };
-    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,
-          onSelectVideo: this.onSelectVideo
-        })
+      setVideos(prev => isAppending ? prev.concat(results) : results);
+    } catch (e) {
+      onError(e);
+    }
+    setIsLoading(false);
+  }, [searchVideos, previousQuery, onError]);
+  useEffect(() => {
+    fetchVideos('', 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSubmit = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOffset(0);
+    fetchVideos(query, offset);
+  }, [fetchVideos, offset, query]);
+  const onShowMore = useCallback(() => {
+    const newOffset = offset + 10;
+    setOffset(newOffset);
+    fetchVideos(query, newOffset);
+  }, [fetchVideos, offset, query]);
+  const onQueryChange = useCallback(e => {
+    setQuery(e.target.value);
+  }, []);
+  return _jsxs(VideoSearchWrapper, {
+    children: [_jsx("form", {
+      onSubmit: onSubmit,
+      children: _jsxs(StyledFormControl, {
+        id: "video-search-field",
+        children: [_jsx(Label, {
+          visuallyHidden: true,
+          children: translations.searchPlaceholder
+        }), _jsx(InputV3, {
+          type: "search",
+          value: query,
+          onChange: onQueryChange,
+          placeholder: translations.searchPlaceholder
+        }), _jsx(ButtonV2, {
+          type: "submit",
+          children: translations.searchButtonTitle
+        })]
       })
-    }));
-    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,
-  onError: PropTypes.func.isRequired,
-  translations: PropTypes.shape({
-    searchPlaceholder: PropTypes.string.isRequired,
-    searchButtonTitle: PropTypes.string.isRequired,
-    loadMoreVideos: PropTypes.string.isRequired
-  }),
-  locale: PropTypes.string.isRequired,
-  enabledSources: PropTypes.arrayOf(PropTypes.string)
-};
-VideoSearch.defaultProps = {
-  enabledSources: ['Brightcove']
-};
-export default VideoSearch;
+    }), videos.length === 0 && !isLoading ? _jsx("p", {
+      children: translations.noResults
+    }) : _jsx(VideoResultList, {
+      videos: videos,
+      locale: locale,
+      onSelectVideo: onVideoSelect,
+      translations: translations
+    }), isLoading ? _jsx(Spinner, {}) : _jsx(ButtonV2, {
+      onClick: onShowMore,
+      children: translations.loadMoreVideos
+    })]
+  });
+};

package/es/index.js

@@ -6,5 +6,5 @@
  *
  */
 
-import VideoSearch from './VideoSearch';
+import { VideoSearch } from './VideoSearch';
 export default VideoSearch;

package/lib/VideoResultList.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2017-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { BrightcoveApiType } from '@ndla/types-embed';
+import { Translations } from './VideoSearch';
+interface Props {
+    videos: BrightcoveApiType[];
+    translations: Translations;
+    locale: string;
+    onSelectVideo: (video: BrightcoveApiType) => void;
+}
+export declare const VideoResultList: ({ videos, translations, locale, onSelectVideo }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface VideoListItemProps {
+    video: BrightcoveApiType;
+    translations: Translations;
+    locale: string;
+    onSelectVideo: (video: BrightcoveApiType) => void;
+}
+export declare const VideoListItem: ({ video, onSelectVideo, translations, locale }: VideoListItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};