Add video thumbnail icon
This commit is contained in:
parent
5ca7cc5eeb
commit
477a499ba9
|
@ -1,8 +1,8 @@
|
||||||
import React, { useCallback, useState } from 'react'
|
import React, { useCallback, useState } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { Icon } from 'semantic-ui-react'
|
|
||||||
import { ProtectedImage } from './ProtectedMedia'
|
import { ProtectedImage } from './ProtectedMedia'
|
||||||
import { MediaType } from '../../../__generated__/globalTypes'
|
import { MediaType } from '../../../__generated__/globalTypes'
|
||||||
|
import { ReactComponent as VideoThumbnailIconSVG } from './icons/videoThumbnailIcon.svg'
|
||||||
|
|
||||||
const MediaContainer = styled.div`
|
const MediaContainer = styled.div`
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
@ -135,11 +135,11 @@ const SidebarIconWrapper = styled(HoverIcon)`
|
||||||
right: 0;
|
right: 0;
|
||||||
`
|
`
|
||||||
|
|
||||||
const VideoThumbnailIcon = styled(Icon)`
|
const VideoThumbnailIcon = styled(VideoThumbnailIconSVG)`
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 16px);
|
left: calc(50% - 17.5px);
|
||||||
top: calc(50% - 13px);
|
top: calc(50% - 22px);
|
||||||
`
|
`
|
||||||
|
|
||||||
type MediaThumbnailProps = {
|
type MediaThumbnailProps = {
|
||||||
|
@ -181,7 +181,7 @@ export const MediaThumbnail = ({
|
||||||
|
|
||||||
let videoIcon = null
|
let videoIcon = null
|
||||||
if (media.type == MediaType.Video) {
|
if (media.type == MediaType.Video) {
|
||||||
videoIcon = <VideoThumbnailIcon name="play" size="big" />
|
videoIcon = <VideoThumbnailIcon />
|
||||||
}
|
}
|
||||||
|
|
||||||
let minWidth = 100
|
let minWidth = 100
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="35px" height="44px" viewBox="0 0 35 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<path d="M3.07677855,0.965719632 L33.3619943,20.3146075 C34.2928109,20.9092959 34.5652967,22.145962 33.9706083,23.0767786 C33.814312,23.3214163 33.606632,23.5290962 33.3619943,23.6853925 L3.07677855,43.0342804 C2.14596197,43.6289687 0.909295855,43.356483 0.31460748,42.4256664 C0.10916386,42.1041025 4.6731219e-17,41.7304772 0,41.3488878 L0,2.65111215 C-1.3527075e-16,1.54654265 0.8954305,0.651112151 2,0.651112151 C2.38158936,0.651112151 2.75521463,0.760276012 3.07677855,0.965719632 Z" fill="currentColor"></path>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 708 B |
Loading…
Reference in New Issue