search

aleksilassila / reiverr

Reiverr is a clean combined interface for Jellyfin, TMDB, Radarr and Sonarr, as well as a replacement to Overseerr
GNU Affero General Public License v3.0
1.46k stars 44 forks source link

Custom video controls and quality selector #62

Closed oxixes closed 1 year ago

oxixes commented 1 year ago

This PR replaces the browser default video controls with custom ones, that are closer to the theme of the app, as well as allow us to personalise them much more in the future.

It also provides a quality selector, that changes the maximum bitrate of the streaming requested to Jellyfin. It's important to mention that the actual resolution written may not match what is actually playing, as the server decides the best resolution according to the specified bitrate (jellyfin does the same).

This PR has been tested both in Firefox 116.0.2 on Windows 11 as well as Safari on iPadOS 16.3, where it works flawlessly, as far as I have seen using the app. It does NOT work on iPhone, since the stream does not play, probably because iOS (not iPadOS) does not support Media Source Extensions, but just raw Apple HLS, but the buttons and behavior of the things that can be tested seems to be fine (it was fixed). Any further testing is highly appreciated.

Any suggestions or changes are highly appreciated and I will be more than happy on fixing any issues or improving the way I coded this.

Closes #17

aleksilassila commented 1 year ago

Looks good! Is this ready to merge?

oxixes commented 1 year ago

Yes, it is ready to merge (the last commit is to fix a problem where the maximum quality could not show up in some movies). The next step would be to add support for audio and subtitle selection.

aleksilassila commented 1 year ago

Great, I'll go through it and merge asap.

Quick question, does it automatically switch between direct play and transcoding? Furthermore, do you happen to know how the "auto" option in jellyfin works? Does it always use direct play?

oxixes commented 1 year ago

Yes, it handles direct play. If the bitrate of the media is less than the specified bitrate, as well as being directly compatible with the device, the server should tell the client that direct play is supported, and only transcode if the requested bitrate is lower.

For the auto option, the web does a speed test with the Jellyfin server by downloading some data, and from that it determines the most suitable bitrate. That could be implemented in the future too.

aleksilassila commented 1 year ago

Do you think you'd be able to fix the playback on iOS before I merge? I noticed that the playback did work there before the custom player, but after your changes the video plays only as transcoded if I'm not mistaken, the playback always starts from the beginning and seeking doesn't work. I looked into it but can't seem to figure out what's causing those issues.

Cheers

oxixes commented 1 year ago

When you say seeking does not work, you mean on iOS or everywhere?

Edit: After some testing, it seems that HLS.js is causing problems on iOS, and giving the raw HLS link to the video element works, since iOS does support HLS natively. I'll keep testing to solve the rest of the problems.

aleksilassila commented 1 year ago

👍

I ran into issues only on iOS

oxixes commented 1 year ago

I already fixed it, or at least it works on my end (Safari on iOS 17 beta 5). The seeking issue was weird, as the seek bar became stalled if the video currentTime property was set before the video loaded, but I fixed it assigning its value after loading. I also added some cosmetic changes to allow fullscreen on iPhone, as the general API is not supported there.

oxixes commented 1 year ago

I will add audio and subtitle support soon. For audio the logic is the same as the quality change. For subtitles a library like JavascriptSubtitlesOctopus should be used for SSA/ASS subtitles, with optional transcoding for devices where it is not compatible / can't show in fullscreen (i.e iPhone).