converted video player to use custom control bar

mattetti · May 10, 2012 · abcb840 · abcb840
1 parent 83a8e1d
commit abcb840
Show file tree

Hide file tree

Showing 20 changed files with 524 additions and 49 deletions.
diff --git a/app/css/plex.css b/app/css/plex.css
@@ -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,
+.now-playing-label,
-#music-player .now-playing-title {
+.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;

diff --git a/app/img/lens_controls.png → app/img/player_controls.png b/app/img/lens_controls.png → app/img/player_controls.png
diff --git a/app/img/lens_play.png → app/img/player_play.png b/app/img/lens_play.png → app/img/player_play.png
diff --git a/app/img/lens_replay.png → app/img/player_replay.png b/app/img/lens_replay.png → app/img/player_replay.png
diff --git a/app/js/plex/control/commands/GetPlayerDetailsCommand.js b/app/js/plex/control/commands/GetPlayerDetailsCommand.js
@@ -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) {

diff --git a/app/js/plex/control/init/SoundManagerInit.js b/app/js/plex/control/init/SoundManagerInit.js
@@ -11,6 +11,8 @@ define(
 		soundManager = new SoundManager();
 		soundManager.url = 'swf/';
 		soundManager.flashVersion = 9;
+		soundManager.useFastPolling = true;
+		soundManager.useHighPerformance = true;
 		soundManager.beginDelayedInit();
 	}
 );
diff --git a/app/js/plex/control/utils/Transcoder.js b/app/js/plex/control/utils/Transcoder.js
@@ -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);
 					}
 				})
 			}

diff --git a/app/js/plex/view/AppView.js b/app/js/plex/view/AppView.js
@@ -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);
 			},

diff --git a/app/js/plex/view/players/MusicPlayerView.js b/app/js/plex/view/players/MusicPlayerView.js
@@ -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.controls, 'playPause', this.onControlsPlayPause);
-				this.addBinding(this.player, 'seek', this.onControlsSeek);
+				this.addBinding(this.controls, 'seek', this.onControlsSeek);
-				this.addBinding(this.player, 'change:volume', this.onControlsVolumeChange);
+				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;
 			},

diff --git a/app/js/plex/view/players/VideoPlayerView.js b/app/js/plex/view/players/VideoPlayerView.js
@@ -1,17 +1,17 @@
 define(
 	[
 		'text!templates/players/VideoPlayerView.tpl',
-		'plex/control/utils/Transcoder',
+		'plex/model/PlayerModel',
-		'plex/model/AppModel',
 		'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'
+				});
 			}
 		});
 

diff --git a/app/js/plex/view/players/core/ControlsView.js b/app/js/plex/view/players/core/ControlsView.js
@@ -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);