@imposium-hub/components 1.63.0 → 2.1.0

package/src/components/players/VideoPreview.tsx

@@ -5,37 +5,76 @@ import { assets as copy } from '../../constants/copy';
 import { ICON_TIMES } from '../../constants/icons';
 
 interface IVideoPreviewProps {
-    showMedia: boolean;
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
     onRequestClose?(): void;
 }
 
-class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
+interface IVideoPreviewState {
+    error: boolean;
+    loaded: boolean;
+}
+
+class VideoPreview extends React.PureComponent<IVideoPreviewProps, IVideoPreviewState> {
     private videoNode: any = null;
 
+    private videoRef: any = null;
+
     private evtHandlers: any;
 
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
+    private clickOutsideTimeout: any;
+
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
+        this.videoRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
+
+        this.state = {
+            error: false,
+            loaded: false
+        };
+    }
+
+    public componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
+    }
+
+    public componentWillUnmount(): void {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
     }
 
+    private detectOutsideClick = (e: any): void => {
+        const { target } = e;
+
+        const clickInside =
+            this.videoRef.current && this.videoRef.current.contains(target) ? true : false;
+
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
+
     private onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
 
     public render() {
-        const { showMedia, url, playbackSettings, style } = this.props;
-        if (showMedia) {
-            return (
-                <Portal id='portal-root'>
+        const { url, playbackSettings, style } = this.props;
+        const { error } = this.state;
+        return (
+            <Portal id='portal-root'>
+                <div ref={this.videoRef}>
                     <div
                         style={{ ...style }}
                         className={'close-icon-preview'}>
@@ -49,6 +88,8 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
                         </Button>
                     </div>
                     <video
+                        onError={() => this.setState({ error: true, loaded: true })}
+                        onCanPlayThrough={() => this.setState({ loaded: true })}
                         style={style}
                         muted
                         ref={this.videoNode}
@@ -60,11 +101,16 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
                         src={url}
                         className='asset-preview-background media-preview'
                     />
-                </Portal>
-            );
-        } else {
-            return null;
-        }
+                    {error ? (
+                        <div
+                            className='error-preview'
+                            style={style}>
+                            Video not found
+                        </div>
+                    ) : null}
+                </div>
+            </Portal>
+        );
     }
 }
 

package/src/components/publish-wizard/PublishWizard.tsx

@@ -49,8 +49,7 @@ interface IPublishWizardProps {
         accessKey: string,
         compId: string,
         addEmbed: boolean,
-        addMedia: boolean,
-        overrides?: any
+        addMedia: boolean
     ) => any;
     publishDataset: boolean;
     activeDatasetId?: string;
@@ -60,8 +59,7 @@ interface IPublishWizardProps {
         accessKey: string,
         compId: string,
         addEmbed: boolean,
-        addMedia: boolean,
-        overrides?: any
+        addMedia: boolean
     ) => any;
     handleNotification?: (n) => void;
     batchJobs: any;

package/src/components/publish-wizard/publish/EmailWorkflow.tsx

@@ -29,7 +29,7 @@ interface IEmailWorkflowProps {
         compId: string,
         embed: boolean,
         addMedia: boolean,
-        overrides?: any
+        addEmbed?: any
     ) => any;
     publishDataset: boolean;
     activeDatasetId?: string;
@@ -40,7 +40,7 @@ interface IEmailWorkflowProps {
         compId: string,
         embed: boolean,
         addMedia: boolean,
-        overrides?: any
+        addEmbed?: any
     ) => any;
     renderBatch: (batchId: string, postRenderActions?: any) => any;
     status: string;

package/src/services/API.ts

@@ -131,6 +131,7 @@ export interface IImposiumAPI {
     );
     getDataset(storyId: string, datasetId: string);
     deleteDataset(storyId: string, datasetId: string);
+    textToSpeech(text: string, voice: string);
 }
 
 interface ICancelTokenCache {
@@ -1524,4 +1525,12 @@ export default class API {
             method: 'DELETE'
         });
     };
+
+    public textToSpeech = (text, voice): Promise<any> => {
+        return this.doRequest({
+            url: `/text-to-speech?text=${encodeURIComponent(text)}&voice=${voice}`,
+            method: 'GET',
+            responseType: 'blob'
+        });
+    };
 }

package/src/utils/assets.ts

@@ -4,9 +4,9 @@ import { CSSProperties } from 'react';
 export const getMediaPreviewStyle = (
     mediaWidth: number,
     mediaHeight: number,
-    ref: any
+    element: any
 ): CSSProperties => {
-    if (!ref.current) {
+    if (!element) {
         return;
     }
     if (!mediaWidth) {
@@ -15,8 +15,12 @@ export const getMediaPreviewStyle = (
     if (!mediaHeight) {
         mediaHeight = PREVIEW_MAX_HEIGHT;
     }
-    const icon = ref.current;
-    const iconRect = icon.getBoundingClientRect();
+
+    const elementDiv = element.current !== undefined ? element.current : element;
+    if (!elementDiv) {
+        return;
+    }
+    const iconRect = elementDiv.getBoundingClientRect();
     const aspect: number = mediaWidth / mediaHeight;
     let width: number = PREVIEW_MAX_WIDTH;
     let height: number = width / aspect;