@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/components/CardPreview/Image.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Image = styled.img`
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  margin: auto;
+`;
+
+export default Image;

package/admin/src/components/CardPreview/Wrapper.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ isFile }) => (isFile ? '#F2F3F4' : '#333740')};
+`;
+
+Wrapper.defaultProps = {
+  isFile: false,
+};
+
+Wrapper.propTypes = {
+  isFile: PropTypes.bool,
+};
+
+export default Wrapper;

package/admin/src/components/CardPreview/index.js

@@ -0,0 +1,66 @@
+import React, { memo, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { getType } from '../../utils';
+
+import BrokenFile from '../../icons/BrokenFile';
+import FileIcon from '../FileIcon';
+import VideoPreview from '../VideoPreview';
+import Wrapper from './Wrapper';
+import Image from './Image';
+
+const CardPreview = ({ extension, hasError, hasIcon, url, previewUrl, type, withFileCaching }) => {
+  const isFile = getType(type) === 'file';
+  const isVideo = getType(type) === 'video';
+  const cacheRef = useRef(performance.now());
+
+  if (hasError) {
+    return (
+      <Wrapper isFile>
+        <BrokenFile />
+      </Wrapper>
+    );
+  }
+
+  if (isFile) {
+    return (
+      <Wrapper isFile>
+        <FileIcon ext={extension} />
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper>
+      {isVideo ? (
+        <VideoPreview src={url} previewUrl={previewUrl} hasIcon={hasIcon} />
+      ) : (
+        // Adding performance.now forces the browser no to cache the img
+        // https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images
+        <Image src={`${url}${withFileCaching ? `?${cacheRef.current}` : ''}`} />
+      )}
+    </Wrapper>
+  );
+};
+
+CardPreview.defaultProps = {
+  extension: null,
+  hasError: false,
+  hasIcon: false,
+  previewUrl: null,
+  url: null,
+  type: '',
+  withFileCaching: true,
+};
+
+CardPreview.propTypes = {
+  extension: PropTypes.string,
+  hasError: PropTypes.bool,
+  hasIcon: PropTypes.bool,
+  previewUrl: PropTypes.string,
+  url: PropTypes.string,
+  type: PropTypes.string,
+  withFileCaching: PropTypes.bool,
+};
+
+export default memo(CardPreview);

package/admin/src/components/CardTitle/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Title = styled(props => (
+  <Text {...props} fontSize="md" fontWeight="bold" color="black" ellipsis />
+))`
+  width: 100%;
+  margin-bottom: 4px;
+  margin-top: 4px;
+  margin-right: 5px;
+`;
+
+export default Title;

package/admin/src/components/CardWrapper/index.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin-bottom: 16px;
+  overflow: hidden;
+  &:hover {
+    cursor: ${({ isDraggable }) => (isDraggable ? 'move' : 'pointer')};
+  }
+`;
+
+Wrapper.defaultProps = {
+  isDisabled: false,
+  isDraggable: false,
+};
+
+Wrapper.propTypes = {
+  isDisabled: PropTypes.bool,
+  isDraggable: PropTypes.bool,
+};
+
+export default Wrapper;

package/admin/src/components/CheckControl/Button.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Button = styled(Text)`
+  display: flex;
+  align-items: center;
+  height: 36px;
+  width: 280px;
+  padding: 0 15px 0;
+  color: ${({ theme }) => theme.main.colors.black};
+  background-color: #fafafb;
+  border: 1px solid transparent;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  text-align: left;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:hover {
+    height: 36px;
+    background-color: ${({ theme }) => theme.main.colors.lightBlue};
+    border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
+    color: ${({ theme }) => theme.main.colors.mediumBlue};
+    > svg {
+      > g {
+        fill: ${({ theme }) => theme.main.colors.darkBlue};
+      }
+    }
+  }
+
+  > svg {
+    height: 2.1rem;
+    margin-right: 15px;
+    > g {
+      fill: ${({ theme }) => theme.main.colors.grey};
+    }
+  }
+`;
+
+Button.defaultProps = {
+  as: 'button',
+  color: '#b4b6ba',
+  fontSize: 'md',
+  fontWeight: 'bold',
+  type: 'button',
+};
+
+export default Button;

package/admin/src/components/CheckControl/CustomDropdownSection.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import DropdownSection from '../DropdownSection';
+
+const CustomDropdownSection = styled(DropdownSection)`
+  top: 34px;
+  left: 40px;
+`;
+
+export default CustomDropdownSection;

package/admin/src/components/CheckControl/Spacer.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Spacer = styled.div`
+  height: 10px;
+`;
+
+export default Spacer;

package/admin/src/components/CheckControl/index.js

@@ -0,0 +1,74 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useClickAwayListener } from '@buffetjs/hooks';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { Padded } from '@buffetjs/core';
+
+import DoubleFile from '../../icons/DoubleFile';
+import File from '../../icons/File';
+import Button from './Button';
+import Spacer from './Spacer';
+import CardControl from '../CardControl';
+import CustomDropdownSection from './CustomDropdownSection';
+import { getTrad } from '../../utils';
+
+const CheckControl = ({ title, onSubmitEdit }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { formatMessage } = useGlobalContext();
+  const dropdownRef = useRef();
+
+  useClickAwayListener(dropdownRef, () => setIsOpen(false));
+
+  const handleClick = e => {
+    e.persist();
+    setIsOpen(false);
+    onSubmitEdit(e);
+  };
+
+  const handleClickDuplicate = e => {
+    e.persist();
+    setIsOpen(false);
+    onSubmitEdit(e, true);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(v => !v);
+  };
+
+  return (
+    <div ref={dropdownRef}>
+      <CardControl
+        color="#6DBB1A"
+        onClick={handleToggle}
+        type="check"
+        title={title}
+        iconStyle={{ height: '1.4rem', width: '1.4rem' }}
+      />
+      <CustomDropdownSection isOpen={isOpen}>
+        <Padded left right bottom top size="15px">
+          <Button onClick={handleClick}>
+            <File style={{ height: '2rem' }} />
+            {formatMessage({ id: getTrad('checkControl.crop-original') })}
+          </Button>
+          <Spacer />
+          <Button onClick={handleClickDuplicate}>
+            <DoubleFile style={{ height: '1.8rem' }} />
+            {formatMessage({ id: getTrad('checkControl.crop-duplicate') })}
+          </Button>
+        </Padded>
+      </CustomDropdownSection>
+    </div>
+  );
+};
+
+CheckControl.defaultProps = {
+  onSubmitEdit: () => {},
+  title: null,
+};
+
+CheckControl.propTypes = {
+  onSubmitEdit: PropTypes.func,
+  title: PropTypes.string,
+};
+
+export default CheckControl;

package/admin/src/components/Container/index.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 18px 30px;
+`;
+
+export default Container;

package/admin/src/components/ContainerFluid/index.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Container } from 'reactstrap';
+
+const ContainerFluid = styled(Container)`
+  padding: 0;
+`;
+
+ContainerFluid.defaultProps = {
+  fluid: true,
+};
+
+export default ContainerFluid;

package/admin/src/components/ControlsWrapper/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const ControlsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 1px;
+`;
+
+export default ControlsWrapper;

package/admin/src/components/DragLayer/Wrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1051;
+  pointer-events: none;
+`;
+
+export default Wrapper;

package/admin/src/components/DragLayer/index.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useDragLayer } from 'react-dnd';
+import { Checkbox } from '@buffetjs/core';
+import { ItemTypes } from '../../utils';
+import CardControlsWrapper from '../CardControlsWrapper';
+import CardImgWrapper from '../CardImgWrapper';
+import CardPreview from '../CardPreview';
+import Border from '../CardBorder';
+import Wrapper from './Wrapper';
+
+function getItemStyles(initialOffset, currentOffset, mouseOffset) {
+  if (!initialOffset || !currentOffset) {
+    return { display: 'none' };
+  }
+
+  const { x, y } = mouseOffset;
+  const transform = `translate(${x}px, ${y}px)`;
+
+  return {
+    transform,
+    WebkitTransform: transform,
+  };
+}
+
+const DragLayer = () => {
+  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
+    monitor => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+      mouseOffset: monitor.getClientOffset(),
+    })
+  );
+
+  const renderItem = () => {
+    switch (itemType) {
+      case ItemTypes.MEDIA_CARD: {
+        return (
+          <CardImgWrapper checked small>
+            <CardPreview url={item.url} type={item.fileType} withFileCaching />
+            <Border color="mediumBlue" shown />
+            <CardControlsWrapper leftAlign className="card-control-wrapper">
+              <Checkbox name="id" onChange={() => {}} onClick={() => {}} value />
+            </CardControlsWrapper>
+          </CardImgWrapper>
+        );
+      }
+      default:
+        return null;
+    }
+  };
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return (
+    <Wrapper>
+      <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
+        {renderItem()}
+      </div>
+    </Wrapper>
+  );
+};
+
+export default DragLayer;

package/admin/src/components/DropdownButton/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
+
+const DropdownButton = styled(props => (
+  <Text
+    as="button"
+    fontWeight="semiBold"
+    color={props.isActive ? 'mediumBlue' : 'greyDark'}
+    {...props}
+  />
+))`
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  background-color: ${({ theme }) => theme.main.colors.white};
+  border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+
+  > svg + span,
+  > span + svg {
+    margin-left: 10px;
+  }
+  > svg g {
+    stroke: ${({ theme }) => theme.main.colors.greyDark};
+  }
+
+  ${({ isActive, theme }) =>
+    isActive
+      ? `
+        background-color: ${theme.main.colors.lightBlue};
+        border: 1px solid ${theme.main.colors.darkBlue};
+        color: ${theme.main.colors.mediumBlue};
+        > svg g {
+          stroke: ${theme.main.colors.mediumBlue};
+        }
+      `
+      : `
+        &:hover {
+          background-color: ${theme.main.colors.lightestGrey};
+        }
+      `}
+`;
+
+DropdownButton.defaultProps = {
+  isActive: false,
+  type: 'button',
+};
+
+DropdownButton.propTypes = {
+  isActive: PropTypes.bool,
+  type: PropTypes.string,
+  ...themePropTypes,
+};
+
+export default DropdownButton;

package/admin/src/components/DropdownSection/index.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const DropdownSection = styled.div`
+  display: none;
+  position: absolute;
+  top: 38px;
+  left: 0;
+  z-index: 1046;
+  background-color: ${({ theme }) => theme.main.colors.white};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};
+  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.greyAlpha};
+  ${({ isOpen }) => isOpen && 'display: block;'}
+`;
+
+DropdownSection.defaultProps = {
+  isOpen: false,
+};
+
+DropdownSection.propTypes = {
+  isOpen: PropTypes.bool,
+  ...themePropTypes,
+};
+
+export default DropdownSection;

package/admin/src/components/Duration/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
+
+import formatDuration from './utils/formatDuration';
+
+const Duration = styled(({ duration, ...rest }) => (
+  <Text {...rest} color="white" fontSize="md" fontWeight="semiBold">
+    {formatDuration(duration)}
+  </Text>
+))`
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  padding: 3px 5px;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  background-color: ${({ theme }) => theme.main.colors.black};
+`;
+
+Duration.propTypes = {
+  ...themePropTypes,
+};
+
+export default Duration;

package/admin/src/components/Duration/utils/formatDuration.js

@@ -0,0 +1,13 @@
+import moment from 'moment';
+
+const formatDuration = seconds => {
+  const duration = moment('1900-01-01 00:00:00').add(seconds, 'seconds');
+
+  if (seconds >= 3600) {
+    return duration.format('HH:mm:ss');
+  }
+
+  return duration.format('mm:ss');
+};
+
+export default formatDuration;

package/admin/src/components/EditForm/CropWrapper.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const CropWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+  }
+`;
+
+export default CropWrapper;

package/admin/src/components/EditForm/ErrorMessage.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+import CardErrorMessage from '../CardErrorMessage';
+
+const ErrorMessage = styled(CardErrorMessage)`
+  margin-top: 11px;
+  margin-bottom: 18px;
+`;
+
+export default ErrorMessage;

package/admin/src/components/EditForm/FileDetailsBox.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { dateFormats, dateToUtcTime } from 'strapi-helper-plugin';
+import { get } from 'lodash';
+import { useIntl } from 'react-intl';
+import { Text, Flex } from '@buffetjs/core';
+
+import { formatBytes, getTrad } from '../../utils';
+
+import FileDetailsBoxWrapper from './FileDetailsBoxWrapper';
+
+const FileDetailsBox = ({ file }) => {
+  const { formatMessage } = useIntl();
+  const fileSize = file.mime ? get(file, 'size', 0) : get(file, 'size', 0) / 1000;
+  const sections = [
+    {
+      key: 0,
+      rows: [
+        { label: 'modal.file-details.size', value: formatBytes(fileSize, 0) },
+        {
+          label: 'modal.file-details.date',
+          value: file.created_at ? dateToUtcTime(file.created_at).format(dateFormats.date) : '-',
+        },
+      ],
+    },
+    {
+      key: 1,
+      type: 'spacer',
+    },
+    {
+      key: 2,
+      rows: [
+        {
+          label: 'modal.file-details.dimensions',
+          value: file.width ? `${file.width}×${file.height}` : '-',
+        },
+        {
+          label: 'modal.file-details.extension',
+          value: file.ext ? file.ext.replace('.', '') : '-',
+          textTransform: 'uppercase',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <FileDetailsBoxWrapper>
+      {sections.map(({ key, rows, type }) => {
+        if (type === 'spacer') {
+          return (
+            <section key={key}>
+              <Text lineHeight="18px">&nbsp;</Text>
+            </section>
+          );
+        }
+
+        return (
+          <Flex justifyContent="space-between" key={key}>
+            {rows.map(rowItem => {
+              return (
+                <div key={rowItem.label} style={{ width: '50%' }}>
+                  <Text color="grey" fontWeight="bold" textTransform="capitalize" lineHeight="18px">
+                    {formatMessage({ id: getTrad(rowItem.label) })}
+                  </Text>
+                  <Text color="grey" textTransform={rowItem.textTransform || ''} lineHeight="18px">
+                    {rowItem.value}
+                  </Text>
+                </div>
+              );
+            })}
+          </Flex>
+        );
+      })}
+    </FileDetailsBoxWrapper>
+  );
+};
+
+FileDetailsBox.defaultProps = {
+  file: {
+    size: 0,
+  },
+};
+
+FileDetailsBox.propTypes = {
+  file: PropTypes.shape({
+    mime: PropTypes.string,
+    created_at: PropTypes.string,
+    ext: PropTypes.string,
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    size: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }),
+};
+
+export default FileDetailsBox;

package/admin/src/components/EditForm/FileDetailsBoxWrapper.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const FileDetailsBoxWrapper = styled.div`
+  width: 100%;
+  min-height: 119px;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.main.colors.lightGrey};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+`;
+
+FileDetailsBoxWrapper.propTypes = themePropTypes;
+
+export default FileDetailsBoxWrapper;