some refactoring of the media player code

4 files changed, 38 insertions, 497 deletions

diff --git a/apps/media/css/jplayer.css b/apps/media/css/jplayer.css
deleted file mode 100644
index c47d20c7228..00000000000
--- a/apps/media/css/jplayer.css
+++ /dev/null
@@ -1,461 +0,0 @@
-/*
- * Skin for jPlayer Plugin (jQuery JavaScript Library)
- * http://www.happyworm.com/jquery/jplayer
- *
- * Skin Name: Blue Monday
- *
- * Copyright (c) 2010 Happyworm Ltd
- * Dual licensed under the MIT and GPL licenses.
- *  - http://www.opensource.org/licenses/mit-license.php
- *  - http://www.gnu.org/copyleft/gpl.html
- *
- * Author: Silvia Benvenuti
- * Skin Version: 3.0 (jPlayer 2.0.0)
- * Date: 20th December 2010
- */
-
-div.jp-audio,
-div.jp-video {
-	
-	/* Edit the font-size to counteract inherited font sizing.
-	 * Eg. 1.25em = 1 / 0.8em
-	 */
-	
-	font-size:1.25em;
-	
-	font-family:Verdana, Arial, sans-serif;
-	line-height:1.6;
-	color: #000;
-}
-div.jp-audio {
-	position:relative;
-	margin-left:70ex;
-	margin-right:0px;
-	top:0px;
-	margin-top:-30px;
-}
-div.jp-video-270p {
-	width:480px;
-}
-div.jp-video-360p {
-	width:640px;
-}
-div.jp-interface {
-	position: fixed;
-	z-index:100;
-	width:25em;
-	left:201px;
-	top:-10px;
-}
-div.jp-type-playlist{
-	width:100%;
-}
-div.jp-audio div.jp-type-single div.jp-interface {
-	height:80px;
-	border-bottom:none;
-}
-div.jp-audio div.jp-type-playlist div.jp-interface {
-	height:80px;
-}
-div.jp-video div.jp-type-single div.jp-interface {
-	height:60px;
-	border-bottom:none;
-}
-div.jp-video div.jp-type-playlist div.jp-interface {
-	height:60px;
-}
-div.jp-interface ul.jp-controls {
-	list-style-type:none;
-	padding:0;
-}
-div.jp-interface ul.jp-controls li {
-	/* position: absolute; */
-	display:inline;
-}
-div.jp-interface ul.jp-controls a {
-	position: absolute;
-	overflow:hidden;
-	text-indent:-9999px;
-}
-a.jp-play,
-a.jp-pause {
-	width:40px;
-	height:40px;
-	z-index:1;
-}
-div.jp-audio div.jp-type-single a.jp-play,
-div.jp-audio div.jp-type-single a.jp-pause {
-	top:20px;
-	left:40px;
-}
-div.jp-audio div.jp-type-playlist a.jp-play,
-div.jp-audio div.jp-type-playlist a.jp-pause {
-	top:20px;
-	left:48px;
-}
-div.jp-video a.jp-play,
-div.jp-video a.jp-pause {
-	top:15px;
-}
-div.jp-video-270p div.jp-type-single a.jp-play,
-div.jp-video-270p div.jp-type-single a.jp-pause {
-	left:195px;
-}
-div.jp-video-270p div.jp-type-playlist a.jp-play,
-div.jp-video-270p div.jp-type-playlist a.jp-pause {
-	left:220px;
-}
-div.jp-video-360p div.jp-type-single a.jp-play,
-div.jp-video-360p div.jp-type-single a.jp-pause {
-	left:275px;
-}
-div.jp-video-360p div.jp-type-playlist a.jp-play,
-div.jp-video-360p div.jp-type-playlist a.jp-pause {
-	left:300px;
-}
-a.jp-play {
-	background: url("../img/jplayer.blue.monday.png") 0 0 no-repeat;
-}
-a.jp-play:hover {
-	background: url("../img/jplayer.blue.monday.png") -41px 0 no-repeat;
-}
-a.jp-pause {
-	background: url("../img/jplayer.blue.monday.png") 0 -42px no-repeat;
-	display: none;
-}
-a.jp-pause:hover {
-	background: url("../img/jplayer.blue.monday.png") -41px -42px no-repeat;
-}
-div.jp-audio div.jp-type-single a.jp-stop {
-	top:26px;
-	left:90px;
-}
-div.jp-audio div.jp-type-playlist a.jp-stop {
-	top:26px;
-	left:126px;
-}
-div.jp-video a.jp-stop {
-	top:21px;
-}
-div.jp-video-270p div.jp-type-single a.jp-stop {
-	left:245px;
-}
-div.jp-video-270p div.jp-type-playlist a.jp-stop {
-	left:298px;
-}
-div.jp-video-360p div.jp-type-single a.jp-stop {
-	left:325px;
-}
-div.jp-video-360p div.jp-type-playlist a.jp-stop {
-	left:378px;
-}
-a.jp-stop {
-	background: url("../img/jplayer.blue.monday.png") 0 -83px no-repeat;
-	width:28px;
-	height:28px;
-	z-index:1;
-}
-a.jp-stop:hover {
-	background: url("../img/jplayer.blue.monday.png") -29px -83px no-repeat;
-}
-div.jp-audio div.jp-type-playlist a.jp-previous {
-	left:20px;
-	top:26px;
-}
-div.jp-video div.jp-type-playlist a.jp-previous {
-	top:21px;
-}
-div.jp-video-270p div.jp-type-playlist a.jp-previous {
-	left:192px;
-}
-div.jp-video-360p div.jp-type-playlist a.jp-previous {
-	left:272px;
-}
-a.jp-previous {
-	background: url("../img/jplayer.blue.monday.png") 0 -112px no-repeat;
-	width:28px;
-	height:28px;
-}
-a.jp-previous:hover {
-	background: url("../img/jplayer.blue.monday.png") -29px -112px no-repeat;
-}
-div.jp-audio div.jp-type-playlist a.jp-next {
-	left:88px;
-	top:26px;
-}
-div.jp-video div.jp-type-playlist a.jp-next {
-	top:21px;
-}
-div.jp-video-270p div.jp-type-playlist a.jp-next {
-	left:260px;
-}
-div.jp-video-360p div.jp-type-playlist a.jp-next {
-	left:340px;
-}
-a.jp-next {
-	background: url("../img/jplayer.blue.monday.png") 0 -141px no-repeat;
-	width:28px;
-	height:28px;
-}
-a.jp-next:hover {
-	background: url("../img/jplayer.blue.monday.png") -29px -141px no-repeat;
-}
-div.jp-progress {
-	position: absolute;
-	overflow:hidden;
-	background-color: #293b51;
-}
-div.jp-audio div.jp-type-single div.jp-progress {
-	top:32px;
-	left:130px;
-	width:122px;
-	height:15px;
-}
-div.jp-audio div.jp-type-playlist div.jp-progress {
-	top:32px;
-	left:164px;
-	width:122px;
-	height:15px;
-}
-div.jp-video div.jp-progress {
-	top:0px;
-	left:0px;
-	width:100%;
-	height:10px;
-}
-div.jp-seek-bar {
-	background: url("../img/jplayer.blue.monday.png") 0 -202px repeat-x;
-	width:0px;
-	/* height:15px; */
-	height:100%;
-	cursor: pointer;
-}
-div.jp-play-bar {
-	background: url("../img/jplayer.blue.monday.png") 0 -218px repeat-x ;
-	width:0px;
-	/* height:15px; */
-	height:100%;
-}
-
-/* The seeking class is added/removed inside jPlayer */
-div.jp-seeking-bg {
-	background: url("../img/pbar-ani.gif");
-}
-
-a.jp-mute,
-a.jp-unmute {
-	width:18px;
-	height:15px;
-}
-div.jp-audio div.jp-type-single a.jp-mute,
-div.jp-audio div.jp-type-single a.jp-unmute {
-	top:32px;
-	left:274px;
-}
-div.jp-audio div.jp-type-playlist a.jp-mute,
-div.jp-audio div.jp-type-playlist a.jp-unmute {
-	top:32px;
-	left:296px;
-}
-div.jp-video a.jp-mute,
-div.jp-video a.jp-unmute {
-	top:27px;
-}
-div.jp-video-270p div.jp-type-single a.jp-mute,
-div.jp-video-270p div.jp-type-single a.jp-unmute {
-	left:304px;
-}
-div.jp-video-270p div.jp-type-playlist a.jp-unmute,
-div.jp-video-270p div.jp-type-playlist a.jp-mute {
-	left:363px;
-}
-div.jp-video-360p div.jp-type-single a.jp-mute,
-div.jp-video-360p div.jp-type-single a.jp-unmute {
-	left:384px;
-}
-div.jp-video-360p div.jp-type-playlist a.jp-mute,
-div.jp-video-360p div.jp-type-playlist a.jp-unmute {
-	left:443px;
-}
-a.jp-mute {
-	background: url("../img/jplayer.blue.monday.png") 0 -186px no-repeat;
-}
-a.jp-mute:hover {
-	background: url("../img/jplayer.blue.monday.png") -19px -170px no-repeat;
-}
-a.jp-unmute {
-	background: url("../img/jplayer.blue.monday.png") 0 -170px no-repeat;
-	display: none;
-}
-a.jp-unmute:hover {
-	background: url("../img/jplayer.blue.monday.png") -19px -186px no-repeat;
-}
-div.jp-volume-bar {
-	position: absolute;
-	overflow:hidden;
-	background: url("../img/jplayer.blue.monday.png") 0 -250px repeat-x;
-	width:46px;
-	height:5px;
-	cursor: pointer;
-}
-div.jp-audio div.jp-type-single div.jp-volume-bar {
-	top:37px;
-	left:302px;
-}
-div.jp-audio div.jp-type-playlist div.jp-volume-bar {
-	top:37px;
-	left:324px;
-}
-div.jp-video div.jp-volume-bar {
-	top:32px;
-}
-div.jp-video-270p div.jp-type-single div.jp-volume-bar {
-	left:332px;
-}
-div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {
-	left:391px;
-}
-div.jp-video-360p div.jp-type-single div.jp-volume-bar {
-	left:412px;
-}
-div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {
-	left:471px;
-}
-div.jp-volume-bar-value {
-	background: url("../img/jplayer.blue.monday.png") 0 -256px repeat-x;
-	width:0px;
-	height:5px;
-}
-div.jp-current-time,
-div.jp-duration {
-	position: absolute;
-	font-size:.64em;
-	font-style:oblique;
-}
-div.jp-duration {
-	text-align: right;
-}
-div.jp-audio div.jp-type-single div.jp-current-time,
-div.jp-audio div.jp-type-single div.jp-duration {
-	top:49px;
-	left:130px;
-	width:122px;
-}
-div.jp-audio div.jp-type-playlist div.jp-current-time,
-div.jp-audio div.jp-type-playlist div.jp-duration {
-	top:49px;
-	left:164px;
-	width:122px;
-}
-div.jp-video div.jp-current-time,
-div.jp-video div.jp-duration {
-	top:10px;
-	left:0px;
-	width:98%;
-	padding:0 1%;
-}
-div.jp-playlist {
-	/* width:418px; */
-/* 	width:400px; */
-	margin-top:6.3em;
-	right:0px;
-}
-div.jp-playlist ul {
-	list-style-type:none;
-	margin:0;
-	padding:0 20px;
-	/* background-color:#ccc; */
-	/* border:1px solid #009be3; */
-	/* border-top:none; */
-	/* width:378px; */
-	font-size:.72em;
-}
-
-
-div.jp-type-single div.jp-playlist li {
-	padding:5px 0 5px 20px;
-	font-weight:bold;
-}
-div.jp-type-playlist div.jp-playlist li {
-	padding:5px 0 4px 20px;
-	border-bottom:1px solid #eee;
-}
-/*
- d *iv.jp-video div.jp-playlist li {
-	 padding:5px 0 5px 20px;
-	 font-weight:bold;
- }
- */
-div.jp-type-playlist div.jp-playlist li.jp-playlist-last {
-	padding:5px 0 5px 20px;
-	border-bottom:none;
-}
-div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
-	list-style-type:square;
-	list-style-position:inside;
-	padding-left:8px;
-}
-div.jp-type-playlist div.jp-playlist a {
-	color: #666;
-	text-decoration: none;
-}
-div.jp-type-playlist div.jp-playlist a:hover {
-	color:#0d88c1;
-}
-div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
-	color:#0d88c1;
-}
-div.jp-type-playlist div.jp-playlist div.jp-free-media {
-	display:inline;
-	margin-left:20px;
-}
-
-div.jp-video div.jp-video-play {
-	background: transparent url("../img/jplayer.blue.monday.video.play.png") no-repeat center;
-	/* position: relative; */
-	position: absolute;
-	cursor:pointer;
-	z-index:2;
-}
-div.jp-video div.jp-video-play:hover {
-	background: transparent url("../img/jplayer.blue.monday.video.play.hover.png") no-repeat center;
-}
-div.jp-video-270p div.jp-video-play {
-	top:-270px;
-	width:480px;
-	height:270px;
-}
-div.jp-video-360p div.jp-video-play {
-	top:-360px;
-	width:640px;
-	height:360px;
-}
-
-div.jp-jplayer {
-	width:0px;
-	height:0px;
-}
-div.jp-video div.jp-jplayer {
-	border:1px solid #009be3;
-	border-bottom:none;
-	z-index:1;
-}
-div.jp-video-270p div.jp-jplayer {
-	width:480px;
-	height:270px;
-}
-div.jp-video-360p div.jp-jplayer {
-	width:640px;
-	height:360px;
-}
-div.jp-jplayer {
-	background-color: #000000;
-}
-
-div.jp-playlist ul li button{
-	display:none;
-}
-
-div.jp-playlist ul li:hover button{
-	display:inline;
-}
\ No newline at end of file
diff --git a/apps/media/css/music.css b/apps/media/css/music.css
new file mode 100644
index 00000000000..92a4ea5e147
--- /dev/null
+++ b/apps/media/css/music.css
@@ -0,0 +1,9 @@
+#folderlist li{list-style-type:none;margin-bottom:10px;}
+#folderlist button.prettybutton{font-size:1em;width:10ex;}
+li button.right.prettybutton{font-size:1em;}
+#collection{padding-top:1em;position:relative;width:70ex;float:left;}
+#collection li.album,#collection li.song{margin-left:3ex;}
+#playlist{margin-left:72ex;}
+#playlist li.current{background-color:#ccc;}
+#collection li button{float:right;}
+#collection li,#playlist li{list-style-type:none;}
diff --git a/apps/media/css/player.css b/apps/media/css/player.css
new file mode 100644
index 00000000000..bf404f515fd
--- /dev/null
+++ b/apps/media/css/player.css
@@ -0,0 +1,29 @@
+#jp-interface{position:fixed;z-index:100;width:25em;left:201px;top:-10px;height:80px;border-bottom:none;}
+#jp-interface.player{display:hidden;}
+#jp-interface ul.jp-controls{list-style-type:none;padding:0;}
+#jp-interface ul.jp-controls li{display:inline;}
+#jp-interface ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;}
+a.jp-play,a.jp-pause{width:40px;height:40px;z-index:1;top:20px;left:48px;}
+a.jp-play{background:url("../img/jplayer.blue.monday.png") 0 0 no-repeat;}
+a.jp-play:hover{background:url("../img/jplayer.blue.monday.png") -41px 0 no-repeat;}
+a.jp-pause{background:url("../img/jplayer.blue.monday.png") 0 -42px no-repeat;display:none;}
+a.jp-pause:hover{background:url("../img/jplayer.blue.monday.png") -41px -42px no-repeat;}
+a.jp-stop{top:26px;left:126px;background:url("../img/jplayer.blue.monday.png") 0 -83px no-repeat;width:28px;height:28px;z-index:1;}
+a.jp-stop:hover{background:url("../img/jplayer.blue.monday.png") -29px -83px no-repeat;}
+a.jp-previous{left:20px;top:26px;background:url("../img/jplayer.blue.monday.png") 0 -112px no-repeat;width:28px;height:28px;}
+a.jp-previous:hover{background:url("../img/jplayer.blue.monday.png") -29px -112px no-repeat;}
+a.jp-next{left:88px;top:26px;background:url("../img/jplayer.blue.monday.png") 0 -141px no-repeat;width:28px;height:28px;}
+a.jp-next:hover{background:url("../img/jplayer.blue.monday.png") -29px -141px no-repeat;}
+div.jp-progress{position:absolute;overflow:hidden;background-color:#293b51;top:32px;left:164px;width:122px;height:15px;}
+div.jp-seek-bar{background:url("../img/jplayer.blue.monday.png") 0 -202px repeat-x;width:0;height:100%;cursor:pointer;}
+div.jp-play-bar{background:url("../img/jplayer.blue.monday.png") 0 -218px repeat-x;width:0;height:100%;}
+div.jp-seeking-bg{background:url("../img/pbar-ani.gif");}
+a.jp-mute,a.jp-unmute{height:15px;width:18px;top:32px;left:296px;}
+a.jp-mute{background:url("../img/jplayer.blue.monday.png") 0 -186px no-repeat;}
+a.jp-mute:hover{background:url("../img/jplayer.blue.monday.png") -19px -170px no-repeat;}
+a.jp-unmute{background:url("../img/jplayer.blue.monday.png") 0 -170px no-repeat;display:none;}
+a.jp-unmute:hover{background:url("../img/jplayer.blue.monday.png") -19px -186px no-repeat;}
+div.jp-volume-bar{position:absolute;overflow:hidden;background:url("../img/jplayer.blue.monday.png") 0 -250px repeat-x;width:46px;height:5px;cursor:pointer;top:37px;left:324px;}
+div.jp-volume-bar-value{background:url("../img/jplayer.blue.monday.png") 0 -256px repeat-x;width:0;height:5px;}
+div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique;top:49px;left:164px;width:122px;}
+div.jp-duration{text-align:right;}
diff --git a/apps/media/css/style.css b/apps/media/css/style.css
deleted file mode 100644
index 9fb61c55c54..00000000000
--- a/apps/media/css/style.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.right{
-	float:right;
-}
-
-#folderlist li{
-	list-style-type:none;
-	margin-bottom:10px;
-}
-
-#folderlist button.prettybutton{
-	font-size:1em;
-	width:10ex;
-}
-
-li button.right.prettybutton{
-	font-size:1em;
-}
-
-#collection{
-	padding-top:1em;
-	position:relative;
-	width:70ex;
-	float:left;
-}
-
-#collection li{
-	list-style-type:none;
-}
-
-#collection li button{
-	float:right;
-}
-
-#collection li.album, #collection li.song{
-	margin-left:3ex;
-}
\ No newline at end of file