https://github.com/jamsinclair/react-player-circle-controls

Circular UI controls for playing media
https://github.com/jamsinclair/react-player-circle-controls

circle-controls media-player react-player

Last synced: 3 months ago
JSON representation

Circular UI controls for playing media

• Host: GitHub
• URL: https://github.com/jamsinclair/react-player-circle-controls
• Owner: jamsinclair
• License: mit
• Created: 2020-01-12T06:02:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T05:00:51.000Z (over 2 years ago)
• Last Synced: 2025-01-11T16:10:43.863Z (4 months ago)
• Topics: circle-controls, media-player, react-player
• Language: JavaScript
• Homepage: https://jamsinclair.github.io/react-player-circle-controls
• Size: 3.9 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React Player Circle Controls

> Circular UI Controls for playing media

[![NPM](https://img.shields.io/npm/v/react-player-circle-controls.svg)](https://www.npmjs.com/package/react-player-circle-controls)

[![Minified and Gzipped](https://badgen.net/bundlephobia/minzip/react-player-circle-controls)](https://bundlephobia.com/result?p=react-player-circle-controls@latest)

![Animation of Circle Controls](https://user-images.githubusercontent.com/5964236/72217574-41393200-3573-11ea-8d69-59647d660056.gif)

## Install

```bash

npm install --save react-player-circle-controls

# OR

yarn add react-player-circle-controls

```

## Usage

You'll need to use the component in conjunction with another media player library.

It was built with [react-player](https://github.com/CookPete/react-player) in mind but could work with others too.

[See the StoryBook app for live example](https://jamsinclair.github.io/react-player-circle-controls/?path=/story/overview--with-react-player)

```jsx

import React, {useRef, useState} from 'react';

import ReactPlayer from 'react-player';

import CircleControls from 'react-player-circle-controls';

import 'react-player-circle-controls/dist/styles.css';

const Example = () => {

  const player = useRef(null);

  const [playing, setPlaying] = useState(false);

  const [playerState, setPlayerState] = useState({

    played: 0,

    loaded: 0

  });

  const onSeek = amount => {

    if (player.current) {

      player.current.seekTo(amount, 'fraction');

    }

  };

  return (

    <>

       setPlaying(false)}

      />

       setPlaying(!playing)}

      />

    >

  );

};

```

## License

MIT © [Jamie Sinclair](https://github.com/jamsinclair)