feat: failed attempt to add volume slider in popover based on device

aminnausin · aminnausin · commit e28db8e7cfe0 · 2025-04-02T00:20:57.000-04:00
diff --git a/resources/js/components/video/VideoPlayer.vue b/resources/js/components/video/VideoPlayer.vue
@@ -1104,7 +1104,7 @@ defineExpose({
                             </div> -->
                         </section>
                         <VideoPopover
-                            popoverClass="!max-w-40 rounded-lg h-16 md:h-fit font-mono"
+                            popoverClass="!max-w-40 rounded-lg h-20 md:h-fit font-mono"
                             ref="popover"
                             :margin="80"
                             :player="player ?? undefined"
@@ -1117,9 +1117,9 @@ defineExpose({
                                 <section class="flex flex-col text-xs h-16 md:h-fit overflow-y-auto scrollbar-minimal transition-transform">
                                     <VideoPopoverItem v-for="(item, index) in videoPopoverItems" :key="index" v-bind="item" />
                                     <VideoPopoverSlider
+                                        v-model="currentSpeed"
                                         :text="`Speed`"
                                         :shortcut="`${Math.round(currentSpeed * 100)}%`"
-                                        v-model="currentSpeed"
                                         :icon="CircumTimer"
                                         :min="playbackMin"
                                         :max="playbackMax"
@@ -1128,6 +1128,19 @@ defineExpose({
                                         :wheel-action="handleSpeedWheel"
                                         :title="'Change Playback Speed'"
                                     />
+                                    <VideoPopoverSlider
+                                        v-model="currentVolume"
+                                        :hidden="true"
+                                        :text="`Volume`"
+                                        :shortcut="`${Math.round(currentVolume * 100)}%`"
+                                        :icon="currentVolume > 0.3 ? ProiconsVolume : currentVolume > 0 ? ProiconsVolumeLow : ProiconsVolumeMute"
+                                        :min="0"
+                                        :max="1"
+                                        :step="0.05"
+                                        :action="() => handleVolumeChange()"
+                                        :wheel-action="handleVolumeWheel"
+                                        :title="'Change Volume'"
+                                    />
                                 </section>
                             </template>
                         </VideoPopover>
diff --git a/resources/js/service/util.ts b/resources/js/service/util.ts
@@ -153,6 +153,12 @@ export function getScreenSize(): 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default' {
     return 'default';
 }
 
+export function isMobileDevice(): boolean {
+    const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse), (max-width: 768px)');
+
+    return mediaQuery.matches;
+}
+
 /**
  * Converts a numerical file size in bytes to a human readable format in the largest applicable unit.
  *
diff --git a/resources/js/types/types.ts b/resources/js/types/types.ts
@@ -198,6 +198,7 @@ export interface PopoverSlider {
     wheelAction?: (event: WheelEvent) => void;
     style?: string;
     disabled?: boolean;
+    hidden?: boolean;
     icon?: Component;
     min?: number;
     max?: number;

Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,12 @@ export function getScreenSize(): 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'default' {`
`153`	`153`	`return 'default';`
`154`	`154`	`}`
`155`	`155`
	`156`	`+export function isMobileDevice(): boolean {`
	`157`	`+ const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse), (max-width: 768px)');`
	`158`	`+`
	`159`	`+ return mediaQuery.matches;`
	`160`	`+}`
	`161`	`+`
`156`	`162`	`/**`
`157`	`163`	`* Converts a numerical file size in bytes to a human readable format in the largest applicable unit.`
`158`	`164`	`*`