­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ '.jet-blog-playlist__canvas', 'thumb_list' => '.jet-blog-playlist__items', 'thumb_item' => '.jet-blog-playlist__item', 'thumb_title' => '.jet-blog-playlist__item-title', 'thumb_duration' => '.jet-blog-playlist__item-duration', 'thumb_date' => '.jet-blog-playlist__item-date', 'thumb_index' => '.jet-blog-playlist__item-index', 'heading' => '.jet-blog-playlist__heading', 'heading_icon' => '.jet-blog-playlist__heading-icon', 'heading_text' => '.jet-blog-playlist__heading-title', 'heading_counter' => '.jet-blog-playlist__counter', ) ); if ( \Elementor\Plugin::$instance->breakpoints && method_exists( \Elementor\Plugin::$instance->breakpoints, 'get_active_breakpoints') ) { $active_breakpoints = \Elementor\Plugin::$instance->breakpoints->get_active_breakpoints(); $breakpoints_list = array(); $hide_breakpoints_list = array(); foreach ($active_breakpoints as $key => $value) { if ( 'mobile' != $key ) { $breakpoints_list[$key] = $key; } $hide_breakpoints_list[$key] = $value->get_label(); } $hide_breakpoints_list['desktop'] = 'Desktop'; $hide_breakpoints_list = array_reverse($hide_breakpoints_list); $breakpoints_list['desktop'] = 'desktop'; $breakpoints_list = array_reverse($breakpoints_list); } else { $breakpoints_list = array( 'desktop' => 'desktop', 'tablet' => 'tablet' ); $hide_breakpoints_list = array( 'desktop' => 'Desktop', 'tablet' => 'Tablet', 'mobile' => 'Mobile' ); } $this->start_controls_section( 'section_general', array( 'label' => esc_html__( 'Items', 'jet-blog' ), ) ); $this->add_control( 'set_key', array( 'type' => Controls_Manager::RAW_HTML, 'raw' => sprintf( esc_html__( 'Please set Google API key to correctly get data for YouTube videos. You can create own API key %1$s. Paste created key on %2$s', 'jet-blog' ), '' . esc_html__( 'here', 'jet-blog' ) . '', '' . esc_html__( 'settings page', 'jet-blog' ) . '' ) ) ); $this->add_control( 'source', array( 'label' => esc_html__( 'Source', 'jet-blog' ), 'type' => Controls_Manager::SELECT, 'default' => 'custom', 'options' => array( 'custom' => esc_html__( 'Custom Video List', 'jet-blog' ), 'yt_source' => esc_html__( 'YouTube Channel or Playlist', 'jet-blog' ), ), ) ); $repeater = new Repeater(); $repeater->add_control( 'title', array( 'label' => esc_html__( 'Title', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'description' => esc_html__( 'Leave empty to automatically get title from video', 'jet-blog' ), 'dynamic' => array( 'active' => true ), ) ); $repeater->add_control( 'url', array( 'label' => esc_html__( 'URL', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'description' => esc_html__( 'YouTube or Vimeo video URL', 'jet-blog' ), 'dynamic' => array( 'active' => true ), ) ); $repeater->add_control( 'start_time', array( 'label' => esc_html__( 'Start Time (in seconds)', 'jet-blog' ), 'type' => Controls_Manager::NUMBER, ) ); $repeater->add_control( 'custom_thumb', array( 'label' => esc_html__( 'Custom Thumbnail', 'jet-blog' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => array( 'active' => true ), ) ); $repeater->add_control( 'custom_thumb_size', array( 'label' => esc_html__( 'Thumbnail Size', 'jet-blog' ), 'type' => Controls_Manager::SELECT, 'default' => 'thumbnail', 'options' => jet_blog_tools()->get_image_sizes(), 'condition' => array( 'custom_thumb[url]!' => '', ), ) ); $this->add_control( 'videos_list', array( 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => array( array( 'title' => '', 'url' => 'https://www.youtube.com/watch?v=CJO0u_HrWE8', 'custom_thumb' => '', ), ), 'title_field' => '{{{ title }}}', 'condition' => array( 'source' => 'custom', ), ) ); $this->add_control( 'source_url', array( 'label' => esc_html__( 'Source URL', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'description' => esc_html__( 'YouTube Channel or Playlist URL', 'jet-blog' ), 'dynamic' => array( 'active' => true ), 'condition' => array( 'source!' => 'custom', ), ) ); $this->add_control( 'max_results', array( 'label' => esc_html__( 'Number of videos', 'jet-blog' ), 'type' => Controls_Manager::NUMBER, 'default' => 10, 'min' => 1, 'max' => 50, 'condition' => array( 'source!' => 'custom', ), ) ); $this->end_controls_section(); $this->start_controls_section( 'section_settings', array( 'label' => esc_html__( 'Settings', 'jet-blog' ), ) ); $this->add_responsive_control( 'playlist_height', array( 'label' => esc_html__( 'Playlist Height', 'jet-blog' ), 'description' => esc_html__( 'Option for non-mobile devices', 'jet-blog' ), 'type' => Controls_Manager::NUMBER, 'default' => 450, 'min' => 150, 'max' => 1000, 'step' => 1, 'devices' => $breakpoints_list, 'render_type' => 'template', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['canvas'] => 'height: {{VALUE}}px;', '{{WRAPPER}} .jet-blog-playlist.jet-tumbs-vertical' => 'height: {{VALUE}}px;', '{{WRAPPER}} .jet-blog-playlist__embed-wrap' => 'padding-bottom: {{VALUE}}px;', ), ) ); $this->add_control( 'thumbnails_orientation', array( 'label' => esc_html__( 'Thumbnails Orientation', 'jet-blog' ), 'type' => Controls_Manager::SELECT, 'default' => 'vertical', 'options' => array( 'vertical' => esc_html__( 'Vertical', 'jet-blog' ), 'horizontal' => esc_html__( 'Horizontal', 'jet-blog' ), ), ) ); $this->add_control( 'thumbnails_v_position', array( 'label' => esc_html__( 'Thumbnails Position', 'jet-blog' ), 'type' => Controls_Manager::SELECT, 'default' => 'right', 'options' => array( 'left' => esc_html__( 'Left', 'jet-blog' ), 'right' => esc_html__( 'Right', 'jet-blog' ), ), 'condition' => array( 'thumbnails_orientation' => 'vertical', ), ) ); $this->add_control( 'thumbnails_h_position', array( 'label' => esc_html__( 'Thumbnails Position', 'jet-blog' ), 'type' => Controls_Manager::SELECT, 'default' => 'bottom', 'options' => array( 'top' => esc_html__( 'Top', 'jet-blog' ), 'bottom' => esc_html__( 'Bottom', 'jet-blog' ), ), 'condition' => array( 'thumbnails_orientation' => 'horizontal', ), ) ); $this->add_responsive_control( 'thumbnails_width', array( 'label' => esc_html__( 'Thumbnails List Width (%)', 'jet-blog' ), 'description' => esc_html__( 'Option for non-mobile devices', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::SLIDER, 'size_units' => array( '%' ), 'devices' => $breakpoints_list, 'default' => array( 'unit' => '%', 'size' => 33, ), 'range' => array( '%' => array( 'min' => 1, 'max' => 100, 'step' => 0.1, ), ), 'condition' => array( 'thumbnails_orientation' => 'vertical', ), 'selectors' => array( '{{WRAPPER}} .jet-tumbs-vertical ' . $css_scheme['thumb_list'] => 'width: {{SIZE}}%;', ), ) ); $this->add_responsive_control( 'thumbnail_item_width', array( 'label' => esc_html__( 'Thumbnail Column Width (in pixels)', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px' ), 'default' => array( 'unit' => 'px', 'size' => 200, ), 'range' => array( 'px' => array( 'min' => 100, 'max' => 500, ), ), 'condition' => array( 'thumbnails_orientation' => 'horizontal', ), 'selectors' => array( '{{WRAPPER}} .jet-tumbs-horizontal ' . $css_scheme['thumb_item'] => 'width: {{SIZE}}px; flex: 0 0 {{SIZE}}px;', ), ) ); $this->add_control( 'show_heading', array( 'label' => esc_html__( 'Show Thumbnails Heading', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => 'yes', 'separator' => 'before', ) ); $this->add_responsive_control( 'heading_width', array( 'label' => esc_html__( 'Heading Column Width (in pixels)', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px' ), 'default' => array( 'unit' => 'px', 'size' => 195, ), 'range' => array( 'px' => array( 'min' => 100, 'max' => 500, ), ), 'condition' => array( 'thumbnails_orientation' => 'horizontal', 'show_heading' => 'yes', ), 'selectors' => array( '{{WRAPPER}} .jet-tumbs-horizontal ' . $css_scheme['heading'] => 'width: {{SIZE}}{{UNIT}};', ), ) ); $this->add_control( 'heading_text', array( 'label' => esc_html__( 'Heading Text', 'jet-blog' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Video Playlist', 'jet-blog' ), 'condition' => array( 'show_heading' => 'yes', ), ) ); $this->add_control( $this->_new_icon_prefix . 'heading_icon', array( 'type' => Controls_Manager::ICONS, 'label' => esc_html__( 'Heading Icon', 'jet-blog' ), 'label_block' => false, 'skin' => 'inline', 'fa4compatibility' => 'heading_icon', 'default' => array( 'value' => 'fas fa-play', 'library' => 'fa-solid', ), 'condition' => array( 'show_heading' => 'yes', ), ) ); $this->add_control( 'show_counter', array( 'label' => esc_html__( 'Show Videos Counter', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => 'yes', 'condition' => array( 'show_heading' => 'yes', ), ) ); $this->add_control( 'counter_suffix', array( 'label' => esc_html__( 'Counter Suffix', 'jet-blog' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'videos', 'jet-blog' ), 'condition' => array( 'show_heading' => 'yes', 'show_counter' => 'yes', ), ) ); $this->add_control( 'show_publication_date', array( 'label' => esc_html__( 'Show Video Publication Date', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => '', 'separator' => 'before', 'description' => sprintf( esc_html__( 'You can create own API key %1$s. Then paste created key on the %2$s', 'jet-blog' ), '' . esc_html__( 'here', 'jet-blog' ) . '', '' . esc_html__( 'settings page', 'jet-blog' ) . ''), ) ); $this->add_control( 'human_readable_date_diff', array( 'label' => esc_html__( 'Human Readable Date Diff', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => '', 'condition' => array( 'show_publication_date' => 'yes', ), ) ); $this->add_control( 'date_format', array( 'label' => esc_html__( 'Date Format', 'jet-blog' ), 'type' => Controls_Manager::TEXT, 'default' => 'F j, Y', 'description' => sprintf( '%s', esc_html__( 'Documentation on date and time formatting', 'jet-blog' ) ), 'placeholder' => esc_html__( 'Enter date format', 'jet-blog' ), 'condition' => array( 'show_publication_date' => 'yes', 'human_readable_date_diff!' => 'yes', ), ) ); $this->add_control( 'show_item_index', array( 'label' => esc_html__( 'Show Item Number and Status', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => 'yes', 'separator' => 'before', ) ); $this->add_control( 'hide_index', array( 'label' => esc_html__( 'Hide Index On Device', 'jet-blog' ), 'type' => Controls_Manager::SELECT2, 'multiple' => true, 'label_block' => 'true', 'options' => $hide_breakpoints_list, ) ); // $this->add_control( // 'hide_index_mobile', // array( // 'label' => esc_html__( 'Hide Index On Mobile', 'jet-blog' ), // 'type' => Controls_Manager::SWITCHER, // 'label_on' => esc_html__( 'Yes', 'jet-blog' ), // 'label_off' => esc_html__( 'No', 'jet-blog' ), // 'return_value' => 'yes', // 'default' => '', // ) // ); $this->add_control( 'show_item_duration', array( 'label' => esc_html__( 'Show Item Duration', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => 'yes', 'separator' => 'before', ) ); $this->add_control( 'hide_duration', array( 'label' => esc_html__( 'Hide Duration On Device', 'jet-blog' ), 'type' => Controls_Manager::SELECT2, 'multiple' => true, 'label_block' => 'true', 'options' => $hide_breakpoints_list, ) ); // $this->add_control( // 'hide_duration_tablet', // array( // 'label' => esc_html__( 'Hide Duration On Tablets', 'jet-blog' ), // 'type' => Controls_Manager::SWITCHER, // 'label_on' => esc_html__( 'Yes', 'jet-blog' ), // 'label_off' => esc_html__( 'No', 'jet-blog' ), // 'return_value' => 'yes', // 'default' => '', // ) // ); // $this->add_control( // 'hide_duration_mobile', // array( // 'label' => esc_html__( 'Hide Duration On Mobile', 'jet-blog' ), // 'type' => Controls_Manager::SWITCHER, // 'label_on' => esc_html__( 'Yes', 'jet-blog' ), // 'label_off' => esc_html__( 'No', 'jet-blog' ), // 'return_value' => 'yes', // 'default' => '', // ) // ); $this->add_control( 'hide_image', array( 'label' => esc_html__( 'Hide Thumbnail Image On Device', 'jet-blog' ), 'type' => Controls_Manager::SELECT2, 'multiple' => true, 'label_block' => 'true', 'options' => $hide_breakpoints_list, ) ); // $this->add_control( // 'hide_image_tablet', // array( // 'label' => esc_html__( 'Hide Thumbnail Image On Tablets', 'jet-blog' ), // 'type' => Controls_Manager::SWITCHER, // 'label_on' => esc_html__( 'Yes', 'jet-blog' ), // 'label_off' => esc_html__( 'No', 'jet-blog' ), // 'return_value' => 'yes', // 'default' => '', // 'separator' => 'before', // ) // ); // $this->add_control( // 'hide_image_mobile', // array( // 'label' => esc_html__( 'Hide Thumbnail Image On Mobile', 'jet-blog' ), // 'type' => Controls_Manager::SWITCHER, // 'label_on' => esc_html__( 'Yes', 'jet-blog' ), // 'label_off' => esc_html__( 'No', 'jet-blog' ), // 'return_value' => 'yes', // 'default' => '', // ) // ); $this->add_control( 'show_scroll_on_hover', array( 'label' => esc_html__( 'Show Scroll Only on Hover', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => '', 'condition' => array( 'thumbnails_orientation' => 'vertical', ), ) ); $this->add_control( 'disable_caching', array( 'label' => esc_html__( 'Disable Caching', 'jet-blog' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-blog' ), 'label_off' => esc_html__( 'No', 'jet-blog' ), 'return_value' => 'yes', 'default' => '', 'description' => esc_html__( 'Force getting videos data from API on each widget refresh. Not recommended, only for debugging.', 'jet-blog' ), 'separator' => 'before', ) ); $this->end_controls_section(); $this->_start_controls_section( 'section_general_style', array( 'label' => esc_html__( 'General Styles', 'jet-blog' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->_add_control( 'canvas_bg', array( 'label' => esc_html__( 'Canvas Background', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'global' => array( 'default' => Global_Colors::COLOR_SECONDARY, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['canvas'] => 'background-color: {{VALUE}}', ), ), 25 ); $this->_add_control( 'thumbs_bg', array( 'label' => esc_html__( 'Thumbnails Background', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'global' => array( 'default' => Global_Colors::COLOR_TEXT, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_list'] => 'background-color: {{VALUE}}', ), ), 25 ); $this->_add_control( 'heading_bg', array( 'label' => esc_html__( 'Heading Background', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'global' => array( 'default' => Global_Colors::COLOR_SECONDARY, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading'] => 'background-color: {{VALUE}}', ), ), 25 ); $this->_add_responsive_control( 'playlist_border_radius', array( 'label' => esc_html__( 'Wrapper Border Radius', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} .jet-blog-playlist' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->_add_responsive_control( 'heading_padding', array( 'label' => esc_html__( 'Heading Padding', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_add_control( 'heading_icon_styles', array( 'label' => esc_html__( 'Heading Icon', 'jet-blog' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->_add_control( 'heading_icon_color', array( 'label' => esc_html__( 'Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading_icon'] => 'color: {{VALUE}}', ), ), 25 ); $this->_add_control( 'heading_icon_size', array( 'label' => esc_html__( 'Icon Size', 'jet-blog' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px' ), 'range' => array( 'px' => array( 'min' => 12, 'max' => 90, ), ), 'default' => array( 'units' => 'px', 'size' => 30, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading_icon'] => 'font-size: {{SIZE}}{{UNIT}};', ), ), 50 ); $this->_add_responsive_control( 'heading_icon_padding', array( 'label' => esc_html__( 'Icon Padding', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading_icon'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_add_control( 'heading_title_styles', array( 'label' => esc_html__( 'Heading Title', 'jet-blog' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->_add_control( 'heading_title_color', array( 'label' => esc_html__( 'Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading_text'] => 'color: {{VALUE}}', ), ), 25 ); $this->_add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'heading_title_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['heading_text'], 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_ACCENT, ), ), 50 ); $this->_add_control( 'heading_counter_styles', array( 'label' => esc_html__( 'Heading Counter', 'jet-blog' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->_add_control( 'heading_counter_color', array( 'label' => esc_html__( 'Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['heading_counter'] => 'color: {{VALUE}}', ), ), 25 ); $this->_add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'heading_counter_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['heading_counter'], 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_TEXT, ), ), 50 ); $this->_end_controls_section(); $this->_start_controls_section( 'section_thumb_item_style', array( 'label' => esc_html__( 'Thumbnail Styles', 'jet-blog' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->_add_responsive_control( 'thumb_item_padding', array( 'label' => esc_html__( 'Thumbnail Row Padding', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_add_group_control( Group_Control_Border::get_type(), array( 'name' => 'thumb_title_border', 'label' => esc_html__( 'Border', 'jet-blog' ), 'placeholder' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_item'], ), 75 ); $this->_add_control( 'thumb_img_gap', array( 'label' => esc_html__( 'Thumbnail Image Gap', 'jet-blog' ), 'label_block' => true, 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px' ), 'default' => array( 'unit' => 'px', 'size' => 10, ), 'selectors' => array( 'body:not(.rtl) {{WRAPPER}} .jet-tumbs-vertical ' . $css_scheme['thumb_list'] . ' .jet-blog-playlist__item-thumb' => 'margin-right: {{SIZE}}{{UNIT}};', 'body.rtl {{WRAPPER}} .jet-tumbs-vertical ' . $css_scheme['thumb_list'] . ' .jet-blog-playlist__item-thumb' => 'margin-left: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .jet-tumbs-horizontal ' . $css_scheme['thumb_list'] . ' .jet-blog-playlist__item-thumb' => 'margin-bottom: {{SIZE}}{{UNIT}};', ), ), 50 ); $this->_add_control( 'thumb_title_styles', array( 'label' => esc_html__( 'Title', 'jet-blog' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 50 ); $this->_add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'thumb_title_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_title'], 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_TEXT, ), ), 50 ); $this->_add_responsive_control( 'thumb_item_title_padding', array( 'label' => esc_html__( 'Padding', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_title'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_add_control( 'thumb_date_styles', array( 'label' => esc_html__( 'Publication Date', 'jet-blog' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 50 ); $this->_add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'thumb_date_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_date'], 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_TEXT, ), ), 50 ); $this->_add_responsive_control( 'thumb_item_date_padding', array( 'label' => esc_html__( 'Padding', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_date'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_add_control( 'thumb_duration_styles', array( 'label' => esc_html__( 'Duration', 'jet-blog' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 50 ); $this->_add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'thumb_duration_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_duration'], 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_TEXT, ), ), 50 ); $this->_add_responsive_control( 'thumb_item_duration_padding', array( 'label' => esc_html__( 'Padding', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_duration'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_start_controls_tabs( 'tabs_thumb_item_style' ); $this->_start_controls_tab( 'tab_thumb_item_normal', array( 'label' => esc_html__( 'Normal', 'jet-blog' ), ) ); $this->_add_control( 'thumb_item_title_color', array( 'label' => esc_html__( 'Title Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_title'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'thumb_item_date_color', array( 'label' => esc_html__( 'Publication Date Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_date'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'thumb_item_duration_color', array( 'label' => esc_html__( 'Duration Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_duration'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_group_control( Group_Control_Background::get_type(), array( 'name' => 'thumb_item_background', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_item'], ), 25 ); $this->_end_controls_tab(); $this->_start_controls_tab( 'tab_thumb_item_hover', array( 'label' => esc_html__( 'Hover', 'jet-blog' ), ), 25 ); $this->_add_control( 'thumb_item_title_color_hover', array( 'label' => esc_html__( 'Title Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . ':hover ' . $css_scheme['thumb_title'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'thumb_item_date_color_hover', array( 'label' => esc_html__( 'Publication Date Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . ':hover ' . $css_scheme['thumb_date'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'thumb_item_duration_color_hover', array( 'label' => esc_html__( 'Duration Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . ':hover ' . $css_scheme['thumb_duration'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_group_control( Group_Control_Background::get_type(), array( 'name' => 'thumb_item_background_hover', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_item'] . ':hover', ), 25 ); $this->_end_controls_tab(); $this->_start_controls_tab( 'tab_thumb_item_active', array( 'label' => esc_html__( 'Active', 'jet-blog' ), ), 25 ); $this->_add_control( 'thumb_item_title_color_active', array( 'label' => esc_html__( 'Title Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . '.jet-blog-active ' . $css_scheme['thumb_title'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'thumb_item_date_color_active', array( 'label' => esc_html__( 'Publication Date Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . '.jet-blog-active ' . $css_scheme['thumb_date'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'thumb_item_duration_color_active', array( 'label' => esc_html__( 'Duration Color', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . '.jet-blog-active ' . $css_scheme['thumb_duration'] => 'color: {{VALUE}};', ), ), 25 ); $this->_add_group_control( Group_Control_Background::get_type(), array( 'name' => 'thumb_item_background_active', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_item'] . '.jet-blog-active', ), 25 ); $this->_end_controls_tab(); $this->_end_controls_tabs(); $this->_end_controls_section(); $this->_start_controls_section( 'section_thumb_index_style', array( 'label' => esc_html__( 'Thumbnails Numbers and Status Icons', 'jet-blog' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->_add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'thumb_index_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_index'], 'global' => array( 'default' => Global_Typography::TYPOGRAPHY_TEXT, ), ), 50 ); $this->_add_responsive_control( 'thumb_index_margin', array( 'label' => esc_html__( 'Margin', 'jet-blog' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%', 'em' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_index'] => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->_start_controls_tabs( 'tabs_thumb_index_style' ); $this->_start_controls_tab( 'tab_thumb_index_normal', array( 'label' => esc_html__( 'Normal', 'jet-blog' ), ) ); $this->_add_group_control( \Jet_Blog_Group_Control_Box_Style::get_type(), array( 'name' => 'thumb_index', 'label' => esc_html__( 'Thumb Style', 'jet-blog' ), 'fields_options' => array( 'box_font_color' => array( 'default' => '#fff', ), 'box_font_size' => array( 'default' => array( 'unit' => 'px', 'size' => 10, ), 'selectors' => array( '{{WRAPPER}} '. $css_scheme['thumb_index'] .' .jet-blog-playlist__item-status' => 'font-size: {{SIZE}}{{UNIT}}', ), ), ), 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_index'], ), 25 ); $this->_end_controls_tab(); $this->_start_controls_tab( 'tab_thumb_index_hover', array( 'label' => esc_html__( 'Hover', 'jet-blog' ), ) ); $this->_add_group_control( \Jet_Blog_Group_Control_Box_Style::get_type(), array( 'name' => 'thumb_index_hover', 'label' => esc_html__( 'Thumb Style', 'jet-blog' ), 'fields_options' => array( 'box_font_size' => array( 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . ':hover ' . $css_scheme['thumb_index'] . ' .jet-blog-playlist__item-status' => 'font-size: {{SIZE}}{{UNIT}}', ), ), ), 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_item'] . ':hover ' . $css_scheme['thumb_index'], ), 25 ); $this->_end_controls_tab(); $this->_start_controls_tab( 'tab_thumb_index_active', array( 'label' => esc_html__( 'Active', 'jet-blog' ), ) ); $this->_add_group_control( \Jet_Blog_Group_Control_Box_Style::get_type(), array( 'name' => 'thumb_index_active', 'label' => esc_html__( 'Thumb Style', 'jet-blog' ), 'fields_options' => array( 'box_font_size' => array( 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['thumb_item'] . '.jet-blog-active ' . $css_scheme['thumb_index'] . ' .jet-blog-playlist__item-status' => 'font-size: {{SIZE}}{{UNIT}}', ), ), ), 'selector' => '{{WRAPPER}} ' . $css_scheme['thumb_item'] . '.jet-blog-active ' . $css_scheme['thumb_index'], ), 25 ); $this->_end_controls_tab(); $this->_end_controls_tabs(); $this->_end_controls_section(); $this->_start_controls_section( 'section_scroll_style', array( 'label' => esc_html__( 'Scrollbar Styles', 'jet-blog' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->_add_control( 'non_webkit_notice', array( 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__( 'Currently works only in -webkit- browsers', 'jet-blog' ) ), 25 ); $this->_add_control( 'scroll_thumb', array( 'label' => esc_html__( 'Scrollbar Thumb', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ::-webkit-scrollbar-thumb' => 'background-color: {{VALUE}};', ), ), 25 ); $this->_add_control( 'scroll_track', array( 'label' => esc_html__( 'Scrollbar Track', 'jet-blog' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ::-webkit-scrollbar-track' => 'background-color: {{VALUE}};', ), ), 25 ); $this->_end_controls_section(); } protected function render() { $this->_context = 'render'; add_filter( 'no_texturize_tags', array( $this, 'prevent_playlist_from_texturizing' ) ); add_filter( 'elementor/widget/render_content', array( $this, 'clear_notexturize_filter' ), 10, 2 ); jet_blog_integration()->set_playlist_trigger(); $this->_open_wrap(); include $this->_get_global_template( 'index' ); $this->_close_wrap(); $video_data = jet_blog_video_data(); if ( ! empty( $video_data->api_error ) && is_user_logged_in() && current_user_can( 'manage_options' ) ) { echo '
'; echo esc_html( $video_data->api_error ); echo '
'; } } /** * Remove div tags from texturizing for video playlist. * * @param array $tags No texturized tags array * @return array */ public function prevent_playlist_from_texturizing( $tags ) { $tags[] = 'div'; return $tags; } /** * Remove $this->prevent_playlist_from_texturizing() from no_texturize_tags hook after tabs content processing to avoid unnecessary firing. * @param string $widget_content Rendered widget content. * @param object $widget_instance Processed widget instance. * @return string */ public function clear_notexturize_filter( $widget_content, $widget_instance ) { if ( 'tabs' === $widget_instance->get_name() ) { remove_filter( 'no_texturize_tags', array( $this, 'prevent_playlist_from_texturizing' ) ); } return $widget_content; } /** * Change height in iframe to new value from settings * * @param string $html * @return string */ public function adjust_height( $html ) { $settings = $this->get_settings(); $height = $settings['playlist_height']; $html = preg_replace( '/width=[\'\"]\d+[\'\"]/', 'width="100%"', $html ); return preg_replace( '/height=[\'\"]\d+[\'\"]/', 'height="' . $height . '"', $html ); } /** * Print playlist container classes list * * @return string */ public function _container_classes( $settings ) { $classes = array( 'jet-blog-playlist' ); $orientation = $settings['thumbnails_orientation']; $v_position = $settings['thumbnails_v_position']; $h_position = $settings['thumbnails_h_position']; $classes[] = 'jet-tumbs-' . $orientation; $classes[] = 'jet-tumbs-v-pos-' . $v_position; $classes[] = 'jet-tumbs-h-pos-' . $h_position; if ( 'yes' === $settings['show_scroll_on_hover'] ) { $classes[] = 'jet-scroll-on-hover'; } else { $classes[] = 'jet-scroll-regular'; } $classes = apply_filters( 'jet-blog/video-playlist/container-classes', $classes ); echo implode( ' ', $classes ); } public function _get_video_data_atts( $video_data, $item, $settings, $index ) { $data = array( 'data-id' => $item['_id'], 'data-video_id' => $video_data['video_id'], 'data-provider' => strtolower( $video_data['provider_name'] ), 'data-html' => json_encode( $this->adjust_height( $video_data['html'] ) ), 'data-height' => $settings['playlist_height'], 'data-video_index' => absint( $index ) + 1, 'data-video_start' => isset( $item['start_time'] ) ? $item['start_time'] : '', ); $result = ''; foreach ( $data as $key => $value ) { $result .= sprintf( ' %1$s=\'%2$s\'', $key, $value ); } return $result; } public function _video_counter( $settings, $list ) { if ( 'yes' !== $settings['show_counter'] ) { return; } $suffix = ''; if ( ! empty( $settings['counter_suffix'] ) ) { $suffix = sprintf( ' %s', $settings['counter_suffix'] ); } printf( '
1/%1$s%2$s
', count( $list ), $suffix ); } public function _get_hide_settings( $settings ) { $hide_index = isset( $settings['hide_index'] ) ? json_encode( $settings['hide_index'] ) : []; $hide_duration = isset( $settings['hide_duration'] ) ? json_encode( $settings['hide_duration'] ) : []; $hide_image = isset( $settings['hide_image'] ) ? json_encode( $settings['hide_image'] ) : []; $result = ''; $result .= ' data-hide-index=\'' . $hide_index . '\' data-hide-duration=\'' . $hide_duration . '\' data-hide-image=\'' . $hide_image . '\''; return $result; } public function _get_custom_thumb( $item ) { if ( empty( $item['custom_thumb']['id'] ) ) { return ''; } $thumb_size = isset( $item['custom_thumb_size'] ) ? $item['custom_thumb_size'] : 'thumbnail'; return wp_get_attachment_image_url( $item['custom_thumb']['id'], $thumb_size ); } /** * Get human-readable date difference. * * @param string $date The date to compare with the current date. * @return string The human-readable difference between the provided date and the current date. */ public function _get_human_readable_date_diff( $date ) { $date_time = strtotime( $date ); $current_time = current_time( 'timestamp' ); return esc_html__( human_time_diff( $date_time, $current_time ) . ' ago', 'jet-blog' ); } /** * Format the publication date. * * @param string $date The date to be formatted. * @param string $format The format to apply to the date. Defaults to 'F j, Y'. * @return string The formatted date. */ public function _format_date( $date, $format = 'F j, Y' ) { return date( $format, strtotime( $date ) ); } }