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

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

@@ -1,120 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

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

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

@@ -1,108 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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;