add help text for fullscreen with no controls

Author: scott grayson

dist/filament-lms.css

@@ -176,6 +176,10 @@
   margin-top: 1rem
 }
 
+.mt-2 {
+  margin-top: 0.5rem
+}
+
 .flex {
   display: flex
 }
@@ -371,6 +375,11 @@
   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1))
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale

resources/views/livewire/video-player.blade.php

@@ -1,5 +1,8 @@
 <div>
     <div class="vidstack-player-custom" wire:ignore id="target"></div>
+    <p class="text-sm text-gray-600 text-center mt-2">
+        Click to play/pause • Double click for fullscreen
+    </p> 
 </div>
 
 @assets
@@ -10,6 +13,7 @@
     .vidstack-player-custom {
         height: 80vh;
         max-width: calc(80vh * 16/9);
+        margin: 0 auto;
     }
 
     @if (! auth()->user()->is_admin)