Video Player Manipulation

Interactive comments for the HTML5 Video API. Comments are tied to timestamp and sortable using the HTML5 Drag and Drop API.

Table of Contents

• Setup
• Getting up to speed
• Workflow
• Issues

Setup

Local setup is simple and only requires npm.

# clone repo
git clone https://github.com/hi-matbub/video-player-manipulation.git

# cd to the repo
cd video-player-manipulation 

# install deps
npm install

# run dev server :tada:
npm run dev

Additional available scripts to be used throughout development and testing.

# execute test suites
npm run test

# run eslint
npm run lint

# run eslint and fix 
npm run lint:fix

Getting up to speed

Video Player Manipulation
├── ...
├── index.html
├── package.json
└── src
    ├── App.vue
    ├── main.js
    ├── helpers/
    └── MediaPlayer 
        ├── MediaPlayer.vue
        ├── Comments.vue
        └── Controls.vue

A small but scaleable application, the video functionality can be broken down into 4 primary components. Below is a gist of what to expect inside each.

src/App.vue

Contains the majority of major event listeners that get sent down the tree and are accessible via this.$props.

• timeupdate to watch the current postion of the timestamp
• onresize for dynamic page height.
• ended to dectect end of playback.

Props accessbile from here

src/MediaPlayer/MediaPlayer.vue

Home of the <video> element. Uses $props.currentTimestamp to compare and watch the timestamp of each comment and reveal them accoring to a match in time.

See also /src/helpers/watchComments
Side note: a sorting algorithim to group comments according to moments would surely improve effenciy in a real world environment.

Also contains the grid layout which is verbose and needs attention see #ISSUE for more details.

src/MediaPlayer/Comments.vue

Uses v-for to list comments in a div.container. Drag and drop methods are housed here.

Also constantly watching the page width using the $props.windowWidth to handle draggablility as well as postion on presentation. The position on presentation has it's known issues.

Conditional logic

If the screen is greater than or equal to 960px.

• Comments will append to random locations throughout the grid.
• Comments are draggble

Else page width is less than 960px

• Comments append to the first grid container "as-is".
• Comments are not draggable

src/MediaPlayer/Controls.vue

Contains external video controls, easy to sync with video playback using $props.currentTimestamp and $props.videoIsPlaying.

Workflow

This project uses Conventional Commits, conventional-commit-helper and is enforced with a pre-commit hook to verify no lint errors and all tests are passing before each commit. As a final precautionary measure we have a GitHub workflow script to catch any lint errors for each push.

Matthew Bub