common.ts

/* eslint-disable camelcase */
import { ReactNode } from 'react';

import { ERROR_TYPE, STATUS, TYPE } from '~/constants';

import { SpotifyDevice, SpotifyTrack } from './spotify';

export type ErrorType = (typeof ERROR_TYPE)[keyof typeof ERROR_TYPE];
export type Status = (typeof STATUS)[keyof typeof STATUS];
export type Type = (typeof TYPE)[keyof typeof TYPE];

export interface CallbackState extends State {
  type: Type;
}

export type Layout = 'responsive' | 'compact';

export interface Props {
  /**
   * Start the player immediately.
   * @default false
   * @deprecated Most browsers block autoplaying since the user needs to interact with the page first.
   */
  autoPlay?: boolean;
  /**
   * Get status updates from the player.
   */
  callback?: (state: CallbackState) => any;
  /**
   * The callback Spotify SDK uses to get/update the token.
   */
  getOAuthToken?: (callback: (token: string) => void) => Promise<void>;
  /**
   * Hide the Spotify logo.
   * More info: https://developer.spotify.com/documentation/general/design-and-branding/
   * @default false
   */
  hideAttribution?: boolean;
  /**
   * Hide the cover art.
   * @default false
   */
  hideCoverArt?: boolean;
  /**
   * The initial volume for the player. This isn't used for external devices.
   * @default 1
   */
  initialVolume?: number;
  /**
   * Show the volume inline for the "responsive" layout for 768px and above.
   * @default true
   */
  inlineVolume?: boolean;
  /**
   * The layout of the player.
   * @default responsive
   */
  layout?: Layout;
  /**
   * The strings used for aria-label/title attributes.
   */
  locale?: Partial<Locale>;
  /**
   * Magnify the player's slider on hover.
   * @default false
   */
  magnifySliderOnHover?: boolean;
  /**
   * The name of the player.
   * @default Spotify Web Player
   */
  name?: string;
  /**
   * The position of the list/tracks you want to start the player.
   */
  offset?: number;
  /**
   * Save the device selection.
   * @default false
   */
  persistDeviceSelection?: boolean;
  /**
   * Control the player's status.
   */
  play?: boolean;
  /**
   * Display a Favorite button. It needs additional scopes in your token.
   * @default false
   */
  showSaveIcon?: boolean;
  /**
   * Customize the player's appearance.
   */
  styles?: StylesProps;
  /**
   * If there are no URIs and an external device is playing, use the external player context.
   *  @default false
   */
  syncExternalDevice?: boolean;
  /**
   * The time in seconds that the player will sync with external devices.
   * @default 5
   */
  syncExternalDeviceInterval?: number;
  /**
   * A Spotify token.
   */
  token: string;
  /**
   * Provide you with a function to sync the track saved status in the player.
   * This works in addition to the showSaveIcon prop, and it is only needed if you keep the track's saved status in your app.
   */
  updateSavedStatus?: (fn: (status: boolean) => any) => any;
  /**
   * A list of Spotify URIs.
   */
  uris: string | string[];
}

export interface State {
  currentDeviceId: string;
  deviceId: string;
  devices: SpotifyDevice[];
  error: string;
  errorType: ErrorType | null;
  isActive: boolean;
  isInitializing: boolean;
  isMagnified: boolean;
  isPlaying: boolean;
  isSaved: boolean;
  isUnsupported: boolean;
  needsUpdate: boolean;
  nextTracks: SpotifyTrack[];
  playerPosition: 'bottom' | 'top';
  position: number;
  previousTracks: SpotifyTrack[];
  progressMs: number;
  status: Status;
  track: SpotifyTrack;
  volume: number;
}

export interface ComponentsProps {
  [key: string]: any;
  children?: ReactNode;
  styles: StylesOptions;
}

export interface Locale {
  currentDevice: string;
  devices: string;
  next: string;
  otherDevices: string;
  pause: string;
  play: string;
  previous: string;
  removeTrack: string;
  saveTrack: string;
  title: string;
  volume: string;
}

export interface PlayOptions {
  context_uri?: string;
  uris?: string[];
}

export interface StylesOptions {
  activeColor: string;
  altColor: string;
  bgColor: string;
  color: string;
  errorColor: string;
  height: number;
  loaderColor: string;
  loaderSize: number | string;
  sliderColor: string;
  sliderHandleBorderRadius: number | string;
  sliderHandleColor: string;
  sliderHeight: number;
  sliderTrackBorderRadius: number | string;
  sliderTrackColor: string;
  trackArtistColor: string;
  trackNameColor: string;
}

export type StylesProps = Partial<StylesOptions>;

export interface StyledProps {
  [key: string]: any;
  style: Record<string, any>;
}