import * as React from 'react' ; import { Dispatch } from 'redux' ; import { connect } from 'react-redux' ; import { ASSET_ACTIONS , IAssetCallback , IAssetItem , LIST_ACTION } from '../../interfaces' ; import { IApplicationState } from '../../store' ; import { superdeskApi , samsApi } from '../../apis' ; import { closeAssetContentPanel , deleteAssets , onEditAsset , queryAssetsFromCurrentSearch , forceUnlockAsset , } from '../../store/assets/actions' ; import { getSelectedAsset , getSetNameForSelectedAsset } from '../../store/assets/selectors' ; import { Dropdown , FormLabel , IconButton , Label } from 'superdesk-ui-framework/react' ; import { FormRow , PanelContent , PanelContentBlock , PanelContentBlockInner , PanelHeader , Text , } from '../../ui' ; import { VersionUserDateLines } from '../common/versionUserDateLines' ; import { getPreviewComponent } from './preview' ; import { showImagePreviewModal } from './assetImagePreviewFullScreen' ; import { getHumanReadableFileSize } from '../../utils/ui' ; import { getDropdownItemsForActions , getMimetypeHumanReadable } from '../../utils/assets' ; interface IProps { asset ? : IAssetItem ; setName ? : string ; deleteAsset ( asset ) : void ; onEditAsset ( asset ) : void ; onPanelClosed ( ) : void ; downloadAsset ( asset ) : void ; queryAssetsFromCurrentSearch ( listStyle ) : void ; forceUnlockAsset ( asset ) : void ; } const mapStateToProps = ( state ) => ( { asset : getSelectedAsset ( state ) , setName : getSetNameForSelectedAsset ( state ) , } ) ; const mapDispatchToProps = ( dispatch ) => ( { onEditAsset : ( asset ) => dispatch < any > ( onEditAsset ( asset ) ) , deleteAsset : ( asset ) => dispatch < any > ( deleteAssets ( asset ) ) , onPanelClosed : ( ) => dispatch ( closeAssetContentPanel ( ) ) , queryAssetsFromCurrentSearch : ( listAction ? ) => dispatch < any > ( queryAssetsFromCurrentSearch ( listAction ) ) , forceUnlockAsset : ( asset ) => dispatch < any > ( forceUnlockAsset ( asset ) ) , } ) ; export function downloadAssetBinary ( asset ) { samsApi . assets . getAssetBinary ( asset ) ; } export class AssetPreviewPanelComponent extends React . PureComponent < IProps > { constructor ( props ) { super ( props ) ; this . onEditAsset = this . onEditAsset . bind ( this ) ; this . onDownloadSingleAssetCompressedBinary = this . onDownloadSingleAssetCompressedBinary . bind ( this ) ; this . onDeleteAsset = this . onDeleteAsset . bind ( this ) ; this . onAssetImagePreview = this . onAssetImagePreview . bind ( this ) ; } onEditAsset ( ) { this . props . onEditAsset ( this . props . asset ! ) ; } onDeleteAsset ( ) { this . props . deleteAsset ( this . props . asset ! ) ; } onDownloadSingleAssetCompressedBinary ( ) { downloadAssetBinary ( this . props . asset ! ) ; } onAssetImagePreview ( asset ) { showImagePreviewModal ( asset ! ) ; } render ( ) { if ( this . props . asset ?. _id == null ) { return null ; } const { gettext } = superdeskApi . localization ; const actions = [ { action : ASSET_ACTIONS . EDIT , onSelect : this . onEditAsset , } , { action : ASSET_ACTIONS . DOWNLOAD , onSelect : this . onDownloadSingleAssetCompressedBinary , } , { action : ASSET_ACTIONS . DELETE , onSelect : this . onDeleteAsset , } , { action : ASSET_ACTIONS . VIEW_FULL_SCREEN , onSelect : this . onAssetImagePreview , } , ] ; if ( superdeskApi . privileges . hasPrivilege ( 'sams_manage_assets' ) ) { actions . push ( { action : ASSET_ACTIONS . FORCE_UNLOCK , onSelect : this . props . forceUnlockAsset , } ) ; } const newActions = getDropdownItemsForActions ( this . props . asset ! , actions ) ; const ContentPreview = getPreviewComponent ( this . props . asset ) ; return ( < React . Fragment > < PanelHeader onClose = { this . props . onPanelClosed } borderB = { true } title = { gettext ( 'Asset Preview' ) } / > < PanelContent > < PanelContentBlock flex = { true } > < PanelContentBlockInner grow = { true } > < VersionUserDateLines item = { this . props . asset } /> < /PanelContentBlockInner> < PanelContentBlockInner right = { true } > < Dropdown align = "right" items = { [ { type : 'group' , label : gettext ( 'Actions' ) , items : [ 'divider' , ... newActions , ] , } , ] } > < IconButton ariaValue = "dropdown-more-options" icon = "dots-vertical" onClick = { ( ) => false } /> < /Dropdown> < /PanelContentBlockInner> < /PanelContentBlock> { ! ContentPreview ? null : ( < PanelContentBlock flex = { true } > < PanelContentBlockInner grow = { true } > < ContentPreview asset = { this . props . asset } /> < /PanelContentBlockInner> < /PanelContentBlock>)} < PanelContentBlock flex = { true } > < PanelContentBlockInner grow = { true } > < FormRow > < FormLabel text = { gettext ( 'Name' ) } style = "light" / > < Text > { this . props . asset ?. name } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Description' ) } style = "light" / > < Text > { this . props . asset ?. description || '-' } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Filename' ) } style = "light" / > < Text > { this . props . asset ?. filename } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Size' ) } style = "light" / > < Text > { getHumanReadableFileSize ( this . props . asset ?. length ) } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Type' ) } style = "light" / > < Text > { getMimetypeHumanReadable ( this . props . asset ?. mimetype ) } ( { this . props . asset ?. mimetype } ) < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'State' ) } style = "light" / > < Text > { this . props . asset ?. state } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Set' ) } style = "light" / > < Text > { this . props . setName } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Tags' ) } style = "light" / > { this . props . asset . tags ?. map ( ( tag ) => ( < Label key = { this . props . asset ?. tags . indexOf ( tag ) } text = { tag . name } style = "translucent" size = "large" / > ) ) } < /FormRow> < /PanelContentBlockInner> < /PanelContentBlock> < /PanelContent> < /React.Fragment>); } } export const AssetPreviewPanel = connect ( mapStateToProps , mapDispatchToProps ) ( AssetPreviewPanelComponent ) ;