@akemona-org/strapi-plugin-upload 3.7.0

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Carret, useGlobalContext } from 'strapi-helper-plugin';
+import { Picker } from '@buffetjs/core';
+import { getTrad, getFileModelTimestamps } from '../../utils';
+
+import SortList from '../SortList';
+
+const SortPicker = ({ onChange, value }) => {
+  const { plugins } = useGlobalContext();
+  const [created_at, updated_at] = getFileModelTimestamps(plugins);
+  const orders = {
+    created_at_desc: `${created_at}:DESC`,
+    created_at_asc: `${created_at}:ASC`,
+    name_asc: 'name:ASC',
+    name_desc: 'name:DESC',
+    updated_at_desc: `${updated_at}:DESC`,
+    updated_at_asc: `${updated_at}:ASC`,
+  };
+
+  return (
+    <Picker
+      renderButtonContent={isOpen => (
+        <>
+          <FormattedMessage id={getTrad('sort.label')} />
+          <Carret isUp={isOpen} fill={isOpen ? '#007EFF' : '#292b2c'} />
+        </>
+      )}
+      renderSectionContent={onToggle => (
+        <SortList
+          list={orders}
+          selectedItem={value}
+          onClick={e => {
+            onChange(e);
+            onToggle();
+          }}
+        />
+      )}
+    />
+  );
+};
+
+SortPicker.defaultProps = {
+  onChange: () => {},
+  value: null,
+};
+
+SortPicker.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};
+
+export default SortPicker;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  padding: 0 5px;
+  margin-top: 6px;
+  height: 14px;
+  background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+`;
+
+Wrapper.propTypes = {
+  ...themePropTypes,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+
+import Wrapper from './Wrapper';
+
+const Tag = ({ label }) => {
+  return (
+    <Wrapper>
+      <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
+        {label}
+      </Text>
+    </Wrapper>
+  );
+};
+
+Tag.defaultProps = {
+  label: null,
+};
+
+Tag.propTypes = {
+  label: PropTypes.string,
+};
+
+export default Tag;

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

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import InputFileModal from '../InputFileModal';
+import InputUploadURL from '../InputUploadURL';
+import ModalNavWrapper from '../ModalNavWrapper';
+import ModalSection from '../ModalSection';
+
+const UploadForm = ({
+  addFilesToUpload,
+  filesToDownload,
+  formErrors,
+  onChange,
+  setShouldDisplayNextButton,
+}) => {
+  useEffect(() => {
+    return () => {
+      setShouldDisplayNextButton(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleClick = to => {
+    setShouldDisplayNextButton(to === 'url');
+  };
+
+  const links = [
+    { to: 'computer', label: 'computer', isDisabled: false, onClick: handleClick },
+    { to: 'url', label: 'url', isDisabled: false, onClick: handleClick },
+  ];
+
+  return (
+    <ModalNavWrapper links={links}>
+      {to => (
+        <ModalSection>
+          {to === 'computer' && <InputFileModal onChange={addFilesToUpload} />}
+          {to === 'url' && (
+            <InputUploadURL errors={formErrors} onChange={onChange} value={filesToDownload} />
+          )}
+        </ModalSection>
+      )}
+    </ModalNavWrapper>
+  );
+};
+
+UploadForm.defaultProps = {
+  addFilesToUpload: () => {},
+  filesToDownload: [],
+  formErrors: null,
+  onChange: () => {},
+  setShouldDisplayNextButton: () => {},
+};
+
+UploadForm.propTypes = {
+  addFilesToUpload: PropTypes.func,
+  filesToDownload: PropTypes.arrayOf(PropTypes.string),
+  formErrors: PropTypes.object,
+  onChange: PropTypes.func,
+  setShouldDisplayNextButton: PropTypes.func,
+};
+
+export default UploadForm;

package/admin/src/components/UploadList/ButtonWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ButtonWrapper = styled.div`
+  padding-top: 28px;
+`;
+
+export default ButtonWrapper;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import ContainerFluid from '../ContainerFluid';
+
+const Container = styled(ContainerFluid)`
+  margin-bottom: 3px;
+  padding-top: 15px;
+  max-height: 357px;
+`;
+
+export default Container;

package/admin/src/components/UploadList/CustomModalSection.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import ModalSection from '../ModalSection';
+
+const CustomModalSection = styled(ModalSection)`
+  overflow: auto;
+`;
+
+export default CustomModalSection;

package/admin/src/components/UploadList/ListTitle.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import IntlText from '../IntlText';
+
+const ListTitle = styled(props => <IntlText fontSize="md" fontWeight="bold" {...props} />)`
+  margin-bottom: 3px;
+`;
+
+export default ListTitle;

package/admin/src/components/UploadList/ListTitleWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ListTitle = styled.div`
+  margin-top: 34px;
+`;
+
+export default ListTitle;

package/admin/src/components/UploadList/RowItem.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pick } from 'lodash';
+
+import Card from '../Card';
+import CardControl from '../CardControl';
+import CardControlsWrapper from '../CardControlsWrapper';
+import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
+
+const RowItem = ({
+  file,
+  fileInfo,
+  hasError,
+  errorMessage,
+  isDownloading,
+  isUploading,
+  onClick,
+  onClickDeleteFileToUpload,
+  onClickEdit,
+  originalIndex,
+}) => {
+  const url = file ? URL.createObjectURL(file) : null;
+
+  const handleClick = () => {
+    onClick(originalIndex);
+  };
+
+  const handleClickDelete = () => {
+    onClickDeleteFileToUpload(originalIndex);
+  };
+
+  const handleClickEdit = () => {
+    onClickEdit(originalIndex);
+  };
+
+  let fileSize = null;
+
+  if (file) {
+    fileSize = file.mime ? file.type : file.size / 1000;
+  }
+
+  const shouldDisplayControls = !isUploading && !isDownloading && file !== null;
+  const shouldDisplayTrashIcon = file === null && hasError;
+
+  const cardOptions = {
+    ...pick(fileInfo, ['ext', 'name', 'mime', 'height', 'width', 'previewUrl', 'id']),
+    small: true,
+    errorMessage,
+    hasError,
+    type: file ? file.type : null,
+    size: fileSize,
+    url,
+    withFileCaching: false,
+    withoutFileInfo: isDownloading || (file === null && hasError),
+  };
+
+  return (
+    <div className="col-xs-12 col-md-6 col-xl-3" key={originalIndex}>
+      <Card options={cardOptions}>
+        {(isUploading || isDownloading) && <InfiniteLoadingIndicator onClick={handleClick} />}
+        {shouldDisplayTrashIcon && (
+          <CardControlsWrapper className="card-control-wrapper">
+            <CardControl title="delete" onClick={handleClickDelete} type="trash-alt" small />
+          </CardControlsWrapper>
+        )}
+        {shouldDisplayControls && (
+          <CardControlsWrapper className="card-control-wrapper">
+            <CardControl title="delete" onClick={handleClickDelete} type="trash-alt" small />
+            <CardControl title="edit" onClick={handleClickEdit} small />
+          </CardControlsWrapper>
+        )}
+      </Card>
+    </div>
+  );
+};
+
+RowItem.defaultProps = {
+  file: null,
+  errorMessage: null,
+  isDownloading: false,
+};
+
+RowItem.propTypes = {
+  file: PropTypes.object,
+  fileInfo: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  hasError: PropTypes.bool.isRequired,
+  errorMessage: PropTypes.string,
+  isDownloading: PropTypes.bool,
+  isUploading: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onClickDeleteFileToUpload: PropTypes.func.isRequired,
+  onClickEdit: PropTypes.func.isRequired,
+  originalIndex: PropTypes.number.isRequired,
+};
+
+export default RowItem;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@buffetjs/core';
+import { createMatrix, getTrad } from '../../utils';
+import ModalSection from '../ModalSection';
+import IntlText from '../IntlText';
+import Container from './Container';
+import ButtonWrapper from './ButtonWrapper';
+import RowItem from './RowItem';
+import ListTitle from './ListTitle';
+import ListTitleWrapper from './ListTitleWrapper';
+import CustomModalSection from './CustomModalSection';
+
+const UploadList = ({
+  filesToUpload,
+  onClickCancelUpload,
+  onClickDeleteFileToUpload,
+  onClickEditNewFile,
+  onGoToAddBrowseFiles,
+}) => {
+  const matrix = createMatrix(filesToUpload);
+  const filesToUploadLength = filesToUpload.length;
+  const titleId = `modal.upload-list.sub-header-title.${
+    filesToUploadLength > 1 ? 'plural' : 'singular'
+  }`;
+
+  return (
+    <>
+      <ModalSection justifyContent="space-between">
+        <ListTitleWrapper>
+          <ListTitle id={getTrad(titleId)} values={{ number: filesToUploadLength }} />
+          <IntlText
+            id={getTrad('modal.upload-list.sub-header-subtitle')}
+            values={{ number: filesToUploadLength }}
+            fontSize="sm"
+            color="grey"
+          />
+        </ListTitleWrapper>
+        <ButtonWrapper>
+          <Button type="button" color="primary" onClick={onGoToAddBrowseFiles}>
+            <IntlText
+              id={getTrad('modal.upload-list.sub-header.button')}
+              fontWeight="bold"
+              color="white"
+            />
+          </Button>
+        </ButtonWrapper>
+      </ModalSection>
+      <CustomModalSection>
+        <Container>
+          {matrix.map(({ key, rowContent }) => {
+            return (
+              <div className="row" key={key}>
+                {rowContent.map(data => {
+                  return (
+                    <RowItem
+                      {...data}
+                      onClick={onClickCancelUpload}
+                      onClickDeleteFileToUpload={onClickDeleteFileToUpload}
+                      onClickEdit={onClickEditNewFile}
+                      key={data.originalIndex}
+                    />
+                  );
+                })}
+              </div>
+            );
+          })}
+        </Container>
+      </CustomModalSection>
+    </>
+  );
+};
+
+UploadList.defaultProps = {
+  filesToUpload: [],
+  onClickCancelUpload: () => {},
+  onClickDeleteFileToUpload: () => {},
+  onClickEditNewFile: () => {},
+  onGoToAddBrowseFiles: () => {},
+};
+
+UploadList.propTypes = {
+  filesToUpload: PropTypes.array,
+  onClickCancelUpload: PropTypes.func,
+  onClickDeleteFileToUpload: PropTypes.func,
+  onClickEditNewFile: PropTypes.func,
+  onGoToAddBrowseFiles: PropTypes.func,
+};
+
+export default UploadList;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  video {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    margin: auto;
+    outline: 0;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,57 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import PlayIcon from '../PlayIcon';
+import Duration from '../Duration';
+import Wrapper from './Wrapper';
+
+const VideoPlayer = ({ src }) => {
+  const [duration, setDuration] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const videoRef = useRef();
+
+  const togglePlay = () => {
+    if (isPlaying) {
+      videoRef.current.pause();
+      // Change isPlaying here too because onPause handler is only called on controls click
+      setIsPlaying(false);
+    } else {
+      videoRef.current.play();
+    }
+  };
+
+  return (
+    <Wrapper onClick={togglePlay}>
+      <video
+        controls={isPlaying}
+        ref={videoRef}
+        src={src}
+        crossOrigin="anonymous"
+        onLoadedData={({ target: { duration } }) => {
+          setDuration(duration);
+        }}
+        onPlay={() => {
+          setIsPlaying(true);
+        }}
+        onPause={() => {
+          setIsPlaying(false);
+        }}
+      >
+        <track default kind="captions" srcLang="en" src="" />
+      </video>
+      {!isPlaying && <PlayIcon />}
+      <Duration duration={duration} />
+    </Wrapper>
+  );
+};
+
+VideoPlayer.defaultProps = {
+  src: null,
+};
+
+VideoPlayer.propTypes = {
+  src: PropTypes.string,
+};
+
+export default VideoPlayer;

package/admin/src/components/VideoPreview/CanvasWrapper.js

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

package/admin/src/components/VideoPreview/Thumbnail.js

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

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  video {
+    display: none;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,165 @@
+import React, { useEffect, useReducer, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Duration from '../Duration';
+import LoadingIndicator from '../LoadingIndicator';
+import PlayIcon from '../PlayIcon';
+import Wrapper from './Wrapper';
+import CanvasWrapper from './CanvasWrapper';
+import Thumbnail from './Thumbnail';
+import reducer, { initialState } from './reducer';
+import getTrad from '../../utils/getTrad';
+
+const EmptyPreview = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${({ theme }) => theme.main.sizes.fonts.xs};
+  color: ${({ theme }) => theme.main.colors.grey};
+`;
+
+const VideoPreview = ({ hasIcon, previewUrl, src }) => {
+  const { formatMessage } = useIntl();
+  const [reducerState, dispatch] = useReducer(reducer, initialState);
+  const {
+    duration,
+    dataLoaded,
+    isHover,
+    metadataLoaded,
+    snapshot,
+    seeked,
+    isError,
+  } = reducerState.toJS();
+
+  // Adapted from https://github.com/brothatru/react-video-thumbnail/blob/master/src/components/VideoThumbnail.js
+  // And from https://github.com/soupette/poc-video-preview
+  const canvasRef = useRef();
+  const videoRef = useRef();
+
+  useEffect(() => {
+    const getSnapshot = () => {
+      try {
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+
+        canvas.height = video.videoHeight;
+        canvas.width = video.videoWidth;
+        canvas.getContext('2d').drawImage(video, 0, 0);
+
+        const thumbnail = canvas.toDataURL('image/png');
+
+        video.src = ''; // setting to empty string stops video from loading
+
+        dispatch({
+          type: 'SET_SNAPSHOT',
+          snapshot: thumbnail,
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    };
+
+    if (dataLoaded && metadataLoaded && videoRef.current) {
+      videoRef.current.currentTime = 0;
+
+      if (seeked && !snapshot) {
+        getSnapshot();
+      }
+    }
+  }, [dataLoaded, metadataLoaded, seeked, snapshot]);
+
+  if (isError) {
+    return (
+      <EmptyPreview>
+        <FormattedMessage id={getTrad('list.assets.not-supported-content')} />
+      </EmptyPreview>
+    );
+  }
+
+  return (
+    <Wrapper
+      // Specify isHover to prevent bad behavior when compo is under the cursor on modal open
+      onMouseEnter={() => {
+        dispatch({
+          type: 'SET_IS_HOVER',
+          isHover: true,
+        });
+      }}
+      onMouseLeave={() => {
+        dispatch({
+          type: 'SET_IS_HOVER',
+          isHover: false,
+        });
+      }}
+    >
+      {!snapshot && (
+        <LoadingIndicator
+          aria-label={formatMessage(
+            {
+              id: getTrad('list.assets.loading-asset'),
+            },
+            { path: src }
+          )}
+        />
+      )}
+
+      <CanvasWrapper>
+        {previewUrl ? (
+          <Thumbnail
+            src={previewUrl}
+            alt={formatMessage(
+              {
+                id: getTrad('list.assets.preview-asset'),
+              },
+              { path: src }
+            )}
+          />
+        ) : (
+          <>
+            <video
+              muted
+              ref={videoRef}
+              src={src}
+              onError={() => dispatch({ type: 'SET_ERROR', isError: true })}
+              onLoadedMetadata={() => {
+                dispatch({
+                  type: 'METADATA_LOADED',
+                });
+              }}
+              onLoadedData={({ target: { duration } }) => {
+                dispatch({
+                  type: 'DATA_LOADED',
+                  duration,
+                });
+              }}
+              onSeeked={() => {
+                dispatch({
+                  type: 'SEEKED',
+                });
+              }}
+            />
+            <canvas ref={canvasRef} />
+          </>
+        )}
+        <Duration duration={duration} />
+
+        {(hasIcon || isHover) && <PlayIcon small />}
+      </CanvasWrapper>
+    </Wrapper>
+  );
+};
+
+VideoPreview.defaultProps = {
+  hasIcon: false,
+  previewUrl: null,
+  src: null,
+};
+
+VideoPreview.propTypes = {
+  hasIcon: PropTypes.bool,
+  previewUrl: PropTypes.string,
+  src: PropTypes.string,
+};
+
+export default VideoPreview;