@imposium-hub/components 1.45.5 → 1.46.1

package/src/components/players/TemplatePlayer.tsx

@@ -4,43 +4,39 @@ import { getPlayerStyle } from './VideoPlayer';
 import { PreviewNotAvailable } from '../assets/PreviewNotAvailable';
 
 interface ITemplatePlayerProps {
-    url : string;
-    height? : number;
-    width? : number;
-    padding? : number;
-    active? : boolean;
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    active?: boolean;
 }
 
 class TemplatePlayer extends React.PureComponent<ITemplatePlayerProps, undefined> {
-
-    private audioNode : any;
+    private audioNode: any;
     private width = 1280;
     private height = 720;
 
     constructor(props) {
-
         super(props);
 
         this.audioNode = React.createRef();
     }
 
-    public getImageStyle() : any {
-
-    const {padding, width, height} = this.props;
-        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+    public getImageStyle(): any {
+        const { padding, width, height } = this.props;
+        const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
         return getPlayerStyle(width, height, this.width, this.height, pad);
     }
 
     public render() {
-
-        const {url, active} = this.props;
+        const { active } = this.props;
 
         if (active !== false) {
             return (
-                <div className = 'media-player'>
-                    <div className = 'inner-viewer' style = {this.getImageStyle()}>
-                        <PreviewNotAvailable/>
+                <div className='media-player'>
+                    <div className='inner-viewer' style={this.getImageStyle()}>
+                        <PreviewNotAvailable />
                     </div>
                 </div>
             );

package/src/components/players/VideoPlayer.tsx

@@ -3,31 +3,38 @@ import { fitToContainer } from '../../Util';
 import { DEFAULT_PADDING } from '../../constants/player';
 
 interface IVideoPlayerProps {
-    url : string;
-    height? : number;
-    width? : number;
-    padding? : number;
-    muted? : boolean;
-    active ? : boolean;
-    maxWidth? : number;
-    maxHeight? : number;
-    hideDefaultControls? : boolean;
-    allowManualScale? : boolean;
-    customControls? : JSX.Element;
-    autoPlay? : boolean;
+    url: string;
+    height?: number;
+    width?: number;
+    padding?: number;
+    muted?: boolean;
+    active?: boolean;
+    maxWidth?: number;
+    maxHeight?: number;
+    hideDefaultControls?: boolean;
+    allowManualScale?: boolean;
+    customControls?: JSX.Element;
+    autoPlay?: boolean;
 }
 
 interface IVideoPlayerState {
-    videoWidth : number;
-    videoHeight : number;
-    scaleMode : string;
+    videoWidth: number;
+    videoHeight: number;
+    scaleMode: string;
 }
 
-export const getPlayerStyle = (w, h, contentWidth, contentHeight, padding, maxWidth?, maxHeight?) => {
-
-    const containerDimensions = {width: w, height: h};
-    const contentDimensions = {width: contentWidth, height: contentHeight};
-    const {width, height, top, left} = fitToContainer(containerDimensions, contentDimensions, {
+export const getPlayerStyle = (
+    w,
+    h,
+    contentWidth,
+    contentHeight,
+    padding,
+    maxWidth?,
+    maxHeight?
+) => {
+    const containerDimensions = { width: w, height: h };
+    const contentDimensions = { width: contentWidth, height: contentHeight };
+    const { width, height, top, left } = fitToContainer(containerDimensions, contentDimensions, {
         scaleMode: 'proportionalInside',
         maxWidth,
         maxHeight,
@@ -35,39 +42,36 @@ export const getPlayerStyle = (w, h, contentWidth, contentHeight, padding, maxWi
     });
 
     return {
-        top : `${top}px`,
-        left : `${left}px`,
-        width : `${width}px`,
-        height : `${height}px`
+        top: `${top}px`,
+        left: `${left}px`,
+        width: `${width}px`,
+        height: `${height}px`
     };
 };
 
 class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerState> {
-
-    private videoNode : any;
+    private videoNode: any;
     public static SCALE_MODES = {
-        MANUAL : 'manual',
-        AUTOMATIC : 'automatic'
+        MANUAL: 'manual',
+        AUTOMATIC: 'automatic'
     };
 
     constructor(props) {
-
         super(props);
 
         this.state = {
-            videoHeight : 1080,
-            videoWidth : 1920,
+            videoHeight: 1080,
+            videoWidth: 1920,
             scaleMode: VideoPlayer.SCALE_MODES.AUTOMATIC
         };
 
         this.videoNode = React.createRef();
     }
 
-    public getVideoStyle() : any {
-
-        const {videoHeight, videoWidth} = this.state;
+    public getVideoStyle(): any {
+        const { videoHeight, videoWidth } = this.state;
         const { padding, width, height, maxWidth, maxHeight } = this.props;
-        const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
+        const pad = padding !== undefined ? padding : DEFAULT_PADDING;
 
         if (videoHeight && videoWidth) {
             return getPlayerStyle(width, height, videoWidth, videoHeight, pad, maxWidth, maxHeight);
@@ -77,7 +81,6 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
     }
 
     public setTime(time) {
-
         const video = this.videoNode.current;
         if (video) {
             video.currentTime = time;
@@ -85,7 +88,6 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
     }
 
     private metadataLoaded(e) {
-
         this.setState({
             videoWidth: e.target.videoWidth,
             videoHeight: e.target.videoHeight
@@ -93,7 +95,6 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
     }
 
     private renderCustomControls() {
-
         const { customControls } = this.props;
 
         if (customControls) {
@@ -106,23 +107,23 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
     }
 
     public render() {
-
-        const {url, active, muted, customControls, hideDefaultControls} = this.props;
-        const controls = (!customControls && !hideDefaultControls);
-        const autoPlay = (this.props.autoPlay) ? this.props.autoPlay : false;
+        const { url, active, muted, customControls, hideDefaultControls } = this.props;
+        const controls = !customControls && !hideDefaultControls;
+        const autoPlay = this.props.autoPlay ? this.props.autoPlay : false;
 
         if (active !== false) {
             return (
-                <div className = 'media-player'>
-                    <div className = 'inner-viewer' style = {this.getVideoStyle()}>
+                <div className='media-player'>
+                    <div className='inner-viewer' style={this.getVideoStyle()}>
                         <video
-                            controls = {controls}
-                            onLoadedMetadata = {(e) => this.metadataLoaded(e)}
-                            muted = {muted}
-                            src = {url}
-                            ref = {this.videoNode}
-                            preload = 'auto'
-                            autoPlay = {autoPlay}/>
+                            controls={controls}
+                            onLoadedMetadata={(e) => this.metadataLoaded(e)}
+                            muted={muted}
+                            src={url}
+                            ref={this.videoNode}
+                            preload='auto'
+                            autoPlay={autoPlay}
+                        />
                         {this.renderCustomControls()}
                     </div>
                 </div>
@@ -130,7 +131,6 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
         } else {
             return null;
         }
-
     }
 }
 

package/src/components/players/VideoPreview.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import Portal from '../portal/Portal';
 import Button from '../button/Button';
-import {assets as copy} from '../../constants/copy';
-import {ICON_TIMES} from '../../constants/icons';
+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?(e) : void;
+    showMedia: boolean;
+    url: string;
+    playbackSettings?: any;
+    style?: React.CSSProperties | any;
+    onRequestClose?(e): void;
 }
 
 class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
-    private videoNode : any = null;
-    private evtHandlers : any;
+    private videoNode: any = null;
+    private evtHandlers: any;
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
@@ -24,42 +24,41 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
     }
 
     private onClose(e) {
-
-        const {onRequestClose} = this.props;
+        const { onRequestClose } = this.props;
 
         onRequestClose(e);
     }
+
     public render() {
-        const {showMedia, url, playbackSettings, style} = this.props;
+        const { showMedia, url, playbackSettings, style } = this.props;
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
-                    <div style={{...style}} className={'close-icon-preview'}>
+                    <div style={{ ...style }} className={'close-icon-preview'}>
                         <Button
-                            key = 'btn-filter'
-                            onClick = {this.evtHandlers.onClose}
+                            key='btn-filter'
+                            onClick={this.evtHandlers.onClose}
                             size={'large'}
-                            style = 'subtle'
-                            tooltip = {copy.field.tooltipFilter}
-                        >
+                            style='subtle'
+                            tooltip={copy.field.tooltipFilter}>
                             {ICON_TIMES}
                         </Button>
                     </div>
                     <video
-                        style = {style}
+                        style={style}
                         muted
-                        ref = {this.videoNode}
-                        autoPlay = {playbackSettings.autoPlay}
-                        loop = {playbackSettings.loop}
+                        ref={this.videoNode}
+                        autoPlay={playbackSettings.autoPlay}
+                        loop={playbackSettings.loop}
                         controls
-                        preload = 'preload'
+                        preload='preload'
                         src={url}
                         className='asset-preview-background'
                     />
                 </Portal>
             );
         } else {
-           return null;
+            return null;
         }
     }
 }

package/src/components/portal/Portal.tsx

@@ -7,11 +7,11 @@ import { createPortal } from 'react-dom';
 // Just wrap desired element in <Portal>{YourElement}</Portal>
 
 interface IPortalProps {
-    children : ReactNode;
-    id : string;
+    children: ReactNode;
+    id: string;
 }
 
-const Portal : React.FC<IPortalProps> = ({ children, id }) : ReactPortal => {
+const Portal: React.FC<IPortalProps> = ({ children, id }): ReactPortal => {
     const mount = document.getElementById(id);
     const el = document.createElement('div');