{"id":18347867,"url":"https://github.com/collaborne/media-player","last_synced_at":"2025-04-06T09:31:30.712Z","repository":{"id":57750025,"uuid":"491488706","full_name":"Collaborne/media-player","owner":"Collaborne","description":"A react video player with controls and functionality","archived":false,"fork":false,"pushed_at":"2025-03-03T20:21:12.000Z","size":25589,"stargazers_count":11,"open_issues_count":4,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-21T21:11:38.735Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Collaborne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-05-12T11:39:51.000Z","updated_at":"2025-03-03T20:19:22.000Z","dependencies_parsed_at":"2023-07-18T23:18:28.009Z","dependency_job_id":"6a1c59f2-93a7-4025-a2ce-863dfc6bcade","html_url":"https://github.com/Collaborne/media-player","commit_stats":{"total_commits":202,"total_committers":14,"mean_commits":"14.428571428571429","dds":0.5792079207920793,"last_synced_commit":"0d0de1b3e58613569a6e95bc8dc96c740f4674c7"},"previous_names":["collaborne/video-player"],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fmedia-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fmedia-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fmedia-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fmedia-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Collaborne","download_url":"https://codeload.github.com/Collaborne/media-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463744,"owners_count":20942935,"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","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":[],"created_at":"2024-11-05T21:15:25.232Z","updated_at":"2025-04-06T09:31:30.276Z","avatar_url":"https://github.com/Collaborne.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Media Player\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/collaborne/media-player)\n[![Node version](https://img.shields.io/node/v/@collaborne/media-player.svg?style=flat)](http://nodejs.org/download/)\n![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/collaborne/media-player/.github%2Fworkflows%2Fci.yml)\n![GitHub deployments](https://img.shields.io/github/deployments/collaborne/media-player/github-pages?label=gh-pages)\n![GitHub top language](https://img.shields.io/github/languages/top/collaborne/media-player)\n[![Code Coverage](https://collaborne.github.io/media-player/coverage/badge-statements.svg)](https://collaborne.github.io/media-player/coverage/lcov-report/)\n\nA media player build in React on top of [CookPete/react-player](https://github.com/CookPete/react-player).It supports the\n[MUI theming and components](https://mui.com) and **own functionality of the Picture-in-Picture and Fullscreen API**.\nAnd yes, it is updated to **React v18** :balloon:!\n\nYou can **play** both: **audio** and **video** files.\n\n*Note: At the moment we support video and audio files URL. Youtube, twitch and other media streaming services URL's are not supported yet.*\n\n[Live demo](https://collaborne.github.io/media-player/)\n\n## Introduction\n\n`@collaborne/media-player` provides a set of: \"draft\" player that has own PIP and Fullscreen implementation, UI Controls, a\nhigh flexibility for composing different player's UI Controls, hooks for accessing media store/data and event listeners, a ready to go media player solution\n(with our own customized MUI Themed Components) and many other features.\n\n### Installation\n\n1. Add as a dependency @collaborne/media-player\n\n```bash\nnpm install --save @collaborne/media-player\n```\n\n2. Install our peer dependencies. As an example we use `mui` for theming and UI Components, `react-transition-group` for animation, `lodash` for throttling, etc.  \nYou can check peer dependencies in `package.json`. What is a peer dependency you can check [here](https://nodejs.org/es/blog/npm/peer-dependencies/).\n\n## How to use\n\n### The Players\n\n- **Out of the box**\n\nYou can just use a component that contains all the futures. See in [CodeSandbox](https://codesandbox.io/s/media-player-example-wnqwb1).  \n*NOTE: Wait the sandbox until installs all dependencies and refresh it in case if it got \"staled\"*\n\n```ts\nimport { MediaPlayer } from '@collaborne/media-player';\n\nexport const MyComponent: React.FC = () =\u003e {\n return (\n   \u003cMediaPlayer url=\"some-video-url\" /\u003e\n );\n};\n```\n\n- **Compose own UI Controls**\n\nThis comes handy when you want to customize controls for the player. [CodeSandbox](https://codesandbox.io/s/core-player-gtlry2)  \n*NOTE: Wait the sandbox until installs all dependencies and refresh it in case if it got \"staled\"*\n\n```ts\nimport { CorePlayer, Controls, BottomControls } from \"@collaborne/media-player\";\nimport { PlayArrow } from \"@mui/icons-material\";\nimport { IconButton } from \"@mui/material\";\n\nconst PlayButton = () =\u003e {\n  return (\n    \u003cIconButton\u003e\n      \u003cPlayArrow /\u003e\n    \u003c/IconButton\u003e\n  );\n};\n\nexport default function App() {\n  return (\n    \u003c\u003e\n      \u003cCorePlayer url=\"some-url\"\u003e\n        \u003cControls\u003e\n          \u003cBottomControls\u003e\n            \u003cPlayButton /\u003e\n          \u003c/BottomControls\u003e\n        \u003c/Controls\u003e\n      \u003c/CorePlayer\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Recipes  \n\n- **Using Media Store for the children**\n\nWe use [zustand](https://github.com/pmndrs/zustand) for storing media state(current time, isPlaying, isMuted...). \nThat's why we can get the state using `zustand` [approach](https://github.com/pmndrs/zustand#then-bind-your-components-and-thats-it).\n\n```ts\nimport { useMediaStore } from \"@collaborne/media-player\";\nimport { PlayArrow } from \"@mui/icons-material\";\nimport { IconButton } from \"@mui/material\";\n\nconst PlayButton = () =\u003e {\n  const play = useMediaStore((state) =\u003e state.play);\n  return (\n    \u003cIconButton onClick={play}\u003e\n      \u003cPlayArrow /\u003e\n    \u003c/IconButton\u003e\n  );\n};\n```\n\n- **Using MediaStore outside of the player**\nAll players state is connected to an event emitter. Triggering play, pause, mute, etc will trigger an event, that you can connect too.\nSo, subscribing to an event can boost your app and save performance. Code example in [CodeSandbox](https://codesandbox.io/s/media-player-outside-state-oxpko5).  \n*NOTE: Wait the sandbox until installs all dependencies and refresh it in case if it got \"staled\"*\n\n```ts\nimport {\n  MediaPlayer,\n  usePlayerContext,\n  useMediaListener\n} from \"@collaborne/media-player\";\n\n// `\u003cApp /\u003e` can control MediaStore not being a children of MediaPlayer\nexport default function App() {\n  // mediaContext is a ref value. Use only setters and media listener\n  const { mediaContext, setMediaContext } = usePlayerContext();\n  const listener = mediaContext?.getListener();\n  // useMediaListener - custom hooks that improves usability of emitted events\n  useMediaListener(\"play\", () =\u003e alert(\"Play event was triggered\"), listener);\n\n  return (\n      \u003cMediaPlayer\n        url=\"some-url\"\n        onStoreUpdate={setMediaContext}\n      /\u003e\n  );\n}\n```\n\n## Documentation\n\n**@collaborne/media-player** categorizes its functionality as follows:\n\n*Note: Functions may belong to multiple categories. For example, the `\u003cVolumeButton /\u003e` is both a React Component and a UI Control.*\n\n- React Component\n- UI Controls: Components used to build player UI elements\n- Players: Ready-to-use player implementations\n- Custom Icons: Icons used for player controls\n- React Context\n- Context Providers\n- Hooks: React hooks that simplify package usage\n- MediaStore: Internal player storage\n- Events: Events triggered by player activity, many of which are similar to standard video/audio web events (see [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events)).\n\nLatest changes, types and interfaces [here](https://collaborne.github.io/media-player/docs/).\n\n## Debugging\n\nWe use [debug](https://github.com/debug-js/debug) package for logging events. As you can see in our [live demo](https://collaborne.github.io/media-player/),\nplayer provides you logs for native `\u003cvideo\u003e` play and pause events, and also when state is changed. To use it in any your environment(we used in our storybook environment)\nyou need to add to yours `process.env` a parameter of `DEBUG=*`, that will print all these logs in browser's DevTools.\n\n## FAQ  \n\n- **Q:** How to use player in a performant way? How to avoid rerenders?  \n **A:** Subscribe to events. We emit events for almost all use cases(`play`, `pause`, `timeupdate`, `durationchange`, ...etc).\n- **Q:** Do you support Youtube, vimeo sources?  \n **A:** At the moment, no. We support only files.\n\n## License\n\nApache-2.0 © [Collaborne](https://github.com/Collaborne)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollaborne%2Fmedia-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollaborne%2Fmedia-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollaborne%2Fmedia-player/lists"}