{"id":29246614,"url":"https://github.com/hunghg255/reactjs-player-media","last_synced_at":"2025-08-12T02:12:02.938Z","repository":{"id":302554124,"uuid":"1012423224","full_name":"hunghg255/reactjs-player-media","owner":"hunghg255","description":"React Media Player","archived":false,"fork":false,"pushed_at":"2025-07-03T05:46:52.000Z","size":707,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-25T07:58:40.248Z","etag":null,"topics":["audio","media","player","react-media","react-media-player","react-player","shadcn","video"],"latest_commit_sha":null,"homepage":"https://reactjs-player-media-playground.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hunghg255.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["hunghg255"]}},"created_at":"2025-07-02T10:04:25.000Z","updated_at":"2025-07-04T10:32:41.000Z","dependencies_parsed_at":"2025-07-03T02:50:33.763Z","dependency_job_id":null,"html_url":"https://github.com/hunghg255/reactjs-player-media","commit_stats":null,"previous_names":["hunghg255/reactjs-player-media"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hunghg255/reactjs-player-media","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Freactjs-player-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Freactjs-player-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Freactjs-player-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Freactjs-player-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hunghg255","download_url":"https://codeload.github.com/hunghg255/reactjs-player-media/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Freactjs-player-media/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269987123,"owners_count":24508176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","media","player","react-media","react-media-player","react-player","shadcn","video"],"created_at":"2025-07-03T23:02:20.878Z","updated_at":"2025-08-12T02:12:02.901Z","avatar_url":"https://github.com/hunghg255.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hunghg255"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/reactjs-player-media\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\u003cimg src=\"https://api.iconify.design/ic:round-wysiwyg.svg?color=%23bbdf58\" alt=\"logo\" width='100'/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n A modern media player based on tiptap and shadcn ui for React\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/reactjs-player-media\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badge.fury.io/js/reactjs-player-media.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/reactjs-player-media\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/reactjs-player-media.svg?logo=npm\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=reactjs-player-media\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/reactjs-player-media\" alt=\"Minizip\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hunghg255/reactjs-player-media/graphs/contributors\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/all_contributors-1-orange.svg\" alt=\"Contributors\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hunghg255/reactjs-player-media/blob/main/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/hunghg255/reactjs-player-media\" alt=\"License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://webuild.community\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/webuild-community/badge/master/svg/love.svg\" alt=\"webuild\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://webuild.community\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/webuild-community/badge/master/svg/WeBuild.svg\" alt=\"member\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n![App Screenshot](./screenshot/screenshot.png)\n\n## Demo\n\n[Demo](https://reactjs-player-media-playground.vercel.app/)\n\n## Run Locally\n\nClone the project\n\n```bash\ngit clone https://github.com/hunghg255/reactjs-player-media.git\n```\n\nGo to the project directory\n\n```bash\ncd reactjs-player-media\n```\n\nInstall dependencies\n\n```bash\npnpm install\n```\n\nStart the Demo server\n\n```bash\nnpm run build:lib:dev\nnpm run playground\n```\n\n## API Reference\n\n### Root\n\nThe main container component for the media player.\n\n\n| Prop Name                | Type                                                                 | Description |\n|--------------------------|----------------------------------------------------------------------|-------------|\n| onPlay                   | () =\u003e void                                                           | Callback when media starts playing |\n| onPause                  | () =\u003e void                                                           | Callback when media is paused |\n| onEnded                  | () =\u003e void                                                           | Callback when playback ends |\n| onTimeUpdate             | (time: number) =\u003e void                                               | Callback when playback time updates |\n| onVolumeChange           | (volume: number) =\u003e void                                             | Callback when volume changes |\n| onMuted                  | (muted: boolean) =\u003e void                                             | Callback when muted state changes |\n| onMediaError             | (error: MediaError \\| null) =\u003e void                                  | Callback when a media error occurs |\n| onPipError               | (error: unknown, state: \"enter\" \\| \"exit\") =\u003e void                   | Callback when PiP error occurs |\n| onFullscreenChange       | (fullscreen: boolean) =\u003e void                                        | Callback when fullscreen state changes |\n| dir                      | \"ltr\" \\| \"rtl\"                                                       | Text direction |\n| label                    | string                                                               | Accessibility label (default: \"Media player\") |\n| tooltipSideOffset        | number                                                               | Tooltip offset (default: 10) |\n| tooltipDelayDuration     | number                                                               | Tooltip delay (default: 600) |\n| autoHide                 | boolean                                                              | Enable auto-hiding controls (default: false) |\n| disabled                 | boolean                                                              | Disable controls (default: false) |\n| withoutTooltip           | boolean                                                              | Disable tooltips (default: false) |\n\n---\n\n#### Data Attributes\n\n| Attribute                | Description                                      |\n|--------------------------|--------------------------------------------------|\n| `[data-controls-visible]`| Present when the controls are visible.           |\n| `[data-disabled]`        | Present when the media player is disabled.       |\n| `[data-state]`           | `fullscreen`, `windowed`                         |\n\n### Video\n\nThe video element, integrated with the player state.\n\n\n\n### Audio\n\nThe audio element, integrated with the player state.\n\n\n### Controls\n\nA container for the media player controls.\n\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the controls are disabled.     |\n| `[data-state]`    | `fullscreen`, `windowed`                    |\n| `[data-visible]`  | Present when the controls are visible.      |\n\n### ControlsOverlay\n\nDisplays as a subtle backdrop that improves readability for media controls.\n\n\n\n#### Data Attributes\n\n| Attribute        | Description                                 |\n|------------------|---------------------------------------------|\n| `[data-state]`   | `fullscreen`, `windowed`                    |\n| `[data-visible]` | Present when the controls are visible.      |\n\n### Loading\n\nA loading indicator that appears when media is loading, similar to YouTube/Netflix style.\n\n| Prop Name | Type   | Description |\n|-----------|--------|-------------|\n| delay     | number | Delay before showing loading indicator (default: 500) |\n\n---\n\n### Error\n\nAn error component that displays when media playback encounters an error, with retry and reload options.\n\n| Prop Name   | Type                       | Description |\n|-------------|----------------------------|-------------|\n| error       | MediaError \\| null         | Media error object |\n| label       | string                     | Error label |\n| description | string                     | Error description |\n| onRetry     | () =\u003e void                 | Callback on retry |\n| onReload    | () =\u003e void                 | Callback on reload |\n\n---\n\n#### Data Attributes\n\n| Attribute      | Description                      |\n|----------------|----------------------------------|\n| `[data-state]` | `fullscreen`, `windowed`         |\n\n### VolumeIndicator\n\nA volume indicator that appears when the volume is changed with keyboard interactions.\n\n\n### Play\n\nA button to play or pause the media.\n\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n| `[data-state]`    | `on`, `off`                                 |\n\n### SeekBackward\n\nA button to seek backward in the media.\n\n| Prop Name | Type   | Description |\n|-----------|--------|-------------|\n| seconds   | number | Seconds to seek backward (default: 5) |\n\n---\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n\n### SeekForward\n\nA button to seek forward in the media.\n\n| Prop Name | Type   | Description |\n|-----------|--------|-------------|\n| seconds   | number | Seconds to seek forward (default: 10) |\n\n---\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n\n### Seek\n\nA slider component to seek through the media playback.\n\n| Prop Name                | Type                                                                 | Description |\n|--------------------------|----------------------------------------------------------------------|-------------|\n| withTime                 | boolean                                                              | Show current/remaining time (default: false) |\n| withoutChapter           | boolean                                                              | Hide chapter markers (default: true) |\n| withoutTooltip           | boolean                                                              | Disable seek tooltip (default: false) |\n| tooltipThumbnailSrc      | string \\| (time: number) =\u003e string                                   | Thumbnail for seek preview |\n| tooltipTimeVariant       | \"current\" \\| \"progress\"                                              | Tooltip time display (default: \"current\") |\n| tooltipSideOffset        | number                                                               | Tooltip offset (default: 10) |\n| tooltipCollisionBoundary | Element \\| Element[]                                                 | Tooltip collision boundary |\n| tooltipCollisionPadding  | number \\| Partial\u003cRecord\u003c\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\", number\u003e\u003e | Tooltip collision padding (default: 10) |\n\n---\n\n#### Data Attributes\n\n| Attribute                                 | Description                                           |\n|--------------------------------------------|-------------------------------------------------------|\n| `[data-disabled]`                         | Present when the slider is disabled.                  |\n| `[data-hovering]`                         | Present when the seek slider is being actively hovered.|\n| `[data-slider='']`                        | Present on the seek slider.                           |\n| `[data-slot='media-player-seek-container']`| The container for the seek slider.                    |\n| `[data-slot='media-player-seek']`          | The root for the seek slider.                         |\n| `[data-slot='media-player-seek-buffered']` | The buffered progress indicator within the track.     |\n| `[data-slot='media-player-seek-hover-range']`| The hover preview range indicator.                  |\n| `[data-slot='media-player-seek-chapter-separator']`| Chapter separators displayed on the track.      |\n| `[data-slot='media-player-seek-thumbnail']` | The thumbnail preview container in the tooltip.       |\n| `[data-slot='media-player-seek-chapter-title']`| The chapter title in the tooltip.                  |\n| `[data-slot='media-player-seek-time']`     | The time display in the tooltip.                      |\n\n#### Styling\n\n```tsx\n\u003cMediaPlayer.Seek\n  className={cn(\n    \"[\u0026_[data-slot='media-player-seek-buffered']]:bg-primary/60\",\n    \"[\u0026_[data-slot='media-player-seek-hover-range']]:bg-primary/70\",\n    \"[\u0026_[data-slot='media-player-seek-chapter-separator']]:w-1 [\u0026_[data-slot='media-player-seek-chapter-separator']]:bg-muted\",\n    \"[\u0026_[data-slot='media-player-seek-thumbnail']]:border-2 [\u0026_[data-slot='media-player-seek-thumbnail']]:border-ring\",\n  )}\n/\u003e\n```\n\n### Volume\n\nA slider component to control the media volume.\n\n| Prop Name   | Type    | Description |\n|-------------|---------|-------------|\n| expandable  | boolean | Expand slider on hover (default: false) |\n\n---\n\n#### Data Attributes\n\n| Attribute                                 | Description                                 |\n|--------------------------------------------|---------------------------------------------|\n| `[data-disabled]`                         | Present when the volume control is disabled.|\n| `[data-slider='']`                        | Present on the volume slider.               |\n| `[data-slot='media-player-volume-container']`| The container for the volume slider.      |\n| `[data-slot='media-player-volume-trigger']` | The trigger for the volume slider.         |\n| `[data-slot='media-player-volume']`         | The root for the volume slider.            |\n| `[data-state]`                             | `on`, `off`                                |\n\n### Time\n\nDisplays the current time, duration, or remaining time of the media.\n\n| Prop Name | Type                              | Description |\n|-----------|-----------------------------------|-------------|\n| variant   | \"progress\" \\| \"remaining\" \\| \"duration\" | Time display format (default: \"progress\") |\n\n---\n\n### PlaybackSpeed\n\nA select dropdown to control the media playback speed.\n\n| Prop Name   | Type           | Description |\n|-------------|----------------|-------------|\n| defaultOpen | boolean        | Dropdown open by default (default: false) |\n| open        | boolean        | Dropdown open (default: false) |\n| onOpenChange| (open: boolean) =\u003e void | Callback on open/close |\n| modal       | boolean        | Dropdown is modal (default: false) |\n| sideOffset  | number         | Dropdown offset (default: 10) |\n| speeds      | number[]       | Playback speed options (default: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]) |\n\n---\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the select is disabled.        |\n\n### Loop\n\nA button to toggle loop mode.\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n| `[data-state]`    | `on`, `off`                                 |\n\n### Fullscreen\n\nA button to toggle fullscreen mode.\n\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n| `[data-state]`    | `on`, `off`                                 |\n\n### PiP (Picture in picture)\n\nA button to toggle picture in picture mode (video only).\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n| `[data-state]`    | `on`, `off`                                 |\n\n### Captions\n\nA button to toggle captions or subtitles (video only).\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n| `[data-state]`    | `on`, `off`                                 |\n\n### Download\n\nA button to download the media file.\n\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n\n### Settings\n\nA dropdown menu with playback speed selector, caption selector, and resolution selector.\n\n\n**Features:**\n\n- Playback speed control with customizable speeds\n- Video quality/resolution selection (when available)\n- Captions/subtitles control\n- Organized in a clean dropdown interface\n\n```tsx\n\u003cMediaPlayer.Settings speeds={[0.5, 0.75, 1, 1.25, 1.5, 2]} /\u003e\n```\n\n#### Data Attributes\n\n| Attribute         | Description                                 |\n|-------------------|---------------------------------------------|\n| `[data-disabled]` | Present when the button is disabled.        |\n\n## Accessibility\n\n### Keyboard Interactions\n| Keys                                 | Description                                         |\n|---------------------------------------|-----------------------------------------------------|\n| \u003ckbd\u003eSpace\u003c/kbd\u003e, \u003ckbd\u003eK\u003c/kbd\u003e        | Toggles play/pause.                                 |\n| \u003ckbd\u003eArrowRight\u003c/kbd\u003e                 | Seeks forward 5 seconds (video only).               |\n| \u003ckbd\u003eArrowLeft\u003c/kbd\u003e                  | Seeks backward 5 seconds (video only).              |\n| \u003ckbd\u003eJ\u003c/kbd\u003e                          | Seeks backward 10 seconds (video only).             |\n| \u003ckbd\u003eL\u003c/kbd\u003e                          | Seeks forward 10 seconds (video only).              |\n| \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eArrowRight\u003c/kbd\u003e | Seeks forward 5 seconds (audio only).           |\n| \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eArrowLeft\u003c/kbd\u003e  | Seeks backward 5 seconds (audio only).          |\n| \u003ckbd\u003e0\u003c/kbd\u003e–\u003ckbd\u003e9\u003c/kbd\u003e             | Seeks to 0%-90% of duration.                        |\n| \u003ckbd\u003eHome\u003c/kbd\u003e                       | Seeks to beginning.                                 |\n| \u003ckbd\u003eEnd\u003c/kbd\u003e                        | Seeks to end.                                       |\n| \u003ckbd\u003eArrowUp\u003c/kbd\u003e                    | Increases volume (video only).                      |\n| \u003ckbd\u003eArrowDown\u003c/kbd\u003e                  | Decreases volume (video only).                      |\n| \u003ckbd\u003eM\u003c/kbd\u003e                          | Toggles mute.                                       |\n| \u003ckbd\u003eR\u003c/kbd\u003e                          | Toggles repeat mode.                                |\n| \u003ckbd\u003eF\u003c/kbd\u003e                          | Toggles fullscreen.                                 |\n| \u003ckbd\u003eEscape\u003c/kbd\u003e                     | Exits fullscreen when in fullscreen mode.           |\n| \u003ckbd\u003e\u0026gt;\u003c/kbd\u003e                       | Increases playback speed.                           |\n| \u003ckbd\u003e\u0026lt;\u003c/kbd\u003e                       | Decreases playback speed.                           |\n| \u003ckbd\u003eC\u003c/kbd\u003e                          | Toggles captions (video only, if available).        |\n| \u003ckbd\u003eP\u003c/kbd\u003e                          | Toggles Picture-in-Picture.                         |\n| \u003ckbd\u003eD\u003c/kbd\u003e                          | Downloads the media file (if download button is present). |\n\n## License\n\n[MIT](./LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Freactjs-player-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhunghg255%2Freactjs-player-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Freactjs-player-media/lists"}