WordPress

{% extends 'membership/layout.html.twig' %}

{% block title %}Recently Viewed{% endblock %}

 {% block contributor_body %}
     <div class="app_main_inner">
         <ul class="member_page_tabs">
             <li><a href="{{ path('membershp_membership_index') }}">Shopping Basket ({{ cartItemsCount }})</a></li>
             <li><a href="{{ path('membershp_download') }}">Purchase History ({{ invoiceItemsCount }})</a></li>
             <li class="current"><a href="">Recently Viewed ({{ stockRecentViews|length }})</a></li>
         </ul>

         <div class="alert alert-success" style="display: none"></div>

         <div class="user_container">
             <div class="card_header">
                 <h3 class="card_title float-left">Recently viewed stock</h3>
                 <a href="{{ path('membershp_clear_recent') }}" class="clear_items float-right" id="clear_recent_views">Clear all</a>
             </div>

             <div class="tab_header">
                 <div class="tab_header_left">
                     <ul class="global_tabs">
                         <li class="active">
                             <a class="nav-link stocks_recent_tabs" id="to_photos_link" data-toggle="tab" href="#photos">Images</a>
                         </li>
                         <li>
                             <a class="nav-link stocks_recent_tabs" data-toggle="tab" id="to_videos_link" href="#videos">Videos</a>
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="tab-content">
                 <div class="tab_pane history_stock fade show active" id="photos">
                     <div class="recently_viewed">
                         {% for stockRecent in stockRecentViews %}
                             {% set stock = stockRecent.stock %}
                             {% if stock.type.title == "photo" %}
                                 <a href="{{ path('image_details', {id:stock.id}) }}" class="recently_viewed_stock">
                                     <img src="{{asset('uploads/stock/'~ stock.thumbName)}}" alt="">
                                 </a>
                             {% endif %}

                         {% endfor %}
                     </div>
                 </div>
                 <div class="tab_pane history_stock fade" id="videos">
                     <div class="recently_viewed">
                         {% for stockRecent in stockRecentViews %}
                             {% set stock = stockRecent.stock %}
                             {% if stock.type.title == "video" %}
                                <a href="{{ path('image_details', {id:stock.id}) }}" class="recently_viewed_stock">
                                    <video width="100%" controls muted>
                                        <source src="{{ asset('uploads/stock/')~ stock.previewName }}" type="video/mp4">
                                        Your browser does not support videos.
                                    </video>
                                </a>
                             {% endif %}

                         {% endfor %}
                     </div>
                 </div>
             </div>
         </div>
     </div>
 {% endblock %}
{% block footer_js %}
    <script type='text/javascript' src='{{asset('bundles/fosjsrouting/js/router.js')}}'></script>
    <script>
        let photosFlag = true;
        let videosFlag = false;

        $("#to_photos_link").click(function (e) {
            photosFlag = true;
            videosFlag = false;
        });

        $("#to_videos_link").click(function (e) {
            photosFlag = false;
            videosFlag = true;
        });

        $("#clear_recent_views").click(function (e) {
            e.preventDefault();

            let url = $(this).attr("href");

            let type = photosFlag ? "photo" : "video";
            let formData = new FormData();
            formData.append("type", type);

            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function (data, status) {
                    let message = data.message;

                    sessionStorage.setItem("message", message);
                    videosFlag ? sessionStorage.setItem("video", videosFlag) : null;
                    location.reload();
                }

            });
        });

        window.onload = function () {
            if (sessionStorage.getItem("message")){
                let message = sessionStorage.getItem("message");
                let video = sessionStorage.getItem("video");

                sessionStorage.removeItem("message");

                $(".alert-success").text(message).show();

                if (sessionStorage.getItem("video")){
                    sessionStorage.removeItem("video");
                    $("#to_videos_link").trigger("click");
                    sessionStorage.removeItem("message");
                }

            }
        }

    </script>
{% endblock %}