Permalink
Browse files

converted video player to use custom control bar

  • Loading branch information...
1 parent 83a8e1d commit abcb8409ee62d0745cd0ca82c5a6ce18cfdcdac7 Eric Matthys committed May 10, 2012
View
@@ -7337,6 +7337,7 @@ footer a.github {
-ms-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
+ -webkit-transform: translate3d(0, 0, 0);
}
footer a.github:hover {
opacity: 1;
@@ -7822,6 +7823,7 @@ h1.plex-icon {
-ms-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
+ -webkit-transform: translate3d(0, 0, 0);
}
#home-btn:hover {
opacity: 1;
@@ -8688,7 +8690,6 @@ ul.nav .dropdown-menu:after {
position: fixed;
left: 0;
top: 60px;
- padding-bottom: 2px;
width: 100%;
z-index: 3;
border-bottom: 1px solid #333;
@@ -8717,14 +8718,14 @@ ul.nav .dropdown-menu:after {
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
-#music-player .now-playing-label,
-#music-player .now-playing-title {
+.now-playing-label,
+.now-playing-title {
display: inline-block;
height: 30px;
font-size: 14px;
line-height: 30px;
}
-#music-player .now-playing-label {
+.now-playing-label {
margin-right: 4px;
opacity: 0.5;
filter: alpha(opacity=50);
@@ -8748,7 +8749,7 @@ video.player-fullscreen {
}
.player-controls {
width: 100%;
- height: 38px;
+ height: 40px;
overflow: hidden;
border-top: 1px solid #000000;
background-color: #141414;
@@ -8779,6 +8780,7 @@ video.player-fullscreen {
-ms-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
+ -webkit-transform: translate3d(0, 0, 0);
}
.player-controls-collapsed {
height: 9px;
@@ -8792,14 +8794,14 @@ video.player-fullscreen {
position: absolute;
left: 0;
top: 0;
- background: url(../img/lens_play.png) no-repeat center;
+ background: url(../img/player_play.png) no-repeat center;
}
.player-overlay-replay-button {
cursor: pointer !important;
position: absolute;
left: 0;
top: 0;
- background: url(../img/lens_replay.png) no-repeat center;
+ background: url(../img/player_replay.png) no-repeat center;
}
.player-play-pause-button,
.player-fullscreen-button,
@@ -8823,7 +8825,7 @@ video.player-fullscreen {
transition: none;
}
.player-play-pause-button {
- background: url(../img/lens_controls.png) no-repeat 0 0;
+ background: url(../img/player_controls.png) no-repeat 0 0;
}
.player-play-pause-button:hover {
background-position: -40px 0;
@@ -8836,14 +8838,14 @@ video.player-fullscreen {
}
.player-fullscreen-button {
float: right;
- background: url(../img/lens_controls.png) no-repeat 0 -330px;
+ background: url(../img/player_controls.png) no-repeat 0 -330px;
}
.player-fullscreen-button:hover {
background-position: -40px -330px;
}
.player-volume > .player-slider-button {
float: right;
- background: url(../img/lens_controls.png) no-repeat 0 -60px;
+ background: url(../img/player_controls.png) no-repeat 0 -60px;
}
.player-volume > .player-slider-button:hover {
background-position: -40px -60px;
@@ -8861,7 +8863,7 @@ video.player-fullscreen {
background-position: -40px -120px !important;
}
.player-playback-rate > .player-slider-button {
- background: url(../img/lens_controls.png) no-repeat 0 -150px;
+ background: url(../img/player_controls.png) no-repeat 0 -150px;
}
.player-playback-rate > .player-slider-button:hover {
background-position: -40px -150px;
File renamed without changes
File renamed without changes
File renamed without changes
@@ -28,6 +28,9 @@ define(
function onFetchMetadataSuccess(response) {
transcoder.video(item.get('Media').Part.key, onTranscodeSuccess, onTranscodeError);
+
+ // Hide the loading indicator
+ dispatcher.trigger('command:ShowLoading', false);
}
function onTranscodeSuccess(url, session) {
@@ -11,6 +11,8 @@ define(
soundManager = new SoundManager();
soundManager.url = 'swf/';
soundManager.flashVersion = 9;
+ soundManager.useFastPolling = true;
+ soundManager.useHighPerformance = true;
soundManager.beginDelayedInit();
}
);
@@ -40,7 +40,7 @@ define(
return url;
},
- video: function (path, success, error) {
+ video: function (path, successCallback, errorCallback) {
var server = appModel.get('server');
var user = appModel.get('user');
var token = server.get('accessToken') ? server.get('accessToken') : user.get('authentication_token');
@@ -77,11 +77,11 @@ define(
var session = m3u8Rel.split('/')[1];
var m3u8 = baseURL + m3u8Rel;
- success.call(this, m3u8, session);
+ successCallback(m3u8, session);
},
error: function (xhr, status, error) {
- error(xhr, status, error);
+ errorCallback(xhr, status, error);
}
})
}
@@ -112,6 +112,10 @@ define(
this.$el.append(view.render().el);
+ if (typeof(view.ready) === 'function') {
+ view.ready();
+ }
+
// Reset the scroll position to the top of the page
window.scrollTo(0, 0);
},
@@ -2,7 +2,6 @@ define(
[
'plex/control/Dispatcher',
'plex/control/utils/Transcoder',
- 'plex/model/AppModel',
'plex/model/PlayerModel',
'plex/view/BaseView',
'plex/view/players/core/ControlsView',
@@ -13,14 +12,14 @@ define(
'use!soundmanager'
],
- function (dispatcher, transcoder, appModel, PlayerModel, BaseView, ControlsView) {
+ function (dispatcher, transcoder, PlayerModel, BaseView, ControlsView) {
var MusicPlayerView = BaseView.extend({
id: 'music-player',
className: 'animated slideDown',
playerModel: undefined,
- player: undefined,
+ controls: undefined,
sound: undefined,
volume: 1, // Used to persist volume from song to song
@@ -30,23 +29,23 @@ define(
initialize: function () {
_.bindAll(this, 'onPlay', 'whileLoading', 'whitePlaying', 'onFinish');
- this.playerModel = new PlayerModel();
+ this.playerModel = new PlayerModel({ showMusicIcon: true });
- this.player = this.registerView(new ControlsView({
+ this.controls = this.registerView(new ControlsView({
model: this.playerModel,
hidePlaybackRate: true,
hideFullscreen: true
}));
- this.addBinding(this.player, 'playPause', this.onControlsPlayPause);
- this.addBinding(this.player, 'seek', this.onControlsSeek);
- this.addBinding(this.player, 'change:volume', this.onControlsVolumeChange);
+ this.addBinding(this.controls, 'playPause', this.onControlsPlayPause);
+ this.addBinding(this.controls, 'seek', this.onControlsSeek);
+ this.addBinding(this.controls, 'change:volume', this.onControlsVolumeChange);
},
render: function () {
this.$el.html('');
- this.$el.append(this.player.render().el);
+ this.$el.append(this.controls.render().el);
return this;
},
@@ -1,17 +1,17 @@
define(
[
'text!templates/players/VideoPlayerView.tpl',
- 'plex/control/utils/Transcoder',
- 'plex/model/AppModel',
+ 'plex/model/PlayerModel',
'plex/view/BaseView',
+ 'plex/view/players/core/VideoWrapperView',
// Globals
'use!backbone',
'use!handlebars',
'use!mediaelement'
],
- function (template, transcoder, appModel, BaseView) {
+ function (template, PlayerModel, BaseView, VideoWrapperView) {
var tpl = Handlebars.compile(template);
@@ -20,12 +20,35 @@ define(
tagName: 'section',
className: 'content fixed-width animated-fast scaleIn',
+ playerModel: undefined,
+ wrapper: undefined,
player: undefined,
+
+ initialize: function () {
+ this.playerModel = new PlayerModel({
+ url: this.model.get('url'),
+ title: this.model.get('title')
+ });
+
+ this.wrapper = this.registerView(new VideoWrapperView({ model: this.playerModel }));
+ },
render: function () {
this.$el.html(tpl(this.model.toJSON()));
+ this.$el.append(this.wrapper.render().el);
+
return this;
+ },
+
+ ready: function () {
+ this.wrapper.ready();
+
+ this.player = new MediaElement('media-element-video', {
+ plugins: ['flash'],
+ pluginPath: 'swf/',
+ flashName: 'flashmediaelement.swf'
+ });
}
});
@@ -31,6 +31,8 @@ define(
var VOLUME_BUTTON_OFF_CLASS = 'player-volume-button-off';
var FULLSCREEN_BUTTON_CLASS = 'player-fullscreen-button';
+
+ var NOW_PLAYING_CLASS = 'now-playing';
var tpl = Handlebars.compile(template);
@@ -53,6 +55,7 @@ define(
overlay: false,
hideVolume: false,
hideFullscreen: false,
+ hideNowPlaying: false,
hideControlsTimeout: null,
events: {
@@ -68,6 +71,7 @@ define(
this.overlay = options.overlay;
this.hideVolume = options.hideVolume;
this.hideFullscreen = options.hideFullscreen;
+ this.hideNowPlaying = options.hideNowPlaying;
_.bindAll(this, 'show', 'hide');
@@ -94,7 +98,6 @@ define(
//
render: function () {
- console.log('!!!' + this.model.get('paused'));
this.$el.html(tpl(this.model.toJSON()));
this.$el.prepend(this.seekBar.render().el);
@@ -117,6 +120,10 @@ define(
this.$('.' + FULLSCREEN_BUTTON_CLASS).hide();
}
+ if (this.hideNowPlaying === true) {
+ this.$('.' + NOW_PLAYING_CLASS).hide();
+ }
+
return this;
},
@@ -190,8 +197,6 @@ define(
onPausedChange: function () {
// Update the play/pause button
var paused = this.model.get('paused');
-
- console.log(paused);
if (paused) {
this.$('.' + PLAY_PAUSE_CLASS).removeClass(PAUSE_CLASS);
Oops, something went wrong.

0 comments on commit abcb840

Please sign in to comment.