etesam913/custoplayer

A React.js npm package that allows for the rapid creation of customizable video players.

Hi 👋 ! I'm Etesam

I am a Software Engineer working at Balyasny Asset Management

Want to learn more about my experience?

• 🌐 Personal Website
• 📄 My Resume

Want to see some of my personal projects?

• 🔧 General Overview
• 💫 react-magic-motion
• 🎥 Custoplayer
• 💾 XP Newtab
• 📊 Euismod
• 🦊 Slick-Fox

Some of the languages/technologies that I am use frequently are:

• JavaScript (ReactJS)
• Python
• CSS
• HTML
• C#

What am I currently working on?

I am working on react-magic-motion, a react.js library that ✨ magically animates your components.

Where can you find me?

• Reddit
• CodeSandbox
• LinkedIn
• YouTube

My GitHub at a Glance 🔎

custoplayer's Issues

Create text tooltip for progress bar

When hovering over the progress bar a text tooltip should appear

• It should show the anticipated time if you were to seek to the hovered time
• It should also show when mouseDown on the progress bar

Fix progressBar3 progress overflow

• progress overflows out of bar in progressBar3

Create presets file

• Contains item presets
• Good for people who want a grab and go solution
• Values should be able to be overrided
• Presets can be named after colors (maybe?)
• Add a preset for the cypress tests (not exported from the lib)

Add branch rules

Make volume bar hide when not showing

Allow for focus on volumeBars & progressBars to support keyboard navigation

• Using left and right arrow keys on volumeBar/progressBar should update the values.

Convert scrubber active animation to use scale instead of height and width

• Animating height/width is slower and leads to ui shifting.
• Instead use scale property.
• Will require some exploration to figure it out

Fix double seek bug

• When seeking using the progress bar for a long time, a double seek will usually occur in safari
• Leads to bad user experience.

Fix bug where you cannot focus on volumeBar2

Make playIndicator default color be the same as the playButton default color

Configure docusaurus

• Follow the docusaurus docs page
• Create first iteration of the homepage
• Write docs pages for each component so far

Reduce framer-motion bundle size using optimizations

Follow the steps here: https://www.framer.com/motion/guide-reduce-bundle-size/

Fix bug where previewTooltip shows when video duration is not set

• previewTooltip should not show when video duration is not set because the text value defaults to 0:00

Add contributing.md page to docusaurus and to readme files

• Add the file to docusaurus for completion

Write error checking for when certain properties are not specified

• Let user know that the values prop has to specified
• Let user know that src attribute has to be specified

Fix volumeBar2 general bugs

• volumeBar2 is not go over the topProgressBar
• topProgressBar should not go in active animation when volumeBar2 is being dragged
• Fix bug where you cannot focus on volumeBar2
• min-height problem when scrubber is transparent, but scrubber border is not

Update volumeIcon 1

• Update the svg
• Animate the arc's using pathLength
• Make clicking on the button mute it.

Add fullscreen button

• Use the screenfull library: https://github.com/sindresorhus/screenfull
• Make sure it works on mobile as well.
• Create two icons

Add topProgressBar

Add the ability to add a top progress bar

• This is valuable as it allows for more space in the controls bar
  • A good configuration for mobile devices as there is limited horizontal space

Example code

values: {
  topProgressBar: {
    progressColor: '#a4c3f5',
    scrubberColor: "#a4c3f5",
    scrubberBorderColor: "white",
  }
}

Fix bug with progress overflow when scrubberColor is set to transparent

Add buffer progress to progress bars

• Buffer progress should show when the video is playing
• User should get ability to customize the color of it in progressBar object

Do First Deploy

Remove cypress & coverage files from package build

These are un-needed files for users

Add scrubber for volumeBar & progressBar

• Add a property to progressBar and volumeItem objects
• Should be able to customize the color and border of it

Add settings button

• Add ability to change video quality
• Add ability to change playback speed
• Add ability to enable subtitles
  • This is done through reading of vtt file

Example

// values
item2: {{
    id: "settingsButton1",
    buttonColor: "orange",
    options: {
        subtitles: true,
        playbackSpeed: [0.25, 0.5, 1, 1.5, 2],
        quality: true
    }
}}

// Video Children

<source id="custoplayer-1080" src='videoUrlGoesHere' type="/video/mp4"  />
<source id="custoplayer-720" src='videoUrlGoesHere' type="/video/mp4"  />
<source id="custoplayer-480" src='videoUrlGoesHere' type="/video/mp4"  />
<source id="custoplayer-360" src='videoUrlGoesHere' type="/video/mp4"  />
<source id="custoplayer-240" src='videoUrlGoesHere' type="/video/mp4"  />

Add marginLeft: auto, and marginRight: auto properties

To prevent all items from being pushed onto the left side of the controls bar when topProgressBar is set,
allow for the marginLeft and marginRight properties to exist on a CustoplayerItem

Add option to customize animation for controlsBar

• Add property to controlsBar object

  • animate: "opacity" | "movement"

• Check to make sure that the movement animation does not create a bug with keyboard navigation

Create currentTime & duration text

Create two new types of items

• currentTime: this is the current time of the video
  • Should update with the onTimeUpdate function
• duration: this is the video duration
  • Should update with the video metadata load

Allow for callbacks to be passed to video event handlers

Make sure to support all html5 events: https://www.w3.org/2010/05/video/mediaevents.html

Add customization options to volume bar/button

Some Ideas:

• Be able to change color of icon (changing fill css property)
• Be able to change volume progress color
• Be able to change volume bar background color

Add hideOnMobile property

When the size of the video is less than 768px hide all items with the hideOnMobile property.

Add controls bar customization

• Add ability to customize the color of the controlsBar
• Changing the color should change the default color of the previewThumbnail and volumeBar2 background

Add progressBar2 and progressBar3

• progressBar3 should be rectangular
• progressBar2 should be capsule shaped with padding

Do First Release

Setup Testing

Write unit tests using jest and react-testing-library.

Use playwright for integration tests.

Switched to cypress instead of playwright as it is difficult to test video properties in playwright

First item in settingsMenu is not always automatically focused when settingsButton is clicked

• Try disabling certain properties and see how the auto-focus is applied

Revise playButton1 & playButton2

• playButton1 & playButton2 are placeholder values
• Refactor by putitng them it own files

Create a video that showcases how to create a custoplayer

• Use Screenflow to create the video
• Have a split view that shows the player and the code

Provide ability to switch off subtitles

• When subtitles: true automatically add a button that says "None"
• Clicking on this will remove the subtitles

Create a default error page when no video is loaded, due to src not speciifed

Make progressBar dragging work on mobile devices

• MouseDown event won't get triggered on mobile devices

Link project board to repo

Deploy Docs with GitHub Pages

Setup docusaurus webpage with github pages:
https://docusaurus.io/docs/deployment

Create utility functions for video

Allow for the user to run a method that can

• Trigger fullscreen mode
• Pause / play video
• Change playback speed
• Change quality

Test the component on mobile using ngrok

• Clicking on the fullscreen button on iOS devices should open the native player.

Add volumeBar2 & volumeButton2

• volumeButton2 should be a different icon
• Implement different svgs for volumeButton depending on volume
• volumeBar2 should be vertical

Add Continuous Integration

Create GitHub action jobs for

• cypress tests
• jest tests
• eslint

Use codecov: https://app.codecov.io/gh/Etesam913/Custoplayer for testing coverage

Add play/pause/seeking indicator

This is important to show a clear visual indicator of what state the video is in.

• Show an icon when video is playing
• Show an icon when video is paused
• Show an icon when video is seeking

Create test for progress bar dragging

• Create a cypress test where the mouse down event is triggered on the progress bar
• Check to make sure that the video's currentTime is not 0.

Add support got <source> tags and <track> tags

• You should be able to specify tags and children of the html5 video player

  • This is important as video fallbacks are good
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

• Allowing for track files will slowly provide support for subtitles

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track