1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { formatDateTime } from '../../../util'
import { MenuButton, SmallMenuButton, Loader } from '../../../common'
import actions from '../../../actions'
import { thumbnailURL } from '../../align/align.util'
import MediaIndexOptions from '../components/media.indexOptions'
import MediaMenu from '../components/media.menu'
// const { result, collectionLookup } = this.props
class MediaIndex extends Component {
componentDidMount() {
// this.fetch(false)
}
componentDidUpdate(prevProps) {
if (this.props.media.options.sort !== prevProps.media.options.sort) {
this.fetch(false)
}
}
fetch(load_more) {
const { options, index } = this.props.media
const { order: index_order } = index
const [ sort, order ] = options.sort.split(' ')
actions.media.index({
sort, order, limit: 5000, // offset: load_more ? index_order.length : 0,
}, load_more)
}
render() {
const { mediaActions } = this.props
const { options } = this.props.media
const { loading, lookup, order } = this.props.media.index
if (loading) {
return (
<section>
<MediaIndexOptions />
<div className="row">
{order && !!order.length &&
<div className={'results ' + options.thumbnailSize}>
{order.map(id => <MediaItem key={id} data={lookup[id]} />)}
</div>
}
</div>
<Loader />
</section>
)
}
if (!lookup || !order.length) {
return (
<section>
<MediaIndexOptions />
<div className="row">
<MediaMenu />
<p className='gray'>
{"No media"}
</p>
</div>
</section>
)
}
return (
<section>
<MediaIndexOptions />
<div className="row">
<MediaMenu />
<div className={'results ' + options.thumbnailSize}>
<h2>Images</h2>
{order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)}
<h2>Video</h2>
{order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)}
</div>
</div>
{order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
</section>
)
}
}
const MediaItem = ({ data }) => {
// console.log(data)
return (
<div className='cell'>
<div className='img'>
<Link to={"/media/" + data.id + "/edit/"}>
<img src={thumbnailURL(data)} alt={data.title} />
</Link>
</div>
<div className='meta center'>
<div>
<i>{data.title}</i><br />
{data.author}<br />
{data.date}
</div>
</div>
</div>
)
}
const mapStateToProps = state => ({
media: state.media,
})
const mapDispatchToProps = dispatch => ({
// uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(MediaIndex)
|
