@atlaskit/media-card 77.12.3 → 78.0.0

package/dist/es2019/card/cardWithMediaClient.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import { withMediaClient } from '@atlaskit/media-client-react';
-import { Card as MediaCard } from './card';
 import MediaCardAnalyticsErrorBoundary from './media-card-analytics-error-boundary';
+import { Card as InternalCard } from './card';
 export const CardWithMediaClient = props => {
   const {
     dimensions,
     onClick
   } = props;
   const Card = React.useMemo(() => {
-    return withMediaClient(MediaCard);
+    return withMediaClient(InternalCard);
   }, []);
-  return (
-    /*#__PURE__*/
-    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
-    React.createElement(MediaCardAnalyticsErrorBoundary, {
-      dimensions: dimensions,
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement(Card, props))
-  );
+  return /*#__PURE__*/React.createElement(MediaCardAnalyticsErrorBoundary, {
+    dimensions: dimensions,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Card, props));
 };

package/dist/es2019/card/{v2/cardviews → cardviews}/cardViewWrapper.js

@@ -4,14 +4,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
-import { ImageContainer, Wrapper } from '../../ui/wrapper';
-import { attachDetailsToActions } from '../../actions';
-import { TitleBox } from '../../ui/titleBox/titleBox';
-import { TickBox } from '../../ui/tickBox/tickBox';
-import { Blanket } from '../../ui/blanket/blanket';
-import { ActionsBar } from '../../ui/actionsBar/actionsBar';
-import { fileCardImageViewSelector } from '../../classnames';
-import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+import { ImageContainer, Wrapper } from '../ui/wrapper';
+import { attachDetailsToActions } from '../actions';
+import { TitleBox } from '../ui/titleBox/titleBox';
+import { TickBox } from '../ui/tickBox/tickBox';
+import { Blanket } from '../ui/blanket/blanket';
+import { ActionsBar } from '../ui/actionsBar/actionsBar';
+import { fileCardImageViewSelector } from '../classnames';
+import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
 export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   cardPreview,
   testId,

package/dist/es2019/card/{v2/cardviews → cardviews}/errorCardView.js

@@ -4,14 +4,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { useBreakpoint } from '../useBreakpoint';
 import { CardViewWrapper } from './cardViewWrapper';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
-import { FailedTitleBox } from '../../ui/titleBox/failedTitleBox';
-import { PreviewUnavailable, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../../ui/iconMessage';
-import { isUploadError, isRateLimitedError, isPollingError } from '../../../errors';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
+import { PreviewUnavailable, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../ui/iconMessage';
+import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
 import { messages } from '@atlaskit/media-ui';
 const IconMessage = ({
   error,

package/dist/es2019/card/{v2/cardviews → cardviews}/iconCardView.js

@@ -5,12 +5,12 @@ import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { useBreakpoint } from '../useBreakpoint';
 import { CardViewWrapper } from './cardViewWrapper';
-import { ProgressBar } from '../../ui/progressBar/progressBar';
-import { Blanket } from '../../ui/blanket/blanket';
+import { ProgressBar } from '../ui/progressBar/progressBar';
+import { Blanket } from '../ui/blanket/blanket';
 // NOTE: should we call this Icon or UploadingCardView since we now have ProgressBar?
 
 const IconCardViewBase = props => {

package/dist/es2019/card/{v2/cardviews → cardviews}/imageCardView.js

@@ -4,12 +4,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
+import { useBreakpoint } from '../useBreakpoint';
 import { CardViewWrapper } from './cardViewWrapper';
-import { ProgressBar } from '../../ui/progressBar/progressBar';
-import { Blanket } from '../../ui/blanket/blanket';
+import { ProgressBar } from '../ui/progressBar/progressBar';
+import { Blanket } from '../ui/blanket/blanket';
 const ImageCardViewBase = props => {
   const {
     status,

package/dist/es2019/card/{v2/cardviews → cardviews}/index.js

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { useBreakpoint } from '../useBreakpoint';
 import { ProcessingCardView } from './processingCardView';
 import { ErrorCardView } from './errorCardView';
 import { VideoCardView } from './videoCardView';

package/dist/es2019/card/{v2/cardviews → cardviews}/loadingCardView.js

@@ -5,9 +5,9 @@ import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import SpinnerIcon from '@atlaskit/spinner';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { useBreakpoint } from '../useBreakpoint';
 import { CardViewWrapper } from './cardViewWrapper';
 const LoadingCardViewBase = props => {
   const {

package/dist/es2019/card/{v2/cardviews → cardviews}/processingCardView.js

@@ -5,10 +5,10 @@ import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
-import { CreatingPreview } from '../../ui/iconMessage';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { CreatingPreview } from '../ui/iconMessage';
+import { useBreakpoint } from '../useBreakpoint';
 import { CardViewWrapper } from './cardViewWrapper';
 const ProcessingCardViewBase = props => {
   const {

package/dist/es2019/card/{v2/cardviews → cardviews}/videoCardView.js

@@ -4,14 +4,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../../utils/analytics';
-import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
-import { PlayButton } from '../../ui/playButton/playButton';
-import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
-import { useBreakpoint } from '../../useBreakpoint';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { PlayButton } from '../ui/playButton/playButton';
+import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
+import { useBreakpoint } from '../useBreakpoint';
 import { CardViewWrapper } from './cardViewWrapper';
-import { ProgressBar } from '../../ui/progressBar/progressBar';
-import { Blanket } from '../../ui/blanket/blanket';
+import { ProgressBar } from '../ui/progressBar/progressBar';
+import { Blanket } from '../ui/blanket/blanket';
 const VideoCardViewBase = props => {
   const {
     status,

package/dist/es2019/card/{v2/externalImageCard.js → externalImageCard.js}

@@ -3,16 +3,16 @@ import { getRandomHex } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { ImageLoadError } from '../../errors';
-import getDocument from '../../utils/document';
-import { generateUniqueId } from '../../utils/generateUniqueId';
-import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
-import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
-import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
-import { getDefaultCardDimensions } from '../../utils/cardDimensions';
-import { usePrevious } from '../../utils/usePrevious';
-import { fireCommencedEvent, fireCopiedEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
-import { CardViewV2 } from './cardViewV2';
+import { ImageLoadError } from '../errors';
+import getDocument from '../utils/document';
+import { generateUniqueId } from '../utils/generateUniqueId';
+import { getMediaCardCursor } from '../utils/getMediaCardCursor';
+import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
+import { useCurrentValueRef } from '../utils/useCurrentValueRef';
+import { getDefaultCardDimensions } from '../utils/cardDimensions';
+import { usePrevious } from '../utils/usePrevious';
+import { fireCommencedEvent, fireCopiedEvent, fireOperationalEvent, fireScreenEvent } from './cardAnalytics';
+import { CardView } from './cardView';
 import { performanceNow } from './performance';
 export const ExternalImageCard = ({
   mediaClient,
@@ -190,7 +190,7 @@ export const ExternalImageCard = ({
   //----------------------------------------------------------------//
 
   const mediaCardCursor = getMediaCardCursor(false, !!shouldOpenMediaViewer, status === 'error', !!cardPreview, metadata.mediaType);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardViewV2, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardView, {
     status: status,
     error: error,
     mediaItemType: identifier.mediaItemType,

package/dist/es2019/card/{v2/fileCard.js → fileCard.js}

@@ -6,28 +6,28 @@ import { getRandomHex, isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByB
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { MediaCardError } from '../../errors';
-import getDocument from '../../utils/document';
-import { generateUniqueId } from '../../utils/generateUniqueId';
-import { resolveCardPreviewDimensions } from '../../utils/getDataURIDimension';
-import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
-import { getFileDetails } from '../../utils/metadata';
-import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
-import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
-import { usePrevious } from '../../utils/usePrevious';
-import { ViewportDetector } from '../../utils/viewportDetector';
-import { getDefaultCardDimensions } from '../../utils/cardDimensions';
-import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
-import { isSSRPreview } from '../getCardPreview';
-import { CardViewV2 } from './cardViewV2';
+import { MediaCardError } from '../errors';
+import getDocument from '../utils/document';
+import { generateUniqueId } from '../utils/generateUniqueId';
+import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
+import { getMediaCardCursor } from '../utils/getMediaCardCursor';
+import { getFileDetails } from '../utils/metadata';
+import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
+import { useCurrentValueRef } from '../utils/useCurrentValueRef';
+import { usePrevious } from '../utils/usePrevious';
+import { ViewportDetector } from '../utils/viewportDetector';
+import { getDefaultCardDimensions } from '../utils/cardDimensions';
+import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from './cardAnalytics';
+import { isSSRPreview } from './getCardPreview';
+import { CardView } from './cardView';
 import { CardViews } from './cardviews';
-import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
+import { InlinePlayerLazy } from './inlinePlayerLazy';
 import { useFilePreview } from '@atlaskit/media-file-preview';
 import { performanceNow } from './performance';
 import { useContext } from 'react';
-import { DateOverrideContext } from '../../dateOverrideContext';
+import { DateOverrideContext } from '../dateOverrideContext';
 import { SvgView } from './svgView';
-const LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardViewV2;
+const LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
 export const FileCard = ({
   appearance = 'auto',
   resizeMode = 'crop',
@@ -579,7 +579,7 @@ export const FileCard = ({
   const collectionName = identifier.collectionName || '';
   return /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? /*#__PURE__*/React.createElement(Suspense, {
     fallback: inlinePlayerFallback
-  }, /*#__PURE__*/React.createElement(InlinePlayerLazyV2, {
+  }, /*#__PURE__*/React.createElement(InlinePlayerLazy, {
     dimensions: cardDimensions,
     originalDimensions: originalDimensions,
     identifier: identifier,

package/dist/es2019/card/index.js

@@ -1 +1 @@
-export { default as Card } from './cardSwitcher';
+export { default as Card } from './cardLoader';

package/dist/es2019/card/inlinePlayer.js

@@ -1,16 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Component } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../utils';
 import { CardLoading } from '../utils/lightCards/cardLoading';
 import { ProgressBar } from './ui/progressBar/progressBar';
-import { calcBreakpointSize } from './ui/styles';
-import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
-import { getElementDimension } from '../utils/getElementDimension';
 import { InlinePlayerWrapper } from './inlinePlayerWrapper';
+import { useBreakpoint } from './useBreakpoint';
+import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     const {
@@ -23,222 +20,144 @@ export const getPreferredVideoArtifact = fileState => {
   }
   return undefined;
 };
-export class InlinePlayerBase extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {});
-    _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "setFileSrc", fileSrc => {
-      this.setState({
-        fileSrc
-      });
-    });
-    // Tries to use the binary artifact to provide something to play while the video is still processing
-    _defineProperty(this, "setBinaryURL", async () => {
-      const {
-        mediaClient,
-        identifier,
-        onError
-      } = this.props;
-      const {
-        id,
-        collectionName
-      } = identifier;
-      try {
-        const fileSrc = await mediaClient.file.getFileBinaryURL(id, collectionName);
-        this.setFileSrc(fileSrc);
-      } catch (error) {
-        if (onError && error instanceof Error) {
-          onError(error);
-        }
-      }
-    });
-    _defineProperty(this, "unsubscribe", () => {
-      if (this.subscription) {
-        this.subscription.unsubscribe();
+export const InlinePlayerBase = ({
+  identifier,
+  onError,
+  onClick,
+  dimensions = defaultImageCardDimensions,
+  originalDimensions,
+  selected,
+  testId,
+  forwardRef,
+  autoplay,
+  cardPreview,
+  onFullscreenChange,
+  videoControlsWrapperRef
+}) => {
+  // === States ===
+  const [fileSrc, setFileSrc] = useState();
+  const [isUploading, setIsUploading] = useState();
+  const [progress, setProgress] = useState();
+
+  // === Refs and Local Variables ===
+  const divRef = useRef(null);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const {
+    id,
+    collectionName,
+    occurrenceKey
+  } = identifier;
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  const mediaClient = useMediaClient();
+  const {
+    fileState
+  } = useFileState(id, {
+    collectionName,
+    occurrenceKey
+  });
+  useEffect(() => {
+    const subscribeFileState = async fileState => {
+      if (fileState.status === 'uploading') {
+        setIsUploading(true);
+        setProgress(fileState.progress);
+      } else {
+        setIsUploading(false);
       }
-    });
-    _defineProperty(this, "revoke", () => {
-      const {
-        fileSrc
-      } = this.state;
+
+      // We reuse the existing fileSrc to prevent re renders, therefore we only perform fileSrc updates when there isn't any
       if (fileSrc) {
-        URL.revokeObjectURL(fileSrc);
-      }
-    });
-    _defineProperty(this, "onDownloadClick", () => {
-      const {
-        mediaClient,
-        identifier
-      } = this.props;
-      const {
-        id,
-        collectionName
-      } = identifier;
-      mediaClient.file.downloadBinary(id, undefined, collectionName);
-    });
-    _defineProperty(this, "onFirstPlay", () => {
-      const {
-        identifier
-      } = this.props;
-      globalMediaEventEmitter.emit('media-viewed', {
-        fileId: identifier.id,
-        viewingLevel: 'full'
-      });
-    });
-    _defineProperty(this, "saveElementWidth", () => {
-      const {
-        dimensions
-      } = this.props;
-      if (!dimensions) {
         return;
       }
-      const {
-        width
-      } = dimensions;
-      if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
-        const elementWidth = getElementDimension(this.divRef.current, 'width');
-        this.setState({
-          elementWidth
-        });
-      }
-    });
-  }
-  componentDidMount() {
-    this.saveElementWidth();
-    const {
-      mediaClient,
-      identifier
-    } = this.props;
-    const {
-      id,
-      collectionName
-    } = identifier;
-    this.revoke();
-    this.unsubscribe();
-    this.subscription = mediaClient.file.getFileState(id, {
-      collectionName
-    }).subscribe({
-      next: async fileState => {
-        if (fileState.status === 'uploading') {
-          this.setState({
-            isUploading: true,
-            progress: fileState.progress
-          });
-        } else {
-          this.setState({
-            isUploading: false
-          });
-        }
+      if (fileState.status !== 'error' && fileState.preview) {
         const {
-          fileSrc: existingFileSrc
-        } = this.state;
-        // we want to reuse the existing fileSrc to prevent re renders
-        if (existingFileSrc) {
+          value
+        } = await fileState.preview;
+        if (value instanceof Blob && value.type.indexOf('video/') === 0) {
+          const newFileSrc = URL.createObjectURL(value);
+          setFileSrc(newFileSrc);
           return;
         }
-        if (fileState.status !== 'error' && fileState.preview) {
-          const {
-            value
-          } = await fileState.preview;
-          if (value instanceof Blob && value.type.indexOf('video/') === 0) {
-            const fileSrc = URL.createObjectURL(value);
-            this.setFileSrc(fileSrc);
-            return;
-          }
-        }
-        if (fileState.status === 'processed' || fileState.status === 'processing') {
-          const artifactName = getPreferredVideoArtifact(fileState);
-          const {
-            artifacts
-          } = fileState;
-          if (!artifactName || !artifacts) {
-            this.setBinaryURL();
-            return;
-          }
+      }
+      if (fileState.status === 'processed' || fileState.status === 'processing') {
+        const artifactName = getPreferredVideoArtifact(fileState);
+        const {
+          artifacts
+        } = fileState;
+        if (!artifactName || !artifacts) {
+          // Tries to use the binary artifact to provide something to play while the video is still processing
           try {
-            const fileSrc = await mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
-            this.setFileSrc(fileSrc);
+            const newFileSrc = await mediaClient.file.getFileBinaryURL(id, collectionName);
+            setFileSrc(newFileSrc);
           } catch (error) {
-            const {
-              onError
-            } = this.props;
-            if (onError && error instanceof Error) {
-              onError(error);
+            if (onErrorRef.current && error instanceof Error) {
+              onErrorRef.current(error);
             }
           }
+          return;
+        }
+        try {
+          const newFileSrc = await mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
+          setFileSrc(newFileSrc);
+        } catch (error) {
+          if (onErrorRef.current && error instanceof Error) {
+            onErrorRef.current(error);
+          }
         }
       }
-    });
-  }
-  componentWillUnmount() {
-    this.unsubscribe();
-    this.revoke();
-  }
-  get breakpoint() {
-    const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
-    return calcBreakpointSize(parseInt(`${width}`, 10));
-  }
-  render() {
-    const {
-      onClick,
-      dimensions,
-      originalDimensions,
-      selected,
-      testId,
-      identifier,
-      forwardRef,
-      autoplay,
-      cardPreview,
-      onFullscreenChange,
-      videoControlsWrapperRef
-    } = this.props;
-    const {
-      fileSrc,
-      isUploading,
-      progress
-    } = this.state;
-    if (!fileSrc) {
-      return /*#__PURE__*/React.createElement(CardLoading, {
-        testId: testId,
-        dimensions: dimensions
-      });
+    };
+    if (fileState) {
+      subscribeFileState(fileState);
     }
-    return /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
-      testId: testId || 'media-card-inline-player',
-      selected: {
-        selected
-      },
-      onClick: onClick,
-      innerRef: forwardRef || undefined,
-      dimensions: dimensions
-    }, /*#__PURE__*/React.createElement(InactivityDetector, null, checkMouseMovement => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
-      type: "video",
-      src: fileSrc,
-      onFullscreenChange: onFullscreenChange,
-      fileId: identifier.id,
-      isAutoPlay: autoplay,
-      isHDAvailable: false,
-      onDownloadClick: this.onDownloadClick,
-      onFirstPlay: this.onFirstPlay,
-      lastWatchTimeConfig: {
-        contentId: identifier.id
-      },
-      originalDimensions: originalDimensions,
-      showControls: checkMouseMovement,
-      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-      videoControlsWrapperRef: videoControlsWrapperRef
-    })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
-      progress: progress,
-      breakpoint: this.breakpoint,
-      positionBottom: true,
-      showOnTop: true
-    }) : null);
-  }
-}
-_defineProperty(InlinePlayerBase, "defaultProps", {
-  dimensions: defaultImageCardDimensions
-});
+  }, [fileState, collectionName, fileSrc, id, mediaClient]);
+  useEffect(() => {
+    return () => {
+      fileSrc && URL.revokeObjectURL(fileSrc);
+    };
+  }, [fileSrc]);
+
+  // === Render ===
+  return fileSrc ? /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
+    testId: testId || 'media-card-inline-player',
+    selected: {
+      selected
+    },
+    onClick: onClick,
+    innerRef: forwardRef || undefined,
+    dimensions: dimensions
+  }, /*#__PURE__*/React.createElement(InactivityDetector, null, checkMouseMovement => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
+    type: "video",
+    src: fileSrc,
+    onFullscreenChange: onFullscreenChange,
+    fileId: id,
+    isAutoPlay: autoplay,
+    isHDAvailable: false,
+    onDownloadClick: () => {
+      mediaClient.file.downloadBinary(id, undefined, collectionName);
+    },
+    onFirstPlay: () => {
+      globalMediaEventEmitter.emit('media-viewed', {
+        fileId: id,
+        viewingLevel: 'full'
+      });
+    },
+    lastWatchTimeConfig: {
+      contentId: id
+    },
+    originalDimensions: originalDimensions,
+    showControls: checkMouseMovement,
+    poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
+    videoControlsWrapperRef: videoControlsWrapperRef
+  })), isUploading && /*#__PURE__*/React.createElement(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: true,
+    showOnTop: true
+  })) : /*#__PURE__*/React.createElement(CardLoading, {
+    testId: testId,
+    dimensions: dimensions
+  });
+};
 const InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InlinePlayerBase, _extends({}, props, {
     forwardRef: ref