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

package/types/components/LazyAudio.js.flow

@@ -13,6 +13,7 @@ import {
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
 import AudioPlayer from './AudioPlayer';
+import LazyLoader from './LazyLoader';
 import './LazyAudio.css';
 
 type Props = {
@@ -26,9 +27,11 @@ type Props = {
 };
 
 const LazyAudio = (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);
+  const [modal, setModal] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -60,14 +63,28 @@ const LazyAudio = (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);
+              }}
               size={props.size}
               src={props.preview}
             />
           )}
-          { !props.preview && (
+          { (error || !props.preview) && (
             <Image
               {...props.image}
               className='placeholder-image'

package/types/components/LazyDocument.js.flow

@@ -13,6 +13,7 @@ import {
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
 import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import './LazyDocument.css';
 
 type Props = {
@@ -27,8 +28,10 @@ type Props = {
 };
 
 const LazyDocument = (props: Props) => {
-  const [visible, setVisible] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!props.preview);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -60,9 +63,23 @@ 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}
             />
@@ -81,7 +98,7 @@ const LazyDocument = (props: Props) => {
               </Document>
             </Image>
           )}
-          { !props.preview && !(props.src && props.pdf) && (
+          { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
               className='placeholder-image'

package/types/components/LazyImage.js.flow

@@ -12,6 +12,7 @@ import {
   Visibility
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import LazyLoader from './LazyLoader';
 import PhotoViewer from './PhotoViewer';
 import './LazyImage.css';
 
@@ -26,9 +27,11 @@ type Props = {
 };
 
 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 +63,28 @@ const LazyImage = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { (props.preview || 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.preview || props.src) && (
+          { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -79,7 +96,7 @@ const LazyImage = (props: Props) => {
               />
             </Image>
           )}
-          { (props.src || props.children) && props.dimmable && (
+          { !error && (props.src || props.children) && props.dimmable && (
             <Dimmer
               active={dimmer}
             >

package/types/components/LazyLoader.js.flow

@@ -0,0 +1,28 @@
+// @flow
+
+import React from 'react';
+import { Image, Loader } from 'semantic-ui-react';
+import './LazyLoader.css';
+
+type Props = {
+  active: boolean,
+  size: string
+};
+
+const LazyLoader = (props: Props) => (
+  <Image
+    className='lazy-loader'
+    size={props.size}
+  >
+    <Loader
+      active={props.active}
+    />
+  </Image>
+);
+
+LazyLoader.defaultProps = {
+  active: false,
+  size: 'small'
+};
+
+export default LazyLoader;

package/types/components/LazyVideo.js.flow

@@ -12,6 +12,7 @@ import {
   Visibility
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import LazyLoader from './LazyLoader';
 import VideoPlayer from './VideoPlayer';
 import './LazyVideo.css';
 
@@ -29,9 +30,11 @@ type Props = {
 };
 
 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 +66,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'

package/types/components/PhotoViewer.js.flow

@@ -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/types/components/VideoPlayer.js.flow

@@ -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}
               />
             )}