
Show HN: Recreation of Shrek's DVD menu as an SPA with routes (desktop only) - JansjoFromIkea
https://dvd-rom.netlify.com/
======
JansjoFromIkea
Some quick notes:

\- Logic is almost entirely specified in JSON so it could be easy to make
another one

\- I couldn't get it working on mobile as the `playsinline` attribute was
being ignored, rather than just pushing a broken thing on people I decided to
squash it altogether, I've very quickly thrown together a version without the
block here on a `mobile` branch if anyone wants to investigate
[https://5e8f0bd4606eb6000765706a--dvd-
rom.netlify.com/root](https://5e8f0bd4606eb6000765706a--dvd-
rom.netlify.com/root)

\- I'm clearly not very good at ripping menus from DVDs!

\- I couldn't figure out at all how to get the video menu hover images from
the DVD, they're definitely stored in there somehow though

\- Have it muted on launch cos I figure otherwise would both drive people nuts
and would stumble into some video playing restrictions

\- It seems to bug out a bit when swapping video files (as can be seen in some
of the special features entries)

\- reach/router was used to handle transitions between pages and routing

Actual menu footage:
[https://www.youtube.com/watch?v=GBi5cJ64Nf8](https://www.youtube.com/watch?v=GBi5cJ64Nf8)

~~~
brudgers
I'd be interested in reading the story of how all this was done.

~~~
JansjoFromIkea
Hey, it really wasn't that complicated! Tbh the stubborn choice to stick with
youtube as the host source was by far the hardest part as it limited what I
could do hugely (e.g. you can't pause youtube videos without an annoying
popover...)but it means someone could just use youtube, a few image assets and
update the JSON files to do another dvd menu. If you were using MP4s directly
it'd be so much easier...

\-------

What I knew:

1\. DVD's break the video into these .VOB files within the VIDEO_TS directory

2\. the menus, their transitions and their static content seem to be in the
VIDEO_TS.VOB file. In the case of Shrek this was a 26 minute video which
contained the menus in three different languages

3\. the data relating to the menu is contained within a corresponding .IFO (or
maybe .BUP, I forget) file which were overall very basic from what I could see

4\. Ultimately most DVDs could be easily charted into a flow chart of menus,
transitions(videos that cant be skipped) and videos. So a JSON file that
defines an overlay for a video wrapper and controls its actions could largely
mimic the process.

5\. I never actually investigated how subtitles and audio are handled but I
assume it's not too complex

\-------

What I done:

\- Converted VIDEO_TS.VOB to mp4 with ffmpeg: this could be done way better
I'm sure. I know nothing about VOB but ffmpeg was definitely (but
inconsistently) picking up the endpoints of videos within the container so I
had to do a stream record

\- The tools I could find for reading the .IFO data file were very very old
and for windows, struggled on my computer via Wine, I think theoretically you
could generate most the data straight from these files but it was faster to
just do it manually, I mocked up what the highlight icons look like (the ones
for scene select were way too hard though)

\- I couldn't find a way to even view the styles for highlights over selected
buttons so I just took the two most generic ones and used them where I could

\- Included the functionality of audio/subtitles via local storage, I assume
this could easily be relayed into the video component if needed too

\- Tried to keep the Shrek specifics separate from the JS but ultimately cut a
few corners, should be easy to fix

\-------

As far as motive, I was always just a bit curious as to how some menus worked.
Discovering they're all just always playing a video file in the background was
one of those "oh... I guess that was really obvious actually, why was I
assuming something more complex??" moments.

~~~
brudgers
Thanks! Have you thought about making a blog post about it?

~~~
JansjoFromIkea
I feel like someone who knows more about how DVDs work would be better
equipped to do so. It was really weird having to look up this stuff though,
reading dead forums from 2003 explaining how to do all this stuff to edit
menu's within DVDs with obviously smart people who really clearly knew a lot
about a thing where there's absolutely no value in knowing how it works
anymore, they've probably forgotten themselves... Then discovering the tech
they were using at the time is still the exact same tech (right down the
versions in some cases) you've to use to try and read these files.

If I could stabilise it a bit more I'd like to make a little gallery of DVD
menus. The hardest part is the tedious recording of timestamps at that stage.
That and maybe a talk on the value of doing deliberately worthless side
projects...

------
bryanmgreen
Cool. I miss DVD menus and their easter eggs.

