Front to the WordPress application

Файловый менеджер - Редактировать - /home/freeclou/optimyar/wp-content/plugins/elementor-extras/modules/devices/widgets/devices.php

Назад
<?php namespace ElementorExtras\Modules\Devices\Widgets; // Extras for Elementor Classes use ElementorExtras\Base\Extras_Widget; // Elementor Classes use Elementor\Controls_Manager; use Elementor\Control_Media; use Elementor\Group_Control_Image_Size; use Elementor\Group_Control_Border; use Elementor\Group_Control_Box_Shadow; use Elementor\Utils; use Elementor\Modules\DynamicTags\Module as TagsModule; use DomDocument; if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly /** * Devices * * @since 0.1.0 / class Devices extends Extras_Widget { /* * Get Name * * Get the name of the widget * * @since 1.2.0 * @return string / public function get_name() { return 'devices-extended'; } /* * Get Title * * Get the title of the widget * * @since 1.2.0 * @return string / public function get_title() { return __( 'Devices', 'elementor-extras' ); } /* * Get Icon * * Get the icon of the widget * * @since 1.2.0 * @return string / public function get_icon() { return 'nicon nicon-mobile'; } /* * Get Script Depends * * A list of scripts that the widgets is depended in * * @since 0.1.0 * @return array / public function get_script_depends() { return [ 'video-player', 'iphone-inline-video', 'jquery-appear' ]; } /* * Register Widget Controls * * @since 0.1.0 * @return void / protected function _register_controls() { $this->start_controls_section( 'section_content', [ 'label' => __( 'Device', 'elementor-extras' ), ] ); $this->add_control( 'device_type', [ 'label' => __( 'Type', 'elementor-extras' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'phone', 'options' => [ 'phone' => [ 'title' => __( 'Phone', 'elementor-extras' ), 'icon' => 'fa fa-mobile-phone', ], 'tablet' => [ 'title' => __( 'Tablet', 'elementor-extras' ), 'icon' => 'fa fa-tablet', ], 'laptop' => [ 'title' => __( 'Laptop', 'elementor-extras' ), 'icon' => 'fa fa-laptop', ], 'desktop' => [ 'title' => __( 'Desktop', 'elementor-extras' ), 'icon' => 'fa fa-desktop', ], 'window' => [ 'title' => __( 'Window', 'elementor-extras' ), 'icon' => 'nicon nicon-window', ], ], 'frontend_available' => true, ] ); $this->add_control( 'device_media_type', [ 'label' => __( 'Media Type', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'image', 'options' => [ 'image' => __( 'Image', 'elementor-extras' ), 'video' => __( 'Video', 'elementor-extras' ), ], ] ); $this->add_control( 'device_orientation', [ 'label' => __( 'Orientation', 'elementor-extras' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'portrait', 'options' => [ 'portrait' => [ 'title' => __( 'Portrait', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-portrait', ], 'landscape' => [ 'title' => __( 'Landscape', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-landscape', ], ], 'prefix_class' => 'ee-device-orientation-', 'condition' => [ 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], ] ] ); $this->add_control( 'device_orientation_control', [ 'label' => __( 'Orientation Control', 'elementor-extras' ), 'description' => __( 'Show orientation control on frontend. ', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'condition' => [ 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'device_align', [ 'label' => __( 'Alignment', 'elementor-extras' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'center', 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor-extras' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => __( 'Center', 'elementor-extras' ), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor-extras' ), 'icon' => 'eicon-h-align-right', ], ], 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}};', ], ] ); $this->add_responsive_control( 'device_width', [ 'label' => __( 'Maximum Width', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1920, 'step' => 10, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .ee-device-wrapper' => 'max-width: {{SIZE}}{{UNIT}}; width: 100%;', '{{WRAPPER}} .ee-device' => 'width: 100%;', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_screenshot', [ 'label' => __( 'Screen', 'elementor-extras' ), 'condition' => [ 'device_media_type' => [ 'image' ], ] ] ); $this->start_controls_tabs( 'tabs_media' ); $this->start_controls_tab( 'tab_media_portrait', [ 'label' => __( 'Default', 'elementor-extras' ), ] ); $this->add_control( 'media_portrait_screenshot', [ 'label' => __( 'Choose Screenshot', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true ], 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], 'condition' => [ 'device_media_type' => [ 'image' ], ] ] ); $this->add_control( 'screen_phone_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __( 'Use an image or video with the ratio of 16:9', 'elementor-extras' ), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', 'condition' => [ 'device_type' => [ 'phone', 'desktop' ], ], ] ); $this->add_control( 'screen_tablet_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __( 'Use an image or video with the ratio of 4:3', 'elementor-extras' ), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', 'condition' => [ 'device_type' => 'tablet' ], ] ); $this->add_control( 'screen_laptop_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __( 'Use an image or video with the ratio of 16:10', 'elementor-extras' ), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', 'condition' => [ 'device_type' => 'laptop' ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'media_portrait_screenshot', 'label' => __( 'Screenshot Size', 'elementor-extras' ), 'default' => 'large', 'condition' => [ 'media_portrait_screenshot[url]!' => '', 'device_media_type' => [ 'image' ], ] ] ); $this->add_control( 'media_portrait_screenshot_scrollable', [ 'label' => __( 'Scrollable', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'scrollable', 'prefix_class' => 'ee-device-portrait-', 'condition' => [ 'media_portrait_screenshot[url]!' => '', 'device_media_type' => [ 'image' ], 'device_type!' => [ 'window' ], ] ] ); $this->add_responsive_control( 'media_portrait_screenshot_align', [ 'label' => __( 'Vertical Align', 'elementor-extras' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'flex-start', 'options' => [ 'flex-start' => [ 'title' => __( 'Top', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-top', ], 'center' => [ 'title' => __( 'Middle', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-center', ], 'flex-end' => [ 'title' => __( 'Bottom', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-bottom', ], 'initial' => [ 'title' => __( 'Custom', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-custom', ], ], 'selectors' => [ '{{WRAPPER}} .ee-device__media__screen--image' => 'align-items: {{VALUE}};', '{{WRAPPER}} .ee-device__media__screen--image .ee-device__media__screen__inner' => 'top: auto;', ], 'condition' => [ 'media_portrait_screenshot_scrollable!' => 'scrollable', 'media_portrait_screenshot[url]!' => '', 'device_media_type' => [ 'image' ], 'device_type!' => [ 'window' ], ] ] ); $this->add_control( 'media_portrait_screenshot_position', [ 'label' => __( 'Offset Top (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .ee-device__media__screen--image .ee-device__media__screen__inner figure' => 'transform: translateY(-{{SIZE}}%);', ], 'condition' => [ 'media_portrait_screenshot_scrollable!' => 'scrollable', 'media_portrait_screenshot_align' => 'initial', 'media_portrait_screenshot[url]!' => '', 'device_media_type' => [ 'image' ], 'device_type!' => [ 'window' ], ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_media_landscape', [ 'label' => __( 'Landscape', 'elementor-extras' ), 'condition' => [ 'device_orientation_control' => 'yes', 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], ] ] ); $this->add_control( 'media_landscape_screenshot', [ 'label' => __( 'Choose Screenshot', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true ], 'condition' => [ 'device_orientation_control' => 'yes', 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'media_landscape_screenshot', // Actually its `image_size` 'label' => __( 'Screenshot Size', 'elementor-extras' ), 'default' => 'large', 'condition' => [ 'device_orientation_control' => 'yes', 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], 'media_landscape_screenshot[url]!' => '', ] ] ); $this->add_control( 'media_landscape_screenshot_scrollable', [ 'label' => __( 'Scrollable', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'scrollable', 'prefix_class' => 'ee-device-landscape-', 'condition' => [ 'device_orientation_control' => 'yes', 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], 'media_landscape_screenshot[url]!' => '' ] ] ); $this->add_responsive_control( 'media_landscape_screenshot_align', [ 'label' => __( 'Vertical Align', 'elementor-extras' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'flex-start', 'options' => [ 'flex-start' => [ 'title' => __( 'Top', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-top', ], 'center' => [ 'title' => __( 'Middle', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-center', ], 'flex-end' => [ 'title' => __( 'Bottom', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-bottom', ], 'initial' => [ 'title' => __( 'Custom', 'elementor-extras' ), 'icon' => 'nicon nicon-mobile-screen-custom', ], ], 'selectors' => [ '{{WRAPPER}} .ee-device__media__screen.ee-device__media__screen__landscape' => 'align-items: {{VALUE}};', '{{WRAPPER}} .ee-device__media__screen__landscape .ee-device__media__screen__inner' => 'top: auto;', ], 'condition' => [ 'media_landscape_screenshot_scrollable!' => 'scrollable', 'device_orientation_control' => 'yes', 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], 'media_landscape_screenshot[url]!' => '', ] ] ); $this->add_control( 'media_landscape_screenshot_position', [ 'label' => __( 'Offset Top (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .ee-device__media__screen__landscape .ee-device__media__screen__inner' => 'transform: translateY(-{{SIZE}}%);', ], 'condition' => [ 'media_landscape_screenshot_scrollable!' => 'scrollable', 'media_landscape_screenshot_align' => 'initial', 'device_orientation_control' => 'yes', 'device_type' => [ 'phone', 'tablet' ], 'device_media_type' => [ 'image' ], 'media_landscape_screenshot[url]!' => '' ] ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_video', [ 'label' => __( 'Video', 'elementor-extras' ), 'condition' => [ 'device_media_type' => 'video', ] ] ); $this->start_controls_tabs( 'tabs_sources' ); $this->start_controls_tab( 'tab_source_mp4', [ 'label' => __( 'MP4', 'elementor-extras' ), 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_source', [ 'label' => __( 'Source', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'url', 'options' => [ 'url' => __( 'URL', 'elementor-extras' ), 'file' => __( 'File', 'elementor-extras' ), ], ] ); $this->add_control( 'video_url', [ 'label' => __( 'URL', 'elementor-extras' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'video_source' => 'url', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_file', [ 'label' => __( 'File', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::MEDIA_CATEGORY, ], ], 'media_type' => 'video', 'condition' => [ 'video_source' => 'file', 'device_media_type' => [ 'video' ], ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_source_m4v', [ 'label' => __( 'M4V', 'elementor-extras' ), 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_source_m4v', [ 'label' => __( 'Source', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'url', 'options' => [ 'url' => __( 'URL', 'elementor-extras' ), 'file' => __( 'File', 'elementor-extras' ), ], ] ); $this->add_control( 'video_url_m4v', [ 'label' => __( 'URL', 'elementor-extras' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'video_source_m4v' => 'url', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_file_m4v', [ 'label' => __( 'File', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::MEDIA_CATEGORY, ], ], 'media_type' => 'video', 'condition' => [ 'video_source_m4v' => 'file', 'device_media_type' => [ 'video' ], ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_source_ogg', [ 'label' => __( 'OGG', 'elementor-extras' ), 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_source_ogg', [ 'label' => __( 'Source', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'url', 'options' => [ 'url' => __( 'URL', 'elementor-extras' ), 'file' => __( 'File', 'elementor-extras' ), ], ] ); $this->add_control( 'video_url_ogg', [ 'label' => __( 'URL', 'elementor-extras' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'video_source_ogg' => 'url', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_file_ogg', [ 'label' => __( 'File', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::MEDIA_CATEGORY, ], ], 'media_type' => 'video', 'condition' => [ 'video_source_ogg' => 'file', 'device_media_type' => [ 'video' ], ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_source_webm', [ 'label' => __( 'WEBM', 'elementor-extras' ), 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_source_webm', [ 'label' => __( 'Source', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'url', 'options' => [ 'url' => __( 'URL', 'elementor-extras' ), 'file' => __( 'File', 'elementor-extras' ), ], ] ); $this->add_control( 'video_url_webm', [ 'label' => __( 'URL', 'elementor-extras' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'video_source_webm' => 'url', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_file_webm', [ 'label' => __( 'File', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::MEDIA_CATEGORY, ], ], 'media_type' => 'video', 'condition' => [ 'video_source_webm' => 'file', 'device_media_type' => [ 'video' ], ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_control( 'video_cover', [ 'label' => __( 'Choose Cover', 'elementor-extras' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true ], 'separator' => 'before', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'video_cover', 'label' => __( 'Cover Size', 'elementor-extras' ), 'default' => 'large', 'condition' => [ 'video_cover[url]!' => '', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_behaviour_heading', [ 'label' => __( 'Behaviour', 'elementor-extras' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_autoplay', [ 'label' => __( 'Auto Play', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'autoplay', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_autoplay_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __( 'Many browsers don\'t allow videos with sound to autoplay without user interaction. To avoid this, enable the "Start Muted" control to disable sound so that the video autoplays correctly.', 'elementor-extras' ), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning', 'condition' => [ 'video_autoplay!' => '', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_stop_others', [ 'label' => __( 'Stop Others', 'elementor-extras' ), 'description' => __( 'Stop all other videos on page when this video is played.', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'frontend_available' => true, 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_play_viewport', [ 'label' => __( 'Play in Viewport', 'elementor-extras' ), 'description' => __( 'Autoplay video when the player is in viewport', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_autoplay' => 'autoplay', ], 'frontend_available' => true, ] ); $this->add_control( 'video_stop_viewport', [ 'label' => __( 'Stop on leave', 'elementor-extras' ), 'description' => __( 'Stop video when the player has left the viewport', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_autoplay' => 'autoplay', 'video_play_viewport' => 'yes', ], 'frontend_available' => true, ] ); $this->add_control( 'video_restart_on_pause', [ 'label' => __( 'Restart on pause', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'frontend_available' => true, 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_loop', [ 'label' => __( 'Loop', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'loop', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_end_at_last_frame', [ 'label' => __( 'End at last frame', 'elementor-extras' ), 'description' => __( 'End the video at the last frame instead of showing the first one.', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_loop' => '', ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'video_speed', [ 'label' => __( 'Playback Speed', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'max' => 5, 'min' => 0.1, 'step' => 0.01, ], ], 'condition' => [ 'device_media_type' => [ 'video' ], ], 'frontend_available' => true, ] ); $this->add_control( 'video_display_heading', [ 'label' => __( 'Display', 'elementor-extras' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_show_buttons', [ 'label' => __( 'Show Buttons', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_show_bar', [ 'label' => __( 'Show Bar', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_bar_hide', [ 'label' => __( 'Hide Bar When Playing', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'hide', 'prefix_class' => 'ee-video-player-bar--', 'return_value' => 'hide', 'condition' => [ 'video_show_bar' => 'show', ], ] ); $this->add_control( 'video_show_rewind', [ 'label' => __( 'Show Rewind', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_restart_on_pause!' => 'yes', ], ] ); $this->add_control( 'video_show_time', [ 'label' => __( 'Show Time', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_show_bar!' => '', ] ] ); $this->add_control( 'video_show_progress', [ 'label' => __( 'Show Progress', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_show_bar!' => '', ] ] ); $this->add_control( 'video_show_duration', [ 'label' => __( 'Show Duration', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_show_bar!' => '', ] ] ); $this->add_control( 'video_show_fs', [ 'label' => __( 'Show Fullscreen', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_show_bar!' => '', ], ] ); $this->add_control( 'video_volume_heading', [ 'label' => __( 'Volume', 'elementor-extras' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_show_volume', [ 'label' => __( 'Show Volume', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'device_media_type' => [ 'video' ], 'video_show_bar!' => '', ], ] ); $this->add_control( 'video_show_volume_icon', [ 'label' => __( 'Show Volume Icon', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'video_show_bar!' => '', 'video_show_volume!' => '', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_show_volume_bar', [ 'label' => __( 'Show Volume Bar', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'show', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'show', 'condition' => [ 'video_show_bar!' => '', 'video_show_volume!' => '', 'device_media_type' => [ 'video' ], ], ] ); $this->add_control( 'video_start_muted', [ 'label' => __( 'Start Muted', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'condition' => [ 'video_autoplay!' => '', 'device_media_type' => [ 'video' ], ], ] ); $this->add_responsive_control( 'video_volume', [ 'label' => __( 'Initial Volume', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.8, ], 'range' => [ 'px' => [ 'max' => 1, 'min' => 0, 'step' => 0.01, ], ], 'condition' => [ 'device_media_type' => [ 'video' ], 'video_start_muted!' => 'yes', ], 'frontend_available' => true, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_device_style', [ 'label' => __( 'Device', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'device_override_style', [ 'label' => __( 'Override Style', 'elementor-extras' ), 'description' => __( 'Override default device style', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', ] ); $this->add_control( 'device_skin', [ 'label' => __( 'Skin', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'jetblack', 'options' => [ 'jetblack' => __( 'Jet black', 'elementor-extras' ), 'black' => __( 'Black', 'elementor-extras' ), 'silver' => __( 'Silver', 'elementor-extras' ), 'gold' => __( 'Gold', 'elementor-extras' ), 'rosegold' => __( 'Rose Gold', 'elementor-extras' ), ], 'prefix_class' => 'ee-device-skin-', 'condition' => [ 'device_override_style!' => 'yes', 'device_type!' => [ 'laptop', 'desktop' ] ], ] ); $this->add_control( 'device_frame_background', [ 'label' => __( 'Device Background', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .ee-device-wrapper svg .back-shape' => 'fill: {{VALUE}}', '{{WRAPPER}} .ee-device-wrapper svg .side-shape' => 'fill: {{VALUE}}', ], 'condition' => [ 'device_override_style' => 'yes' ], ] ); $this->add_control( 'device_overlay_tone', [ 'label' => __( 'Tone', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => 'light', 'options' => [ 'light' => __( 'Light', 'elementor-extras' ), 'dark' => __( 'Dark', 'elementor-extras' ), ], 'prefix_class' => 'ee-device-controls-tone-', 'condition' => [ 'device_override_style' => 'yes', ], ] ); $this->add_control( 'device_overlay_opacity', [ 'label' => __( 'Opacity (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.2, ], 'range' => [ 'px' => [ 'max' => 0.4, 'min' => 0.1, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}} .ee-device-wrapper svg .overlay-shape' => 'fill-opacity: {{SIZE}};', ], 'condition' => [ 'device_override_style' => 'yes' ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_orientation_style', [ 'label' => __( 'Orientation Control', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'device_orientation_control!' => '', ], ] ); $this->start_controls_tabs( 'tabs_orientation_style' ); $this->start_controls_tab( 'orientation_default', [ 'label' => __( 'Default', 'elementor-extras' ), ] ); $this->add_control( 'orientation_color', [ 'label' => __( 'Color', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ee-device__orientation' => 'color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'orientation_hover', [ 'label' => __( 'Hover', 'elementor-extras' ), ] ); $this->add_control( 'orientation_color_hover', [ 'label' => __( 'Color', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ee-device__orientation:hover' => 'color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_video_style', [ 'label' => __( 'Video', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'device_media_type' => 'video', 'device_type!' => 'window', ], ] ); $this->add_control( 'video_cover_screen', [ 'label' => __( 'Cover Screen', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'return_value' => 'cover', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'condition' => [ 'device_media_type' => 'video', 'device_type!' => 'window' , ], 'prefix_class' => 'ee-device-video-', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_screen_style', [ 'label' => __( 'Screen', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'device_media_type' => [ 'image' ], 'device_type' => [ 'window' ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'device_screen_border', 'label' => __( 'Border', 'elementor-extras' ), 'selector' => '{{WRAPPER}} .ee-device-wrapper .ee-device__media__screen figure', 'condition' => [ 'device_type' => [ 'window' ], 'device_media_type' => [ 'image' ], ], ] ); $this->add_control( 'device_screen_radius', [ 'label' => __( 'Border Radius', 'elementor-extras' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'allowed_dimensions' => [ 'bottom', 'left' ], 'selectors' => [ '{{WRAPPER}} .ee-device-wrapper .ee-device__media__screen figure' => 'border-radius: 0 0 {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'device_type' => [ 'window' ], 'device_media_type' => [ 'image' ], ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_video_overlay', [ 'label' => __( 'Video Overlay', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'device_media_type' => 'video', ], ] ); $this->add_control( 'video_overlay_background', [ 'label' => __( 'Background', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'default' => '#000000', 'selectors' => [ '{{WRAPPER}} .ee-video-player__cover::after' => 'background-color: {{VALUE}}', ], 'condition' => [ 'device_media_type' => 'video', ], ] ); $this->add_responsive_control( 'video_overlay_opacity', [ 'label' => __( 'Opacity (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.8, ], 'range' => [ 'px' => [ 'max' => 1, 'min' => 0, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__cover::after' => 'opacity: {{SIZE}}', ], 'condition' => [ 'device_media_type' => 'video', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style', [ 'label' => __( 'Video Interface', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'relation' => 'and', 'terms' => [ [ 'name' => 'device_media_type', 'operator' => '==', 'value' => 'video', ], [ 'relation' => 'or', 'terms' => [ [ 'name' => 'video_show_buttons', 'operator' => '==', 'value' => 'show', ], [ 'name' => 'video_show_bar', 'operator' => '==', 'value' => 'show', ], ], ], ], ], ] ); $this->add_control( 'video_controls_radius', [ 'label' => __( 'Border Radius', 'elementor-extras' ), 'type' => Controls_Manager::DIMENSIONS, 'default' => [ 'top' => 100, 'right' => 100, 'bottom' => 100, 'left' => 100, 'unit' => 'px' ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar .ee-player__control--progress' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar .ee-player__control--progress__inner' => 'border-radius: 0 {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} 0;' ], ] ); $this->start_controls_tabs( 'tabs_controls_style' ); $this->start_controls_tab( 'video_controls', [ 'label' => __( 'Default', 'elementor-extras' ), ] ); $this->add_control( 'video_controls_foreground', [ 'label' => __( 'Controls Color', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'default' => '#000000', 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar' => 'color: {{VALUE}}', '{{WRAPPER}} .ee-video-player__controls .ee-player__control--progress__inner' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'video_controls_background', [ 'label' => __( 'Controls Background', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'default' => '#FFFFFF', 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'video_controls_opacity', [ 'label' => __( 'Controls Opacity (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.9, ], 'range' => [ 'px' => [ 'max' => 1, 'min' => 0, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar' => 'opacity: {{SIZE}}', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'video_controls_border', 'label' => __( 'Border', 'elementor-extras' ), 'selector' => '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'video_controls_shadow', 'selector' => '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'video_controls_hover', [ 'label' => __( 'Hover', 'elementor-extras' ), ] ); $this->add_control( 'video_controls_foreground_hover', [ 'label' => __( 'Controls Color', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '(desktop+){{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control:hover, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar:hover' => 'color: {{VALUE}}', '(desktop+){{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar:hover .ee-player__control--progress__inner' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'video_controls_background_hover', [ 'label' => __( 'Controls Background', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '(desktop+){{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control:hover, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar:hover' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'video_controls_opacity_hover', [ 'label' => __( 'Controls Opacity (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'max' => 1, 'min' => 0, 'step' => 0.01, ], ], 'selectors' => [ '(desktop+){{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control:hover, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar:hover' => 'opacity: {{SIZE}}', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'video_controls_border_hover', 'label' => __( 'Border', 'elementor-extras' ), 'selector' => '(desktop+){{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control:hover, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar:hover', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'video_controls_shadow_hover', 'selector' => '(desktop+){{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control:hover, {{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar:hover', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_buttons_style', [ 'label' => __( 'Video Buttons', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'device_media_type' => 'video', 'video_show_buttons!' => '', ], ] ); $this->add_responsive_control( 'video_buttons_size', [ 'label' => __( 'Size (%)', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 60, ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__control' => 'font-size: {{SIZE}}px; width: {{SIZE}}px; height: {{SIZE}}px;', ], 'condition' => [ 'video_show_buttons!' => '', ], ] ); $this->add_responsive_control( 'video_buttons_spacing', [ 'label' => __( 'Controls Spacing', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 200, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__overlay .ee-player__controls__rewind' => 'margin-right: {{SIZE}}px;', ], 'condition' => [ 'video_show_buttons!' => '', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_bar_style', [ 'label' => __( 'Video Bar', 'elementor-extras' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'device_media_type' => 'video', 'video_show_bar!' => '', ], ] ); $this->add_responsive_control( 'video_bar_padding', [ 'label' => __( 'Padding', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'max' => 72, 'min' => 0, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar' => 'padding: {{SIZE}}px', ], 'condition' => [ 'video_show_bar!' => '', ], ] ); $this->add_responsive_control( 'video_bar_margin', [ 'label' => __( 'Distance', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'max' => 72, 'min' => 0, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar-wrapper' => 'padding: 0 {{SIZE}}px {{SIZE}}px {{SIZE}}px', ], 'condition' => [ 'video_show_bar!' => '', ], ] ); $this->add_control( 'video_bar_radius', [ 'label' => __( 'Border Radius', 'elementor-extras' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'video_show_bar!' => '', ], ] ); $this->add_responsive_control( 'video_bar_zoom', [ 'label' => __( 'Controls Zoom', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'max' => 36, 'min' => 6, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar' => 'font-size: {{SIZE}}px', '{{WRAPPER}} .ee-video-player__controls .ee-player__controls__bar .ee-player__control--progress' => 'height: {{SIZE}}px', ], 'condition' => [ 'video_show_bar!' => '', ], ] ); $this->add_responsive_control( 'video_bar_spacing', [ 'label' => __( 'Controls Spacing', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'max' => 24, 'min' => 3, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .ee-video-player__controls .ee-player__control--indicator, {{WRAPPER}} .ee-video-player__controls .ee-player__control--icon' => 'padding: 0 {{SIZE}}px', '{{WRAPPER}} .ee-video-player__controls .ee-player__control--progress' => 'margin: 0 {{SIZE}}px', ], 'condition' => [ 'video_show_bar!' => '', ], ] ); $this->end_controls_section(); } /* * Render * * Render widget contents on frontend * * @since 0.1.0 * @return void / protected function render() { $settings = $this->get_settings_for_display(); // Default to phone $device_type = 'phone'; // Only assign device type if selected if ( ! empty( $settings['device_type'] ) ) { $device_type = $settings['device_type']; } $this->add_render_attribute( [ 'device-wrapper' => [ 'class' => [ 'ee-device-wrapper', 'ee-device-type-' . $device_type, ], ], 'device' => [ 'class' => [ 'ee-device', ], ], 'device-orientation' => [ 'class' => [ 'ee-device__orientation', 'nicon', 'nicon-mobile-landscape', ], ], 'device-shape' => [ 'class' => [ 'ee-device__shape', ], ], 'device-media' => [ 'class' => [ 'ee-device__media', ], ], 'device-media-inner' => [ 'class' => [ 'ee-device__media__inner', ], ], 'device-media-screen' => [ 'class' => [ 'ee-device__media__screen', 'ee-device__media__screen--' . $settings['device_media_type'], ], ], 'device-media-screen-landscape' => [ 'class' => [ 'ee-device__media__screen', 'ee-device__media__screen__landscape', ], ], 'device-media-screen-controls' => [ 'class' => [ 'ee-device__media__screen', 'ee-device__media__screen__controls', ], ], 'device-media-screen-inner' => [ 'class' => [ 'ee-device__media__screen__inner', ], ], ] ); if ( 'yes' === $settings['device_orientation_control'] && 'image' === $settings['device_media_type'] ) { $this->add_render_attribute('device', 'class', 'has--orientation-control'); } ?><div <?php echo $this->get_render_attribute_string('device-wrapper'); ?>> <div <?php echo $this->get_render_attribute_string('device'); ?>> <?php if ( 'yes' === $settings['device_orientation_control'] && 'image' === $settings['device_media_type'] ) { ?> <div <?php echo $this->get_render_attribute_string('device-orientation'); ?>></div> <?php } ?> <div <?php echo $this->get_render_attribute_string('device-shape'); ?>> <?php include ELEMENTOR_EXTRAS_PATH . 'assets/shapes/' . $device_type . '.svg'; ?> </div><!-- .ee-device__shape --> <div <?php echo $this->get_render_attribute_string('device-media'); ?>> <div <?php echo $this->get_render_attribute_string('device-media-inner'); ?>> <div <?php echo $this->get_render_attribute_string('device-media-screen'); ?>> <div <?php echo $this->get_render_attribute_string('device-media-screen-inner'); ?>> <?php if ( 'image' === $settings['device_media_type'] ) { ?> <?php $this->render_type_image( 'media_portrait_screenshot' ); ?> <?php } elseif ( 'video' === $settings['device_media_type'] ) { ?> <?php $this->render_type_video(); ?> <?php } ?> </div><!-- .ee-device__media__screen__inner --> </div><!-- .ee-device__media__screen --> <?php if ( 'image' === $settings['device_media_type'] && '' !== $settings['media_landscape_screenshot']['url'] ) { ?> <div <?php echo $this->get_render_attribute_string('device-media-screen-landscape'); ?>> <div <?php echo $this->get_render_attribute_string('device-media-screen-inner'); ?>> <figure> <?php $this->render_type_image( 'media_landscape_screenshot' ); ?> </figure> </div><!-- .ee-device__media__screen__inner --> </div><!-- .ee-device__media__screen__landscape --> <?php } ?> </div><!-- .ee-device__media__inner --> </div><!-- .ee-device__media --> </div><!-- .ee-device --> </div><!-- .ee-device-wrapper --><?php } /* * Render Type Image * * Render markup for the image * * @since 0.1.0 * @param control\|string The control id * @return void / protected function render_type_image( $control ) { $settings = $this->get_settings_for_display(); if ( '' !== $settings['media_portrait_screenshot']['url'] ) { ?> <figure><?php echo Group_Control_Image_Size::get_attachment_image_html( $settings, $control ); ?></figure> <?php } } protected function render_type_video() { $settings = $this->get_settings_for_display(); if ( empty( $settings['video_file']['url'] ) && empty( $settings['video_file_ogg']['url'] ) && empty( $settings['video_file_webm']['url'] ) && empty( $settings['video_file_m4v']['url'] ) && empty( $settings['video_url'] ) && empty( $settings['video_url_ogg'] ) && empty( $settings['video_url_webm'] ) && empty( $settings['video_url_m4v'] ) ) return; $this->add_render_attribute( [ 'video-wrapper' => [ 'class' => [ 'ee-video-player', 'ee-player' ], ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'video-wrapper' ); ?>> <?php $this->render_video(); ?> <?php $this->render_cover(); ?> <?php $this->render_controls(); ?> </div><!-- .ee-video-player --> <?php } /* * Render Video * * Render markup for the video * * @since 0.1.0 * @return void / protected function render_video() { $settings = $this->get_settings_for_display(); $this->add_render_attribute( 'video', [ 'class' => [ 'ee-video-player__source', 'ee-player__source' ], 'playsinline' => 'true', 'webkit-playsinline' => 'true', 'width' => '100%', 'height' => '100%', ] ); if ( 'autoplay' === $settings['video_autoplay'] && 'yes' !== $settings['video_play_viewport'] ) { $this->add_render_attribute( 'video', 'autoplay', 'true' ); } if ( 'yes' === $settings['video_start_muted'] ) { $this->add_render_attribute( 'video', 'muted', 'true' ); } if ( 'loop' === $settings['video_loop'] ) { $this->add_render_attribute( 'video', 'loop', 'true' ); } if ( ! empty( $settings['video_cover']['url'] ) ) { $url = Group_Control_Image_Size::get_attachment_image_src( $settings['video_cover']['id'], 'video_cover', $settings ); $this->add_render_attribute( 'video', 'poster', $url ); } ?><video <?php echo $this->get_render_attribute_string( 'video' ); ?>><?php $video_url = ( 'file' === $settings['video_source'] ) ? $settings['video_file']['url'] : $settings['video_url']; $video_url_m4v = ( 'file' === $settings['video_source_m4v'] ) ? $settings['video_file_m4v']['url'] : $settings['video_url_m4v']; $video_url_ogg = ( 'file' === $settings['video_source_ogg'] ) ? $settings['video_file_ogg']['url'] : $settings['video_url_ogg']; $video_url_webm = ( 'file' === $settings['video_source_webm'] ) ? $settings['video_file_webm']['url'] : $settings['video_url_webm']; if ( $video_url ) { $this->add_render_attribute( 'source-mp4', [ 'src' => $video_url, 'type' => 'video/mp4', ] ); ?><source <?php echo $this->get_render_attribute_string( 'source-mp4' ); ?>><?php } ?> <?php if ( $video_url_m4v ) { $this->add_render_attribute( 'source-m4v', [ 'src' => $video_url_m4v, 'type' => 'video/m4v', ] ); ?><source <?php echo $this->get_render_attribute_string( 'source-m4v' ); ?>><?php } ?> <?php if ( $video_url_ogg ) { $this->add_render_attribute( 'source-ogg', [ 'src' => $video_url_ogg, 'type' => 'video/ogg', ] ); ?><source <?php echo $this->get_render_attribute_string( 'source-wav' ); ?>><?php } ?> <?php if ( $video_url_webm ) { $this->add_render_attribute( 'source-webm', [ 'src' => $video_url_webm, 'type' => 'video/webm', ] ); ?><source <?php echo $this->get_render_attribute_string( 'source-webm' ); ?>><?php } ?> </video><?php } /* * Render Cover * * Render markup for the cover * * @since 0.1.0 * @return void / protected function render_cover() { $this->add_render_attribute( 'video-cover', [ 'class' => [ 'ee-video-player__cover', 'ee-player__cover', ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'video-cover' ); ?>></div><?php } /* * Render Controls * * Render markup for the player controls * * @since 0.1.0 * @return void / protected function render_controls() { $settings = $this->get_settings_for_display(); $this->add_render_attribute( [ 'controls' => [ 'class' => [ 'ee-video-player__controls', 'ee-player__controls', ], ], 'bar-wrapper' => [ 'class' => [ 'ee-player__controls__bar-wrapper', 'ee-video-player__controls__bar-wrapper', ], ], 'bar' => [ 'class' => [ 'ee-player__controls__bar', ], ], 'control-play' => [ 'class' => [ 'ee-player__control', 'ee-player__controls__play', 'ee-player__control--icon', 'nicon', 'nicon-play', ], ], ] ); ?> <div <?php echo $this->get_render_attribute_string( 'controls' ); ?>><?php /* * Before overlay. * * Fires before printing the overlay controls. * * @since 2.2.0 / do_action( 'elementor_extras/widgets/devices/video/before_overlay' ); $this->render_overlay(); /* * After overlay. * * Fires after printing the overlay controls. * * @since 2.2.0 / do_action( 'elementor_extras/widgets/devices/video/before_overlay' ); if ( 'show' === $settings['video_show_bar'] ) { /* * Before bar. * * Fires before printing the controls bar. * * @since 2.2.0 / do_action( 'elementor_extras/widgets/devices/video/before_bar' ); ?><div <?php echo $this->get_render_attribute_string( 'bar-wrapper' ); ?>> <div <?php echo $this->get_render_attribute_string( 'bar' ); ?>> <?php if ( 'yes' !== $settings['video_restart_on_pause'] && 'show' === $settings['video_show_rewind'] ) { $this->add_render_attribute( 'control-rewind', [ 'class' => [ 'ee-player__control', 'ee-player__controls__rewind', 'ee-player__control--icon', 'nicon', 'nicon-rewind', ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-rewind' ); ?>></div><?php } ?> <div <?php echo $this->get_render_attribute_string( 'control-play' ); ?>></div> <?php if ( $settings['video_show_time'] ) { $this->add_render_attribute( 'control-time', [ 'class' => [ 'ee-player__control', 'ee-player__control--indicator', 'ee-player__controls__time', ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-time' ); ?>>00:00</div><?php } ?> <?php if ( $settings['video_show_progress'] ) { $this->add_render_attribute( [ 'control-progress' => [ 'class' => [ 'ee-player__control', 'ee-player__controls__progress', 'ee-player__control--progress', ], ], 'control-progress-time' => [ 'class' => [ 'ee-player__controls__progress-time', 'ee-player__control--progress__inner', ], ], 'control-progress-track' => [ 'class' => [ 'ee-player__control--progress__inner', 'ee-player__control--progress__track', ], ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-progress' ); ?>> <div <?php echo $this->get_render_attribute_string( 'control-progress-time' ); ?>></div> <div <?php echo $this->get_render_attribute_string( 'control-progress-track' ); ?>></div> </div><?php } ?> <?php if ( $settings['video_show_duration'] ) { $this->add_render_attribute( 'control-duration', [ 'class' => [ 'ee-player__control', 'ee-player__controls__duration', 'ee-player__control--indicator', ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-duration' ); ?>>00:00</div><?php } ?> <?php if ( $settings['video_show_volume'] ) { $this->add_render_attribute( 'control-volume', [ 'class' => [ 'ee-player__control', 'ee-player__controls__volume', ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-volume' ); ?>> <?php if ( $settings['video_show_volume_icon'] ) { $this->add_render_attribute( 'control-volume-icon', [ 'class' => [ 'ee-player__controls__volume-icon', 'ee-player__control--icon', 'nicon', 'nicon-volume', ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-volume-icon' ); ?>></div><?php } ?> <?php if ( $settings['video_show_volume_bar'] ) { $this->add_render_attribute( [ 'control-volume-bar' => [ 'class' => [ 'ee-player__control', 'ee-player__controls__volume-bar', 'ee-player__control--progress', ], ], 'control-volume-bar-amount' => [ 'class' => [ 'ee-player__controls__volume-bar__amount', 'ee-player__control--progress__inner', ], ], 'control-volume-bar-track' => [ 'class' => [ 'ee-player__controls__volume-bar__track', 'ee-player__control--progress__inner', 'ee-player__control--progress__track', ], ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-volume-bar' ); ?>> <div <?php echo $this->get_render_attribute_string( 'control-volume-bar-amount' ); ?>></div> <div <?php echo $this->get_render_attribute_string( 'control-volume-bar-track' ); ?>></div> </div><?php } ?> </div><?php } ?> <?php if ( $settings['video_show_fs'] ) { $this->add_render_attribute( 'control-fullscreen', [ 'class' => [ 'ee-player__control', 'ee-player__controls__fs', 'ee-player__control--icon', 'nicon', 'nicon-expand' ], ] ); ?><div <?php echo $this->get_render_attribute_string( 'control-fullscreen' ); ?>></div><?php } ?> </div><!-- .ee-player__controls__bar --> </div><!-- .ee-player__controls__bar-wrapper --><?php /* * After bar. * * Fires after printing the controls bar. * * @since 2.2.0 / do_action( 'elementor_extras/widgets/devices/video/after_bar' ); } ?></div><!-- .ee-video-player__controls --> <?php } /* * Render Overlay * * Render markup for the overlay * * @since 0.1.0 * @return void / protected function render_overlay() { $settings = $this->get_settings_for_display(); if ( 'show' === $settings['video_show_buttons'] ) { $this->add_render_attribute( [ 'overlay' => [ 'class' => [ 'ee-player__controls__overlay', 'ee-video-player__overlay', ], ], 'overlay-play' => [ 'class' => [ 'ee-player__control', 'ee-player__controls__play', 'nicon', 'nicon-play', ], ], ] ); ?><ul <?php echo $this->get_render_attribute_string( 'overlay' ); ?>><?php if ( 'yes' !== $settings['video_restart_on_pause'] && 'show' === $settings['video_show_rewind'] ) { $this->add_render_attribute( 'overlay-rewind', [ 'class' => [ 'ee-player__control', 'ee-player__controls__rewind', 'nicon', 'nicon-rewind', ], ] ) ?><li <?php echo $this->get_render_attribute_string( 'overlay-rewind' ); ?>></li><?php } ?><li <?php echo $this->get_render_attribute_string( 'overlay-play' ); ?>></li> </ul> <?php } } /* * Content Template * * Javascript content template for quick rendering * * @since 0.1.0 * @return void / protected function content_template() { ?><# var device_type = 'phone'; if ( settings.device_type ) { device_type = settings.device_type; } view.addRenderAttribute( { 'device-wrapper' : { 'class' : [ 'ee-device-wrapper', 'ee-device-type-' + device_type, ], }, 'device' : { 'class' : [ 'ee-device', ], }, 'device-orientation' : { 'class' : [ 'ee-device__orientation', 'nicon', 'nicon-mobile-landscape', ], }, 'device-shape' : { 'class' : [ 'ee-device__shape', ], }, 'device-media' : { 'class' : [ 'ee-device__media', ], }, 'device-media-inner' : { 'class' : [ 'ee-device__media__inner', ], }, 'device-media-screen' : { 'class' : [ 'ee-device__media__screen', 'ee-device__media__screen--' + settings.device_media_type, ], }, 'device-media-screen-landscape' : { 'class' : [ 'ee-device__media__screen', 'ee-device__media__screen__landscape', ], }, 'device-media-screen-controls' : { 'class' : [ 'ee-device__media__screen', 'ee-device__media__screen__controls', ], }, 'device-media-screen-inner' : { 'class' : [ 'ee-device__media__screen__inner', ], }, } ); if ( 'yes' === settings.device_orientation_control && 'image' === settings.device_media_type ) { view.addRenderAttribute('device', 'class', 'has--orientation-control'); } function getScreenshotURL( orientation ) { var screen = { id : settings['media_' + orientation + '_screenshot'].id, url : settings['media_' + orientation + '_screenshot'].url, size : settings['media_' + orientation + '_screenshot_size'], dimension : settings['media_' + orientation + '_screenshot_custom_dimension'], model : view.getEditModel(), }; var screen_url = elementor.imagesManager.getImageUrl( screen ); if ( screen_url ) return screen_url; return false; } #><div {{{ view.getRenderAttributeString( 'device-wrapper') }}}> <div {{{ view.getRenderAttributeString( 'device' ) }}}> <# if ( 'yes' === settings.device_orientation_control && 'image' === settings.device_media_type ) { #> <div {{{ view.getRenderAttributeString( 'device-orientation') }}}></div> <# } #> <div {{{ view.getRenderAttributeString( 'device-shape') }}}></div><!-- .ee-device__shape --> <div {{{ view.getRenderAttributeString( 'device-media') }}}> <div {{{ view.getRenderAttributeString( 'device-media-inner') }}}> <div {{{ view.getRenderAttributeString( 'device-media-screen') }}}> <div {{{ view.getRenderAttributeString( 'device-media-screen-inner') }}}> <# if ( 'image' === settings.device_media_type ) { #> <figure><img src="{{{ getScreenshotURL( 'portrait' ) }}}" /></figure> <# } else if ( 'video' === settings.device_media_type ) { #> <?php $this->_video_type_template(); ?> <# } #> </div><!-- .ee-device__media__screen__inner --> </div><!-- .ee-device__media__screen --> <# if ( 'image' === settings.device_media_type && '' !== settings.media_landscape_screenshot.url ) { #> <div {{{ view.getRenderAttributeString( 'device-media-screen-landscape') }}}> <div {{{ view.getRenderAttributeString( 'device-media-screen-inner') }}}> <figure> <figure><img src="{{{ getScreenshotURL( 'landscape' ) }}}" /></figure> </figure> </div><!-- .ee-device__media__screen__inner --> </div><!-- .ee-device__media__screen__landscape --> <# } #> </div><!-- .ee-device__media__inner --> </div><!-- .ee-device__media --> </div><!-- .ee-device --> </div><!-- .ee-device-wrapper --><?php } /* * Video Type Template * * Javascript video type template * * @since 0.1.0 * @return void / protected function _video_type_template() { ?><# if ( '' !== settings.video_file.url \|\| '' !== settings.video_file_ogg.url \|\| '' !== settings.video_file_webm.url \|\| '' !== settings.video_file_m4v.url \|\| '' !== settings.video_url \|\| '' !== settings.video_url_ogg \|\| '' !== settings.video_url_webm \|\| '' !== settings.video_url_m4v ) { view.addRenderAttribute( { 'video-wrapper' : { 'class' : [ 'ee-video-player', 'ee-player', ], }, } ); #><div {{{ view.getRenderAttributeString( 'video-wrapper' ) }}}> <?php echo $this->_video_template(); ?> <?php echo $this->_cover_template(); ?> <?php echo $this->_controls_template(); ?> </div><!-- .ee-player --> <# } #><?php } /* * Video Template * * Javascript video template * * @since 0.1.0 * @return void / protected function _video_template() { ?><# view.addRenderAttribute( 'video', { 'class' : [ 'ee-video-player__source', 'ee-player__source' ], 'playsinline' : 'true', 'width' : '100%', 'height' : '100%', } ); if( 'autoplay' === settings.video_autoplay && 'yes' !== settings.video_play_viewport ) { view.addRenderAttribute( 'video', 'autoplay', 'true' ); } if( 'yes' === settings.video_start_muted ) { view.addRenderAttribute( 'video', 'muted', 'true' ); } if ( 'loop' === settings.video_loop ) { view.addRenderAttribute( 'video', 'loop', 'true' ); } if ( settings.video_cover.id ) { var image = { id : settings.video_cover.id, url : settings.video_cover.url, size : settings.image_size, dimension : settings.image_custom_dimension, model : view.getEditModel(), }; view.addRenderAttribute( 'video', 'poster', elementor.imagesManager.getImageUrl( image ) ); } #><video {{{ view.getRenderAttributeString( 'video' ) }}}><# var video_url = ( 'file' === settings.video_source ) ? settings.video_file.url : settings.video_url, video_url_m4v = ( 'file' === settings.video_source_m4v ) ? settings.video_file_m4v.url : settings.video_url_m4v, video_url_ogg = ( 'file' === settings.video_source_ogg ) ? settings.video_file_ogg.url : settings.video_url_ogg, video_url_webm = ( 'file' === settings.video_source_webm ) ? settings.video_file_webm.url : settings.video_url_webm; if ( video_url ) { view.addRenderAttribute( 'source-mp4', { 'src' : video_url, 'type' : 'video/mp4', } ); #><source {{{ view.getRenderAttributeString( 'source-mp4' ) }}}><# } #> <# if ( video_url_m4v ) { view.addRenderAttribute( 'source-m4v', { 'src' : video_url_m4v, 'type' : 'video/m4v', } ); #><source {{{ view.getRenderAttributeString( 'source-m4v' ) }}}><# } #> <# if ( video_url_ogg ) { view.addRenderAttribute( 'source-ogg', { 'src' : video_url_ogg, 'type' : 'video/ogg', } ); #><source {{{ view.getRenderAttributeString( 'source-ogg' ) }}}><# } #> <# if ( video_url_webm ) { view.addRenderAttribute( 'source-webm', { 'src' : video_url_webm, 'type' : 'video/webm', } ); #><source {{{ view.getRenderAttributeString( 'source-webm' ) }}}><# } #> </video> <?php } /* * Controls Template * * Javascript controls template * * @since 0.1.0 * @return void / protected function _controls_template() { ?><# view.addRenderAttribute({ 'controls' : { 'class' : [ 'ee-video-player__controls', 'ee-player__controls', ], }, 'bar-wrapper' : { 'class' : [ 'ee-player__controls__bar-wrapper', 'ee-video-player__controls__bar-wrapper', ], }, 'bar' : { 'class' : [ 'ee-player__controls__bar', ], }, 'control-play' : { 'class' : [ 'ee-player__control', 'ee-player__controls__play', 'ee-player__control--icon', 'nicon', 'nicon-play', ], }, }); #><div {{{ view.getRenderAttributeString( 'controls' ) }}}> <?php $this->_overlay_template(); ?> <# if ( 'show' === settings.video_show_bar ) { #> <div {{{ view.getRenderAttributeString( 'bar-wrapper' ) }}}> <div {{{ view.getRenderAttributeString( 'bar' ) }}}> <# if ( 'yes' !== settings.video_restart_on_pause && 'show' === settings.video_show_rewind ) { view.addRenderAttribute( 'control-rewind', { 'class' : [ 'ee-player__control', 'ee-player__controls__rewind', 'ee-player__control--icon', 'nicon', 'nicon-rewind', ], } ); #><div {{{ view.getRenderAttributeString( 'control-rewind' ) }}}></div><# } #> <div {{{ view.getRenderAttributeString( 'control-play' ) }}}></div> <# if ( settings.video_show_time ) { view.addRenderAttribute( 'control-time', { 'class' : [ 'ee-player__control', 'ee-player__control--indicator', 'ee-player__controls__time', ], } ); #><div {{{ view.getRenderAttributeString( 'control-time' ) }}}>00:00</div><# } #> <# if ( settings.video_show_progress ) { view.addRenderAttribute( { 'control-progress' : { 'class' : [ 'ee-player__control', 'ee-player__controls__progress', 'ee-player__control--progress', ], }, 'control-progress-time' : { 'class' : [ 'ee-player__controls__progress-time', 'ee-player__control--progress__inner', ], }, 'control-progress-track' : { 'class' : [ 'ee-player__control--progress__inner', 'ee-player__control--progress__track', ], }, } ); #><div {{{ view.getRenderAttributeString( 'control-progress' ) }}}> <div {{{ view.getRenderAttributeString( 'control-progress-time' ) }}}></div> <div {{{ view.getRenderAttributeString( 'control-progress-track' ) }}}></div> </div><# } #> <# if ( settings.video_show_duration ) { view.addRenderAttribute( 'control-duration', { 'class' : [ 'ee-player__control', 'ee-player__controls__duration', 'ee-player__control--indicator', ], } ); #><div {{{ view.getRenderAttributeString( 'control-duration' ) }}}>00:00</div><# } #> <# if ( settings.video_show_volume ) { view.addRenderAttribute( 'control-volume', { 'class' : [ 'ee-player__control', 'ee-player__controls__volume', ], } ); #><div {{{ view.getRenderAttributeString( 'control-volume' ) }}}> <# if ( settings.video_show_volume_icon ) { view.addRenderAttribute( 'control-volume-icon', { 'class' : [ 'ee-player__controls__volume-icon', 'ee-player__control--icon', 'nicon', 'nicon-volume', ], } ); #><div {{{ view.getRenderAttributeString( 'control-volume-icon' ) }}}></div><# } #> <# if ( settings.video_show_volume_bar ) { view.addRenderAttribute( { 'control-volume-bar' : { 'class' : [ 'ee-player__control', 'ee-player__controls__volume-bar', 'ee-player__control--progress', ], }, 'control-volume-bar-amount' : { 'class' : [ 'ee-player__controls__volume-bar__amount', 'ee-player__control--progress__inner', ], }, 'control-volume-bar-track' : { 'class' : [ 'ee-player__controls__volume-bar__track', 'ee-player__control--progress__inner', 'ee-player__control--progress__track', ], }, } ); #><div {{{ view.getRenderAttributeString( 'control-volume-bar' ) }}}> <div {{{ view.getRenderAttributeString( 'control-volume-bar-amount' ) }}}></div> <div {{{ view.getRenderAttributeString( 'control-volume-bar-track' ) }}}></div> </div><# } #> </div><# } #> </div><!-- .ee-player__controls__bar --> </div><!-- .ee-player__controls__bar-wrapper --> <# } #> </div><!-- .ee-player__controls --> <?php } /* * Cover Template * * Javascript cover template * * @since 0.1.0 * @return void / protected function _cover_template() { ?><# view.addRenderAttribute( 'video-cover', { 'class' : [ 'ee-video-player__cover', 'ee-player__cover', ], } ); #><div {{{ view.getRenderAttributeString( 'video-cover' ) }}}></div><?php } /* * Overlay Template * * Javascript overlay template * * @since 0.1.0 * @return void */ protected function _overlay_template() { ?><# if ( 'show' === settings.video_show_buttons ) { view.addRenderAttribute( { 'overlay' : { 'class' : [ 'ee-player__controls__overlay', 'ee-video-player__overlay', ], }, 'overlay-play' : { 'class' : [ 'ee-player__control', 'ee-player__controls__play', 'nicon', 'nicon-play', ], }, } ); #><ul {{{ view.getRenderAttributeString( 'overlay' ) }}}><# if ( 'yes' !== settings.video_restart_on_pause && 'show' === settings.video_show_rewind ) { view.addRenderAttribute( 'overlay-rewind', { 'class' : [ 'ee-player__control', 'ee-player__controls__rewind', 'nicon', 'nicon-rewind', ], } ) #><li {{{ view.getRenderAttributeString( 'overlay-rewind' ) }}}></li><# } #><li {{{ view.getRenderAttributeString( 'overlay-play' ) }}}></li> </ul> <# } #><?php } }

| ver. 1.4 | Github | . | PHP 8.1.33 | Генерация страницы: 0.01 | proxy | phpinfo | Настройка