Update packages, add localisation, add search

[EDIflyer]

Apologies @JaxonWright - I know this is a big of a mega PR but I got into a bit of a run yesterday evening!

I've built and deployed it to my own server and it seems to work well on my Model 3 but appreciate needs checking.

Fixes #51 (add localisation)
Fixes #6 (add search)

At a high level these were the main changes made:

• updated dependencies
• addition of a Dockerfile to allow an easy build for deployment - I've also written a deployment script I use on my server but didn't want to add that to the repo in case it was unwanted/too localised to me (e.g., I use Nginx Proxy Manager), have attached instead! - testube.txt (just change extension to .sh and chmod +x to run)
• added a search box (including option to include hidden services)
• added localisation - I did this by allowing services to be noted as Worldwide, US or UK - I went through and allocated each one, hopefully correctly! It should be easily extensible for other countries. I also removed the reset option and instead offered select all/select none for each region (as well as an added an unfiltered option to show all services). Switching between regions is possible when selecting services, changes only happen when you hit save
• added UK services
• updated/added a few images for services
• fixed the font colour on the about page
• added a 'no' option for the full screen popup
• added ability in settings to remove horizontal scrolling as it seems a shame to have that if you've lots of one service but not many of others, so they now just wrap if you switch that off
• added ability to define a different target URL for when heading off to YouTube to go fullscreen (to allow for local deployment)

A more detailed Copilot summary is as follows:
This pull request introduces several major improvements to the Angular application's infrastructure, user experience, and dependency management. The most significant changes include the addition of Docker support for building and serving the app with nginx, a comprehensive redesign of the settings dialog with new region and layout preferences, and an upgrade of Angular and related dependencies to version 20. These updates enhance deployment flexibility, user customization, and overall maintainability.

Infrastructure & Deployment

• Added a multi-stage Dockerfile for building the Angular app and serving it with nginx, including a custom nginx.conf for optimized routing, caching, and security headers. (Dockerfile, nginx.conf) [1] [2]
• Created a .dockerignore file to exclude unnecessary files and directories from Docker builds, improving build performance and security. (.dockerignore)

User Experience: Settings Dialog

• Redesigned the settings dialog to use tabs for "Services" and "Preferences," added region selection with flag icons, improved source visibility controls, and enabled layout and fullscreen URL customization. (settings-dialog.component.html, settings-dialog.component.scss) [1] [2] [3]

Dependency Management

• Upgraded Angular and related dependencies to version 20, and updated other libraries to their latest versions for improved performance, security, and compatibility. (package.json) [1] [2]

Angular Project Configuration

• Added schematics configuration to angular.json for more consistent component, directive, and service generation, improving developer experience. (angular.json)

Component & Module Enhancements

• Improved the fullscreen prompt in AppComponent to use a customizable URL from the settings, and added support for MatSelectModule in the app module for the new region selection UI. (app.component.ts, app.module.ts) [1] [2] [3] [4]

[JaxonWright]

Wow this is crazy! I don't have time right this moment to look it over. I will provide more detailed feedback (if any) & testing tomorrow. But, on first glance, I don't think that the Docker files are necessary. The actual website is deployed automatically via Cloudflare Pages, so I don't need that stuff in the repository. Everything else sounds great, though, assuming they work as described!

[EDIflyer]

Haha yep sorry, I know it's a lot! No rush at all. I mainly added Docker for those wishing to self host just to make it easier (I'm running it via that method at https://testube.ediflyer.net), but could have that and the deployment script just in the documentation if preferred.

[JaxonWright]

Here are my observations.

• All of the services are now alphabetical. Please revert this, as I intentionally ordered them by popularity (according to my perception). This way, YouTube and Netflix are not way off-screen when they're the most common items selected.

• The Application Settings dialog has double vertical scrolling. Limit the height of the tab group so that it doesn't happen.

• The Application Settings dialog has actions in the top right. They should be at the bottom in a MatDialogActions container

• The Localization is not correct. For example, why is BritBox a US service?

• It does not make sense to exclude "Worldwide" sources when selecting a specific one.

• Applying localization does not do anything

• The search button is out of place. It should be next to the Custom URL option, and each should hide when the other is selected.

[EDIflyer]

Thanks @JaxonWright. Just about to go to bed (midnight here) but quick thoughts...

Here are my observations.

• All of the services are now alphabetical. Please revert this, as I intentionally ordered them by popularity (according to my perception). This way, YouTube and Netflix are not way off-screen when they're the most common items selected.

Ah OK I couldn't quite work out what the order was so I made them alphabetical - I only subscribe to a small subset of the services myself so found it easier to find things with an alphabetical sort. It might take a while to sort back but could be done.

• The Application Settings dialog has double vertical scrolling. Limit the height of the tab group so that it doesn't happen.

I had quite a bit of trouble trying to sort this, can look again but found it quite tricky!

• The Application Settings dialog has actions in the top right. They should be at the bottom in a MatDialogActions container

I'd done this on purpose to make use of the otherwise wasted space at the top right of the box. When I first did it there was a lot of dead space at the bottom to the left of the action button - given the limited vertical screen real estate in the Tesla I was trying to make the most of that?

• The Localization is not correct. For example, why is BritBox a US service?

It should probably be Worldwide I guess, but definitely not UK. For licensing reasons the service isn't available in the UK (it's part of the ITV streaming offering here IIRC) - see https://en.wikipedia.org/wiki/BritBox

• It does not make sense to exclude "Worldwide" sources when selecting a specific one.

Perhaps it needs a different name but I'm trying to differentiate between services that are only available in one country vs those available in multiple countries. That's why I also added the 'no filter' option to show all at once.

• Applying localization does not do anything

I don't quite follow? Picking a different region filters the list of services, you can then pick select all/select none to bulk change, and/or click individual ones. You can move between different filter options picking items and then when you hit save they're displayed. I found the easiest way if you only want a few services is to go unfiltered, 'select none', then re-add the ones you want.

• The search button is out of place. It should be next to the Custom URL option, and each should hide when the other is selected.

Yep agree it could move to the left, I think it's just I had the URL bit open at the time so no space there.

Let me know what you think re the above - if with a few tweaks you think it would be good enough to merge I'm happy to try and do so but if too many things don't quite fit for you (it's your project after all!) then just say.

[JaxonWright]

I don't quite follow? Picking a different region filters the list of services, you can then pick select all/select none to bulk change, and/or click individual ones.

Sure, it filters the list in the dialog, but I could never get it to apply to the actual data on the page. Yes, I clicked Save.

[EDIflyer]

Sorry for the delay looking at this - been kept busy with work!

I've now made the following updates:

• services back to being sorted by your previous popularity order by default, however now an option in prefs to switch to alphabetical
• search box moved to left
• I've added an X option for custom URL so this can be closed again, search box moves out OK which this expanded too
• I've updated the default URL when opening fullscreen to be the one it is hosted on (as that makes more sense for custom deployments), however users can still manually change this if they wish

I've redeployed to my personal server and it's working perfectly re filtering, so I'm afraid I can't replicate that. Example of it working fine for me: