@ndla/video-search 4.1.47 → 5.0.0

package/lib/VideoSearch.js

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.VideoSearch = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("react");
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-var _pager = _interopRequireDefault(require("@ndla/pager"));
-var _videoHelpers = require("./videoHelpers");
-var _VideoLoadMoreButton = _interopRequireDefault(require("./VideoLoadMoreButton"));
-var _VideoSearchForm = _interopRequireDefault(require("./VideoSearchForm"));
-var _VideoSearchList = _interopRequireDefault(require("./VideoSearchList"));
-var _VideoTabs = _interopRequireDefault(require("./VideoTabs"));
+var _button = require("@ndla/button");
+var _core = require("@ndla/core");
+var _forms = require("@ndla/forms");
+var _icons = require("@ndla/icons");
+var _util = require("@ndla/util");
+var _VideoResultList = require("./VideoResultList");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
@@ -23,242 +22,89 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  */
 
-const classes = new _reactBemHelper.default({
-  name: 'video-search',
-  prefix: 'c-'
-});
-class VideoSearch extends _react.Component {
-  constructor() {
-    super();
-    this.state = {
-      queryObject: {
-        query: '',
-        offset: 0,
+const VideoSearchWrapper = /*#__PURE__*/(0, _base.default)("div", {
+  target: "eyp4xih1",
+  label: "VideoSearchWrapper"
+})("display:flex;flex-direction:column;align-items:center;gap:", _core.spacing.normal, ";border:1px solid ", _core.colors.brand.light, ";border-radius:", _core.misc.borderRadius, ";padding:", _core.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__*/(0, _base.default)(_forms.FormControl, {
+  target: "eyp4xih0",
+  label: "StyledFormControl"
+})("display:flex;gap:", _core.spacing.small, ";flex-direction:row;align-items:center;button{min-width:", _core.spacing.xxlarge, ";height:", _core.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 */"));
+const VideoSearch = _ref => {
+  let {
+    onVideoSelect,
+    searchVideos,
+    onError,
+    translations,
+    locale
+  } = _ref;
+  const [query, setQuery] = (0, _react.useState)('');
+  const [offset, setOffset] = (0, _react.useState)(0);
+  const [videos, setVideos] = (0, _react.useState)([]);
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const previousQuery = (0, _util.usePrevious)(query);
+  const fetchVideos = (0, _react.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: (0, _videoHelpers.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 (0, _jsxRuntime.jsx)(_VideoLoadMoreButton.default, {
-          searching: searching,
-          videos: videos,
-          loadMoreVideos: this.loadMoreVideos,
-          limit: queryObject.limit,
-          translations: translations
-        });
-      }
-      return (0, _jsxRuntime.jsx)(_pager.default, {
-        page: page || 1,
-        lastPage: lastPage,
-        onClick: this.changeQueryPage
-      });
-    };
-    const searchListTabs = enabledSources.map(source => ({
-      title: source,
-      id: source,
-      content: (0, _jsxRuntime.jsx)("div", {
-        ...classes('list'),
-        children: selectedType === source.toLowerCase() && (0, _jsxRuntime.jsx)(_VideoSearchList.default, {
-          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]);
+  (0, _react.useEffect)(() => {
+    fetchVideos('', 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSubmit = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOffset(0);
+    fetchVideos(query, offset);
+  }, [fetchVideos, offset, query]);
+  const onShowMore = (0, _react.useCallback)(() => {
+    const newOffset = offset + 10;
+    setOffset(newOffset);
+    fetchVideos(query, newOffset);
+  }, [fetchVideos, offset, query]);
+  const onQueryChange = (0, _react.useCallback)(e => {
+    setQuery(e.target.value);
+  }, []);
+  return (0, _jsxRuntime.jsxs)(VideoSearchWrapper, {
+    children: [(0, _jsxRuntime.jsx)("form", {
+      onSubmit: onSubmit,
+      children: (0, _jsxRuntime.jsxs)(StyledFormControl, {
+        id: "video-search-field",
+        children: [(0, _jsxRuntime.jsx)(_forms.Label, {
+          visuallyHidden: true,
+          children: translations.searchPlaceholder
+        }), (0, _jsxRuntime.jsx)(_forms.InputV3, {
+          type: "search",
+          value: query,
+          onChange: onQueryChange,
+          placeholder: translations.searchPlaceholder
+        }), (0, _jsxRuntime.jsx)(_button.ButtonV2, {
+          type: "submit",
+          children: translations.searchButtonTitle
+        })]
       })
-    }));
-    return (0, _jsxRuntime.jsxs)("div", {
-      ...classes(),
-      children: [(0, _jsxRuntime.jsx)(_VideoSearchForm.default, {
-        onSearchQuerySubmit: this.submitVideoSearchQuery,
-        query: query,
-        searching: searching,
-        translations: translations
-      }), (0, _jsxRuntime.jsx)(_VideoTabs.default, {
-        searchTypes: selectedType,
-        tabs: searchListTabs,
-        onSearchTypeChange: this.onSearchTypeChange
-      }), paginationItem()]
-    });
-  }
-}
-VideoSearch.propTypes = {
-  onVideoSelect: _propTypes.default.func.isRequired,
-  searchVideos: _propTypes.default.func.isRequired,
-  onError: _propTypes.default.func.isRequired,
-  translations: _propTypes.default.shape({
-    searchPlaceholder: _propTypes.default.string.isRequired,
-    searchButtonTitle: _propTypes.default.string.isRequired,
-    loadMoreVideos: _propTypes.default.string.isRequired
-  }),
-  locale: _propTypes.default.string.isRequired,
-  enabledSources: _propTypes.default.arrayOf(_propTypes.default.string)
-};
-VideoSearch.defaultProps = {
-  enabledSources: ['Brightcove']
+    }), videos.length === 0 && !isLoading ? (0, _jsxRuntime.jsx)("p", {
+      children: translations.noResults
+    }) : (0, _jsxRuntime.jsx)(_VideoResultList.VideoResultList, {
+      videos: videos,
+      locale: locale,
+      onSelectVideo: onVideoSelect,
+      translations: translations
+    }), isLoading ? (0, _jsxRuntime.jsx)(_icons.Spinner, {}) : (0, _jsxRuntime.jsx)(_button.ButtonV2, {
+      onClick: onShowMore,
+      children: translations.loadMoreVideos
+    })]
+  });
 };
-var _default = exports.default = VideoSearch;
+exports.VideoSearch = VideoSearch;

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { VideoSearch } from './VideoSearch';
+export type { VideoQueryType } from './VideoSearch';
+export default VideoSearch;

package/lib/index.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _VideoSearch = _interopRequireDefault(require("./VideoSearch"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _VideoSearch = require("./VideoSearch");
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -13,4 +12,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  *
  */
-var _default = exports.default = _VideoSearch.default;
+var _default = exports.default = _VideoSearch.VideoSearch;

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@ndla/video-search",
-  "version": "4.1.47",
+  "version": "5.0.0",
   "description": "A simple library for searching NDLA videos",
   "license": "GPL-3.0",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "build": "node ../../scripts/build.js package"
+    "build": "node ../../scripts/build.js package",
+    "build:types": "tsc -p tsconfig.build.json",
+    "prepublish": "yarn build:types"
   },
   "repository": {
     "type": "git",
@@ -18,29 +21,29 @@
   ],
   "author": "ndla@knowit.no",
   "files": [
-    "scss",
     "lib",
     "es"
   ],
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "react": ">= 16.8.0",
-    "react-bem-helper": "^1.4.1"
+    "react-dom": ">= 16.8.0"
   },
   "devDependencies": {
-    "prop-types": "^15.8.1"
+    "@ndla/types-embed": "^4.0.11"
   },
   "dependencies": {
     "@ndla/button": "^12.0.18",
+    "@ndla/core": "^4.3.0",
+    "@ndla/forms": "^5.2.8",
     "@ndla/icons": "^4.2.5",
     "@ndla/licenses": "^7.2.4",
     "@ndla/notion": "^6.0.19",
-    "@ndla/pager": "^2.2.43",
-    "@ndla/tabs": "^3.2.6",
-    "react-bem-helper": "^1.4.1"
+    "@ndla/util": "^4.0.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "33f14792431d5c46241455f1f5e05ac9a81ab7d6"
+  "gitHead": "674b17d155fc4c43b541e179821826bea1d47327"
 }

package/es/PreviewVideo.js

@@ -1,37 +0,0 @@
-/**
- * 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 PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-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";
-const classes = new BEMHelper({
-  name: 'video-preview',
-  prefix: 'c-'
-});
-export default function PreviewVideo(_ref) {
-  let {
-    onVideoPreview,
-    children
-  } = _ref;
-  return _jsxs("div", {
-    ...classes(),
-    children: [_jsx(ButtonV2, {
-      ...classes('close'),
-      variant: "stripped",
-      onClick: () => onVideoPreview(undefined),
-      children: _jsx(Cross, {})
-    }), children]
-  });
-}
-PreviewVideo.propTypes = {
-  children: PropTypes.node,
-  onVideoPreview: PropTypes.func.isRequired
-};

package/es/VideoLoadMoreButton.js

@@ -1,51 +0,0 @@
-/**
- * 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 PropTypes from 'prop-types';
-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";
-const classes = new BEMHelper({
-  name: 'video-search',
-  prefix: 'c-'
-});
-const VideoLoadMoreButton = props => {
-  const {
-    videos,
-    searching,
-    limit,
-    translations,
-    loadMoreVideos
-  } = props;
-  if (!videos || videos.length === 0 || videos.length % limit !== 0) {
-    return null;
-  }
-  return _jsx("div", {
-    ...classes('load-videos'),
-    children: _jsx(ButtonV2, {
-      disabled: searching,
-      onClick: loadMoreVideos,
-      children: searching ? _jsx("div", {
-        ...classes('spinner')
-      }) : translations.loadMoreVideos
-    })
-  });
-};
-VideoLoadMoreButton.propTypes = {
-  searching: PropTypes.bool.isRequired,
-  videos: PropTypes.oneOfType([PropTypes.arrayOf(BrightcoveShape), PropTypes.arrayOf(YouTubeShape)]),
-  translations: PropTypes.shape({
-    searchPlaceholder: PropTypes.string.isRequired,
-    searchButtonTitle: PropTypes.string.isRequired,
-    loadMoreVideos: PropTypes.string.isRequired
-  }),
-  limit: PropTypes.number.isRequired,
-  loadMoreVideos: PropTypes.func.isRequired
-};
-export default VideoLoadMoreButton;

package/es/VideoSearchForm.js

@@ -1,78 +0,0 @@
-/**
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import { Component } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { ButtonV2 } from '@ndla/button';
-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 SearchForm extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      query: props.query
-    };
-    this.handleQueryChange = this.handleQueryChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.onKeyPress = this.onKeyPress.bind(this);
-  }
-  onKeyPress(evt) {
-    if (evt.key === 'Enter') {
-      this.handleSubmit(evt);
-    }
-  }
-  handleQueryChange(evt) {
-    this.setState({
-      query: evt.target.value
-    });
-  }
-  handleSubmit(evt) {
-    evt.preventDefault();
-    this.props.onSearchQuerySubmit(this.state.query);
-  }
-  render() {
-    const {
-      searching,
-      translations
-    } = this.props;
-    return _jsxs("div", {
-      ...classes('form'),
-      children: [_jsx("input", {
-        ...classes('form-query'),
-        type: "text",
-        onChange: this.handleQueryChange,
-        onKeyPress: this.onKeyPress,
-        value: this.state.query,
-        placeholder: translations.searchPlaceholder
-      }), _jsx(ButtonV2, {
-        ...classes('form-button'),
-        onClick: this.handleSubmit,
-        disabled: searching,
-        children: translations.searchButtonTitle
-      })]
-    });
-  }
-}
-SearchForm.propTypes = {
-  query: PropTypes.string,
-  searching: PropTypes.bool.isRequired,
-  onSearchQuerySubmit: PropTypes.func.isRequired,
-  translations: PropTypes.shape({
-    searchPlaceholder: PropTypes.string.isRequired,
-    searchButtonTitle: PropTypes.string.isRequired
-  })
-};
-SearchForm.defaultProps = {
-  query: ''
-};
-export default SearchForm;