From 0d19a6349d8ebd1fe4b8b774051726f8a7974bb9 Mon Sep 17 00:00:00 2001 From: Martin Ambrus Date: Wed, 23 Dec 2020 13:28:21 +0100 Subject: [PATCH 1/2] refactor: tabs playlist style changed to use same code as other playlists --- models/flowplayer-frontend.php | 78 +++++++++------------------------- models/flowplayer.php | 30 ++++++++----- 2 files changed, 38 insertions(+), 70 deletions(-) diff --git a/models/flowplayer-frontend.php b/models/flowplayer-frontend.php index 8f189d05a..66e46e34b 100644 --- a/models/flowplayer-frontend.php +++ b/models/flowplayer-frontend.php @@ -33,8 +33,6 @@ class flowplayer_frontend extends flowplayer var $aCurArgs = array(); var $sHTMLAfter = false; - - var $count_tabs = 0; var $currentPlayerObject = null; @@ -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; @@ -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 @@ -698,8 +701,12 @@ function build_min_player($media,$args = array()) { $this->ret['html'] .= ''."\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; @@ -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'] = '
'; - $output->ret['script'] = array(); - - $output->ret['html'] .= '
    '; - foreach( $aPlaylistItems AS $key => $aSrc ) { - $sCaption = !empty($aCaptions[$key]) ? $aCaptions[$key] : $key; - $output->ret['html'] .= '
  • '.$sCaption.'
    • '; - } - $output->ret['html'] .= '
'; - $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'] .= '
'.$aPlayer['html'].'
'; - 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'] .= '
'; - - $this->load_tabs = true; - - return $output->ret; - } - - function get_sharing_html() { global $post; diff --git a/models/flowplayer.php b/models/flowplayer.php index 6cb0f6b01..5d7171c3e 100644 --- a/models/flowplayer.php +++ b/models/flowplayer.php @@ -20,6 +20,7 @@ class flowplayer extends FV_Wordpress_Flowplayer_Plugin_Private { private $count = 0; + private $tabsCount = 0; /** * Relative URL path */ @@ -863,32 +864,37 @@ private function build_playlist_html( $aArgs, $sSplashImage, $sItemCaption, $aPl if( $sListStyle != 'text' ) { $sHTML .= "
"; - 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 .= ""; } else { - $sHTML .= ""; + $sHTML .= ""; } } else { $sHTML .= "
"; } - 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 .= ''; - } else if( !empty($aItem['saw']) ) { + } else if ( ! empty( $aItem['saw'] ) ) { $sHTML .= ''; } + } else { + $sHTML .= '
' . ++$this->tabsCount . '
'; + } $sHTML .= "
"; } @@ -910,7 +916,7 @@ private function build_playlist_html( $aArgs, $sSplashImage, $sItemCaption, $aPl $sHTML .= ""; - } else { + } else if ( $sListStyle != 'tabs' ) { if( $sItemCaption ) $sItemCaption = "".$sItemCaption.""; if( $tDuration ) { @@ -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; @@ -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 ); From 775e587cd47ebf14b408ad051d67c411cc774896 Mon Sep 17 00:00:00 2001 From: Martin Ambrus Date: Wed, 23 Dec 2020 13:31:55 +0100 Subject: [PATCH 2/2] refactor: tabs playlist style changed to use same code as other playlists --- css/flowplayer.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/css/flowplayer.css b/css/flowplayer.css index 078ace6f7..ae677e887 100644 --- a/css/flowplayer.css +++ b/css/flowplayer.css @@ -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 } @@ -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; } @@ -2194,4 +2201,4 @@ body.fv_flowplayer_tabs_hide .fv_flowplayer_tabs_content > div.fv_flowplayer_tab .flowplayer .fp-ui .invisible { visibility: hidden; -} \ No newline at end of file +}