Add a speed modifier slider

[Plextora]

8mb.video-T7N-Zz8A9Ljn.mp4

Kinda self explanatory, this PR adds an extra slider next to the Volume slider that change's the speed of the music. This nice for songs that are famous DT maps, like Tsukinami or rog-unlimitation.

[hrfarmer]

delete the package-lock, we moved to using bun for managing packages in #97

[duduBTW]

@Plextora

Can we replace the slider by the volume with a popover on the right?

2024-11-15.12-18-25.mp4

Code

Popover

Add a popover trigger.

src\renderer\src\components\popover\PopoverTrigger.tsx

type PopoverAnchorProps = JSX.IntrinsicElements["div"];
export const PopoverAnchor: Component<PopoverAnchorProps> = (props) => {
  const state = usePopover();
  return <div ref={state.setTriggerRef} {...props} />;
};

Add the trigger to the popover component.

src\renderer\src\components\popover\Popover.tsx

const Popover = Object.assign(PopoverRoot, {
  Anchor: PopoverAnchor,
  Content: PopoverContent,
  Trigger: PopoverTrigger,
  Overlay: PopoverOverlay,
});

on line 42:

- const [triggerRef, _setTriggerRef] = createSignal<HTMLButtonElement | null>(null);
+ const [triggerRef, _setTriggerRef] = createSignal<HTMLElement | null>(null);

---

Song Controls

Move the button to the right part and implement the popover.

src\renderer\src\components\song\song-detail\SongControls.tsx

Remove the component from the LeftPart.

Add it to the RightPart.

const PREDEFINED_SPEEDS: number[] = [0.25, 0.5, 1, 1.5, 2] as const;
const MIN_SPEED_AMOUNT = PREDEFINED_SPEEDS[0];
const MAX_SPEED_AMOUNT = PREDEFINED_SPEEDS.at(-1);
const RightPart = () => {
  const [isPopoverOpen, setisPopoverOpen] = createSignal(false);

  return (
    <div class="flex flex-1 justify-end gap-4">
      <Popover
        isOpen={isPopoverOpen}
        onValueChange={setisPopoverOpen}
        placement="top-end"
        offset={{
          mainAxis: 10,
        }}
      >
        <Popover.Anchor>
          <Button
            onClick={() => setisPopoverOpen(true)}
            size="icon"
            variant="ghost"
            title="Set speed"
          >
            <GaugeIcon size={20} />
          </Button>
        </Popover.Anchor>

        <Portal>
          <Popover.Overlay />
          <Popover.Content class="flex w-fit min-w-48 flex-col  rounded-xl ring-stroke ring-1 ring-inset bg-thick-material px-1.5 py-3 backdrop-blur-md shadow-xl">
            <p class="font-medium text-sm text-subtext gap-1 px-2">Custom Speed</p>
            <div class="flex flex-col px-2">
              <Slider
                class="flex h-8 flex-grow items-center"
                min={MIN_SPEED_AMOUNT}
                max={MAX_SPEED_AMOUNT}
                value={speed}
                onValueChange={setSpeed}
                enableWheelSlide
              >
                <Slider.Track class="h-1 flex-1 rounded bg-thick-material ring-1 ring-stroke">
                  <Slider.Range class="block h-1 rounded bg-white" />
                </Slider.Track>
                <Slider.Thumb class="mt-2 block h-4 w-4 rounded-full bg-white" />
              </Slider>
              <div class="text-xs ">{Math.round(speed() * 100) / 100}x</div>
            </div>
            <div class="w-full bg-stroke h-px my-2" />

            <For each={PREDEFINED_SPEEDS}>
              {(amount) => <SpeedOption amount={amount}>{amount}</SpeedOption>}
            </For>
          </Popover.Content>
        </Portal>
      </Popover>
      <Button size="icon" variant="ghost">
        <CirclePlusIcon size={20} />
      </Button>
    </div>
  );
};

type SpeedOptionProps = {
  amount: number;
};
const SpeedOption: ParentComponent<SpeedOptionProps> = (props) => {
  return (
    <button
      onClick={() => setSpeed(props.amount)}
      class="flex items-center justify-between rounded-md px-2 py-1.5 disabled:opacity-50 disabled:pointer-events-none focus:outline-none hover:bg-surface"
    >
      {props.children}
    </button>
  );
};

[duduBTW]

Requested design changes.

fixed