16 ms·

In-Flight Entertainment Challenge

127 points by jonaraphael 4y ago

Recreating Delta's in-flight entertainment UI in ReactJS between on a flight between NYC and SFO. [Post by a friend of mine]

i2ksbu2b 4y ago
html width 100% height 100% overflow: hidden Please don't do this. I would love to try it, but it's unusable on phone even on desktop mode.
- mynameisvlad 4y ago
  Considering it was made in less than 7 hours with no access to the internet, I'd excuse hacks. Edit: Especially since it's called out as a constraint: > Don’t worry about production quality, just re-create as much of the look and feel of the UI as quickly as possible. No accessibility, responsive design, localization, etc; you just want something you can run through a user test.
  - i2ksbu2b 4y ago
    Maybe should have spent less time to not have time to write overflow hidden then.
    - mynameisvlad 4y ago
      I mean they did it so they didn’t have to deal with a whole class of problems (making it look and work well on a phone). For a 7-hour hackathon that seems entirely reasonable.
      - notahacker 4y ago
        Realistic constraints too, since the original UI was designed to work with specific devices at specific screen sizes, not as responsive.
- scohesc 4y ago
  For a very _very_ amateur web developer, why would you not want to design a webpage like this? What difficulties would you run into if you designed a web-app in this way?
themanmaran 4y ago
Fun challenge, but reminds me of my major pet peeve with the Delta inflight UI: The landing page looks empty! I frequently think it's broken or still loading. All it features is the "New Releases - View" box in the bottom. I would expect to see something else there. Images of the first three featured movies perhaps? Anything other than the blank blue background. (Dear delta engineers on HN, please add some preview images to this page).
- flutas 4y ago
  > (Dear delta engineers on HN, please add some preview images to this page). Delta (most likely) doesn't have actual engineers that handle the day to day work on the IFE systems, most of it is outsourced. I can't remember if they were a client or a not, but a lot of IFE systems (even byod ones) are sold by Panasonic and they basically run on a system that somehow felt worse than a RPI 3, and the bugs.... while working on a system I saw the same IP assigned multiple times to client devices. Also, a fun fact I recall. Last I heard (as of about 2018) media updates on planes required a tech to meet the plane at an airport and hot swap a HDD in a special enclosure. https://www.panasonic.aero/our-offerings/ https://www.panasonic.aero/our-offerings/
  - jaywalk 4y ago
    Delta's latest IFE is developed in-house and is actually quite nice. Their previous IFE (currently on most planes) is Panasonic.
hypertexthero 4y ago
Here’s another challenge: Create fun games to play in these flights. The games available are usually poor and slow. Is it a technical limitation such as too many screens and not enough processing power to go around? Or maybe no good HID (Human Interface Device) controllers? Touch-screens should be okay, especially for turn-based games, but maybe continuously pushing your finger against the screen would make the person seated in front angry after some time? Perhaps Management doesn’t realize that video games are a popular thing? Or is this just too much of a first-world problem and not worth the effort from the airline companies? I’d love to see games like Rogue, X-Com, Sopwith, Jagged Alliance, Space Invaders, Asteroids, Myst, Vampire Survivors, and so on, available to play at 30,000 feet. Maybe the airline could have these games hosted on their wifi network for downloading and playing in the browser of your personal pocket computer instead?
- aflag 4y ago
  I don't think adding a nice controller and cool games to play would be prohibitedly expensive. But it is an investment and someone needs to take the risk. It's entirely possible that they spend all this money creating this thing and no one uses and just watch films the whole trip. You're probably better off getting a switch or a steam deck. It has the added benefit that you can finish your game afterwards, after the flight.
  - tyingq 4y ago
    >I don't think adding a nice controller and cool games to play would be prohibitedly expensive. Everything like that on an aircraft (nice controller) has to be certified for every specific type, etc. Lots of process, paperwork, testing, etc.
    - nneonneo 4y ago
      I used to fly on planes that had “fancy” controllers - they had lots of buttons (full QWERTY keyboard, ABXY and d-pad, special buttons for controlling the lights and calling the attendants, etc.) and slotted into a latched recess right below the IFE. Something like this: https://www.vecteezy.com/photo/11024929 https://www.vecteezy.com/photo/11024929 There’s no analog stick and the ergonomics aren’t that great, but it’s definitely usable as a controller.
chrismorgan 4y ago
> Slick draggable scrolling is a key part of many screens in Delta’s in-flight entertainment system (complete with momentum-based flicks, over-scroll, page-snapping, etc). Because I didn’t have access to a component library and hadn’t thought to pre-install a good drag scroll library, I ended up having to build my own. Shouldn’t have been using any drag scroll library. This is very strongly something that you should never do on the web, because it doesn’t have the right primitives to make it anything other than bad. Scrolljacking is always bad. The proper solution is to just use normal scroll containers. Seriously. That provides what you want for touch-based scrolling, without ruining click-and-drag or scroll-wheel or keyboard scrolling. It gets you your momentum-based flicks, leaves overscroll behaviour up to the user agent (which will be bounce on some platforms like Apple’s I believe, a glowing indicator on others like Android I believe, and nothing on some if you’ve also hidden the scrollbar with `scrollbar-width: none`), and you can use CSS Scroll Snap to control snapping if you want (though frankly I think it’s almost always better not to try to control that stuff).
nirav72 4y ago
A few years when my children were young enough , I was shopping around for couple of those backseat LCD screens to plug a dvd player or media player into for long distance trips. Eventually I used a Raspberry pi and HDMI splitter back in those days to run Kodi. I spent quite a bit of time editing XML on a Kodi theme to disable some elements and make the UI as simple as possible. A kodi or other media player UI theme like this would've been great. 10-12 inch touch screen displays are relatively cheap now. Finding a Raspberry Pi 4 at reasonable price might be hard right now. But there are cheaper alternatives to that as well.
WirelessGigabit 4y ago
This is awesome. Looks great. Let's push it to production. -management of company I work at. We have an agreement. We keep our POCs so minimal they convey that they will break on everything except the happy path. As for designs, I believe we use Figma.
phantomathkg 4y ago
I think the minor gripe I have would be the demo does not handle the D-pad, which will be part of the user interface. D-pad will bring the extra challenge of performing spatial navigation.
boringg 4y ago
This is how they should do interviews. Hand a blank computer at nyc and get the results in sf. Job offer in hand or not.
- _nhynes 4y ago
  No offer, no worries. Catch the next interview back.
- aardvark179 4y ago
  Except, unless you are springing for business class, you are selecting against anybody who is tall, and probably anybody sitting behind somebody who puts their seat back. I know some people can work on planes, but I sure as hell cannot without contorting myself. If the person in front of me puts their seat back then I’m either looking over the top of their headrest, or putting my own seat back, and neither really works for using a laptop.
armchairhacker 4y ago
Here's a fun idea: ML model which takes an image of a UI (or mockup e.g. Figma) and recreates that UI in code. The ML model would infer callback/binding names, and any missing info like resize constraints, text / images / icons, buttons, etc.
- nirav72 4y ago
  Already somewhat possible. At least the UI generation part. Someone over on the r/chatgpt had a post where they took a SVG exported layout of a web UI and pasted the SVG markup in chatgpt. The prompt just asked it to convert svg into html divs. It in return generated the necessary html and css. Which came out to be remarkably identical to the original SVG. Amazing. Maybe with a little effort, someone could even get it to generate the callback/bindings. EDIT: Screencap of the reddit post here: https://i.redd.it/x7yza5pgftna1.png https://i.redd.it/x7yza5pgftna1.png
- deleted 4y ago
  [deleted]
semireg 4y ago
Something about the torture of flights makes this exercise sound as fun as playing coal miner in my backyard.
- nonethewiser 4y ago
  I can’t work on my laptop on a plane. The veiwing angle is atrocious. Can’t get the computer out away from me enough.
blululu 4y ago
This is a great idea for a challenge. I generally like to burn an hour or two on a cross country flight making a simple computer simulation. Some good ones include: a triple pendulum, tidal forces, 3 body problem, sand piles, traffic jams...). The UI actually comes together quite nicely when it is built with a powerful computer. On the low end inflight devices it is always so slow and clunky. A reminder to design for the actual device and not for the MacBook Pro running Figma.
deepsun 4y ago
> Rapidly translating UIs into code is a core skill for UX engineers Maybe I'm confusing the terms, but in our company UX engineers main job is to "figure out" the user flow. It's kinda UI but with mostly boxes (colors, fonts, animations will be added by designers/coders later). It's closer to product management than programming actually.
- seanmcdirmid 4y ago
  Are they confusing titles UX designers with UX (software) engineers? I mean, I guess, then its just a matter of everyone calling the role something different. My wife is a UXD, but she has never been called an engineer before.
  - pelagic_sky 4y ago
    FAANGs have UX Engineers whos main goal is to typically prototype ideas. The code they write is not always submitted to source. So a UXD works with a UXE to make ideas happen quickly to vet them out.
    - tristanb 4y ago
      Interesting, do those roles pay well? I’ve never heard of a role that would fit me at a FAANG and didn’t think it existed but that’s exactly what I do.
      - deepsun 4y ago
        As SWE I'd pay for UX the most of the team. If they did a good job, then coding it is simple. Like 50% of typical SWE work are to figure out the UX.
    - seanmcdirmid 4y ago
      I was a UX prototyper at Microsoft myself, that’s how I met my wife who was working as a UX designer in the same studio. We didn’t have a name for it, my official title was just SWE. I haven’t heard of UXE being a real title at the current FAANG I work for, but I no longer work in a design studio.
nonethewiser 4y ago
I would have been absolutely dead without access to Google, for CSS
- teddyh 4y ago
  Install Kiwix and a dump of MDN: https://library.kiwix.org/?lang=&q=MDN https://library.kiwix.org/?lang=&q=MDN
mLuby 4y ago
Related hot take: your dev environment should work in airplane mode. It's a forcing function for better test encapsulation and being more deliberate about external dependencies.
stevage 4y ago
No access to Copilot is also a big constraint.
gumby 4y ago
> Slick draggable scrolling is a key part of many screens in Delta’s in-flight entertainment system (complete with momentum-based flicks, over-scroll, page-snapping, etc). Then I'm going to have to fly Delta next month -- all the systems I've used have had such terrible latency that none of that was possible. I assumed it was crappy hardware.
- Firmwarrior 4y ago
  Don't get your hopes up too much..
- spike021 4y ago
  The last time I flew Singapore Airlines (maybe 3 years ago?) for an LAX->NRT flight and back, their system felt smoother than anything else I'd used on a plane before. IIRC it seemed to be built with Android or similar. Thought that was a pretty decent UI considering how bad in-flight systems usually are.
madsbuch 4y ago
A thing I have ben pondering on is whether in-flight entertainment is dead. I have not used it for several years. I get a much more consistent and higher quality experience using my phone and my Nintendo Switch along with my noise reducing headset. i am sure it still has value for some, but the value must be diminishing as more and more people can supply this entertainment themselves. And I believe it is not cheap to fit and maintain an entertainment system on an airplane.
- deleted 4y ago
  [deleted]
- hot_gril 4y ago
  It's the only convenient way to watch movies in-flight due to the lack of internet, and I usually see like half the plane using it. Guess you could pre-download from iTunes or less legit methods, but I doubt very many people maintain offline portable movie libraries.
  - hot_gril 4y ago
    Oh, some flights also have wifi and a local website to load a similar UI on your own device, but that can be unreliable. Last time I was using that on my laptop, I found out from the passenger next to me that it doesn't work on iPads. At least that way, your show doesn't get interrupted by announcements.
  - madsbuch 4y ago
    both HBO and Netflix support downloads. that is what I use.
- Al-Khwarizmi 4y ago
  I find it useful and always use it on long flights. For those of us who refuse to check in luggage unless it's strictly necessary, packing a console tends to be an unaffordable luxury. I could use my phone, of course. But for gaming, the state of mobile gaming is so atrocious with all the exploitative pay2win crap that I'd often rather play one of the pedestrian but innocent in-flight games. And for movies, at least in my view, the phone is uncomfortable with the small screen and the need to somehow hold it, I'd rather play a martial arts movie on the plane screen and relax. Of course, the fact that people find it useful doesn't mean that it cannot die - many of us also find having decent legroom useful and it's a thing of the past on most airlines...
zaps 4y ago
I love that Fearless is one of the in-flight movies. https://github.com/paulmand3l/delta-inflight/blob/main/src/assets/movies/posters/106881.jpg https://github.com/paulmand3l/delta-inflight/blob/main/src/a...
jscholes 4y ago
> No accessibility, ... you just want something you can run through a user test. As long as those users aren't disabled.

127 points by jonaraphael 4y ago

Recreating Delta's in-flight entertainment UI in ReactJS between on a flight between NYC and SFO. [Post by a friend of mine]

i2ksbu2b 4y ago

html width 100% height 100% overflow: hidden Please don't do this. I would love to try it, but it's unusable on phone even on desktop mode.

mynameisvlad 4y ago
Considering it was made in less than 7 hours with no access to the internet, I'd excuse hacks. Edit: Especially since it's called out as a constraint: > Don’t worry about production quality, just re-create as much of the look and feel of the UI as quickly as possible. No accessibility, responsive design, localization, etc; you just want something you can run through a user test.
- i2ksbu2b 4y ago
  Maybe should have spent less time to not have time to write overflow hidden then.
  - mynameisvlad 4y ago
    I mean they did it so they didn’t have to deal with a whole class of problems (making it look and work well on a phone). For a 7-hour hackathon that seems entirely reasonable.
    - notahacker 4y ago
      Realistic constraints too, since the original UI was designed to work with specific devices at specific screen sizes, not as responsive.
scohesc 4y ago
For a very _very_ amateur web developer, why would you not want to design a webpage like this? What difficulties would you run into if you designed a web-app in this way?

themanmaran 4y ago

Fun challenge, but reminds me of my major pet peeve with the Delta inflight UI: The landing page looks empty! I frequently think it's broken or still loading. All it features is the "New Releases - View" box in the bottom. I would expect to see something else there. Images of the first three featured movies perhaps? Anything other than the blank blue background. (Dear delta engineers on HN, please add some preview images to this page).

flutas 4y ago
> (Dear delta engineers on HN, please add some preview images to this page). Delta (most likely) doesn't have actual engineers that handle the day to day work on the IFE systems, most of it is outsourced. I can't remember if they were a client or a not, but a lot of IFE systems (even byod ones) are sold by Panasonic and they basically run on a system that somehow felt worse than a RPI 3, and the bugs.... while working on a system I saw the same IP assigned multiple times to client devices. Also, a fun fact I recall. Last I heard (as of about 2018) media updates on planes required a tech to meet the plane at an airport and hot swap a HDD in a special enclosure. https://www.panasonic.aero/our-offerings/ https://www.panasonic.aero/our-offerings/
- jaywalk 4y ago
  Delta's latest IFE is developed in-house and is actually quite nice. Their previous IFE (currently on most planes) is Panasonic.

hypertexthero 4y ago

Here’s another challenge: Create fun games to play in these flights. The games available are usually poor and slow. Is it a technical limitation such as too many screens and not enough processing power to go around? Or maybe no good HID (Human Interface Device) controllers? Touch-screens should be okay, especially for turn-based games, but maybe continuously pushing your finger against the screen would make the person seated in front angry after some time? Perhaps Management doesn’t realize that video games are a popular thing? Or is this just too much of a first-world problem and not worth the effort from the airline companies? I’d love to see games like Rogue, X-Com, Sopwith, Jagged Alliance, Space Invaders, Asteroids, Myst, Vampire Survivors, and so on, available to play at 30,000 feet. Maybe the airline could have these games hosted on their wifi network for downloading and playing in the browser of your personal pocket computer instead?

aflag 4y ago
I don't think adding a nice controller and cool games to play would be prohibitedly expensive. But it is an investment and someone needs to take the risk. It's entirely possible that they spend all this money creating this thing and no one uses and just watch films the whole trip. You're probably better off getting a switch or a steam deck. It has the added benefit that you can finish your game afterwards, after the flight.
- tyingq 4y ago
  >I don't think adding a nice controller and cool games to play would be prohibitedly expensive. Everything like that on an aircraft (nice controller) has to be certified for every specific type, etc. Lots of process, paperwork, testing, etc.
  - nneonneo 4y ago
    I used to fly on planes that had “fancy” controllers - they had lots of buttons (full QWERTY keyboard, ABXY and d-pad, special buttons for controlling the lights and calling the attendants, etc.) and slotted into a latched recess right below the IFE. Something like this: https://www.vecteezy.com/photo/11024929 https://www.vecteezy.com/photo/11024929 There’s no analog stick and the ergonomics aren’t that great, but it’s definitely usable as a controller.

chrismorgan 4y ago

> Slick draggable scrolling is a key part of many screens in Delta’s in-flight entertainment system (complete with momentum-based flicks, over-scroll, page-snapping, etc). Because I didn’t have access to a component library and hadn’t thought to pre-install a good drag scroll library, I ended up having to build my own. Shouldn’t have been using any drag scroll library. This is very strongly something that you should never do on the web, because it doesn’t have the right primitives to make it anything other than bad. Scrolljacking is always bad. The proper solution is to just use normal scroll containers. Seriously. That provides what you want for touch-based scrolling, without ruining click-and-drag or scroll-wheel or keyboard scrolling. It gets you your momentum-based flicks, leaves overscroll behaviour up to the user agent (which will be bounce on some platforms like Apple’s I believe, a glowing indicator on others like Android I believe, and nothing on some if you’ve also hidden the scrollbar with `scrollbar-width: none`), and you can use CSS Scroll Snap to control snapping if you want (though frankly I think it’s almost always better not to try to control that stuff).

nirav72 4y ago

A few years when my children were young enough , I was shopping around for couple of those backseat LCD screens to plug a dvd player or media player into for long distance trips. Eventually I used a Raspberry pi and HDMI splitter back in those days to run Kodi. I spent quite a bit of time editing XML on a Kodi theme to disable some elements and make the UI as simple as possible. A kodi or other media player UI theme like this would've been great. 10-12 inch touch screen displays are relatively cheap now. Finding a Raspberry Pi 4 at reasonable price might be hard right now. But there are cheaper alternatives to that as well.

WirelessGigabit 4y ago

This is awesome. Looks great. Let's push it to production. -management of company I work at. We have an agreement. We keep our POCs so minimal they convey that they will break on everything except the happy path. As for designs, I believe we use Figma.

phantomathkg 4y ago

I think the minor gripe I have would be the demo does not handle the D-pad, which will be part of the user interface. D-pad will bring the extra challenge of performing spatial navigation.

boringg 4y ago

This is how they should do interviews. Hand a blank computer at nyc and get the results in sf. Job offer in hand or not.

_nhynes 4y ago
No offer, no worries. Catch the next interview back.
aardvark179 4y ago
Except, unless you are springing for business class, you are selecting against anybody who is tall, and probably anybody sitting behind somebody who puts their seat back. I know some people can work on planes, but I sure as hell cannot without contorting myself. If the person in front of me puts their seat back then I’m either looking over the top of their headrest, or putting my own seat back, and neither really works for using a laptop.

armchairhacker 4y ago

Here's a fun idea: ML model which takes an image of a UI (or mockup e.g. Figma) and recreates that UI in code. The ML model would infer callback/binding names, and any missing info like resize constraints, text / images / icons, buttons, etc.

nirav72 4y ago
Already somewhat possible. At least the UI generation part. Someone over on the r/chatgpt had a post where they took a SVG exported layout of a web UI and pasted the SVG markup in chatgpt. The prompt just asked it to convert svg into html divs. It in return generated the necessary html and css. Which came out to be remarkably identical to the original SVG. Amazing. Maybe with a little effort, someone could even get it to generate the callback/bindings. EDIT: Screencap of the reddit post here: https://i.redd.it/x7yza5pgftna1.png https://i.redd.it/x7yza5pgftna1.png
deleted 4y ago
[deleted]

semireg 4y ago

Something about the torture of flights makes this exercise sound as fun as playing coal miner in my backyard.

nonethewiser 4y ago
I can’t work on my laptop on a plane. The veiwing angle is atrocious. Can’t get the computer out away from me enough.

blululu 4y ago

This is a great idea for a challenge. I generally like to burn an hour or two on a cross country flight making a simple computer simulation. Some good ones include: a triple pendulum, tidal forces, 3 body problem, sand piles, traffic jams...). The UI actually comes together quite nicely when it is built with a powerful computer. On the low end inflight devices it is always so slow and clunky. A reminder to design for the actual device and not for the MacBook Pro running Figma.

deepsun 4y ago

> Rapidly translating UIs into code is a core skill for UX engineers Maybe I'm confusing the terms, but in our company UX engineers main job is to "figure out" the user flow. It's kinda UI but with mostly boxes (colors, fonts, animations will be added by designers/coders later). It's closer to product management than programming actually.

seanmcdirmid 4y ago
Are they confusing titles UX designers with UX (software) engineers? I mean, I guess, then its just a matter of everyone calling the role something different. My wife is a UXD, but she has never been called an engineer before.
- pelagic_sky 4y ago
  FAANGs have UX Engineers whos main goal is to typically prototype ideas. The code they write is not always submitted to source. So a UXD works with a UXE to make ideas happen quickly to vet them out.
  - tristanb 4y ago
    Interesting, do those roles pay well? I’ve never heard of a role that would fit me at a FAANG and didn’t think it existed but that’s exactly what I do.
    - deepsun 4y ago
      As SWE I'd pay for UX the most of the team. If they did a good job, then coding it is simple. Like 50% of typical SWE work are to figure out the UX.
  - seanmcdirmid 4y ago
    I was a UX prototyper at Microsoft myself, that’s how I met my wife who was working as a UX designer in the same studio. We didn’t have a name for it, my official title was just SWE. I haven’t heard of UXE being a real title at the current FAANG I work for, but I no longer work in a design studio.

nonethewiser 4y ago

I would have been absolutely dead without access to Google, for CSS

teddyh 4y ago
Install Kiwix and a dump of MDN: https://library.kiwix.org/?lang=&q=MDN https://library.kiwix.org/?lang=&q=MDN

mLuby 4y ago

Related hot take: your dev environment should work in airplane mode. It's a forcing function for better test encapsulation and being more deliberate about external dependencies.

stevage 4y ago

No access to Copilot is also a big constraint.

gumby 4y ago

> Slick draggable scrolling is a key part of many screens in Delta’s in-flight entertainment system (complete with momentum-based flicks, over-scroll, page-snapping, etc). Then I'm going to have to fly Delta next month -- all the systems I've used have had such terrible latency that none of that was possible. I assumed it was crappy hardware.

Firmwarrior 4y ago
Don't get your hopes up too much..
spike021 4y ago
The last time I flew Singapore Airlines (maybe 3 years ago?) for an LAX->NRT flight and back, their system felt smoother than anything else I'd used on a plane before. IIRC it seemed to be built with Android or similar. Thought that was a pretty decent UI considering how bad in-flight systems usually are.

madsbuch 4y ago

A thing I have ben pondering on is whether in-flight entertainment is dead. I have not used it for several years. I get a much more consistent and higher quality experience using my phone and my Nintendo Switch along with my noise reducing headset. i am sure it still has value for some, but the value must be diminishing as more and more people can supply this entertainment themselves. And I believe it is not cheap to fit and maintain an entertainment system on an airplane.

deleted 4y ago
[deleted]
hot_gril 4y ago
It's the only convenient way to watch movies in-flight due to the lack of internet, and I usually see like half the plane using it. Guess you could pre-download from iTunes or less legit methods, but I doubt very many people maintain offline portable movie libraries.
- hot_gril 4y ago
  Oh, some flights also have wifi and a local website to load a similar UI on your own device, but that can be unreliable. Last time I was using that on my laptop, I found out from the passenger next to me that it doesn't work on iPads. At least that way, your show doesn't get interrupted by announcements.
- madsbuch 4y ago
  both HBO and Netflix support downloads. that is what I use.
Al-Khwarizmi 4y ago
I find it useful and always use it on long flights. For those of us who refuse to check in luggage unless it's strictly necessary, packing a console tends to be an unaffordable luxury. I could use my phone, of course. But for gaming, the state of mobile gaming is so atrocious with all the exploitative pay2win crap that I'd often rather play one of the pedestrian but innocent in-flight games. And for movies, at least in my view, the phone is uncomfortable with the small screen and the need to somehow hold it, I'd rather play a martial arts movie on the plane screen and relax. Of course, the fact that people find it useful doesn't mean that it cannot die - many of us also find having decent legroom useful and it's a thing of the past on most airlines...

zaps 4y ago

I love that Fearless is one of the in-flight movies. https://github.com/paulmand3l/delta-inflight/blob/main/src/assets/movies/posters/106881.jpg https://github.com/paulmand3l/delta-inflight/blob/main/src/a...

jscholes 4y ago

> No accessibility, ... you just want something you can run through a user test. As long as those users aren't disabled.