Nobody's Perfect, Man

    @resonate/player-component

    3.0.0-1 • Public • Published

    @resonate/player-component

    Player component

    Installation

    $ npm i --save @resonate/player-component

    Usage

    const Player = require('@resonate/player-component')
    
    function (state, emit) {
      return html`
        <div class="bg-black white fixed bottom-0 left-0 right-0 w-100">
          ${state.cache('player').render({
            menu: {
              items: [
                {
                  iconName: 'star',
                  text: 'favorite',
                  toggleState: state.track.fav === 0,
                  action: (toggle, data) => {
                    emit(toggle ? 'favorite' : 'unfavorite', data.id)
                  }
                },
                {
                  iconName: 'share',
                  text: 'share'
                },
                {
                  iconName: 'info',
                  text: 'artist profile'
                }
              ]
            }
          })}
        </div>
      `
    }
    
    ...

    Options

    • prefix A single class or classlist
    • menu An array of menu item configuration for @resonate/menu-button

    Playback control

    Player state is exposed in state.components[componentId]

    Playback state machine can be controlled

    ...
    
    machine.playback.emit('play')
    
    machine.playback.emit('pause')

    Icons

    See @resonate/icon-element

    SVG icons set configuration.

    Icon names

    • play
    • pause
    • previous
    • next
    • volume

    License

    MIT

    Author(s)

    Install

    npm i @resonate/player-component

    DownloadsWeekly Downloads

    0

    Version

    3.0.0-1

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • resonatecoop