refactor: fix controls for video player

Author: arabcoders

frontend/app/components/ShareVideoPlayer.vue

@@ -100,13 +100,13 @@
 
     <div
       v-if="active"
-      class="absolute inset-x-0 bottom-0 z-30 bg-linear-to-t from-black/40 via-black/10 to-transparent px-2.5 pb-2.5 pt-6 text-white transition-opacity duration-150 sm:px-3 sm:pb-3 sm:pt-8"
+      class="absolute inset-x-0 bottom-0 z-30 bg-linear-to-t from-black/60 via-black/22 to-transparent px-3 pb-3 pt-10 text-white transition-opacity duration-150"
       :class="customControlsVisible ? 'opacity-100' : 'pointer-events-none opacity-0'"
       @click.self="toggleCustomControlsVisibility"
       @pointermove="showCustomControls"
     >
       <div
-        class="rounded-sm border border-white/6 bg-black/10 p-2 shadow-sm backdrop-blur-[2px] sm:p-2.5"
+        class="rounded-sm border border-white/8 bg-black/18 p-2.5 shadow-lg backdrop-blur-sm sm:p-3"
       >
         <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
           <div class="sm:min-w-0 sm:flex-1">
@@ -116,15 +116,13 @@
               min="0"
               max="1000"
               step="1"
-              class="h-1.5 w-full accent-white opacity-60 transition-opacity hover:opacity-100"
+              class="h-1.5 w-full accent-white opacity-70 transition-opacity hover:opacity-100"
               aria-label="Seek video"
               @input="handleCustomVideoSeek"
             />
           </div>
-          <div
-            class="flex flex-col gap-2 sm:shrink-0 sm:flex-row sm:items-center sm:justify-end sm:gap-3"
-          >
-            <div class="flex min-w-0 items-center gap-2 sm:justify-start">
+          <div class="flex items-center justify-between gap-2 sm:shrink-0 sm:justify-end">
+            <div class="flex min-w-0 items-center gap-2">
               <UButton
                 color="neutral"
                 variant="soft"
@@ -155,12 +153,13 @@
                 @click="toggleCurrentMediaMute"
               />
               <input
+                v-if="!isTouchDevice"
                 :value="Math.round(effectiveStoredMediaVolume * 100)"
                 type="range"
                 min="0"
                 max="100"
                 step="1"
-                class="min-w-0 flex-1 accent-white opacity-60 transition-opacity hover:opacity-100 sm:w-20 sm:flex-none"
+                class="w-16 accent-white opacity-70 transition-opacity hover:opacity-100 sm:w-20"
                 aria-label="Video volume"
                 @input="handleCustomVideoVolumeChange"
               />

frontend/nuxt.config.ts

@@ -65,6 +65,7 @@ export default defineNuxtConfig({
     provider: 'none',
     fallbackToApi: false,
     clientBundle: {
+      icons: ['lucide:loader-circle'],
       scan: {
         globInclude: ['app/**/*.{vue,ts,js}', 'node_modules/@nuxt/ui/dist/shared/ui*.mjs'],
         globExclude: ['dist', 'build', 'coverage', 'test', 'tests', '.*'],