LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-14 14:29:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Make styles for MediaElement.js to add letterboxing

Browse source
This commit is contained in:
Alex Liebowitz 2016-06-06 04:51:29 -04:00
parent e6869e2cf7
commit 5f7c4a8121
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
js/page/watch.js
View file

@ -1,8 +1,3 @@
var videoStyle = {
maxWidth: '100%',
maxHeight: '100%',
};
var WatchPage = React.createClass({ var WatchPage = React.createClass({
propTypes: { propTypes: {
name: React.PropTypes.string, name: React.PropTypes.string,
@ -34,9 +29,9 @@ var WatchPage = React.createClass({
readyToPlay: true, readyToPlay: true,
mimeType: status.mime_type, mimeType: status.mime_type,
}) })
var player = new MediaElementPlayer('#player', { var player = new MediaElementPlayer(this.refs.player, {
mode: 'shim', // Force Flash (for now) 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> <h3>Loading lbry://{this.props.name}</h3>
{this.state.loadStatusMessage}... {this.state.loadStatusMessage}...
</div> </div>
<video id="player" style={videoStyle} width="100%" height="100%"> <video ref="player" width="100%" height="100%">
<source type={this.state.mimeType} src={"/view?name=" + this.props.name} /> <source type={this.state.mimeType} src={'/view?name=' + this.props.name} />
</video> </video>
</main> </main>
); );

16
scss/_mediaelement.scss Normal file
View file

@ -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%;
}
}

1
scss/all.scss
View file

@ -1,4 +1,5 @@
@import "_reset"; @import "_reset";
@import "_grid"; @import "_grid";
@import "_icons"; @import "_icons";
@import "_mediaelement";
@import "_gui"; @import "_gui";