From 6aaa49d38620d2092f546cbb27f23da6f5e5e138 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 8 Aug 2011 22:31:17 +0200 Subject: [PATCH] more media player fixes --- apps/media/css/music.css | 2 +- apps/media/css/player.css | 16 +++++++--------- apps/media/index.php | 10 +--------- apps/media/templates/music.php | 34 +++++++++++++++++----------------- core/css/styles.css | 14 +++++++------- 5 files changed, 33 insertions(+), 43 deletions(-) diff --git a/apps/media/css/music.css b/apps/media/css/music.css index b8c695f74d..dd9b8ea70d 100644 --- a/apps/media/css/music.css +++ b/apps/media/css/music.css @@ -16,4 +16,4 @@ li button.right.prettybutton{font-size:1em;} img.remove{float:right;} #searchresults input.play, #searchresults input.add{float:right; height:16px; width:16px;} #collection tr.collapsed td.album, #collection tr.collapsed td.title{color:#ddd} -a.expander{float:right;display:block} \ No newline at end of file +a.expander{float:right;display:block} diff --git a/apps/media/css/player.css b/apps/media/css/player.css index 8f96a3c17a..6cf424a8ea 100644 --- a/apps/media/css/player.css +++ b/apps/media/css/player.css @@ -1,27 +1,25 @@ #controls ul.jp-controls{list-style-type:none;padding:0;} #controls ul.jp-controls li{display:inline;} #controls 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,a.jp-pause{width:40px;height:40px;z-index:1;top:0;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{left:20px;top:.5em;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{left:88px;top:.5em;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-progress{position:absolute;overflow:hidden;background-color:#293b51;top:1em;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,a.jp-unmute{height:15px;width:18px;top:1em;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{position:absolute;overflow:hidden;background:url("../img/jplayer.blue.monday.png") 0 -250px repeat-x;width:46px;height:5px;cursor:pointer;top:1.3em;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:45px;left:164px;width:122px;} +div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique;top:1em;left:164px;width:122px;} div.jp-duration{text-align:right;} diff --git a/apps/media/index.php b/apps/media/index.php index a7128aaad4..fe724b45dd 100644 --- a/apps/media/index.php +++ b/apps/media/index.php @@ -42,17 +42,9 @@ OC_Util::addScript('media','jquery.jplayer.min'); OC_Util::addStyle('media','player'); OC_Util::addStyle('media','music'); -OC_App::setActiveNavigationEntry( 'media_playlist' ); +OC_App::setActiveNavigationEntry( 'media_index' ); $tmpl = new OC_Template( 'media', 'music', 'user' ); - -$player = new OC_Template( 'media', 'player'); -$playlist = new OC_Template( 'media', 'playlist'); -$collection= new OC_Template( 'media', 'collection'); - -$tmpl->assign('player',$player->fetchPage()); -$tmpl->assign('playlist',$playlist->fetchPage()); -$tmpl->assign('collection',$collection->fetchPage()); $tmpl->printPage(); ?> diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php index 5fe11bdae3..5d0b0b6f0c 100644 --- a/apps/media/templates/music.php +++ b/apps/media/templates/music.php @@ -17,15 +17,15 @@
-
+
- +
- - + + @@ -36,35 +36,35 @@ - - + - +
NameArtistNameArtist
- +
+
-
- +
+
- - + +
- +
- - - - + + + +
Artist Album Title
diff --git a/core/css/styles.css b/core/css/styles.css index 40f1602626..e1999a61a5 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -3,8 +3,7 @@ body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana /* HEADERS */ -#body-user #header, #body-settings #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; } -#body-settings #header { background:#313131; } +#body-user #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; } #body-login #header { margin:-2em auto 0; text-align:center; height:10em; -moz-box-shadow:0 0 1em #000; -webkit-box-shadow:0 0 1em #000; box-shadow:0 0 1em #000; background: #1d2d44; /* Old browsers */ @@ -54,7 +53,12 @@ border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f2f2f2; col legend { padding:.2em; font-size:1.2em; } .template{display:none;} -#controls { width:100%; height:3em; margin:0; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; } +/* CONTENT ------------------------------------------------------------------ */ +#controls { width:100%; top:3.5em; height:3em; margin:0; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:2; } +#content { margin:3.5em 0 0 12.5em; } +#body-settings #content { padding:1em; } +#leftcontent { position:absolute; top:6.5em; width:50em; } +#rightcontent { position:absolute; top:6.5em; left:32em; } /* LOG IN & INSTALLATION ------------------------------------------------------------ */ #body-login { background-color:#ddd; } @@ -87,10 +91,6 @@ legend { padding:.2em; font-size:1.2em; } #navigation .subentry.active { background-color:#bbb; border-top:1px solid #888; border-bottom:1px solid #bbb; } #navigation .subentry a { padding-left:3.1em; font-size:1em; } -/* CONTENT ------------------------------------------------------------------ */ -#content { margin:3.5em 0 0 12.5em; } -#body-settings #content { padding:1em; } - /* USER SETTINGS ------------------------------------------------------------ */ #quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } #quota_indicator div { background-color:#76A9EA; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }