← Back to scenarios
ScenarioCatalog DB

Media player state

Change media-player behavior when playback is playing, paused, or stopped.

Problem

A media player must handle commands differently based on its playback state while keeping state-specific behavior and transitions independent of the core player context.

Related patterns

Implementations

State

TypeScriptApplication

State in TypeScript

Changes an order’s behavior by delegating cancellation rules to its current lifecycle state.

TypeScript
interface OrderState {
  cancel(order: Order): void;
  name(): string;
}

class Order {
  constructor(private state: OrderState) {}

  setState(state: OrderState) {
    this.state = state;
  }

  cancel() {
    this.state.cancel(this);
  }

  printStatus() {
    console.log(`Order is ${this.state.name()}`);
  }
}

class PendingState implements OrderState {
  cancel(order: Order) {
    console.log("Cancelling pending order.");
    order.setState(new CancelledState());
  }

  name() {
    return "pending";
  }
}

class ShippedState implements OrderState {
  cancel() {
    console.log("Shipped orders cannot be cancelled.");
  }

  name() {
    return "shipped";
  }
}

class CancelledState implements OrderState {
  cancel() {
    console.log("Order is already cancelled.");
  }

  name() {
    return "cancelled";
  }
}

const order = new Order(new PendingState());

order.printStatus();
order.cancel();
order.printStatus();

order.setState(new ShippedState());
order.cancel();

Associated technologies