@orangelogic/orange-dam-content-browser-sdk 2.1.53 → 2.1.54

package/src/components/Result/AssetCard/AssetCard.styled.ts

@@ -0,0 +1,120 @@
+import styled from 'styled-components';
+
+import { ASSET_SIZE } from '@/consts/asset';
+import { CxCardProps } from '@/react-web-component';
+import { GridView } from '@/types/search';
+
+export const Card = styled('cx-card')<CxCardProps>`
+  &.asset-card {
+    --border-color: transparent;
+    --border-radius: 0;
+    --border-width: 0;
+    --padding: 0;
+    --image-border-radius: var(--cx-border-radius-medium);
+    width: 100%;
+
+    &::part(base) {
+      box-shadow: none;
+      cursor: pointer;
+      overflow: hidden;
+    }
+
+    &::part(image) {
+      aspect-ratio: 246/180;
+      position: relative;
+    }
+
+    &::part(body) {
+      padding: var(--cx-spacing-x-small);
+    }
+
+    &.selected {
+      --border-color: var(--cx-color-primary);
+    }
+
+    cx-divider {
+      --color: var(--cx-color-neutral-500);
+      --spacing: 0;
+      --width: 10px;
+    }
+
+    cx-space {
+      justify-content: space-between;
+    }
+
+    &.asset-card--small {
+      max-width: ${ASSET_SIZE[GridView.Small].maxWidth}px;
+    }
+
+    &.asset-card--medium {
+      max-width: ${ASSET_SIZE[GridView.Medium].maxWidth}px;
+    }
+
+    &.asset-card--large {
+      max-width: ${ASSET_SIZE[GridView.Large].maxWidth}px;
+    }
+  }
+
+  .asset-card__checkbox {
+    background-color: var(--cx-color-neutral-0);
+    border-top-right-radius: var(--cx-border-radius-medium);
+    border-bottom-left-radius: var(--cx-border-radius-medium);
+    position: absolute;
+    top: var(--cx-spacing-3x-small);
+    right: var(--cx-spacing-3x-small);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+
+    cx-checkbox {
+      line-height: normal;
+
+      &::part(label) {
+        display: none;
+      }
+    }
+  }
+
+  .asset-card__name {
+    flex: 1;
+    font-size: var(--cx-font-size-small);
+
+    &::part(content) {
+      word-break: break-all;
+    }
+  }
+
+  .asset-card__name--right {
+    text-align: right;
+  }
+
+  .asset-card__button {
+    &::part(base) {
+      font-size: var(--cx-font-size-medium);
+      padding: 0;
+    }
+  }
+
+  .asset-card__tags {
+    /* display: flex;
+    gap: var(--cx-spacing-3x-small); */
+    width: 100%;
+    height: 24px;
+
+    cx-tag {
+      max-width: 100%;
+    }
+  }
+
+  .asset-card__secondary-info {
+    color: var(--cx-color-neutral-500);
+    * {
+      line-height: var(--cx-line-height-small);
+    }
+    .asset-card__placeholder {
+      visibility: hidden;
+    }
+  }
+`;

package/src/components/Result/AssetCard/AssetCard.tsx

@@ -0,0 +1,192 @@
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import ArrayClamp from '@/components/ArrayClamp';
+import { ImageCardDisplayInfo } from '@/GlobalConfigContext';
+import { Asset, GridView, MediaType } from '@/types/search';
+import { isNullOrWhiteSpace } from '@/utils/string';
+import { CxCard } from '@/web-component';
+
+import AssetPreview from '../AssetPreview';
+import { Card } from './AssetCard.styled';
+
+type Props = {
+  id: string;
+  asset: Asset;
+  displayInfo: ImageCardDisplayInfo & { searchInDrive: boolean };
+  isSelected: boolean;
+  view: GridView;
+  onItemSelect: (asset: Asset) => void;
+  onMount?: (id: string) => void;
+  onLoaded?: (id: string) => void;
+};
+
+const AssetCard: FC<Props> = ({
+  id,
+  asset,
+  displayInfo,
+  isSelected,
+  view,
+  onItemSelect,
+  onMount,
+  onLoaded,
+}) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [isInViewport, setIsInViewport] = useState(false);
+  const cardRef = useRef<CxCard>(null);
+  const previewLoaded = imageLoaded || (asset.docType !== MediaType.Image && asset.docType !== MediaType.Video);
+
+  const onPreviewLoaded = useCallback(() => {
+    setImageLoaded(true);
+    if (onLoaded) {
+      onLoaded(id);
+    }
+  }, [id, onLoaded]);
+
+  useEffect(() => {
+    if (onMount) {
+      onMount(id);
+    }
+  }, [onMount, id]);
+
+  const tags = useMemo(() => {
+    return asset?.tags.length > 0 ? asset?.tags.split(',').map((s) => s.trim()) : [];
+  }, [asset?.tags]);
+
+  const getTagTitle = useCallback((index: number) => {
+    if (displayInfo.tags && tags) {
+      return tags[index] || '';
+    }
+    return '';
+  }, [displayInfo.tags, tags]);
+
+  const assetClassNames = useMemo(() => {
+    const classNames: Record<string, boolean> = {
+      'asset-card': true,
+      selected: isSelected,
+      'asset-card--small': view === GridView.Small,
+      'asset-card--medium': view === GridView.Medium,
+      'asset-card--large': view === GridView.Large,
+    };
+
+    return Object.keys(classNames).filter((key) => classNames[key]).join(' ');
+  }, [isSelected, view]);
+
+
+  useEffect(() => {
+    const card = cardRef.current;
+    if (!card) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setIsInViewport(true);
+        } else {
+          setIsInViewport(false);
+        }
+      });
+    });
+
+    observer.observe(card);
+
+    return () => {
+      observer.unobserve(card);
+    };
+  }, []);
+
+  return (
+    <Card
+      ref={cardRef}
+      className={assetClassNames}
+      onClick={() => {
+        onItemSelect(asset);
+      }}
+    >
+      <AssetPreview
+        slot="image"
+        asset={asset}
+        imageLoaded={previewLoaded}
+        thumbnailOnly={view === GridView.Small || !isInViewport}
+        onLoaded={onPreviewLoaded}
+      />
+      {isSelected && (
+        <div slot="image" className="asset-card__checkbox">
+          <cx-checkbox checked></cx-checkbox>
+        </div>
+      )}
+      <cx-space>
+        {displayInfo.title && (
+          <cx-line-clamp lines={1} className="asset-card__name">
+            {asset.name}
+          </cx-line-clamp>
+        )}
+        {displayInfo.searchInDrive && (
+          <cx-tooltip content="Open in drive">
+            <cx-icon-button name="folder" size="small" className="asset-card__button"></cx-icon-button>
+          </cx-tooltip>
+        )}
+      </cx-space>
+      {displayInfo.tags && tags.length > 0 && (
+        <ArrayClamp
+          className="asset-card__tags"
+          separator=" "
+          tooltipSeparator=", "
+          getChildString={getTagTitle}
+        >
+          {tags
+            ?.filter((tag) => !isNullOrWhiteSpace(tag))
+            .slice(0, 5)
+            .map((tag) => (
+              <cx-tag
+                key={tag.toLowerCase()}
+                size="small"
+                variant="neutral"
+                pill
+              >
+                <cx-line-clamp lines={1}>{tag}</cx-line-clamp>
+              </cx-tag>
+            ))}
+        </ArrayClamp>
+      )}
+      {(displayInfo.dimension || displayInfo.fileSize) && (
+        <cx-space spacing="small" align-items="center" wrap="nowrap" className="asset-card__secondary-info">
+          {displayInfo.dimension && Boolean(Number(asset.width)) && Boolean(Number(asset.height)) && (
+            <cx-line-clamp lines={1} className="asset-card__name">
+              <cx-typography variant="small">
+                <span>{asset.width}</span>x<span>{asset.height}</span>
+              </cx-typography>
+            </cx-line-clamp>
+          )}
+          {displayInfo.fileSize && (
+            <cx-line-clamp lines={1} className="asset-card__name asset-card__name--right">
+              <cx-typography variant="small">
+                {asset.size}
+              </cx-typography>
+            </cx-line-clamp>
+          )}
+          {!(
+            displayInfo.dimension && Boolean(Number(asset.width)) && Boolean(Number(asset.height)) || 
+            displayInfo.fileSize
+          ) && 
+          (
+            <cx-typography variant="small" className="asset-card__placeholder">
+              <span>empty</span>
+            </cx-typography>
+          )}
+        </cx-space>
+      )}
+      {/* Placeholder to keep the card size consistent */}
+      {displayInfo.tags && tags.length === 0 && (
+        <ArrayClamp
+          className="asset-card__tags"
+          separator=" "
+          tooltipSeparator=", "
+          getChildString={getTagTitle}
+        >
+          <span></span>
+        </ArrayClamp>
+      )}
+    </Card>
+  );
+};
+
+export default AssetCard;

package/src/components/Result/AssetCard/AssetCardWrapper.styled.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  
+  .wrapper__progress-bar {
+    --height: 4px;
+  }
+
+  .wrapper__content {
+    box-sizing: border-box;
+    overflow: auto;
+    padding: var(--cx-spacing-2x-small) 0;
+  }
+
+  .wrapper__content__empty {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+
+    cx-spinner {
+      --track-width: 6px,
+      font-size: var(--cx-font-size-3x-large),
+    }
+  }
+
+  .asset-card__masonry > div {
+    align-items: center;
+  }
+`;

package/src/components/Result/AssetCard/AssetCardWrapper.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useCallback, useContext, useMemo, useRef } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import Masonry from 'react-responsive-masonry';
+
+import NoResult from '@/components/NoResult';
+import { GlobalConfigContext } from '@/GlobalConfigContext';
+import { Asset, GridView } from '@/types/search';
+
+import AssetCard from './AssetCard';
+import { Container } from './AssetCardWrapper.styled';
+import { ASSET_SIZE } from '@/consts/asset';
+
+type Props = {
+  // Are there more items to load?
+  // (This information comes from the most recent API request.)
+  hasNextPage: boolean;
+  height: number;
+  // Array of items loaded so far.
+  items: Asset[];
+  isConfigError?: boolean;
+  isError?: boolean;
+  isFetched?: boolean;
+  // Are we currently loading a page of items?
+  // (This may be an in-flight flag in your Redux store for example.)
+  isLoadingData: boolean;
+  selectedAsset: Asset | null;
+  view: GridView;
+  width: number;
+  onItemSelect: (selectedAsset: Asset) => void;
+  // Callback function responsible for loading the next page of items.
+  onLoadMore: () => void;
+  onScroll: (e: MouseEvent) => void;
+};
+
+export const AssetCardWrapper = forwardRef<HTMLDivElement, Props>(({
+  hasNextPage,
+  height,
+  isConfigError,
+  isError,
+  isFetched,
+  isLoadingData,
+  items,
+  selectedAsset,
+  view,
+  width,
+  onItemSelect,
+  onLoadMore,
+  onScroll,
+}, ref) => {
+  const { displayInfo, searchInDrive } = useContext(GlobalConfigContext);
+  const infiniteScrollRef = useRef<InfiniteScroll>(null);
+  const gutter = useMemo(() => {
+    return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cx-spacing-medium') || '16', 10);
+  }, []);
+
+  const calculateColumnCount = useCallback(() => {
+    const actualWidth = infiniteScrollRef.current?.getScrollableTarget()?.children[0].clientWidth ?? width;
+    const breakPoint = ASSET_SIZE[view]?.minWidth || ASSET_SIZE[GridView.Large].minWidth;
+    return Math.max(1, Math.floor((actualWidth + gutter) / (breakPoint + gutter)));
+  }, [gutter, view, width]);
+
+
+  const renderContent = useCallback(() => {
+    if (items.length > 0) {
+      return (
+        <InfiniteScroll
+          dataLength={items.length}
+          hasMore={hasNextPage}
+          loader={null}
+          ref={infiniteScrollRef}
+          scrollableTarget="scrollableDiv"
+          style={{ overflow: 'visible' }}
+          next={onLoadMore}
+          onScroll={onScroll}
+        >
+          <Masonry columnsCount={calculateColumnCount()} gutter={`${gutter}px`} className='asset-card__masonry'>
+            {items.map((item) => (
+              <AssetCard
+                id={item.id}
+                key={item.id}
+                asset={item}
+                displayInfo={{
+                  ...displayInfo,
+                  searchInDrive,
+                }}
+                view={view}
+                isSelected={selectedAsset?.id === item.id}
+                onItemSelect={onItemSelect}
+              />
+            ))}
+          </Masonry>
+        </InfiniteScroll>
+      );
+    } else if (!isLoadingData) {
+      return (
+        <div className="wrapper__content__empty">
+          <NoResult icon="search_off" message="No matching results" />
+        </div>
+      );
+    }
+
+    return null;
+  }, [
+    hasNextPage,
+    isLoadingData,
+    items,
+    selectedAsset?.id,
+    view,
+    displayInfo,
+    gutter,
+    searchInDrive,
+    calculateColumnCount,
+    onItemSelect,
+    onLoadMore,
+    onScroll,
+  ]);
+
+  if (isConfigError && isFetched) {
+    return (
+      <NoResult
+        icon="error_outline"
+        message="The Content Browser was loaded with incorrect configuration(s). Please update the configuration and try again."
+      />
+    );
+  }
+
+  if (isError && isFetched) {
+    return (
+      <NoResult
+        icon="error_outline"
+        message="Something went wrong. Please try again later."
+      />
+    );
+  }
+
+  return (
+    <Container className="wrapper" ref={ref}>
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          opacity: isLoadingData ? 1 : 0,
+          zIndex: 'var(--cx-z-index-drawer)',
+        }}
+      >
+        <cx-progress-bar
+          className="wrapper__progress-bar"
+          indeterminate
+        ></cx-progress-bar>
+      </div>
+      <div
+        className="wrapper__content"
+        style={{
+          width: width,
+          height: height,
+        }}
+        id="scrollableDiv"
+      >
+        {renderContent()}
+      </div>
+    </Container>
+  );
+});
+
+export default AssetCardWrapper;

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

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

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

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  &.asset-preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.asset-preview > div {
+    height: 100%;
+  }
+
+  .asset-preview__representative {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    object-fit: contain;
+  }
+
+  .asset-preview__representative--animated {
+    display: none;
+  }
+
+  .asset-preview__representative-container:hover {
+    .asset-preview__representative {
+      display: none;
+    }
+    .asset-preview__representative--animated {
+      display: block;
+    }
+  }
+  
+  .asset-preview__representative--horizontal > * {
+    width: 100%;
+    height: auto;
+  }
+
+  .asset-preview__representative--vertical > * {
+    width: auto;
+    height: 100%;
+  }
+
+  .asset-preview__representative-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: transparent;
+    z-index: 1;
+  }
+
+  .asset-preview__image-skeleton {
+    --border-radius: var(--cx-border-radius-medium);
+
+    aspect-ratio: 246/180;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .asset-preview__video-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--cx-color-neutral-0);
+    font-size: var(--cx-font-size-x-large);
+    background-color: color-mix(
+      in srgb,
+      var(--cx-color-neutral-1000),
+      transparent 60%
+    );
+    border-radius: var(--cx-border-radius-medium);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    pointer-events: none;
+  }
+  
+  .asset-preview__video-icon[hidden] {
+    display: none !important;
+  }
+
+  .asset-preview__progress-bar {
+    --height: 6px;
+    
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
+    &::part(indicator) {
+      transition: none;
+    }
+  }
+`;

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

@@ -0,0 +1,78 @@
+import { FC, useCallback, useState } from 'react';
+
+import { Asset, MediaType } from '@/types/search';
+
+import { Container } from './AssetPreview.styled';
+import ImagePreview from './ImagePreview';
+import VideoPreview from './VideoPreview';
+import OtherPreview from './OtherPreview';
+
+type Props = {
+  asset: Asset;
+  imageLoaded: boolean;
+  slot: string;
+  thumbnailOnly: boolean;
+  onLoaded: () => void;
+};
+
+const AssetPreview: FC<Props> = ({
+  asset,
+  imageLoaded,
+  slot,
+  thumbnailOnly,
+  onLoaded,
+}) => {
+  const [isError, setIsError] = useState(false);
+  
+  const renderPreview = useCallback(() => {
+    const isUrlFilled = typeof asset.imageUrl === 'string' && asset.imageUrl.length > 0;
+    
+    if (isError || !isUrlFilled) {
+      return (
+        <OtherPreview type={asset.docType}>
+          {asset.extension?.toUpperCase() || asset.docType}
+        </OtherPreview>
+      );
+    }
+
+    if (asset.docType === MediaType.Video) {
+      return (
+        <VideoPreview
+          url={asset.scrubUrl}
+          thumbnailOnly={thumbnailOnly}
+          thumbnailUrl={asset.imageUrl}
+          loaded={imageLoaded}
+          onLoaded={onLoaded}
+          onError={() => setIsError(true)}
+        />
+      );
+    }
+
+    return (
+      <ImagePreview
+        alt={asset.name}
+        url={asset.imageUrl}
+        originalUrl={asset.extension === 'gif' && asset.originalUrl ? asset.originalUrl : undefined}
+        loaded={imageLoaded}
+        onLoaded={onLoaded}
+        onError={() => setIsError(true)}
+      />
+    );
+  }, [asset, isError, onLoaded, thumbnailOnly, imageLoaded]);
+
+  return (
+    <Container slot={slot} className="asset-preview">
+      {
+        !imageLoaded && (
+          <cx-skeleton
+            slot="image"
+            className="asset-preview__image-skeleton"
+          ></cx-skeleton>
+        )
+      }
+      {renderPreview()}
+    </Container>
+  );
+};
+
+export default AssetPreview;