fix: the volume bar can click and adjust style. (#1474)

* fix: volume can use

* fix: adjust volume style

* chore: update changelog

* Update changelog/next.md

Co-authored-by: Innei <tukon479@gmail.com>

---------

Co-authored-by: Innei <tukon479@gmail.com>
Co-authored-by: Innei <i@innei.in>

apps/renderer/src/components/ui/media/VideoPlayer.tsx

@@ -344,6 +344,7 @@ const VolumeControl = () => {
   return (
     <ActionIcon
       label={<VolumeSlider onVolumeChange={controls.volume} volume={volume} />}
+      enableHoverableContent
       onClick={() => {
         if (muted) {
           controls.unmute()
@@ -420,12 +421,14 @@ const ActionIcon = ({
   children,
   shortcut,
   label,
+  enableHoverableContent,
 }: {
   className?: string
   onClick?: () => void
   label: React.ReactNode
   children?: React.ReactNode
   shortcut?: string
+  enableHoverableContent?: boolean
 }) => {
   return (
     <ActionButton
@@ -435,6 +438,7 @@ const ActionIcon = ({
       onClick={onClick}
       tooltip={label}
       shortcut={shortcut}
+      enableHoverableContent={enableHoverableContent}
     >
       {children || <i className={className} />}
     </ActionButton>

apps/renderer/src/components/ui/media/VolumeSlider.tsx

@@ -6,7 +6,7 @@ export const VolumeSlider: FC<{
   onVolumeChange: (volume: number) => void
 }> = ({ onVolumeChange, volume }) => (
   <Slider.Root
-    className="relative flex h-16 w-1 flex-col items-center overflow-hidden rounded p-1"
+    className="relative flex h-16 w-1 flex-col items-center rounded p-1"
     max={1}
     step={0.01}
     orientation="vertical"
@@ -18,6 +18,9 @@ export const VolumeSlider: FC<{
     <Slider.Track className="relative w-1 grow rounded bg-zinc-500">
       <Slider.Range className="absolute w-full rounded bg-black dark:bg-white" />
     </Slider.Track>
-    <Slider.Thumb className="block rounded bg-black dark:bg-white" aria-label="Volume" />
+    <Slider.Thumb
+      className="block size-3 rounded-full bg-black dark:bg-white"
+      aria-label="Volume"
+    />
   </Slider.Root>
 )

changelog/next.md

@@ -16,4 +16,5 @@
 
 ## Bug Fixes
 
+- Fixed the issue where the Volume of VideoPlayer was not clickable.
 - While using arrow keys to switch between entries, the entry view will not scroll unexpexted.

packages/components/src/ui/button/index.tsx

@@ -28,6 +28,7 @@ interface ActionButtonProps {
   disabled?: boolean
   shortcut?: string
   disableTriggerShortcut?: boolean
+  enableHoverableContent?: boolean
   size?: "sm" | "md" | "base"
 
   /**
@@ -59,6 +60,7 @@ export const ActionButton = React.forwardRef<
       shortcut,
       disabled,
       disableTriggerShortcut,
+      enableHoverableContent,
       size = "base",
       shortcutOnlyFocusWithIn,
       onClick,
@@ -127,7 +129,7 @@ export const ActionButton = React.forwardRef<
           />
         )}
         {tooltip ? (
-          <Tooltip disableHoverableContent>
+          <Tooltip disableHoverableContent={!enableHoverableContent}>
             <TooltipTrigger aria-label={typeof tooltip === "string" ? tooltip : undefined} asChild>
               {Trigger}
             </TooltipTrigger>