@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.34

package/src/components/media/MediaDialog.jsx

@@ -0,0 +1,596 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import ActionDelete from '@mui/icons-material/Delete';
+
+const log = debug('@pie-lib:editable-html:plugins:media:dialog');
+
+const matchYoutubeUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+
+  const p =
+    /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+  if (url.match(p)) {
+    return url.match(p)[1];
+  }
+  return false;
+};
+
+const matchVimeoUrl = (url) =>
+  url &&
+  /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(
+    url,
+  );
+
+const matchDriveUrl = (url) =>
+  url && /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)/.test(url);
+
+const matchSoundCloudUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+
+  const regexp = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
+  return url.match(regexp) && url.match(regexp)[2];
+};
+
+const makeApiRequest = (url) => {
+  return new Promise((resolve) => {
+    try {
+      fetch(`https://soundcloud.com/oembed?format=json&url=${url}`)
+        .then((response) => response.json())
+        .then((json) => {
+          const d = document.createElement('div');
+
+          d.innerHTML = json.html;
+
+          const iframe = d.querySelector('iframe');
+
+          resolve(iframe.src);
+        })
+        .catch((err) => {
+          resolve('');
+          log(err);
+        });
+    } catch (err) {
+      resolve('');
+    }
+  });
+};
+
+const typeMap = {
+  video: 'Video',
+  audio: 'Audio',
+};
+
+const tabsTypeMap = {
+  uploadFile: 'upload-file',
+  insertUrl: 'insert-url',
+};
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiDialog-paper': {
+    minWidth: '500px',
+  },
+}));
+
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  padding: 0,
+}));
+
+const StyledRow = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'space-between',
+}));
+
+const StyledUploadInput = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+}));
+
+const StyledInput = styled('input')(({ theme }) => ({}));
+
+const StyledError = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+  color: theme.palette.error.main,
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  marginLeft: theme.spacing(1.5),
+}));
+
+export class MediaDialog extends React.Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    edit: PropTypes.bool,
+    disablePortal: PropTypes.bool,
+    handleClose: PropTypes.func,
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func,
+      delete: PropTypes.func,
+    }),
+    type: PropTypes.string,
+    src: PropTypes.string,
+    url: PropTypes.string,
+    urlToUse: PropTypes.string,
+    starts: PropTypes.number,
+    ends: PropTypes.number,
+    height: PropTypes.number,
+    width: PropTypes.number,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { ends, height, src, starts, type, uploadSoundSupport, url, urlToUse, width } = props;
+    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' && !src;
+
+    this.state = {
+      ends: ends || 0,
+      url: url,
+      urlToUse: urlToUse,
+      formattedUrl: src,
+      height: height || 315,
+      invalid: false,
+      starts: starts || 0,
+      width: width || 560,
+      // default selected tab should be upload file if available
+      tabValue: showUploadFile ? tabsTypeMap.uploadFile : tabsTypeMap.insertUrl,
+      fileUpload: {
+        error: null,
+        loading: false,
+        scheduled: false,
+        url: '',
+        mimeType: '',
+      },
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.url) {
+      this.urlChange({
+        target: {
+          value: this.props.url,
+        },
+      });
+    }
+  }
+
+  formatUrl = () => {
+    const { url, urlToUse, starts, ends } = this.state;
+    const isYoutube = matchYoutubeUrl(url);
+    const isVimeo = matchVimeoUrl(url);
+    let formattedUrl = urlToUse;
+
+    if ((isYoutube || isVimeo) && urlToUse) {
+      const params = [];
+
+      let paramName;
+      let paramStart;
+
+      switch (true) {
+        case isVimeo:
+          paramName = 't';
+          paramStart = '#';
+          break;
+        case isYoutube:
+          paramName = 'start';
+          paramStart = '?';
+          break;
+        default:
+          paramName = 'start';
+          paramStart = '?';
+      }
+
+      if (starts) {
+        params.push(`${paramName}=${starts}`);
+      }
+
+      if (ends) {
+        params.push(`end=${ends}`);
+      }
+
+      formattedUrl = `${urlToUse}${params.length ? paramStart : ''}${params.join('&')}`;
+    }
+
+    const callback = () => this.setState({ formattedUrl, updating: false });
+
+    this.setState({ formattedUrl: null, updating: true }, callback);
+  };
+
+  handleStateChange = (newState) => this.setState(newState, this.formatUrl);
+
+  checkAudio = (value) => {
+    if (matchSoundCloudUrl(value)) {
+      makeApiRequest(value)
+        .then((urlToUse) => {
+          this.handleStateChange({
+            urlToUse,
+            invalid: !urlToUse,
+            url: value,
+          });
+        })
+        .catch(log);
+    }
+  };
+
+  checkVideo = (value) => {
+    if (matchYoutubeUrl(value)) {
+      const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+      const match = value.match(regExp);
+      const id = match[2];
+      const urlToUse = `https://youtube.com/embed/${id}`;
+
+      log('is youtube');
+
+      this.handleStateChange({
+        urlToUse,
+        url: value,
+        invalid: false,
+      });
+    }
+
+    if (matchVimeoUrl(value)) {
+      const id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
+      const urlToUse = `https://player.vimeo.com/video/${id}`;
+
+      log('is vimeo');
+
+      this.handleStateChange({
+        urlToUse,
+        url: value,
+        ends: null,
+        invalid: false,
+      });
+    }
+
+    if (matchDriveUrl(value)) {
+      // https://drive.google.com/file/d/11QkK_gUO068amNvZBm9cxZpKX74WYb8q/view
+      const id = value.replace(
+        /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)\/.*/,
+        '$1',
+      );
+      const urlToUse = `https://drive.google.com/file/d/${id}/preview`;
+
+      log('is google drive');
+
+      this.handleStateChange({
+        urlToUse,
+        url: value,
+        ends: null,
+        invalid: false,
+      });
+    }
+  };
+
+  urlChange = (e) => {
+    const { value } = e.target || {};
+    const { type } = this.props;
+
+    if (type && type === 'audio') {
+      this.checkAudio(value);
+      return;
+    } else if (type && type === 'video') {
+      this.checkVideo(value);
+      return;
+    }
+
+    this.handleStateChange({
+      urlToUse: null,
+      url: null,
+      invalid: true,
+    });
+  };
+
+  changeHandler = (type) => (e) => this.handleStateChange({ [type]: e.target.value });
+
+  handleDone = (val) => {
+    const { handleClose } = this.props;
+    const { tabValue, fileUpload } = this.state;
+    const isInsertURL = tabValue === tabsTypeMap.insertUrl;
+
+    if (!val) {
+      if (fileUpload.url) {
+        this.handleRemoveFile();
+      }
+
+      handleClose(val);
+      return;
+    }
+
+    if (isInsertURL) {
+      const { ends, height, url, urlToUse, formattedUrl, starts, width } = this.state;
+
+      handleClose(val, {
+        tag: 'iframe',
+        ends,
+        height,
+        starts,
+        width,
+        url,
+        urlToUse,
+        src: formattedUrl,
+      });
+      return;
+    }
+
+    if (!fileUpload.loading) {
+      handleClose(val, {
+        tag: 'audio',
+        src: fileUpload.url,
+      });
+      return;
+    }
+
+    this.setState({
+      fileUpload: {
+        ...fileUpload,
+        scheduled: true,
+      },
+    });
+  };
+
+  handleUploadFile = async (e) => {
+    e.preventDefault();
+
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        error: null,
+        loading: true,
+      },
+    });
+
+    const fileChosen = e.target.files[0];
+
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const dataURL = reader.result;
+
+      this.setState({
+        fileUpload: {
+          ...this.state.fileUpload,
+          url: dataURL,
+          mimeType: fileChosen.type,
+        },
+      });
+    };
+    reader.readAsDataURL(fileChosen);
+
+    this.props.uploadSoundSupport.add({
+      fileChosen,
+      done: (err, src) => {
+        log('done: err:', err);
+        if (err) {
+          //eslint-disable-next-line
+          console.log(err);
+          this.setState({
+            fileUpload: {
+              ...this.state.fileUpload,
+              scheduled: false,
+              loading: false,
+              error: err,
+            },
+          });
+          return;
+        }
+
+        const { fileUpload } = this.state;
+        const callback = fileUpload && fileUpload.scheduled ? this.handleDone.bind(this, true) : undefined;
+
+        this.setState(
+          {
+            fileUpload: {
+              ...fileUpload,
+              scheduled: false,
+              loading: false,
+              url: src,
+            },
+          },
+          callback,
+        );
+      },
+    });
+  };
+
+  handleRemoveFile = async () => {
+    this.props.uploadSoundSupport.delete(this.state.fileUpload.url, (err) => {
+      if (err) {
+        //eslint-disable-next-line
+        console.log(err);
+        this.setState({
+          fileUpload: {
+            ...this.state.fileUpload,
+            error: err,
+          },
+        });
+      }
+    });
+
+    // we should put it inside uploadSoundSupport.delete but we can leave it here for testing purposes
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        loading: false,
+        url: '',
+        mimeType: '',
+      },
+    });
+  };
+
+  render() {
+    const { open, disablePortal, type, edit, uploadSoundSupport } = this.props;
+    const { ends, height, invalid, starts, width, url, mimeType, formattedUrl, updating, tabValue, fileUpload } =
+      this.state;
+    const isYoutube = matchYoutubeUrl(url);
+    const isInsertURL = tabValue === tabsTypeMap.insertUrl;
+    const isUploadMedia = tabValue === tabsTypeMap.uploadFile;
+    const submitIsDisabled = isInsertURL
+      ? invalid || url === null || url === undefined
+      : !fileUpload.url || fileUpload.scheduled;
+    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video';
+
+    return (
+      <StyledDialog
+        disablePortal={disablePortal}
+        open={open}
+        onClose={() => this.handleDone(false)}
+        aria-labelledby="form-dialog-title"
+      >
+        <DialogTitle id="form-dialog-title">Insert {typeMap[type]}</DialogTitle>
+        <DialogContent>
+          <div>
+            <StyledRow>
+              <MuiTabs
+                indicatorColor="primary"
+                value={tabValue}
+                onChange={(event, value) => {
+                  this.setState({ tabValue: value });
+                }}
+              >
+                {showUploadFile ? <MuiTab value={tabsTypeMap.uploadFile} label="Upload file" /> : null}
+                <MuiTab
+                  value={tabsTypeMap.insertUrl}
+                  label={type === 'video' ? 'Insert YouTube, Vimeo, or Google Drive URL' : 'Insert SoundCloud URL'}
+                />
+              </MuiTabs>
+            </StyledRow>
+            {isInsertURL && (
+              <div>
+                <TextField
+                  autoFocus
+                  error={invalid}
+                  helperText={invalid ? 'Invalid URL' : ''}
+                  margin="dense"
+                  id="name"
+                  label="URL"
+                  placeholder={`Paste URL of ${type}...`}
+                  type="text"
+                  onChange={this.urlChange}
+                  value={url}
+                  fullWidth
+                />
+                {type === 'video' && (
+                  <StyledDialogContent>
+                    <DialogContentText>Video Properties</DialogContentText>
+                    <TextField
+                      autoFocus
+                      margin="dense"
+                      id="width"
+                      label="Width"
+                      type="number"
+                      placeholder="Width"
+                      value={width}
+                      onChange={this.changeHandler('width')}
+                    />
+                    <TextField
+                      autoFocus
+                      margin="dense"
+                      id="height"
+                      label="Height"
+                      type="number"
+                      placeholder="Height"
+                      value={height}
+                      onChange={this.changeHandler('height')}
+                    />
+                  </StyledDialogContent>
+                )}
+                {formattedUrl && (
+                  <iframe
+                    width={width}
+                    height={height}
+                    src={formattedUrl}
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                  />
+                )}
+                {type === 'video' && (formattedUrl || updating) && !invalid && (
+                  <React.Fragment>
+                    <StyledDialogContent>
+                      <TextField
+                        autoFocus
+                        margin="dense"
+                        id="starts"
+                        label="Starts"
+                        type="number"
+                        placeholder="Starts"
+                        value={starts}
+                        onChange={this.changeHandler('starts')}
+                      />
+                      {isYoutube && (
+                        <TextField
+                          autoFocus
+                          margin="dense"
+                          id="ends"
+                          label="Ends"
+                          type="number"
+                          placeholder="Ends"
+                          value={ends}
+                          onChange={this.changeHandler('ends')}
+                        />
+                      )}
+                    </StyledDialogContent>
+                  </React.Fragment>
+                )}
+              </div>
+            )}
+            {isUploadMedia && (
+              <StyledUploadInput>
+                <div>
+                  {fileUpload.url ? (
+                    <>
+                      <StyledRow>
+                        <audio controls="controls" controlsList="nodownload">
+                          <source type={mimeType} src={fileUpload.url} />
+                        </audio>
+                        <StyledIconButton aria-label="delete" onClick={this.handleRemoveFile}>
+                          <ActionDelete />
+                        </StyledIconButton>
+                      </StyledRow>
+                      {!fileUpload.scheduled && fileUpload.loading ? (
+                        <Typography variant="subheading">Loading...</Typography>
+                      ) : null}
+                      {fileUpload.scheduled ? (
+                        <Typography variant="subheading">
+                          Waiting for Upload to finish, then inserting item...
+                        </Typography>
+                      ) : null}
+                    </>
+                  ) : !fileUpload.loading ? (
+                    <StyledInput accept="audio/*" onChange={this.handleUploadFile} type="file" />
+                  ) : null}
+                  {!!fileUpload.error && <StyledError variant="caption">{fileUpload.error}</StyledError>}
+                </div>
+              </StyledUploadInput>
+            )}
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => this.handleDone(false)} color="primary">
+            Cancel
+          </Button>
+          <Button disabled={submitIsDisabled} onClick={() => this.handleDone(true)} color="primary">
+            {edit ? 'Update' : 'Insert'}
+          </Button>
+        </DialogActions>
+      </StyledDialog>
+    );
+  }
+}
+
+export default MediaDialog;

package/src/components/media/MediaToolbar.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledRoot = styled('span')(({ theme }) => ({
+  position: 'relative',
+  bottom: '5px',
+  left: 0,
+  width: '100%',
+  background: theme.palette.common.white,
+  display: 'inline-flex',
+  padding: '5px',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+}));
+
+const StyledEditContainer = styled('span')(({ theme }) => ({
+  cursor: 'pointer',
+  flex: 3,
+  border: `solid ${theme.palette.common.black}`,
+  textAlign: 'right',
+  borderWidth: '0 2px 0 0',
+  marginRight: '5px',
+  paddingRight: '5px',
+}));
+
+const StyledRemoveContainer = styled('span')({
+  cursor: 'pointer',
+});
+
+class MediaToolbar extends React.Component {
+  static propTypes = {
+    onEdit: PropTypes.func,
+    hideEdit: PropTypes.bool,
+    onRemove: PropTypes.func,
+  };
+
+  render() {
+    const { hideEdit, onEdit, onRemove } = this.props;
+
+    return (
+      <StyledRoot>
+        {hideEdit ? null : <StyledEditContainer onClick={onEdit}>Edit Settings</StyledEditContainer>}
+        <StyledRemoveContainer onClick={onRemove}>Remove</StyledRemoveContainer>
+      </StyledRoot>
+    );
+  }
+}
+
+export default MediaToolbar;

package/src/components/media/MediaWrapper.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledWrapper = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'editor',
+})(({ editor }) => ({
+  position: 'relative',
+  ...(editor && {
+    display: 'inline-block',
+    overflow: 'hidden',
+  }),
+}));
+
+class MediaWrapper extends React.Component {
+  static propTypes = {
+    children: PropTypes.array,
+    editor: PropTypes.bool,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  };
+
+  render() {
+    const { editor, children, width, ...rest } = this.props;
+
+    return (
+      <StyledWrapper
+        editor={editor}
+        {...rest}
+        style={{
+          width: width || 300,
+        }}
+      >
+        {children}
+      </StyledWrapper>
+    );
+  }
+}
+
+export default MediaWrapper;