feat: Add Meilisearch full-text search with autocomplete and filters
- Add Meilisearch v1.6 service to docker-compose.yml - Create search indexer with batch and incremental indexing - Build search API with filters (category, duration, date, content type) - Add autocomplete API with trending query suggestions - Implement modern search UI with real-time autocomplete - Add db_search_queries table for tracking trending searches - Document setup and usage in docs/MEILISEARCH.md Features: - Blazing fast search (5-15ms typical) - Advanced filters and faceted search - Real-time autocomplete suggestions - Trending queries tracking - Responsive pagination - Production-ready with proper error handling
This commit is contained in:
Krystie
+303
-54
@@ -3,20 +3,10 @@ if (!defined('_ISVALID')) define('_ISVALID', true);
|
||||
include_once 'f_core/config.core.php';
|
||||
|
||||
$search_query = $_GET['q'] ?? '';
|
||||
$videos = [];
|
||||
|
||||
if ($search_query) {
|
||||
$sql = "SELECT vf.*, au.usr_user as username
|
||||
FROM db_videofiles vf
|
||||
LEFT JOIN db_accountuser au ON vf.usr_id = au.usr_id
|
||||
WHERE (vf.file_title LIKE ? OR vf.file_description LIKE ?)
|
||||
AND vf.privacy = 'public' AND vf.approved = 1
|
||||
ORDER BY vf.upload_date DESC
|
||||
LIMIT 20";
|
||||
|
||||
$search_term = '%' . $search_query . '%';
|
||||
$videos = $class_database->execute($sql, [$search_term, $search_term]);
|
||||
}
|
||||
$page = max(1, intval($_GET['page'] ?? 1));
|
||||
$category = $_GET['category'] ?? '';
|
||||
$duration = $_GET['duration'] ?? '';
|
||||
$sort = $_GET['sort'] ?? 'upload_date';
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
@@ -30,70 +20,329 @@ if ($search_query) {
|
||||
.container { max-width: 1200px; margin: 0 auto; }
|
||||
.header { text-align: center; margin-bottom: 40px; }
|
||||
.logo img { max-height: 50px; }
|
||||
.search-form { max-width: 600px; margin: 0 auto 40px auto; }
|
||||
.search-input { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 25px; font-size: 16px; }
|
||||
.search-btn { padding: 15px 30px; background: #007bff; color: white; border: none; border-radius: 25px; margin-left: 10px; cursor: pointer; }
|
||||
.search-form { max-width: 800px; margin: 0 auto 30px auto; position: relative; }
|
||||
.search-input-wrapper { position: relative; }
|
||||
.search-input { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 25px; font-size: 16px; box-sizing: border-box; }
|
||||
.search-btn { padding: 15px 30px; background: #007bff; color: white; border: none; border-radius: 25px; margin-top: 10px; cursor: pointer; }
|
||||
.search-btn:hover { background: #0056b3; }
|
||||
|
||||
/* Autocomplete */
|
||||
.autocomplete-suggestions {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
.autocomplete-suggestions.visible { display: block; }
|
||||
.autocomplete-item {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.autocomplete-item:hover { background: #f8f9fa; }
|
||||
.autocomplete-item:last-child { border-bottom: none; }
|
||||
|
||||
/* Filters */
|
||||
.filters { max-width: 800px; margin: 0 auto 30px auto; display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.filter-group { flex: 1; min-width: 150px; }
|
||||
.filter-label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #555; }
|
||||
.filter-select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
|
||||
|
||||
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.video-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.video-thumb { width: 100%; height: 180px; background: #e9ecef; display: flex; align-items: center; justify-content: center; color: #6c757d; }
|
||||
.video-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.2s; cursor: pointer; }
|
||||
.video-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
|
||||
.video-thumb { width: 100%; height: 180px; background: #e9ecef; display: flex; align-items: center; justify-content: center; color: #6c757d; position: relative; }
|
||||
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; }
|
||||
.video-info { padding: 15px; }
|
||||
.video-title { margin: 0 0 8px 0; font-size: 16px; font-weight: 500; }
|
||||
.video-meta { color: #666; font-size: 14px; }
|
||||
.video-title { margin: 0 0 8px 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
|
||||
.video-meta { color: #666; font-size: 14px; line-height: 1.6; }
|
||||
.nav-links { text-align: center; margin-bottom: 30px; }
|
||||
.nav-links a { margin: 0 15px; color: #007bff; text-decoration: none; }
|
||||
.nav-links a:hover { text-decoration: underline; }
|
||||
|
||||
/* Pagination */
|
||||
.pagination { text-align: center; margin-top: 40px; }
|
||||
.pagination a, .pagination span { display: inline-block; padding: 10px 15px; margin: 0 5px; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #007bff; }
|
||||
.pagination span.current { background: #007bff; color: white; border-color: #007bff; }
|
||||
.pagination a:hover { background: #f8f9fa; }
|
||||
|
||||
.results-info { max-width: 800px; margin: 0 auto 20px auto; color: #666; font-size: 14px; }
|
||||
.loading { text-align: center; padding: 40px; color: #666; }
|
||||
.no-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<img src="/f_scripts/fe/img/logo-header-blue.svg" alt="EasyStream">
|
||||
<img src="/f_scripts/fe/img/logo-header-blue.svg" alt="EasyStream" style="max-height: 50px;">
|
||||
<h1>Search Videos</h1>
|
||||
</div>
|
||||
|
||||
<form class="search-form" method="get">
|
||||
<input type="text" name="q" class="search-input" value="<?php echo htmlspecialchars($search_query); ?>" placeholder="Search for videos...">
|
||||
<form class="search-form" method="get" id="searchForm">
|
||||
<div class="search-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
id="searchInput"
|
||||
class="search-input"
|
||||
value="<?php echo htmlspecialchars($search_query); ?>"
|
||||
placeholder="Search for videos..."
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="autocomplete-suggestions" id="autocompleteSuggestions"></div>
|
||||
</div>
|
||||
<button type="submit" class="search-btn">Search</button>
|
||||
</form>
|
||||
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Category</label>
|
||||
<select name="category" class="filter-select" id="categoryFilter">
|
||||
<option value="">All Categories</option>
|
||||
<option value="entertainment" <?php echo $category === 'entertainment' ? 'selected' : ''; ?>>Entertainment</option>
|
||||
<option value="education" <?php echo $category === 'education' ? 'selected' : ''; ?>>Education</option>
|
||||
<option value="gaming" <?php echo $category === 'gaming' ? 'selected' : ''; ?>>Gaming</option>
|
||||
<option value="music" <?php echo $category === 'music' ? 'selected' : ''; ?>>Music</option>
|
||||
<option value="news" <?php echo $category === 'news' ? 'selected' : ''; ?>>News</option>
|
||||
<option value="sports" <?php echo $category === 'sports' ? 'selected' : ''; ?>>Sports</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Duration</label>
|
||||
<select name="duration" class="filter-select" id="durationFilter">
|
||||
<option value="">Any Duration</option>
|
||||
<option value="under_1min" <?php echo $duration === 'under_1min' ? 'selected' : ''; ?>>Under 1 minute</option>
|
||||
<option value="1_5min" <?php echo $duration === '1_5min' ? 'selected' : ''; ?>>1-5 minutes</option>
|
||||
<option value="5_10min" <?php echo $duration === '5_10min' ? 'selected' : ''; ?>>5-10 minutes</option>
|
||||
<option value="10_20min" <?php echo $duration === '10_20min' ? 'selected' : ''; ?>>10-20 minutes</option>
|
||||
<option value="over_20min" <?php echo $duration === 'over_20min' ? 'selected' : ''; ?>>Over 20 minutes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Sort By</label>
|
||||
<select name="sort" class="filter-select" id="sortFilter">
|
||||
<option value="upload_date" <?php echo $sort === 'upload_date' ? 'selected' : ''; ?>>Upload Date</option>
|
||||
<option value="view_count" <?php echo $sort === 'view_count' ? 'selected' : ''; ?>>View Count</option>
|
||||
<option value="like_count" <?php echo $sort === 'like_count' ? 'selected' : ''; ?>>Likes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="/">← Home</a>
|
||||
<a href="browse.php">Browse All</a>
|
||||
<a href="upload.php">Upload Video</a>
|
||||
</div>
|
||||
|
||||
<?php if ($search_query): ?>
|
||||
<h2>Search Results for "<?php echo htmlspecialchars($search_query); ?>"</h2>
|
||||
<?php endif; ?>
|
||||
<div class="results-info" id="resultsInfo"></div>
|
||||
|
||||
<div class="video-grid">
|
||||
<?php if ($videos && count($videos) > 0): ?>
|
||||
<?php foreach ($videos as $video): ?>
|
||||
<div class="video-card">
|
||||
<div class="video-thumb">
|
||||
📹 Video Thumbnail
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3 class="video-title"><?php echo htmlspecialchars($video['file_title']); ?></h3>
|
||||
<div class="video-meta">
|
||||
By: <?php echo htmlspecialchars($video['username'] ?: 'Unknown'); ?><br>
|
||||
Views: <?php echo number_format($video['file_views'] ?: 0); ?><br>
|
||||
Duration: <?php echo gmdate("H:i:s", $video['file_duration'] ?: 0); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php elseif ($search_query): ?>
|
||||
<div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
|
||||
<div class="video-grid" id="resultsContainer">
|
||||
<?php if (!$search_query): ?>
|
||||
<div class="no-results">
|
||||
<h3>🔍 Search for Videos</h3>
|
||||
<p>Enter keywords to find videos you're looking for</p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="loading">Searching...</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="pagination" id="paginationContainer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Autocomplete functionality
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const suggestionsDiv = document.getElementById('autocompleteSuggestions');
|
||||
let debounceTimer;
|
||||
|
||||
searchInput.addEventListener('input', function() {
|
||||
clearTimeout(debounceTimer);
|
||||
const query = this.value.trim();
|
||||
|
||||
if (query.length < 2) {
|
||||
suggestionsDiv.classList.remove('visible');
|
||||
return;
|
||||
}
|
||||
|
||||
debounceTimer = setTimeout(() => {
|
||||
fetch('/api/search_autocomplete.php?q=' + encodeURIComponent(query))
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success && data.suggestions.length > 0) {
|
||||
suggestionsDiv.innerHTML = data.suggestions.map(s =>
|
||||
`<div class="autocomplete-item" data-suggestion="${s}">${s}</div>`
|
||||
).join('');
|
||||
suggestionsDiv.classList.add('visible');
|
||||
} else {
|
||||
suggestionsDiv.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Click suggestion
|
||||
suggestionsDiv.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('autocomplete-item')) {
|
||||
searchInput.value = e.target.dataset.suggestion;
|
||||
suggestionsDiv.classList.remove('visible');
|
||||
document.getElementById('searchForm').submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Close suggestions when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target)) {
|
||||
suggestionsDiv.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
|
||||
// Filter change triggers search
|
||||
document.querySelectorAll('.filter-select').forEach(select => {
|
||||
select.addEventListener('change', function() {
|
||||
if (searchInput.value.trim()) {
|
||||
performSearch(1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Perform search on page load if query exists
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('q')) {
|
||||
performSearch(<?php echo $page; ?>);
|
||||
}
|
||||
});
|
||||
|
||||
function performSearch(page = 1) {
|
||||
const query = searchInput.value.trim();
|
||||
if (!query) return;
|
||||
|
||||
const category = document.getElementById('categoryFilter').value;
|
||||
const duration = document.getElementById('durationFilter').value;
|
||||
const sort = document.getElementById('sortFilter').value;
|
||||
|
||||
const params = new URLSearchParams({
|
||||
q: query,
|
||||
page: page,
|
||||
limit: 20
|
||||
});
|
||||
|
||||
if (category) params.append('category', category);
|
||||
if (duration) params.append('duration', duration);
|
||||
if (sort) params.append('sort', sort);
|
||||
|
||||
document.getElementById('resultsContainer').innerHTML = '<div class="loading">Searching...</div>';
|
||||
|
||||
fetch('/api/search.php?' + params.toString())
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
displayResults(data.data);
|
||||
displayPagination(data.data, page);
|
||||
} else {
|
||||
document.getElementById('resultsContainer').innerHTML =
|
||||
'<div class="no-results"><h3>Error</h3><p>' + data.error + '</p></div>';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('resultsContainer').innerHTML =
|
||||
'<div class="no-results"><h3>Error</h3><p>Failed to perform search. Please try again.</p></div>';
|
||||
});
|
||||
}
|
||||
|
||||
function displayResults(data) {
|
||||
const container = document.getElementById('resultsContainer');
|
||||
const info = document.getElementById('resultsInfo');
|
||||
|
||||
info.textContent = `Found ${data.total.toLocaleString()} results in ${data.processing_time_ms}ms`;
|
||||
|
||||
if (data.results.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="no-results">
|
||||
<h3>No videos found</h3>
|
||||
<p>Try different search terms or <a href="browse.php">browse all videos</a></p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
|
||||
<h3>Search for Videos</h3>
|
||||
<p>Enter keywords to find videos you're looking for</p>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = data.results.map(video => `
|
||||
<div class="video-card" onclick="location.href='${video.url}'">
|
||||
<div class="video-thumb">
|
||||
<img src="${video.thumbnail}" alt="${video.title}" onerror="this.style.display='none'; this.parentElement.innerHTML='📹 Video'">
|
||||
<div class="video-duration">${formatDuration(video.duration)}</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3 class="video-title">${escapeHtml(video.title)}</h3>
|
||||
<div class="video-meta">
|
||||
By: ${escapeHtml(video.username)}<br>
|
||||
${video.view_count.toLocaleString()} views • ${video.like_count.toLocaleString()} likes<br>
|
||||
${new Date(video.upload_date * 1000).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function displayPagination(data, currentPage) {
|
||||
const container = document.getElementById('paginationContainer');
|
||||
const totalPages = Math.ceil(data.total / data.limit);
|
||||
|
||||
if (totalPages <= 1) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
|
||||
if (currentPage > 1) {
|
||||
html += `<a href="#" onclick="performSearch(${currentPage - 1}); return false;">← Previous</a>`;
|
||||
}
|
||||
|
||||
for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
|
||||
if (i === currentPage) {
|
||||
html += `<span class="current">${i}</span>`;
|
||||
} else {
|
||||
html += `<a href="#" onclick="performSearch(${i}); return false;">${i}</a>`;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentPage < totalPages) {
|
||||
html += `<a href="#" onclick="performSearch(${currentPage + 1}); return false;">Next →</a>`;
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
|
||||
if (h > 0) {
|
||||
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user