https://github.com/showrin/video-player
A HTML video player with basic functionalities.
https://github.com/showrin/video-player
css design-patterns jest testing typescript video
Last synced: about 2 months ago
JSON representation
A HTML video player with basic functionalities.
- Host: GitHub
- URL: https://github.com/showrin/video-player
- Owner: Showrin
- License: mit
- Created: 2020-08-24T17:13:03.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-26T05:53:35.000Z (almost 6 years ago)
- Last Synced: 2025-05-30T08:35:53.013Z (about 1 year ago)
- Topics: css, design-patterns, jest, testing, typescript, video
- Language: TypeScript
- Homepage: https://angry-shirley-396fd7.netlify.app/
- Size: 31.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# video-player
A HTML video player with basic functionalities.
## Demo
Go to the link: [https://angry-shirley-396fd7.netlify.app/](https://angry-shirley-396fd7.netlify.app/)
## Project Setup
Clone the repo first. To do so, go to the directory where you want to keep this repo. Then open the terminal from here and run the following command.
```
$ git clone git@github.com:Showrin/video-player.git
```
Then navigate to the repository using this command.
```
$ cd video-player
```
After cloning, if you are using **`yarn`**, install the required modules by running the following command.
```
$ yarn
```
Or use the following command if you are using **`npm`**.
```
$ npm install
```
After that, if you are using **`yarn`**, transpile typescript files by running the following command.
```
$ yarn tsc
```
Or use the following command if you are using **`npm`**.
```
$ npm run tsc
```
Now open the **`index.html`** file with any browser and you will get the following UI. Here you can play or pause the video. And you can also rewind and play forward the video.
## Dev Dependencies
This program has following development dependencies.
| Module Name | Version | Why it's used |
| ---------------------------------------- | ------- | --------------------------------------------------- |
| @babel/plugin-transform-modules-commonjs | ^7.10.4 | It's being used for using ES6 import-export in node |
| jest | ^26.4.1 | It's being used for writing and running tests |
| typescript | 3.1 | It's being used for compiling typescript file |
## Pseudocode
```
// -----------Create Video-----------
put the video element in a variable named video
create player instance from Player class
create videoPlayer instance from palyer.getVideoPlayer(video)
// -----------For play()-----------
fire video.play()
set isPlaying = true
// -----------For pause()-----------
fire video.pause()
set isPlaying = false
// -----------For forward(time: number)-----------
increase video.currentTime by time
// -----------For rewind(time: number)-----------
decrease video.currentTime by time
```
## Used Design Pattern: Factory Design Pattern
> **Here Factory Design Pattern has been used for implementing play(), pause(), forward(), rewind() functionalities**
First, the interface for `Player` is implemented.
```
interface PlayerInterface {
isPlaying: boolean;
played(): number;
play(): void;
pause(): void;
forward(time: number): void;
rewind(time: number): void;
}
```
Then, `VideoPlayer` class is implemented using the `PlayerInterface` interface.
```
class VideoPlayer implements PlayerInterface {
private source: HTMLMediaElement;
isPlaying: boolean = false;
constructor(source: HTMLMediaElement) {
this.source = source;
}
played(): number {
return (this.source.currentTime / this.source.duration) * 100;
}
play(): void {
this.source.play();
this.isPlaying = true;
}
pause(): void {
this.source.pause();
this.isPlaying = false;
}
forward(time: number): void {
this.source.currentTime += time;
}
rewind(time: number): void {
this.source.currentTime -= time;
}
}
```
Then, the `Player` **(factory)** class is implemented **that defines which player should be created**.
```
class Player {
getVideoPlayer(source: HTMLMediaElement): VideoPlayer {
return new VideoPlayer(source);
}
}
```
And now, it's time to create `VideoPlayer` from this Factory Design Pattern.
```
const videoPlayerSource = (
document.getElementById("js-video-player")
);
const player = new Player();
const videoPlayer = player.getVideoPlayer(videoPlayerSource);
```
## Run Tests
You can run tests using this command in the console.
```
yarn test
```
Or use the following if you are using npm.
```
npm test
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
And your changes will be visible [https://angry-shirley-396fd7.netlify.app/](https://angry-shirley-396fd7.netlify.app/) here after getting merged into the master.
## License
[MIT](https://choosealicense.com/licenses/mit/)