Merge branch 'master' of https://github.com/tongyliu/MediVision

tongyliu · Feb 19, 2017 · 47b4f42 · 47b4f42
2 parents 580385e + d1c7d46
commit 47b4f42
Show file tree

Hide file tree

Showing 19 changed files with 359 additions and 87 deletions.
diff --git a/web/client/app/css/_reset.scss b/web/client/app/css/_reset.scss
diff --git a/web/client/app/css/_values.scss b/web/client/app/css/_values.scss
@@ -5,8 +5,9 @@ $white: #ffffff;
 $red: #fc6367;
 $green: #63b400;
 $blue: #43abde;
+$grey: #ededed;
 
 /*= Typography
 --------------------------------------*/
 
-$base-font: sans-serif;
+$base-font: 'Helvetica Neue', Arial, sans-serif;
diff --git a/web/client/app/css/components/_all.scss b/web/client/app/css/components/_all.scss
@@ -5,3 +5,4 @@
 @import 'streams-page';
 @import 'viewer-page';
 @import 'webrtc-video';
+@import 'top-bar';
diff --git a/web/client/app/css/components/_broadcaster-page.scss b/web/client/app/css/components/_broadcaster-page.scss
@@ -1,3 +1,27 @@
 .broadcaster-page {
-	color: $green;
+	max-width: 800px;
+	padding: 20px;
+	margin: 0 auto;
+}
+
+.ip-form {
+	max-width: 500px;
+	margin: 40px auto;
+	padding: 20px;
+
+	label {
+		display: block;
+		margin-bottom: 10px;
+		font-size: 1.6em;
+	}
+
+	input {
+		font-size: 1.8em;
+		width: 100%;
+		padding: 5px 10px;
+	}
+
+	button {
+		margin-top: 15px;
+	}
 }
diff --git a/web/client/app/css/components/_home-page.scss b/web/client/app/css/components/_home-page.scss
@@ -1,5 +1,16 @@
 .home-page {
-	#my-video {
-		margin: 40px;
+	max-width: 800px;
+	padding: 20px;
+	margin: 0 auto;
+
+	.jumbotron {
+		p {
+			margin: 10px 0 20px;
+		}
+
+		.btn {
+			margin-right: 20px;
+			margin-bottom: 10px;
+		}
 	}
 }
diff --git a/web/client/app/css/components/_streams-page.scss b/web/client/app/css/components/_streams-page.scss
@@ -1,3 +1,22 @@
 .streams-page {
-	color: $blue;
+	max-width: 800px;
+	padding: 20px;
+	margin: 0 auto;
+
+	.stream-list {
+		margin-top: 40px;
+
+		.no-stream-msg {
+			text-align: center;
+			font-size: 1.4em;
+		}
+
+		.btn {
+			margin-bottom: 10px;
+		}
+
+		.text-muted {
+			font-style: italic;
+		}
+	}
 }
diff --git a/web/client/app/css/components/_top-bar.scss b/web/client/app/css/components/_top-bar.scss
@@ -0,0 +1,9 @@
+.top-bar {
+	margin-bottom: 40px;
+	border-bottom: 1px solid $grey;
+	text-align: left;
+
+	a, a:hover {
+		text-decoration: none;
+	}
+}
diff --git a/web/client/app/css/components/_viewer-page.scss b/web/client/app/css/components/_viewer-page.scss
@@ -1,3 +1,5 @@
 .viewer-page {
-	color: $blue;
+	max-width: 800px;
+	padding: 20px;
+	margin: 0 auto;
 }
diff --git a/web/client/app/css/components/_webrtc-video.scss b/web/client/app/css/components/_webrtc-video.scss
@@ -1,10 +1,14 @@
 .parent-video {
 	margin: 40px;
+	text-align: center;
 
 	button {
 		display: block;
 		margin: 30px auto;
-		padding: 10px;
-		font-size: 1em;
 	}
 }
+
+.child-video {
+	margin: 40px;
+	text-align: center;
+}
diff --git a/web/client/app/css/styles.scss b/web/client/app/css/styles.scss
@@ -1,14 +1,6 @@
-@import 'reset';
 @import 'values';
 @import 'components/all';
 
 body {
 	font-family: $base-font;
-	color: $red;
-	text-align: center;
-	margin-top: 50px;
-
-	h1 {
-		font-size: 64px;
-	}
 }
diff --git a/web/client/app/index.hbs b/web/client/app/index.hbs
@@ -2,10 +2,11 @@
 <html>
 <head>
 	<title>MediVision</title>
+	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 	<link rel="stylesheet" type="text/css" href="styles.css"/>
 </head>
 </body>
-	<div id="app-container"></div>
+	<div id="app-container" class="container"></div>
 	<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 	<script type="text/javascript" src="{{jsFile}}"></script>
 </body>

diff --git a/web/client/app/js/components/broadcaster-page.js b/web/client/app/js/components/broadcaster-page.js
@@ -5,15 +5,90 @@
  */
 
 var React = require('react');
+var TopBar = require('./top-bar');
+var ParentVideo = require('./webrtc-video').ParentVideo;
+var Address4 = require('ip-address').Address4;
+var qs = require('qs');
+
+var IpForm = React.createClass({
+  getInitialState: function() {
+    return { ip: '' };
+  },
+
+  render: function() {
+    return (
+      <div className="ip-form panel panel-default">
+        <div className="panel-body">
+          <form onSubmit={this._handleSubmit}>
+            <label htmlFor="ip-input">Enter HoloLens IP Address</label>
+            <input
+              id="ip-input" type="text"
+              onChange={this._onChange} value={this.state.ip}
+            />
+            <button className="btn btn-lg btn-success">
+              Next
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  },
+
+  _onChange: function(evt) {
+    this.setState({ ip: evt.target.value });
+  },
+
+  _handleSubmit: function(evt) {
+    evt.preventDefault();
+    if (this._validate()) {
+      this.props.onSubmit(this.state.ip);
+    } else {
+      alert('Invalid IP address, try again.');
+    }
+  },
+
+  _validate: function() {
+    var addr = new Address4(this.state.ip);
+    return addr.isValid();
+  }
+});
 
 var BroadcasterPage = React.createClass({
+  getInitialState: function() {
+    return { holoLensIp: null };
+  },
+
   render: function() {
-    // TODO: Replace with actual page design
+    var pageComponent;
+
+    if (this.state.holoLensIp) {
+      var videoUrl = this._generateVideoUrl();
+      pageComponent = <ParentVideo src={videoUrl} autoPlay={true} loop={true}/>
+    } else {
+      pageComponent = <IpForm onSubmit={this.submitIp}/>
+    }
+
     return (
       <div className="broadcaster-page">
-        <h1>Start a Stream</h1>
+        <TopBar />
+        {pageComponent}
       </div>
     );
+  },
+
+  submitIp: function(ip) {
+    this.setState({ holoLensIp: ip });
+  },
+
+  _generateVideoUrl: function() {
+    var baseUrl = 'https://' + this.state.holoLensIp;
+    var queryString = qs.stringify({
+      holo: false,
+      pv: true,
+      mic: true,
+      loopback: false
+    });
+    return baseUrl + '/api/holographic/stream/live_high.mp4' + queryString;
   }
 });
 

diff --git a/web/client/app/js/components/home-page.js b/web/client/app/js/components/home-page.js
@@ -5,16 +5,31 @@
  */
 
 var React = require('react');
-var ParentVideo = require('./webrtc-video').ParentVideo;
+var Link = require('react-router').Link;
+var TopBar = require('./top-bar');
 
 var HomePage = React.createClass({
   render: function() {
-    // TODO: Replace with actual homepage design
-    var videoUrl = 'oceans.mp4';
     return (
       <div className="home-page">
-        <h1>Hello, World!</h1>
-        <ParentVideo id="my-video" width="320px" height="480px" src={videoUrl}/>
+        <TopBar />
+        <div className="jumbotron">
+          <h1>MediVision</h1>
+          <p className="lead">
+            Better medical training through real-time video streaming.
+            MediVision allows students and residents to learn from real-world
+            cases as they happen, without having to physically be in a
+            hospital.
+          </p>
+          <nav>
+            <Link to="/broadcast" className="btn btn-lg btn-primary">
+              Start a Stream
+            </Link>
+            <Link to="/streams" className="btn btn-lg btn-primary">
+              Browse Streams
+            </Link>
+          </nav>
+        </div>
       </div>
     );
   }