@orangelogic/orange-dam-content-browser-sdk 1.0.1-test

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

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

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

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

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

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

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

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

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

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

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

package/src/components/FormatDialog/index.ts

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

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

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

@@ -0,0 +1,118 @@
+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/Header/index.ts

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

package/src/components/Loader/Loader.tsx

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

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

package/src/components/NoResult/NoResult.tsx

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

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