@orangelogic/orange-dam-content-browser-sdk 2.1.55 → 2.2.0-alpha

package/src/components/Result/AssetPreview/ImagePreview/ImagePreview.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+
+type Props = {
+  alt: string;
+  url: string;
+  loaded: boolean;
+  originalUrl?: string;
+  onError: () => void;
+  onLoaded: () => void;
+};
+
+const ImagePreview: FC<Props> = ({
+  alt,
+  url,
+  loaded,
+  originalUrl,
+  onError,
+  onLoaded,
+}) => {
+  return (
+    <div className={originalUrl && loaded ? 'asset-preview__representative-container' : undefined}>
+      <img
+        className="asset-preview__representative"
+        src={url}
+        alt={alt}
+        onLoad={onLoaded}
+        onError={onError}
+      />
+      {originalUrl && (
+        <img
+          className="asset-preview__representative asset-preview__representative--animated"
+          src={originalUrl}
+          alt={alt}
+          onLoad={onLoaded}
+          onError={onError}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ImagePreview;

package/src/components/Result/AssetPreview/ImagePreview/index.ts

@@ -0,0 +1 @@
+export { default } from './ImagePreview';

package/src/components/Result/AssetPreview/OtherPreview/OtherPreview.styled.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  --text-font-size: var(--cx-font-size-medium);
+  --icon-font-size: var(--cx-font-size-x-large);
+  --gap: var(--cx-spacing-2x-small);
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap);
+  background-color: var(--default-representative-background-color);
+  color: var(--default-representative-color);
+  font-weight: var(--cx-font-weight-medium);
+  font-size: var(--text-font-size);
+
+  cx-icon {
+    font-size: var(--icon-font-size);
+  }
+`;

package/src/components/Result/AssetPreview/OtherPreview/OtherPreview.tsx

@@ -0,0 +1,28 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+
+import { MediaType } from '@/types/search';
+import { getMediaIcon } from '@/utils/icon';
+
+import { Container } from './OtherPreview.styled';
+
+type Props = {
+  children?: ReactNode;
+  type?: MediaType;
+  style?: CSSProperties;
+};
+
+const OtherPreview: FC<Props> = ({
+  children,
+  style,
+  type,
+}) => {
+
+  return (
+    <Container style={style}>
+      <cx-icon name={getMediaIcon(type)}></cx-icon>
+      {children}
+    </Container>
+  );
+};
+
+export default OtherPreview;

package/src/components/Result/AssetPreview/OtherPreview/index.ts

@@ -0,0 +1 @@
+export { default } from './OtherPreview';

package/src/components/Result/AssetPreview/VideoPreview/VideoPreview.tsx

@@ -0,0 +1,132 @@
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+
+import { CxProgressBar } from '@/web-component';
+
+type Props = {
+  url: string;
+  thumbnailOnly: boolean;
+  thumbnailUrl: string;
+  onError: () => void;
+  loaded: boolean;
+  onLoaded: () => void;
+};
+
+const ViewPreview: FC<Props> = ({
+  url,
+  thumbnailOnly = false,
+  thumbnailUrl,
+  onError,
+  loaded,
+  onLoaded,
+}) => {
+  const [assetDirection, setAssetDirection] = useState<'vertical' | 'horizontal'>('horizontal');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const progressBarRef = useRef<CxProgressBar>(null);
+
+  useEffect(() => {
+    if (thumbnailOnly) {
+      return;
+    }
+
+    const container = containerRef.current?.parentElement;
+    const video = videoRef.current;
+    const progressBar = progressBarRef.current;
+
+    if (!container || !video || !progressBar) {
+      return;
+    }
+
+    const updateVideoProgress = (e: MouseEvent) => {
+      if (video.duration && e.currentTarget === container) {
+        progressBar.value = (e.offsetX / container.offsetWidth) * 100;
+        video.currentTime =
+          (e.offsetX / container.offsetWidth) * video.duration;
+      }
+    };
+
+    const onMouseEnter = (e: MouseEvent) => {
+      e.stopImmediatePropagation();
+      updateVideoProgress(e);
+    };
+
+    const onMouseLeave = (e: MouseEvent) => {
+      e.stopImmediatePropagation();
+      progressBar.value = 0;
+      video.currentTime = 0;
+      video.pause();
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      e.stopImmediatePropagation();
+      updateVideoProgress(e);
+    };
+
+    container.addEventListener('mouseenter', onMouseEnter);
+    container.addEventListener('mouseleave', onMouseLeave);
+    container.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      container.removeEventListener('mouseenter', onMouseEnter);
+      container.removeEventListener('mouseleave', onMouseLeave);
+      container.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [thumbnailOnly, thumbnailUrl]);
+
+  const onLoadAsset = useCallback(() => {
+    onLoaded();
+
+    if (videoRef.current) {
+      const { videoWidth, videoHeight } = videoRef.current;
+      setAssetDirection(videoWidth > videoHeight ? 'horizontal' : 'vertical');
+    }
+
+    if (imageRef.current) {
+      const { naturalWidth, naturalHeight } = imageRef.current;
+      setAssetDirection(naturalWidth > naturalHeight ? 'horizontal' : 'vertical');
+    }
+  }, [onLoaded]);
+
+  return (
+    <>
+      <div
+        className={`asset-preview__representative asset-preview__representative--${assetDirection}`}
+      >
+        {url && !thumbnailOnly ? (
+          <video
+            ref={videoRef}
+            src={url}
+            poster={thumbnailUrl}
+            onLoadedMetadata={onLoadAsset}
+            onError={() => {
+              onError();
+            }}
+          >
+            <track default kind="captions" srcLang="en" />
+          </video>
+        ) : (
+          <img
+            ref={imageRef}
+            src={thumbnailUrl}
+            alt="Asset preview"
+            onLoad={onLoadAsset}
+            onError={onError}
+          />
+        )}
+        <div className="asset-preview__video-icon" hidden={!loaded}>
+          <cx-icon name="play_arrow" variant="filled"></cx-icon>
+        </div>
+      </div>
+      {!thumbnailOnly && (
+        <cx-progress-bar
+          ref={progressBarRef}
+          className="asset-preview__progress-bar"
+        ></cx-progress-bar>
+      )}
+      <div ref={containerRef} className="asset-preview__representative-overlay"></div>
+    </>
+  );
+};
+
+export default ViewPreview;

package/src/components/Result/AssetPreview/VideoPreview/index.ts

@@ -0,0 +1 @@
+export { default } from './VideoPreview';

package/src/components/Result/AssetPreview/index.ts

@@ -0,0 +1 @@
+export { default } from './AssetPreview';

package/src/consts/asset.ts

@@ -0,0 +1,16 @@
+import { GridView } from '@/types/search';
+
+export const ASSET_SIZE = {
+  [GridView.Small]:{
+    minWidth: 130,
+    maxWidth: 178,
+  },
+  [GridView.Medium]:{
+    minWidth: 190,
+    maxWidth: 292,
+  },
+  [GridView.Large]:{
+    minWidth: 302,
+    maxWidth: 456,
+  },
+};

package/src/consts/data.ts

@@ -0,0 +1,17 @@
+export const DEFAULT_VIEW_SIZE = 'CoreField.LargeSizePreview';
+export const FIELD_CORTEX_PATH = 'Document.CortexPath';
+export const FIELD_DOC_TYPE = 'CoreField.DocType';
+export const FIELD_EXTENSION = 'Document.FileExtension';
+export const FIELD_FILE_SIZE = 'CoreField.FileSize';
+export const FIELD_IDENTIFIER = 'CoreField.Identifier';
+export const FIELD_KEYWORDS = 'CoreField.Keywords';
+export const FIELD_MAX_HEIGHT = 'CoreField.MaxHeight';
+export const FIELD_MAX_WIDTH = 'CoreField.MaxWidth';
+export const FIELD_SCRUB_URL = 'ScrubURL';
+export const FIELD_SUBTYPE = 'CoreField.DocSubType';
+export const FIELD_TITLE_WITH_FALLBACK = 'CoreField.TitleWithFallback';
+export const FIELD_HAS_BROWSER_CHILDREN = 'Document.HasBrowserChildren';
+export const LIBRARY_NAME = 'Library';
+export const MESSAGE_NEW_LINE = '\n';
+export const ORIGINAL_VIEW_SIZE = 'CoreField.OriginalPreview';
+export const FIELD_ALLOW_ATS_LINK = 'AllowATSLink';

package/src/index.tsx

@@ -0,0 +1,305 @@
+import './styles.css';
+
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+import { App } from '@/App';
+import { AppContextType } from '@/AppContext';
+import {
+  GlobalConfigContext,
+  ImageCardDisplayInfo,
+} from '@/GlobalConfigContext';
+import { store } from '@/store';
+import { resetImportStatus } from '@/store/assets/assets.slice';
+import {
+  initAuthInfoFromCache,
+  setUserConfigSiteUrl,
+} from '@/store/auth/auth.slice';
+
+import { assetsApi } from './store/assets/assets.api';
+import { searchApi } from './store/search/search.api';
+import { userApi } from './store/user/user.api';
+
+declare global {
+  interface Window {
+    OrangeDAMContentBrowser: {
+      help: () => void,
+      open: (config: {
+        /**
+         * Callback when asset(s) selected (deprecated)
+         * @returns 
+         */
+        onImageSelected: AppContextType['onImageSelected'];
+        /**
+         * Callback when asset(s) selected
+         * @returns 
+         */
+        onAssetSelected: AppContextType['onAssetSelected'];
+        /**
+         * Callback when we have any error while using content browser
+         */
+        onError: AppContextType['onError'];
+        /**
+         * Callback when we close the content browser
+         */
+        onClose: () => void;
+        /**
+         * whether you want to select multiple assets
+         */
+        multiSelect: boolean;
+        /**
+         * The containerId to inject to component to
+         * If not defined, we will create a new popup inside
+         */
+        containerId?: string;
+        /**
+         * User can request for extra field via this config
+         */
+        extraFields?: string[];
+        /**
+         * Base url. If specified, we will prefill the site URL in the authentication page
+         */
+        baseUrl?: string;
+        /**
+         * Only show IIIF prefix. When enable, instead of return full IIIF image url, we will
+         * only return the url before the {region}. IIIF link will have the format like below
+         * {scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}
+         * 
+         * E.g:
+         * onlyIIIFPrefix = false
+         * => https://local.orangelogic.com/IIIF3/Image/2Y1XC5O9J67/full/max/0.0/default.jpg
+         * 
+         * onlyIIIFPrefix = true
+         * => https://local.orangelogic.com/IIIF3/Image/2Y1XC5O9J67
+         */
+        onlyIIIFPrefix?: boolean;
+        /**
+         * Whether to display info on the asset card
+         * default to true for all field
+         */
+        displayInfo?: ImageCardDisplayInfo;
+        /**
+         * The Public Application Name.
+         * By default, it will be OrangeDAM.
+         */
+        publicApplicationName?: string;
+        /**
+         * The plugin short name.
+         * By default, it will be OrangeDAM Content Browser.
+         */
+        pluginName?: string;
+
+        /**
+         * Whether to search in drive or not (used for File on demand)
+         * default to false
+         */
+        searchInDrive?: boolean;
+        /**
+         * The CTA text for the content browser
+         * default to "Insert"
+         */
+        ctaText?: string;
+        /**
+         * The persist mode for the content browser which will prevent the browser from closing after selecting asset
+         * default to false
+         */
+        persistMode?: boolean;
+        /**
+         * The available subtypes for the content browser
+         */
+        availableDocTypes?: string[];
+        /**
+         * The supported subtypes for inserting representative image
+         */
+        availableRepresentativeSubtypes?: string[];
+        /**
+         * The flag to show the collection
+         */
+        showCollections?: boolean;
+        /**
+         * The session id to use for the content browser
+         */
+        useSession?: string
+        /**
+         * The flag to keep the last folder selected between sessions
+         */
+        lastLocationMode?: boolean;
+        /**
+         * The flag to turn on/off tracking parameters for links
+         */
+        allowTracking?: boolean;
+      }) => void,
+      close: () => void,
+      /**
+       * Global function which mirrored the behavior of onAssetSelected
+       */
+      _onAssetSelected?: AppContextType['onAssetSelected'],
+      /**
+       * Global function which mirrored the behavior of onImageSelected (deprecated)
+       */
+      _onImageSelected?: AppContextType['onImageSelected'],
+      /**
+       * Global function which mirrored the behavior of onError
+       */
+      _onError?: AppContextType['onError'],
+      /**
+       * Global function which mirrored the behavior of onClose
+       */
+      _onClose?: () => void,
+    };
+  }
+
+  interface URLSearchParams {
+    Token?: string;
+  }
+}
+
+window.OrangeDAMContentBrowser = {
+  help: () => {
+    console.log(`/* Orange DAM Content Browser SDK Example */
+      window.OrangeDAMContentBrowser.open({
+        onAssetSelected: (assets) => {
+          // Callback function triggered when assets are selected
+          console.log(assets);
+          window.open(assets[0]?.imageUrl, '_blank');
+        },
+        onError: (errorMessage, error) => {
+          // Callback function triggered when an error occurs
+          console.error(errorMessage, error);
+        },
+        onClose: () => {
+          // Callback function triggered when the browser is closed
+          window.alert('Content Browser is closing');
+        },
+        containerId: "", // ID of the container to attach the browser; opens in a popup if blank
+        extraFields: ['coreField.OriginalFileName', 'document.CortexPath'], // Additional fields to retrieve from the assets
+        baseUrl: "", // Default base URL to pre-fill in the content browser
+        displayInfo: {
+          title: true, // Whether to display the asset title
+          dimension: true, // Whether to display the asset dimensions
+          fileSize: false, // Whether to display the file size
+          tags: false, // Whether to display the asset tags
+        },
+        publicApplicationName: "", // Public name of the DAM to display on the login screen
+        pluginName: "OrangeDAM Content Browser", // Name of the plugin to display on the login screen
+        ctaText: "Insert", // Text to display on the insert button
+        persistMode: true, // Whether the browser remains open after selecting an asset
+        availableDocTypes: ['Images*', 'Videos*', 'Audio*', 'Others*'], // An array of available OrangeDAM asset types to filter the assets. The available doc types will be configured in OL Platform. If not provided, all doc types will be available. 
+        availableRepresentativeSubtypes: ['Other'], // Array of supported subtypes for representative images
+        showCollections: true, // Whether to show collections in the content browser
+        lastLocationMode: true, // Whether to open the last selected folder on load
+        allowTracking: true, // Whether to enable tracking parameters for asset URLs
+      });`);
+  },
+  open: ({ 
+    onAssetSelected,
+    onImageSelected, 
+    onError, 
+    onClose,
+    availableRepresentativeSubtypes,
+    availableDocTypes,
+    baseUrl, 
+    containerId,
+    ctaText,
+    displayInfo = {
+      title: true,
+      dimension: true,
+      fileSize: false,
+      tags: false,
+    },
+    extraFields, 
+    lastLocationMode,
+    multiSelect,
+    persistMode,
+    publicApplicationName,
+    pluginName,
+    showCollections,
+    searchInDrive,
+    useSession,
+    allowTracking,
+  }) => {
+    let container = containerId && document.getElementById(containerId);
+    if (!containerId) {
+      container = document.body;
+    } else if (!container) {
+      console.error(`Container with id ${containerId} is not found`);
+      return;
+    }
+    let pickerRoot:HTMLDivElement | null = container.querySelector('#cortex-asset-picker-root');
+    if (!pickerRoot)  {
+      //?? if not found, create a new one
+      pickerRoot = document.createElement('div') ;
+      pickerRoot.id = 'cortex-asset-picker-root';
+      pickerRoot.style.width = '100%';
+      pickerRoot.style.height = '100%';
+      pickerRoot.style.display = 'flex';
+      pickerRoot.style.alignItems = 'center';
+      pickerRoot.style.justifyContent = 'center';
+      pickerRoot.style.position = 'relative';
+      container.appendChild(pickerRoot);
+    }
+    const root = createRoot(pickerRoot);
+
+    // Dispatch some event before start render the APP
+    if (baseUrl) {
+      store.dispatch(setUserConfigSiteUrl(baseUrl));
+    }
+    store.dispatch(initAuthInfoFromCache());
+
+    const errorHandler         = (typeof onError === 'function' && !!onError) ? onError : console.log;
+    const assetSelectedHandler = (typeof onAssetSelected === 'function' && !!onAssetSelected) ? onAssetSelected : console.log;
+    const imageSelectedHandler = (typeof onImageSelected === 'function' && !!onImageSelected) ? onImageSelected : console.log;
+    const handleClose = () => {
+      store.dispatch(resetImportStatus());
+      store.dispatch(searchApi.util.resetApiState());
+      store.dispatch(assetsApi.util.resetApiState());
+      store.dispatch(userApi.util.resetApiState());
+      root.unmount();
+      // Reset these function when close the Content Browser
+      window.OrangeDAMContentBrowser._onAssetSelected = undefined;
+      window.OrangeDAMContentBrowser._onImageSelected = undefined;
+      window.OrangeDAMContentBrowser._onError         = undefined;
+      window.OrangeDAMContentBrowser._onClose         = undefined;
+
+      onClose?.();
+    };
+    window.OrangeDAMContentBrowser._onAssetSelected = assetSelectedHandler;
+    window.OrangeDAMContentBrowser._onImageSelected = imageSelectedHandler;
+    window.OrangeDAMContentBrowser._onError         = errorHandler;
+    window.OrangeDAMContentBrowser._onClose         = handleClose;
+
+    root.render(
+      <Provider store={store}>
+        <GlobalConfigContext.Provider value={{
+          availableDocTypes,
+          availableRepresentativeSubtypes,
+          ctaText: ctaText ?? 'Insert',
+          displayInfo,
+          lastLocationMode: lastLocationMode !== undefined ? !!lastLocationMode : true,
+          persistMode: !!persistMode,
+          pluginInfo: {
+            publicApplicationName: publicApplicationName !== undefined ? publicApplicationName : '',
+            pluginName: pluginName !== undefined ? pluginName : 'OrangeDAM Content Browser',
+          },
+          isContentBrowserPopedup: !containerId,
+          searchInDrive: !!searchInDrive,
+          showCollections: !!showCollections,
+          useSession,
+          allowTracking: allowTracking !== undefined ? !!allowTracking : true,
+        }}>
+          <App
+            containerId={containerId}
+            extraFields={extraFields}
+            multiSelect={multiSelect}
+            onError={errorHandler}
+            onAssetSelected={assetSelectedHandler}
+            onImageSelected={imageSelectedHandler}
+            onClose={handleClose} />
+        </GlobalConfigContext.Provider>
+      </Provider>,
+    );
+  },
+  close: () => {
+    window.OrangeDAMContentBrowser._onClose?.();
+  },
+};