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

package/src/components/FormatDialog/Previewer/Previewer.styled.ts

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  position: relative;
-  width: 100%;
-  height: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .loading {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  .loading__skeleton {
-    --border-radius: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .loading__spinner {
-    --track-width: 0.2rem;
-    font-size: var(--cx-font-size-3x-large);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-`;

package/src/components/FormatDialog/Previewer/Previewer.tsx

@@ -1,143 +0,0 @@
-import { CSSProperties, FC, useCallback, useRef, useState } from 'react';
-
-import OtherPreview from '@/components/Result/AssetPreview/OtherPreview';
-import { MediaType } from '@/types/search';
-
-import { Container } from './Previewer.styled';
-
-type Props = {
-  loadable: boolean;
-  asset: {
-    docType?: MediaType;
-    imageUrl?: string;
-    videoUrl?: string;
-    extension?: string;
-  };
-  onLoad?: ({ width, height }: { width: number, height: number }) => void;
-};
-
-const Previewer: FC<Props> = ({
-  loadable,
-  asset = {
-    docType: MediaType.Image,
-    imageUrl: '',
-  },
-  onLoad,
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadFailed, setIsLoadFailed] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const imageRef = useRef<HTMLImageElement>(null);
-  const [assetDirection, setAssetDirection] = useState<'vertical' | 'horizontal'>('horizontal');
-
-  const onLoadAsset = useCallback((rect: { width: number, height: number }) => {
-    if (onLoad) {
-      onLoad(rect);
-    }
-
-    setAssetDirection(rect.width > rect.height ? 'horizontal' : 'vertical');
-  }, [onLoad]);
-
-  const renderPreview = useCallback(() => {
-    if (!loadable) {
-      return;
-    }
-
-    const otherPreview = (
-      <OtherPreview
-        type={asset.docType}
-        style={
-          {
-            '--text-font-size': 'var(--cx-font-size-x-large)',
-            '--icon-font-size': '56px',
-            '--gap': 'var(--cx-spacing-small)',
-          } as CSSProperties
-        }
-      >
-        {asset.extension?.toUpperCase() ?? asset.docType}
-      </OtherPreview>
-    );
-
-    if (isLoadFailed) {
-      return otherPreview;
-    }
-
-    if (asset.docType === MediaType.Video && asset.videoUrl) {
-      return (
-        <video
-          src={asset.videoUrl}
-          controls
-          controlsList="nodownload noremoteplayback noplaybackrate"
-          disablePictureInPicture
-          disableRemotePlayback
-          style={{
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
-            width: assetDirection === 'horizontal' ? '100%' : 'auto',
-            height: assetDirection === 'vertical' ? '100%' : 'auto',
-          }}
-          onLoadedMetadata={(e) => {
-            setIsLoading(false);
-            onLoadAsset({
-              width: e.currentTarget.videoWidth,
-              height: e.currentTarget.videoHeight,
-            });
-          }}
-          onError={() => {
-            setIsLoading(false);
-            setIsLoadFailed(true);
-          }}
-        >
-        </video>
-      );
-    }
-
-    if (asset.docType === MediaType.Image || asset.imageUrl) {
-      return (
-        <img
-          ref={imageRef}
-          src={asset.imageUrl}
-          alt={asset.docType}
-          style={{
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
-            width: assetDirection === 'horizontal' ? '100%' : 'auto',
-            height: assetDirection === 'vertical' ? '100%' : 'auto',
-          }}
-          onLoad={() => {
-            if (!imageRef.current) {
-              return;
-            }
-            setIsLoading(false);
-            onLoadAsset({
-              width: imageRef.current.naturalWidth,
-              height: imageRef.current.naturalHeight,
-            });
-          }}
-          onError={() => {
-            setIsLoading(false);
-            setIsLoadFailed(true);
-          }}
-        />
-      );
-    }
-
-    return otherPreview;
-  }, [asset.docType, asset.extension, asset.imageUrl, asset.videoUrl, assetDirection, isLoadFailed, loadable, onLoadAsset]);
-
-  return (
-      <Container ref={containerRef}>
-        {renderPreview()}
-        {isLoading && (
-          <div className="loading">
-            <cx-skeleton className="loading__skeleton"></cx-skeleton>
-            <cx-spinner className="loading__spinner"></cx-spinner>
-          </div>
-        )}
-      </Container>
-  );
-};
-
-export default Previewer;

package/src/components/FormatDialog/Previewer/index.ts

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

package/src/components/FormatDialog/ProxyMenu/ProxyMenu.styled.ts

@@ -1,88 +0,0 @@
-import { CxMenuProps } from '@/react-web-component';
-import styled from 'styled-components';
-
-export const Container = styled('cx-menu')<CxMenuProps>`
-  border-radius: 0;
-  padding: 0;
-  
-  cx-menu-item {
-    &::part(base) {
-      height: 60px;
-      padding: var(--cx-spacing-x-small) var(--cx-spacing-medium);
-    }
-
-    &::part(label) {
-      display: flex;
-      align-items: center;
-    }
-
-    &::part(checked-icon) {
-      display: none;
-    }
-
-    &::part(submenu-icon) {
-      display: none;
-    }
-
-    &::part(suffix) {
-      color: var(--cx-color-neutral-600);
-    }
-
-    .icon--primary {
-      color: var(--cx-color-primary);
-    }
-
-    &.proxy--switch::part(label) {
-      justify-content: space-between;
-    }
-
-    .proxy__name {
-      color: var(--cx-color-neutral-900);
-      
-      &::part(base) {
-        font-weight: var(--cx-font-weight-medium);
-      }
-    }
-
-    .proxy__name.selected {
-      --color: var(--cx-color-primary);
-    }
-
-    .proxy__thumbnail {
-      background-color: var(--cx-color-neutral-100);
-      width: 54px;
-      height: 40px;
-      object-fit: cover;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      img {
-        width: auto;
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-
-    .proxy__details {
-      --color: var(--cx-color-neutral-500);
-      &::part(base) {
-        display: flex;
-        align-items: center;
-        gap: var(--cx-spacing-2x-small);
-      }
-    }
-
-    .proxy__extension-dot {
-      display: inline-block;
-      width: 3px;
-      height: 3px;
-      border-radius: 50%;
-      background-color: var(--cx-color-neutral-500);
-    }
-
-    &:not(:last-child) {
-      border-bottom: var(--cx-panel-border-width) solid var(--cx-panel-border-color);
-    }
-  }
-`;

package/src/components/FormatDialog/ProxyMenu/ProxyMenu.tsx

@@ -1,74 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-import { Container } from './ProxyMenu.styled';
-import { MediaType } from '@/types/search';
-
-type MenuItemProps = {
-  cdnName?: string | null;
-  docType?: string;
-  extension?: string;
-  height?: string;
-  image?: string;
-  name: string;
-  value: string;
-  width?: string;
-};
-
-type Props = {
-  items?: MenuItemProps[];
-  selectedItem?: string;
-  children?: ReactNode;
-  style?: CSSProperties;
-  selectedDisabled?: boolean;
-};
-
-const ProxyMenu = ({ items, selectedItem, children, style, selectedDisabled }: Props) => {
-  return (
-    <Container style={style}>
-      {items?.map((item) => {
-        const selected = selectedItem === item.value && !selectedDisabled;
-        const showDimensions = Boolean(Number(item.width)) && Boolean(Number(item.height)) && item.docType !== MediaType.Audio && item.docType !== MediaType.Multimedia;
-
-        return (
-          <cx-menu-item key={item.value} value={item.value} className={selected ? 'disable-hover' : ''}>
-            {item.image && (
-              <div slot="prefix" className="proxy__thumbnail">
-                <img src={item.image} alt={item.name} />
-              </div>
-            )}
-            <div>
-              <cx-typography
-                variant="body3"
-                className={`proxy__name ${selected ? 'selected' : ''}`}
-              >
-                {item.name}
-              </cx-typography>
-              <cx-typography variant="body3" className="proxy__details">
-                {showDimensions && `${item.width} x ${item.height}`}
-                {showDimensions && item.extension && (
-                  <div className="proxy__extension-dot"></div>
-                )}
-                {item.extension?.replace(/^\./, '').toUpperCase()}
-                {item.cdnName && (
-                  <>
-                    <div className="proxy__extension-dot"></div>
-                    <span className="proxy__cdn-name">{item.cdnName}</span>
-                  </>
-                )}
-              </cx-typography>
-            </div>
-            <cx-icon
-              slot="suffix"
-              name={selected ? 'check' : ''}
-              style={{
-                color: 'var(--cx-color-primary)',
-              }}
-            ></cx-icon>
-          </cx-menu-item>
-        );
-      })}
-      {children}
-    </Container>
-  );
-};
-
-export default ProxyMenu;

package/src/components/FormatDialog/ProxyMenu/index.ts

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

package/src/components/FormatDialog/TrackingParameters/TrackingParameters.tsx

@@ -1,59 +0,0 @@
-import { FC } from 'react';
-
-type Props = {
-  values: { key: string; value: string }[];
-  onChange: (values: { key: string; value: string }[]) => void;
-};
-
-const TrackingParameters: FC<Props> = ({
-  values,
-  onChange,
-}) => {
-  const addParameter = () => {
-    onChange([...values, { key: '', value: '' }]);
-  };
-
-  const removeParameter = (index: number) => {
-    onChange(values.filter((_, i) => i !== index));
-  };
-
-  const updateParameter = (index: number, key: string, value: string) => {
-    const newParameters = [...values];
-    newParameters[index] = { key, value };
-    onChange(newParameters);
-  };
-
-  return (
-    <cx-space direction="vertical" spacing="medium" className="dialog__tracking" align-items='flex-start'>
-      {values.map((param, index) => (
-        <cx-space key={index} spacing="small" wrap="nowrap" align-items="center">
-          <cx-input-group>
-            <cx-input
-              label="Name"
-              size="small"
-              value={param.key}
-              onInput={(e) => updateParameter(index, (e.target as HTMLInputElement).value, param.value)}
-            ></cx-input>
-            <cx-input
-              label="Value"
-              size="small"
-              value={param.value}
-              onInput={(e) => updateParameter(index, param.key, (e.target as HTMLInputElement).value)}
-            ></cx-input>
-          </cx-input-group>
-          <cx-icon-button
-            name="close"
-            onClick={() => removeParameter(index)}
-          ></cx-icon-button>
-        </cx-space>
-      ))}
-      <cx-button variant="neutral" onClick={addParameter}>
-        <cx-icon slot="prefix" name="add"></cx-icon>
-        Add parameter
-      </cx-button>
-    </cx-space>
-  );
-};
-
-
-export default TrackingParameters;

package/src/components/FormatDialog/TrackingParameters/index.ts

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

package/src/components/FormatDialog/index.ts

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

package/src/components/Header/Header.styled.ts

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-
-import { CxSpaceProps } from '@/react-web-component';
-
-export const Container = styled('cx-space')<CxSpaceProps & { bordered?: boolean }>`
-  border-bottom: ${({ bordered }) => (bordered ? '1px solid var(--cx-color-neutral-300)' : 'none')};
-  padding: var(--cx-spacing-medium);
-
-  cx-avatar {
-    --size: var(--cx-font-size-3x-large);
-
-    cursor: pointer;
-  }
-
-  cx-skeleton {
-    --color: var(--cx-color-primary);
-
-    width: var(--cx-font-size-3x-large);
-    height: var(--cx-font-size-3x-large);
-  }
-
-  cx-menu-item::part(checked-icon) {
-    display: none;
-  }
-
-  .header {
-    flex-wrap: nowrap;
-    width: 100%;
-  }
-
-  .header__title {
-    display: flex;
-    align-items: center;
-  }
-
-  .header__menu {
-    display: flex;
-    gap: var(--cx-spacing-2x-small);
-    align-items: center;
-    width: fit-content;
-  }
-
-  .header__user-info:hover::part(base) {
-    background-color: unset;
-    cursor: default;
-  }
-
-  .header__user-info cx-avatar {
-    cursor: default;
-  }
-`;

package/src/components/Header/Header.tsx

@@ -1,118 +0,0 @@
-import { CSSProperties, FC, ReactNode, useContext, useEffect, useMemo } from 'react';
-
-import { AppContext } from '@/AppContext';
-import { GlobalConfigContext } from '@/GlobalConfigContext';
-import { useGetUserInfoQuery } from '@/store/user/user.api';
-import { Folder } from '@/types/search';
-
-import { Container } from './Header.styled';
-
-type Props = {
-  authenticated: boolean;
-  bordered?: boolean;
-  children?: ReactNode;
-  currentFolder: Folder;
-  onMenuClick: () => void;
-  onLogout: () => void;
-};
-
-const Header: FC<Props> = ({
-  authenticated,
-  bordered,
-  children,
-  currentFolder,
-  onMenuClick,
-  onLogout,
-}) => {
-  const { isContentBrowserPopedup, pluginInfo } = useContext(GlobalConfigContext);
-  const { onClose } = useContext(AppContext);
-  const { data, isFetching, isLoading, refetch: refetchUserInfo } = useGetUserInfoQuery({});
-
-  useEffect(() => {
-    if (authenticated) {
-      refetchUserInfo();
-    }
-  }, [authenticated, refetchUserInfo]);
-
-  const title = useMemo(() => {
-    if (!currentFolder.fullPath) {
-      return (
-        <cx-line-clamp lines={1}>
-          <cx-typography variant="h4">{pluginInfo.publicApplicationName}</cx-typography>
-        </cx-line-clamp>
-      );
-    }
-
-    return (
-      <cx-space direction="horizontal" align-items="center" spacing="2x-small">
-        <cx-typography variant="h4">{currentFolder.title}</cx-typography>
-      </cx-space>
-    );
-  }, [currentFolder.fullPath, currentFolder.title, pluginInfo.publicApplicationName]);
-
-  const Dropdown = useMemo(() => {
-    return isLoading || isFetching ? (
-      <cx-skeleton></cx-skeleton>
-    ) : (
-      <cx-dropdown distance={4}>
-        <cx-avatar
-          slot="trigger"
-          label="User avatar"
-          image={data?.avatar}
-          loading="lazy"
-        ></cx-avatar>
-        <cx-menu>
-          <cx-menu-item className='header__user-info' readonly>
-            {data?.fullName}
-            <cx-avatar
-              slot="prefix"
-              label="User avatar"
-              image={data?.avatar}
-              loading="lazy"
-              style={
-                {
-                  '--size': 'var(--cx-font-size-x-large)',
-                } as CSSProperties
-              }
-            ></cx-avatar>
-          </cx-menu-item>
-          <cx-divider></cx-divider>
-          <cx-menu-item value="logout" onClick={onLogout}>
-            Logout
-            <cx-icon slot="prefix" name="logout"></cx-icon>
-          </cx-menu-item>
-        </cx-menu>
-      </cx-dropdown>
-    );
-  }, [isLoading, isFetching, data?.avatar, data?.fullName, onLogout]);
-
-  return (
-    <Container direction="vertical" spacing="small" bordered={bordered}>
-      <cx-space className="header" justify-content="space-between" align-items="center">
-        <div className="header__title">
-          <cx-space className="header" justify-content="space-between" align-items="center" spacing="x-small">
-            <cx-icon-button
-              name="menu"
-              label="Menu"
-              onClick={onMenuClick}
-            ></cx-icon-button>
-            {title}
-          </cx-space>
-        </div>
-        <div className="header__menu">
-          {Dropdown}
-          {isContentBrowserPopedup && (
-            <cx-icon-button
-              name="close"
-              label="Close"
-              onClick={onClose}
-            ></cx-icon-button>
-          )}
-        </div>
-      </cx-space>
-      {children}
-    </Container>
-  );
-};
-
-export default Header;

package/src/components/Loader/Loader.tsx

@@ -1,37 +0,0 @@
-import { CSSProperties, FC } from 'react';
-
-import { MESSAGE_NEW_LINE } from '@/consts/data';
-
-type Props = {
-  message?: string;
-  children?: React.ReactNode;
-};
-
-const Loader: FC<Props> = ({ message, children }) => {
-  return (
-    <cx-space direction="vertical" align-items="center">
-      <cx-spinner
-        style={
-          {
-            '--track-width': '0.2rem',
-            fontSize: 'var(--cx-font-size-3x-large)',
-          } as CSSProperties
-        }
-      ></cx-spinner>
-      {message?.split(MESSAGE_NEW_LINE).map((line, index) =>
-        line.indexOf('http') !== -1 ? (
-          <cx-button key={index} href={line} target="_blank">
-            {line}
-          </cx-button>
-        ) : (
-          <cx-typography key={index} variant="body2">
-            {line}
-          </cx-typography>
-        ),
-      )}
-      {children}
-    </cx-space>
-  );
-};
-
-export default Loader;

package/src/components/Loader/index.ts

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

package/src/components/NoResult/NoResult.tsx

@@ -1,37 +0,0 @@
-import { FC } from 'react';
-
-type Props = {
-  icon: string;
-  message: string;
-};
-
-const NoResult: FC<Props> = ({
-  icon,
-  message,
-}: Props) => {
-  return (
-    <div
-      style={{
-        alignItems: 'center',
-        color: 'var(--cx-color-neutral)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 'var(--cx-spacing-medium)',
-        height: '100%',
-        justifyContent: 'center',
-        textAlign: 'center',
-        width: '100%',
-      }}
-    >
-      <cx-icon
-        name={icon}
-        style={{
-          fontSize: '96px',
-        }}
-      ></cx-icon>
-      {message}
-    </div>
-  );
-};
-
-export default NoResult;

package/src/components/NoResult/index.tsx

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