Show HN: Plopdown – HTML5 Video Annotator | Hacker News Reader

Show HN: Plopdown – HTML5 Video Annotator

plopdown.video

71 pointsspaceribs26 comments

This is very useful, personally I can see this working in lectures of all sorts. I wonder if this could be further expanded for social web annotations, like websites have had in the past. It could have groups/tribes (example: HN readers) to which you could subscribe and read their annotations. Kind of like Hypothes.is [0] or Diigo [1].

[0] https://web.hypothes.is

[1] https://www.diigo.com/premium

Thanks for the links, definitely going to check these out!

One of the things I'm working on now is the remote syndication aspect, everything is stored via PouchDB so it should be relatively easy for me to allow feeds as well as things like live collaboration

> I want to get better with RxJS

I've been really happy using RxJS outside of Angular. I know the author isn't claiming this is the case, but Angular adopting RxJS is a double-edged sword in that it seems many people equate RxJS with Angular. RxJS + React Hooks is a really powerful pairing to mitigate the hooks madness of more complex components. I use RxJS for the data flows and hooks just to bind the observable to a DOM rerender.

Agreed, definitely didn't mean to pigeonhole RxJS. There are so many times I've been saved in the last year from async bugs because of RxJS. That said, it took me almost 6 months of practice to be able to make my code readable and use it scalably.

I've actually come up with a solid rule of thumb for when it makes sense to use: If you have 2 async streams of events or data, that's at least 4 success scenarios you have to code for:

1. A has emitted, B hasn't

2. B has emitted, A hasn't

3. A and B haven't emitted

4. A and B have both emitted

Now at 2 sources (and ignoring the error cases) that's right on the edge of being able to mentally model it and not forget a case, but at 3 you have 9 cases, at 4 you have 16, etc. etc.

The branches and code you'd be creating to deal with this situation procedurally would be far more unreadable compared to the RxJS syntax. It was always a complex problem.

I am also using RxJS in React. I created a few hooks to make it life a bit easier. While I think it's useful for my use cases, I have the feeling a deeper integration would be even more useful (although I don't know how exactly that would look like, maybe better hooks than mine?).

Regarding Angular and RxJS, I don't think Angular really embraces RxJS (other than maybe the Async-Pipe). Actually I think it often feels awkward to work with RxJS in Angular, especially when you use observables that are not used via the Async-Pipe, unsubscribing for instance is annoying at best.

> Actually I think it often feels awkward to work with RxJS in Angular, especially when you use observables that are not used via the Async-Pipe, unsubscribing for instance is annoying at best.

I agree with this sentiment, we've been waiting patiently for observable inputs for a ridiculously long time: https://github.com/angular/angular/issues/5689, but I do have a pretty solid pattern for dealing with subscriptions these days:

1. Create one subscription as a private member of your class: https://github.com/spaceribs/plopdown/blob/4823f5017733ee785...

2. In your OnInit, subscribe and add that to your main component subscription: https://github.com/spaceribs/plopdown/blob/4823f5017733ee785...

3. Unsubscribe from everything in your destroy method: https://github.com/spaceribs/plopdown/blob/4823f5017733ee785...

This is great! I've always been interested in video related products and services and you've done a pretty good job on getting the annotations overlay the video.

> I switched away from Vue as soon as I hit my first refactor. I struggled to rebuild big parts of the application because Vue allowed me to do everything and nothing. I know I probably could have done this in React or continued with Vue, but because of the following reasons I decided against that

Funnily enough, I went through a similar thought process but between React and Vue. What's uncanny is that it was also for a video annotation service I was building (https://tagx.io/). I ended up going with Vue and like Plopdown, used Plyr (https://plyr.io/) as the video player (also a great project). Your three reasons for not continuing to use Vue, I'm wondering if that's really because Angular was your comfort zone?

  [1] Typescript + Vue works well (that's how I built mine). 
  [2] You could have used RxJS with Vue. 
  [3] Vue has less boilerplate code than Angular and wouldn't have made this project any more difficult to maintain

Oh totally, I'm not gonna pretend that it wasn't because I knew how to organize an Angular project.

That said, I know how I'd manage multiple projects via NX, and knew the rules to effectively maintain this project for the foreseeable future.

I really do love Vue, but I need structure, because as a human I have terrible memory. I don't love unit testing, and I barely love integration testing, so strict typing and good naming is key to my style of coding.

I hit a wall with Vue, which I've similarly hit with AngularJS, at some point I hit a level of complexity that Angular doesn't allow, but Vue does.

> That said, I know how I'd manage multiple projects via NX, and knew the rules to effectively maintain this project for the foreseeable future.

I believe NX is aiming to bring in Vue support through their plugin system, but yea, I understand that it would make it easier in your case since it already supports Angular. If you like the monorepo setup and looking for a more generic solution then checkout lerna (https://github.com/lerna/lerna).

> I really do love Vue, but I need structure, because as a human I have terrible memory. I don't love unit testing, and I barely love integration testing, so strict typing and good naming is key to my style of coding.

Vue, as simple as it is, can have structure and easily adopt to large scale projects. As I mentioned in my previous comment, you would have not had any issues using TypeScript with it.

> I hit a wall with Vue, which I've similarly hit with AngularJS, at some point I hit a level of complexity that Angular doesn't allow, but Vue does.

What exact issues did you have with Vue? Just curious as nothing you've mentioned so far are actual issues, but rather, you having better experience with using Angular.

> looking for a more generic solution then checkout lerna (https://github.com/lerna/lerna).

Thanks, I've actually used lerna alongside NX in the past before! NX doesn't have a great system for publishing packages as they believe it defeats the purpose of a monorepo, using them in tandem seems totally fine.

> What exact issues did you have with Vue? Just curious as nothing you've mentioned so far are actual issues, but rather, you having better experience with using Angular.

I found service ownership and instancing to be cumbersome. When I'm communicating data to a bunch of different components, I want to know where in the hierarchy that service lives and either allow the same service to be used by everything or make multiple clones.

Because of the way vanilla Vue is architected, it seems like the component hierarchy and the data hierarchy are conflated, which I personally don't like.

Very cool project and slick implementation. How are the plops rendered on the homepage video without the visitor having the extension installed? My hunch is that there is a JS file that is included but would be curious to learn more.

Sure! this is actually one of those things that's super nice to do in Angular and NX. The website app and the extension app both use the same component as a dependency:

https://github.com/spaceribs/plopdown/blob/master/apps/websi...

https://github.com/spaceribs/plopdown/blob/master/libs/plopd...

The "plopdown-overlay" library also contains the components which find and attach to videos, something that the website doesn't need obviously, so the website only grabs and displays this component.

Where angular comes in is at this line: https://github.com/spaceribs/plopdown/blob/master/apps/websi...

See, loading arbitrary images and audio is something that needs to be done at a pretty low level in plopdown, or at least much further down than just the overlay component. Here, I'm overriding the default behavior which would load things through the extension, and replacing it with one that works on the web.

Video annotations are also interesting to me. In my case for tourism/walking videos there are requests for additional infos ontop of the video. On YouTube it's Subtitles yet WebVMT [0] seems an interesting format for non-destructive info-layers. It would be great to have exports to subtitle format as a fallback and possible integration to WebVMT (image / map thumbnail).

Another use case could be cartoons with (localized) speech bubbles.

[0] https://webvmt.org/

That's really cool! I hadn't even thought of a map integration but it makes a lot of sense for livestreams! In my case, for things like Netflix or Hulu content, it would be awesome to encode the exact location a scene was filmed.

How about just a scene-reference id/tag to look up anything about a scene or clip? The script, who appeared, when and where it was filmed, relationships to other scenes...

This looks very nice for teachers. But having to install the extension is the limiting factor that doesn't make it practical for mass use.

The demo is on the homepage, fyi: https://plopdown.video/

I think the next real gamechanger for this project will probably be "plopdown.video/share/xyz" links.

You should be able to store a track pretty much anywhere (github gists, pastebin) then associate them with a video and share the setup via that link. If you don't have the extension installed, it would show a preview and will prompt you to install the extension before proceeding.

I built something similar that might work depending on your use case and doesn't require installing an extension. Check out https://tagx.io/

However, it doesn't overlay any annotations over the video like plopdown does (which is a great feature!), only on the side of the video.

Very nice project! Few comments thought:

- First thing I tried was to move the annotation

- I would use this extension for reading little movies/series analysis during the video (imagine Alt Shift X doing this stuff for series on Netflix or whatever, could be very nice).

Otherwise, very good job.

Thanks for the feedback! I'll add it on to my list of menu/settings options for toggling and temporary hiding of annotations

Very cool idea! I totally agree with your justification for why this is needed. This could add a lot of value for people especially in quarantimes. Good luck.

Thanks! I've always been interested in this sort of stuff, and my hope is that I can develop and maintain this project for as long as possible. To me, these kinds of critical outlets are what make the internet such an amazing place!

Is there some to inspect the introduction track file? Couldn't see an export option. Is it the docs/assets/minnie_facts.vtt file in the repo?

yep, that's correct, editing is pretty prickly right now though, editor is on it's way and is probably going to be a devtool.

Everything is validated against this JSONSchema after being converted from the VTT file: https://github.com/spaceribs/plopdown/blob/master/libs/plopd...

Thanks, will keep my eyes peeled for the editor. Keep up the exciting work!

This is amazing!

Reply on news.ycombinator.com