more basic ui elements

packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx

@@ -38,7 +38,10 @@ export default function VideoQuickTrim({
   }
   return (
     <div className="fy-video-quicktrim">
-      <VideoFakeyou {...rest} controls={false}/>
+      <div className="video-wrapper">
+        <VideoFakeyou {...rest} controls={false}/>
+        <div className="playpause-overlay">PLAY</div>
+      </div>
       <div className="playbar">
         <div className="trimzone" />
         <div className="playcursor"/>

packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss

@@ -1,4 +1,13 @@
 .fy-video-quicktrim {
+  .video-wrapper{
+    position: relative;
+  }
+  .playpause-overlay{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
   .playbar{
     position:relative;
     height: 2rem;

packages/fakeyou.com/src/v2/view/pages/components_library/sandbox.tsx

@@ -17,5 +17,12 @@ export default function ComponentSandbox(
       onChange={onChange}
       mediaToken='m_wdptbe5rfzpb1gzhva78gpw8qrkgs9'
     />
+    <br/>
+    <br/>
+    <VideoQuickTrim 
+      onChange={onChange}
+      mediaToken='m_h21nykes0j3ph23y5z7w9axtjjn2rr'
+    />
+
   </>);
 }