编辑文件 - datis

✏️ 正在编辑: datis_video.php

路径: /home/h359620/public_html/wp-content/themes/datis/inc/elementor/widgets/datis_video/datis_video.php
提示: 您可以编辑任何文件（包括二进制文件），但请注意不当修改可能导致文件损坏。

<?php

namespace Datis\Widgets;

if (!defined('ABSPATH')) exit;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

if (!class_exists('Datis_Video')) {
    class Datis_Video extends Widget_Base
    {
        public function get_name()
        {
            return 'datis_video';
        }
        public function get_title()
        {
            return __('Video', 'datis');
        }
        public function get_icon()
        {
            return 'eicon-video';
        }
        public function get_categories()
        {
            return ['datis-widgets'];
        }

protected function register_controls()
        {
            /* ============= CONTENT ============= */
            $this->start_controls_section('video_section', [
                'label' => __('Video Settings', 'datis'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]);

$this->add_control('video_file', [
                'label'      => __('Video File', 'datis'),
                'type'       => Controls_Manager::MEDIA,
                'media_type' => 'video',
            ]);

$this->add_control('poster', [
                'label'      => __('Poster Image (Cover)', 'datis'),
                'type'       => Controls_Manager::MEDIA,
                'media_type' => 'image',
                'description' => __('Required: cover is always built from the poster.', 'datis'),
            ]);

$this->add_control('autoplay', [
                'label'   => __('Autoplay', 'datis'),
                'type'    => Controls_Manager::SWITCHER,
                'default' => '',
            ]);
            $this->add_control('loop', [
                'label'   => __('Loop', 'datis'),
                'type'    => Controls_Manager::SWITCHER,
                'default' => '',
            ]);
            $this->add_control('muted', [
                'label'   => __('Muted', 'datis'),
                'type'    => Controls_Manager::SWITCHER,
                'default' => '',
            ]);
            $this->add_control('controls', [
                'label'   => __('Show Controls', 'datis'),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]);

$this->end_controls_section();

/* ============= STYLE: WRAPPER ============= */
            $this->start_controls_section('style_wrapper', [
                'label' => __('Wrapper (Parent)', 'datis'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]);

$this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'wrapper_border',
                'selector' => '{{WRAPPER}} .datis-video-cover-wrapper',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'wrapper_shadow',
                'selector' => '{{WRAPPER}} .datis-video-cover-wrapper',
            ]);
            $this->add_responsive_control('wrapper_radius', [
                'label' => __('Border Radius', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => ['{{WRAPPER}} .datis-video-cover-wrapper' => 'border-radius: {{SIZE}}{{UNIT}}; overflow:hidden;'],
            ]);
            $this->add_responsive_control('wrapper_padding', [
                'label' => __('Padding', 'datis'),
                'type'  => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => ['{{WRAPPER}} .datis-video-cover-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
            ]);
            $this->add_responsive_control('wrapper_margin', [
                'label' => __('Margin', 'datis'),
                'type'  => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => ['{{WRAPPER}} .datis-video-cover-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
            ]);

$this->start_controls_tabs('wrapper_tabs');
            $this->start_controls_tab('wrapper_tab_normal', ['label' => __('Normal', 'datis')]);
            $this->add_group_control(Group_Control_Background::get_type(), [
                'name'     => 'wrapper_bg',
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .datis-video-cover-wrapper',
            ]);
            $this->end_controls_tab();
            $this->start_controls_tab('wrapper_tab_hover', ['label' => __('Hover', 'datis')]);
            $this->add_group_control(Group_Control_Background::get_type(), [
                'name'     => 'wrapper_bg_hover',
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .datis-video-cover-wrapper:hover',
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'wrapper_border_hover',
                'selector' => '{{WRAPPER}} .datis-video-cover-wrapper:hover',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'wrapper_shadow_hover',
                'selector' => '{{WRAPPER}} .datis-video-cover-wrapper:hover',
            ]);
            $this->end_controls_tab();
            $this->end_controls_tabs();
            $this->end_controls_section();

/* ============= STYLE: VIDEO COVER (poster as bg) ============= */
            $this->start_controls_section('style_video_cover', [
                'label' => __('Video Cover', 'datis'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]);

$this->add_responsive_control('cover_height', [
                'label' => __('Height', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vh'],
                'range' => ['px' => ['min' => 100, 'max' => 2000]],
                'selectors' => ['{{WRAPPER}} .datis-video-cover' => 'height: {{SIZE}}{{UNIT}};'],
            ]);

$this->add_responsive_control('cover_radius', [
                'label' => __('Border Radius', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => ['{{WRAPPER}} .datis-video-cover' => 'border-radius: {{SIZE}}{{UNIT}}; overflow:hidden;'],
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'cover_border',
                'selector' => '{{WRAPPER}} .datis-video-cover',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'cover_shadow',
                'selector' => '{{WRAPPER}} .datis-video-cover',
            ]);

$this->start_controls_tabs('cover_tabs');
            $this->start_controls_tab('cover_tab_normal', ['label' => __('Normal', 'datis')]);
            // Overlay رنگی روی پوستر
            $this->add_control('cover_overlay_color', [
                'label' => __('Overlay Color', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-video-cover::after' => 'content:""; position:absolute; inset:0; background-color: {{VALUE}};'],
            ]);
            // موقعیت و سایز بک‌گراند پوستر
            $this->add_control('cover_background_size', [
                'label'   => __('Background Size', 'datis'),
                'type'    => Controls_Manager::SELECT,
                'options' => ['cover' => __('Cover', 'datis'), 'contain' => __('Contain', 'datis'), 'auto' => __('Auto', 'datis')],
                'selectors' => ['{{WRAPPER}} .datis-video-cover' => 'background-size: {{VALUE}};'],
            ]);
            $this->add_control('cover_background_position', [
                'label'   => __('Background Position', 'datis'),
                'type'    => Controls_Manager::SELECT,
                'options' => [
                    'center center' => 'Center Center',
                    'top center' => 'Top Center',
                    'bottom center' => 'Bottom Center',
                    'center left' => 'Center Left',
                    'center right' => 'Center Right',
                    'top left' => 'Top Left',
                    'top right' => 'Top Right',
                    'bottom left' => 'Bottom Left',
                    'bottom right' => 'Bottom Right'
                ],
                'selectors' => ['{{WRAPPER}} .datis-video-cover' => 'background-position: {{VALUE}};'],
            ]);
            $this->end_controls_tab();

$this->start_controls_tab('cover_tab_hover', ['label' => __('Hover', 'datis')]);
            $this->add_control('cover_overlay_color_hover', [
                'label' => __('Overlay Color (Hover)', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-video-cover:hover::after' => 'content:""; position:absolute; inset:0; background-color: {{VALUE}};'],
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'cover_border_hover',
                'selector' => '{{WRAPPER}} .datis-video-cover:hover',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'cover_shadow_hover',
                'selector' => '{{WRAPPER}} .datis-video-cover:hover',
            ]);
            $this->end_controls_tab();
            $this->end_controls_tabs();
            $this->end_controls_section();

/* ============= STYLE: PLAY BUTTON (always centered) ============= */
            $this->start_controls_section('style_play_button', [
                'label' => __('Play Button', 'datis'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]);

// ظرف کاور همیشه مرکزچین
            // (بدون کنترل موقعیت — منطقی و ثابت)
            // سایز/پدینگ/رادیوس/بوردر/شادو برای خود دکمه
            $this->add_responsive_control('play_btn_padding', [
                'label' => __('Padding', 'datis'),
                'type'  => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => ['{{WRAPPER}} .datis-play-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
            ]);
            $this->add_responsive_control('play_btn_radius', [
                'label' => __('Border Radius', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => ['{{WRAPPER}} .datis-play-btn' => 'border-radius: {{SIZE}}{{UNIT}};'],
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'play_btn_border',
                'selector' => '{{WRAPPER}} .datis-play-btn',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'play_btn_shadow',
                'selector' => '{{WRAPPER}} .datis-play-btn',
            ]);

// اندازه SVG
            $this->add_responsive_control('play_button_size', [
                'label' => __('Icon Size', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => ['px' => ['min' => 24, 'max' => 240]],
                'selectors' => ['{{WRAPPER}} .datis-play-btn svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};'],
            ]);

// پالس اختیاری
            $this->add_control('play_pulse_enable', [
                'label' => __('Pulse / Wave', 'datis'),
                'type'  => Controls_Manager::SWITCHER,
                'default' => '',
            ]);
            $this->add_control('play_pulse_color', [
                'label' => __('Pulse Color', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'condition' => ['play_pulse_enable' => 'yes'],
                'selectors' => [
                    '{{WRAPPER}} .datis-play-btn::before' => 'background: {{VALUE}};',
                    '{{WRAPPER}} .datis-play-btn::after'  => 'background: {{VALUE}};',
                ],
            ]);

$this->start_controls_tabs('play_btn_tabs');
            $this->start_controls_tab('play_btn_tab_normal', ['label' => __('Normal', 'datis')]);
            $this->add_control('play_button_background_color', [
                'label' => __('Circle Fill', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-play-btn svg rect' => 'fill: {{VALUE}};'],
            ]);
            $this->add_control('play_button_icon_color', [
                'label' => __('Icon Stroke', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-play-btn svg path' => 'stroke: {{VALUE}};'],
            ]);
            $this->end_controls_tab();

$this->start_controls_tab('play_btn_tab_hover', ['label' => __('Hover', 'datis')]);
            $this->add_control('play_button_background_color_hover', [
                'label' => __('Circle Fill (Hover)', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-play-btn:hover svg rect' => 'fill: {{VALUE}};'],
            ]);
            $this->add_control('play_button_icon_color_hover', [
                'label' => __('Icon Stroke (Hover)', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-play-btn:hover svg path' => 'stroke: {{VALUE}};'],
            ]);
            $this->end_controls_tab();
            $this->end_controls_tabs();

$this->end_controls_section();

/* ============= STYLE: MODAL BACKDROP ============= */
            $this->start_controls_section('style_modal', [
                'label' => __('Modal Background', 'datis'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]);

$this->add_group_control(Group_Control_Background::get_type(), [
                'name'     => 'modal_bg',
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .datis-video-modal',
            ]);
            $this->add_responsive_control('modal_opacity', [
                'label' => __('Backdrop Opacity', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => ['%' => ['min' => 0, 'max' => 100]],
                'selectors' => ['{{WRAPPER}} .datis-video-modal' => 'opacity: calc({{SIZE}}/100);'],
            ]);
            $this->add_responsive_control('modal_blur', [
                'label' => __('Backdrop Blur (px)', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => ['px' => ['min' => 0, 'max' => 40]],
                'selectors' => ['{{WRAPPER}} .datis-video-modal' => 'backdrop-filter: blur({{SIZE}}{{UNIT}}); -webkit-backdrop-filter: blur({{SIZE}}{{UNIT}});'],
            ]);

$this->end_controls_section();

/* ============= STYLE: MODAL VIDEO PLAYER ============= */
            $this->start_controls_section('style_modal_video', [
                'label' => __('Modal Video Player', 'datis'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]);

$this->add_responsive_control('video_aspect_ratio', [
                'label' => __('Aspect Ratio', 'datis'),
                'type'  => Controls_Manager::SELECT,
                'options' => [
                    ''      => __('Auto', 'datis'),
                    '16/9'  => '16 / 9',
                    '9/16'  => '9 / 16',
                    '4/3'   => '4 / 3',
                    '1/1'   => '1 / 1',
                    '21/9'  => '21 / 9',
                ],
                'selectors' => ['{{WRAPPER}} .datis-video-modal video' => 'aspect-ratio: {{VALUE}}; width: 100%; height: auto;'],
            ]);
            $this->add_responsive_control('video_object_fit', [
                'label' => __('Object Fit', 'datis'),
                'type'  => Controls_Manager::SELECT,
                'options' => [
                    '' => __('Default', 'datis'),
                    'cover' => 'cover',
                    'contain' => 'contain',
                    'fill' => 'fill',
                    'none' => 'none',
                    'scale-down' => 'scale-down',
                ],
                'selectors' => ['{{WRAPPER}} .datis-video-modal video' => 'object-fit: {{VALUE}};'],
            ]);

$this->add_responsive_control('modal_video_radius', [
                'label' => __('Border Radius', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => ['{{WRAPPER}} .datis-video-modal video' => 'border-radius: {{SIZE}}{{UNIT}}; overflow:hidden;'],
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'modal_video_border',
                'selector' => '{{WRAPPER}} .datis-video-modal video',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'modal_video_shadow',
                'selector' => '{{WRAPPER}} .datis-video-modal video',
            ]);

$this->end_controls_section();

/* ============= STYLE: CLOSE BUTTON ============= */
            $this->start_controls_section('style_close_btn', [
                'label' => __('Close Button', 'datis'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]);

$this->add_responsive_control('close_size', [
                'label' => __('Size', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => ['px' => ['min' => 16, 'max' => 120]],
                'selectors' => [
                    '{{WRAPPER}} .datis-video-close' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}}; font-size: calc({{SIZE}}{{UNIT}} * .6); text-align:center;',
                ],
            ]);
            $this->add_responsive_control('close_radius', [
                'label' => __('Border Radius', 'datis'),
                'type'  => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => ['{{WRAPPER}} .datis-video-close' => 'border-radius: {{SIZE}}{{UNIT}};'],
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'close_border',
                'selector' => '{{WRAPPER}} .datis-video-close',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'close_shadow',
                'selector' => '{{WRAPPER}} .datis-video-close',
            ]);

$this->start_controls_tabs('close_tabs');
            $this->start_controls_tab('close_tab_normal', ['label' => __('Normal', 'datis')]);
            $this->add_group_control(Group_Control_Background::get_type(), [
                'name'     => 'close_bg',
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .datis-video-close',
            ]);
            $this->add_control('close_color', [
                'label' => __('Color', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-video-close' => 'color: {{VALUE}};'],
            ]);
            $this->end_controls_tab();
            $this->start_controls_tab('close_tab_hover', ['label' => __('Hover', 'datis')]);
            $this->add_group_control(Group_Control_Background::get_type(), [
                'name'     => 'close_bg_hover',
                'types'    => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .datis-video-close:hover',
            ]);
            $this->add_group_control(Group_Control_Border::get_type(), [
                'name'     => 'close_border_hover',
                'selector' => '{{WRAPPER}} .datis-video-close:hover',
            ]);
            $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
                'name'     => 'close_shadow_hover',
                'selector' => '{{WRAPPER}} .datis-video-close:hover',
            ]);
            $this->add_control('close_color_hover', [
                'label' => __('Color (Hover)', 'datis'),
                'type'  => Controls_Manager::COLOR,
                'selectors' => ['{{WRAPPER}} .datis-video-close:hover' => 'color: {{VALUE}};'],
            ]);
            $this->end_controls_tab();
            $this->end_controls_tabs();

$this->end_controls_section();
        }

protected function render()
        {
            $s = $this->get_settings_for_display();
            if (empty($s['video_file']['url'])) return;
            if (empty($s['poster']['url'])) {
                // پوستر الزامیه؛ برای جلوگیری از کاور بدون تصویر
                echo '<div class="datis-video-cover-wrapper"><div class="datis-video-cover" role="img" aria-label="Video cover"></div></div>';
                return;
            }

$video_url  = esc_url($s['video_file']['url']);
            $poster_url = esc_url($s['poster']['url']);

$autoplay = $s['autoplay'] === 'yes' ? 'autoplay' : '';
            $loop     = $s['loop']     === 'yes' ? 'loop'     : '';
            $muted    = $s['muted']    === 'yes' ? 'muted'    : '';
            $controls = $s['controls'] === 'yes' ? 'controls' : '';

?>
            <div class="datis-video-cover-wrapper">
                <div class="datis-video-cover" style="background-image:url('<?php echo $poster_url; ?>'); display:flex; align-items:center; justify-content:center; position:relative;">
                    <button class="datis-play-btn"
                        data-video="<?php echo $video_url; ?>"
                        name="datis_paly_video"
                        data-autoplay="<?php echo $autoplay; ?>"
                        data-loop="<?php echo $loop; ?>"
                        data-muted="<?php echo $muted; ?>"
                        data-controls="<?php echo $controls; ?>">
                        <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <rect width="64" height="64" rx="32" />
                            <path d="M23 32L23 25.0329C23 22.7237 25.5344 21.264 27.5966 22.3855L30.7996 24.1273M23 36L23 38.9671C23 41.2763 25.5344 42.736 27.5966 41.6145L40.4086 34.6474C42.5305 33.4935 42.5305 30.5065 40.4086 29.3526L34.0026 25.869" stroke-linecap="round" />
                        </svg>
                    </button>
                </div>
            </div>

<div class="datis-video-modal">
                <div class="datis-video-modal-inner">
                    <span class="datis-video-close" role="button" aria-label="<?php echo esc_attr__('Close', 'datis'); ?>">&times;</span>
                    <video id="datis-video-popup-player" playsinline></video>
                </div>
            </div>
<?php
        }

public function __construct($data = [], $args = null)
        {
            parent::__construct($data, $args);
            add_action('elementor/editor/before_enqueue_scripts', [$this, 'enqueue_assets']);
            add_action('elementor/editor/before_enqueue_styles',  [$this, 'enqueue_assets']);
            add_action('elementor/frontend/before_enqueue_scripts', [$this, 'enqueue_assets']);
            add_action('elementor/frontend/before_enqueue_styles', [$this, 'enqueue_assets']);
        }

public function enqueue_assets()
        {
            wp_enqueue_style('datis-video', DATIS_URI . '/inc/elementor/widgets/datis_video/css/video.css', [], DATIS_VER, 'all');
            wp_enqueue_script('datis-video', DATIS_URI . '/inc/elementor/widgets/datis_video/js/video.js', ['jquery'], DATIS_VER, true);
        }
    }
}

← 返回文件管理器