WordPress.org

Ready to get started?Download WordPress

Forums

podPress
[resolved] audio player messed up in IE 8 + a login before download question (5 posts)

  1. Sho-Down
    Member
    Posted 3 years ago #

    2 things I need help with, thank you in advance.

    Website: http://www.RockItMembers.us

    1. This is a cloned domain of my blog so I can work on updates and I ran into a problem with the latest version of Podpress. In Firefox 5 everything looks fine but if you open my site in IE 8 you'll see that the player and Download button are messed up. Any ideas which css is causing this problem?

    2. On my current website I have a function where users have to log in before they can see the podpress download button. To do this I edited the podpress_theme.php file (podpress 8.8) and added:

    if($val['enablePlayer']) {
    				if($podPressContent != '') {
    					$podPressContent .= "<br/>\n";
    				}
    				$podPressContent .= '<div id="podPressPlayerSpace_'.$GLOBALS['podPressPlayer'].'">&nbsp;</div>'."\n";
    			}
    
    			if(isset($val['image'])) {
    			if (is_user_logged_in()) {
    				if($val['enableDownload'] && !empty($val['URI'])) {
    					$podPressContent .= '<a href="'.$val['URI'].'" target="new">';
    				}
    				$podPressContent .= '<img src="'.podPress_url().'images/'.$val['image'].'" border="0" align="top" class="podPress_imgicon" alt="icon for podpress" />';
    				if($val['enableDownload'] && !empty($val['URI'])) {
    					$podPressContent .= '</a>';
    				}
    				if(!$podPressTemplateData['showDownloadText'] == 'enabled') {
    					$val['enableDownload'] = false;
    				}
    
    				} else {
    
    				$podPressContent .= '<i><a href="http://www.rockitpro.com/wp-login.php">Log in</a> <font color="black">to download the MP3.
     It\'s free and instant to <a href="http://www.rockitpro.com/wp-login.php?action=register">
    register</a>!</font></i><br />';
    }
    }  
    
    			if($val['enableTorrentDownload']) {
    				$podPressContent .= '<a href="'.$val['URI_torrent'].'" target="new">';
    				if(strstr($val['image'], '_button')) {
    					$torrentimg = 'misc_torrent_button.png';

    I included some code before & after so you can get an idea of where I put it. With the new Podpress I can't figure out where to do this at or what to replace, can you help me out?

    http://wordpress.org/extend/plugins/podpress/

  2. ntm
    Member
    Plugin Author

    Posted 3 years ago #

    but if you open my site in IE 8 you'll see that the player and Download button are messed up.

    I guess you mean that the download button overlaps parts of the text below?
    The difference between the IE8 and the other browser exists because the IE8 interprets some padding and margin values differently. But it has also something to do with the method you are using to put the "BUY A LICENSE" button on the right side of the post.
    There are probably multiple ways to solve the problem. I would suggest to use float: left; and float: right; instead of position as follows:

    .beatposts {
    	width:100%;
    	float:left;
    	padding:5px 0 0; /* for non-IE browsers */
    }
    .podpressleft {
    	float:left;
    	margin-left:4px;
    }
    .buylicenseright {
    	float:right;
    }

    The second issue may be solved best with an filter plugin. Since version 8.8.5 podPress has like WP itself filter hooks for parts of the output content. Among the Other Notes you can find a list of all hooks of podPress (The list is currently not complete on the web site but the complete list should be in the readme.txt file).
    The podpress_downloadlinks hook is probably the most interesting hook for your case. You can use it to filter and customize the content of that download link line without editing the podpress_theme.php file. Additionally you will be able upgrade podPress without re-doing your customisation.

    The following code is a little plugin which will diplay your custom code instead of the podPress line with the download button:

    /*
    Plugin Name: podPress filter
    Plugin URI:
    Description: diplays custom code instead of the podPress line with the download button if a visitor is not logged in
    Author: ntm
    Version: 1.0
    Author URI:
    */
    
    add_filter('podpress_downloadlinks', 'customize_podpress_downloadlinks');
    function customize_podpress_downloadlinks($podPressDownloadlinks) {
    	if ( is_user_logged_in() ) {
    		return $podPressDownloadlinks;
    	} else {
    		return '<span id="podPressPlayerSpace_'.$GLOBALS['podPressPlayer'].'_PlayLink" style="display:none">'.$hideplayerplaynow_divider.__('Play Now', 'podpress').'</span>'.'<i><a href="http://www.rockitpro.com/wp-login.php">Log in</a> <font color="black">to download the MP3. It\'s free and instant to <a href="http://www.rockitpro.com/wp-login.php?action=register">register</a>!</font></i><br />';
    	}
    }

    Put this code in a .php file and store it in the plugins folder of your blog (e.g. /wp-content/plugins/podpress_filter/podpress_filter.php) and it will appear in the list of the plugins in the backend of your blog where you activate and deactivate it.

    Notice: I have attached

    '<span id="podPressPlayerSpace_'.$GLOBALS['podPressPlayer'].'_PlayLink" style="display:none">'.$hideplayerplaynow_divider.__('Play Now', 'podpress').'</span>'

    to your custom line from the example. That needs to be in each line. Otherwise you will get a lot of Javascript errors on page load. If you customize the code of the filter plugin then leave that part as it is. It is invisible and should not modify the appearance of your blog.

    Regards,
    Tim

  3. Sho-Down
    Member
    Posted 3 years ago #

    Thanks for the reply Tim! Your code changes for the alignment worked, I just had to add margin-top:-.4cm; to .podpressleft to move it up because it was still too low. Is there a better way to do it or will this be fine?

    /*NEW BEAT POSTS*/
    .beatposts {width:100%; float:left; padding:5px 0 0; /* for non-IE browsers */}
    .podpressleft {float:left; margin-top:-.4cm; margin-left: 4px;}
    .buylicenseright {float:right; width: 31%;}

    http://www.RockItMembers.us in case you wanted to double check that everything's lined up.

    The login before download plugin works perfectly, that's exactly what I needed, I appreciate it.

    One last thing...is there any way to add a player to the podpress plugin? For example the Flowplayer? http://flowplayer.org/plugins/streaming/audio.html

  4. Sho-Down
    Member
    Posted 2 years ago #

    And one other last thing lol...

    In the 1Pixelout audio player when you hit the play button it says Track #1 on the left side, how do I delete that so it only shows the duration on the right side?

  5. ntm
    Member
    Plugin Author

    Posted 2 years ago #

    I think it is okay how regulate the vertical position. The space which you undo is defined by the class .podpress_playerspace . It has the attribute: margin-top: 15px; (margin: 15px 0px 0px 0px;).

    about the flowplayer:
    I definitely think about integrating another player which has a Flash player as a fall-back solution for the HTML5 media elements like the jPlayer. But I have not decided yet which one it will be and I can also not tell when I will integrate a new player.

    about the "Track #1" issue:
    That the player shows only Track #1 instead of the meta data of the media file is a security feature of Abobe Flash.
    Your media files are located at a different domain than your blog and the 1PixelOut Player (nor the Podango Player) are allowed to get these information from a file on a different domain.
    You can find the option "Use a cross-domain policy file:" on the Player Settings page of podPress. You will need to activate this option and also to create a crossdomain.xml file. But before you do this read the instructions carefully.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags