Tarea #967 -> Reproducir la pantalla completa con dedicatoria (falta botones del reproductor)

git-svn-id: https://192.168.0.254/svn/Proyectos.ASong2U_Web/trunk@65 cd1a4ea2-8c7f-e448-aada-19d1fee9e1d6
This commit is contained in:
David Arranz 2012-08-06 11:56:42 +00:00
parent a0a4b3fd2e
commit 012d5db830
7 changed files with 252 additions and 25 deletions

View File

@ -27,7 +27,7 @@
<!--[if lt IE 9]>
<body <?php body_class('ie8 '.$gp_settings['browser'].' '.$gp_settings['layout'].' '.$gp_settings['skin']); ?>>
<![endif]-->
<!--Begin Page Wrapper-->
<div id="page-wrapper">
@ -101,11 +101,10 @@
<!--End Header Bottom-->
</div>
<!--End Header-->
<!--End Header-->
<?php if( (is_user_logged_in()) && (is_home() || is_front_page())) { ?>
<?php if (!in_array(bp_current_component(), array("members", "groups"))) { ?>
<?php require('video-slider.php'); ?>
<?php require('video-slider.php'); ?>
<?php } ?>
<?php } ?>

View File

@ -1,5 +1,26 @@
<script>
jQuery(document).ready(function(){
jQuery('.controls_fullscreen').css('cursor', 'pointer');
_fullscreen = jQuery('.controls_fullscreen').children('img');
_srcimg = _fullscreen.attr('src');
_fullscreen.bind('click', function(){
if (jQuery('#the_slider').hasClass('fullscreen_div')) {
jQuery('#componentWrapper').videoGallery.pauseMedia();
jQuery('#the_slider').removeClass('fullscreen_div');
jQuery('#componentWrapper').videoGallery.playMedia();
_fullscreen.attr('src', _srcimg.replace('_exit.png', '.png'));
} else {
jQuery('#componentWrapper').videoGallery.pauseMedia();
jQuery('#the_slider').addClass('fullscreen_div');
jQuery('#componentWrapper').videoGallery.playMedia();
_fullscreen.attr('src', _srcimg.replace('.png', '_exit.png'));
}
});
});
jQuery(document).ready(function(){
jQuery('.home-page .wp-pagenavi a').live('click', function(e){

View File

@ -128,7 +128,7 @@
background: url('../data/controls_hit.png') repeat;
}
#componentWrapper .controls_prev{
#componentWrapper .controls_fullscreen {
position:absolute;
width:40px;
height:40px;
@ -138,6 +138,26 @@
background-color: rgba(0, 0, 0, 0.6);
}
#componentWrapper .controls_fullscreen img{
position:absolute;
display:block;
width:40px;
height:40px;
left:0px;
top:0px;
}
#componentWrapper .controls_prev{
position:absolute;
width:40px;
height:40px;
left:0px;
top:45px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
}
#componentWrapper .controls_prev img{
position:absolute;
display:block;
@ -152,7 +172,7 @@
width:40px;
height:40px;
left:0px;
top:45px;
top:90px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
}
@ -171,7 +191,7 @@
width:40px;
height:40px;
left:0px;
top:90px;
top:135px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
}
@ -233,7 +253,7 @@
#componentWrapper .player_share{
position:absolute;
top:135px;
top:180px;
left:0px;
width:40px;
height:40px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,6 +1,13 @@
/*************************** General Styling ***************************/
/* Page Styling */
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
border-top: 1px solid #616161;
background: #fff url(lib/images/background.png) left -25px repeat-x;
@ -38,6 +45,10 @@ h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
width: 100%;
}
.hidden {
display: none;
}
/*************************** Header ***************************/
#header {
@ -100,8 +111,14 @@ h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
/* Main Content */
#content {
width: 79.25%;
margin-bottom: 20px;
padding-right: 2%;
width: 77.25%;
}
.home-page #content {
padding-right: 0;
width: 79.25%;
}
#content.fullwidth {
@ -317,6 +334,14 @@ ul.navmenu li a.logout:hover {
position: relative;
}
.dedicationTitle_logo {
display: none;
}
#dedicationTitle_container #dedicationTitle-data-panel {
display: none;
}
#dedicationTitle {
line-height:65px;
margin:0;
@ -1265,4 +1290,168 @@ color: #325670;
#invite-anyone-group-list li {
height: 100px !important;
list-style: none !important;
}
}
.fullscreen_div {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:111 !important;
background-color:black;
}
.fullscreen_div #slider-wrapper {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
}
.fullscreen_div #componentWrapper{
height:100%;
background:#000;
}
/* wrapper for video */
.fullscreen_div #componentWrapper .mediaWrapper,
.fullscreen_div #componentWrapper .youtubeHolder,
.fullscreen_div #componentWrapper .vimeoHolder {
position:absolute;
top:0px;
left:0px;
width:100% !important;
height:100%;
overflow:hidden;
}
.fullscreen_div #dedicationTitle_container {
height: 100px;
}
.fullscreen_div .dedicationTitle_logo {
display: block;
position: absolute;
float: left;
margin: 18px 0 0 18px;
}
.fullscreen_div #dedicationTitle_container #dedicationTitle-data-panel {
display: block;
width: 100%;
font-size: 26px;
margin-top: 10px;
}
.fullscreen_div #dedicationTitle_container #dedicationTitle-data-panel img.dedicationFlag {
height: 32px;
margin-top: -8px;
vertical-align: middle;
width: 32px;
}
.fullscreen_div #dedicationTitle_container #dedicationTitle-data-panel span {
display: inline-block;
font-weight: bold;
}
.fullscreen_div #dedicationTitle_container #dedicationTitle-data-panel span:first-of-type {
margin-right: 30px;
}
.fullscreen_div #dedicationTitle_container h2 {
}
.fullscreen_div #dedicationFooter_container {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
display: none !important;
}
.fullscreen_div #componentWrapper .thumbHolder{
position:absolute;
top:0px;
width:0px;/* hidden on beginning */
height:100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
overflow:hidden;
}
.fullscreen_div #componentWrapper .thumbContainer{
position:absolute;
height:100%;
top:40px;
left:0px;
/*background:#9C9;*/
}
.fullscreen_div #componentWrapper .thumbInnerContainer{
position:absolute;
height:100%;
top:0px;
left:10px;
}
.fullscreen_div #componentWrapper .thumbBackward{
position:absolute;
width:170px;
height:40px;
top:0px;
left:0px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
display:none;
}
.fullscreen_div #componentWrapper .thumbBackward img{
position:absolute;
display:block;
width:31px;
height:21px;
top:50%;
left:50%;
margin-left:-15px;
margin-top:-14px;
}
#componentWrapper .thumbForward{
position:absolute;
width:170px;
height:40px;
bottom:0px;
left:0px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
display:none;
}
#componentWrapper .thumbForward img{
position:absolute;
display:block;
width:31px;
height:21px;
top:50%;
left:50%;
margin-left:-15px;
margin-top:-10px;
}
#componentWrapper .thumb_title{
position:absolute;
width:160px;
color:#e5e5e5;
padding: 10px 20px 10px 20px;
font-family: 'Terminal Dosis', sans-serif;
font-size:20px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
}

View File

@ -41,10 +41,14 @@ if (have_posts()) {
$slide_counter = 0;
$urls_video = array();
?>
<div id="the_slider">
<!--Begin Slider Wrapper-->
<div id="slider-wrapper">
<div id="dedicationTitle_container"><h2 id="dedicationTitle"></h2></div>
<?php if($theme_logo) { ?><div class="dedicationTitle_logo"><img src="<?php echo($theme_logo); ?>" alt="<?php bloginfo('name'); ?>" /></div><?php } ?>
<div id="dedicationTitle_container">
<div id="dedicationTitle-data-panel"></div>
<h2 id="dedicationTitle"></h2>
</div>
<div id="componentWrapper">
<div class="mediaWrapper">
<div class="youtubeHolder"></div>
@ -67,12 +71,7 @@ if (have_posts()) {
if ($slide_counter == $posts_per_page) {
break;
}
/*$from_user_id = get_the_author_meta('ID');
$to_user_id = get_post_meta($post->ID, 'ghostpool_destination_user_id', true);
$to_user = get_user_by('id', $to_user_id);
$to_user_email = get_post_meta($post->ID, 'ghostpool_destination_user_email', true);*/
$displayed_id = bp_displayed_user_id();
// Perfil del usuario: sólo mostrar las dedicadas por él y para él. El resto se descartan.
@ -89,11 +88,6 @@ if (have_posts()) {
}
}
/*$video = get_post_meta($post->ID, 'ghostpool_dedication_url', true);
$artist = get_post_meta($post->ID, 'ghostpool_dedication_artist', true);
$song = get_post_meta($post->ID, 'ghostpool_dedication_song', true);*/
$video = $gp_settings['video'];
if ($_ishome) {
@ -151,6 +145,7 @@ if (have_posts()) {
</div> <!-- componentPlaylist -->
<div class="slideshow_controls">
<?php if ($slide_counter > 1) { ?>
<div class="controls_fullscreen"><img src='<?php echo get_template_directory_uri(); ?>/lib/scripts/videoslider/data/icons/fullscreen.png' width='11' height='16' alt='fullscreen'/></div>
<div class="controls_prev"><img src='<?php echo get_template_directory_uri(); ?>/lib/scripts/videoslider/data/icons/backward.png' width='11' height='16' alt='controls_prev'/></div>
<div class="controls_playlist_toggle"><img src='<?php echo get_template_directory_uri(); ?>/lib/scripts/videoslider/data/icons/close.png' width='16' height='16' alt='controls_playlist_toggle'/></div>
<div class="controls_next"><img src='<?php echo get_template_directory_uri(); ?>/lib/scripts/videoslider/data/icons/forward.png' width='11' height='16' alt='controls_next'/></div>
@ -256,7 +251,10 @@ if (have_posts()) {
jQuery('#dedication-data-panel').hide('fast');
jQuery('#dedication-data-panel').slideUp(
'fast',
function() { jQuery('#dedication-data-panel').html(from_to); }
function() {
jQuery('#dedication-data-panel').html(from_to);
jQuery('#dedicationTitle-data-panel').html(from_to);
}
);
jQuery('#dedication-data-panel').slideDown();
@ -317,8 +315,8 @@ if (have_posts()) {
</script>
<?php } ?>
<!--End Slider-->
</div>