From 5f7c4a81218e3eb90056207128222afef6ceb59e Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Mon, 6 Jun 2016 04:51:29 -0400
Subject: [PATCH] Make styles for MediaElement.js to add letterboxing

---
 js/page/watch.js        | 13 ++++---------
 scss/_mediaelement.scss | 16 ++++++++++++++++
 scss/all.scss           |  1 +
 3 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 scss/_mediaelement.scss

diff --git a/js/page/watch.js b/js/page/watch.js
index 0401d2de2..de35959d4 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -1,8 +1,3 @@
-var videoStyle = {
-  maxWidth: '100%',
-  maxHeight: '100%',
-};
-
 var WatchPage = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
@@ -34,9 +29,9 @@ var WatchPage = React.createClass({
           readyToPlay: true,
           mimeType: status.mime_type,
         })
-        var player = new MediaElementPlayer('#player', {
+        var player = new MediaElementPlayer(this.refs.player, {
           mode: 'shim', // Force Flash (for now)
-          // enableAutosize: true,
+          setDimensions: false,
         });
       }
     });
@@ -48,8 +43,8 @@ var WatchPage = React.createClass({
         <h3>Loading lbry://{this.props.name}</h3>
         {this.state.loadStatusMessage}...
       </div>
-      <video id="player" style={videoStyle} width="100%" height="100%">
-        <source type={this.state.mimeType} src={"/view?name=" + this.props.name} />
+      <video ref="player" width="100%" height="100%">
+        <source type={this.state.mimeType} src={'/view?name=' + this.props.name} />
       </video>
       </main>
     );
diff --git a/scss/_mediaelement.scss b/scss/_mediaelement.scss
new file mode 100644
index 000000000..44488808f
--- /dev/null
+++ b/scss/_mediaelement.scss
@@ -0,0 +1,16 @@
+@import "global";
+
+.mejs-container, .mejs-overlay, .mejs-mediaelement {
+  width: 100%;
+  height: 100%;
+}
+
+.me-plugin {
+  width: 100%;
+  height: 100%;
+
+  > embed {
+    width: 100%;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/scss/all.scss b/scss/all.scss
index 386eadf0c..67ae81b05 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -1,4 +1,5 @@
 @import "_reset";
 @import "_grid";
 @import "_icons";
+@import "_mediaelement";
 @import "_gui";
\ No newline at end of file