WordPress

{% extends 'base.html.twig' %}
{% block header_class %}{% endblock %}

{% block title %}Sura Images!{% endblock %}

{% block hero_banner %}

{% endblock %}
{% block header %}
    {% include 'dashboard/header.html.twig' %}
{% endblock %}

{% block body %}
    {# @var helper \App\Service\Helper #}

    <div class="app_wrapper search_landing">
        {% set type = _type.title  %}
        {%  if type is same as('photo') %}
            {% include 'search/_sidebar.html.twig' %}
        {% else %}
            {% include 'search/_sidebarvideo.html.twig' %}
        {% endif  %}

        <div class="app_content listing_page">
{#            {% set type = stocks|first.type.title  %}#}
            <div class="stock_list_wrap">
                <h3 class="sr_heading_title">
                    {% if search_keyword is defined%}
                       Search result for: {{ search_keyword }}
                    {% else %}
                        {% set type = _type.title  %}
                        {%  if type is same as('photo') %}
                            Images
                        {% else %}
                            Videos
                        {% endif  %}
                    {% endif  %}
                </h3>
                <ul class="photo_grid" id="columns">
                    {# @var stock \App\Entity\Stock #}
                    {% for stock in stocks %}
                        {% if stock.type.title|lower == 'video' %}
                            {% if stock.searchPageVideoName %}
                                <li class="stock_item_one file_container video" data-same-model-url="{{ path('home_model_stocks_filter',{'id':stock.id}) }}" >
                                    {% set src = loop.index < 15 ? asset('uploads/stock/'~ stock.searchPageVideoName) : asset('/images/real-gif.gif') %}
                                    <video width="100%"
                                           class="lzy_img"
                                            {% if loop.index >= 15 %} preload="none" {% endif %}
                                           {% if loop.index >= 15 %} playsinline {% endif %}
                                            muted
                                           data-src="{{ asset('uploads/stock/'~ stock.searchPageVideoName) }}"
                                           {% if loop.index >= 15 %} poster="{{ src }}" {% endif %}
                                           loop>
                                        <source src="{{ src }}"  type="video/mp4">
                                        Your browser does not support videos.
                                    </video>
                                    <a href="{{ path('image_details', {id:stock.id}) }}" class="container_link">
                                        <span class="file_container_title">{{ stock.title }}</span>
                                        <span class="file-container__actions">
                                        {% if stock.licenceType == 'Right Managed' %}
                                            {% if stock.type.title == "video" %}
                                                <button class="button-circle licence_type" title="License Type">RR</button>
                                                    {% else %}
                                                <button class="button-circle licence_type" title="License Type">RM</button>
                                            {% endif %}
                                                    {% else %}
                                            <button class="button-circle licence_type" title="License Type">RF</button>
                                        {% endif %}
                                        <button class="button-circle cart_btn view_image_details" onclick="window.location.href = '{{ path('image_details', {id:stock.id}) }}';" title="Add to Shopping Cart"></button>
                                        <button class="button-circle view_btn" title="View More Details"></button>
                                    </span>
                                    </a>
                                    <a data-fancybox data-caption="{{ stock.title }}" href="{{asset('uploads/stock/'~ stock.previewName)}}" class="button_zoom"></a>
                                </li>
                            {% endif %}
                        {% else %}
                            <li class="stock_item_one file_container" data-same-model-url="{{ path('home_model_stocks_filter',{'id':stock.id}) }}">
                                {% set src = loop.index < 15 ? asset('uploads/stock/'~ stock.thumbName) : asset('/images/real-gif.gif') %}
                                <img data-src="{{ asset('uploads/stock/'~ stock.thumbName) }}" class="lzy_img" src="{{ src }}"  alt="">

                                <a href="{{ path('image_details', {id:stock.id}) }}" class="container_link">
                                    <span class="file_container_title">{{ stock.title }}</span>
                                    <span class="file-container__actions">
                                    {% if stock.licenceType == 'Right Managed' %}
                                        {% if stock.type.title == "video" %}
                                            <button class="button-circle licence_type" title="License Type">RR</button>
                                                {% else %}
                                            <button class="button-circle licence_type" title="License Type">RM</button>
                                        {% endif %}
                                                {% else %}
                                        <button class="button-circle licence_type" title="License Type">RF</button>
                                    {% endif %}
                                    <button class="button-circle cart_btn view_image_details" onclick="window.location.href = '{{ path('image_details', {id:stock.id}) }}';" title="Add to Shopping Cart"></button>
                                    <button class="button-circle view_btn" title="View More Details"></button>
                                </span>
                                </a>
                                <a data-fancybox data-caption="{{ stock.title }}" href="{{asset('uploads/stock/'~ stock.previewName)}}" class="button_zoom"></a>
                            </li>
                        {% endif %}
                    {% else %}
                        <p>No {{_type.title|capitalize}} found</p>
                    {% endfor %}

                </ul>
            </div>
        </div>
    </div>


    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/search_filter.js') }}"></script>
    <script>


        let search_page = "{{ search_page }}";

        switch (search_page) {
            case "type":
                filter_url_name = "search_elastica_type_search_filter";
                break;
            case "main_search":
                filter_url_name = "search_elastica_search_filter";
                break;
            case "category_search":
                filter_url_name = "search_elastica_category_search_filter";
                break;
            case "video_category_search":
                filter_url_name = "search_video_category";
                break;
            case "similar_stock_search":
                filter_url_name = "search_elastica_similar_stock_filter";
                break;
            case "same_shoot_search":
                filter_url_name = "search_elastica_same_shoot_stock_filter";
                break;
            case "contributor_stock_search":
                filter_url_name = "search_contributor_filter";
                break;
            default:
                filter_url_name = "search_elastica_type_search_filter";
        }

        let form = $(".form_sidebar_search");

        let license;
        let type;
        let orientation;
        let people;
        let category;
        let contributor;
        let is_exclusive;
        let search_category;
        let video_resolution;

        form.on("change", function () {
            filter = true;
            if (search_page === 'same_model_search'){
                license = form.find("[name='license']").val();
                type = form.find("[name='type']").val(); //image_type
                orientation = form.find("[name='orientation']").val();
                people = form.find("[name='people']").val();
                category = form.find("[name='category']").val();
                contributor = form.find("[name='contributor']").val();
                is_exclusive = form.find("[name='is_exclusive']:checked").length;
                video_resolution = form.find("[name='video_resolution']").val();

                let search_type = form.find("[name='search_type']").val(); //stock type

                $(".photo_grid").empty();

                let model_filter_url = '{{ model_filter_url is defined ? model_filter_url : "" }}'

                filterSameModel(model_filter_url);
            }
            else {
                let filter_cat = form.find("[name='category']").val()

                license = form.find("[name='license']").val();
                type = form.find("[name='type']").val();
                orientation = form.find("[name='orientation']").val();
                people = form.find("[name='people']").val();
                category = '{{ catId is defined ? catId : "" }}';
                category = category === "" ? filter_cat : category;
                contributor = form.find("[name='contributor']").val();
                is_exclusive = form.find("[name='is_exclusive']:checked").length;
                video_resolution = form.find("[name='video_resolution']").val();

                let search_type = form.find("[name='search_type']").val();
                search_category = search_page === 'category_search' ? category : form.find("[name='search_category']").val();

                $(".photo_grid").empty();
                $.ajax({
                    type: "GET",

                    url: Routing.generate(filter_url_name,{
                        // page: filter_page,
                        searchbar: (search_page !== 'similar_stock_search' || search_page !== 'same_shoot_search') ? '{{ search_keyword is defined ? search_keyword : "" }}' : null,
                        searchtype: (search_page !== 'similar_stock_search' || search_page !== 'same_shoot_search') ? '{{ _type.id }}' : null,
                        license: license,
                        type: type,
                        orientation: orientation,
                        people: people,
                        category: category,
                        search: (search_page !== 'similar_stock_search' || search_page !== 'same_shoot_search') ? '{{ search_keyword is defined ? search_keyword : "" }}' : null,
                        search_type: (search_page !== 'similar_stock_search' || search_page !== 'same_shoot_search') ? '{{ _type.id }}' : null,
                        contributor: contributor,
                        is_exclusive: is_exclusive,
                        search_category: search_category,
                        video_resolution: video_resolution,
                        title: '{{ title is defined ? title : null }}',
                        ajax:true,
                        id : '{{ id is defined ? id : null }}'
                    }),
                    success: function(data) {
                        $(".search_count").html(data.count);
                        $('.photo_grid').html(data.html);
                    },
                    error: function(data) {
                        //
                    }
                });
            }

        });

        function filterSameModel(url){

            let formData = new FormData();

            formData.append("license",license);
            formData.append("type",type);
            formData.append("orientation",orientation);
            formData.append("people",people);
            formData.append("category",category);
            formData.append("contributor",contributor);
            formData.append("is_exclusive",is_exclusive);


            $.post(
                url,
                {
                    license: license,
                    type: type,
                    orientation: orientation,
                    people: people,
                    category: category,
                    contributor: contributor,
                    is_exclusive: is_exclusive,
                    video_resolution: video_resolution,
                },
                function(data) {

                    // $(".search_count").html(data.count);
                    if (data.html.length > 0) {
                        $('.photo_grid').html(data.html);
                    }
                },);
        }

        let playFlag = false;
        const figure = $(".video").hover(hoverVideo, hideVideo);

        function hoverVideo(e) {
            $('video', this).get(0).play().then(()=> {
                playFlag = true;
            }).catch(error => {
                playFlag = false;
            });
        }

        function hideVideo(e) {
            if (playFlag)
                $('video', this).get(0).pause();
        }

    </script>
{% endblock %}