Code Monkey home page Code Monkey logo

win95-media-player's Introduction

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.

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!

Under the hood we rely on two React component libraries:

install

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 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...

<style>
  .player {
    /* width can be anything, this is just a suggestion */
    width: 350px;
  }
</style>
<div id="app"></div>

Just run this JavaScript:

// 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(
  <MediaPlayer
    className="player"
    playlist={playlist}
    showVideo
    fullscreenEnabled
  />,
  document.getElementById('app')
);

And you should have a working MediaPlayer on your page! It should look something like this.

api

MediaPlayer

A fully-functional media player component. Accepts all the props accepted by MediaPlayerUI and Cassette's 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 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's windows95 app allowed me to play around with the real Windows 95 Media Player so I could extract the concept for this project.

win95-media-player's People

Contributors

benwiley4000 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

win95-media-player's Issues

Needs changelog before next release

The next release will include:

  • Getting rid of React.memo, already done in master (this is a fix which should restore compatibility for React 16.3+).
  • Potentially #8?

Rewind/fastforward buttons don't work on touch screens

Kind of low priority from a useability standpoint because why would anyone use those buttons instead of the progress bar if they're just trying to consume a piece of media, but I mean.. in the spirit of being windows 95.. it should be fixed.

TypeError: "exports" is read-only

Hello, I'm trying to use this for a personal project but I'm running into this issue.
My class is like this:

import React from 'react';

import { MediaPlayer } from 'win95-media-player';

const VideoPlayer = ({onHide, video, title}) => {

    const _handleClose = () => {
        onHide('lettoreVideo')
    };

    const playlist = [
        {
            url: '../assets/' + video,
            title: title? title : 'Windows Media Player'
        }
    ];

    return (
            <div className="players-container">
                <MediaPlayer
                    className="player"
                    playlist={playlist}
                    showVideo
                    fullscreenEnabled
                />
            </div>
    );
}

export default VideoPlayer;

But upon adding and running it i get the error

./node_modules/win95-media-player/lib/components/ProgressControl.js/<
C:/Users/user/Documents/GitHub/project/node_modules/win95-media-player/lib/components/ProgressControl.js:255

  252 |   return ProgressControl;
  253 | }(React.PureComponent);
  254 | 
> 255 | module.exports = playerContextFilter(ProgressControl, ['currentTime', 'duration', 'onSeekComplete']);

Cheking the internet and the ProgressControl.js file it seems like you can't mix

import MediaBtn from './MediaBtn';

together with

module.exports = playerContextFilter(ProgressControl, ['currentTime', 'duration', 'onSeekComplete']);

but instead you should use

export default playerContextFilter(ProgressControl, ['currentTime', 'duration', 'onSeekComplete']);

which kinda fix the error (if I change it in the node_modules folder) but I run into other issues.
I'm not good with react or even js so I can't really help, I could't even understand where that file comes from ;p

not released yet

npm is giving me some spam warning when I try to publish... so if you're trying to install and can't, this is why. should be published later today - inshallah!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.