Complete view and hide video ad section

Raccoon254 · Jul 6, 2024 · 320ed19 · 320ed19
1 parent 7ced0ef
commit 320ed19
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/app/Livewire/VideoAd.php b/app/Livewire/VideoAd.php
@@ -7,6 +7,24 @@
 
 class VideoAd extends Component
 {
+    public $status;
+    public function mount(): void
+    {
+        $this->status = session('videoStatus', 'hidden');
+    }
+
+    public function closeVideo(): void
+    {
+        $this->status = 'hidden';
+        session(['videoStatus' => 'hidden']);
+    }
+
+    public function showVideo(): void
+    {
+        $this->status = 'visible';
+        session(['videoStatus' => 'visible']);
+    }
+
     public function render(): View
     {
         return view('livewire.video-ad');

diff --git a/resources/views/livewire/video-ad.blade.php b/resources/views/livewire/video-ad.blade.php
@@ -1,3 +1,22 @@
 <div>
-    {{-- The Master doesn't talk, he acts. --}}
+    @guest
+        <div class="{{ $status }}">
+            <div class="center p-5 md:pt-12 w-full">
+                <div class="max-w-3xl relative rounded-2xl ring ring-gray-300 border overflow-clip">
+                    <video class="w-full" autoplay loop muted>
+                        <source src="{{ asset('video/ad.mp4') }}" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                    <button data-tip="Close Video Section" class="absolute tooltip tooltip-left top-2 right-2 bg-white btn btn-ghost btn-circle btn-xs hover:text-white hover:border border-red-400 text-red-500 hover:bg-red-600 shadow-md" wire:click="closeVideo">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        @if($status == 'hidden')
+            <div class="w-full flex justify-start mt-5 px-10">
+                <button class="btn btn-ghost ring-1 ring-green-200 border border-gray-300 mb-1 btn-sm" wire:click="showVideo">Show Video</button>
+            </div>
+        @endif
+    @endguest
 </div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -2,19 +2,9 @@
     <x-slot name="title">
         Home - Premium Essay Writing Services for College Students
     </x-slot>
-    @guest
-        <div class="video-ad center p-5 md:pt-12 w-full">
-            <div class="max-w-3xl relative rounded-2xl ring ring-gray-300 border overflow-clip">
-                <video class="w-full" autoplay loop muted>
-                    <source src="{{ asset('video/ad.mp4') }}" type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
-                <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
-                    <i class="fas fa-times text-red-500"></i>
-                </button>
-            </div>
-        </div>
-    @endguest
+
+    <livewire:video-ad/>
+
     <div class="bg-gray-50">
         <div class="py-12 px-4 sm:px-6 lg:px-8">
             <div class="flex px-1 sm:px-4 lg:px-8 flex-col md:flex-row items-center justify-between">