seitenbau / sbideo

A simple video archive including video transcoding

SBideo

DEMO: https://seitenbau.github.io/SBideo/

A very simplistic video archive including video transcoding and following features:

• web interface for listing all videos in a flexible multi-level folder structure
• video player
• editable metadata for videos and folders e.g. title, description, speaker, tags
• ultra fast client-side fuzzy search through video metadata
• async video transcoding from any ffmpeg supported format to mp4
• simple file system based data structure, no database required
• deep links for every video, including exact start time
• integrated web- and pseudo-streaming server (express)
• very lightweight client-side code: total 28kb JS + 6kb CSS gzipped (based on preact-cli)

Basic Usage

The easiest way to run SBideo is using Docker, there are ready-built containers available at Docker Hub.

Frontend Container

Just pull the frontend container and mount it to your local data folder. Look at the the data folder in this repo as a reference for your directory layout.

docker pull seitenbau/sbideo
docker run -it -d -P -p 3000:3000 --mount type=bind,source=/data,target=/data sbideo:latest

Now the frontend is available at http://localhost:3000/

Transcoding Container

The SBideo frontend is only able to handle mp4 video, as it's the best format for showing videos on the web. To convert other video files to mp4, SBideo comes with a transcoding option which handles all sorts of video formats. All the video files you put in your /incoming folder will be automatically transcoded and transferred to the /data folder in this example:

docker pull seitenbau/sbideo-transcoder
docker run -it -d -P --mount type=bind,source=/incoming,target=/incoming --mount type=bind,source=/data,target=/data sbideo-transcoder:latest

Now every time you add video files into the folder incoming, the transcoding will start automatically. After transcoding is done, the new videos will be visible in the frontend.

Security

SBideo is kept very simple. Therefore, it has no built-in permission management etc (see #9). Everyone who is able to access the frontend is allowed to edit the video meta data. In case you want to restrict editing rights, you may want to simple restrict POST requests to the server via a reverse proxy.

Development

SBideo is based on preact-cli; for detailed explanation on how things work, checkout the CLI Readme.

Basic CLI Commands

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn dev

# build for production with minification
yarn build

# test the production build locally
yarn serve

# run tests with jest and preact-render-spy
yarn test

# code linting
yarn lint

Migrate script

In case you want to migrate an old file based video archive, check the branch migrateScript; maybe it helps.

Credits

This project was initially created at SEITENBAU Hackathon 2017.

Demo videos: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

sbideo's Issues

Show folder of active video next to video title

Build & deploy with docker: remove unneeded build files

Things which can be removed:

• gradle files
• deb folder
• src/ansible folder (?)
• ...

An in-range update of react is breaking the build 🚨

There have been updates to the react monorepo:

• • The devDependency react was updated from 16.6.1 to 16.6.2.

• The devDependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Remove tooltip lag

Is there some way to remove this timeout, at least when showing the tooltip?
The lag is annoying :-)

SBideo/src/components/videoLink/index.js

Line 22 in 1a960dc

this.timer = setTimeout(() => {

Feature Request: Number of views

As operator of the video platform or as creator of a video

I'd like to know how often a single video and in total all videos are viewed by users

to get a feel for how often the platform is being used and which content is being used more often.

Transcoding starts while video file is still copying (network mounts only)

error "Device or resource busy"
Actually this should be prevented by the awaitWriteFinish option of chokidar; but it seems that is doesn't work on network mounts?

Support for Live-Streaming

Editmode: Syncing the data does not update tags

On edit, when fetching the metadata from the server and the fetched data is different, an alert is displayed that the data was synced from the server, however the tags in edit mode do currently not update to the fetched state .

Search: hide folder if it has no matching videos

Continue watching video at last position

• When returning to sbideo, continue watching the video where you left off is really useful, and probably easy to implement
• Continuing the video at the last position should only happen, when the user has watched a significant part of the video and probably wants to continue at the last position and not from the start

Transcoding: support auto-concatenation of video files

Move videos between folders via UI

Also implement a way to rename and add folders?

Auto-build a docker image

e.g. https://blog.hasura.io/an-exhaustive-guide-to-writing-dockerfiles-for-node-js-web-apps-bbee6bd2f3c4

TravisCI is now already running, could be used to build the image: https://docs.travis-ci.com/user/docker/

FYI @kistenjunge @edmund-wagner

Add hint for unsupported browsers

Since we want to use modern technologies we may want to add a hint if someone uses an unsupported browser.

Demo of the app, e.g. on github

It would be nice to have demo online to try the app on github directly

An in-range update of nodemon is breaking the build 🚨

The devDependency nodemon was updated from 1.18.5 to 1.18.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

nodemon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v1.18.6

1.18.6 (2018-11-05)

Bug Fixes

• restart on change for non-default signals (#1409) (#1430) (521eb1e)

Commits

The new version differs by 1 commits.

• 521eb1e fix: restart on change for non-default signals (#1409) (#1430)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Support for deep links to directly link to a video/search term

It would be great if the URL would change after clicking on a video or entering a search term, so the user can share the direct link to someone else.

• generate hash of video file to have a unique identifier

Add a nice design

Edit meta data via UI

Currently the video meta data can only be edited manually by editing the JSON files in the file system. It would be helpful to add an UI for that which allows to edit

• video title
• video description
• speakers
• tags

To keep it simple I would not support the deletion of videos through the UI. Moving a video into folders could be supported later on (#10).

The most important question: do we, and if yes: how do we handle permissions?
Currently I see these options in order of my favorites:

1. don't have permissions at all: everyone with access to the frontend is allowed to edit meta data
2. handle permissions via reverse proxy, e.g. define an URL like /edit which is password protected by the proxy. This makes it very simple and flexible, e.g. LDAP modules could be used.
3. implement LDAP support in the application

One edit button -> display input fields for all meta fields + if possible auto-completion
One save button
One cancel button

fix column position

Currently the columns jumb after using the search function.
It would be more usable, if the columns stays on same place after searching for content.

Tooltip position outside browser window

Sometimes the tooltips are shown outside the window so not everything is visible

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

chokidar osx only

Hey

mir ist aufgefallen das wir chokidar nutzen.
as Module ist leider nur für OSX. Unter Linux läuft es nicht.

Set page title for selected video

Would be nice to see the title of the selected video directly on the browser tab

An in-range update of preact is breaking the build 🚨

The devDependency preact was updated from 8.3.1 to 8.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

preact is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for 8.4.0

The cat is out of the bag 🙌 We finally revealed on what we have in store
for the next major version of preact which will be called Preact X 🎉 To give
you a sneak peak of what will be included check out this talk over at this.javascript
video, slides.
It's hard to make an estimate right now on when it will be released, but rest
assured we are nearly done and are working on upgrading the ecosystem
(cli, router,...) to ensure a smooth release.

That said we very excited about recent community contributions. This release
contains some awesome performance enhancements brought to you by @lowaa and
@rpetrich. On top of that there are some minor bug fixes and a lots of
improvements to our typings.

Thank you so much for everyone involved 👍

• Perf: Improve adding and removing large trees 🎉 (#1211, thanks @lowaa)
• Drain render queue in a single micro task 🎉 (#1135, thanks @rpetrich)
• Fix missing build when installing from git (#1251, thanks @garybernhardt)
• Fix invalid ref invocation (#1235, thanks @developit)
• Fix cloneElement test (#982, thanks @decadef20)
• Reorganize and improve render unit tests (#1199, thanks @andrewiggins)
• Improve componentDidUpdate tests (#1198, thanks @andrewiggins)

TypeScript Improvements!

• Add onInvalid form event (#1221, thanks @namankheterpal)
• Fix h() overloads (#1246, #1214, thanks @gpoit, @garybernhardt)
• Fix AnyCompoent type (#1249, thanks @scurker)
• Use proper type for key (#1248, thanks @wojtczal)
• Add boolean as a component child (#1219, thanks @KasparEtter)
• Add onError image event (#1209, thanks @jackmoore)
• Add support for defaultProps (#1181, thanks @Alexendoo)
• Fix cloneElement definition (#1197, thanks @hiddedejong)

Flow improvements!

• Fix typings for [email protected] (#1230, thanks @ngyikp)
• Refine options flow type (#1204, thanks @reyronald)

README Improvements!

• Add Ultimate-Guitar (#1244, thanks @JiLiZART)
• Add logo to README (#1243, thanks @reviewher)
• Add section for babel@7 (#1212, thanks @38elements)
• Remove duplicate project (#1192, thanks @stephenmathieson)

Commits

The new version differs by 79 commits ahead by 79, behind by 3.

• 3a35a89 8.4.0
• 86c7e5a udpate deps
• 19f77d3 Merge pull request #1251 from garybernhardt/npm_installable_from_git
• ca2cb6c Merge branch 'master' into npm_installable_from_git
• 95075f4 Added "onInvalid" form event in TS (#1221)
• 58e1927 Build properly when installing from git
• 377e31b [types] Add more type tests for h function (#1246)
• 3bbcdcc Merge pull request #1214 from garybernhardt/reverse_h_type_definition_order
• 0aece17 Merge branch 'master' into reverse_h_type_definition_order
• b243a5e Merge pull request #1249 from scurker/typescript/any-component
• 42c92b6 fix AnyComponent with ComponentConstructor
• cd807ce Merge pull request #1244 from JiLiZART/patch-1
• 47cd310 Merge branch 'master' into patch-1
• 7dda9a2 Merge pull request #1248 from wojtczal/fix-inconsistent-key-property-type
• f3d7a71 use Key type for Attributes interface key property

There are 79 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Feature Request: Jump to exact time via deep link

Just like youtube, it would be nice to jump to an exact time in a video , for example something like https://myvideoapp.net/videoId/bla/?t=15m21s

Videolink titles' fontsize is too small on lower levels