video-playlist-1.php
227 lines
| 1 | <?php |
| 2 | if ( ! defined( 'ABSPATH' ) ) { |
| 3 | exit; // Exit if accessed directly. |
| 4 | } |
| 5 | $widget_id = $this->get_id(); |
| 6 | ?> |
| 7 | |
| 8 | <section class="spel-video-playlist video-playlist-1 video_list_area"> |
| 9 | <div class="ezd-grid ezd-grid-cols-12 ezd-justify-content-sm-between"> |
| 10 | |
| 11 | <div class="ezd-lg-col-7"> |
| 12 | <div class="video_player"> |
| 13 | <div class="tab-content video_tabs" id="<?php echo esc_attr( get_the_ID() . '-' . $widget_id ); ?>"> |
| 14 | <?php |
| 15 | $all_videos = $settings['tabs'] ?? ''; |
| 16 | $i = '0'; |
| 17 | $active = ''; |
| 18 | foreach ( $all_videos as $video_item ) { |
| 19 | $child_videos = $video_item['videos'] ?? ''; |
| 20 | foreach ( $child_videos as $child_video ) { |
| 21 | ?> |
| 22 | <div class="tab-pane ezd-tab-box pt-0 <?php echo esc_attr( $active ); ?>" |
| 23 | id="video_<?php echo esc_attr( $widget_id . '_' . $i ++ ); ?>"> |
| 24 | <div class="artplayer-app" |
| 25 | data-src="<?php echo esc_url( $child_video['video_upload']['url'] ); ?>"> |
| 26 | </div> |
| 27 | </div> |
| 28 | <?php |
| 29 | } |
| 30 | } |
| 31 | ?> |
| 32 | </div> |
| 33 | </div> |
| 34 | </div> |
| 35 | |
| 36 | <div class="ezd-lg-col-5"> |
| 37 | <div class="video_list"> |
| 38 | <?php |
| 39 | if ( ! empty( $settings['playlist_title'] ) ) : |
| 40 | echo sprintf( |
| 41 | '<%1$s class="play_list_title" data-animation="wow fadeInUp" data-wow-delay="0.2s"> %2$s </%1$s>', esc_html( \Elementor\Utils::validate_html_tag( $settings['title_tag'] ?? 'h6' ) ), esc_html($settings['playlist_title']) |
| 42 | ); |
| 43 | endif; |
| 44 | ?> |
| 45 | <div class="video_list_inner scroll"> |
| 46 | <div class="accordion"> |
| 47 | <?php |
| 48 | $all_videos = $settings['tabs'] ?? ''; |
| 49 | $i = '0'; |
| 50 | $count = '0'; |
| 51 | $collapse = ''; |
| 52 | foreach ( $all_videos as $video_item ) { |
| 53 | $count ++; |
| 54 | $child_videos = $video_item['videos'] ?? ''; |
| 55 | $total_item = count( $child_videos ); |
| 56 | $total_item = $total_item - 0; |
| 57 | |
| 58 | if ( $total_item < 10 ) { |
| 59 | $total_item = '0' . $total_item; |
| 60 | } |
| 61 | |
| 62 | $nav_collapse = 'collapsed'; |
| 63 | if ( $count == 1 ) { |
| 64 | $nav_collapse = 'expand'; |
| 65 | } |
| 66 | ?> |
| 67 | <div class="card accordion-panel spe_accordion_inner"> |
| 68 | <div class="card spe-accordion" id="configuration<?php echo esc_attr( $widget_id . '_' . $count ); ?>-tab"> |
| 69 | <div class="card-header"> |
| 70 | <button class="text-left accordion-header <?php echo esc_attr( $nav_collapse ); ?>"> |
| 71 | <span class="list_title"><?php echo esc_html( $video_item['title'] ); ?> </span> |
| 72 | <span class="list_count">(<?php echo esc_html( $total_item ); ?>)</span> |
| 73 | <span class="plus-minus"> |
| 74 | <svg fill="#000000" width="15px" height="15px" viewBox="0 0 24 24" id="plus" |
| 75 | data-name="Line Color" xmlns="http://www.w3.org/2000/svg" |
| 76 | class="icon line-color"> |
| 77 | <path id="primary" d="M5,12H19M12,5V19" |
| 78 | style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"> |
| 79 | </path> |
| 80 | </svg> |
| 81 | <svg fill="#000000" width="15px" height="15px" viewBox="0 0 24 24" |
| 82 | id="minus" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" |
| 83 | class="icon line-color"> |
| 84 | <line id="primary" x1="19" y1="12" x2="5" y2="12" |
| 85 | style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"> |
| 86 | </line> |
| 87 | </svg> |
| 88 | </span> |
| 89 | </button> |
| 90 | </div> |
| 91 | </div> |
| 92 | <div id="configuration<?php echo esc_attr( $widget_id . '_' . $count ); ?>" class="accordion-content collapse"> |
| 93 | <div class="card-body"> |
| 94 | <ul class="nav nav-tabs ezd-tab-menu"> |
| 95 | <?php |
| 96 | if ( ! empty( $child_videos ) ) { |
| 97 | foreach ( $child_videos as $child_video ) { |
| 98 | $is_active = $i == 0 ? ' active' : ''; |
| 99 | ?> |
| 100 | <li class="nav-item"> |
| 101 | <a class="nav-link<?php esc_attr( $is_active ); ?>" |
| 102 | href="#video_<?php echo esc_attr( $widget_id . '_' . $i ++ ); ?>"> |
| 103 | <div class="media ezd-d-flex"> |
| 104 | <?php if ( ! empty( $child_video['thumbnail']['url'] ) ) : ?> |
| 105 | <div class="ezd-d-flex"> |
| 106 | <div class="video_tab_img"> |
| 107 | <img loading="lazy" width="60" height="40" src="<?php echo esc_url( $child_video['thumbnail']['url'] ) ?>" alt="<?php esc_attr_e('video-thumbnails', 'spider-elements'); ?>"/> |
| 108 | </div> |
| 109 | </div> |
| 110 | <?php endif ?> |
| 111 | <div class="media-body"> |
| 112 | <h4 class="body_title"><?php echo esc_html( $child_video['title2'] ); ?></h4> |
| 113 | <div class="list"> |
| 114 | <div> |
| 115 | <div class="videos_meta"> |
| 116 | <i class="far fa-user"></i> |
| 117 | <?php echo esc_html( ucwords( $child_video['current_author'] ) ); ?> |
| 118 | </div> |
| 119 | <div class="videos_meta"> |
| 120 | <i class="far fa-calendar"></i> |
| 121 | <?php echo esc_html( human_time_diff( strtotime( $child_video['current_date'] ), current_time( 'timestamp' ) ) ) . ' ' . esc_html__( 'ago', 'spider-elements' ); ?> |
| 122 | </div> |
| 123 | </div> |
| 124 | </div> |
| 125 | </div> |
| 126 | </div> |
| 127 | </a> |
| 128 | </li> |
| 129 | <?php |
| 130 | } |
| 131 | } |
| 132 | ?> |
| 133 | </ul> |
| 134 | </div> |
| 135 | </div> |
| 136 | </div> |
| 137 | <?php |
| 138 | } |
| 139 | ?> |
| 140 | </div> |
| 141 | </div> |
| 142 | </div> |
| 143 | </div> |
| 144 | |
| 145 | </div> |
| 146 | </section> |
| 147 | |
| 148 | <script> |
| 149 | ;(function($) { |
| 150 | 'use strict'; |
| 151 | $(document).ready(function() { |
| 152 | $(document).on('click', function(e) { |
| 153 | var el = e.target.nodeName, |
| 154 | parent = e.target.parentNode; |
| 155 | if ( |
| 156 | (el === 'path' && videoControlClassCheck(parent.parentNode)) || |
| 157 | (el === 'svg' && videoControlClassCheck(parent)) |
| 158 | ) { |
| 159 | $('.video_list_area').toggleClass('theatermode'); |
| 160 | } |
| 161 | }); |
| 162 | |
| 163 | function videoControlClassCheck(parent) { |
| 164 | return parent.className.indexOf('art-icon-fullscreenWeb') !== -1; |
| 165 | } |
| 166 | }); |
| 167 | |
| 168 | let videoAccordion = $('.spe_accordion_inner > .spe-accordion'); |
| 169 | videoAccordion.on('click', function() { |
| 170 | var $this = $(this); |
| 171 | var $parent = $this.parent(); |
| 172 | var $collapse = $parent.find('> .collapse').first(); |
| 173 | |
| 174 | $collapse.slideToggle(300); |
| 175 | $parent.siblings().find('> .collapse').hide(300); |
| 176 | |
| 177 | if ($parent.hasClass('spe-collapsed')) { |
| 178 | $parent.removeClass('spe-collapsed'); |
| 179 | } else { |
| 180 | videoAccordion.parent().removeClass('spe-collapsed'); |
| 181 | $parent.addClass('spe-collapsed'); |
| 182 | } |
| 183 | return false; |
| 184 | }); |
| 185 | // custom tab js |
| 186 | $('.ezd-tab-menu li a').on('click', function(e) { |
| 187 | e.preventDefault(); |
| 188 | |
| 189 | // Remove active class from all tabs within the same menu |
| 190 | $(this).closest('.ezd-tab-menu').find('li a').removeClass('active'); |
| 191 | |
| 192 | // Add active class to the clicked tab |
| 193 | $(this).addClass('active'); |
| 194 | |
| 195 | var target = $(this).attr('href'); |
| 196 | |
| 197 | $('' + target).addClass('active').siblings('.ezd-tab-box').removeClass('active'); |
| 198 | |
| 199 | return false; |
| 200 | }); |
| 201 | |
| 202 | document.addEventListener('DOMContentLoaded', function() { |
| 203 | let video = $('#video_<?php echo esc_attr( $widget_id ); ?>_0'); |
| 204 | setTimeout(function() { |
| 205 | $('.video_slider_area').addClass('loaded').css('height', 'auto'); |
| 206 | }, 3000); |
| 207 | |
| 208 | video.addClass('show').addClass('active'); |
| 209 | let containers = document.getElementsByClassName('artplayer-app'); |
| 210 | if (containers.length > 0) { |
| 211 | for (var i = 0; i < containers.length; i++) { |
| 212 | new Artplayer({ |
| 213 | container: containers[i], |
| 214 | url: containers[i].getAttribute('data-src'), |
| 215 | title: 'Your Name', |
| 216 | pip: true, |
| 217 | screenshot: true, |
| 218 | flip: true, |
| 219 | fullscreen: true, |
| 220 | fullscreenWeb: true, |
| 221 | height: '500px', |
| 222 | }); |
| 223 | } |
| 224 | } |
| 225 | }); |
| 226 | })(jQuery); |
| 227 | </script> |