matthewbub / video-player-manipulation

Interactive comments tied to html5 video API
https://video-player-92373.web.app/
3 stars 0 forks source link
javascript video vuejs

Video Player Manipulation

Vue Style Guide Firebase Hosting Jest

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


demo

Table of Contents

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.

Props accessbile from here

Prop Type Description
comments Array array of comments
currentTimestamp Number current timestamp of video
videoIsPlaying Boolean detects if video is current playing
windowWidth Number detects current width of window

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.

Else page width is less than 960px

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