Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benwiley4000/win95-media-player
💿 Back from 1995, and running on your website
https://github.com/benwiley4000/win95-media-player
audio media-player react react-component video windows95
Last synced: about 1 month ago
JSON representation
💿 Back from 1995, and running on your website
- Host: GitHub
- URL: https://github.com/benwiley4000/win95-media-player
- Owner: benwiley4000
- License: mit
- Created: 2019-04-19T22:56:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-07T12:08:14.000Z (over 2 years ago)
- Last Synced: 2024-06-11T18:02:45.334Z (6 months ago)
- Topics: audio, media-player, react, react-component, video, windows95
- Language: JavaScript
- Homepage: https://benwiley4000.github.io/win95-media-player/
- Size: 23.9 MB
- Stars: 64
- Watchers: 7
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- starred - benwiley4000/win95-media-player - 💿 Back from 1995, and running on your website (JavaScript)
- awesome-os - win95-media-player - media-player/) | (<img src="media/icons8-windows-11-48.png" alt="logo" width="36"/> WINDOWS)
README
### Please note that open-source maintenance is not my main focus at the moment.
I will not be investing significant effort in the very near future to review and address issues on this repository. However I do want my software to be useable!
If you have an issue that must be resolved for your work, please open a pull request to fix it, and send me a direct email to make sure that I see it. I ignore most messages from GitHub these days.
I'm also happy to help out if you have a question about how to use the library.
My email can be found [at the top of this commit](https://github.com/benwiley4000/cassette/commit/d1a828ac146f357adec963ccfaad56a48155b8b6.patch).
Keep in mind that I have a full-time job and a personal life as well as other hobbies that have taken priority over open source, so I might not respond immediately. But don't hesitate to follow up after a few days if you think I've missed your email.
# Win95 Media Player
A React media player component inspired by the Media Player app that shipped with Windows 95 (one of the early versions of Windows Media Player).
Works on the web, in an Electron app, or anywhere ReactDOM will run!
### [See it live!](https://benwiley4000.github.io/win95-media-player/)
Under the hood we rely on two React component libraries:
- [Cassette](https://github.com/benwiley4000/cassette), which powers the media playback itself
- [@arturbien](https://github.com/arturbien)'s [React95](https://github.com/arturbien/React95), UI components built to resemble Windows 95
## install
```console
npm install win95-media-player
```
## quick start
The first thing you need is a working React application. If you don't have one, you can try [create-react-app](https://github.com/facebook/create-react-app) to skip all the annoying parts of setting one up.
After that, adding Win95 Media Player to your app is simple!
Assuming you have this in your html...
```html
.player {
/* width can be anything, this is just a suggestion */
width: 350px;
}
```
Just run this JavaScript:
```jsx
// JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import { MediaPlayer } from 'win95-media-player';
const playlist = [
{
url: 'https://archive.org/download/CC1301_windows_95/CC1301_windows_95_512kb.mp4',
title: 'Computer Chronicles - Windows 95'
}
];
ReactDOM.render(
,
document.getElementById('app')
);
```
And you should have a working MediaPlayer on your page! It should look something [like this](https://benwiley4000.github.io/win95-media-player/quickstart.html).
## api
### MediaPlayer
A fully-functional media player component. Accepts all the props accepted by `MediaPlayerUI` and Cassette's [`PlayerContextProvider`](https://benwiley4000.github.io/cassette/styleguide/#playercontextprovider)
### MediaPlayerUI
The UI component used by `MediaPlayer`. If you're building a more complex media player app with Cassette, you can render this directly inside of a React tree wrapped by a `PlayerContextProvider` to hook into the surrounding `playerContext`.
#### props
| Prop name | Prop type | Default value | Description |
| ---------------- | --------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `getDisplayText` | Function | `track => track.title` | Receives a [track](https://benwiley4000.github.io/cassette/styleguide/#track) object (or `undefined` if none is active) and returns a string of display text |
| `showVideo` | Boolean | `false` | A boolean which must be set `true` to display video |
| `fullscreenEnabled` | Boolean | `false` | If set `true`, adds a maximize button to the title bar which will trigger fullscreen mode |
| `className` | String | | An optional CSS class name to pass to the outer window div |
| `style` | Object | | An optional React style object to pass to the outer window div |
## special thanks
[@felixrieseberg](https://github.com/felixrieseberg)'s [windows95](https://github.com/felixrieseberg/windows95) app allowed me to play around with the *real* Windows 95 Media Player so I could extract the concept for this project.