From b6982854d81c37ff852c7bce91e943fa6909cc00 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 3 Feb 2017 05:25:05 -0500
Subject: [PATCH] Add Back button to Watch page

---
 js/page/watch.js      | 18 +++++++++++++++-
 scss/all.scss         |  3 ++-
 scss/page/_watch.scss | 50 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 scss/page/_watch.scss

diff --git a/js/page/watch.js b/js/page/watch.js
index c58d10281..4825049f2 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import {Icon} from '../component/common.js';
+import {Link} from '../component/link.js';
 import lbry from '../lbry.js';
 import LoadScreen from '../component/load_screen.js'
 
@@ -22,6 +24,9 @@ var WatchPage = React.createClass({
     lbry.getStream(this.props.name);
     this.updateLoadStatus();
   },
+  handleBackClicked: function() {
+    history.back();
+  },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
@@ -56,8 +61,19 @@ var WatchPage = React.createClass({
     return (
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
-        : <main className="full-screen">
+        : <main className="video full-screen">
             <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name} />
+            <div className="video__overlay">
+              <div className="video__back">
+                <Link icon="icon-arrow-circle-o-left" className="video__back-link" onClick={this.handleBackClicked}/>
+                <div className="video__back-label">
+                  <Icon icon="icon-caret-left" className="video__back-label-arrow" />
+                  <div className="video__back-label-content">
+                    Back to LBRY
+                  </div>
+                </div>
+              </div>
+            </div>
           </main>
     );
   }
diff --git a/scss/all.scss b/scss/all.scss
index 452cbbcac..8729eb666 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -10,4 +10,5 @@
 @import "component/_menu.scss";
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
-@import "page/_developer.scss";
\ No newline at end of file
+@import "page/_developer.scss";
+@import "page/_watch.scss";
\ No newline at end of file
diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss
new file mode 100644
index 000000000..ab3c9a577
--- /dev/null
+++ b/scss/page/_watch.scss
@@ -0,0 +1,50 @@
+.video {
+  background: #000;
+}
+
+.video__overlay {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  color: #fff;
+  z-index: 1;
+}
+
+.video__back {
+  margin-top: 30px;
+  margin-left: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.video__back-link {
+  font-size: 50px;
+}
+
+.video__back-label {
+  opacity: 0;
+  transition: opacity 100ms ease-in;
+}
+
+.video__back-link:hover + .video__back-label {
+  opacity: 1;
+}
+
+.video__back-label-arrow {
+  color: darken($color-primary, 5%);
+  font-size: 20px;
+}
+
+.video__back-label-content {
+  display: inline-block;
+  margin-left: -2px;
+  font-size: 20px;
+  padding: 10px;
+  border-radius: 3px;
+  background-color: darken($color-primary, 5%);
+  color: #fff;
+  pointer-events: none;
+}