From 7c43f2de2c6e80eef30c55e226ade2de758550b5 Mon Sep 17 00:00:00 2001
From: mmcwilliams <hi@mmcwilliams.com>
Date: Sat, 15 Jun 2019 11:05:29 -0400
Subject: [PATCH] Add the film out screen and begin styling.

---
 app/css/app.css   | 15 +++++++++++++++
 app/index.html    |  8 ++++++--
 app/less/app.less |  2 +-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 2361b7b..557f1b5 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -739,6 +739,21 @@ button:focus {
   background: black;
   color: #fff;
 }
+#video_preview_wrap {
+  background: #000;
+  width: 100%;
+}
+#video_preview {
+  height: 400px;
+  min-height: 400px;
+  width: auto;
+  margin: 0 auto;
+  display: block;
+  opacity: 0;
+}
+#video_preview .on {
+  opacity: 1;
+}
 #screens {
   overflow-x: hidden;
 }
diff --git a/app/index.html b/app/index.html
index 851d523..ec179a2 100644
--- a/app/index.html
+++ b/app/index.html
@@ -345,8 +345,12 @@
       <div id="video" class="screen">
         <div>
           <div>
-            <input id="video_file" type="text" onclick="devices.digitalSelect();" readonly  />
-            <img src="#" id="video_preview">
+            <div id="path_bar">
+              <input id="video_file" type="text" onclick="devices.digitalSelect();" readonly  />
+            </div>
+            <div id="video_preview_wrap">
+              <img src="#" id="video_preview">
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/less/app.less b/app/less/app.less
index a04bc19..e48eb00 100644
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -8,7 +8,7 @@
 @import "./scroll.less";
 @import "./settings.less";
 @import "./mscript.less";
-
+@import "./video.less";
 
 #screens{
 	overflow-x: hidden;