video archiving JavaScript app
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
test
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE.md
README.md
app.js
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
netlify.toml
package-lock.json
package.json
vreellogo.png update readme and add logo Aug 12, 2017
webpack.config.babel.js

README.md

vReel

vReel reel-to-reel SVG logo

by Dan McKeown

https://djmblog.com

Table Of Contents

features

This project provides the following features:

  • Upload videos

    • Rename copied video file using user input plus random hash
    • Add video information, including file name, using via LokiJS [a MongoDB-like database that persists to JSON] to vspotindex.json
    • Video files are saved to /public directory inside app directory
  • View videos

    • Playable latest video is shown in middle of home page
    • Twenty next most recent videos [with year metadata > 2000] are shown in column on the left
    • Clicking on video launches /thisvideo/ page with video player
    • Each video has a perma-link

screencast

Screencast 13 on Youtube walks through installing and using vReel.

QuickStart

  1. Do the installation steps on your system's terminal
  2. Upload videos from your computer

design

  • vReel is built with ReactJS components (the project actually uses Preact in React comptability mode) which make up the front-end of the project
  • the layout uses CSS grid
  • the videos are served from the ExpressJS server, and due to the prohibitive cost of streaming large files through NodeJS, the video perma-link web pages are served directly by the Express server instead of by the (compiled) React components via RESTful APIs like for the rest of the site's functionality
  • the latest video uses an iframe to serve the video via Express
  • the left column uses DOM storage to save info on what video links to put in the list, and since DOM operations like that are async there is a refresh button there
  • API calls to the backend are done by the Axios library

requirements

  • Mac, Linux or Windows computer or server
  • NodeJS and NPM

installation

  1. Clone the project: git clone https://github.com/pacificpelican/vreel.git
  2. Change directory: cd vreel
  3. Build: npm install
  4. Serve the site: npm run vreel
  5. Visit the site in a browser: http://localhost:3004

usage

  • vReel is designed to be a video file archiver
  • metadata about the video (name, description, year, actor 1, actor 2) is optional but it is recommended as it is added to the [JSON-file-based MongoDB-like LokiJS] database

KnownIssues

  • video list will only populate with movies that have a year and when it is later than 2000
  • random-ish hash added to file names does not roll until app restarts
  • all files are asssumed by app to be videos; behavior when uploading other files untested
  • no accounts or security to speak of--currently targeting personal installs via command line + Chrome; or Electron or NWJS packages

license

vReel is copyright (c) 2017 Dan McKeown

Licensed under ISC License

BuiltWith