@atlaskit/media-viewer 46.3.0 → 47.0.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/media-viewer
 
+## 47.0.0
+
+### Major Changes
+
+- [`910bb0dca94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/910bb0dca94) - Migrated to emotion from styled-components
+
+### Patch Changes
+
+- [`4c82874f35c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c82874f35c) - Wrap each line in a parent element in code viewer to fix call stack overflow issue.
+- [`e3d4c39b20c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3d4c39b20c) - Remove version.json file.
+  Use injected package name and version from environment variable instead.
+- Updated dependencies
+
+## 46.5.0
+
+### Minor Changes
+
+- [`1a76e2839e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a76e2839e6) - Default value for mediaUploadApiV2 Media feature flag set to true.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 46.4.0
+
+### Minor Changes
+
+- [`bfde909c9b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bfde909c9b4) - Add new feature flag mediaUploadApiV2
+- [`35e43fcc798`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35e43fcc798) - Add ufo feature flag logging
+- [`31cf1fff440`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31cf1fff440) - Flagged events with file states processing and uploading for UFO payload
+
+### Patch Changes
+
+- [`0ea419d2739`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea419d2739) - Enabled UFO logger for all the examples in Media-viewer
+- [`c2ede50a80a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ede50a80a) - Add media region and environment returned from media API response into failed analytic events.
+- Updated dependencies
+
 ## 46.3.0
 
 ### Minor Changes

package/dist/cjs/analytics/index.js

@@ -3,28 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.componentName = exports.component = void 0;
+exports.componentName = exports.component = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireAnalytics = fireAnalytics;
 exports.getFileAttributes = getFileAttributes;
-Object.defineProperty(exports, "packageName", {
-  enumerable: true,
-  get: function get() {
-    return _version.name;
-  }
-});
-Object.defineProperty(exports, "packageVersion", {
-  enumerable: true,
-  get: function get() {
-    return _version.version;
-  }
-});
+exports.relevantFlags = exports.packageVersion = exports.packageName = void 0;
 
 var _mediaCommon = require("@atlaskit/media-common");
 
-var _version = require("../version.json");
-
 var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
+var packageName = "@atlaskit/media-viewer";
+exports.packageName = packageName;
+var packageVersion = "47.0.0";
+exports.packageVersion = packageVersion;
+var relevantFlags = {
+  newCardExperience: false,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: true
+};
+exports.relevantFlags = relevantFlags;
+var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
+exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
+var LOGGED_FEATURE_FLAG_KEYS = (0, _mediaCommon.filterFeatureFlagKeysAllProducts)(relevantFlags);
+exports.LOGGED_FEATURE_FLAG_KEYS = LOGGED_FEATURE_FLAG_KEYS;
 
 function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/cjs/analytics/ufoExperiences.js

@@ -13,12 +13,14 @@ var _ufo = require("@atlaskit/ufo");
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _version = require("../version.json");
+var _ = require(".");
 
 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) { (0, _defineProperty2.default)(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; }
 
+var packageName = "@atlaskit/media-viewer";
+var packageVersion = "47.0.0";
 var ufoExperience;
 
 var getExperience = function getExperience() {
@@ -28,7 +30,8 @@ var getExperience = function getExperience() {
         component: 'media-viewer'
       },
       type: _ufo.ExperienceTypes.Experience,
-      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+      featureFlags: _.LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new _ufo.UFOExperience('media-file', inlineExperience);
   }
@@ -44,13 +47,12 @@ exports.startMediaFileUfoExperience = startMediaFileUfoExperience;
 
 var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperience(properties) {
   getExperience().success({
-    metadata: {
-      fileAttributes: properties,
-      packageName: _version.name,
-      packageVersion: _version.version,
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
-    }
+    })
   });
 };
 
@@ -58,8 +60,8 @@ exports.succeedMediaFileUfoExperience = succeedMediaFileUfoExperience;
 
 var failMediaFileUfoExperience = function failMediaFileUfoExperience(properties) {
   var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
-    packageName: _version.name,
-    packageVersion: _version.version,
+    packageName: packageName,
+    packageVersion: packageVersion,
     mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
     mediaRegion: (0, _mediaClient.getMediaRegion)()
   });

package/dist/cjs/content.js

@@ -25,7 +25,7 @@ var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -58,14 +58,14 @@ var Content = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           onClose = _this$props.onClose,
           isSidebarVisible = _this$props.isSidebarVisible;
-      return /*#__PURE__*/_react.default.createElement(_styled.ContentWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ContentWrapper, {
         isSidebarVisible: isSidebarVisible
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function (triggerActivityCallback) {
         var children = /*#__PURE__*/_react.default.cloneElement(_this.props.children, {
           showControls: triggerActivityCallback
         });
 
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.CloseButtonWrapper, {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.CloseButtonWrapper, {
           className: _mediaUi.hideControlsClassName
         }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
           testId: "media-viewer-close-button",

package/dist/cjs/download.js

@@ -31,7 +31,7 @@ var _downloadButtonClicked = require("./analytics/events/ui/downloadButtonClicke
 
 var _failedPreviewDownloadButtonClicked = require("./analytics/events/ui/failedPreviewDownloadButtonClicked");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _excluded = ["analyticspayload", "onClick"];
 
@@ -79,7 +79,7 @@ var ErrorViewDownloadButton = function ErrorViewDownloadButton(props) {
   var fileState = props.fileState,
       error = props.error;
   var downloadEvent = (0, _failedPreviewDownloadButtonClicked.createFailedPreviewDownloadButtonClickedEvent)(fileState, error);
-  return /*#__PURE__*/_react.default.createElement(_styled.DownloadButtonWrapper, null, /*#__PURE__*/_react.default.createElement(DownloadButton, {
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.DownloadButtonWrapper, null, /*#__PURE__*/_react.default.createElement(DownloadButton, {
     testId: "media-viewer-download-button",
     analyticspayload: downloadEvent,
     appearance: "primary",

package/dist/cjs/errorMessage.js

@@ -27,7 +27,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _errorImages = require("./error-images");
 
@@ -50,7 +50,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 var errorLoadingFileImage = function errorLoadingFileImage(formatMessage) {
-  return /*#__PURE__*/_react.default.createElement(_styled.ErrorImage, {
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.ErrorImage, {
     src: _errorImages.errorLoadingFile,
     alt: formatMessage(_mediaUi.messages.error_loading_file)
   });
@@ -109,7 +109,9 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         (0, _analytics.fireAnalytics)(payload, props);
 
-        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+        var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
+          fileStateFlags: props.fileStateFlags
+        });
 
         if (Object.keys(rawPayload).includes('status')) {
           delete rawPayload['status'];
@@ -123,7 +125,7 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var errorInfo = this.getErrorInfo();
-      return /*#__PURE__*/_react.default.createElement(_styled.ErrorMessageWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ErrorMessageWrapper, {
         "data-testid": "media-viewer-error"
       }, /*#__PURE__*/_react.default.createElement("div", null, errorInfo.icon, errorInfo.messages.map(function (formatMessage, i) {
         return /*#__PURE__*/_react.default.createElement("p", {

package/dist/cjs/header.js

@@ -35,7 +35,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _domain = require("./domain");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _download = require("./download");
 
@@ -235,10 +235,10 @@ var Header = /*#__PURE__*/function (_React$Component) {
         isArchiveSideBarVisible = mediaType === 'archive';
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.Header, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.Header, {
         isArchiveSideBarVisible: isArchiveSideBarVisible,
         className: _mediaUi.hideControlsClassName
-      }, /*#__PURE__*/_react.default.createElement(_styled.LeftHeader, null, this.renderMetadata()), /*#__PURE__*/_react.default.createElement(_styled.RightHeader, null, this.renderSidebarButton(), this.renderDownload()));
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftHeader, null, this.renderMetadata()), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightHeader, null, this.renderSidebarButton(), this.renderDownload()));
     }
   }, {
     key: "renderMetadata",
@@ -262,11 +262,11 @@ var Header = /*#__PURE__*/function (_React$Component) {
     key: "renderMetadataLayout",
     value: function renderMetadataLayout(item) {
       if (!(0, _mediaClient.isErrorFileState)(item)) {
-        return /*#__PURE__*/_react.default.createElement(_styled.MetadataWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.MetadataIconWrapper, null, this.getMediaIcon(item.mediaType, item.mimeType, item.name)), /*#__PURE__*/_react.default.createElement(_styled.MedatadataTextWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.MetadataFileName, {
+        return /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataIconWrapper, null, this.getMediaIcon(item.mediaType, item.mimeType, item.name)), /*#__PURE__*/_react.default.createElement(_styleWrappers.MedatadataTextWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataFileName, {
           "data-testid": "media-viewer-file-name"
-        }, item.name || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.unknown)), /*#__PURE__*/_react.default.createElement(_styled.MetadataSubText, {
+        }, item.name || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.unknown)), /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataSubText, {
           "data-testid": "media-viewer-file-metadata-text"
-        }, /*#__PURE__*/_react.default.createElement(_styled.FormattedMessageWrapper, null, this.renderFileTypeText(item)), this.renderSize(item))));
+        }, /*#__PURE__*/_react.default.createElement(_styleWrappers.FormattedMessageWrapper, null, this.renderFileTypeText(item)), this.renderSize(item))));
       } else {
         return null;
       }

package/dist/cjs/item-viewer.js

@@ -163,13 +163,20 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", initialState);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
           (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes), _this.props);
-          (0, _ufoExperiences.succeedMediaFileUfoExperience)(fileAttributes);
+          (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+            fileAttributes: fileAttributes,
+            fileStateFlags: _this.fileStateFlags
+          });
         }
       });
     });
@@ -183,7 +190,10 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         fileId: 'external-image'
       }), _this.props);
       (0, _ufoExperiences.succeedMediaFileUfoExperience)({
-        fileId: 'external-image'
+        fileAttributes: {
+          fileId: 'external-image'
+        },
+        fileStateFlags: _this.fileStateFlags
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgError", function () {
@@ -304,12 +314,14 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
           fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
           error: error,
-          fileState: fileState
+          fileState: fileState,
+          fileStateFlags: this.fileStateFlags
         }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
       } else {
         return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
           fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
-          error: error
+          error: error,
+          fileStateFlags: this.fileStateFlags
         });
       }
     }
@@ -371,6 +383,21 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: collectionName
       });
     }
+  }, {
+    key: "updateFileStateFlag",
+    value: function updateFileStateFlag(fileState) {
+      if (!fileState) {
+        return;
+      }
+
+      var status = fileState.status;
+
+      if (status === 'processing') {
+        this.fileStateFlags.wasStatusProcessing = true;
+      } else if (status === 'uploading') {
+        this.fileStateFlags.wasStatusUploading = true;
+      }
+    }
   }, {
     key: "init",
     value: function init(props) {
@@ -396,6 +423,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: identifier.collectionName
       }).subscribe({
         next: function next(file) {
+          _this3.updateFileStateFlag(file);
+
           _this3.setState({
             item: _domain.Outcome.successful(file)
           });

package/dist/cjs/list.js

@@ -27,7 +27,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _itemViewer = require("./item-viewer");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _navigation = require("./navigation");
 
@@ -96,7 +96,7 @@ var List = /*#__PURE__*/function (_React$Component) {
           contextId = _this$props2.contextId,
           featureFlags = _this$props2.featureFlags;
       var selectedItem = this.state.selectedItem;
-      return /*#__PURE__*/_react.default.createElement(_styled.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.HeaderWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper, {
         className: _mediaUi.hideControlsClassName
       }, /*#__PURE__*/_react.default.createElement(_header.default, {
         mediaClient: mediaClient,

package/dist/cjs/media-viewer.js

@@ -43,7 +43,7 @@ var _collection = require("./collection");
 
 var _content = require("./content");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _perfMarks = require("perf-marks");
 
@@ -103,7 +103,7 @@ var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
       var sidebardSelectedIdentifier = selectedIdentifier || _this.defaultSelectedItem;
 
       if (sidebardSelectedIdentifier && isSidebarVisible && extensions && extensions.sidebar) {
-        return /*#__PURE__*/_react.default.createElement(_styled.SidebarWrapper, {
+        return /*#__PURE__*/_react.default.createElement(_styleWrappers.SidebarWrapper, {
           "data-testid": "media-viewer-sidebar-content"
         }, extensions.sidebar.renderer(sidebardSelectedIdentifier, {
           close: _this.toggleSidebar
@@ -144,7 +144,7 @@ var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var isSidebarVisible = this.state.isSidebarVisible;
 
-      var content = /*#__PURE__*/_react.default.createElement(_styled.Blanket, {
+      var content = /*#__PURE__*/_react.default.createElement(_styleWrappers.Blanket, {
         "data-testid": "media-viewer-popup",
         className: _classnames.mediaViewerPopupClass
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
@@ -212,14 +212,7 @@ var MediaViewer = (0, _mediaCommon.withMediaAnalyticsContext)({
   component: _analytics.component,
   componentName: _analytics.componentName
 }, {
-  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
-    newCardExperience: false,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: false
-  })
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaViewerComponent, {
   enforceContext: false
 })));

package/dist/cjs/navigation.js

@@ -33,7 +33,7 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _utils = require("./utils");
 
@@ -113,7 +113,7 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
         return _this2.navigate('next', source);
       };
 
-      return /*#__PURE__*/_react.default.createElement(_styled.ArrowsWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.LeftWrapper, null, isLeftVisible ? /*#__PURE__*/_react.default.createElement(_styled.Arrow, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArrowsWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftWrapper, null, isLeftVisible ? /*#__PURE__*/_react.default.createElement(_styleWrappers.Arrow, {
         className: _mediaUi.hideControlsClassName
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
         keyCode: 37,
@@ -126,7 +126,7 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
           size: "xlarge",
           label: "Previous"
         })
-      })) : null), /*#__PURE__*/_react.default.createElement(_styled.RightWrapper, null, isRightVisible ? /*#__PURE__*/_react.default.createElement(_styled.Arrow, {
+      })) : null), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightWrapper, null, isRightVisible ? /*#__PURE__*/_react.default.createElement(_styleWrappers.Arrow, {
         className: _mediaUi.hideControlsClassName
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
         keyCode: 39,