Skip to content

2958003664 rework tabbedplaylist #335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
foliovision wants to merge 2 commits into
base: editor-js-cleanup
Choose a base branch
from
Open

2958003664 rework tabbedplaylist #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d19a63
refactor: tabs playlist style changed to use same code as other playl…
martinambrus Dec 23, 2020
775e587
refactor: tabs playlist style changed to use same code as other playl…
martinambrus Dec 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions css/flowplayer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -988,7 +988,7 @@
background-color: rgba(0, 0, 0, .75) !important;
}

.flowplayer { margin: 0 auto 2.8em auto; display: block; max-width: 100%; }
.flowplayer { margin: 0 auto 2.8em auto; display: block; max-width: 100%; clear: both; }
.flowplayer.has-caption { margin: 0 auto; }
.flowplayer.fixed-controls.has-caption, flowplayer.fixed-controls.has-caption * { margin-bottom: 2.8em; }
.flowplayer.fixed-controls { margin-bottom: 5.2em }
Expand Down Expand Up @@ -1653,6 +1653,13 @@ article .entry-content .fvfp_admin_error p { line-height: 18px }
/*
* FV Flowplayer Tabs
*/
.fp-playlist-tabs { margin: 0 auto; }
.fp-playlist-tabs .fvp-playlist-thumb-img { text-decoration: none; color:#5E5E5E; background-color:#EFEFEF; font-weight: bold; }
.fp-playlist-tabs a.is-active .fvp-playlist-thumb-img { color: #FFF; background-color:#5E5E5E; }
.fp-playlist-tabs .fvp-playlist-tab-number { margin: -0.8em -1em; }
.fp-playlist-tabs a > strong { display: none; }

.fp-playlist-external.fp-playlist-tabs a > .fvp-playlist-thumb-img { width: 1em; height: 1em; margin: 0; padding: 1em; float: left; }
.fv_flowplayer_tabs { margin: 0 auto; }
.fv_flowplayer_tabs ul.ui-tabs,.fv_flowplayer_tabs ul.ui-tabs-nav{margin:0 !important;font-size:13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;line-height:24px !important}
.fv_flowplayer_tabs .ui-tabs { padding: 0; zoom: 1; }
Expand Down Expand Up @@ -2194,4 +2201,4 @@ body.fv_flowplayer_tabs_hide .fv_flowplayer_tabs_content > div.fv_flowplayer_tab

.flowplayer .fp-ui .invisible {
visibility: hidden;
}
}
78 changes: 19 additions & 59 deletions models/flowplayer-frontend.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ class flowplayer_frontend extends flowplayer
var $aCurArgs = array();

var $sHTMLAfter = false;

var $count_tabs = 0;

var $currentPlayerObject = null;

Expand Down Expand Up @@ -233,7 +231,20 @@ function build_min_player($media,$args = array()) {
$aSplashScreens = array();
$aCaptions = array();

list( $playlist_items_external_html, $aPlaylistItems, $aSplashScreens, $aCaptions ) = $this->build_playlist( $this->aCurArgs, $media, $src1, $src2, $rtmp, $splash_img );
if( !empty($this->aCurArgs['playlist']) && in_array( $this->aCurArgs['liststyle'], array('horizontal','slider','vertical','prevnext') ) ) {
$width_style = 'max-width: 100%;';
} else {
if( intval($width) == 0 ) $width = '100%';
if( intval($height) == 0 ) $height = '100%';
$cssWidth = stripos($width,'%') !== false ? $width : $width . 'px';
if( $this->_get_option('fixed_size') ) {
$width_style = 'width: ' . $cssWidth . ';';
} else {
$width_style = 'max-width: ' . $cssWidth . ';';
}
}

list( $playlist_items_external_html, $aPlaylistItems, $aSplashScreens, $aCaptions ) = $this->build_playlist( $this->aCurArgs, $media, $src1, $src2, $rtmp, $splash_img, false, $width_style );

if( count($aPlaylistItems) == 1 && empty($this->aCurArgs['listshow']) ) {
$playlist_items_external_html = false;
Expand Down Expand Up @@ -269,14 +280,6 @@ function build_min_player($media,$args = array()) {
}
}

/*
* Video player tabs
*/

if( $player_type == 'video' && $this->aCurArgs['liststyle'] == 'tabs' && count($aPlaylistItems) > 1 ) {
return $this->get_tabs($aPlaylistItems,$aSplashScreens,$aCaptions,$width);
}


/*
* Autoplay, in the older FV Player versions this setting was just true/false and that creates a ton of issues
Expand Down Expand Up @@ -698,8 +701,12 @@ function build_min_player($media,$args = array()) {

$this->ret['html'] .= '</div>'."\n";

if ( !empty( $this->aCurArgs['liststyle'] ) && $this->aCurArgs['liststyle'] == 'tabs' ) {
$this->ret['html'] = $this->sHTMLAfter . $this->ret['html'] . $scripts_after;
} else {
$this->ret['html'] .= $this->sHTMLAfter.$scripts_after;

}

// change engine for IE9 and 10
if( $this->aCurArgs['engine'] == 'false' ) {
$this->ret['script']['fv_flowplayer_browser_ie'][$this->hash] = true;
Expand Down Expand Up @@ -1081,54 +1088,7 @@ function get_subtitles($index = 0) {

return $aSubtitles;
}

function get_tabs($aPlaylistItems,$aSplashScreens,$aCaptions,$width) {
global $post;

if( intval($width) == 0 ) $width = '100%';
$cssWidth = stripos($width,'%') !== false ? $width : $width . 'px';

$this->count_tabs++;
$output = new stdClass;
$output->ret = array();
$output->ret['html'] = '<script>document.body.className += " fv_flowplayer_tabs_hide";</script><div class="fv_flowplayer_tabs tabs woocommerce-tabs" style="max-width: '.$cssWidth.'"><div id="tabs-'.$post->ID.'-'.$this->count_tabs.'" class="fv_flowplayer_tabs_content">';
$output->ret['script'] = array();

$output->ret['html'] .= '<ul>';
foreach( $aPlaylistItems AS $key => $aSrc ) {
$sCaption = !empty($aCaptions[$key]) ? $aCaptions[$key] : $key;
$output->ret['html'] .= '<li><a href="#tabs-'.$post->ID.'-'.$this->count_tabs.'-'.$key.'">'.$sCaption.'</a></li>';
}
$output->ret['html'] .= '</ul><div class="fv_flowplayer_tabs_cl"></div>';

$aStartend = !empty($this->aCurArgs['startend']) ? explode(";",$this->aCurArgs['startend']) : array(); // todo: somehow move to Pro?

foreach( $aPlaylistItems AS $key => $aSrc ) {
if( !empty($aStartend[$key]) ) $this->aCurArgs['startend'] = $aStartend[$key];

unset($this->aCurArgs['id']);
unset($this->aCurArgs['playlist']);
$this->aCurArgs['src'] = $aSrc['sources'][0]['src']; // todo: remaining sources!

$this->aCurArgs['splash'] = isset($aSplashScreens[$key])?$aSplashScreens[$key]:'';
unset($this->aCurArgs['caption']);
$this->aCurArgs['liststyle']='none';

$aPlayer = $this->build_min_player( $this->aCurArgs['src'],$this->aCurArgs );
$sClass = $key == 0 ? ' class="fv_flowplayer_tabs_first"' : '';
$output->ret['html'] .= '<div id="tabs-'.$post->ID.'-'.$this->count_tabs.'-'.$key.'"'.$sClass.'>'.$aPlayer['html'].'</div>';
foreach( $aPlayer['script'] AS $key => $value ) {
$output->ret['script'][$key] = array_merge( isset($output->ret['script'][$key]) ? $output->ret['script'][$key] : array(), $aPlayer['script'][$key] );
}
}
$output->ret['html'] .= '<div class="fv_flowplayer_tabs_cl"></div><div class="fv_flowplayer_tabs_cr"></div></div></div>';

$this->load_tabs = true;

return $output->ret;
}


function get_sharing_html() {
global $post;

Expand Down
30 changes: 19 additions & 11 deletions models/flowplayer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

class flowplayer extends FV_Wordpress_Flowplayer_Plugin_Private {
private $count = 0;
private $tabsCount = 0;
/**
* Relative URL path
*/
Expand Down Expand Up @@ -863,32 +864,37 @@ private function build_playlist_html( $aArgs, $sSplashImage, $sItemCaption, $aPl

if( $sListStyle != 'text' ) {
$sHTML .= "<div class='fvp-playlist-thumb-img'>";
if( $sSplashImage ) {
if( !( defined( 'DONOTROCKETOPTIMIZE' ) && DONOTROCKETOPTIMIZE ) && function_exists( 'get_rocket_option' ) && get_rocket_option( 'lazyload' ) ) {

if ( $sListStyle != 'tabs' ) {
if ( $sSplashImage ) {
if ( ! ( defined( 'DONOTROCKETOPTIMIZE' ) && DONOTROCKETOPTIMIZE ) && function_exists( 'get_rocket_option' ) && get_rocket_option( 'lazyload' ) ) {
$sHTML .= "<img src='data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=' data-lazy-src='$sSplashImage' />";
} else {
$sHTML .= "<img ".(get_query_var('fv_player_embed') ? "data-no-lazy='1'":"")." src='$sSplashImage' />";
$sHTML .= "<img " . ( get_query_var( 'fv_player_embed' ) ? "data-no-lazy='1'" : "" ) . " src='$sSplashImage' />";
}

} else {
$sHTML .= "<div class='fvp-playlist-thumb-img no-image'></div>";
}

if( $tDuration && ( !empty($this->aCurArgs['saveposition']) || $this->_get_option('video_position_save_enable') ) && is_user_logged_in() ) {
if ( $tDuration && ( ! empty( $this->aCurArgs['saveposition'] ) || $this->_get_option( 'video_position_save_enable' ) ) && is_user_logged_in() ) {
$tDuration = flowplayer::hms_to_seconds( $tDuration );
$tPosition = $aItem['position'];
if( $tPosition > 0 && !empty($aPlayer['fv_start']) ) {
if ( $tPosition > 0 && ! empty( $aPlayer['fv_start'] ) ) {
$tPosition -= $aPlayer['fv_start'];
if( $tPosition < 0 ) {
if ( $tPosition < 0 ) {
$tPosition = 0;
}
}

$sHTML .= '<span class="fvp-progress-wrap"><span class="fvp-progress" style="width: '.( 100 * ( $tPosition ? $tPosition / $tDuration : 0) ).'%" data-duration="'.esc_attr($tDuration).'"></
$sHTML .= '<span class="fvp-progress-wrap"><span class="fvp-progress" style="width: ' . ( 100 * ( $tPosition ? $tPosition / $tDuration : 0 ) ) . '%" data-duration="' . esc_attr( $tDuration ) . '"></
span></span>';
} else if( !empty($aItem['saw']) ) {
} else if ( ! empty( $aItem['saw'] ) ) {
$sHTML .= '<span class="fvp-progress-wrap"><span class="fvp-progress" style="width: 100%"></span></span>';
}
} else {
$sHTML .= '<div class="fvp-playlist-tab-number">' . ++$this->tabsCount . '</div>';
}
$sHTML .= "</div>";
}

Expand All @@ -910,7 +916,7 @@ private function build_playlist_html( $aArgs, $sSplashImage, $sItemCaption, $aPl

$sHTML .= "</div>";

} else {
} else if ( $sListStyle != 'tabs' ) {
if( $sItemCaption ) $sItemCaption = "<span>".$sItemCaption."</span>";

if( $tDuration ) {
Expand All @@ -936,8 +942,8 @@ private function build_playlist_html( $aArgs, $sSplashImage, $sItemCaption, $aPl
}

// todo: this could be parsing rtmp://host/path/mp4:rtmp_path links as well
function build_playlist( $aArgs, $media, $src1, $src2, $rtmp, $splash_img, $suppress_filters = false ) {

function build_playlist( $aArgs, $media, $src1, $src2, $rtmp, $splash_img, $suppress_filters = false, $css_width_style = '' ) {
$this->tabsCount = 0;
$sShortcode = isset($aArgs['playlist']) ? $aArgs['playlist'] : false;
$sCaption = isset($aArgs['caption']) ? $aArgs['caption'] : false;

Expand Down Expand Up @@ -1127,6 +1133,8 @@ function build_playlist( $aArgs, $media, $src1, $src2, $rtmp, $splash_img, $supp
$attributes['rel'] = 'wpfp_'.$this->hash;
if( isset($this->aCurArgs['liststyle']) && $this->aCurArgs['liststyle'] == 'slider' ) {
$attributes['style'] = "width: ".(count($aPlaylistItems)*250)."px"; // we put in enough to be sure it will fit in, later JS calculates a better value
} else if ( $css_width_style ) {
$attributes['style'] = $css_width_style; // used for tabs to correctly align them with the player
}

$attributes = apply_filters( 'fv_player_playlist_attributes', $attributes, $media, $this );
Expand Down