import * as React from 'react' ; import { Table , Column , RowMouseEventHandlerParams , } from 'react-virtualized/dist/es/Table' ; import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer' ; import { TrackModel } from '../../database/TracksDatabase' ; import { ContextMenu , ContextMenuItem } from '../elements/ContextMenu' ; import AppStore from '../../stores/AppStore' ; import * as TimeUtils from '../../utilities/TimeUtils' ; import EmptyPlaylist from './EmptyPlaylist' ; import * as Moment from 'moment' ; interface TracksProps { store : AppStore ; } interface TracksState { contextParams : { x : number ; y : number ; index : number ; } ; } export default class Tracks extends React . Component < TracksProps , TracksState > { constructor ( props ) { super ( props ) ; this . state = { contextParams : { x : 0 , y : 0 , index : - 1 , } , } ; } rowGetter = ( { index } ) => { return this . props . store . state . playlist . currentTracks [ index ] ; } ; noRowsRenderer = ( ) => { return < EmptyPlaylist />; } ; rowClassName = ( { index } ) => { return index % 2 === 0 ? 'even-row' : 'odd-row' ; } ; onRowDoubleClick = ( info ) => { this . props . store . player . createPlayerQueueFromPlaylist ( info . index ) ; } ; handleTableSort = ( { sortBy , sortDirection , } ) => { } ; handleRowRightClick = ( params ) => { this . setState ( { contextParams : { x : params . event . clientX , y : params . event . clientY , index : params . index , } , } ) ; } ; handleContextMenuItemClick = ( data ) => { switch ( data ) { case 'existing' : this . props . store . player . existingQueueFromPlaylist ( this . state . contextParams . index ) ; break ; case 'new' : this . props . store . player . newQueueFromPlaylist ( this . state . contextParams . index ) ; break ; case 'remove' : this . props . store . playlist . removeTrackPlaylist ( this . state . contextParams . index ) ; break ; } } ; renderContextMenu ( ) { } render ( ) { const { store } = this . props ; return ( < div className = "songs" > < ContextMenu x = { this . state . contextParams . x } y = { this . state . contextParams . y } > < ContextMenuItem data = "existing" onClick = { this . handleContextMenuItemClick } > Add Track To Existing Queue < /ContextMenuItem> < ContextMenuItem data = "new" onClick = { this . handleContextMenuItemClick } > Add Track To New Queue < /ContextMenuItem> { } { store . state . playlist . currentPlaylist . type === 'normal' ? ( < ContextMenuItem data = "remove" onClick = { this . handleContextMenuItemClick } > Remove Track from Playlist < /ContextMenuItem>) : (<></ > ) } < /ContextMenu> < AutoSizer > { ( { height , width } ) => ( < Table headerHeight = { 26 } rowGetter = { this . rowGetter } noRowsRenderer = { this . noRowsRenderer } height = { height } rowHeight = { 28 } rowCount = { store . state . playlist . currentTracks . length } rowClassName = { this . rowClassName } onRowDoubleClick = { this . onRowDoubleClick } onRowRightClick = { this . handleRowRightClick } sort = { this . handleTableSort } sortBy = { this . props . store . state . settings . library . sortBy } sortDirection = { this . props . store . state . settings . library . sortDirection } width = { width } > { store . state . settings . columns . columns . map ( ( column , index ) => { if ( column [ 1 ] ) { if ( column [ 0 ] === 'Duration' ) { return ( < Column key = { index } label = "Duration" dataKey = "duration" disableSort = { true } width = { 125 } minWidth = { 125 } cellDataGetter = { ( { rowData , } ) => TimeUtils . parseToMinutes ( rowData . format . duration !== undefined ? rowData . format . duration : 0 ) } />); } if ( column [ 0 ] === 'Added At' ) { return ( < Column key = { index } label = { column [ 0 ] } dataKey = { column [ 0 ] . toLowerCase ( ) } width = { 125 } minWidth = { 125 } cellDataGetter = { ( { rowData , } ) => Moment ( rowData . stats . ctime ) . format ( 'DD-MM-YYYY' ) } />); } if ( column [ 0 ] === 'Modified At' ) { return ( < Column key = { index } label = { column [ 0 ] } dataKey = { column [ 0 ] . toLowerCase ( ) } width = { 125 } minWidth = { 125 } cellDataGetter = { ( { rowData , } ) => Moment ( rowData . stats . mtime ) . format ( 'DD-MM-YYYY' ) } />); } return ( < Column key = { index } label = { column [ 0 ] } dataKey = { column [ 0 ] . toLowerCase ( ) } width = { 100 } flexGrow = { 2 } minWidth = { 100 } cellDataGetter = { ( { rowData , } ) => rowData . common [ column [ 0 ] . toLowerCase ( ) ] } />); } } ) } < /Table>)} < /AutoSizer> < /div>); } }