@imposium-hub/components 1.28.2 → 1.29.0

package/Entry.ts

@@ -32,6 +32,7 @@ import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
 import DeterminateLoader from './components/determinate-loader/DeterminateLoader';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
+import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
 import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
 import AssetsTableNameCell from './components/assets/AssetsTableNameCell';
@@ -163,6 +164,7 @@ export {
     AssetsTableStatusCell,
     AssetsTableNameFilter,
     AssetsTableNameCell,
+    AssetsTableDurationCell,
     AssetsTableTagsCell,
     AssetsTableTagsFilter,
     AssetsTableTagsPivot,

package/components/assets/AssetsTableDurationCell.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import NumberField from '../number-field/NumberField';
+import { updateAssetName } from '../../redux/actions/asset-list';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { IImposiumAPI } from '../../services/API';
+
+interface IAssetsTableDurationCell {
+    cell : any;
+    api : IImposiumAPI;
+}
+
+const AssetsTableDurationCell : React.FC<IAssetsTableDurationCell> = (props : IAssetsTableDurationCell) => {
+
+        const {cell: {row: {original: {duration, id}}}} = props;
+
+        if (duration !== null && duration !== undefined) {
+            return (
+                <div className = 'asset-duration-cell'>
+                    {secondsToTime(duration)}
+                </div>
+            );
+        } else {
+            return null;
+        }
+
+};
+
+export const  secondsToTime = (timeInSeconds) : string => {
+    const minutes : any = Math.floor(timeInSeconds / 60);
+    let seconds : any = Math.floor(timeInSeconds - minutes * 60);
+    if (seconds < 10) {
+        seconds = `0${seconds}`;
+    }
+    return `${minutes}:${seconds}`;
+};
+
+const mapDispatchToProps = (dispatch) : any => {
+    return bindActionCreators({updateAssetName}, dispatch);
+};
+
+const mapStateToProps = (state) : any => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssetsTableDurationCell);

package/components/number-field/NumberField.tsx

@@ -10,7 +10,7 @@ interface INumberFieldProps {
     value : number;
     tooltip? : IToolTipConfig | string;
     width? : string | number;
-    onChange(e) : void;
+    onChange?(e) : void;
     info? : string;
     labelPosition? : string;
     min? : number;

package/components/players/VideoPlayer.tsx

@@ -14,6 +14,7 @@ interface IVideoPlayerProps {
     hideDefaultControls? : boolean;
     allowManualScale? : boolean;
     customControls? : JSX.Element;
+    autoPlay? : boolean;
 }
 
 interface IVideoPlayerState {
@@ -108,12 +109,20 @@ class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoPlayerSta
 
         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()}>
-                        <video controls = {controls} onLoadedMetadata = {(e) => this.metadataLoaded(e)} muted = {muted} src = {url} ref = {this.videoNode}/>
+                        <video
+                            controls = {controls}
+                            onLoadedMetadata = {(e) => this.metadataLoaded(e)}
+                            muted = {muted}
+                            src = {url}
+                            ref = {this.videoNode}
+                            preload = 'auto'
+                            autoPlay = {autoPlay}/>
                         {this.renderCustomControls()}
                     </div>
                 </div>