How to use format-duration - 8 common examples

bodyClassName: PropTypes.string,
    contentClassName: PropTypes.string,
    titleClassName: PropTypes.string,

    onEditedMedia: PropTypes.func.isRequired,
    onCloseDialog: PropTypes.func.isRequired,
  };

  state = {
    errors: null,
    /* eslint-disable react/destructuring-assignment */
    artist: this.props.media.artist,
    title: this.props.media.title,
    start: formatDuration(this.props.media.start * 1000),
    end: formatDuration(this.props.media.end * 1000),
    /* eslint-enable react/destructuring-assignment */
  };

  handleSubmit = (e) => {
    e.preventDefault();

    const { media, onEditedMedia, onCloseDialog } = this.props;
    const {
      artist, title, start, end,
    } = this.state;

    const startSeconds = parseDuration(start);
    const endSeconds = parseDuration(end);

    const errors = [];
    if (Number.isNaN(startSeconds) || startSeconds < 0) {

onChange={this.handleChangeStart}
        icon={}
        tabIndex={BASE_TAB_INDEX + 2}
      />
    );
    const toLabel = (
      // eslint-disable-next-line jsx-a11y/label-has-for
      <label>
        {t('dialogs.editMedia.playToLabel')}
      </label>
    );
    const toInput = (
      }
        tabIndex={BASE_TAB_INDEX + 3}
      /&gt;
    );

    return (
      <form>
        {errors &amp;&amp; errors.length &gt; 0 &amp;&amp; (
          
            {errors.map(error =&gt; <div>{t(`dialogs.editMedia.errors.${error}`)}</div>)}
          
        )}

        <div></div></form>

media: PropTypes.object,

    bodyClassName: PropTypes.string,
    contentClassName: PropTypes.string,
    titleClassName: PropTypes.string,

    onEditedMedia: PropTypes.func.isRequired,
    onCloseDialog: PropTypes.func.isRequired,
  };

  state = {
    errors: null,
    /* eslint-disable react/destructuring-assignment */
    artist: this.props.media.artist,
    title: this.props.media.title,
    start: formatDuration(this.props.media.start * 1000),
    end: formatDuration(this.props.media.end * 1000),
    /* eslint-enable react/destructuring-assignment */
  };

  handleSubmit = (e) => {
    e.preventDefault();

    const { media, onEditedMedia, onCloseDialog } = this.props;
    const {
      artist, title, start, end,
    } = this.state;

    const startSeconds = parseDuration(start);
    const endSeconds = parseDuration(end);

    const errors = [];

width={2}
                fill={theme.colors.scales.gray[5]}
              />
              
                {formatDuration(mouse * 1000)}
              
            
          )}

          {/* captions */}
          {transitions.map(({ item, key, props }, i) => {
            return (
              
                 {
                    e.stopPropagation();
                    onRequestSkip(i);
                  }}
                  style={props}
                  css={{

position: "relative",
            lineHeight: theme.lineHeights.body,
            paddingTop: `calc(${theme.spaces.sm} + 2px)`
          }
        ]}
        htmlFor={caption.id}
      >

onKeyPress={this.handleKeyPress}
        onClick={onClick}
      >
        {media.loading ? (
          
        ) : (
          
        )}
        <div title="{media.artist}">
          {media.artist}
        </div>
        <div title="{media.title}">
          {media.title}
        </div>
        <div>
          {formatDuration(duration * 1000)}
        </div>
        
      
    ));
  }
}

flex: 1,
                alignSelf: 'center',
                paddingRight: 10
              }}
            >
              
              
              
              
            
          
          {this.displayLyrics()}
        
        
      
    );
  }
}

const Eta = ({
  className, base, currentTime, endTime,
}) => {
  const currentRemaining = endTime - currentTime;
  return (
    <span>
      {formatDuration(base + currentRemaining)}
    </span>
  );
};