From 186c63bf303bd99cd3b6c564821e8535decb924f Mon Sep 17 00:00:00 2001
From: Jessop Breth <jessopb@gmail.com>
Date: Sun, 18 Nov 2018 20:57:54 -0500
Subject: [PATCH] adds playbutton overlay to videos

---
 client/scss/_asset-preview.scss              | 35 ++++++++++++++++++--
 client/src/components/AssetPreview/index.jsx | 19 ++++++-----
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/client/scss/_asset-preview.scss b/client/scss/_asset-preview.scss
index 5ad362d7..b9290fe6 100644
--- a/client/scss/_asset-preview.scss
+++ b/client/scss/_asset-preview.scss
@@ -1,16 +1,17 @@
-.asset-preview-image {
+.asset-preview__image {
   width  : 100%;
   padding: 0;
   margin : 0;
 }
 
-.asset-preview-video {
+.asset-preview__video {
   cursor: pointer;
   background-color: #ffffff;
   width: 100%;
+  position: relative;
 }
 
-h3.list-title {
+h3.asset-preview__title {
   margin: 0;
   text-overflow: ellipsis;
   word-wrap: break-word;
@@ -18,3 +19,31 @@ h3.list-title {
   line-height: 1em;
   max-height: 2em;
 }
+
+.asset-preview__play-wrapper {
+  border: 0px;
+  padding: 0px;
+  margin: auto;
+  position: relative;
+}
+
+.asset-preview__play-overlay {
+  padding: 0;
+  border: 0;
+  position: absolute;
+  opacity: .50;
+  height: 50%;
+  top: 25%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  margin: 0 auto;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='lightgray' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.asset-preview__play-wrapper:hover .asset-preview__play-overlay {
+  opacity: 1.0;
+}
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index 4da63eb1..13b17ef9 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/client/src/components/AssetPreview/index.jsx
@@ -15,11 +15,11 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
         <Link to={showUrl} className='asset-preview'>
           <div>
             <img
-              className={'asset-preview-image'}
+              className={'asset-preview__image'}
               src={embedUrl}
               alt={name}
             />
-            <h3 className='list-title'>{title}</h3>
+            <h3 className='asset-preview__title'>{title}</h3>
           </div>
         </Link>
       );
@@ -27,12 +27,15 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
       return (
         <Link to={showUrl} className='asset-preview'>
           <div>
-            <img
-              className={'asset-preview-video'}
-              src={thumbnail || defaultThumbnail}
-              alt={name}
-            />
-            <h3 className='list-title'>{title}</h3>
+            <div className='asset-preview__play-wrapper'>
+              <img
+                className={'asset-preview__video'}
+                src={thumbnail || defaultThumbnail}
+                alt={name}
+              />
+              <div className='asset-preview__play-overlay'></div>
+            </div>
+            <h3 className='asset-preview__title'>{title}</h3>
           </div>
         </Link>
       );