Add type icons to downloads search page

app/Livewire/DownloadsSearch.php

@@ -5,15 +5,37 @@ namespace App\Livewire;
 use App\Models\Downloads;
 use Livewire\Component;
 use Livewire\WithPagination;
+use Livewire\Attributes\Url;
 
 class DownloadsSearch extends Component
 {
     use WithPagination;
 
+    #[Url(history: true)]
     public $fileSearch;
 
     public $order = 'created_at_desc';
 
+    public $options = [
+        'FHD'       => true,
+        'FHD 48fps' => true,
+    ];
+
+    public $isOpen = false;
+
+    // To toggle individual option selection
+    public function toggleOption($option)
+    {
+        $this->options[$option] = !$this->options[$option];
+        $this->resetPage();
+    }
+
+    // To toggle dropdown visibility
+    public function toggleDropdown()
+    {
+        $this->isOpen = !$this->isOpen;
+    }
+
     protected $queryString = [
         'fileSearch'    => ['except' => '', 'as' => 'fS'],
         'order'         => ['except' => '', 'as' => 'order'],
@@ -24,6 +46,29 @@ class DownloadsSearch extends Component
         $this->resetPage();
     }
 
+    // Map the selected options to database types
+    private function getSelectedTypes()
+    {
+        $types = [];
+
+        // Map the options to their corresponding database values
+        foreach ($this->options as $label => $selected) {
+            if ($selected) {
+                if ($label === 'FHD') {
+                    $types[] = 'FHD';
+                } elseif ($label === 'FHD 48fps') {
+                    $types[] = 'FHDi';
+                } elseif ($label === 'UHD' && auth()->user()->is_patreon) {
+                    $types[] = 'UHD';
+                } elseif ($label === 'UHD 48fps' && auth()->user()->is_patreon) {
+                    $types[] = 'UHDi';
+                }
+            }
+        }
+
+        return $types;
+    }
+
     public function clicked($downloadId)
     {
         $download = Downloads::find($downloadId);
@@ -36,6 +81,17 @@ class DownloadsSearch extends Component
         cache()->forget("episode_{$download->episode->id}_download_{$download->type}");
     }
 
+    public function mount() 
+    {
+        if (!auth()->user()->is_patreon) {
+            return;
+        }
+
+        // Add patreon options
+        $this->options['UHD'] = true;
+        $this->options['UHD 48fps'] = true;
+    }
+
     public function render()
     {
         $orderby = 'created_at';
@@ -72,7 +128,7 @@ class DownloadsSearch extends Component
         }
 
         $downloads = Downloads::when($this->fileSearch != '', fn ($query) => $query->where('url', 'like', '%'.$this->fileSearch.'%'))
-            ->when(!auth()->user()->is_patreon, fn ($query) => $query->whereIn('type', ['FHD', 'FHDi']))
+            ->whereIn('type', $this->getSelectedTypes())
             ->whereNotNull('size')
             ->orderBy($orderby, $orderdirection)
             ->paginate(20);

resources/views/livewire/downloads-search.blade.php

@@ -1,8 +1,8 @@
-<div class="py-3">
+<div class="py-3 relative">
-    <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[50%]">
+    <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%] relative z-10">
         <!-- Search Filter -->
-        <div class="p-4 sm:p-8 bg-white/30 dark:bg-neutral-950/40 shadow sm:rounded-lg backdrop-blur">
+        <div class="p-4 sm:p-8 bg-white/30 dark:bg-neutral-950/40 shadow sm:rounded-lg backdrop-blur relative z-100">
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 ">
 
                 <!-- Title -->
                 <div>
@@ -36,6 +36,44 @@
                     </div>
                 </div>
 
+                <div x-data="{ open: @entangle('isOpen') }" x-on:click.away="open = false"
+                    class="relative right-2 left-0 sm:left-2 transition-all">
+                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                        <i class="fa-solid fa-filter text-gray-500 dark:text-gray-400"></i>
+                    </div>
+                    <button type="button"
+                        class="inline-flex w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900"
+                        wire:click="toggleDropdown">
+                        Select Type
+                        <svg class="absolute -mr-1 h-5 w-5 text-gray-500 right-4 top-4"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                            aria-hidden="true">
+                            <path fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd" />
+                        </svg>
+                    </button>
+
+                    <!-- Dropdown Menu -->
+                    @if ($isOpen)
+                        <div x-show="open" x-transition @click.away="open = false"
+                            class="absolute mt-2 w-full rounded-lg bg-white dark:bg-neutral-900 border-[1px] border-gray-300 dark:border-neutral-600 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-[110]">
+                            <div class="py-1">
+                                @foreach ($options as $label => $selected)
+                                    <label
+                                        class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-neutral-800">
+                                        <input type="checkbox" wire:click="toggleOption('{{ $label }}')"
+                                            class="h-4 w-4 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                            {{ $selected ? 'checked' : '' }}>
+                                        <span class="ml-2 text-gray-900 dark:text-white">{{ $label }}</span>
+                                    </label>
+                                @endforeach
+                            </div>
+                        </div>
+                    @endif
+                </div>
+
+
                 <!-- Ordering -->
                 <div>
                     <div class="relative right-2 left-0 sm:left-2 transition-all">
@@ -56,7 +94,8 @@
             </div>
         </div>
     </div>
-    <div class="relative pt-5  mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white max-w-[100%] xl:max-w-[80%] 2xl:max-w-[50%]">
+    <div
+        class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%]">
         <div class="flex flex-col">
             <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                 <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
@@ -68,12 +107,13 @@
                             <div
                                 class="flex bg-white/30 dark:bg-neutral-950/40 backdrop-blur font-medium dark:border-neutral-500 border-b rounded-tl-lg rounded-tr-lg">
                                 <div class="flex-1 px-6 py-4 hidden sm:block">Title</div>
-                                <div class="w-28 px-6 py-4 hidden sm:block">Size</div>
+                                <div class="w-20 px-6 py-4 hidden text-center sm:block">Type</div>
-                                <div class="w-32 px-6 py-4 hidden sm:block">Date</div>
+                                <div class="w-28 px-6 py-4 hidden text-center sm:block">Size</div>
-                                <div class="w-32 px-6 py-4">Download</div>
+                                <div class="w-32 px-6 py-4 hidden text-center sm:block">Date</div>
+                                <div class="w-32 px-6 py-4 text-center">Download</div>
                             </div>
 
-                            @php 
+                            @php
                                 $dldomains = config('hstream.download_domain');
                                 $dlpdomains = config('hstream.download_domain_4k');
                             @endphp
@@ -91,35 +131,96 @@
                                         {{ $title }}
                                     </div>
 
+                                    <!-- Type -->
+                                    <div class="w-20 whitespace-nowrap flex justify-center">
+                                        <span class="block sm:hidden pr-2">
+                                            Type: 
+                                        </span>
+                                        <div class="flex justify-center">
+                                        @if ($download->type === 'FHD' || $download->type === 'FHDi')
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                                class="text-sky-500" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                class="icon icon-tabler icons-tabler-outline icon-tabler-badge-hd">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                                <path
+                                                    d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                                                <path d="M14 9v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z" />
+                                                <path d="M7 15v-6" />
+                                                <path d="M10 15v-6" />
+                                                <path d="M7 12h3" />
+                                            </svg>
+                                        @else
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                                class="text-rose-600" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                class="icon icon-tabler icons-tabler-outline icon-tabler-badge-4k">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                                <path
+                                                    d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                                                <path d="M7 9v2a1 1 0 0 0 1 1h1" />
+                                                <path d="M10 9v6" />
+                                                <path d="M14 9v6" />
+                                                <path d="M17 9l-2 3l2 3" />
+                                                <path d="M15 12h-1" />
+                                            </svg>
+                                        @endif
+
+                                        @if ($download->type === 'FHDi' || $download->type === 'UHDi')
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="text-yellow-600"
+                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                                stroke-linecap="round" stroke-linejoin="round">
+                                                <path
+                                                    d="M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z" />
+                                                <path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836" />
+                                                <path d="M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836" />
+                                            </svg>
+                                        @endif
+                                        </div>
+                                    </div>
+
                                     <!-- Size -->
-                                    <div class="w-28 whitespace-nowrap flex">
+                                    <div class="w-28 whitespace-nowrap flex justify-center">
                                         <span class="block sm:hidden">
-                                            Size: 
+                                            Size:
                                         </span>
                                         {{ $download->getFileSize() }}
                                     </div>
 
                                     <!-- Date -->
-                                    <div class="w-32 whitespace-nowrap flex">
+                                    <div class="w-32 whitespace-nowrap flex justify-center">
                                         <span class="block sm:hidden">
-                                            Date: 
+                                            Date:
                                         </span>
                                         {{ $download->created_at->format('Y-m-d') }}
                                     </div>
 
                                     <!-- Download -->
-                                    <div class="w-32 whitespace-nowrap">
+                                    <div class="w-32 whitespace-nowrap flex justify-center">
                                         @php
                                             if (in_array($download->type, ['FHD', 'FHDi'])) {
-                                                $downloadURL = $dldomains[array_rand($dldomains)].'/'.$download->url;
+                                                $downloadURL =
+                                                    $dldomains[array_rand($dldomains)] . '/' . $download->url;
                                             } else {
                                                 $now = \Illuminate\Support\Carbon::now();
-                                                $expire = \Illuminate\Support\Facades\Crypt::encryptString($now->addHours(6));
+                                                $expire = \Illuminate\Support\Facades\Crypt::encryptString(
-                                                $file = \Illuminate\Support\Facades\Crypt::encryptString('hentai/'.$download->url);
+                                                    $now->addHours(6),
-                                                $downloadURL = $dlpdomains[array_rand($dlpdomains)].'/download/'.$file.'/'.$expire;
+                                                );
+                                                $file = \Illuminate\Support\Facades\Crypt::encryptString(
+                                                    'hentai/' . $download->url,
+                                                );
+                                                $downloadURL =
+                                                    $dlpdomains[array_rand($dlpdomains)] .
+                                                    '/download/' .
+                                                    $file .
+                                                    '/' .
+                                                    $expire;
                                             }
                                         @endphp
-                                        <a href="{{ $downloadURL }}" wire:click="clicked({{ $download->id }})" download>
+                                        <a href="{{ $downloadURL }}" wire:click="clicked({{ $download->id }})"
+                                            download>
                                             <button id="dl-{{ $download->id }}"
                                                 class="group rounded-md bg-transparent border-[1px] border-white/20 shadow dark:text-white text-blac cursor-pointer flex justify-between items-center overflow-hidden transition-all w-[110px] h-[32px] mt-1 mb-1">
                                                 <div