Add more filters in the search

objects/bootGrid.php

@@ -3,7 +3,8 @@ class BootGrid
 {
     public static function getSqlFromPost($searchFieldsNames = [], $keyPrefix = "", $alternativeOrderBy = "", $doNotSearch=false, $FIND_IN_SET = "")
     {
-        if (empty($doNotSearch)) {
+        global $global;
+        if (empty($doNotSearch) && empty($global['doNotSearch']) ) {
             $sql = self::getSqlSearchFromPost($searchFieldsNames);
         } else {
             $sql = '';

plugin/MobileYPT/getConfiguration.json.php

@@ -2,7 +2,12 @@
 header('Access-Control-Allow-Headers: Content-Type');
 header('Content-Type: application/json');
 require_once dirname(__FILE__) . '/../../videos/configuration.php';
-
+/*
+AVideoPlugin::getObjectData("Cache");
+ObjectYPT::deleteALLCache();
+ObjectYPT::deleteAllSessionCache();
+Cache::deleteAllCache();
+*/
 allowOrigin();
 $objMM = AVideoPlugin::getObjectData("MobileYPT");
 
@@ -113,6 +118,6 @@ if (AVideoPlugin::isEnabledByName("TopMenu")) {
     }
 }
 $str = _json_encode($objMM);
-_error_log('getConfiguration line strlen='.strlen($str));
+_error_log('getConfiguration strlen='.strlen($str));
 echo $str;
 exit;

plugin/PlayerSkins/pipButton.js

@@ -5,7 +5,7 @@ if (document.pictureInPictureEnabled) {
         console.log('Picture-in-Picture visibilitychange', document.visibilityState);
         try {
             if (document.visibilityState === 'hidden') {
-                if (!player.paused()) {
+                if (!player.paused() && !document.pictureInPictureElement) {
                     player.requestPictureInPicture();
                 }
             } else {

view/css/navbar.css

@@ -23,18 +23,31 @@
 }
 #searchForm {
     width: 100%;
-    margin-left: 5px;
+    margin: 0 5px;
     white-space: nowrap;
 }
-#searchForm .btn {
+#searchForm > span.input-group-prepend > button{
-    border-top-left-radius: 0;
+
-    border-bottom-left-radius: 0;
+    border-right-width: 0;
+}
+#searchForm > span.input-group-append > button{
+
     border-left-width: 0;
 }
-#searchForm input {
+
+#searchForm input[name="search"] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right-width: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-width: 0;
+    float: unset;
+    margin-left: -5px;
+    margin-right: -5px;
+}
+#filterDropdown.show .dropdown-menu {
+    display: block;
 }
 
 #rightProfileButton{
@@ -91,7 +104,10 @@
 }
 @media (max-width : 767px) {
     #searchForm {
-        padding-left: 10px;
+        margin: 0;
+        display: flex;
+        justify-content: center; /* center horizontally */
+        align-items: center; /* center vertically */
     }
     #rightLoginButton, #rightProfileButton{
         margin-right: 5px;
@@ -113,7 +129,7 @@
     }
 
     #mysearch{
-        /* width: 100%; */
+        width: 100%;
         display: none;
         position: absolute;
         right: 0;
@@ -124,6 +140,10 @@
 
     }
 
+    #searchFormInput {
+        flex: 1;
+    }
+
     #myNavbar{
         display: none;
         position: absolute;
@@ -162,10 +182,6 @@
     #navbarRegularButtons span.hidden-mdx {
         max-width: 100vw;
     }
-    .globalsearchfield {
-        width: 90% !important;
-    }
-
     .searchli {
         width: 100%;
         margin-right: 0;

view/include/navbarSearch.php

@@ -1,21 +1,174 @@
 <li class="nav-item" style="margin-right: 0px; " id="searchNavItem">
     <div class="navbar-header">
-        <button type="button" id="buttonSearch" class="visible-xs navbar-toggle btn btn-default navbar-btn faa-parent animated-hover animate__animated animate__bounceIn" data-toggle="collapse" data-target="#mysearch" style="padding: 6px 12px;">
+
-            <span class="fa fa-search faa-shake"></span>
+        <div class="navbar-header">
-        </button>
+            <button type="button" id="buttonSearch" class="visible-xs navbar-toggle btn btn-default navbar-btn faa-parent animated-hover animate__animated animate__bounceIn" data-toggle="collapse" data-target="#mysearch" style="padding: 6px 12px;">
+                <span class="fa fa-search faa-shake"></span>
+            </button>
+        </div>
+        <div class="input-group"  id="mysearch">
+            <form class="navbar-form form-inline input-group" role="search" id="searchForm"  action="<?php echo $global['webSiteRootURL']; ?>" style="padding: 0;">
+                <span class="input-group-prepend">
+                    <button class="btn btn-default btn-outline-secondary border-right-0 border py-2 faa-parent animated-hover" type="submit"  id="buttonSearch" data-toggle="collapse" data-target="#mysearch" >
+                        <i class="fas fa-search faa-shake"></i>
+                    </button>
+                </span>
+                <input class="form-control globalsearchfield" type="text" value="<?php
+                if (!empty($_GET['search'])) {
+                    echo htmlentities($_GET['search']);
+                }
+                ?>" name="search" placeholder="<?php echo __("Search"); ?>" id="searchFormInput">
+                <span class="input-group-append">
+
+                    <button type="button" id="filterButton" class="btn btn-default navbar-btn dropdown-toggle faa-parent animated-hover animate__animated animate__bounceIn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="fas fa-sort-down"></i>
+                    </button>
+
+                </span>
+                <div class="dropdown" id="filterDropdown">
+                    <div class="panel panel-default dropdown-menu" aria-labelledby="filterButton" style="margin: 0;">
+                        <div class="panel-heading">
+                            Search in:
+                        </div>
+                        <div class="panel-body">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="v.title" id="filterCheckTitle" name="searchFieldsNames[]">
+                                <label class="form-check-label" for="filterCheckTitle">
+                                    Video Title
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="v.description" id="filterCheckDesc" name="searchFieldsNames[]">
+                                <label class="form-check-label" for="filterCheckDesc">
+                                    Video Description
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="c.name" id="filterCheckChannel" name="searchFieldsNames[]">
+                                <label class="form-check-label" for="filterCheckChannel">
+                                    Channel Name
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="c.description" id="filterCheckChannelDesc" name="searchFieldsNames[]">
+                                <label class="form-check-label" for="filterCheckChannelDesc">
+                                    Channel Description
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="v.id" id="filterCheckVideoId" name="searchFieldsNames[]">
+                                <label class="form-check-label" for="filterCheckVideoId">
+                                    Video ID
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="v.filename" id="filterCheckFilename" name="searchFieldsNames[]">
+                                <label class="form-check-label" for="filterCheckFilename">
+                                    Video Filename
+                                </label>
+                            </div>
+                        </div>
+                        <div class="panel-heading">
+                            Filter by category:
+                        </div>
+                        <div class="panel-body">
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" id="search_category0" name="catName" checked value="">
+                                <label class="form-check-label" for="search_category0">
+                                    <i class="fas fa-list"></i> All Categories
+                                </label>
+                            </div>
+                            <?php
+                            $global['doNotSearch'] = 1;
+                            $categories_edit = Category::getAllCategories(false, true);
+                            $global['doNotSearch'] = 0;
+                            foreach ($categories_edit as $key => $value) {
+                                ?>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="radio" value="<?php echo $value['clean_name']; ?>" id="search_category<?php echo $value['id']; ?>" name="catName">
+                                    <label class="form-check-label" for="search_category<?php echo $value['id']; ?>">
+                                        <i class="<?php echo $value['iconClass']; ?>"></i> <?php echo __($value['hierarchyAndName']); ?>
+                                    </label>
+                                </div>
+                                <?php
+                            }
+                            ?>
+                        </div>
+                    </div>
+                </div>
+            </form>
+
+        </div>
+
     </div>
-    <div class="input-group"  id="mysearch">
+</li> 
-        <form class="navbar-form form-inline input-group" role="search" id="searchForm"  action="<?php echo $global['webSiteRootURL']; ?>" style="padding: 0;">
+<script>
-            <input class="form-control globalsearchfield" type="text" value="<?php
+    var filterCheckboxes;
-            if (!empty($_GET['search'])) {
+    var categoryRadios;
-                echo htmlentities($_GET['search']);
+    $(document).ready(function () {
-            }
+
-            ?>" name="search" placeholder="<?php echo __("Search"); ?>" id="searchFormInput">
+        // get references to the checkboxes and radio buttons
-            <span class="input-group-append">
+        filterCheckboxes = $('input[type="checkbox"][id^="filterCheck"]');
-                <button class="btn btn-default btn-outline-secondary border-left-0 border  py-2 faa-parent animated-hover" type="submit">
+        categoryRadios = $('input[type="radio"][id^="search_category"]');
-                    <i class="fas fa-search faa-shake"></i>
+
-                </button>
+        // add event listeners to the checkboxes and radio buttons
-            </span>
+        filterCheckboxes.on('change', function () {
-        </form>
+            // get an array of the checked checkbox values
-    </div>
+            const checkedValues = filterCheckboxes.filter(':checked').map(function () {
-</li>
+                return this.value;
+            }).get();
+
+            // store the checked values in a cookie
+            Cookies.set('searchFilters', JSON.stringify(checkedValues), {expires: 365, path: '/'});
+            setSearchFilterIcon();
+        });
+
+        categoryRadios.on('change', function () {
+            // get the value of the checked radio button
+            const checkedValue = categoryRadios.filter(':checked').val();
+
+            // store the checked value in a cookie
+            Cookies.set('searchCategory', checkedValue, {expires: 365, path: '/'});
+            setSearchFilterIcon();
+        });
+        // load the saved search filters from the cookies
+        const savedFilters = Cookies.get('searchFilters');
+        const savedCategory = Cookies.get('searchCategory');
+
+        if (savedFilters) {
+            // parse the saved filters from JSON and check the corresponding checkboxes
+            const checkedValues = JSON.parse(savedFilters);
+
+            filterCheckboxes.each(function () {
+                this.checked = checkedValues.includes(this.value);
+            });
+        }
+
+        if (savedCategory) {
+            // check the corresponding radio button
+            categoryRadios.filter(`[value="${savedCategory}"]`).prop('checked', true);
+        } else {
+            // check the default radio button
+            categoryRadios.filter('#search_category0').prop('checked', true);
+        }
+        setSearchFilterIcon();
+
+        $('#filterButton').click(function () {
+            $('#filterDropdown').toggleClass('show');
+        });
+    });
+    function setSearchFilterIcon() {
+        // check if no filter checkboxes are checked and search_category0 is checked
+        if (filterCheckboxes.filter(':checked').length === 0 && $('#search_category0').is(':checked')) {
+            // add the text-muted icon to the filterButton
+            $('#filterButton i').removeClass('fa-filter');
+            $('#filterButton i').addClass('fa-sort-down');
+        } else {
+            // remove the text-muted icon from the filterButton
+            $('#filterButton i').removeClass('fa-sort-down');
+            $('#filterButton i').addClass('fa-filter');
+        }
+    }
+
+</script>
+