@performant-software/semantic-components 0.5.16-beta.0 → 0.5.16-beta.3

package/src/components/LazyMedia.js

@@ -0,0 +1,243 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type Node
+} from 'react';
+import { Icon } from 'semantic-ui-react';
+import { Trans } from 'react-i18next';
+import _ from 'underscore';
+import FileInputButton from './FileInputButton';
+import i18n from '../i18n/i18n';
+import LazyAudio from './LazyAudio';
+import LazyDocument from './LazyDocument';
+import LazyImage from './LazyImage';
+import LazyVideo from './LazyVideo';
+
+type Props = {
+  children?: Node,
+  contentType: string,
+  dimmable?: boolean,
+  downloadUrl?: string,
+  name?: string,
+  onUpload: (file: File) => void,
+  preview?: string,
+  size?: string,
+  src?: string
+};
+
+const ContentTypes = {
+  audio: 'audio',
+  image: 'image',
+  pdf: 'application/pdf',
+  video: 'video'
+};
+
+const WebContentTypes = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/bmp',
+  'video/m4v',
+  'video/mp4'
+];
+
+const LazyMedia: ComponentType<any> = (props: Props) => {
+  const [contentType, setContentType] = useState(props.contentType || '');
+  const [name, setName] = useState(props.name);
+  const [preview, setPreview] = useState(props.preview);
+  const [source, setSource] = useState(props.src);
+
+  /**
+   * Sets the file extension based on the name.
+   *
+   * @type {*}
+   */
+  const fileExtension = useMemo(() => {
+    let value;
+
+    if (name) {
+      value = name.split('.').pop();
+      value = value && value.toUpperCase();
+    }
+
+    return value;
+  }, [name]);
+
+  /**
+   * Sets the content type, name, preview, and source attributes. Also calls the onUpload prop.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onUpload = useCallback((files) => {
+    const file = _.first(files);
+
+    setContentType(file.type);
+    setName(file.name);
+    setPreview(null);
+
+    if (_.contains(WebContentTypes, file.type)
+      || file.type.startsWith(ContentTypes.audio)
+      || file.type === ContentTypes.pdf) {
+      setSource(URL.createObjectURL(file));
+    } else {
+      setSource(null);
+    }
+
+    props.onUpload(file);
+  }, [props.onUpload]);
+
+  /**
+   * Renders the child buttons.
+   *
+   * @type {unknown}
+   */
+  const renderChildren = useCallback(() => (
+    <>
+      { props.onUpload && (
+        <FileInputButton
+          color='orange'
+          content={i18n.t('Common.buttons.upload')}
+          icon='cloud upload'
+          onSelection={onUpload}
+        />
+      )}
+      { props.children }
+    </>
+  ));
+
+  /**
+   * Renders the media component.
+   *
+   * @type {(function(): *)|*}
+   */
+  const renderMedia = useCallback(() => {
+    if (contentType.startsWith(ContentTypes.image)) {
+      return (
+        <LazyImage
+          dimmable={props.dimmable}
+          download={props.downloadUrl}
+          preview={preview}
+          src={source}
+          size={props.size}
+        >
+          { renderChildren() }
+        </LazyImage>
+      );
+    }
+
+    if (contentType.startsWith(ContentTypes.video)) {
+      return (
+        <LazyVideo
+          dimmable={props.dimmable}
+          download={props.downloadUrl}
+          preview={preview}
+          src={source}
+          size={props.size}
+        >
+          { renderChildren() }
+        </LazyVideo>
+      );
+    }
+
+    if (contentType.startsWith(ContentTypes.audio)) {
+      return (
+        <LazyAudio
+          dimmable={props.dimmable}
+          download={props.downloadUrl}
+          preview={preview}
+          src={source}
+          size={props.size}
+        >
+          { renderChildren() }
+        </LazyAudio>
+      );
+    }
+
+    return (
+      <LazyDocument
+        dimmable={props.dimmable}
+        pdf={contentType === ContentTypes.pdf}
+        preview={preview}
+        src={source}
+        size={props.size}
+      >
+        { renderChildren() }
+      </LazyDocument>
+    );
+  }, [contentType, preview, source, props.dimmable, props.downloadUrl, props.size]);
+
+  /**
+   * Renders the upload message.
+   *
+   * @type {(function(): (null|*))|*}
+   */
+  const renderMessage = useCallback(() => {
+    if (!fileExtension) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Icon
+          name='info circle'
+        />
+        <span>
+          <Trans
+            components={{ bold: <strong /> }}
+            default='Your <bold>{{type}}</bold> has been received'
+            i18n={i18n}
+            i18nKey='LazyMedia.messages.uploaded'
+            values={{
+              type: fileExtension
+            }}
+          />
+        </span>
+      </div>
+    );
+  }, [fileExtension]);
+
+  /**
+   * Sets the content type, name, preview, and source.
+   */
+  useEffect(() => {
+    if (props.contentType) {
+      setContentType(props.contentType);
+    }
+
+    if (props.name) {
+      setName(props.name);
+    }
+
+    if (props.preview) {
+      setPreview(props.preview);
+    }
+
+    if (props.src) {
+      setSource(props.src);
+    } else {
+      setSource(null);
+    }
+  }, [props.contentType, props.name, props.preview, props.src]);
+
+  return (
+    <div
+      className='lazy-media'
+    >
+      { renderMedia() }
+      { renderMessage() }
+    </div>
+  );
+};
+
+LazyMedia.defaultProps = {
+  dimmable: true,
+  size: 'medium'
+};
+
+export default LazyMedia;

package/src/components/LazyVideo.js

@@ -12,6 +12,8 @@ import {
   Visibility
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import VideoPlayer from './VideoPlayer';
 import './LazyVideo.css';
 
@@ -19,19 +21,23 @@ type Props = {
   autoPlay?: boolean,
   children?: Node,
   dimmable: boolean,
+  download?: string,
   duration?: number,
   embedded?: boolean,
   icon?: string | Element<any>,
   image?: any,
+  name?: string,
   preview?: ?string,
   size?: string,
   src?: string
 };
 
 const LazyVideo = (props: Props) => {
-  const [visible, setVisible] = useState(false);
-  const [modal, setModal] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!(props.preview || props.src));
+  const [modal, setModal] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -63,24 +69,46 @@ const LazyVideo = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { props.preview && (
+          { !loaded && (
+            <LazyLoader
+              active
+              size={props.size}
+            />
+          )}
+          { !error && props.preview && (
             <Image
               {...props.image}
+              onError={() => {
+                setError(true);
+                setLoaded(true);
+              }}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
               src={props.preview}
               size={props.size}
             />
           )}
-          { !props.preview && props.src && (
+          { !error && !props.preview && props.src && (
             <Image
               {...props.image}
               size={props.size}
             >
               <video
+                onError={() => {
+                  setError(true);
+                  setLoaded(true);
+                }}
+                onLoadedData={() => {
+                  setError(false);
+                  setLoaded(true);
+                }}
                 src={props.src}
               />
             </Image>
           )}
-          { !props.preview && !props.src && (
+          { (error || (!props.preview && !props.src)) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -107,6 +135,13 @@ const LazyVideo = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>

package/src/components/PhotoViewer.js

@@ -1,9 +1,10 @@
 // @flow
 
-import React from 'react';
-import { Image, Modal } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import { Image, Message, Modal } from 'semantic-ui-react';
 import ModalContext from '../context/ModalContext';
 import './PhotoViewer.css';
+import i18n from '../i18n/i18n';
 
 type Props = {
   alt?: string,
@@ -13,29 +14,41 @@ type Props = {
   size?: string
 };
 
-const PhotoViewer = (props: Props) => (
-  <ModalContext.Consumer>
-    { (mountNode) => (
-      <Modal
-        centered={false}
-        className='photo-viewer'
-        closeIcon
-        mountNode={mountNode}
-        onClose={props.onClose.bind(this)}
-        open={props.open}
-        size={props.size}
-      >
-        <Modal.Content>
-          <Image
-            alt={props.alt}
-            fluid
-            src={props.image}
-          />
-        </Modal.Content>
-      </Modal>
-    )}
-  </ModalContext.Consumer>
-);
+const PhotoViewer = (props: Props) => {
+  const [error, setError] = useState(false);
+
+  return (
+    <ModalContext.Consumer>
+      {(mountNode) => (
+        <Modal
+          centered={false}
+          className='photo-viewer'
+          closeIcon
+          mountNode={mountNode}
+          onClose={props.onClose.bind(this)}
+          open={props.open}
+          size={props.size}
+        >
+          <Modal.Content>
+            { error && (
+              <Message
+                content={i18n.t('PhotoViewer.errors.path.content', { path: props.image })}
+                header={i18n.t('PhotoViewer.errors.path.header')}
+                icon='exclamation circle'
+              />
+            )}
+            <Image
+              alt={props.alt}
+              fluid
+              onError={() => setError(true)}
+              src={props.image}
+            />
+          </Modal.Content>
+        </Modal>
+      )}
+    </ModalContext.Consumer>
+  );
+};
 
 PhotoViewer.defaultProps = {
   size: 'small'

package/src/components/VideoPlayer.js

@@ -1,9 +1,20 @@
 // @flow
 
-import React, { type Element, useEffect, useRef } from 'react';
-import { Embed, Modal, Ref } from 'semantic-ui-react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type Element
+} from 'react';
+import {
+  Embed,
+  Message,
+  Modal,
+  Ref
+} from 'semantic-ui-react';
 import ModalContext from '../context/ModalContext';
 import './VideoPlayer.css';
+import i18n from '../i18n/i18n';
 
 type Props = {
   autoPlay?: boolean,
@@ -18,6 +29,8 @@ type Props = {
 };
 
 const VideoPlayer = (props: Props) => {
+  const [error, setError] = useState(false);
+
   const embedRef = useRef();
 
   /**
@@ -46,6 +59,13 @@ const VideoPlayer = (props: Props) => {
           size={props.size}
         >
           <Modal.Content>
+            { error && (
+              <Message
+                content={i18n.t('VideoPlayer.errors.path.content', { path: props.video })}
+                header={i18n.t('VideoPlayer.errors.path.header')}
+                icon='exclamation circle'
+              />
+            )}
             { props.embedded && (
               <Ref
                 innerRef={embedRef}
@@ -63,6 +83,7 @@ const VideoPlayer = (props: Props) => {
               <video
                 autoPlay={props.autoPlay}
                 controls
+                onError={() => setError(true)}
                 src={props.video}
               />
             )}

package/src/i18n/en.json

@@ -8,15 +8,26 @@
   "AccordionSelector": {
     "title": "Select Items"
   },
+  "AudioPlayer": {
+    "errors": {
+      "path": {
+        "content": "Please check the audio path: {{path}}",
+        "header": "There was a problem loading the audio"
+      }
+    }
+  },
   "Common": {
     "buttons": {
       "add": "Add",
       "cancel": "Cancel",
       "clear": "Clear",
       "close": "Close",
+      "download": "Download",
       "edit": "Edit",
       "ok": "OK",
-      "save": "Save"
+      "open": "Open",
+      "save": "Save",
+      "upload": "Upload"
     },
     "errors": {
       "title": "Oops!"
@@ -140,16 +151,16 @@
       "play": "Play"
     }
   },
-  "LazyDocument": {
-    "buttons": {
-      "download": "Download"
-    }
-  },
   "LazyImage": {
     "buttons": {
       "view": "View image"
     }
   },
+  "LazyMedia": {
+    "messages": {
+      "uploaded": "Your <bold>{{type}}</bold> has been received"
+    }
+  },
   "LazyVideo": {
     "buttons": {
       "play": "Play video"
@@ -198,6 +209,14 @@
     "loginErrorHeader": "Invalid Credentials",
     "password": "Password"
   },
+  "PhotoViewer": {
+    "errors": {
+      "path": {
+        "content": "Please check the image path: {{path}}",
+        "header": "There was a problem loading the image"
+      }
+    }
+  },
   "ReferenceCodeFormLabel": {
     "content": "The values in this list can be edited via the {{name}} reference table."
   },
@@ -245,6 +264,14 @@
     },
     "title": "Select Frame"
   },
+  "VideoPlayer": {
+    "errors": {
+      "path": {
+        "content": "Please check the video path: {{path}}",
+        "header": "There was a problem loading the video"
+      }
+    }
+  },
   "ViewXML": {
     "buttons": {
       "view": "View XML"

package/src/index.js

@@ -35,6 +35,7 @@ export { default as FuzzyDate } from './components/FuzzyDate';
 export { default as GoogleMap } from './components/GoogleMap';
 export { default as GooglePlacesSearch } from './components/GooglePlacesSearch';
 export { default as HorizontalCards } from './components/HorizontalCards';
+export { default as IIIFModal } from './components/IIIFModal';
 export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';
@@ -42,7 +43,9 @@ export { default as KeyboardField } from './components/KeyboardField';
 export { default as KeyValuePairs } from './components/KeyValuePairs';
 export { default as LazyAudio } from './components/LazyAudio';
 export { default as LazyDocument } from './components/LazyDocument';
+export { default as LazyIIIF } from './components/LazyIIIF';
 export { default as LazyImage } from './components/LazyImage';
+export { default as LazyMedia } from './components/LazyMedia';
 export { default as LazyVideo } from './components/LazyVideo';
 export { default as LinkButton } from './components/LinkButton';
 export { default as ListFilters } from './components/ListFilters';

package/types/components/AudioPlayer.js.flow

@@ -1,8 +1,9 @@
 // @flow
 
-import React from 'react';
-import { Button, Modal } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import { Button, Message, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './AudioPlayer.css';
 
 type Props = {
@@ -12,25 +13,42 @@ type Props = {
   src: string
 };
 
-const AudioPlayer = (props: Props) => (
-  <Modal
-    centered={props.centered}
-    className='audio-player'
-    open={props.open}
-  >
-    <Modal.Content>
-      <audio
-        controls
-        src={props.src}
-      />
-    </Modal.Content>
-    <Modal.Actions>
-      <Button
-        content={i18n.t('Common.buttons.close')}
-        onClick={props.onClose}
-      />
-    </Modal.Actions>
-  </Modal>
-);
+const AudioPlayer = (props: Props) => {
+  const [error, setError] = useState(false);
+
+  return (
+    <ModalContext.Consumer>
+      {(mountNode) => (
+        <Modal
+          centered={props.centered}
+          className='audio-player'
+          mountNode={mountNode}
+          open={props.open}
+        >
+          <Modal.Content>
+            { error && (
+              <Message
+                content={i18n.t('AudioPlayer.errors.path.content', { path: props.src })}
+                header={i18n.t('AudioPlayer.errors.path.header')}
+                icon='exclamation circle'
+              />
+            )}
+            <audio
+              controls
+              onError={() => setError(true)}
+              src={props.src}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              content={i18n.t('Common.buttons.close')}
+              onClick={props.onClose}
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+    </ModalContext.Consumer>
+  );
+};
 
 export default AudioPlayer;