Add video thumbnail icon

ui/src/components/photoGallery/MediaThumbnail.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
-import { Icon } from 'semantic-ui-react'
 import { ProtectedImage } from './ProtectedMedia'
 import { MediaType } from '../../../__generated__/globalTypes'
+import { ReactComponent as VideoThumbnailIconSVG } from './icons/videoThumbnailIcon.svg'
 
 const MediaContainer = styled.div`
   flex-grow: 1;
@@ -135,11 +135,11 @@ const SidebarIconWrapper = styled(HoverIcon)`
   right: 0;
 `
 
-const VideoThumbnailIcon = styled(Icon)`
+const VideoThumbnailIcon = styled(VideoThumbnailIconSVG)`
   color: rgba(255, 255, 255, 0.8);
   position: absolute;
-  left: calc(50% - 16px);
-  top: calc(50% - 13px);
+  left: calc(50% - 17.5px);
+  top: calc(50% - 22px);
 `
 
 type MediaThumbnailProps = {
@@ -181,7 +181,7 @@ export const MediaThumbnail = ({
 
   let videoIcon = null
   if (media.type == MediaType.Video) {
-    videoIcon = <VideoThumbnailIcon name="play" size="big" />
+    videoIcon = <VideoThumbnailIcon />
   }
 
   let minWidth = 100

ui/src/components/photoGallery/icons/videoThumbnailIcon.svg

@@ -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>