80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ReactDOM from 'react-dom';
|
|
import { Link } from 'react-router-dom';
|
|
import reduxLang from '../../middleware/lang';
|
|
import GridImg from './GridImg';
|
|
|
|
@reduxLang('AppContent')
|
|
export default class CatalogItem extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { locale: props.locale };
|
|
}
|
|
|
|
handleMitmachenClick (event) {
|
|
event.stopPropagation();
|
|
let elem = ReactDOM.findDOMNode(event.target).parentNode.parentNode;
|
|
window.location.href = elem.getAttribute("href");
|
|
return false;
|
|
}
|
|
|
|
render() {
|
|
const { item, openDetail, index, locale, isInternal } = this.props;
|
|
|
|
if (isInternal && (item.youtube || item.video)) {
|
|
return null;
|
|
}
|
|
|
|
if (item.youtube && !item.image_width && !item.image_height) {
|
|
item.image_width = 480;
|
|
item.image_height = 360;
|
|
}
|
|
return (
|
|
<div className='CatalogItem grid-item'>
|
|
<div className='grid-gap'>
|
|
<Link
|
|
to={
|
|
item.inventory_number
|
|
? `/catalog/${item.inventory_number.replace(' ', '__')}`
|
|
: '/mitmachen' // this case is when it is an ad
|
|
}
|
|
onClick={item.inventory_number ? () => openDetail(index) : this.handleMitmachenClick} // only when not an add
|
|
>
|
|
<div className='CatalogItem__body'>
|
|
<GridImg
|
|
src={
|
|
item.youtube // case of youtube media
|
|
? `https://img.youtube.com/vi/${parse_video_id(
|
|
item.youtube
|
|
)}/0.jpg`
|
|
: item.inventory_number // other cases
|
|
? item.thumbnail // case of image or video
|
|
: item[locale] // case of bubble
|
|
}
|
|
item={item}
|
|
/>
|
|
{(item.video || item.youtube) && (
|
|
<img
|
|
className='CatalogItem__videoIcon'
|
|
src='/static/gfx/alps_play.svg'
|
|
/>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
CatalogItem.propTypes = {
|
|
item: PropTypes.object.isRequired,
|
|
openDetail: PropTypes.func.isRequired,
|
|
index: PropTypes.number.isRequired
|
|
};
|
|
|
|
function parse_video_id(url) {
|
|
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
|
|
var match = url.match(regExp);
|
|
return match && match[7].length == 11 ? match[7] : false;
|
|
}
|