@performant-software/semantic-components 0.5.15 → 0.5.16-beta.10

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!"
@@ -135,9 +146,9 @@
       "value": "Value"
     }
   },
-  "LazyDocument": {
+  "LazyAudio": {
     "buttons": {
-      "download": "Download"
+      "play": "Play"
     }
   },
   "LazyImage": {
@@ -145,6 +156,11 @@
       "view": "View image"
     }
   },
+  "LazyMedia": {
+    "messages": {
+      "uploaded": "Your <bold>{{type}}</bold> has been received"
+    }
+  },
   "LazyVideo": {
     "buttons": {
       "play": "Play video"
@@ -193,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."
   },
@@ -240,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

@@ -9,6 +9,7 @@ export { default as AccordionList } from './components/AccordionList';
 export { default as AccordionSelector } from './components/AccordionSelector';
 export { default as ArrowButtons } from './components/ArrowButtons';
 export { default as AssociatedDropdown } from './components/AssociatedDropdown';
+export { default as AudioPlayer } from './components/AudioPlayer';
 export { default as BooleanIcon } from './components/BooleanIcon';
 export { default as CancelButton } from './components/CancelButton';
 export { default as ColorButton } from './components/ColorButton';
@@ -34,13 +35,17 @@ 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';
 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

@@ -0,0 +1,54 @@
+// @flow
+
+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 = {
+  centered?: boolean,
+  onClose: () => void,
+  open: boolean,
+  src: string
+};
+
+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;

package/types/components/DownloadButton.js.flow

@@ -1,23 +1,74 @@
 // @flow
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import uuid from 'react-uuid';
-import { Button } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 
 type Props = {
+  basic?: boolean,
+  className?: string,
+  color?: string,
+  compact?: boolean,
   filename?: string,
+  primary?: boolean,
+  size?: string,
+  secondary?: boolean,
   url: string
 };
 
-const DownloadButton = ({ filename, url, ...button }: Props) => (
-  <a
-    download={filename || uuid()}
-    href={url}
-  >
-    <Button
-      {...button}
-    />
-  </a>
-);
+const DownloadButton = (props: Props) => {
+  /**
+   * Sets the appropriate class names based on the formatting props.
+   *
+   * @type {string}
+   */
+  const className = useMemo(() => {
+    const classNames = ['ui', 'button'];
+
+    if (props.basic) {
+      classNames.push('basic');
+    }
+
+    if (props.className) {
+      classNames.push(...props.className.split(' '));
+    }
+
+    if (props.color) {
+      classNames.push(props.color);
+    }
+
+    if (props.compact) {
+      classNames.push('compact');
+    }
+
+    if (props.primary) {
+      classNames.push('primary');
+    }
+
+    if (props.secondary) {
+      classNames.push('secondary');
+    }
+
+    if (props.size) {
+      classNames.push(props.size);
+    }
+
+    return classNames.join(' ');
+  }, [props.basic, props.color]);
+
+  return (
+    <a
+      className={className}
+      download={props.filename || uuid()}
+      href={props.url}
+    >
+      <Icon
+        name='cloud download'
+      />
+      { i18n.t('Common.buttons.download') }
+    </a>
+  );
+};
 
 export default DownloadButton;

package/types/components/IIIFModal.js.flow

@@ -0,0 +1,26 @@
+// @flow
+
+import React from 'react';
+import { Modal } from 'semantic-ui-react';
+import { IIIFViewer } from '@performant-software/shared-components';
+
+type Props = {
+  onClose: () => void
+};
+
+const IIIFModal = ({ onClose, ...props }: Props) => (
+  <Modal
+    centered={false}
+    closeIcon
+    onClose={onClose}
+    open
+  >
+    <Modal.Content>
+      <IIIFViewer
+        {...props}
+      />
+    </Modal.Content>
+  </Modal>
+);
+
+export default IIIFModal;

package/types/components/LazyAudio.js.flow

@@ -0,0 +1,150 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import {
+  Button,
+  Dimmer,
+  Icon,
+  Image,
+  Loader,
+  Segment,
+  Transition,
+  Visibility
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import AudioPlayer from './AudioPlayer';
+import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
+import './LazyAudio.css';
+
+type Props = {
+  children?: Node,
+  dimmable: boolean,
+  download?: string,
+  duration?: number,
+  image?: any,
+  name?: string,
+  preview?: string,
+  size?: string,
+  src?: string
+};
+
+const LazyAudio = (props: Props) => {
+  const [dimmer, setDimmer] = useState(false);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!props.preview);
+  const [modal, setModal] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  if (!visible) {
+    return (
+      <Visibility
+        as='span'
+        fireOnMount
+        onTopVisible={() => setVisible(true)}
+      >
+        <Loader
+          active
+          inline='centered'
+          size={props.size}
+        />
+      </Visibility>
+    );
+  }
+
+  return (
+    <>
+      <Transition
+        duration={props.duration}
+        visible
+      >
+        <Dimmer.Dimmable
+          as={Segment}
+          className='lazy-audio'
+          compact
+          onBlur={() => setDimmer(false)}
+          onMouseEnter={() => setDimmer(true)}
+          onMouseLeave={() => setDimmer(false)}
+        >
+          { !loaded && (
+            <LazyLoader
+              active
+              size={props.size}
+            />
+          )}
+          { !error && props.preview && (
+            <Image
+              {...props.image}
+              onError={() => {
+                setError(true);
+                setLoaded(true);
+              }}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
+              size={props.size}
+              src={props.preview}
+            />
+          )}
+          { (error || !props.preview) && (
+            <Image
+              {...props.image}
+              className='placeholder-image'
+              size={props.size}
+            >
+              <Icon
+                name='file audio outline'
+                size='big'
+              />
+            </Image>
+          )}
+          { (props.src || props.children) && props.dimmable && (
+            <Dimmer
+              active={dimmer}
+            >
+              <div
+                className='buttons'
+              >
+                { props.src && (
+                  <Button
+                    content={i18n.t('LazyAudio.buttons.play')}
+                    icon='play circle outline'
+                    onClick={() => setModal(true)}
+                    primary
+                  />
+                )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
+                { props.children }
+              </div>
+            </Dimmer>
+          )}
+        </Dimmer.Dimmable>
+      </Transition>
+      { props.src && (
+        <AudioPlayer
+          onClose={() => setModal(false)}
+          open={modal}
+          size='large'
+          src={props.src}
+        />
+      )}
+    </>
+  );
+};
+
+LazyAudio.defaultProps = {
+  dimmable: true,
+  duration: 1000,
+  preview: undefined,
+  size: 'medium',
+  src: undefined
+};
+
+export default LazyAudio;

package/types/components/LazyDocument.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, useEffect, type Node } from 'react';
+import React, { useState, type Node } from 'react';
 import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import {
   Dimmer,
@@ -11,32 +11,27 @@ import {
   Transition,
   Visibility
 } from 'semantic-ui-react';
-import i18n from '../i18n/i18n';
 import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import './LazyDocument.css';
 
 type Props = {
   children?: Node,
   dimmable?: boolean,
+  download?: string,
   duration?: number,
   image?: any,
+  pdf?: boolean,
   preview?: ?string,
   size?: string,
   src?: string
 };
 
 const LazyDocument = (props: Props) => {
-  const [visible, setVisible] = useState(false);
   const [dimmer, setDimmer] = useState(false);
-  const [contentType, setContentType] = useState('');
-
-  useEffect(() => {
-    if (props.src && !props.preview) {
-      fetch(props.src)
-        .then((response) => response.blob())
-        .then((blob) => setContentType(blob.type));
-    }
-  }, [props.preview, props.src]);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!props.preview);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -68,20 +63,35 @@ const LazyDocument = (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 && contentType === 'application/pdf' && (
+          { !error && loaded && !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
               size={props.size}
             >
               <Document
                 file={props.src}
+                onLoadError={(e) => console.log(e.message)}
               >
                 <Page
                   pageNumber={1}
@@ -89,7 +99,7 @@ const LazyDocument = (props: Props) => {
               </Document>
             </Image>
           )}
-          { !props.preview && (!props.src || contentType !== 'application/pdf') && (
+          { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -101,19 +111,17 @@ const LazyDocument = (props: Props) => {
               />
             </Image>
           )}
-          { (props.src || props.children) && props.dimmable && (
+          { (props.download || props.src || props.children) && props.dimmable && (
             <Dimmer
               active={dimmer}
             >
               <div
                 className='buttons'
               >
-                { props.src && (
+                { props.download && (
                   <DownloadButton
-                    content={i18n.t('LazyDocument.buttons.download')}
-                    icon='cloud download'
                     primary
-                    url={props.src || ''}
+                    url={props.download || props.src}
                   />
                 )}
                 { props.children }
@@ -129,6 +137,7 @@ const LazyDocument = (props: Props) => {
 LazyDocument.defaultProps = {
   dimmable: true,
   duration: 1000,
+  pdf: false,
   preview: undefined,
   size: 'medium',
   src: undefined

package/types/components/LazyIIIF.js.flow

@@ -0,0 +1,44 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import { Button } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import IIIFModal from './IIIFModal';
+import LazyMedia from './LazyMedia';
+
+type Props = {
+  children?: Node,
+  manifest?: string,
+  options?: any
+};
+
+const LazyIIIF = ({ manifest, options = {}, ...props }: Props) => {
+  const [modal, setModal] = useState(false);
+
+  return (
+    <>
+      <LazyMedia
+        {...props}
+      >
+        { manifest && (
+          <Button
+            content={i18n.t('Common.buttons.open')}
+            icon='images outline'
+            onClick={() => setModal(true)}
+          />
+        )}
+        { props.children }
+      </LazyMedia>
+      { modal && (
+        <IIIFModal
+          manifestId={manifest}
+          onClose={() => setModal(false)}
+          options={_.defaults(options, { showIIIFBadge: false })}
+        />
+      )}
+    </>
+  );
+};
+
+export default LazyIIIF;

package/types/components/LazyImage.js.flow

@@ -12,23 +12,29 @@ import {
   Visibility
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import PhotoViewer from './PhotoViewer';
 import './LazyImage.css';
 
 type Props = {
   children?: Node,
   dimmable: boolean,
+  download?: string,
   duration?: number,
   image?: any,
+  name?: string,
   preview?: string,
   size?: string,
   src?: string
 };
 
 const LazyImage = (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.src || props.preview));
+  const [modal, setModal] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -60,14 +66,28 @@ const LazyImage = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { props.src && (
+          { !loaded && (
+            <LazyLoader
+              active
+              size={props.size}
+            />
+          )}
+          { !error && (props.preview || props.src) && (
             <Image
               {...props.image}
+              onError={() => {
+                setError(true);
+                setLoaded(true);
+              }}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
               size={props.size}
               src={props.preview || props.src}
             />
           )}
-          { !props.src && (
+          { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -79,7 +99,7 @@ const LazyImage = (props: Props) => {
               />
             </Image>
           )}
-          { (props.src || props.children) && props.dimmable && (
+          { !error && (props.src || props.children) && props.dimmable && (
             <Dimmer
               active={dimmer}
             >
@@ -94,18 +114,27 @@ const LazyImage = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>
           )}
         </Dimmer.Dimmable>
       </Transition>
-      <PhotoViewer
-        image={props.src || ''}
-        onClose={() => setModal(false)}
-        open={modal}
-        size='large'
-      />
+      { props.src && (
+        <PhotoViewer
+          image={props.src}
+          onClose={() => setModal(false)}
+          open={modal}
+          size='large'
+        />
+      )}
     </>
   );
 };