fixes bug 1167368 - Selfies

.eslintrc

@@ -8,7 +8,8 @@
         "console": 1,
         "moment": 1,
         "S3Upload": 1,
-        "humanFilesize": 1
+        "humanFileSize": 1,
+        "humanizeDuration": 1
     },
     "rules": {
         "quotes": [2, "single"],

.gitignore

@@ -28,3 +28,4 @@ roku/airmozilla.zip
 ghostdriver.log
 /node_modules/
 /tags
+npm-debug.log

airmozilla/main/templates/main/main_base.html

@@ -51,8 +51,8 @@
                 {% if nav_main['unfinished_events'] %}  {# comes from the nav_bar context processor #}
                 <li><a href="{{ url('new:home') }}">Unfinished Videos ({{ nav_main['unfinished_events'] }})</a></li>
                 {% endif %}
-                <li><a href="{{ url('new:home') }}">Webcamera Video</a></li>
-                <li><a href="{{ url('new:home') }}/upload">Upload Video</a></li>
+                <li><a href="{{ url('new:home') }}record">Web Camera Video</a></li>
+                <li><a href="{{ url('new:home') }}upload">Upload Video</a></li>
                 <li><a href="{{ url('suggest:start') }}#new-upcoming">Upcoming Event</a></li>
                 <li><a href="{{ url('suggest:start') }}#new-popcorn">Popcorn Video</a></li>
               </ul>

airmozilla/new/static/new/css/new.css

@@ -1,3 +1,8 @@
+[ng-cloak],
+.ng-cloak {
+  display: none !important;
+}
+
 input.has-error,
 textarea.has-error {
     border: 1px solid darkred;
@@ -264,3 +269,90 @@ button.delete-button, button.delete-confirm, button.delete-cancel {
     font-size: 70%;
     padding: 5px 8px;
 }
+
+
+video {
+    width: 100%;
+    border-radius: 4px;
+}
+video.recording {
+    box-shadow: 0 0 30px 7px #f9493c;
+    /*box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset !important;*/
+    -webkit-animation-name: redPulse;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-iteration-count: infinite;
+    -moz-animation-name: redPulse;
+    -moz-animation-duration: 2s;
+    -moz-animation-iteration-count: infinite;
+    animation-name: redPulse;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+}
+video.ready {
+    box-shadow: 0 0 9px 2px #5de243;
+}
+
+@-webkit-keyframes redPulse {
+  from { background-color: #f9493c; -webkit-box-shadow: 0 0 9px #333; }
+  50% { background-color: #f9493c; -webkit-box-shadow: 0 0 18px #f9493c; }
+  to { background-color: #f9493c; -webkit-box-shadow: 0 0 9px #333; }
+}
+@-moz-keyframes redPulse {
+  from { background-color: #f9493c; -moz-box-shadow: 0 0 9px #333; }
+  50% { background-color: #f9493c; -moz-box-shadow: 0 0 18px #f9493c; }
+  to { background-color: #f9493c; -moz-box-shadow: 0 0 9px #333; }
+}
+@keyframes redPulse {
+  from { background-color: #f9493c; box-shadow: 0 0 9px #333; }
+  50% { background-color: #f9493c; box-shadow: 0 0 18px #f9493c; }
+  to { background-color: #f9493c; box-shadow: 0 0 9px #333; }
+}
+
+/*@-moz-keyframes blinker {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.3; }
+    100% { opacity: 1.0; }
+}
+@-webkit-keyframes blinker {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.3; }
+    100% { opacity: 1.0; }
+}
+@keyframes blinker {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.3; }
+    100% { opacity: 1.0; }
+}*/
+
+
+.video-outer {
+    position: relative;
+}
+.video-outer .start-stop-button,
+.video-outer .countdown {
+    text-align: center;
+    z-index: 100;
+    position: absolute;
+}
+.video-outer .countdown {
+    left: 40%;
+    top: 14%;
+    font-size: 2000%;
+    font-weight: bold;
+}
+.video-outer .start-stop-button {
+    left: 45%;
+    top: 45%;
+}
+.video-outer .about-filesize {
+    font-size: 80%;
+}
+.after-recording {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.extra-note {
+    margin-top: 110px;
+    font-size: 80%;
+}