All files / posts-table/components/PostsTable/components/PostItem/components Attachment.jsx

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
116
117
118
119
120
121
122
123
124
125
126
127
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Text } from '@bufferapp/components';
import ReactPlayer from 'react-player'
 
const Container = styled.div`
  width: 14rem;
  height: 14rem;
  border-radius: 3px 0 0 3px;
  border: 1px solid #DEDEDE;
  border-width: 0 1px 0 0;
  overflow: hidden;
`;
 
const Media = styled.div`
  width: 100%;
  height: 100%;
  background: transparent;
  background-image: url(${props => props.thumbnail});
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
`;
 
const Empty = styled.div`
  width: 100%;
  height: 100%;
  background: #FDFDFD;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -2px 0 8px rgba(0,0,0,0.05);
  box-sizing: border-box;
`;
 
const TypeIcon = styled.div`
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;
 
const MediaContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
`;
 
const VideoIcon = () => (<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M11.52 4.16V1.92819C11.52 0.865872 10.6567 0 9.59181 0L1.92819 0C0.865872 0 0 0.86328 0 1.92819V9.59181C0 10.6541 0.86328 11.52 1.92819 11.52H9.59181C10.6541 11.52 11.52 10.6567 11.52 9.59181V7.36L13.8916 9.33634C14.6993 10.0094 15.36 9.70055 15.36 8.64037V2.87963C15.36 1.81194 14.7026 1.50785 13.8916 2.18366L11.52 4.16Z" fill="black" />
</svg>);
 
const CarouselIcon = () => (<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.895433 0 2V9.52C0 10.6246 0.895433 11.52 2 11.52H10.52C11.0723 11.52 11.52 11.0723 11.52 10.52V2C11.52 0.895431 10.6246 0 9.52 0H2ZM5.23512 14.7536C4.25568 14.7536 3.44067 14.0496 3.26859 13.12H12.1193C12.6716 13.12 13.1193 12.6723 13.1193 12.12V3.26673C14.05 3.43797 14.7551 4.25347 14.7551 5.23365V12.7536C14.7551 13.8582 13.8597 14.7536 12.7551 14.7536H5.23512Z" fill="black"/>
</svg>);
 
const Attachment = ({ type, media }) => {
  function hasAttachment(type, media) {
    return (['picture', 'photo', 'video', 'image', 'carousel_album', 'link'].includes(type) && media);
  }
 
  function getThumbnail() {
    if (type === 'video') {
      return (<MediaContainer>
        {String(media.thumbnail).match(/\.mp4/) && <ReactPlayer
          url={media.thumbnail}
          width="200%"
          height="200%"
          mute
          style={{
            display: 'flex',
            background: '#F5F5F5',
            width: '200%',
            height: '200%',
            position: 'relative',
            top: '-50%',
            left: '-50%',
          }}
        />}
        {!String(media.thumbnail).match(/\.mp4/) &&
          <Media thumbnail={`https://safeimage.buffer.com/224x/${media.thumbnail}`} />
        }
        <TypeIcon> <VideoIcon /> </TypeIcon>
      </MediaContainer>);
    }
    if (type === 'carousel_album') {
      return (<MediaContainer>
        <Media thumbnail={`https://safeimage.buffer.com/224x/${media.thumbnail}`} />
        <TypeIcon> <CarouselIcon /> </TypeIcon>
      </MediaContainer>);
    }
 
    return <Media thumbnail={`https://safeimage.buffer.com/224x/${media.thumbnail}`} />;
  }
 
  return (
    <Container>
      {hasAttachment(type, media)
        ? getThumbnail()
        : <Empty><Text color="lightSlate">No media</Text></Empty>
      }
    </Container>
  )
};
 
Attachment.defaultProps = {
  media: null,
};
 
Attachment.propTypes = {
  type: PropTypes.string.isRequired,
  media: PropTypes.shape({
    thumbnail: PropTypes.String,
    picture: PropTypes.String,
  }),
};
 
export default Attachment;