Add control for playback speed

minetoblend · Jan 6, 2025 · bdb2b62 · bdb2b62
1 parent 09efc05
commit bdb2b62
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/packages/common/src/editor/bottomBar/PlayButton.ts b/packages/common/src/editor/bottomBar/PlayButton.ts
@@ -1,7 +1,8 @@
 import type { HoverEvent, HoverLostEvent, MouseDownEvent, MouseUpEvent, ReadonlyDependencyContainer } from 'osucad-framework';
-import { Anchor, Axes, CompositeDrawable, DrawableSprite, MouseButton, resolved, Vec2 } from 'osucad-framework';
+import { Anchor, Axes, CompositeDrawable, DrawableSprite, MenuItem, MouseButton, resolved, Vec2 } from 'osucad-framework';
 import { OsucadColors } from '../../OsucadColors';
 import { getIcon } from '../../OsucadIcons';
+import { ContextMenuContainer } from '../../userInterface/ContextMenuContainer';
 import { EditorClock } from '../EditorClock';
 
 export class PlayButton extends CompositeDrawable {
@@ -55,6 +56,37 @@ export class PlayButton extends CompositeDrawable {
       return true;
     }
 
+    if (e.button === MouseButton.Right) {
+      this.dependencies.resolve(ContextMenuContainer)
+        .showMenu([
+          new MenuItem({
+            text: 'Playback rate',
+            disabled: true,
+          }),
+          new MenuItem({
+            text: '150%',
+            action: () => this.editorClock.rate = 1.5,
+          }),
+          new MenuItem({
+            text: '100%',
+            action: () => this.editorClock.rate = 1,
+          }),
+          new MenuItem({
+            text: '75%',
+            action: () => this.editorClock.rate = 0.75,
+          }),
+          new MenuItem({
+            text: '50%',
+            action: () => this.editorClock.rate = 0.5,
+          }),
+          new MenuItem({
+            text: '25%',
+            action: () => this.editorClock.rate = 0.25,
+          }),
+        ], e);
+      return true;
+    }
+
     return false;
   }
 

diff --git a/packages/common/src/userInterface/ContextMenu.ts b/packages/common/src/userInterface/ContextMenu.ts
@@ -1,7 +1,7 @@
 import type { Drawable, MenuItem, ReadonlyDependencyContainer, SpriteText, Vec2 } from 'osucad-framework';
 import type { Graphics } from 'pixi.js';
 import type { OsucadMenuItem } from './OsucadMenuItem';
-import { Anchor, Axes, Container, Direction, DrawableMenuItem, EasingFunction, FastRoundedBox, GraphicsDrawable, MarginPadding, Menu, ScrollbarContainer, ScrollContainer } from 'osucad-framework';
+import { Anchor, Axes, Container, Direction, DrawableMenuItem, FastRoundedBox, GraphicsDrawable, MarginPadding, Menu, ScrollbarContainer, ScrollContainer } from 'osucad-framework';
 import { OsucadSpriteText } from '../drawables/OsucadSpriteText';
 import { OsucadColors } from '../OsucadColors';
 import { ContextMenuContainer } from './ContextMenuContainer';
@@ -20,8 +20,8 @@ export class ContextMenu extends Menu {
   }
 
   protected override updateSize(newSize: Vec2) {
-    this.width = newSize.x;
-    this.resizeTo(newSize, 300, EasingFunction.OutExpo);
+    this.size = newSize;
+    // this.resizeTo(newSize, 300, EasingFunction.OutExpo);
   }
 
   protected override createScrollContainer(direction: Direction): ScrollContainer {

diff --git a/packages/common/src/userInterface/ContextMenuContainer.ts b/packages/common/src/userInterface/ContextMenuContainer.ts
@@ -1,5 +1,5 @@
 import type { ContainerOptions, MenuItem, MouseDownEvent, UIEvent } from 'osucad-framework';
-import { Axes, Container, Drawable, provide, Vec2 } from 'osucad-framework';
+import { Anchor, Axes, Container, Drawable, provide, Vec2 } from 'osucad-framework';
 import { ContextMenu } from './ContextMenu';
 
 @provide()
@@ -47,6 +47,12 @@ export class ContextMenuContainer extends Container {
     this.#activeMenu = menu;
 
     menu.animateOpen();
+
+    this.scheduler.addDelayed(() => {
+      if (this.toLocalSpace(menu.toScreenSpace(new Vec2(0, menu.drawHeight))).y > this.height) {
+        menu.origin = Anchor.BottomLeft;
+      }
+    }, 50);
   }
 
   #activeMenu?: ContextMenu;