Skip to content
Browse files

Merge branch 'master' of github.com:ericmatthys/plex-web-client

Conflicts:
	app/js/plex/view/lists/ThumbnailMarqueeList.js
	build
  • Loading branch information...
2 parents 893c0af + 2b38ec0 commit 1e2b7d0b190ced13536f01ca57d7fefdf1682d7d @jrolfs jrolfs committed May 8, 2012
View
80 app/css/mediaelementplayer.css
@@ -1,11 +1,3 @@
-.mejs-container {
- position: relative;
- background: #000;
- font-family: Helvetica, Arial;
- text-align: left;
- vertical-align: top;
-}
-
.me-plugin {
position: absolute;
}
@@ -105,25 +97,6 @@
/* End: LAYERS */
/* Start: CONTROL BAR */
-.mejs-container .mejs-controls {
- position: absolute;
- background: none;
- list-style-type: none;
- margin: 0;
- padding: 0;
- bottom: 0;
- left: 0;
- background: url(background.png);
- background: rgba(0, 0, 0, 0.7);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
- background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
- height: 30px;
- width: 100%;
-}
.mejs-container .mejs-controls div {
list-style-type: none;
background-image: none;
@@ -227,28 +200,6 @@
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
}
-.mejs-controls .mejs-time-rail .mejs-time-loaded {
- background: #3caac8;
- background: rgba(60,170,200,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
- background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
- width: 0;
-}
-.mejs-controls .mejs-time-rail .mejs-time-current {
- width: 0;
- background: #fff;
- background: rgba(255,255,255,0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
- background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
- background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
-}
.mejs-controls .mejs-time-rail .mejs-time-handle {
display: none;
@@ -265,26 +216,6 @@
text-align: center;
}
-.mejs-controls .mejs-time-rail .mejs-time-float {
- position: absolute;
- display: none;
- background: #eee;
- width: 36px;
- height: 17px;
- border: solid 1px #333;
- top: -26px;
- margin-left: -18px;
- text-align: center;
- color: #111;
-}
-
-.mejs-controls .mejs-time-rail .mejs-time-float-current {
- margin: 2px;
- width: 30px;
- display: block;
- text-align: center;
- left: 0;
-}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
position: absolute;
display: block;
@@ -374,17 +305,6 @@
margin: 0;
}
-.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
- position: absolute;
- left: 11px;
- top: 8px;
- width: 2px;
- height: 100px;
- background: #ddd;
- background: rgba(255, 255, 255, 0.9);
- margin: 0;
-}
-
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
position: absolute;
left: 4px;
View
165 app/css/plex.css
@@ -6923,6 +6923,7 @@ h1,
h2,
h3 {
font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
text-shadow: 0 1px 0 #000;
}
h1 {
@@ -7240,6 +7241,9 @@ body {
right: 0;
background-image: url(../img/noise.png);
}
+#container.music-player-active > section.content {
+ padding-top: 165px;
+}
section.content {
padding: 100px 40px 200px;
*zoom: 1;
@@ -8661,7 +8665,7 @@ ul.nav .dropdown-menu:after {
background-color: rgba(0, 0, 0, 0.3);
}
.track-list > li:hover {
- background-color: #1E90E0;
+ background-color: #1e90e0;
}
.track-number {
display: inline-block;
@@ -8672,8 +8676,163 @@ ul.nav .dropdown-menu:after {
float: right;
color: #999;
}
-.mejs-audio {
- position: fixed !important;
+#music-player {
+ position: fixed;
left: 0;
top: 60px;
+ width: 100%;
+ height: 65px;
+ z-index: 3;
+ border-bottom: 1px solid #333;
+ background-color: #141414;
+ background-image: -moz-linear-gradient(top, #222222, #000000);
+ background-image: -ms-linear-gradient(top, #222222, #000000);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#000000));
+ background-image: -webkit-linear-gradient(top, #222222, #000000);
+ background-image: -o-linear-gradient(top, #222222, #000000);
+ background-image: linear-gradient(top, #222222, #000000);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=0);
+ background-color: #141414;
+ background-image: -moz-linear-gradient(top, #222222, #000000);
+ background-image: -ms-linear-gradient(top, #222222, #000000);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#000000));
+ background-image: -webkit-linear-gradient(top, #222222, #000000);
+ background-image: -o-linear-gradient(top, #222222, #000000);
+ background-image: linear-gradient(top, #222222, #000000);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=0);
+ -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+ -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+}
+.now-playing {
+ padding: 10px 8px 0;
+ font-size: 14px;
+}
+.now-playing-label {
+ margin-right: 4px;
+ opacity: 0.5;
+ filter: alpha(opacity=50);
+ opacity: 0.5;
+ filter: alpha(opacity=50);
+}
+.mejs-container {
+ position: relative;
+ text-align: left;
+ vertical-align: top;
+}
+.mejs-container .mejs-controls {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ height: 30px;
+ width: 100%;
+ list-style-type: none;
+}
+.mejs-controls .mejs-time-rail .mejs-time-loaded {
+ width: 0;
+ background-color: #1f5587;
+ background-image: -moz-linear-gradient(top, #1e5f9d, #214567);
+ background-image: -ms-linear-gradient(top, #1e5f9d, #214567);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1e5f9d), to(#214567));
+ background-image: -webkit-linear-gradient(top, #1e5f9d, #214567);
+ background-image: -o-linear-gradient(top, #1e5f9d, #214567);
+ background-image: linear-gradient(top, #1e5f9d, #214567);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5f9d', endColorstr='#214567', GradientType=0);
+ background-color: #1f5587;
+ background-image: -moz-linear-gradient(top, #1e5f9d, #214567);
+ background-image: -ms-linear-gradient(top, #1e5f9d, #214567);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1e5f9d), to(#214567));
+ background-image: -webkit-linear-gradient(top, #1e5f9d, #214567);
+ background-image: -o-linear-gradient(top, #1e5f9d, #214567);
+ background-image: linear-gradient(top, #1e5f9d, #214567);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5f9d', endColorstr='#214567', GradientType=0);
+}
+.mejs-controls .mejs-time-rail .mejs-time-current {
+ width: 0;
+ background-color: #db8e1f;
+ background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
+ background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: linear-gradient(top, #e5a433, #cb6d00);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
+ background-color: #db8e1f;
+ background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
+ background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: linear-gradient(top, #e5a433, #cb6d00);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
+}
+.mejs-controls .mejs-time-rail .mejs-time-float {
+ position: absolute;
+ display: none;
+ top: -26px;
+ width: 36px;
+ height: 17px;
+ margin-left: -18px;
+ border: solid 1px #333;
+ background: #eee;
+ text-align: center;
+ color: #111;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.mejs-controls .mejs-time-rail .mejs-time-float-current {
+ display: block;
+ left: 0;
+ margin: 3px;
+ width: 30px;
+ text-align: center;
+}
+.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+ position: absolute;
+ left: 0;
+ top: 11px;
+ margin: 0;
+ padding: 0;
+ width: 50px;
+ height: 8px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ background-color: #db8e1f;
+ background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
+ background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: linear-gradient(top, #e5a433, #cb6d00);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
+ background-color: #db8e1f;
+ background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
+ background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
+ background-image: linear-gradient(top, #e5a433, #cb6d00);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
+ font-size: 1px;
}
View
2 app/index-dev.html
@@ -6,8 +6,8 @@
<meta charset="utf-8">
- <link rel="stylesheet" href="css/plex.css">
<link rel="stylesheet" href="css/mediaelementplayer.css">
+ <link rel="stylesheet" href="css/plex.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
<link rel="shortcut icon" href="favicon.ico">
View
1 app/js/build.js
@@ -13,7 +13,6 @@
'underscore': 'libs/underscore-1.3.3',
'backbone': 'libs/backbone-0.9.2',
'handlebars': 'libs/handlebars-1.0.0.beta.6',
- 'signals': 'libs/signals-0.7.4',
'xml2json': 'libs/jquery.xml2json',
'lazyload': 'libs/jquery.lazyload',
'date': 'libs/date',
View
418 app/js/libs/signals-0.7.4.js
@@ -1,418 +0,0 @@
-/*jslint onevar:true, undef:true, newcap:true, regexp:true, bitwise:true, maxerr:50, indent:4, white:false, nomen:false, plusplus:false */
-/*global define:false, require:false, exports:false, module:false*/
-
-/** @license
- * JS Signals <http://millermedeiros.github.com/js-signals/>
- * Released under the MIT license
- * Author: Miller Medeiros
- * Version: 0.7.4 - Build: 252 (2012/02/24 10:30 PM)
- */
-
-(function(global){
-
- /**
- * @namespace Signals Namespace - Custom event/messaging system based on AS3 Signals
- * @name signals
- */
- var signals = /** @lends signals */{
- /**
- * Signals Version Number
- * @type String
- * @const
- */
- VERSION : '0.7.4'
- };
-
-
- // SignalBinding -------------------------------------------------
- //================================================================
-
- /**
- * Object that represents a binding between a Signal and a listener function.
- * <br />- <strong>This is an internal constructor and shouldn't be called by regular users.</strong>
- * <br />- inspired by Joa Ebert AS3 SignalBinding and Robert Penner's Slot classes.
- * @author Miller Medeiros
- * @constructor
- * @internal
- * @name signals.SignalBinding
- * @param {signals.Signal} signal Reference to Signal object that listener is currently bound to.
- * @param {Function} listener Handler function bound to the signal.
- * @param {boolean} isOnce If binding should be executed just once.
- * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @param {Number} [priority] The priority level of the event listener. (default = 0).
- */
- function SignalBinding(signal, listener, isOnce, listenerContext, priority) {
-
- /**
- * Handler function bound to the signal.
- * @type Function
- * @private
- */
- this._listener = listener;
-
- /**
- * If binding should be executed just once.
- * @type boolean
- * @private
- */
- this._isOnce = isOnce;
-
- /**
- * Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @memberOf signals.SignalBinding.prototype
- * @name context
- * @type Object|undefined|null
- */
- this.context = listenerContext;
-
- /**
- * Reference to Signal object that listener is currently bound to.
- * @type signals.Signal
- * @private
- */
- this._signal = signal;
-
- /**
- * Listener priority
- * @type Number
- * @private
- */
- this._priority = priority || 0;
- }
-
- SignalBinding.prototype = /** @lends signals.SignalBinding.prototype */ {
-
- /**
- * If binding is active and should be executed.
- * @type boolean
- */
- active : true,
-
- /**
- * Default parameters passed to listener during `Signal.dispatch` and `SignalBinding.execute`. (curried parameters)
- * @type Array|null
- */
- params : null,
-
- /**
- * Call listener passing arbitrary parameters.
- * <p>If binding was added using `Signal.addOnce()` it will be automatically removed from signal dispatch queue, this method is used internally for the signal dispatch.</p>
- * @param {Array} [paramsArr] Array of parameters that should be passed to the listener
- * @return {*} Value returned by the listener.
- */
- execute : function (paramsArr) {
- var handlerReturn, params;
- if (this.active && !!this._listener) {
- params = this.params? this.params.concat(paramsArr) : paramsArr;
- handlerReturn = this._listener.apply(this.context, params);
- if (this._isOnce) {
- this.detach();
- }
- }
- return handlerReturn;
- },
-
- /**
- * Detach binding from signal.
- * - alias to: mySignal.remove(myBinding.getListener());
- * @return {Function|null} Handler function bound to the signal or `null` if binding was previously detached.
- */
- detach : function () {
- return this.isBound()? this._signal.remove(this._listener, this.context) : null;
- },
-
- /**
- * @return {Boolean} `true` if binding is still bound to the signal and have a listener.
- */
- isBound : function () {
- return (!!this._signal && !!this._listener);
- },
-
- /**
- * @return {Function} Handler function bound to the signal.
- */
- getListener : function () {
- return this._listener;
- },
-
- /**
- * Delete instance properties
- * @private
- */
- _destroy : function () {
- delete this._signal;
- delete this._listener;
- delete this.context;
- },
-
- /**
- * @return {boolean} If SignalBinding will only be executed once.
- */
- isOnce : function () {
- return this._isOnce;
- },
-
- /**
- * @return {string} String representation of the object.
- */
- toString : function () {
- return '[SignalBinding isOnce:' + this._isOnce +', isBound:'+ this.isBound() +', active:' + this.active + ']';
- }
-
- };
-
-
-/*global signals:false, SignalBinding:false*/
-
- // Signal --------------------------------------------------------
- //================================================================
-
- function validateListener(listener, fnName) {
- if (typeof listener !== 'function') {
- throw new Error( 'listener is a required param of {fn}() and should be a Function.'.replace('{fn}', fnName) );
- }
- }
-
- /**
- * Custom event broadcaster
- * <br />- inspired by Robert Penner's AS3 Signals.
- * @author Miller Medeiros
- * @constructor
- */
- signals.Signal = function () {
- /**
- * @type Array.<SignalBinding>
- * @private
- */
- this._bindings = [];
- this._prevParams = null;
- };
-
- signals.Signal.prototype = {
-
- /**
- * If Signal should keep record of previously dispatched parameters and
- * automatically execute listener during `add()`/`addOnce()` if Signal was
- * already dispatched before.
- * @type boolean
- */
- memorize : false,
-
- /**
- * @type boolean
- * @private
- */
- _shouldPropagate : true,
-
- /**
- * If Signal is active and should broadcast events.
- * <p><strong>IMPORTANT:</strong> Setting this property during a dispatch will only affect the next dispatch, if you want to stop the propagation of a signal use `halt()` instead.</p>
- * @type boolean
- */
- active : true,
-
- /**
- * @param {Function} listener
- * @param {boolean} isOnce
- * @param {Object} [listenerContext]
- * @param {Number} [priority]
- * @return {SignalBinding}
- * @private
- */
- _registerListener : function (listener, isOnce, listenerContext, priority) {
-
- var prevIndex = this._indexOfListener(listener, listenerContext),
- binding;
-
- if (prevIndex !== -1) {
- binding = this._bindings[prevIndex];
- if (binding.isOnce() !== isOnce) {
- throw new Error('You cannot add'+ (isOnce? '' : 'Once') +'() then add'+ (!isOnce? '' : 'Once') +'() the same listener without removing the relationship first.');
- }
- } else {
- binding = new SignalBinding(this, listener, isOnce, listenerContext, priority);
- this._addBinding(binding);
- }
-
- if(this.memorize && this._prevParams){
- binding.execute(this._prevParams);
- }
-
- return binding;
- },
-
- /**
- * @param {SignalBinding} binding
- * @private
- */
- _addBinding : function (binding) {
- //simplified insertion sort
- var n = this._bindings.length;
- do { --n; } while (this._bindings[n] && binding._priority <= this._bindings[n]._priority);
- this._bindings.splice(n + 1, 0, binding);
- },
-
- /**
- * @param {Function} listener
- * @return {number}
- * @private
- */
- _indexOfListener : function (listener, context) {
- var n = this._bindings.length,
- cur;
- while (n--) {
- cur = this._bindings[n];
- if (cur._listener === listener && cur.context === context) {
- return n;
- }
- }
- return -1;
- },
-
- /**
- * Check if listener was attached to Signal.
- * @param {Function} listener
- * @param {Object} [context]
- * @return {boolean} if Signal has the specified listener.
- */
- has : function (listener, context) {
- return this._indexOfListener(listener, context) !== -1;
- },
-
- /**
- * Add a listener to the signal.
- * @param {Function} listener Signal handler function.
- * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
- * @return {SignalBinding} An Object representing the binding between the Signal and listener.
- */
- add : function (listener, listenerContext, priority) {
- validateListener(listener, 'add');
- return this._registerListener(listener, false, listenerContext, priority);
- },
-
- /**
- * Add listener to the signal that should be removed after first execution (will be executed only once).
- * @param {Function} listener Signal handler function.
- * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
- * @return {SignalBinding} An Object representing the binding between the Signal and listener.
- */
- addOnce : function (listener, listenerContext, priority) {
- validateListener(listener, 'addOnce');
- return this._registerListener(listener, true, listenerContext, priority);
- },
-
- /**
- * Remove a single listener from the dispatch queue.
- * @param {Function} listener Handler function that should be removed.
- * @param {Object} [context] Execution context (since you can add the same handler multiple times if executing in a different context).
- * @return {Function} Listener handler function.
- */
- remove : function (listener, context) {
- validateListener(listener, 'remove');
-
- var i = this._indexOfListener(listener, context);
- if (i !== -1) {
- this._bindings[i]._destroy(); //no reason to a SignalBinding exist if it isn't attached to a signal
- this._bindings.splice(i, 1);
- }
- return listener;
- },
-
- /**
- * Remove all listeners from the Signal.
- */
- removeAll : function () {
- var n = this._bindings.length;
- while (n--) {
- this._bindings[n]._destroy();
- }
- this._bindings.length = 0;
- },
-
- /**
- * @return {number} Number of listeners attached to the Signal.
- */
- getNumListeners : function () {
- return this._bindings.length;
- },
-
- /**
- * Stop propagation of the event, blocking the dispatch to next listeners on the queue.
- * <p><strong>IMPORTANT:</strong> should be called only during signal dispatch, calling it before/after dispatch won't affect signal broadcast.</p>
- * @see signals.Signal.prototype.disable
- */
- halt : function () {
- this._shouldPropagate = false;
- },
-
- /**
- * Dispatch/Broadcast Signal to all listeners added to the queue.
- * @param {...*} [params] Parameters that should be passed to each handler.
- */
- dispatch : function (params) {
- if (! this.active) {
- return;
- }
-
- var paramsArr = Array.prototype.slice.call(arguments),
- n = this._bindings.length,
- bindings;
-
- if (this.memorize) {
- this._prevParams = paramsArr;
- }
-
- if (! n) {
- //should come after memorize
- return;
- }
-
- bindings = this._bindings.slice(); //clone array in case add/remove items during dispatch
- this._shouldPropagate = true; //in case `halt` was called before dispatch or during the previous dispatch.
-
- //execute all callbacks until end of the list or until a callback returns `false` or stops propagation
- //reverse loop since listeners with higher priority will be added at the end of the list
- do { n--; } while (bindings[n] && this._shouldPropagate && bindings[n].execute(paramsArr) !== false);
- },
-
- /**
- * Forget memorized arguments.
- * @see signals.Signal.memorize
- */
- forget : function(){
- this._prevParams = null;
- },
-
- /**
- * Remove all bindings from signal and destroy any reference to external objects (destroy Signal object).
- * <p><strong>IMPORTANT:</strong> calling any method on the signal instance after calling dispose will throw errors.</p>
- */
- dispose : function () {
- this.removeAll();
- delete this._bindings;
- delete this._prevParams;
- },
-
- /**
- * @return {string} String representation of the object.
- */
- toString : function () {
- return '[Signal active:'+ this.active +' numListeners:'+ this.getNumListeners() +']';
- }
-
- };
-
-
- //exports to multiple environments
- if(typeof define === 'function' && define.amd){ //AMD
- define(signals);
- } else if (typeof module !== 'undefined' && module.exports){ //node
- module.exports = signals;
- } else { //browser
- //use string because of Google closure compiler ADVANCED_MODE
- global['signals'] = signals;
- }
-
-}(this));
View
1 app/js/main.js
@@ -11,7 +11,6 @@ require.config({
'underscore': 'libs/underscore-1.3.3',
'backbone': 'libs/backbone-0.9.2',
'handlebars': 'libs/handlebars-1.0.0.beta.6',
- 'signals': 'libs/signals-0.7.4',
'xml2json': 'libs/jquery.xml2json',
'lazyload': 'libs/jquery.lazyload',
'date': 'libs/date',
View
1 app/js/plex/control/Commands.js
@@ -8,6 +8,7 @@ define(
'plex/control/commands/GetMediaDetailsCommand',
'plex/control/commands/GetSeasonsCommand',
'plex/control/commands/GetAlbumsCommand',
+ 'plex/control/commands/GetPlayerDetailsCommand',
'plex/control/commands/MarkQueueItemWatchedCommand',
'plex/control/commands/MarkQueueItemUnwatchedCommand',
'plex/control/commands/DeleteQueueItemCommand',
View
2 app/js/plex/control/Router.js
@@ -178,6 +178,8 @@ define(
if (this.isAuthenticated(this.player, arguments) === true) {
appModel.set('server', servers.get(serverID));
+
+ dispatcher.trigger('command:GetPlayerDetails', sectionID, itemID);
}
},
View
73 app/js/plex/control/commands/GetPlayerDetailsCommand.js
@@ -0,0 +1,73 @@
+define(
+ [
+ 'plex/control/Dispatcher',
+ 'plex/model/AppModel',
+ 'plex/model/MediaItemModel',
+ 'plex/view/players/VideoPlayerView'
+ ],
+
+ function ( dispatcher, appModel, MediaItemModel, VideoPlayerView) {
+
+ var sections = appModel.get('sections');
+ var item;
+
+ function fetchDetails(section, itemID) {
+ // Set the active section on the model
+ appModel.set('section', section);
+
+ item = new MediaItemModel({
+ url: 'library/metadata/' + itemID
+ });
+
+ item.fetch({
+ success: onFetchMetadataSuccess,
+ error: onError
+ });
+ }
+
+ function onFetchMetadataSuccess(response) {
+ appModel.set({
+ showHeader: true,
+ view: new VideoPlayerView({ model: item }),
+ item: item,
+ season: undefined
+ });
+
+ // Hide the loading indicator
+ dispatcher.trigger('command:ShowLoading', false);
+ }
+
+ function onError(xhr, status, error) {
+ // Hide the loading indicator
+ dispatcher.trigger('command:ShowLoading', false);
+
+ // Show an alert
+ appModel.set({ error: 'This media is currently unavailable.' });
+ }
+
+
+ //
+ // -------------------- Execute --------------------
+ //
+
+ function execute (sectionID, itemID) {
+ var section = sections.get(sectionID);
+
+ if (typeof(section) === 'object') {
+ fetchDetails(section, itemID);
+ } else {
+ sections.fetch({
+ success: function (response) {
+ fetchDetails(response.get(sectionID), itemID);
+
+ // Hide the loading indicator
+ dispatcher.trigger('command:ShowLoading', false);
+ },
+ error: onError
+ });
+ }
+ }
+
+ dispatcher.on('command:GetPlayerDetails', execute);
+ }
+);
View
7 app/js/plex/control/utils/Transcoder.js
@@ -40,7 +40,7 @@ define(
return url;
},
- video: function (path) {
+ video: function (path, $el) {
var server = appModel.get('server');
var user = appModel.get('user');
var token = server.get('accessToken') ? server.get('accessToken') : user.get('authentication_token');
@@ -75,8 +75,9 @@ define(
success: function (response) {
var m3u8_rel = response.replace(/[\s\S]+(session.+?\.m3u8)[\s\S]+/, '$1');
session_id = m3u8_rel.split('/')[1];
- var m3u8 = baseURL + m3u8_rel;
- console.log(m3u8);
+ var m3u8 = baseURL + m3u8_rel + '?X-Plex-Token=' + token;
+
+ $el.attr('src', m3u8);
},
error: function (xhr, status, error) {
View
22 app/js/plex/view/AppView.js
@@ -5,14 +5,15 @@ define(
'plex/view/alerts/LoadingAlert',
'plex/view/alerts/ErrorAlert',
'plex/view/HeaderView',
+ 'plex/view/players/MusicPlayerView',
// Globals
'use!backbone',
'use!handlebars',
'use!lazyload'
],
- function (dispatcher, appModel, LoadingAlert, ErrorAlert, HeaderView) {
+ function (dispatcher, appModel, LoadingAlert, ErrorAlert, HeaderView, MusicPlayerView) {
var AppView = Backbone.View.extend({
el: '#container',
@@ -21,15 +22,19 @@ define(
loadingView: undefined,
errorView: undefined,
headerView: undefined,
+ musicPlayerView: undefined,
views: [],
initialize: function () {
this.model.on('change:loading', this.onLoadingChange, this);
this.model.on('change:error', this.onErrorChange, this);
this.model.on('change:showHeader', this.onShowHeaderChange, this);
- this.model.on('change:view', this.onViewChange, this);
+ dispatcher.on('play:music', this.onPlayMusic, this);
+
+ // Listen for changing and destroying subviews
+ this.model.on('change:view', this.onViewChange, this);
dispatcher.on('destroy:view', this.onViewDestroy, this);
},
@@ -72,6 +77,19 @@ define(
}
},
+ onPlayMusic: function (model) {
+ this.$el.addClass('music-player-active');
+
+ if (typeof(this.musicPlayerView) === 'undefined') {
+ this.musicPlayerView = new MusicPlayerView({ model: model });
+ this.$el.prepend(this.musicPlayerView.render().el);
+ } else {
+ this.musicPlayerView.model = model;
+ }
+
+ this.musicPlayerView.play();
+ },
+
onViewChange: function (model, view) {
// Destroy previous views
for (var i = this.views.length - 1; i >= 0; i--) {
View
28 app/js/plex/view/details/ArtistDetailsView.js
@@ -1,31 +1,25 @@
define(
[
'text!templates/details/ArtistDetailsView.tpl',
- 'plex/control/Dispatcher',
- 'plex/control/utils/Transcoder',
'plex/model/AppModel',
'plex/view/BaseView',
'plex/view/lists/media/AlbumList',
// Globals
'use!backbone',
- 'use!handlebars',
- 'use!mediaelement'
+ 'use!handlebars'
],
- function (template, dispatcher, Transcoder, appModel, BaseView, AlbumList) {
+ function (template, appModel, BaseView, AlbumList) {
var tpl = Handlebars.compile(template);
var ArtistDetailsView = BaseView.extend({
className: 'details',
albumList: undefined,
- player: undefined,
initialize: function () {
- this.addBinding(dispatcher, 'play:audio', this.onPlay);
-
this.albumList = this.registerView(new AlbumList({ collection: this.model.get('children') }));
},
@@ -39,24 +33,6 @@ define(
this.$('.albums-header').after(this.albumList.render().el);
return this;
- },
-
- onPlay: function (model) {
- var file = Transcoder.file(model.get('Media').Part.key);
-
- console.log(file);
-
- $('#music-player').attr('src', file);
-
- this.player = new MediaElementPlayer('#music-player', {
- enablePluginDebug: false,
- plugins: ['flash'],
- pluginPath: 'swf/',
- flashName: 'flashmediaelement.swf',
- });
-
- this.player.load();
- this.player.play();
}
});
View
36 app/js/plex/view/lists/ThumbnailMarqueeList.js
@@ -4,14 +4,13 @@ define(
'plex/model/AppModel',
'plex/view/BaseView',
'plex/view/lists/items/ThumbnailMarqueeListItem',
- 'signals',
// Globals
'use!backbone',
'use!handlebars',
],
- function (template, appModel, BaseView, ThumbnailMarqueeListItem, signals) {
+ function (template, appModel, BaseView, ThumbnailMarqueeListItem) {
var template = Handlebars.compile(template)
@@ -35,7 +34,6 @@ define(
loaded: false,
loadedThumbnails: 0,
- loadedSignal: new signals.Signal(),
//
// -------------------- Init --------------------
@@ -87,8 +85,8 @@ define(
this.index = 0;
}
- item = new ThumbnailMarqueeListItem({model: this.collection.at(this.index)});
- item.loadedSignal.addOnce(this.onNextThumbnailLoaded);
+ item = new ThumbnailMarqueeListItem({ model: this.collection.at(this.index) });
+ item.on('thumbnailLoaded', this.onNextThumbnailLoaded);
// Register the view so it will be cleaned up on destroy
this.registerView(item);
@@ -109,8 +107,8 @@ define(
//
onAdd: function (thumbnail) {
- var item = new ThumbnailMarqueeListItem({model: thumbnail});
- item.loadedSignal.addOnce(this.onThumbnailLoaded);
+ var item = new ThumbnailMarqueeListItem({ model: thumbnail });
+ item.on('thumbnailLoaded', this.onThumbnailLoaded);
// Register the view so it will be cleaned up on destroy
this.registerView(item);
@@ -123,28 +121,40 @@ define(
this.removeAllViews();
if (this.collection.length > 0) {
+ this.$el.css('opacity', 0);
+
this.loaded = false;
this.loadedThumbnails = 0;
- this.$el.hide();
- for(var i=0; i < this.numVisibleItems; i++) {
+
+ for (var i = 0; i < this.collection.length; i++) {
if (i < this.numVisibleItems) {
this.onAdd(this.collection.at(i));
+ } else if (i < this.numVisibleItems + 1) {
+ // Load the first off-screen thumbnail upfront to avoid some jankyness
+ var thumb = this.collection.at(i);
+ var img = new Image();
+
+ $(img).attr('src', thumb.get('thumb'));
}
}
}
},
- onThumbnailLoaded: function (event) {
+ onThumbnailLoaded: function (item) {
+ item.off('thumbnailLoaded', this.onThumbnailLoaded);
+
this.loadedThumbnails++;
if (this.loadedThumbnails === this.numVisibleItems) {
- this.loadedSignal.dispatch();
- this.$el.fadeIn(350);
+ this.$el.addClass('animated fadeIn');
+
this.loaded = true;
}
},
- onNextThumbnailLoaded: function (event) {
+ onNextThumbnailLoaded: function (item) {
+ item.off('thumbnailLoaded', this.onThumbnailLoaded);
+
var self = this;
var containerWidth = 0;
var duration = this.speed * 1000;
View
11 app/js/plex/view/lists/items/ThumbnailMarqueeListItem.js
@@ -2,26 +2,19 @@ define(
[
'text!templates/lists/items/ThumbnailMarqueeListItem.tpl',
'plex/view/BaseView',
- 'signals',
// Globals
'use!backbone',
'use!handlebars'
],
- function (template, BaseView, signals) {
+ function (template, BaseView) {
var tpl = Handlebars.compile(template);
var ThumbnailMarqueeListItem = BaseView.extend({
tagName: 'li',
- loadedSignal: undefined,
-
- initialize: function () {
- this.loadedSignal = new signals.Signal();
- },
-
render: function () {
this.$el.html(tpl(this.model.toJSON()));
this.$('img').load(_.bind(this.onImageLoad, this));
@@ -30,7 +23,7 @@ define(
},
onImageLoad: function (event) {
- this.loadedSignal.dispatch(event);
+ this.trigger('thumbnailLoaded', this);
}
});
View
2 app/js/plex/view/lists/media/items/TrackListItem.js
@@ -30,7 +30,7 @@ define(
onClick: function (event) {
event.preventDefault();
- dispatcher.trigger('play:audio', this.model);
+ dispatcher.trigger('play:music', this.model);
}
});
View
61 app/js/plex/view/players/MusicPlayerView.js
@@ -0,0 +1,61 @@
+define(
+ [
+ 'text!templates/players/MusicPlayerView.tpl',
+ 'plex/control/utils/Transcoder',
+ 'plex/model/AppModel',
+ 'plex/view/BaseView',
+
+ // Globals
+ 'use!backbone',
+ 'use!handlebars',
+ 'use!mediaelement'
+ ],
+
+ function (template, Transcoder, appModel, BaseView) {
+
+ var tpl = Handlebars.compile(template);
+
+ var MusicPlayerView = BaseView.extend({
+ id: 'music-player',
+ className: 'animated slideDown',
+
+ player: undefined,
+
+ render: function () {
+ this.$el.html(tpl(this.model.toJSON()));
+
+ return this;
+ },
+
+ play: function () {
+ var file = Transcoder.file(this.model.get('Media').Part.key);
+
+ console.log(file);
+
+ this.$('audio').attr('src', file);
+ this.$('.now-playing-title').html(this.model.get('title'));
+
+ if (typeof(this.player) === 'undefined') {
+ this.player = new MediaElementPlayer('#music-player audio', {
+ plugins: ['flash'],
+ pluginPath: 'swf/',
+ flashName: 'flashmediaelement.swf',
+ success: function (player, element) {
+ console.log('success!');
+ player.addEventListener('ended', this.onEnded, false);
+ }
+ });
+ }
+
+ this.player.load();
+ this.player.play();
+ },
+
+ onEnded: function (event) {
+ console.log('ended!');
+ }
+ });
+
+ return MusicPlayerView;
+ }
+);
View
37 app/js/plex/view/players/VideoPlayerView.js
@@ -0,0 +1,37 @@
+define(
+ [
+ 'text!templates/players/VideoPlayerView.tpl',
+ 'plex/control/utils/Transcoder',
+ 'plex/model/AppModel',
+ 'plex/view/BaseView',
+
+ // Globals
+ 'use!backbone',
+ 'use!handlebars',
+ 'use!mediaelement'
+ ],
+
+ function (template, Transcoder, appModel, BaseView) {
+
+ var tpl = Handlebars.compile(template);
+
+ var VideoPlayerView = BaseView.extend({
+ id: 'video-player',
+ tagName: 'section',
+ className: 'content animated-fast scaleIn',
+
+ player: undefined,
+
+ render: function () {
+ this.$el.html(tpl(this.model.toJSON()));
+
+ // Start transcoding the video
+ Transcoder.video(this.model.get('key'), this.$('video'));
+
+ return this;
+ }
+ });
+
+ return VideoPlayerView;
+ }
+);
View
4 app/less/app.less
@@ -24,6 +24,10 @@ body {
right: 0;
background-image: url(../img/noise.png);
}
+
+ &.music-player-active > section.content {
+ padding-top: 165px;
+ }
}
section.content {
View
1 app/less/globals.less
@@ -18,6 +18,7 @@
// Headers
h1, h2, h3 {
font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
text-shadow: 0 1px 0 #000;
}
View
8 app/less/music.less
@@ -50,7 +50,7 @@
}
&:hover {
- background-color: #1E90E0;
+ background-color: #1e90e0;
}
}
@@ -63,10 +63,4 @@
.track-duration {
float: right;
color: #999;
-}
-
-.mejs-audio {
- position: fixed !important;
- left: 0;
- top: 60px;
}
View
83 app/less/player.less
@@ -0,0 +1,83 @@
+#music-player {
+ position: fixed;
+ left: 0;
+ top: 60px;
+ width: 100%;
+ height: 65px;
+ z-index: 3;
+ border-bottom: 1px solid #333;
+ #gradient > .vertical(#222, #000);
+ .box-shadow(0 5px 5px rgba(0, 0, 0, .3));
+}
+
+.now-playing {
+ padding: 10px 8px 0;
+ font-size: 14px;
+}
+
+.now-playing-label {
+ margin-right: 4px;
+ .opacity(50);
+}
+
+.mejs-container {
+ position: relative;
+ text-align: left;
+ vertical-align: top;
+}
+
+.mejs-container .mejs-controls {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ height: 30px;
+ width: 100%;
+ list-style-type: none;
+}
+
+.mejs-controls .mejs-time-rail .mejs-time-loaded {
+ width: 0;
+ #gradient > .vertical(#1e5f9d, #214567);
+}
+
+.mejs-controls .mejs-time-rail .mejs-time-current {
+ width: 0;
+ #gradient > .vertical(#e5a433, #cb6d00);
+}
+
+.mejs-controls .mejs-time-rail .mejs-time-float {
+ position: absolute;
+ display: none;
+ top: -26px;
+ width: 36px;
+ height: 17px;
+ margin-left: -18px;
+ border: solid 1px #333;
+ background: #eee;
+ text-align: center;
+ color: #111;
+ .border-radius(4px);
+}
+
+.mejs-controls .mejs-time-rail .mejs-time-float-current {
+ display: block;
+ left: 0;
+ margin: 3px;
+ width: 30px;
+ text-align: center;
+}
+
+.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+ position: absolute;
+ left: 0;
+ top: 11px;
+ margin: 0;
+ padding: 0;
+ width: 50px;
+ height: 8px;
+ .border-radius(2px);
+ #gradient > .vertical(#e5a433, #cb6d00);
+ font-size: 1px;
+}
View
3 app/less/plex.less
@@ -12,4 +12,5 @@
@import "lists.less";
@import "sidebar.less";
@import "details.less";
-@import "music.less";
+@import "music.less";
+@import "player.less";
View
2 app/templates/details/ArtistDetailsView.tpl
@@ -1,5 +1,3 @@
-<audio id="music-player" width="100%" controls></audio>
-
<h2>{{artist.title}}</h2>
<div class="details-controls">
View
6 app/templates/players/MusicPlayerView.tpl
@@ -0,0 +1,6 @@
+<div class="now-playing">
+ <span class="now-playing-label"><i class="icon-music icon-white"></i> Now Playing</span>
+ <span class="now-playing-title">{{title}}</span>
+</div>
+
+<audio width="100%" controls></audio>
View
3 app/templates/players/VideoPlayerView.tpl
@@ -0,0 +1,3 @@
+<h2>{{title}}</h2>
+
+<video width="100%" controls></video>
1 build
@@ -1 +0,0 @@
-Subproject commit aec6ef9319999aac9c64adc831a6abffa2f96f4c

0 comments on commit 1e2b7d0

Please sign in to comment.
Something went wrong with that request. Please try again.