@atlaskit/media-client 16.0.0 → 17.1.0

package/dist/types/uploader/calculateChunkSize.d.ts

@@ -0,0 +1,11 @@
+export declare const fileSizeError = "fileSizeExceedsLimit";
+/**
+ * This is a helper to dynamically calculate the chunk size for a given file size.
+ *
+ * @param fileSize The size of a file to calculate the chunk size for.
+ * @returns A number of bytes per chunk or Throws an Error if the file size exceeds 2TB
+ *
+ * @see {@link https://product-fabric.atlassian.net/wiki/spaces/FIL/pages/3221881143/Rule+of+thumb+for+chunk+sizes#Given-the-following-conditions}
+ *
+ */
+export declare const calculateChunkSize: (fileSize: number) => number;

package/dist/types/uploader/error.d.ts

@@ -0,0 +1,29 @@
+import { BaseMediaClientError } from '../models/errors';
+export declare type UploaderErrorReason = 'fileSizeExceedsLimit';
+export declare type UploaderErrorAttributes = {
+    readonly reason: UploaderErrorReason;
+    readonly id: string;
+    readonly metadata?: {
+        readonly collectionName?: string;
+        readonly occurrenceKey?: string;
+    };
+};
+export declare class UploaderError extends BaseMediaClientError<UploaderErrorAttributes> {
+    readonly reason: UploaderErrorReason;
+    readonly id: string;
+    readonly metadata?: {
+        readonly collectionName?: string | undefined;
+        readonly occurrenceKey?: string | undefined;
+    } | undefined;
+    constructor(reason: UploaderErrorReason, id: string, metadata?: {
+        readonly collectionName?: string | undefined;
+        readonly occurrenceKey?: string | undefined;
+    } | undefined);
+    get attributes(): {
+        reason: "fileSizeExceedsLimit";
+        id: string;
+        collectionName: string | undefined;
+        occurrenceKey: string | undefined;
+    };
+}
+export declare function isUploaderError(err: Error): err is UploaderError;

package/dist/types/{uploader.d.ts → uploader/index.d.ts}

@@ -1,5 +1,5 @@
 import { ChunkinatorFile } from '@atlaskit/chunkinator';
-import { MediaStore } from './client/media-store';
+import { MediaStore } from '../client/media-store';
 export declare type UploadableFile = {
     content: ChunkinatorFile;
     name?: string;
@@ -18,4 +18,4 @@ export declare type UploadFileCallbacks = {
 export interface UploadFileResult {
     cancel: () => void;
 }
-export declare const uploadFile: (file: UploadableFile, store: MediaStore, uploadableFileUpfrontIds: UploadableFileUpfrontIds, callbacks?: UploadFileCallbacks | undefined, chunkSize?: number, processingBatchSize?: number) => UploadFileResult;
+export declare const uploadFile: (file: UploadableFile, store: MediaStore, uploadableFileUpfrontIds: UploadableFileUpfrontIds, callbacks?: UploadFileCallbacks | undefined) => UploadFileResult;

package/dist/types/utils/mediaSubscribable/fromObservable.d.ts

@@ -0,0 +1,5 @@
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { MediaSubscribableItem } from '../../models/media-subscribable';
+import { MediaSubscribable } from './types';
+export declare function fromObservable<T>(observable: ReplaySubject<T>): MediaSubscribable<T>;
+export declare function createMediaSubscribable<T extends MediaSubscribableItem>(mediaSubscribableItem?: T | Error): MediaSubscribable<T>;

package/dist/types/utils/mediaSubscribable/index.d.ts

@@ -0,0 +1,3 @@
+export type { MediaSubscribable, MediaObserver, MediaSubscription, } from './types';
+export { toPromise } from './toPromise';
+export { createMediaSubscribable, fromObservable } from './fromObservable';

package/dist/types/utils/{mediaSubscribableToPromise.d.ts → mediaSubscribable/toPromise.d.ts}

@@ -1,10 +1,10 @@
 import { Subscription } from 'rxjs/Subscription';
-import { MediaSubscribable } from './toMediaSubscribable';
-import { MediaSubscribableItem } from '../models/media-subscribable';
+import { MediaSubscribable } from './types';
+import { MediaSubscribableItem } from '../../models/media-subscribable';
 /**
  * This is a helper to transform the first value emitted by an MediaSubscribable into a Promise.
  *
  * @param mediaSubscribable a given MediaSubscribable<MediaSubscribableItem>
  * @param subscription a default Subscription (this parameter exists for testing purpose)
  */
-export declare const mediaSubscribableToPromise: <T extends MediaSubscribableItem>(mediaSubscribable: MediaSubscribable<T>, subscription?: Subscription) => Promise<T>;
+export declare const toPromise: <T extends MediaSubscribableItem>(mediaSubscribable: MediaSubscribable<T>, subscription?: Subscription) => Promise<T>;

package/dist/types/utils/mediaSubscribable/types.d.ts

@@ -0,0 +1,16 @@
+export declare type MediaSubscription = {
+    unsubscribe: () => void;
+};
+declare type PartialObserver<T> = {
+    next?: (value: T) => void;
+    error?: (err: any) => void;
+    complete?: () => void;
+};
+export declare type NextObserver<T> = PartialObserver<T> & Required<Pick<PartialObserver<T>, 'next'>>;
+export declare type ErrorObserver<T> = PartialObserver<T> & Required<Pick<PartialObserver<T>, 'error'>>;
+export declare type CompletionObserver<T> = PartialObserver<T> & Required<Pick<PartialObserver<T>, 'complete'>>;
+export declare type MediaObserver<T> = NextObserver<T> | ErrorObserver<T> | CompletionObserver<T> | ((value: T) => void);
+export declare type MediaSubscribable<T> = {
+    subscribe(observer?: MediaObserver<T>): MediaSubscription;
+};
+export {};

package/dist/types/utils/request/errors.d.ts

@@ -9,6 +9,8 @@ export declare class RequestError extends BaseMediaClientError<RequestErrorAttri
         reason: RequestErrorReason;
         method: import("./types").RequestMethod | undefined;
         endpoint: string | undefined;
+        mediaRegion: string | undefined;
+        mediaEnv: string | undefined;
         attempts: number | undefined;
         clientExhaustedRetries: boolean | undefined;
         statusCode: number | undefined;

package/dist/types/utils/request/helpers.d.ts

@@ -32,3 +32,7 @@ export declare function fetchRetry(functionToRetry: () => Promise<Response>, met
 export declare function createRequestErrorReason(statusCode: number): RequestErrorReason;
 export declare function createRequestErrorFromResponse(metadata: RequestErrorMetadata, response: Response): RequestError;
 export declare function createProcessFetchResponse(metadata: RequestMetadata): (response: Response) => Response;
+export declare function extractMediaHeaders(response: Response): {
+    mediaRegion: string;
+    mediaEnv: string;
+};

package/dist/types/utils/request/types.d.ts

@@ -18,6 +18,8 @@ export declare type ClientOptions = {
 export declare type RequestMetadata = {
     readonly method?: RequestMethod;
     readonly endpoint?: string;
+    readonly mediaRegion?: string;
+    readonly mediaEnv?: string;
 };
 export declare type RequestOptions = RequestMetadata & {
     readonly auth?: Auth;

package/dist/types/utils/safeUnsubscribe.d.ts

@@ -1,2 +1,2 @@
-import { MediaSubscription } from './toMediaSubscribable';
+import { MediaSubscription } from './mediaSubscribable';
 export declare const safeUnsubscribe: (subscription: MediaSubscription) => void;

package/example-helpers/styles.ts

@@ -0,0 +1,99 @@
+import { css } from '@emotion/react';
+import { FileStatus } from '../src';
+
+export const wrapperStyles = css`
+  display: flex;
+`;
+
+export const imagePreviewStyles = css`
+  width: 300px;
+`;
+
+export const previewWrapperStyles = css`
+  flex: 1;
+`;
+
+export const metadataWrapperStyles = css`
+  width: 400px;
+  overflow: scroll;
+  flex: 1;
+`;
+
+export const fileInputStyles = css`
+  color: transparent;
+`;
+
+export interface FilesWrapperProps {
+  status: FileStatus;
+  key: number;
+}
+
+const statusColorMap: { [key in FileStatus]: string } = {
+  uploading: 'cornflowerblue',
+  processing: 'peachpuff',
+  processed: 'darkseagreen',
+  error: 'indianred',
+  'failed-processing': 'indianred',
+};
+
+export const fileWrapperStyles = (status: FileStatus) => css`
+  padding: 5px;
+  margin: 10px;
+  display: inline-block;
+  width: 315px;
+  background-color: ${statusColorMap[status]};
+`;
+
+export const cardsWrapperStyles = css`
+  width: 900px;
+  padding: 10px;
+  border-right: 1px solid #ccc;
+
+  h1 {
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+  }
+
+  > div {
+    width: auto;
+    display: inline-block;
+    margin: 10px;
+  }
+`;
+
+export const headerStyles = css`
+  button {
+    margin: 5px;
+  }
+`;
+
+export const fileStateWrapperStyles = css`
+  border: 1px solid;
+  margin: 10px;
+  padding: 10px;
+  width: 500px;
+`;
+
+export const uploadTouchWrapperStyles = css`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+`;
+
+export const rowStyles = css`
+  flex-direction: row;
+  justify-content: center;
+  > * {
+    margin-right: 10px;
+  }
+`;
+
+export const responseStyles = css`
+  font-family: monospace;
+  white-space: pre;
+`;

package/example-helpers/stylesWrapper.tsx

@@ -0,0 +1,82 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ChangeEvent, ReactNode } from 'react';
+import {
+  cardsWrapperStyles,
+  fileInputStyles,
+  fileStateWrapperStyles,
+  fileWrapperStyles,
+  headerStyles,
+  imagePreviewStyles,
+  metadataWrapperStyles,
+  previewWrapperStyles,
+  responseStyles,
+  rowStyles,
+  uploadTouchWrapperStyles,
+  wrapperStyles,
+} from './styles';
+import { FileStatus } from '../src';
+
+export const Wrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={wrapperStyles}>{children}</div>;
+};
+
+interface ImagePreviewProps {
+  src: string;
+  alt: string;
+}
+
+export const ImagePreview = ({ src, alt }: ImagePreviewProps) => {
+  return <img css={imagePreviewStyles} src={src} alt={alt} />;
+};
+
+export const PreviewWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={previewWrapperStyles}>{children}</div>;
+};
+
+export const MetadataWrapper = ({ children }: { children: ReactNode }) => {
+  return <pre css={metadataWrapperStyles}>{children}</pre>;
+};
+
+type FileInputProps = {
+  type: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const FileInput = ({ type, onChange }: FileInputProps) => {
+  return <input css={fileInputStyles} type={type} onChange={onChange} />;
+};
+
+export const FileWrapper = ({
+  children,
+  status,
+}: {
+  children: ReactNode;
+  status: FileStatus;
+}) => {
+  return <div css={fileWrapperStyles(status)}>{children}</div>;
+};
+
+export const CardsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={cardsWrapperStyles}>{children}</div>;
+};
+
+export const Header = ({ children }: { children: ReactNode }) => {
+  return <div css={headerStyles}>{children}</div>;
+};
+
+export const FileStateWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={fileStateWrapperStyles}>{children}</div>;
+};
+
+export const UploadTouchWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={uploadTouchWrapperStyles}>{children}</div>;
+};
+
+export const Row = ({ children }: { children: ReactNode }) => {
+  return <div css={rowStyles}>{children}</div>;
+};
+
+export const Response = ({ children }: { children: ReactNode }) => {
+  return <div css={responseStyles}>{children}</div>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-client",
-  "version": "16.0.0",
+  "version": "17.1.0",
   "description": "Media API Web Client Library",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,8 +27,8 @@
     }
   },
   "dependencies": {
-    "@atlaskit/chunkinator": "^4.0.0",
-    "@atlaskit/media-common": "^2.13.0",
+    "@atlaskit/chunkinator": "^4.1.0",
+    "@atlaskit/media-common": "^2.15.0",
     "@babel/runtime": "^7.0.0",
     "dataloader": "^2.0.0",
     "deep-equal": "^1.0.1",
@@ -43,24 +43,25 @@
     "xstate": "^4.20.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-core": "^33.0.1",
+    "@emotion/react": "^11.7.1",
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^73.6.0",
+    "@atlaskit/media-card": "^74.0.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/ssr": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/react": "^11.7.1",
     "@types/deep-equal": "^1.0.1",
     "@types/uuid-validate": "^0.0.0",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6",
     "typescript": "4.2.4"
   },
   "resolutions": {