Fix shorts

[fire332]

This PR is built on top of #234. That should be dealt with before this one.

Fixes #210, fixes #211, fixes #219

Changes

• Allow using TypeScript in app code by adding TypeScript support to babel.
• Fix thumbnails in the shorts shelf.
• Fix stretched/offset shorts player by changing the screensaver fix to not apply when not using the watch (full-screen player) page.
• Disable "Remove Shorts from subscriptions" by default.

[fire332]

Whoops. Had a brain fart when refactoring the screensaver fix.

[cremor]

Thanks for working on this problem!
I've tested your changes (with a build based on #236) any I can indeed see the video of shorts again. But the video is not placed exactly in the correct area. There is a part of black space on the left side of the video area, and the right side of the video is cut off.

[fire332]

@cremor can you take a picture?

[cremor]

Sure. This is on an OLED C9 with WebOS 4.10.0:

[fire332]

How did you take this picture? It looks more like the video is in the correct spot but the entire UI is offset

[cremor]

It's just a photo I took with my phone. The short video was paused there, but that doesn't make a difference.
The thumbnail, which is visible for a moment before the short video playback starts, is not cut off. Only the actual video stream is.

[cremor]

It looks more like the video is in the correct spot but the entire UI is offset

You are right. The white border isn't in the center of the screen. The video itself seems to be in the center.
But what could cause this? I never had this problem before the shorts video stopped being shown a few weeks/months back.

[fire332]

Do you know how to use the web inspector tool? Can you check the computed styles of the top-most element that's offset incorrectly?

[cremor]

No, but I think I could figure it out with a few hints. What software would I use to do that? I've only used WebOS Device Manager to install the app on the TV.

[fire332]

You need node.js 22 LTS installed. Then download a copy of this repository and open the folder in terminal. Then run:

npm install
ares-inspect -a youtube.leanback.v4